aicq-openclaw-plugin 1.0.2 → 1.0.4

package/dist/index.js

@@ -7769,6 +7769,7 @@ var require_dist = __commonJS({
 // dist/index.js
 var dotenv = __toESM(require_main(), 1);
 import * as path6 from "path";
+import * as http from "http";
 import { definePluginEntry } from "openclaw/plugin-sdk/core";
 
 // dist/config.js
@@ -9816,670 +9817,859 @@ var CSS = `
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 :root {
   --bg: #0f1117; --bg2: #1a1d27; --bg3: #242836; --bg4: #2e3347;
-  --text: #e4e6ef; --text2: #9499b3; --text3: #5c6080;
-  --accent: #e04040; --accent2: #ff5a5a; --ok: #34d399; --warn: #fbbf24;
-  --danger: #ef4444; --info: #60a5fa; --border: #2e3347; --radius: 8px;
-  --shadow: 0 2px 12px rgba(0,0,0,.3);
+  --bg5: #353a50; --text: #e4e6ef; --text2: #9499b3; --text3: #5c6080;
+  --accent: #6366f1; --accent2: #818cf8; --accent-bg: rgba(99,102,241,.12);
+  --ok: #34d399; --ok-bg: rgba(52,211,153,.12); --warn: #fbbf24; --warn-bg: rgba(251,191,36,.12);
+  --danger: #ef4444; --danger-bg: rgba(239,68,68,.12); --info: #60a5fa; --info-bg: rgba(96,165,250,.12);
+  --border: #2e3347; --radius: 8px; --radius-lg: 12px; --shadow: 0 2px 12px rgba(0,0,0,.3);
+  --sidebar-w: 240px; --header-h: 56px;
+  --transition: .2s cubic-bezier(.4,0,.2,1);
 }
-html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5; }
+html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.6; overflow: hidden; }
 a { color: var(--info); text-decoration: none; }
-button { font: inherit; cursor: pointer; border: none; border-radius: var(--radius); padding: 6px 14px; font-size: 13px; transition: background .15s, opacity .15s; }
-button:disabled { opacity: .45; cursor: default; }
-.btn { background: var(--bg3); color: var(--text); }
-.btn:hover:not(:disabled) { background: var(--bg4); }
-.btn-primary { background: var(--accent); color: #fff; }
-.btn-primary:hover:not(:disabled) { background: var(--accent2); }
-.btn-danger { background: #7f1d1d; color: #fca5a5; }
-.btn-danger:hover:not(:disabled) { background: #991b1b; }
-.btn-ok { background: #065f46; color: #6ee7b7; }
-.btn-ok:hover:not(:disabled) { background: #064e3b; }
-.btn-sm { padding: 3px 10px; font-size: 12px; }
-.btn-ghost { background: transparent; color: var(--text2); }
-.btn-ghost:hover:not(:disabled) { background: var(--bg3); color: var(--text); }
-
-input, select, textarea {
-  font: inherit; background: var(--bg); color: var(--text); border: 1px solid var(--border);
-  border-radius: var(--radius); padding: 7px 12px; width: 100%; outline: none;
-  transition: border-color .15s;
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: var(--bg5); }
+
+/* Layout */
+.app { display: flex; height: 100vh; width: 100vw; overflow: hidden; }
+
+/* Sidebar */
+.sidebar {
+  width: var(--sidebar-w); min-width: var(--sidebar-w); height: 100vh;
+  background: var(--bg2); border-right: 1px solid var(--border);
+  display: flex; flex-direction: column; transition: width var(--transition), min-width var(--transition);
+  z-index: 20; overflow: hidden;
+}
+.sidebar.collapsed { width: 60px; min-width: 60px; }
+.sidebar.collapsed .nav-label, .sidebar.collapsed .sidebar-header-text, .sidebar.collapsed .sidebar-footer-text { display: none; }
+.sidebar.collapsed .sidebar-header { justify-content: center; padding: 0 8px; }
+.sidebar.collapsed .nav-item { justify-content: center; padding: 10px 0; }
+.sidebar.collapsed .nav-item .nav-icon { margin-right: 0; }
+
+.sidebar-header {
+  display: flex; align-items: center; gap: 12px; padding: 16px 20px;
+  border-bottom: 1px solid var(--border); min-height: var(--header-h);
+}
+.sidebar-logo {
+  width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, var(--accent), #a855f7);
+  display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #fff; flex-shrink: 0;
+}
+.sidebar-header-text h1 { font-size: 14px; font-weight: 700; line-height: 1.2; }
+.sidebar-header-text span { font-size: 11px; color: var(--text3); }
+
+.sidebar-nav { flex: 1; overflow-y: auto; padding: 8px; }
+.nav-group { margin-bottom: 4px; }
+.nav-group-title { font-size: 10px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: .8px; padding: 12px 12px 6px; white-space: nowrap; }
+.nav-item {
+  display: flex; align-items: center; padding: 9px 12px; border-radius: var(--radius);
+  cursor: pointer; transition: all var(--transition); color: var(--text2); white-space: nowrap;
+  position: relative; user-select: none;
+}
+.nav-item:hover { background: var(--bg3); color: var(--text); }
+.nav-item.active { background: var(--accent-bg); color: var(--accent2); }
+.nav-item.active::before {
+  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
+  width: 3px; height: 20px; background: var(--accent); border-radius: 0 2px 2px 0;
+}
+.nav-icon { width: 20px; text-align: center; margin-right: 10px; font-size: 15px; flex-shrink: 0; }
+.nav-label { font-size: 13px; font-weight: 500; }
+.nav-badge {
+  margin-left: auto; background: var(--accent); color: #fff; font-size: 10px; font-weight: 600;
+  padding: 1px 7px; border-radius: 10px; min-width: 18px; text-align: center;
 }
-input:focus, select:focus, textarea:focus { border-color: var(--accent); }
-input::placeholder { color: var(--text3); }
-select { cursor: pointer; appearance: auto; }
 
-.topbar {
-  display: flex; align-items: center; gap: 16px; padding: 12px 24px;
+.sidebar-footer {
+  padding: 12px 16px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 8px;
+  cursor: pointer; transition: background var(--transition); white-space: nowrap;
+}
+.sidebar-footer:hover { background: var(--bg3); }
+.sidebar-footer-text { font-size: 11px; color: var(--text3); }
+
+/* Main area */
+.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
+.main-header {
+  height: var(--header-h); min-height: var(--header-h);
+  display: flex; align-items: center; gap: 16px; padding: 0 24px;
   background: var(--bg2); border-bottom: 1px solid var(--border);
-  position: sticky; top: 0; z-index: 10;
 }
-.topbar h1 { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
-.topbar h1 .logo { width: 24px; height: 24px; border-radius: 6px; background: var(--accent); display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; }
-.topbar .status { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text2); }
-.topbar .dot { width: 8px; height: 8px; border-radius: 50%; }
+.toggle-btn {
+  width: 32px; height: 32px; border-radius: 6px; background: var(--bg3);
+  display: grid; place-items: center; cursor: pointer; color: var(--text2); border: none;
+  font-size: 16px; transition: all var(--transition);
+}
+.toggle-btn:hover { background: var(--bg4); color: var(--text); }
+.main-header h2 { font-size: 16px; font-weight: 600; flex: 1; }
+.header-status { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text2); }
+.dot { width: 8px; height: 8px; border-radius: 50%; }
 .dot-ok { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
 .dot-err { background: var(--danger); box-shadow: 0 0 6px var(--danger); }
-
-.tabs {
-  display: flex; gap: 0; background: var(--bg2); border-bottom: 1px solid var(--border);
-  padding: 0 24px;
-}
-.tab-btn {
-  padding: 10px 20px; font-size: 13px; font-weight: 500; color: var(--text2);
-  border-radius: 0; border-bottom: 2px solid transparent;
-  background: transparent; transition: all .15s;
+.dot-warn { background: var(--warn); box-shadow: 0 0 6px var(--warn); }
+.header-actions { display: flex; gap: 8px; }
+
+.main-content { flex: 1; overflow-y: auto; padding: 24px; }
+.page { display: none; }
+.page.active { display: block; animation: fadeIn .2s ease-out; }
+@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
+
+/* Components */
+.btn {
+  font: inherit; cursor: pointer; border: none; border-radius: var(--radius);
+  padding: 7px 16px; font-size: 13px; font-weight: 500; transition: all var(--transition);
+  display: inline-flex; align-items: center; gap: 6px;
 }
-.tab-btn:hover { color: var(--text); background: var(--bg); }
-.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
+.btn:disabled { opacity: .45; cursor: default; }
+.btn-default { background: var(--bg3); color: var(--text); }
+.btn-default:hover:not(:disabled) { background: var(--bg4); }
+.btn-primary { background: var(--accent); color: #fff; }
+.btn-primary:hover:not(:disabled) { background: var(--accent2); }
+.btn-danger { background: var(--danger-bg); color: #fca5a5; border: 1px solid rgba(239,68,68,.2); }
+.btn-danger:hover:not(:disabled) { background: rgba(239,68,68,.2); }
+.btn-ok { background: var(--ok-bg); color: #6ee7b7; border: 1px solid rgba(52,211,153,.2); }
+.btn-ok:hover:not(:disabled) { background: rgba(52,211,153,.2); }
+.btn-warn { background: var(--warn-bg); color: #fde68a; border: 1px solid rgba(251,191,36,.2); }
+.btn-warn:hover:not(:disabled) { background: rgba(251,191,36,.2); }
+.btn-ghost { background: transparent; color: var(--text2); }
+.btn-ghost:hover:not(:disabled) { background: var(--bg3); color: var(--text); }
+.btn-sm { padding: 4px 10px; font-size: 12px; }
+.btn-icon { width: 32px; height: 32px; padding: 0; justify-content: center; border-radius: 6px; }
 
-.content { padding: 24px; max-width: 1200px; }
-.content.hidden { display: none; }
+input, select, textarea {
+  font: inherit; background: var(--bg); color: var(--text); border: 1px solid var(--border);
+  border-radius: var(--radius); padding: 8px 12px; width: 100%; outline: none; transition: border-color var(--transition);
+}
+input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
+input::placeholder, textarea::placeholder { color: var(--text3); }
+select { cursor: pointer; }
+textarea { resize: vertical; min-height: 80px; }
 
 .card {
-  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius);
+  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg);
   padding: 20px; margin-bottom: 16px;
 }
-.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
-.card-title { font-size: 15px; font-weight: 600; }
+.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; }
+.card-title { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
+.card-desc { font-size: 12px; color: var(--text3); margin-top: 2px; }
 
 .toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
+.search-box { position: relative; min-width: 220px; }
+.search-box input { padding-left: 34px; }
+.search-box::before { content: '\u{1F50D}'; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 13px; pointer-events: none; }
+.filter-group { display: flex; gap: 4px; }
+.filter-btn { padding: 4px 12px; font-size: 12px; border-radius: 20px; border: 1px solid var(--border); background: transparent; color: var(--text2); cursor: pointer; transition: all var(--transition); }
+.filter-btn.active, .filter-btn:hover { background: var(--accent-bg); color: var(--accent2); border-color: var(--accent); }
 
 table { width: 100%; border-collapse: collapse; font-size: 13px; }
-thead th { text-align: left; padding: 8px 12px; color: var(--text2); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; border-bottom: 1px solid var(--border); white-space: nowrap; }
-tbody td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
+thead th {
+  text-align: left; padding: 10px 14px; color: var(--text3); font-weight: 600; font-size: 11px;
+  text-transform: uppercase; letter-spacing: .5px; border-bottom: 1px solid var(--border); white-space: nowrap;
+  position: sticky; top: 0; background: var(--bg2); z-index: 1;
+}
+tbody td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
+tbody tr { transition: background var(--transition); }
 tbody tr:hover { background: var(--bg3); }
-.mono { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12px; color: var(--text2); word-break: break-all; }
-.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 500; }
-.badge-ok { background: #065f46; color: #6ee7b7; }
-.badge-warn { background: #78350f; color: #fde68a; }
-.badge-info { background: #1e3a5f; color: #93c5fd; }
-.badge-danger { background: #7f1d1d; color: #fca5a5; }
+.mono { font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; font-size: 12px; color: var(--text2); word-break: break-all; }
+
+.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; }
+.badge-ok { background: var(--ok-bg); color: var(--ok); }
+.badge-warn { background: var(--warn-bg); color: var(--warn); }
+.badge-danger { background: var(--danger-bg); color: var(--danger); }
+.badge-info { background: var(--info-bg); color: var(--info); }
 .badge-ghost { background: var(--bg3); color: var(--text2); }
+.badge-accent { background: var(--accent-bg); color: var(--accent2); }
 
-.empty { text-align: center; padding: 48px 20px; color: var(--text3); }
-.empty .icon { font-size: 40px; margin-bottom: 12px; opacity: .4; }
-.empty p { font-size: 14px; }
+.tag { display: inline-flex; align-items: center; gap: 4px; background: var(--bg3); padding: 2px 8px; border-radius: 4px; font-size: 11px; color: var(--text2); }
 
+/* Stats */
+.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 24px; }
+.stat-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; transition: border-color var(--transition); }
+.stat-card:hover { border-color: var(--accent); }
+.stat-icon { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; font-size: 16px; margin-bottom: 10px; }
+.stat-label { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
+.stat-value { font-size: 24px; font-weight: 700; margin-top: 2px; line-height: 1.2; }
+.stat-sub { font-size: 11px; color: var(--text3); margin-top: 4px; }
+
+/* Provider grid */
+.provider-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
+.provider-card {
+  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg);
+  padding: 18px; transition: all var(--transition); cursor: pointer;
+}
+.provider-card:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow); }
+.provider-card .prov-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
+.provider-card .prov-name { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; }
+.provider-card .prov-desc { font-size: 12px; color: var(--text3); margin-bottom: 10px; }
+.provider-card .prov-model { font-size: 11px; color: var(--text2); background: var(--bg3); padding: 3px 8px; border-radius: 4px; display: inline-block; }
+.provider-card .prov-actions { margin-top: 12px; display: flex; gap: 6px; }
+
+/* Modal */
 .modal-overlay {
-  position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex;
+  position: fixed; inset: 0; background: rgba(0,0,0,.65); display: flex;
   align-items: center; justify-content: center; z-index: 100;
+  animation: fadeIn .15s ease-out;
 }
 .modal-overlay.hidden { display: none; }
 .modal {
-  background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
-  padding: 24px; width: 90%; max-width: 480px; box-shadow: var(--shadow);
+  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg);
+  padding: 28px; width: 90%; max-width: 520px; box-shadow: 0 8px 32px rgba(0,0,0,.5);
+  max-height: 85vh; overflow-y: auto; animation: modalIn .2s ease-out;
 }
-.modal h3 { font-size: 16px; margin-bottom: 16px; }
-.form-group { margin-bottom: 14px; }
-.form-group label { display: block; font-size: 12px; font-weight: 500; color: var(--text2); margin-bottom: 4px; }
-.form-group .hint { font-size: 11px; color: var(--text3); margin-top: 3px; }
-.form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
-
-.perm-checks { display: flex; gap: 12px; }
-.perm-checks label { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; }
+@keyframes modalIn { from { transform: scale(.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
+.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
+.modal-header h3 { font-size: 17px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
+.modal-close { width: 28px; height: 28px; border-radius: 6px; background: var(--bg3); display: grid; place-items: center; cursor: pointer; border: none; color: var(--text2); font-size: 16px; }
+.modal-close:hover { background: var(--bg4); color: var(--text); }
+
+.form-group { margin-bottom: 16px; }
+.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+.form-group label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text2); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .3px; }
+.form-group .hint { font-size: 11px; color: var(--text3); margin-top: 4px; }
+.form-group .input-prefix { position: relative; }
+.form-group .input-prefix input { padding-left: 36px; }
+.form-group .input-prefix .prefix { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text3); font-size: 12px; pointer-events: none; }
+.form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }
+
+.perm-checks { display: flex; gap: 16px; }
+.perm-checks label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--text); text-transform: none; letter-spacing: normal; font-weight: 400; }
 .perm-checks input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); }
 
-.stats-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 20px; }
-.stat-card { background: var(--bg3); border-radius: var(--radius); padding: 14px 18px; }
-.stat-card .label { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; }
-.stat-card .value { font-size: 22px; font-weight: 700; margin-top: 2px; }
-
-.provider-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
-.provider-card {
-  background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius);
-  padding: 16px; cursor: pointer; transition: border-color .15s;
-}
-.provider-card:hover { border-color: var(--accent); }
-.provider-card .name { font-weight: 600; margin-bottom: 4px; }
-.provider-card .desc { font-size: 12px; color: var(--text3); }
-.provider-card .status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; }
-
-.section-desc { font-size: 13px; color: var(--text2); margin-bottom: 16px; }
-
-.tag { display: inline-flex; align-items: center; gap: 4px; background: var(--bg3); padding: 2px 8px; border-radius: 4px; font-size: 11px; color: var(--text2); }
+/* Empty state */
+.empty { text-align: center; padding: 60px 24px; color: var(--text3); }
+.empty .icon { font-size: 48px; margin-bottom: 16px; opacity: .35; }
+.empty p { font-size: 14px; margin-bottom: 4px; }
+.empty .sub { font-size: 12px; color: var(--text3); margin-top: 8px; }
 
-.loading { display: flex; align-items: center; justify-content: center; padding: 40px; color: var(--text3); }
-.spinner { width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .6s linear infinite; margin-right: 10px; }
+/* Loading */
+.loading-mask { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; color: var(--text3); }
+.spinner { width: 24px; height: 24px; border: 2.5px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .6s linear infinite; margin-bottom: 12px; }
 @keyframes spin { to { transform: rotate(360deg); } }
 
+/* Toast */
+.toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
 .toast {
-  position: fixed; bottom: 20px; right: 20px; padding: 12px 20px; border-radius: var(--radius);
-  color: #fff; font-size: 13px; z-index: 200; animation: slideIn .2s ease-out;
-  box-shadow: var(--shadow);
+  padding: 12px 20px; border-radius: var(--radius); color: #fff; font-size: 13px;
+  animation: slideIn .2s ease-out; box-shadow: var(--shadow); display: flex; align-items: center; gap: 8px;
+  max-width: 400px;
 }
 .toast.hidden { display: none; }
-.toast-ok { background: #065f46; }
-.toast-err { background: #991b1b; }
-.toast-info { background: #1e3a5f; }
-@keyframes slideIn { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
+.toast-ok { background: #065f46; border: 1px solid var(--ok); }
+.toast-err { background: #7f1d1d; border: 1px solid var(--danger); }
+.toast-info { background: #1e3a5f; border: 1px solid var(--info); }
+.toast-warn { background: #78350f; border: 1px solid var(--warn); }
+@keyframes slideIn { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
 
+/* Actions cell */
 .actions-cell { display: flex; gap: 4px; }
-.truncate { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.truncate { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* Detail panel */
+.detail-row { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
+.detail-row:last-child { border-bottom: none; }
+.detail-key { width: 140px; flex-shrink: 0; font-size: 12px; color: var(--text3); font-weight: 500; padding-top: 2px; }
+.detail-val { flex: 1; font-size: 13px; word-break: break-all; }
+
+/* Section desc */
+.section-desc { font-size: 13px; color: var(--text2); margin-bottom: 20px; line-height: 1.6; }
 
+/* Responsive */
 @media (max-width: 768px) {
-  .content { padding: 12px; }
-  .topbar, .tabs { padding-left: 12px; padding-right: 12px; }
-  table { font-size: 12px; }
-  .stats-row { grid-template-columns: repeat(2, 1fr); }
+  .sidebar { position: fixed; left: -260px; z-index: 50; height: 100vh; transition: left var(--transition); }
+  .sidebar.mobile-open { left: 0; }
+  .main-content { padding: 16px; }
+  .stats-grid { grid-template-columns: repeat(2, 1fr); }
   .provider-grid { grid-template-columns: 1fr; }
+  .form-row { grid-template-columns: 1fr; }
 }
 `;
 var JS = `
-const API = '/plugins/aicq-chat/api';
-
-let currentTab = 'agents';
-let agentsData = null, friendsData = null, requestsData = null, sessionsData = null, identityData = null, modelsConfig = null, statusData = null;
-
-// \u2500\u2500 Utility \u2500\u2500
-async function api(path, opts = {}) {
-  const res = await fetch(API + path, { headers: { 'Content-Type': 'application/json', ...opts.headers }, ...opts });
-  return res.json();
-}
-
-function $(sel) { return document.querySelector(sel); }
-function $$(sel) { return document.querySelectorAll(sel); }
-
+// \u2500\u2500 Globals \u2500\u2500
+const API = '/api';
+let currentPage = 'dashboard';
+let refreshTimer = null;
+
+// \u2500\u2500 jQuery-style helpers \u2500\u2500
+const $ = (sel, ctx) => (ctx || document).querySelector(sel);
+const $$ = (sel, ctx) => Array.from((ctx || document).querySelectorAll(sel));
+const html = (el, content) => { if (typeof el === 'string') el = $(el); if (el) el.innerHTML = content; return el; };
+const show = (el) => { if (typeof el === 'string') el = $(el); if (el) el.classList.remove('hidden'); return el; };
+const hide = (el) => { if (typeof el === 'string') el = $(el); if (el) el.classList.add('hidden'); return el; };
+const toggle = (el) => { if (typeof el === 'string') el = $(el); if (el) el.classList.toggle('hidden'); return el; };
+
+// \u2500\u2500 Toast \u2500\u2500
 function toast(msg, type = 'info') {
-  const t = document.getElementById('toast');
-  t.textContent = msg;
+  const container = $('#toast-container') || createToastContainer();
+  const t = document.createElement('div');
+  const icons = { ok: '\u2705', err: '\u274C', info: '\u2139\uFE0F', warn: '\u26A0\uFE0F' };
   t.className = 'toast toast-' + type;
-  t.classList.remove('hidden');
-  clearTimeout(t._t);
-  t._t = setTimeout(() => t.classList.add('hidden'), 3000);
+  t.innerHTML = '<span>' + (icons[type] || '') + '</span><span>' + escHtml(msg) + '</span>';
+  container.appendChild(t);
+  setTimeout(() => { t.style.opacity = '0'; t.style.transform = 'translateX(20px)'; t.style.transition = '.2s'; setTimeout(() => t.remove(), 200); }, 3500);
+}
+function createToastContainer() {
+  const c = document.createElement('div');
+  c.id = 'toast-container';
+  c.className = 'toast-container';
+  document.body.appendChild(c);
+  return c;
 }
 
-function showModal(id) { $(id).classList.remove('hidden'); }
-function hideModal(id) { $(id).classList.add('hidden'); }
-
-function escHtml(s) {
-  if (!s) return '';
-  const d = document.createElement('div');
-  d.textContent = s;
-  return d.innerHTML;
+// \u2500\u2500 API \u2500\u2500
+async function api(path, opts = {}) {
+  try {
+    const res = await fetch(API + path, { headers: { 'Content-Type': 'application/json', ...opts.headers }, ...opts });
+    const data = await res.json();
+    if (!res.ok && !data.error) data.error = 'HTTP ' + res.status;
+    return data;
+  } catch (e) { return { error: e.message }; }
 }
 
+// \u2500\u2500 Utilities \u2500\u2500
+function escHtml(s) { if (s == null) return ''; const d = document.createElement('div'); d.textContent = String(s); return d.innerHTML; }
 function timeAgo(iso) {
-  if (!iso) return '-';
+  if (!iso) return '\u2014';
   const diff = Date.now() - new Date(iso).getTime();
-  const mins = Math.floor(diff / 60000);
-  if (mins < 1) return 'just now';
-  if (mins < 60) return mins + 'm ago';
-  const hrs = Math.floor(mins / 60);
-  if (hrs < 24) return hrs + 'h ago';
-  return Math.floor(hrs / 24) + 'd ago';
+  if (diff < 0) return 'just now';
+  const m = Math.floor(diff / 60000), h = Math.floor(m / 60), d = Math.floor(h / 24);
+  if (m < 1) return 'just now'; if (m < 60) return m + ' min ago'; if (h < 24) return h + 'h ago'; if (d < 30) return d + 'd ago';
+  return new Date(iso).toLocaleDateString();
 }
-
-function copyText(text) {
-  navigator.clipboard.writeText(text).then(() => toast('Copied!', 'ok')).catch(() => toast('Copy failed', 'err'));
+function maskKey(s) { if (!s || s.length < 12) return s || ''; return s.substring(0, 6) + '\u2022\u2022\u2022\u2022\u2022\u2022' + s.slice(-4); }
+function copyText(text) { navigator.clipboard.writeText(text).then(() => toast('Copied to clipboard', 'ok')).catch(() => toast('Copy failed', 'err')); }
+
+// \u2500\u2500 Modal \u2500\u2500
+function showModal(id) { show(id); }
+function hideModal(id) { hide(id); }
+
+// \u2500\u2500 Sidebar navigation \u2500\u2500
+function navigate(page) {
+  currentPage = page;
+  $$('.nav-item').forEach(n => n.classList.toggle('active', n.dataset.page === page));
+  $$('.page').forEach(p => p.classList.toggle('active', p.id === 'page-' + page));
+  $('#main-title').textContent = ($('.nav-item.active .nav-label') || {}).textContent || page;
+  loadPage(page);
+  // Close mobile sidebar
+  $('.sidebar')?.classList.remove('mobile-open');
 }
 
-// \u2500\u2500 Tab switching \u2500\u2500
-function switchTab(tab) {
-  currentTab = tab;
-  $$('.tab-btn').forEach(b => b.classList.toggle('active', b.dataset.tab === tab));
-  $$('.content').forEach(c => c.classList.toggle('hidden', c.id !== 'tab-' + tab));
-  if (tab === 'agents') loadAgents();
-  else if (tab === 'aicq') loadAICQ();
-  else if (tab === 'models') loadModels();
+function toggleSidebar() {
+  const sb = $('.sidebar');
+  if (window.innerWidth <= 768) { sb.classList.toggle('mobile-open'); }
+  else { sb.classList.toggle('collapsed'); }
 }
 
-// \u2500\u2500 Status \u2500\u2500
-async function loadStatus() {
-  try {
-    statusData = await api('/status');
-    const dot = $('#status-dot');
-    const txt = $('#status-text');
-    if (statusData.connected) {
-      dot.className = 'dot dot-ok';
-      txt.textContent = 'Connected';
-    } else {
-      dot.className = 'dot dot-err';
-      txt.textContent = 'Disconnected';
-    }
-  } catch (e) {
-    $('#status-dot').className = 'dot dot-err';
-    $('#status-text').textContent = 'Error';
+function loadPage(page) {
+  switch (page) {
+    case 'dashboard': loadDashboard(); break;
+    case 'agents': loadAgents(); break;
+    case 'friends': loadFriends(); break;
+    case 'models': loadModels(); break;
+    case 'settings': loadSettings(); break;
   }
 }
 
-// \u2500\u2500 TAB 1: Agent Management \u2500\u2500
-async function loadAgents() {
-  setLoading('agents', true);
-  try {
-    const data = await api('/agents');
-    agentsData = data;
-    renderAgents(data);
-  } catch (e) {
-    toast('Failed to load agents: ' + e.message, 'err');
-  }
-  setLoading('agents', false);
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// PAGE: Dashboard
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+async function loadDashboard() {
+  const el = $('#dashboard-content');
+  html(el, '<div class="loading-mask"><div class="spinner"></div>Loading dashboard...</div>');
+  const [status, friends, identity] = await Promise.all([api('/status'), api('/friends'), api('/identity')]);
+  if (status.error) { html(el, '<div class="empty"><div class="icon">\u26A0\uFE0F</div><p>Failed to connect to AICQ plugin</p></div>'); return; }
+  const connCls = status.connected ? 'dot-ok' : 'dot-err';
+  const connText = status.connected ? 'Connected' : 'Disconnected';
+  const friendList = friends.friends || [];
+  const aiFriends = friendList.filter(f => f.friendType === 'ai').length;
+  const humanFriends = friendList.filter(f => f.friendType !== 'ai').length;
+
+  html(el, \\\`
+    <div class="stats-grid">
+      <div class="stat-card">
+        <div class="stat-icon" style="background:var(--accent-bg)">\u{1F4E1}</div>
+        <div class="stat-label">Server Status</div>
+        <div class="stat-value" style="font-size:16px;display:flex;align-items:center;gap:8px">
+          <span class="dot \${connCls}"></span> \${connText}
+        </div>
+        <div class="stat-sub">\${escHtml(status.serverUrl)}</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-icon" style="background:var(--ok-bg)">\u{1F465}</div>
+        <div class="stat-label">Total Friends</div>
+        <div class="stat-value">\${friendList.length}</div>
+        <div class="stat-sub">\${aiFriends} AI \xB7 \${humanFriends} Human</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-icon" style="background:var(--info-bg)">\u{1F517}</div>
+        <div class="stat-label">Active Sessions</div>
+        <div class="stat-value">\${status.sessionCount || 0}</div>
+        <div class="stat-sub">Encrypted sessions</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-icon" style="background:var(--warn-bg)">\u{1F511}</div>
+        <div class="stat-label">Agent ID</div>
+        <div class="stat-value mono" style="font-size:13px">\${escHtml(status.agentId)}</div>
+        <div class="stat-sub">Fingerprint: \${escHtml(status.fingerprint)}</div>
+      </div>
+    </div>
+    <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">
+      <div class="card">
+        <div class="card-header"><div class="card-title">\u{1F4CB} Recent Friends</div><button class="btn btn-sm btn-ghost" onclick="navigate('friends')">View All \u2192</button></div>
+        \${renderMiniFriendList(friendList.slice(0, 5))}
+      </div>
+      <div class="card">
+        <div class="card-header"><div class="card-title">\u{1F916} Identity Info</div></div>
+        <div class="detail-row"><div class="detail-key">Agent ID</div><div class="detail-val mono" style="cursor:pointer" onclick="copyText('\${identity.agentId}')">\${escHtml(identity.agentId)} \u{1F4CB}</div></div>
+        <div class="detail-row"><div class="detail-key">Fingerprint</div><div class="detail-val mono">\${escHtml(identity.publicKeyFingerprint)}</div></div>
+        <div class="detail-row"><div class="detail-key">Server URL</div><div class="detail-val mono" style="cursor:pointer" onclick="copyText('\${identity.serverUrl}')">\${escHtml(identity.serverUrl)} \u{1F4CB}</div></div>
+        <div class="detail-row"><div class="detail-key">Connection</div><div class="detail-val"><span class="badge badge-\${identity.connected ? 'ok' : 'danger'}">\${identity.connected ? 'Online' : 'Offline'}</span></div></div>
+      </div>
+    </div>
+  \\\`);
+}
+
+function renderMiniFriendList(friends) {
+  if (!friends.length) return '<div class="empty"><p>No friends yet</p></div>';
+  let html = '';
+  friends.forEach(f => {
+    html += '<div class="detail-row"><div class="detail-key"><span class="badge badge-' + (f.friendType === 'ai' ? 'info' : 'ghost') + '">' + escHtml(f.friendType || '?') + '</span></div><div class="detail-val mono truncate" style="font-size:12px">' + escHtml(f.id) + '</div></div>';
+  });
+  return html;
 }
 
-function renderAgents(data) {
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// PAGE: Agent Management (from openclaw.json / stableclaw.json)
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+async function loadAgents() {
   const el = $('#agents-content');
-  const agents = data.agents || [];
-  const statsHtml = \`
-    <div class="stats-row">
-      <div class="stat-card"><div class="label">Total Agents</div><div class="value">\${agents.length}</div></div>
-      <div class="stat-card"><div class="label">Current Agent</div><div class="value" style="font-size:16px">\${escHtml(data.currentAgentId || '-')}</div></div>
-      <div class="stat-card"><div class="label">Fingerprint</div><div class="value mono" style="font-size:11px">\${escHtml(data.fingerprint || '-')}</div></div>
-      <div class="stat-card"><div class="label">Server</div><div class="value" style="font-size:13px">\${data.connected ? '\u{1F7E2}' : '\u{1F534}'} Online</div></div>
-    </div>\`;
+  html(el, '<div class="loading-mask"><div class="spinner"></div>Loading agents...</div>');
+  const data = await api('/agents');
+  if (data.error) { html(el, '<div class="empty"><div class="icon">\u26A0\uFE0F</div><p>' + escHtml(data.error) + '</p></div>'); return; }
 
-  if (agents.length === 0) {
-    el.innerHTML = statsHtml + '<div class="empty"><div class="icon">\u{1F916}</div><p>No agents configured</p></div>';
-    return;
-  }
+  const agents = data.agents || [];
+  const configSource = data.configSource || 'unknown';
 
   let rows = '';
-  agents.forEach(a => {
-    const isCurrent = a.id === data.currentAgentId;
-    rows += \`<tr>
-      <td><span class="mono">\${escHtml(a.id)}</span> \${isCurrent ? '<span class="badge badge-ok">current</span>' : ''}</td>
-      <td>\${escHtml(a.name || a.aiName || '-')}</td>
-      <td><span class="tag">\${escHtml(a.friendType || '-')}</span></td>
-      <td>\${a.sessionCount != null ? '<span class="badge badge-info">' + a.sessionCount + ' sessions</span>' : '-'}</td>
-      <td class="mono truncate">\${escHtml(a.publicKeyFingerprint || '-')}</td>
-      <td>\${timeAgo(a.lastMessageAt)}</td>
+  agents.forEach((a, i) => {
+    const modelBadge = a.model ? '<span class="badge badge-accent">' + escHtml(a.model) + '</span>' : '<span class="badge badge-ghost">default</span>';
+    const providerBadge = a.provider ? '<span class="tag">' + escHtml(a.provider) + '</span>' : '';
+    const statusBadge = a.enabled !== false ? '<span class="badge badge-ok">active</span>' : '<span class="badge badge-warn">disabled</span>';
+
+    rows += \\\`<tr>
+      <td>\${statusBadge}</td>
+      <td><div style="font-weight:600">\${escHtml(a.name || a.id || 'Agent ' + (i + 1))}</div><div class="mono" style="font-size:11px;color:var(--text3)">\${escHtml(a.id || '\u2014')}</div></td>
+      <td>\${modelBadge}</td>
+      <td>\${providerBadge}</td>
+      <td>\${escHtml(a.systemPrompt ? a.systemPrompt.substring(0, 60) + '...' : '\u2014')}</td>
       <td>
         <div class="actions-cell">
-          <button class="btn btn-sm btn-ghost" onclick="copyText('\${escHtml(a.id)}')" title="Copy ID">\u{1F4CB}</button>
-          \${!isCurrent ? '<button class="btn btn-sm btn-danger" onclick="deleteAgent(\\'' + escHtml(a.id) + '\\')">Delete</button>' : ''}
+          <button class="btn btn-sm btn-ghost" onclick="viewAgent(\${i})" title="View">\u{1F441}\uFE0F</button>
+          <button class="btn btn-sm btn-danger" onclick="deleteAgent(\${i})" title="Delete">\u{1F5D1}\uFE0F</button>
         </div>
       </td>
-    </tr>\`;
+    </tr>\\\`;
   });
 
-  el.innerHTML = statsHtml + \`
-    <div class="card">
-      <div class="card-header">
-        <div class="card-title">Agent List</div>
-        <div style="display:flex;gap:8px">
-          <button class="btn btn-sm" onclick="loadAgents()">\u{1F504} Refresh</button>
-        </div>
-      </div>
+  if (!agents.length) {
+    html(el, \\\`
+      <p class="section-desc">Reads agent configurations from <strong>\${escHtml(configSource)}</strong>. Configure your agents in the config file.</p>
+      <div class="empty"><div class="icon">\u{1F916}</div><p>No agents configured</p><p class="sub">Add agents to your openclaw.json or stableclaw.json config file</p></div>
+    \\\`);
+    return;
+  }
+
+  html(el, \\\`
+    <div class="toolbar">
+      <div class="search-box"><input type="text" placeholder="Search agents..." id="agent-search" oninput="filterAgentTable()"></div>
+      <button class="btn btn-sm btn-default" onclick="loadAgents()">\u{1F504} Refresh</button>
+    </div>
+    <p class="section-desc">Agent list from <strong style="color:var(--accent2)">\${escHtml(configSource)}</strong>. Total: <strong>\${agents.length}</strong> agents configured.</p>
+    <div class="card" style="padding:0;overflow:hidden">
       <div style="overflow-x:auto">
         <table>
-          <thead><tr><th>ID</th><th>Name</th><th>Type</th><th>Sessions</th><th>Fingerprint</th><th>Last Activity</th><th>Actions</th></tr></thead>
-          <tbody>\${rows}</tbody>
+          <thead><tr><th style="width:60px">Status</th><th>Agent</th><th>Model</th><th>Provider</th><th>System Prompt</th><th style="width:90px">Actions</th></tr></thead>
+          <tbody id="agent-table-body">\${rows}</tbody>
         </table>
       </div>
-    </div>\`;
+    </div>
+  \\\`);
 }
 
-async function deleteAgent(id) {
-  if (!confirm('Delete agent ' + id + '? This cannot be undone.')) return;
-  try {
-    const r = await api('/agents/' + encodeURIComponent(id), { method: 'DELETE' });
-    if (r.success) { toast('Agent deleted', 'ok'); loadAgents(); }
-    else { toast(r.message || 'Delete failed', 'err'); }
-  } catch (e) { toast('Error: ' + e.message, 'err'); }
+function filterAgentTable() {
+  const q = ($('#agent-search')?.value || '').toLowerCase();
+  $$('#agent-table-body tr').forEach(tr => {
+    tr.style.display = tr.textContent.toLowerCase().includes(q) ? '' : 'none';
+  });
 }
 
-// \u2500\u2500 TAB 2: AICQ Management \u2500\u2500
-let aicqSubTab = 'friends';
-
-async function loadAICQ() {
-  setLoading('aicq', true);
-  try {
-    const [friends, requests, sessions, identity] = await Promise.all([
-      api('/friends'),
-      api('/friends/requests'),
-      api('/sessions'),
-      api('/identity')
-    ]);
-    friendsData = friends;
-    requestsData = requests;
-    sessionsData = sessions;
-    identityData = identity;
-    renderAICQSubTabs();
-    switchAICQSubTab(aicqSubTab);
-  } catch (e) {
-    toast('Failed to load AICQ data: ' + e.message, 'err');
-  }
-  setLoading('aicq', false);
+function viewAgent(index) {
+  const agents = window._lastAgentsData?.agents || [];
+  const a = agents[index];
+  if (!a) return;
+  let details = '';
+  for (const [k, v] of Object.entries(a)) {
+    if (v != null && v !== '') {
+      const display = typeof v === 'string' && v.length > 200 ? escHtml(v.substring(0, 200)) + '...' : escHtml(String(v));
+      details += '<div class="detail-row"><div class="detail-key">' + escHtml(k) + '</div><div class="detail-val mono" style="font-size:12px;cursor:pointer" onclick="copyText(decodeURIComponent(\\'' + encodeURIComponent(String(v)) + '\\'))">' + display + ' \u{1F4CB}</div></div>';
+    }
+  }
+  html('#view-agent-body', details || '<div class="empty"><p>No data</p></div>');
+  $('#view-agent-title').textContent = a.name || a.id || 'Agent';
+  showModal('modal-view-agent');
 }
 
-function renderAICQSubTabs() {
-  const friendCount = (friendsData?.friends || []).length;
-  const reqCount = (requestsData?.requests || []).length;
-  const sessCount = (sessionsData?.sessions || []).length;
-  $('#aicq-subtabs').innerHTML = \`
-    <button class="tab-btn \${aicqSubTab==='friends'?'active':''}" onclick="switchAICQSubTab('friends')">Friends (\${friendCount})</button>
-    <button class="tab-btn \${aicqSubTab==='requests'?'active':''}" onclick="switchAICQSubTab('requests')">Requests (\${reqCount})</button>
-    <button class="tab-btn \${aicqSubTab==='sessions'?'active':''}" onclick="switchAICQSubTab('sessions')">Sessions (\${sessCount})</button>
-  \`;
+async function deleteAgent(index) {
+  if (!confirm('Are you sure you want to delete this agent?')) return;
+  const r = await api('/agents/' + index, { method: 'DELETE' });
+  if (r.success) { toast('Agent deleted', 'ok'); loadAgents(); }
+  else { toast(r.message || r.error || 'Delete failed', 'err'); }
 }
 
-function switchAICQSubTab(tab) {
-  aicqSubTab = tab;
-  renderAICQSubTabs();
-  $$('#aicq-content > div').forEach(d => d.classList.add('hidden'));
-  if (tab === 'friends') renderFriends();
-  else if (tab === 'requests') renderRequests();
-  else if (tab === 'sessions') renderSessions();
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// PAGE: Friends Management
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+let friendsFilter = 'all';
+
+async function loadFriends() {
+  const el = $('#friends-content');
+  html(el, '<div class="loading-mask"><div class="spinner"></div>Loading friends...</div>');
+  const [friends, requests, sessions] = await Promise.all([api('/friends'), api('/friends/requests'), api('/sessions')]);
+
+  // Sub-tabs
+  const friendCount = (friends.friends || []).length;
+  const reqCount = (requests.requests || []).length;
+  const sessCount = (sessions.sessions || []).length;
+
+  html('#friends-tabs', \\\`
+    <button class="filter-btn \${friendsSubTab==='friends'?'active':''}" onclick="friendsSubTab='friends';loadFriends()">\u{1F465} Friends (<span id="fc">\${friendCount}</span>)</button>
+    <button class="filter-btn \${friendsSubTab==='requests'?'active':''}" onclick="friendsSubTab='requests';loadFriends()">\u{1F4E8} Requests (<span id="rc">\${reqCount}</span>)</button>
+    <button class="filter-btn \${friendsSubTab==='sessions'?'active':''}" onclick="friendsSubTab='sessions';loadFriends()">\u{1F517} Sessions (<span id="sc">\${sessCount}</span>)</button>
+  \\\`);
+
+  window._friendsData = friends;
+  window._requestsData = requests;
+  window._sessionsData = sessions;
+
+  if (friendsSubTab === 'friends') renderFriendsList(friends.friends || []);
+  else if (friendsSubTab === 'requests') renderRequestsList(requests.requests || []);
+  else renderSessionsList(sessions.sessions || []);
 }
+window.friendsSubTab = 'friends';
 
-function renderFriends() {
-  const el = $('#aicq-friends');
-  el.classList.remove('hidden');
-  const friends = friendsData?.friends || [];
-
-  if (friends.length === 0) {
-    el.innerHTML = '<div class="empty"><div class="icon">\u{1F465}</div><p>No friends yet</p><p style="font-size:12px;margin-top:8px">Add a friend using their temp number or ID</p></div>';
-    return;
-  }
-
+function renderFriendsList(friends) {
+  const el = $('#friends-content');
   let rows = '';
   friends.forEach(f => {
-    const perms = (f.permissions || []).map(p => '<span class="badge badge-' + (p === 'exec' ? 'warn' : 'ok') + '">' + p + '</span>').join(' ');
-    rows += \`<tr>
-      <td class="mono">\${escHtml(f.id)}</td>
-      <td>\${escHtml(f.aiName || '-')}</td>
-      <td><span class="badge badge-\${f.friendType === 'ai' ? 'info' : 'ghost'}">\${escHtml(f.friendType || '?')}</span></td>
+    const perms = (f.permissions || []).map(p => '<span class="badge badge-' + (p === 'exec' ? 'warn' : 'ok') + '">' + escHtml(p) + '</span>').join(' ');
+    rows += \\\`<tr data-type="\${f.friendType || ''}" data-search="\${escHtml(f.id + ' ' + (f.aiName || ''))}">
+      <td><span class="badge badge-\${f.friendType === 'ai' ? 'info' : 'ghost'}" style="font-size:10px">\${(f.friendType || 'unknown').toUpperCase()}</span></td>
+      <td><div style="font-weight:500">\${escHtml(f.aiName || f.id?.substring(0, 12) || '\u2014')}</div><div class="mono" style="font-size:11px;color:var(--text3);cursor:pointer" onclick="copyText('\${escHtml(f.id)}')">\${escHtml(f.id)} \u{1F4CB}</div></td>
       <td>\${perms || '<span class="badge badge-ghost">none</span>'}</td>
-      <td class="mono" style="font-size:11px">\${escHtml(f.publicKeyFingerprint || '-')}</td>
-      <td>\${timeAgo(f.lastMessageAt)}</td>
+      <td class="mono" style="font-size:11px">\${escHtml(f.publicKeyFingerprint || '\u2014')}</td>
+      <td style="white-space:nowrap">\${timeAgo(f.lastMessageAt)}</td>
       <td>
         <div class="actions-cell">
-          <button class="btn btn-sm btn-ghost" onclick="editPermissions('\${escHtml(f.id)}', \${JSON.stringify(f.permissions || [])})">\u2699\uFE0F</button>
-          <button class="btn btn-sm btn-danger" onclick="removeFriend('\${escHtml(f.id)}')">\u{1F5D1}\uFE0F</button>
-          <button class="btn btn-sm btn-ghost" onclick="copyText('\${escHtml(f.id)}')" title="Copy ID">\u{1F4CB}</button>
+          <button class="btn btn-sm btn-ghost" onclick="editFriendPerms('\${escHtml(f.id)}',\${JSON.stringify(f.permissions || [])})" title="Permissions">\u2699\uFE0F</button>
+          <button class="btn btn-sm btn-danger" onclick="removeFriend('\${escHtml(f.id)}')" title="Remove">\u{1F5D1}\uFE0F</button>
         </div>
       </td>
-    </tr>\`;
+    </tr>\\\`;
   });
 
-  el.innerHTML = \`
-    <div class="card">
-      <div class="card-header">
-        <div class="card-title">Friends (\${friends.length})</div>
-        <div style="display:flex;gap:8px">
-          <button class="btn btn-sm btn-primary" onclick="showAddFriend()">\u2795 Add Friend</button>
-          <button class="btn btn-sm" onclick="loadAICQ()">\u{1F504} Refresh</button>
-        </div>
+  html(el, \\\`
+    <div class="toolbar">
+      <div class="search-box"><input type="text" placeholder="Search friends..." id="friend-search" oninput="filterFriendTable()"></div>
+      <div class="filter-group">
+        <button class="filter-btn \${friendsFilter==='all'?'active':''}" onclick="friendsFilter='all';filterFriendTable()">All</button>
+        <button class="filter-btn \${friendsFilter==='ai'?'active':''}" onclick="friendsFilter='ai';filterFriendTable()">AI</button>
+        <button class="filter-btn \${friendsFilter==='human'?'active':''}" onclick="friendsFilter='human';filterFriendTable()">Human</button>
       </div>
-      <div style="overflow-x:auto">
+      <span style="flex:1"></span>
+      <button class="btn btn-sm btn-primary" onclick="showAddFriendModal()">\u2795 Add Friend</button>
+      <button class="btn btn-sm btn-default" onclick="loadFriends()">\u{1F504}</button>
+    </div>
+    <div class="card" style="padding:0;overflow:hidden">
+      <div style="overflow-x:auto;max-height:calc(100vh - 280px);overflow-y:auto">
         <table>
-          <thead><tr><th>Node ID</th><th>Name</th><th>Type</th><th>Permissions</th><th>Fingerprint</th><th>Last Message</th><th>Actions</th></tr></thead>
-          <tbody>\${rows}</tbody>
+          <thead><tr><th style="width:60px">Type</th><th>Friend</th><th>Permissions</th><th>Fingerprint</th><th>Last Message</th><th style="width:80px">Actions</th></tr></thead>
+          <tbody id="friend-table-body">\${rows}</tbody>
         </table>
       </div>
-    </div>\`;
+      \${!friends.length ? '<div class="empty"><div class="icon">\u{1F465}</div><p>No friends yet</p><p class="sub">Add a friend using their 6-digit temp number or node ID</p></div>' : ''}
+    </div>
+  \\\`);
 }
 
-function renderRequests() {
-  const el = $('#aicq-requests');
-  el.classList.remove('hidden');
-  const reqs = requestsData?.requests || [];
-
-  if (reqs.length === 0) {
-    el.innerHTML = '<div class="empty"><div class="icon">\u{1F4E8}</div><p>No pending friend requests</p></div>';
-    return;
-  }
+function filterFriendTable() {
+  const q = ($('#friend-search')?.value || '').toLowerCase();
+  $$('#friend-table-body tr').forEach(tr => {
+    const matchSearch = tr.dataset.search?.toLowerCase().includes(q);
+    const matchFilter = friendsFilter === 'all' || tr.dataset.type === friendsFilter;
+    tr.style.display = matchSearch && matchFilter ? '' : 'none';
+  });
+}
 
+function renderRequestsList(requests) {
+  const el = $('#friends-content');
   let rows = '';
-  reqs.forEach(r => {
-    const statusBadge = r.status === 'pending' ? '<span class="badge badge-warn">pending</span>' :
-                        r.status === 'accepted' ? '<span class="badge badge-ok">accepted</span>' :
-                        '<span class="badge badge-ghost">' + escHtml(r.status) + '</span>';
-    rows += \`<tr>
-      <td class="mono">\${escHtml(r.id)}</td>
-      <td class="mono">\${escHtml(r.fromId || r.requesterId || '-')}</td>
-      <td>\${statusBadge}</td>
+  requests.forEach(r => {
+    const stCls = r.status === 'pending' ? 'warn' : r.status === 'accepted' ? 'ok' : 'ghost';
+    rows += \\\`<tr>
+      <td class="mono" style="font-size:11px">\${escHtml(r.id)}</td>
+      <td class="mono" style="font-size:12px">\${escHtml(r.fromId || r.requesterId || '\u2014')}</td>
+      <td><span class="badge badge-\${stCls}">\${escHtml(r.status)}</span></td>
       <td>\${timeAgo(r.createdAt)}</td>
-      <td>\${escHtml(r.message || '-')}</td>
       <td>
-        <div class="actions-cell">
-          \${r.status === 'pending' ? \`
-            <button class="btn btn-sm btn-ok" onclick="acceptRequest('\${escHtml(r.id)}')">\u2713 Accept</button>
-            <button class="btn btn-sm btn-danger" onclick="rejectRequest('\${escHtml(r.id)}')">\u2717 Reject</button>
-          \` : '-'}
-        </div>
+        \${r.status === 'pending' ? '<div class="actions-cell"><button class="btn btn-sm btn-ok" onclick="acceptFriendReq(\\'' + escHtml(r.id) + '\\')">\u2713 Accept</button><button class="btn btn-sm btn-danger" onclick="rejectFriendReq(\\'' + escHtml(r.id) + '\\')">\u2717 Reject</button></div>' : '\u2014'}
       </td>
-    </tr>\`;
+    </tr>\\\`;
   });
-
-  el.innerHTML = \`
-    <div class="card">
-      <div class="card-header">
-        <div class="card-title">Friend Requests (\${reqs.length})</div>
-        <button class="btn btn-sm" onclick="loadAICQ()">\u{1F504} Refresh</button>
-      </div>
-      <div style="overflow-x:auto">
-        <table>
-          <thead><tr><th>Request ID</th><th>From</th><th>Status</th><th>Time</th><th>Message</th><th>Actions</th></tr></thead>
-          <tbody>\${rows}</tbody>
-        </table>
-      </div>
-    </div>\`;
+  html(el, \\\`
+    <div class="toolbar"><button class="btn btn-sm btn-default" onclick="loadFriends()">\u{1F504} Refresh</button></div>
+    <div class="card" style="padding:0;overflow:hidden">
+      <div style="overflow-x:auto"><table>
+        <thead><tr><th>Request ID</th><th>From</th><th>Status</th><th>Time</th><th style="width:160px">Actions</th></tr></thead>
+        <tbody>\${rows}</tbody>
+      </table></div>
+      \${!requests.length ? '<div class="empty"><div class="icon">\u{1F4E8}</div><p>No pending requests</p></div>' : ''}
+    </div>
+  \\\`);
 }
 
-function renderSessions() {
-  const el = $('#aicq-sessions');
-  el.classList.remove('hidden');
-  const sessions = sessionsData?.sessions || [];
-
-  if (sessions.length === 0) {
-    el.innerHTML = '<div class="empty"><div class="icon">\u{1F517}</div><p>No active encrypted sessions</p></div>';
-    return;
-  }
-
+function renderSessionsList(sessions) {
+  const el = $('#friends-content');
   let rows = '';
   sessions.forEach(s => {
-    rows += \`<tr>
-      <td class="mono">\${escHtml(s.peerId)}</td>
+    rows += \\\`<tr>
+      <td class="mono" style="font-size:12px;cursor:pointer" onclick="copyText('\${escHtml(s.peerId)}')">\${escHtml(s.peerId)} \u{1F4CB}</td>
       <td>\${timeAgo(s.createdAt)}</td>
-      <td><span class="badge badge-info">\${s.messageCount} msgs</span></td>
-    </tr>\`;
+      <td><span class="badge badge-info">\${s.messageCount} messages</span></td>
+    </tr>\\\`;
   });
-
-  el.innerHTML = \`
-    <div class="card">
-      <div class="card-header">
-        <div class="card-title">Encrypted Sessions (\${sessions.length})</div>
-        <button class="btn btn-sm" onclick="loadAICQ()">\u{1F504} Refresh</button>
-      </div>
-      <div style="overflow-x:auto">
-        <table>
-          <thead><tr><th>Peer ID</th><th>Established</th><th>Messages</th></tr></thead>
-          <tbody>\${rows}</tbody>
-        </table>
-      </div>
-    </div>\`;
-}
-
-async function showAddFriend() {
-  showModal('modal-add-friend');
-  $('#add-friend-target').value = '';
-  $('#add-friend-target').focus();
+  html(el, \\\`
+    <div class="toolbar"><button class="btn btn-sm btn-default" onclick="loadFriends()">\u{1F504} Refresh</button></div>
+    <div class="card" style="padding:0;overflow:hidden">
+      <div style="overflow-x:auto"><table>
+        <thead><tr><th>Peer ID</th><th>Established</th><th>Messages</th></tr></thead>
+        <tbody>\${rows}</tbody>
+      </table></div>
+      \${!sessions.length ? '<div class="empty"><div class="icon">\u{1F517}</div><p>No active sessions</p></div>' : ''}
+    </div>
+  \\\`);
 }
 
+function showAddFriendModal() { $('#add-friend-target').value = ''; showModal('modal-add-friend'); setTimeout(() => $('#add-friend-target')?.focus(), 100); }
 async function addFriend() {
   const target = $('#add-friend-target').value.trim();
-  if (!target) { toast('Enter a temp number or friend ID', 'err'); return; }
+  if (!target) { toast('Enter a temp number or node ID', 'warn'); return; }
   hideModal('modal-add-friend');
   toast('Sending friend request...', 'info');
-  try {
-    const r = await api('/friends', { method: 'POST', body: JSON.stringify({ target }) });
-    if (r.success) { toast(r.message || 'Friend request sent!', 'ok'); loadAICQ(); }
-    else { toast(r.message || 'Failed to add friend', 'err'); }
-  } catch (e) { toast('Error: ' + e.message, 'err'); }
+  const r = await api('/friends', { method: 'POST', body: JSON.stringify({ target }) });
+  if (r.success) { toast(r.message || 'Friend request sent!', 'ok'); loadFriends(); }
+  else { toast(r.message || r.error || 'Failed to add friend', 'err'); }
 }
-
 async function removeFriend(id) {
-  if (!confirm('Remove friend ' + id + '? This will delete the encrypted session.')) return;
-  try {
-    const r = await api('/friends/' + encodeURIComponent(id), { method: 'DELETE' });
-    if (r.success) { toast('Friend removed', 'ok'); loadAICQ(); }
-    else { toast(r.message || 'Failed to remove', 'err'); }
-  } catch (e) { toast('Error: ' + e.message, 'err'); }
+  if (!confirm('Remove friend ' + id + '?')) return;
+  const r = await api('/friends/' + encodeURIComponent(id), { method: 'DELETE' });
+  if (r.success) { toast('Friend removed', 'ok'); loadFriends(); }
+  else { toast(r.message || r.error || 'Failed', 'err'); }
 }
 
-let editingFriendId = null;
-function editPermissions(id, perms) {
-  editingFriendId = id;
-  const chatChecked = perms.includes('chat') ? 'checked' : '';
-  const execChecked = perms.includes('exec') ? 'checked' : '';
-  $('#perm-chat').checked = chatChecked;
-  $('#perm-exec').checked = execChecked;
+let _editFriendId = null;
+function editFriendPerms(id, perms) {
+  _editFriendId = id;
+  $('#perm-chat').checked = (perms || []).includes('chat');
+  $('#perm-exec').checked = (perms || []).includes('exec');
   showModal('modal-permissions');
 }
-
-async function savePermissions() {
+async function saveFriendPerms() {
   const perms = [];
   if ($('#perm-chat').checked) perms.push('chat');
   if ($('#perm-exec').checked) perms.push('exec');
-  try {
-    const r = await api('/friends/' + encodeURIComponent(editingFriendId) + '/permissions', {
-      method: 'PUT', body: JSON.stringify({ permissions: perms })
-    });
-    if (r.success) { toast('Permissions updated', 'ok'); hideModal('modal-permissions'); loadAICQ(); }
-    else { toast(r.message || 'Failed to update', 'err'); }
-  } catch (e) { toast('Error: ' + e.message, 'err'); }
+  const r = await api('/friends/' + encodeURIComponent(_editFriendId) + '/permissions', { method: 'PUT', body: JSON.stringify({ permissions: perms }) });
+  if (r.success) { toast('Permissions updated', 'ok'); hideModal('modal-permissions'); loadFriends(); }
+  else { toast(r.message || r.error || 'Failed', 'err'); }
 }
-
-async function acceptRequest(id) {
-  try {
-    const r = await api('/friends/requests/' + encodeURIComponent(id) + '/accept', { method: 'POST', body: JSON.stringify({ permissions: ['chat'] }) });
-    if (r.success) { toast('Request accepted', 'ok'); loadAICQ(); }
-    else { toast(r.message || 'Failed', 'err'); }
-  } catch (e) { toast('Error: ' + e.message, 'err'); }
+async function acceptFriendReq(id) {
+  const r = await api('/friends/requests/' + encodeURIComponent(id) + '/accept', { method: 'POST', body: JSON.stringify({ permissions: ['chat'] }) });
+  if (r.success) { toast('Request accepted', 'ok'); loadFriends(); } else { toast(r.message || r.error || 'Failed', 'err'); }
 }
-
-async function rejectRequest(id) {
-  try {
-    const r = await api('/friends/requests/' + encodeURIComponent(id) + '/reject', { method: 'POST', body: JSON.stringify({}) });
-    if (r.success) { toast('Request rejected', 'ok'); loadAICQ(); }
-    else { toast(r.message || 'Failed', 'err'); }
-  } catch (e) { toast('Error: ' + e.message, 'err'); }
+async function rejectFriendReq(id) {
+  const r = await api('/friends/requests/' + encodeURIComponent(id) + '/reject', { method: 'POST', body: JSON.stringify({}) });
+  if (r.success) { toast('Request rejected', 'ok'); loadFriends(); } else { toast(r.message || r.error || 'Failed', 'err'); }
 }
 
-// \u2500\u2500 TAB 3: Model Management \u2500\u2500
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// PAGE: Model Management
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+let _modelProviders = null;
+
 async function loadModels() {
-  setLoading('models', true);
-  try {
-    modelsConfig = await api('/models');
-    renderModels(modelsConfig);
-  } catch (e) {
-    toast('Failed to load models: ' + e.message, 'err');
-  }
-  setLoading('models', false);
+  const el = $('#models-content');
+  html(el, '<div class="loading-mask"><div class="spinner"></div>Loading model configuration...</div>');
+  const data = await api('/models');
+  if (data.error) { html(el, '<div class="empty"><div class="icon">\u26A0\uFE0F</div><p>' + escHtml(data.error) + '</p></div>'); return; }
+  _modelProviders = data;
+  renderModels(data);
 }
 
 function renderModels(data) {
   const el = $('#models-content');
   const providers = data.providers || [];
-  const configured = providers.filter(p => p.configured);
+  const configured = providers.filter(p => p.configured).length;
 
-  let provCards = '';
+  let cards = '';
   providers.forEach(p => {
-    const statusColor = p.configured ? 'var(--ok)' : 'var(--text3)';
-    const statusText = p.configured ? 'Configured' : 'Not configured';
-    provCards += \`
-      <div class="provider-card" onclick="showModelConfig('\${escHtml(p.id)}')">
-        <div class="name"><span class="status-dot" style="background:\${statusColor}"></span>\${escHtml(p.name)}</div>
-        <div class="desc">\${escHtml(p.description || '')}</div>
-        <div style="margin-top:8px;font-size:11px;color:var(--text3)">\${statusText}</div>
-      </div>\`;
+    const icon = p.id === 'openai' ? '\u{1F7E2}' : p.id === 'anthropic' ? '\u{1F7E0}' : p.id === 'google' ? '\u{1F535}' : p.id === 'ollama' ? '\u{1F7E3}' : p.id === 'deepseek' ? '\u{1F537}' : p.id === 'groq' ? '\u26A1' : p.id === 'openrouter' ? '\u{1F310}' : '\u26AA';
+    const statusBadge = p.configured
+      ? '<span class="badge badge-ok">\u25CF Configured</span>'
+      : '<span class="badge badge-ghost">Not set</span>';
+    const currentModel = p.modelId ? '<span class="prov-model">' + escHtml(p.modelId) + '</span>' : '';
+
+    cards += \\\`
+      <div class="provider-card" onclick="showModelConfigModal('\${escHtml(p.id)}')">
+        <div class="prov-head">
+          <div class="prov-name">\${icon} \${escHtml(p.name)}</div>
+          \${statusBadge}
+        </div>
+        <div class="prov-desc">\${escHtml(p.description)}</div>
+        \${currentModel}
+        <div class="prov-actions">
+          <button class="btn btn-sm btn-primary" onclick="event.stopPropagation();showModelConfigModal('\${escHtml(p.id)}')">Configure</button>
+        </div>
+      </div>\\\`;
   });
 
-  let currentModelsHtml = '';
-  if (data.currentModels && data.currentModels.length > 0) {
+  let activeModelsSection = '';
+  if (data.currentModels && data.currentModels.length) {
     let rows = '';
     data.currentModels.forEach(m => {
-      rows += \`<tr>
-        <td>\${escHtml(m.provider || '-')}</td>
-        <td class="mono">\${escHtml(m.modelId || '-')}</td>
-        <td>\${m.hasApiKey ? '<span class="badge badge-ok">\u25CF</span>' : '<span class="badge badge-danger">\u2717</span>'}</td>
-        <td class="mono">\${escHtml(m.baseUrl || '-')}</td>
-        <td><button class="btn btn-sm btn-ghost" onclick="showModelConfig('\${escHtml(m.providerId || m.provider || '')}')">Edit</button></td>
-      </tr>\`;
+      rows += \\\`<tr>
+        <td style="font-weight:500">\${escHtml(m.provider)}</td>
+        <td class="mono">\${escHtml(m.modelId)}</td>
+        <td><span class="badge badge-ok">\u25CF Key set</span></td>
+        <td class="mono" style="font-size:11px">\${escHtml(m.baseUrl || 'default')}</td>
+        <td><button class="btn btn-sm btn-ghost" onclick="showModelConfigModal('\${escHtml(m.providerId)}')">Edit</button></td>
+      </tr>\\\`;
     });
-    currentModelsHtml = \`
-      <div class="card">
-        <div class="card-header">
-          <div class="card-title">Configured Models</div>
-        </div>
-        <div style="overflow-x:auto">
-          <table>
-            <thead><tr><th>Provider</th><th>Model ID</th><th>API Key</th><th>Base URL</th><th>Actions</th></tr></thead>
-            <tbody>\${rows}</tbody>
-          </table>
-        </div>
-      </div>\`;
+    activeModelsSection = \\\`
+      <div class="card" style="margin-top:20px">
+        <div class="card-header"><div class="card-title">\u{1F4CA} Active Model Configurations</div></div>
+        <div style="overflow-x:auto"><table>
+          <thead><tr><th>Provider</th><th>Model</th><th>API Key</th><th>Base URL</th><th>Actions</th></tr></thead>
+          <tbody>\${rows}</tbody>
+        </table></div>
+      </div>\\\`;
   }
 
-  el.innerHTML = \`
-    <p class="section-desc">Quickly configure LLM providers. Click a provider card to set up your API key and model.</p>
-    <div class="provider-grid">\${provCards}</div>
-    \${currentModelsHtml}
-  \`;
+  html(el, \\\`
+    <div class="stats-grid" style="margin-bottom:24px">
+      <div class="stat-card">
+        <div class="stat-icon" style="background:var(--accent-bg)">\u{1F9E0}</div>
+        <div class="stat-label">Configured</div>
+        <div class="stat-value">\${configured} / \${providers.length}</div>
+        <div class="stat-sub">Providers with API keys</div>
+      </div>
+    </div>
+    <p class="section-desc">Configure LLM providers for your agents. Click a provider card to set or update the API key, model, and base URL. Changes are saved directly to your config file.</p>
+    <div class="provider-grid">\${cards}</div>
+    \${activeModelsSection}
+  \\\`);
 }
 
-let editingProviderId = null;
-function showModelConfig(providerId) {
-  editingProviderId = providerId;
-  const provider = (modelsConfig?.providers || []).find(p => p.id === providerId);
-  if (!provider) { toast('Provider not found', 'err'); return; }
-
-  $('#model-provider-name').textContent = provider.name;
-  $('#model-api-key').value = provider.apiKey || '';
-  $('#model-api-key').placeholder = provider.apiKeyHint || 'Enter your API key';
-  $('#model-model-id').value = provider.modelId || '';
-  $('#model-model-id').placeholder = provider.modelHint || 'e.g. gpt-4o';
-  $('#model-base-url').value = provider.baseUrl || '';
-  $('#model-base-url').placeholder = provider.baseUrlHint || 'Default: provider endpoint';
-
+let _editProviderId = null;
+function showModelConfigModal(id) {
+  const p = (_modelProviders?.providers || []).find(x => x.id === id);
+  if (!p) { toast('Provider not found', 'err'); return; }
+  _editProviderId = id;
+  $('#model-name').textContent = p.name;
+  $('#model-icon').textContent = p.id === 'openai' ? '\u{1F7E2}' : p.id === 'anthropic' ? '\u{1F7E0}' : '\u{1F7E2}';
+  $('#model-api-key').value = '';
+  $('#model-api-key').placeholder = p.apiKeyHint || 'Enter API key';
+  $('#model-model-id').value = p.modelId || '';
+  $('#model-model-id').placeholder = p.modelHint || 'Model ID';
+  $('#model-base-url').value = p.baseUrl || '';
+  $('#model-base-url').placeholder = p.baseUrlHint || 'Default URL';
+  $('#model-current-key').textContent = p.apiKeyHasValue ? 'Current: ' + p.apiKey : 'No API key configured';
   showModal('modal-model-config');
 }
-
 async function saveModelConfig() {
   const apiKey = $('#model-api-key').value.trim();
   const modelId = $('#model-model-id').value.trim();
   const baseUrl = $('#model-base-url').value.trim();
+  if (!apiKey && !modelId) { toast('Enter at least an API key or model ID', 'warn'); return; }
+  hideModal('modal-model-config');
+  toast('Saving configuration...', 'info');
+  const r = await api('/models/' + encodeURIComponent(_editProviderId), { method: 'PUT', body: JSON.stringify({ apiKey, modelId, baseUrl }) });
+  if (r.success) { toast(r.message || 'Configuration saved!', 'ok'); loadModels(); }
+  else { toast(r.message || r.error || 'Failed to save', 'err'); }
+}
+
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// PAGE: Settings
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+async function loadSettings() {
+  const el = $('#settings-content');
+  html(el, '<div class="loading-mask"><div class="spinner"></div>Loading settings...</div>');
+  const [status, identity, config] = await Promise.all([api('/status'), api('/identity'), api('/config')]);
 
-  if (!apiKey && !modelId) {
-    toast('Please enter at least an API key or model ID', 'err');
+  if (config.error) {
+    html(el, '<div class="empty"><div class="icon">\u26A0\uFE0F</div><p>' + escHtml(config.error) + '</p></div>');
     return;
   }
 
-  hideModal('modal-model-config');
-  toast('Saving model config...', 'info');
+  html(el, \\\`
+    <p class="section-desc">AICQ plugin runtime configuration and system information.</p>
 
-  try {
-    const r = await api('/models/' + encodeURIComponent(editingProviderId), {
-      method: 'PUT',
-      body: JSON.stringify({ apiKey, modelId, baseUrl })
-    });
-    if (r.success) { toast('Model config saved!', 'ok'); loadModels(); }
-    else { toast(r.message || 'Failed to save', 'err'); }
-  } catch (e) { toast('Error: ' + e.message, 'err'); }
-}
+    <div class="card">
+      <div class="card-header"><div class="card-title">\u{1F50C} Connection Settings</div></div>
+      <div class="detail-row"><div class="detail-key">Server URL</div><div class="detail-val mono" style="cursor:pointer" onclick="copyText('\${escHtml(status.serverUrl)}')">\${escHtml(status.serverUrl)} \u{1F4CB}</div></div>
+      <div class="detail-row"><div class="detail-key">WebSocket Status</div><div class="detail-val"><span class="badge badge-\${status.connected ? 'ok' : 'danger'}">\${status.connected ? 'Connected' : 'Disconnected'}</span></div></div>
+    </div>
 
-// \u2500\u2500 Loading helpers \u2500\u2500
-function setLoading(tab, loading) {
-  const el = $('#tab-' + tab);
-  if (!el) return;
-  const existing = el.querySelector('.loading-bar');
-  if (loading && !existing) {
-    const bar = document.createElement('div');
-    bar.className = 'loading-bar';
-    bar.innerHTML = '<div class="spinner"></div> Loading...';
-    bar.style.cssText = 'padding:12px;text-align:center;color:var(--text3);font-size:13px;display:flex;align-items:center;justify-content:center;gap:8px';
-    el.prepend(bar);
-  } else if (!loading && existing) {
-    existing.remove();
-  }
+    <div class="card">
+      <div class="card-header"><div class="card-title">\u{1F916} Agent Identity</div></div>
+      <div class="detail-row"><div class="detail-key">Agent ID</div><div class="detail-val mono" style="cursor:pointer" onclick="copyText('\${escHtml(identity.agentId)}')">\${escHtml(identity.agentId)} \u{1F4CB}</div></div>
+      <div class="detail-row"><div class="detail-key">Public Key Fingerprint</div><div class="detail-val mono">\${escHtml(identity.publicKeyFingerprint)}</div></div>
+    </div>
+
+    <div class="card">
+      <div class="card-header"><div class="card-title">\u{1F4C1} Config File</div></div>
+      <div class="detail-row"><div class="detail-key">Source</div><div class="detail-val" style="cursor:pointer" onclick="copyText('\${escHtml(config.configPath || '')}')">\${escHtml(config.configPath || 'Not found')} \u{1F4CB}</div></div>
+      <div class="detail-row"><div class="detail-key">Config Size</div><div class="detail-val">\${config.configSize || 0} bytes</div></div>
+    </div>
+
+    <div class="card">
+      <div class="card-header"><div class="card-title">\u{1F4CA} Statistics</div></div>
+      <div class="detail-row"><div class="detail-key">Friends Count</div><div class="detail-val">\${status.friendCount || 0}</div></div>
+      <div class="detail-row"><div class="detail-key">Active Sessions</div><div class="detail-val">\${status.sessionCount || 0}</div></div>
+      <div class="detail-row"><div class="detail-key">Plugin Version</div><div class="detail-val">1.0.4</div></div>
+    </div>
+  \\\`);
 }
 
-// \u2500\u2500 Init \u2500\u2500
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+// INIT
+// \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
 document.addEventListener('DOMContentLoaded', () => {
-  $$('.tab-btn[data-tab]').forEach(btn => {
-    btn.addEventListener('click', () => switchTab(btn.dataset.tab));
-  });
-  loadStatus();
-  switchTab('agents');
+  $$('.nav-item').forEach(n => n.addEventListener('click', () => navigate(n.dataset.page)));
+  $('.toggle-btn')?.addEventListener('click', toggleSidebar);
+
+  // Load dashboard
+  navigate('dashboard');
+
   // Auto-refresh status every 30s
-  setInterval(loadStatus, 30000);
+  refreshTimer = setInterval(() => {
+    if (currentPage === 'dashboard') loadDashboard();
+    // Update status dot
+    api('/status').then(s => {
+      if (!s.error) {
+        const dot = $('#header-dot');
+        if (dot) { dot.className = 'dot ' + (s.connected ? 'dot-ok' : 'dot-err'); }
+        const txt = $('#header-status');
+        if (txt) txt.textContent = s.connected ? 'Connected' : 'Disconnected';
+      }
+    });
+  }, 30000);
 });
 `;
 var HTML = `<!DOCTYPE html>
@@ -10487,62 +10677,86 @@ var HTML = `<!DOCTYPE html>
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>AICQ Management</title>
+<title>AICQ Management Console</title>
 <style>${CSS}</style>
 </head>
 <body>
-<div class="topbar">
-  <h1><span class="logo">AQ</span> AICQ Management</h1>
-  <div class="status">
-    <span id="status-dot" class="dot dot-err"></span>
-    <span id="status-text">Connecting...</span>
-  </div>
-</div>
+<div class="app">
+  <!-- Sidebar -->
+  <aside class="sidebar">
+    <div class="sidebar-header">
+      <div class="sidebar-logo">AQ</div>
+      <div class="sidebar-header-text"><h1>AICQ</h1><span>Management Console</span></div>
+    </div>
+    <nav class="sidebar-nav">
+      <div class="nav-group">
+        <div class="nav-group-title">Overview</div>
+        <div class="nav-item active" data-page="dashboard"><span class="nav-icon">\u{1F4CA}</span><span class="nav-label">Dashboard</span></div>
+      </div>
+      <div class="nav-group">
+        <div class="nav-group-title">Management</div>
+        <div class="nav-item" data-page="agents"><span class="nav-icon">\u{1F916}</span><span class="nav-label">Agents</span></div>
+        <div class="nav-item" data-page="friends"><span class="nav-icon">\u{1F465}</span><span class="nav-label">Friends</span><span class="nav-badge" id="friend-badge">0</span></div>
+        <div class="nav-item" data-page="models"><span class="nav-icon">\u{1F9E0}</span><span class="nav-label">Models</span></div>
+      </div>
+      <div class="nav-group">
+        <div class="nav-group-title">System</div>
+        <div class="nav-item" data-page="settings"><span class="nav-icon">\u2699\uFE0F</span><span class="nav-label">Settings</span></div>
+      </div>
+    </nav>
+    <div class="sidebar-footer" onclick="toggleSidebar()">
+      <span>\u25C0</span><span class="sidebar-footer-text">Collapse sidebar</span>
+    </div>
+  </aside>
+
+  <!-- Main -->
+  <main class="main">
+    <header class="main-header">
+      <button class="toggle-btn" onclick="toggleSidebar()">\u2630</button>
+      <h2 id="main-title">Dashboard</h2>
+      <div class="header-status">
+        <span class="dot dot-err" id="header-dot"></span>
+        <span id="header-status">Connecting...</span>
+      </div>
+      <div class="header-actions">
+        <button class="btn btn-sm btn-default" onclick="loadPage(currentPage)">\u{1F504} Refresh</button>
+      </div>
+    </header>
+    <div class="main-content">
 
-<div class="tabs">
-  <button class="tab-btn active" data-tab="agents" onclick="switchTab('agents')">\u{1F916} Agent Management</button>
-  <button class="tab-btn" data-tab="aicq" onclick="switchTab('aicq')">\u{1F4AC} AICQ Management</button>
-  <button class="tab-btn" data-tab="models" onclick="switchTab('models')">\u{1F9E0} Model Management</button>
-</div>
+      <!-- Dashboard -->
+      <div class="page active" id="page-dashboard"><div id="dashboard-content"><div class="loading-mask"><div class="spinner"></div>Loading...</div></div></div>
 
-<!-- TAB 1: Agent Management -->
-<div class="content" id="tab-agents">
-  <p class="section-desc">View and manage AICQ agent identities. Each agent has its own Ed25519 key pair and encrypted session state.</p>
-  <div id="agents-content">
-    <div class="loading"><div class="spinner"></div> Loading agents...</div>
-  </div>
-</div>
+      <!-- Agents -->
+      <div class="page" id="page-agents"><div id="agents-content"></div></div>
 
-<!-- TAB 2: AICQ Management -->
-<div class="content hidden" id="tab-aicq">
-  <p class="section-desc">Manage encrypted friend connections, pending requests, and active sessions on the AICQ network.</p>
-  <div class="tabs" id="aicq-subtabs" style="padding:0;margin-bottom:16px;border:none"></div>
-  <div id="aicq-content">
-    <div id="aicq-friends" class="hidden"></div>
-    <div id="aicq-requests" class="hidden"></div>
-    <div id="aicq-sessions" class="hidden"></div>
-  </div>
-</div>
+      <!-- Friends -->
+      <div class="page" id="page-friends">
+        <div id="friends-tabs" style="display:flex;gap:6px;margin-bottom:16px"></div>
+        <div id="friends-content"></div>
+      </div>
 
-<!-- TAB 3: Model Management -->
-<div class="content hidden" id="tab-models">
-  <p class="section-desc">Quickly configure LLM providers for your agents. Select a provider and enter your API key to get started.</p>
-  <div id="models-content">
-    <div class="loading"><div class="spinner"></div> Loading model config...</div>
-  </div>
+      <!-- Models -->
+      <div class="page" id="page-models"><div id="models-content"></div></div>
+
+      <!-- Settings -->
+      <div class="page" id="page-settings"><div id="settings-content"></div></div>
+
+    </div>
+  </main>
 </div>
 
 <!-- Modal: Add Friend -->
 <div class="modal-overlay hidden" id="modal-add-friend" onclick="if(event.target===this)hideModal('modal-add-friend')">
   <div class="modal">
-    <h3>\u2795 Add Friend</h3>
+    <div class="modal-header"><h3>\u2795 Add Friend</h3><button class="modal-close" onclick="hideModal('modal-add-friend')">\u2715</button></div>
     <div class="form-group">
-      <label>Temp Number or Friend ID</label>
-      <input id="add-friend-target" type="text" placeholder="Enter 6-digit temp number or node ID" onkeydown="if(event.key==='Enter')addFriend()">
-      <div class="hint">Enter the 6-digit temporary number shared by your friend, or their node ID directly.</div>
+      <label>Temp Number or Node ID</label>
+      <input id="add-friend-target" type="text" placeholder="6-digit number or node ID" onkeydown="if(event.key==='Enter')addFriend()">
+      <div class="hint">Enter the 6-digit temporary number or the full node ID of your friend.</div>
     </div>
     <div class="form-actions">
-      <button class="btn" onclick="hideModal('modal-add-friend')">Cancel</button>
+      <button class="btn btn-default" onclick="hideModal('modal-add-friend')">Cancel</button>
       <button class="btn btn-primary" onclick="addFriend()">Send Request</button>
     </div>
   </div>
@@ -10551,49 +10765,59 @@ var HTML = `<!DOCTYPE html>
 <!-- Modal: Edit Permissions -->
 <div class="modal-overlay hidden" id="modal-permissions" onclick="if(event.target===this)hideModal('modal-permissions')">
   <div class="modal">
-    <h3>\u2699\uFE0F Edit Permissions</h3>
+    <div class="modal-header"><h3>\u2699\uFE0F Edit Permissions</h3><button class="modal-close" onclick="hideModal('modal-permissions')">\u2715</button></div>
     <div class="form-group">
-      <label>Permissions for this friend</label>
-      <div class="perm-checks" style="margin-top:8px">
-        <label><input type="checkbox" id="perm-chat" checked> Chat <span style="color:var(--text3);font-size:11px">(send/receive messages)</span></label>
-        <label><input type="checkbox" id="perm-exec"> Exec <span style="color:var(--text3);font-size:11px">(execute tools)</span></label>
+      <label>Friend Permissions</label>
+      <div class="perm-checks" style="margin-top:10px">
+        <label><input type="checkbox" id="perm-chat" checked> \u{1F4AC} Chat <span style="color:var(--text3);font-size:11px">(send/receive messages)</span></label>
+        <label><input type="checkbox" id="perm-exec"> \u{1F527} Exec <span style="color:var(--text3);font-size:11px">(execute tools/commands)</span></label>
       </div>
     </div>
     <div class="form-actions">
-      <button class="btn" onclick="hideModal('modal-permissions')">Cancel</button>
-      <button class="btn btn-primary" onclick="savePermissions()">Save</button>
+      <button class="btn btn-default" onclick="hideModal('modal-permissions')">Cancel</button>
+      <button class="btn btn-primary" onclick="saveFriendPerms()">Save Permissions</button>
     </div>
   </div>
 </div>
 
 <!-- Modal: Model Config -->
 <div class="modal-overlay hidden" id="modal-model-config" onclick="if(event.target===this)hideModal('modal-model-config')">
-  <div class="modal" style="max-width:520px">
-    <h3>\u{1F9E0} <span id="model-provider-name">Configure Provider</span></h3>
+  <div class="modal" style="max-width:560px">
+    <div class="modal-header"><h3><span id="model-icon">\u{1F7E2}</span> <span id="model-name">Provider</span></h3><button class="modal-close" onclick="hideModal('modal-model-config')">\u2715</button></div>
+    <div style="margin-bottom:16px;font-size:12px;color:var(--text3)" id="model-current-key"></div>
     <div class="form-group">
-      <label>API Key</label>
-      <input id="model-api-key" type="password" placeholder="sk-...">
-      <div class="hint">Your provider API key. It will be stored securely in the OpenClaw config.</div>
+      <label>\u{1F511} API Key</label>
+      <div class="input-prefix"><span class="prefix">\u{1F511}</span><input id="model-api-key" type="password" placeholder="sk-..."></div>
+      <div class="hint">Leave blank to keep the existing key. Enter a new key to replace it.</div>
     </div>
     <div class="form-group">
-      <label>Model ID</label>
-      <input id="model-model-id" type="text" placeholder="gpt-4o">
-      <div class="hint">The model identifier to use. Leave default for the provider's recommended model.</div>
+      <label>\u{1F916} Model ID</label>
+      <div class="input-prefix"><span class="prefix">\u{1F916}</span><input id="model-model-id" type="text" placeholder="gpt-4o"></div>
+      <div class="hint">The model to use. E.g. gpt-4o, claude-sonnet-4-20250514, etc.</div>
     </div>
     <div class="form-group">
-      <label>Base URL <span style="color:var(--text3);font-size:11px">(optional)</span></label>
-      <input id="model-base-url" type="text" placeholder="https://api.openai.com/v1">
-      <div class="hint">Custom API endpoint. Only change this if using a compatible proxy or self-hosted model.</div>
+      <label>\u{1F310} Base URL <span style="font-weight:400;text-transform:none;letter-spacing:0;color:var(--text3)">(optional)</span></label>
+      <div class="input-prefix"><span class="prefix">\u{1F310}</span><input id="model-base-url" type="text" placeholder="https://..."></div>
+      <div class="hint">Custom endpoint URL. Only needed for proxies or self-hosted models.</div>
     </div>
     <div class="form-actions">
-      <button class="btn" onclick="hideModal('modal-model-config')">Cancel</button>
-      <button class="btn btn-primary" onclick="saveModelConfig()">Save Configuration</button>
+      <button class="btn btn-default" onclick="hideModal('modal-model-config')">Cancel</button>
+      <button class="btn btn-primary" onclick="saveModelConfig()">\u{1F4BE} Save Configuration</button>
     </div>
   </div>
 </div>
 
-<!-- Toast -->
-<div class="toast hidden" id="toast"></div>
+<!-- Modal: View Agent -->
+<div class="modal-overlay hidden" id="modal-view-agent" onclick="if(event.target===this)hideModal('modal-view-agent')">
+  <div class="modal">
+    <div class="modal-header"><h3>\u{1F916} <span id="view-agent-title">Agent</span></h3><button class="modal-close" onclick="hideModal('modal-view-agent')">\u2715</button></div>
+    <div id="view-agent-body"></div>
+    <div class="form-actions"><button class="btn btn-default" onclick="hideModal('modal-view-agent')">Close</button></div>
+  </div>
+</div>
+
+<!-- Toast Container -->
+<div id="toast-container" class="toast-container"></div>
 
 <script>${JS}</script>
 </body>
@@ -10607,113 +10831,60 @@ import * as fs5 from "fs";
 import * as path5 from "path";
 import * as os from "os";
 var MODEL_PROVIDERS = [
-  {
-    id: "openai",
-    name: "OpenAI",
-    description: "GPT-4o, GPT-4, GPT-3.5 and more",
-    apiKeyHint: "sk-...",
-    modelHint: "gpt-4o",
-    baseUrlHint: "https://api.openai.com/v1",
-    configKey: "openai"
-  },
-  {
-    id: "anthropic",
-    name: "Anthropic",
-    description: "Claude 4, Claude 3.5 Sonnet, Haiku",
-    apiKeyHint: "sk-ant-...",
-    modelHint: "claude-sonnet-4-20250514",
-    baseUrlHint: "https://api.anthropic.com",
-    configKey: "anthropic"
-  },
-  {
-    id: "google",
-    name: "Google AI",
-    description: "Gemini 2.5 Pro, Gemini 2.5 Flash",
-    apiKeyHint: "AI...",
-    modelHint: "gemini-2.5-pro",
-    baseUrlHint: "",
-    configKey: "google"
-  },
-  {
-    id: "groq",
-    name: "Groq",
-    description: "Llama 3, Mixtral \u2014 ultra fast inference",
-    apiKeyHint: "gsk_...",
-    modelHint: "llama-3.3-70b-versatile",
-    baseUrlHint: "https://api.groq.com/openai/v1",
-    configKey: "groq"
-  },
-  {
-    id: "deepseek",
-    name: "DeepSeek",
-    description: "DeepSeek V3, DeepSeek R1",
-    apiKeyHint: "sk-...",
-    modelHint: "deepseek-chat",
-    baseUrlHint: "https://api.deepseek.com/v1",
-    configKey: "deepseek"
-  },
-  {
-    id: "ollama",
-    name: "Ollama (Local)",
-    description: "Run models locally on your machine",
-    apiKeyHint: "(no key needed)",
-    modelHint: "llama3",
-    baseUrlHint: "http://localhost:11434/v1",
-    configKey: "ollama"
-  },
-  {
-    id: "openrouter",
-    name: "OpenRouter",
-    description: "Unified API for 200+ models",
-    apiKeyHint: "sk-or-...",
-    modelHint: "openai/gpt-4o",
-    baseUrlHint: "https://openrouter.ai/api/v1",
-    configKey: "openrouter"
-  },
-  {
-    id: "mistral",
-    name: "Mistral AI",
-    description: "Mistral Large, Medium, Small",
-    apiKeyHint: "(your key)",
-    modelHint: "mistral-large-latest",
-    baseUrlHint: "https://api.mistral.ai/v1",
-    configKey: "mistral"
-  }
+  { id: "openai", name: "OpenAI", description: "GPT-4o, GPT-4, GPT-3.5, o1, o3", apiKeyHint: "sk-...", modelHint: "gpt-4o", baseUrlHint: "https://api.openai.com/v1", configKey: "openai" },
+  { id: "anthropic", name: "Anthropic", description: "Claude 4, Claude 3.5 Sonnet, Haiku, Opus", apiKeyHint: "sk-ant-...", modelHint: "claude-sonnet-4-20250514", baseUrlHint: "https://api.anthropic.com", configKey: "anthropic" },
+  { id: "google", name: "Google AI", description: "Gemini 2.5 Pro, Gemini 2.5 Flash, Gemini Pro", apiKeyHint: "AI...", modelHint: "gemini-2.5-pro", baseUrlHint: "", configKey: "google" },
+  { id: "groq", name: "Groq", description: "Llama 3.3, Mixtral \u2014 ultra fast inference", apiKeyHint: "gsk_...", modelHint: "llama-3.3-70b-versatile", baseUrlHint: "https://api.groq.com/openai/v1", configKey: "groq" },
+  { id: "deepseek", name: "DeepSeek", description: "DeepSeek V3, DeepSeek R1 \u2014 strong reasoning", apiKeyHint: "sk-...", modelHint: "deepseek-chat", baseUrlHint: "https://api.deepseek.com/v1", configKey: "deepseek" },
+  { id: "ollama", name: "Ollama (Local)", description: "Run models locally \u2014 Llama, Mistral, Phi, etc.", apiKeyHint: "(no key needed)", modelHint: "llama3", baseUrlHint: "http://localhost:11434/v1", configKey: "ollama" },
+  { id: "openrouter", name: "OpenRouter", description: "Unified API for 200+ open-source and commercial models", apiKeyHint: "sk-or-...", modelHint: "openai/gpt-4o", baseUrlHint: "https://openrouter.ai/api/v1", configKey: "openrouter" },
+  { id: "mistral", name: "Mistral AI", description: "Mistral Large, Medium, Small, Codestral", apiKeyHint: "(your key)", modelHint: "mistral-large-latest", baseUrlHint: "https://api.mistral.ai/v1", configKey: "mistral" },
+  { id: "together", name: "Together AI", description: "Open-source models with fast inference", apiKeyHint: "...", modelHint: "meta-llama/Llama-3-70b-chat-hf", baseUrlHint: "https://api.together.xyz/v1", configKey: "together" },
+  { id: "fireworks", name: "Fireworks AI", description: "Fast open-source model serving", apiKeyHint: "...", modelHint: "accounts/fireworks/models/llama-v3-70b-instruct", baseUrlHint: "https://api.fireworks.ai/inference/v1", configKey: "fireworks" }
 ];
-function findOpenClawConfig() {
-  const candidates = [
+function findConfigPath() {
+  const openclawPaths = [
     path5.join(process.cwd(), "openclaw.json"),
-    path5.join(process.cwd(), "stableclaw.json"),
     path5.join(os.homedir(), ".config", "openclaw", "openclaw.json"),
-    path5.join(os.homedir(), ".config", "stableclaw", "stableclaw.json"),
     path5.join(os.homedir(), ".openclaw", "openclaw.json"),
+    path5.join(os.homedir(), "openclaw.json")
+  ];
+  for (const p of openclawPaths) {
+    try {
+      if (fs5.existsSync(p))
+        return p;
+    } catch {
+    }
+  }
+  const stableclawPaths = [
+    path5.join(process.cwd(), "stableclaw.json"),
+    path5.join(os.homedir(), ".config", "stableclaw", "stableclaw.json"),
     path5.join(os.homedir(), ".stableclaw", "stableclaw.json"),
-    path5.join(os.homedir(), "openclaw.json"),
     path5.join(os.homedir(), "stableclaw.json")
   ];
-  for (const p of candidates) {
+  for (const p of stableclawPaths) {
     try {
-      if (fs5.existsSync(p)) {
+      if (fs5.existsSync(p))
         return p;
-      }
     } catch {
     }
   }
   return null;
 }
-function readOpenClawConfig() {
-  const configPath = findOpenClawConfig();
+function readConfig() {
+  const configPath = findConfigPath();
   if (!configPath)
     return null;
   try {
     const raw = fs5.readFileSync(configPath, "utf-8");
-    return JSON.parse(raw);
+    const config2 = JSON.parse(raw);
+    return { config: config2, configPath };
   } catch {
     return null;
   }
 }
-function writeOpenClawConfig(config2) {
-  const configPath = findOpenClawConfig();
+function writeConfig(config2) {
+  const configPath = findConfigPath();
   if (!configPath)
     return false;
   try {
@@ -10723,24 +10894,54 @@ function writeOpenClawConfig(config2) {
     return false;
   }
 }
-function getModelConfig(config2) {
+function extractAgentsFromConfig(config2) {
+  const agents = [];
+  const agentsVal = config2.agents;
+  if (Array.isArray(agentsVal)) {
+    for (const a of agentsVal) {
+      if (typeof a === "object" && a !== null) {
+        agents.push(a);
+      }
+    }
+  }
+  const agentVal = config2.agent;
+  if (typeof agentVal === "object" && agentVal !== null && !Array.isArray(agentVal)) {
+    agents.unshift(agentVal);
+  }
+  if (agents.length === 0) {
+    for (const [key, val] of Object.entries(config2)) {
+      if (typeof val === "object" && val !== null && !Array.isArray(val)) {
+        const v = val;
+        if (v.model || v.systemPrompt || v.provider || v.apiKey) {
+          agents.push({ _configKey: key, ...v });
+        }
+      }
+    }
+  }
+  return agents;
+}
+function getModelProviders(config2) {
+  let providersSection = config2.providers;
+  if (!providersSection || typeof providersSection !== "object") {
+    const model = config2.model;
+    if (model?.providers)
+      providersSection = model.providers;
+  }
   const providers = MODEL_PROVIDERS.map((p) => {
-    const providersSection2 = config2.providers;
-    const providerConfig = providersSection2?.[p.configKey] ?? config2[p.configKey];
-    const apiKey = providerConfig?.apiKey || "";
-    const modelId = providerConfig?.model || providerConfig?.defaultModel || "";
-    const baseUrl = providerConfig?.baseUrl || providerConfig?.baseURL || "";
+    const pc = providersSection?.[p.configKey] ?? config2[p.configKey];
+    const apiKey = pc?.apiKey || "";
+    const modelId = pc?.model || pc?.defaultModel || "";
+    const baseUrl = pc?.baseUrl || pc?.baseURL || "";
     return {
       ...p,
       configured: Boolean(apiKey || p.id === "ollama" && baseUrl),
-      apiKey: apiKey ? apiKey.substring(0, 8) + "..." + apiKey.slice(-4) : "",
+      apiKey: apiKey ? apiKey.substring(0, 6) + "\u2022\u2022\u2022\u2022\u2022\u2022" + apiKey.slice(-4) : "",
       apiKeyHasValue: Boolean(apiKey),
       modelId,
       baseUrl
     };
   });
   const currentModels = [];
-  const providersSection = config2.providers;
   for (const p of MODEL_PROVIDERS) {
     const pc = providersSection?.[p.configKey] ?? config2[p.configKey];
     if (pc?.apiKey) {
@@ -10749,25 +10950,38 @@ function getModelConfig(config2) {
         providerId: p.id,
         modelId: pc.model || pc.defaultModel || p.modelHint,
         hasApiKey: true,
-        baseUrl: pc.baseUrl || pc.baseURL || ""
+        baseUrl: pc.baseUrl || pc.baseURL || p.baseUrlHint
       });
     }
   }
   return { providers, currentModels };
 }
-function parseSubPath(reqPath, prefix) {
-  const fullPrefix = "/plugins" + prefix;
-  if (reqPath.startsWith(fullPrefix)) {
-    return reqPath.slice(fullPrefix.length) || "/";
-  }
-  return "/";
+function parseApiPath(reqUrl) {
+  if (!reqUrl)
+    return "/";
+  const urlPath = reqUrl.split("?")[0];
+  const gatewayPrefix = "/plugins/aicq-chat";
+  if (urlPath.startsWith(gatewayPrefix)) {
+    return urlPath.slice(gatewayPrefix.length) || "/";
+  }
+  return urlPath;
 }
 function json(res, data, status = 200) {
   if (!res.headersSent) {
-    res.writeHead(status, { "Content-Type": "application/json; charset=utf-8" });
+    res.writeHead(status, { "Content-Type": "application/json; charset=utf-8", "Access-Control-Allow-Origin": "*" });
   }
   res.end(JSON.stringify(data));
 }
+function corsHeaders(res) {
+  if (!res.headersSent) {
+    res.writeHead(200, {
+      "Content-Type": "application/json; charset=utf-8",
+      "Access-Control-Allow-Origin": "*",
+      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
+      "Access-Control-Allow-Headers": "Content-Type"
+    });
+  }
+}
 async function readBody(req) {
   return new Promise((resolve3) => {
     const chunks = [];
@@ -10786,19 +11000,24 @@ async function readBody(req) {
 function createManagementHandler(ctx) {
   const { store, identityService, serverClient, serverUrl, aicqAgentId, logger, html } = ctx;
   return async (req, res) => {
-    const subPath = parseSubPath(req.url || "/", "/aicq-chat");
-    if (subPath === "/" || subPath === "/ui" || subPath === "") {
+    const urlPath = parseApiPath(req.url || "/");
+    const method = (req.method || "GET").toUpperCase();
+    if (method === "OPTIONS") {
+      corsHeaders(res);
+      res.end();
+      return;
+    }
+    if (urlPath === "/" || urlPath === "/ui" || urlPath === "/index.html") {
       res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
       res.end(html);
       return;
     }
-    if (!subPath.startsWith("/api/")) {
+    if (!urlPath.startsWith("/api/")) {
       res.writeHead(404, { "Content-Type": "application/json" });
       res.end(JSON.stringify({ error: "Not found" }));
       return;
     }
-    const apiPath = subPath.slice(4);
-    const method = (req.method || "GET").toUpperCase();
+    const apiPath = urlPath.slice(4);
     try {
       if (apiPath === "/status" && method === "GET") {
         return json(res, {
@@ -10820,62 +11039,70 @@ function createManagementHandler(ctx) {
           sessionCount: store.sessions.size
         });
       }
+      if (apiPath === "/config" && method === "GET") {
+        const result = readConfig();
+        if (!result)
+          return json(res, { error: "No config file found. Create openclaw.json or stableclaw.json." });
+        const stats = fs5.statSync(result.configPath);
+        return json(res, {
+          configPath: result.configPath,
+          configSize: stats.size,
+          configModified: stats.mtime.toISOString()
+        });
+      }
       if (apiPath === "/agents" && method === "GET") {
-        const localFriends = Array.from(store.friends.values()).map((f) => ({
-          id: f.id,
-          name: f.aiName || f.id.substring(0, 8),
-          friendType: f.friendType,
-          publicKeyFingerprint: f.publicKeyFingerprint,
-          permissions: f.permissions || [],
-          lastMessageAt: f.lastMessageAt?.toISOString() || null,
-          sessionCount: store.sessions.has(f.id) ? store.sessions.get(f.id)?.messageCount || 0 : 0
-        }));
-        let serverFriends = [];
-        try {
-          const resp = await fetch(serverUrl + "/api/v1/friends?nodeId=" + aicqAgentId);
-          if (resp.ok) {
-            const data = await resp.json();
-            serverFriends = data.friends || [];
-          }
-        } catch {
-        }
-        const localIds = new Set(localFriends.map((f) => f.id));
-        for (const sf of serverFriends) {
-          const sfId = sf.nodeId;
-          if (sfId && !localIds.has(sfId)) {
-            localFriends.push({
-              id: sfId,
-              name: sf.aiName || sfId.substring(0, 8),
-              friendType: sf.friendType || void 0,
-              publicKeyFingerprint: sf.publicKeyFingerprint || "",
-              permissions: sf.permissions || [],
-              lastMessageAt: sf.lastMessageAt || null,
-              sessionCount: 0
-            });
-          }
+        const result = readConfig();
+        if (!result) {
+          return json(res, {
+            agents: [],
+            configSource: "none",
+            currentAgentId: aicqAgentId,
+            fingerprint: identityService.getPublicKeyFingerprint(),
+            connected: serverClient.isConnected()
+          });
         }
+        const agents = extractAgentsFromConfig(result.config);
+        globalThis.__aicq_agents = agents;
         return json(res, {
-          agents: localFriends,
+          agents,
+          configSource: path5.basename(result.configPath),
+          configPath: result.configPath,
           currentAgentId: aicqAgentId,
           fingerprint: identityService.getPublicKeyFingerprint(),
           connected: serverClient.isConnected()
         });
       }
       if (apiPath.startsWith("/agents/") && method === "DELETE") {
-        const friendId = decodeURIComponent(apiPath.slice("/agents/".length));
-        if (!friendId)
-          return json(res, { success: false, message: "Missing agent ID" }, 400);
-        try {
-          await fetch(serverUrl + "/api/v1/friends/" + friendId, {
-            method: "DELETE",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ nodeId: aicqAgentId })
-          });
-        } catch {
+        const idxStr = decodeURIComponent(apiPath.slice("/agents/".length));
+        const idx = parseInt(idxStr, 10);
+        if (isNaN(idx) || idx < 0)
+          return json(res, { success: false, message: "Invalid agent index" }, 400);
+        const result = readConfig();
+        if (!result)
+          return json(res, { success: false, message: "No config file found" }, 400);
+        const config2 = result.config;
+        let agentsArr;
+        if (Array.isArray(config2.agents)) {
+          agentsArr = config2.agents;
+        } else if (typeof config2.agent === "object" && config2.agent !== null && idx === 0) {
+          delete config2.agent;
+          const written2 = writeConfig(config2);
+          if (written2) {
+            logger.info("[API] Agent deleted from config");
+            return json(res, { success: true, message: "Agent removed" });
+          }
+          return json(res, { success: false, message: "Failed to write config" }, 500);
+        }
+        if (!agentsArr || idx >= agentsArr.length) {
+          return json(res, { success: false, message: "Agent index out of range" }, 400);
+        }
+        agentsArr.splice(idx, 1);
+        const written = writeConfig(config2);
+        if (written) {
+          logger.info("[API] Agent deleted at index " + idx);
+          return json(res, { success: true, message: "Agent removed" });
         }
-        store.removeFriend(friendId);
-        logger.info("[API] Agent/friend deleted: " + friendId);
-        return json(res, { success: true, message: "Agent removed" });
+        return json(res, { success: false, message: "Failed to write config" }, 500);
       }
       if (apiPath === "/friends" && method === "GET") {
         try {
@@ -10909,26 +11136,36 @@ function createManagementHandler(ctx) {
         const isTempNumber = /^\d{6}$/.test(target);
         let friendId = target;
         if (isTempNumber) {
-          const resolveResp = await fetch(serverUrl + "/api/v1/temp-number/" + target);
-          if (!resolveResp.ok)
-            return json(res, { success: false, message: "Temp number not found or expired" });
-          const resolveData = await resolveResp.json();
-          friendId = resolveData.nodeId;
-        }
-        const hsResp = await fetch(serverUrl + "/api/v1/handshake/initiate", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ requesterId: aicqAgentId, targetTempNumber: target })
-        });
-        if (!hsResp.ok)
-          return json(res, { success: false, message: "Handshake failed: " + await hsResp.text() });
-        const hsData = await hsResp.json();
-        logger.info("[API] Friend request sent to " + friendId);
-        return json(res, { success: true, message: "Friend request sent to " + friendId, sessionId: hsData.sessionId, targetNodeId: friendId });
+          try {
+            const resolveResp = await fetch(serverUrl + "/api/v1/temp-number/" + target);
+            if (!resolveResp.ok)
+              return json(res, { success: false, message: "Temp number not found or expired" });
+            const resolveData = await resolveResp.json();
+            friendId = resolveData.nodeId;
+          } catch (err) {
+            const msg = err instanceof Error ? err.message : String(err);
+            return json(res, { success: false, message: "Failed to resolve temp number: " + msg }, 502);
+          }
+        }
+        try {
+          const hsResp = await fetch(serverUrl + "/api/v1/handshake/initiate", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ requesterId: aicqAgentId, targetTempNumber: target })
+          });
+          if (!hsResp.ok)
+            return json(res, { success: false, message: "Handshake failed: " + await hsResp.text() });
+          const hsData = await hsResp.json();
+          logger.info("[API] Friend request sent to " + friendId);
+          return json(res, { success: true, message: "Friend request sent to " + friendId, sessionId: hsData.sessionId, targetNodeId: friendId });
+        } catch (err) {
+          const msg = err instanceof Error ? err.message : String(err);
+          return json(res, { success: false, message: "Handshake request failed: " + msg }, 502);
+        }
       }
-      if (apiPath.startsWith("/friends/") && !apiPath.includes("/permissions") && !apiPath.includes("/requests") && method === "DELETE") {
+      if (apiPath.startsWith("/friends/") && method === "DELETE") {
         if (apiPath.includes("/requests/")) {
-          const parts = apiPath.split("/");
+        } else if (apiPath.includes("/permissions")) {
         } else {
           const friendId = decodeURIComponent(apiPath.slice("/friends/".length));
           if (!friendId)
@@ -10966,7 +11203,7 @@ function createManagementHandler(ctx) {
             body: JSON.stringify({ nodeId: aicqAgentId, permissions })
           });
           if (!resp.ok)
-            return json(res, { success: false, message: "Failed to update: " + await resp.text() });
+            return json(res, { success: false, message: "Failed: " + await resp.text() });
           const localFriend = store.getFriend(friendId);
           if (localFriend) {
             localFriend.permissions = permissions;
@@ -10996,29 +11233,39 @@ function createManagementHandler(ctx) {
         if (!requestId)
           return json(res, { success: false, message: "Missing request ID" }, 400);
         const body = await readBody(req);
-        const resp = await fetch(serverUrl + "/api/v1/friends/requests/" + requestId + "/accept", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ permissions: body.permissions || ["chat"] })
-        });
-        if (!resp.ok)
-          return json(res, { success: false, message: "Failed: " + await resp.text() });
-        logger.info("[API] Friend request accepted: " + requestId);
-        return json(res, { success: true, message: "Friend request accepted" });
+        try {
+          const resp = await fetch(serverUrl + "/api/v1/friends/requests/" + requestId + "/accept", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ permissions: body.permissions || ["chat"] })
+          });
+          if (!resp.ok)
+            return json(res, { success: false, message: "Failed: " + await resp.text() });
+          logger.info("[API] Friend request accepted: " + requestId);
+          return json(res, { success: true, message: "Friend request accepted" });
+        } catch (err) {
+          const msg = err instanceof Error ? err.message : String(err);
+          return json(res, { success: false, message: msg }, 500);
+        }
       }
       if (apiPath.match(/^\/friends\/requests\/[^/]+\/reject$/) && method === "POST") {
         const requestId = decodeURIComponent(apiPath.split("/")[3]);
         if (!requestId)
           return json(res, { success: false, message: "Missing request ID" }, 400);
-        const resp = await fetch(serverUrl + "/api/v1/friends/requests/" + requestId + "/reject", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({})
-        });
-        if (!resp.ok)
-          return json(res, { success: false, message: "Failed: " + await resp.text() });
-        logger.info("[API] Friend request rejected: " + requestId);
-        return json(res, { success: true, message: "Friend request rejected" });
+        try {
+          const resp = await fetch(serverUrl + "/api/v1/friends/requests/" + requestId + "/reject", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({})
+          });
+          if (!resp.ok)
+            return json(res, { success: false, message: "Failed: " + await resp.text() });
+          logger.info("[API] Friend request rejected: " + requestId);
+          return json(res, { success: true, message: "Friend request rejected" });
+        } catch (err) {
+          const msg = err instanceof Error ? err.message : String(err);
+          return json(res, { success: false, message: msg }, 500);
+        }
       }
       if (apiPath === "/sessions" && method === "GET") {
         const sessions = Array.from(store.sessions.values()).map((s) => ({
@@ -11029,9 +11276,10 @@ function createManagementHandler(ctx) {
         return json(res, { sessions });
       }
       if (apiPath === "/models" && method === "GET") {
-        const config2 = readOpenClawConfig();
-        const modelData = config2 ? getModelConfig(config2) : { providers: MODEL_PROVIDERS, currentModels: [] };
-        return json(res, modelData);
+        const result = readConfig();
+        if (!result)
+          return json(res, { providers: MODEL_PROVIDERS, currentModels: [], error: "No config file found" });
+        return json(res, getModelProviders(result.config));
       }
       if (apiPath.match(/^\/models\/[^/]+$/) && method === "PUT") {
         const providerId = decodeURIComponent(apiPath.slice("/models/".length));
@@ -11042,15 +11290,15 @@ function createManagementHandler(ctx) {
         const provider = MODEL_PROVIDERS.find((p) => p.id === providerId);
         if (!provider)
           return json(res, { success: false, message: "Unknown provider: " + providerId }, 400);
-        const config2 = readOpenClawConfig();
-        if (!config2) {
-          return json(res, { success: false, message: "Could not find openclaw.json config file. Make sure OpenClaw is properly configured." }, 400);
-        }
-        if (!config2.providers) {
+        const result = readConfig();
+        if (!result)
+          return json(res, { success: false, message: "No config file found. Create openclaw.json or stableclaw.json." }, 400);
+        const config2 = result.config;
+        if (!config2.providers || typeof config2.providers !== "object") {
           config2.providers = {};
         }
         const providers = config2.providers;
-        if (!providers[provider.configKey]) {
+        if (!providers[provider.configKey] || typeof providers[provider.configKey] !== "object") {
           providers[provider.configKey] = {};
         }
         const provConfig = providers[provider.configKey];
@@ -11060,10 +11308,9 @@ function createManagementHandler(ctx) {
           provConfig.model = modelId;
         if (baseUrl)
           provConfig.baseUrl = baseUrl;
-        const written = writeOpenClawConfig(config2);
-        if (!written) {
+        const written = writeConfig(config2);
+        if (!written)
           return json(res, { success: false, message: "Failed to write config file" }, 500);
-        }
         logger.info("[API] Model config saved for provider: " + providerId);
         return json(res, { success: true, message: "Model configuration saved for " + provider.name });
       }
@@ -11619,28 +11866,52 @@ var plugin = definePluginEntry({
       });
       logger.info("[Init] Registered 13 gateway methods for management UI");
     }
-    if (api.registerHttpRoute) {
-      const managementHtml = getManagementHTML();
-      const managementHandler = createManagementHandler({
-        store,
-        identityService,
-        serverClient,
-        serverUrl,
-        aicqAgentId,
-        logger,
-        html: managementHtml
+    const managementHtml = getManagementHTML();
+    const managementHandler = createManagementHandler({
+      store,
+      identityService,
+      serverClient,
+      serverUrl,
+      aicqAgentId,
+      logger,
+      html: managementHtml
+    });
+    const mgmtPort = parseInt(process.env.AICQ_MGMT_PORT || "461099", 10);
+    const mgmtServer = http.createServer((req, res) => {
+      managementHandler(req, res).catch((err) => {
+        logger.error("[HTTP] Management server error: " + (err instanceof Error ? err.message : err));
+        if (!res.headersSent) {
+          res.writeHead(500, { "Content-Type": "text/plain" });
+        }
+        res.end("Internal Server Error");
       });
+    });
+    mgmtServer.listen(mgmtPort, "127.0.0.1", () => {
+      logger.info("[Init] Management UI HTTP server running at http://127.0.0.1:" + mgmtPort + "/");
+    });
+    mgmtServer.on("error", (err) => {
+      if (err.code === "EADDRINUSE") {
+        logger.warn("[Init] Management UI port " + mgmtPort + " already in use, trying " + (mgmtPort + 1));
+        mgmtServer.close();
+        mgmtServer.listen(mgmtPort + 1, "127.0.0.1", () => {
+          logger.info("[Init] Management UI HTTP server running at http://127.0.0.1:" + (mgmtPort + 1) + "/");
+        });
+      } else {
+        logger.error("[Init] Management UI HTTP server error: " + err.message);
+      }
+    });
+    if (api.registerHttpRoute) {
       api.registerHttpRoute({
         path: "/aicq-chat",
         auth: "gateway",
         match: "prefix",
         handler: managementHandler
       });
-      logger.info("[Init] Management UI registered at /plugins/aicq-chat/");
+      logger.info("[Init] Management UI also registered via gateway at /plugins/aicq-chat/");
     }
     logger.info("\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550");
     logger.info("  AICQ Plugin activated successfully!");
-    logger.info("  Management UI: /plugins/aicq-chat/");
+    logger.info("  Management UI: http://127.0.0.1:" + mgmtPort + "/");
     logger.info("\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550");
   }
 });