@greatlhd/ailo-desktop 1.0.0

package/dist/skills_manager.js

@@ -0,0 +1,103 @@
+import { readdir, readFile } from "fs/promises";
+import { join, dirname, resolve } from "path";
+import { fileURLToPath } from "url";
+export class SkillsManager {
+    builtinDir;
+    constructor(builtinDir) {
+        this.builtinDir = builtinDir ?? this.resolveBuiltinDir();
+    }
+    resolveBuiltinDir() {
+        try {
+            const thisFile = fileURLToPath(import.meta.url);
+            return resolve(dirname(thisFile), "../../..", "skills");
+        }
+        catch {
+            return join(process.cwd(), "skills");
+        }
+    }
+    async listAll() {
+        const result = [];
+        const entries = await this.scanDir(this.builtinDir);
+        for (const [, dir] of entries) {
+            const meta = await this.parseSkillMd(dir);
+            if (meta)
+                result.push(meta);
+        }
+        return result;
+    }
+    async getSkill(name) {
+        const skillPath = join(this.builtinDir, name, "SKILL.md");
+        try {
+            const content = await readFile(skillPath, "utf-8");
+            return this.parseSkillMdContent(content, name);
+        }
+        catch {
+            return null;
+        }
+    }
+    async scanDir(dir) {
+        const result = new Map();
+        try {
+            const entries = await readdir(dir, { withFileTypes: true });
+            for (const entry of entries) {
+                if (!entry.isDirectory())
+                    continue;
+                const skillPath = join(dir, entry.name, "SKILL.md");
+                try {
+                    await readFile(skillPath, "utf-8");
+                    result.set(entry.name, join(dir, entry.name));
+                }
+                catch { }
+            }
+        }
+        catch { }
+        return result;
+    }
+    async parseSkillMd(dir) {
+        try {
+            const raw = await readFile(join(dir, "SKILL.md"), "utf-8");
+            const dirName = dir.split(/[/\\]/).pop() ?? "skill";
+            return this.parseSkillMdContent(raw, dirName);
+        }
+        catch {
+            return null;
+        }
+    }
+    parseSkillMdContent(raw, fallbackName) {
+        const trimmed = raw.trim();
+        if (!trimmed)
+            return { name: fallbackName, description: "", content: "" };
+        let name = fallbackName;
+        let description = "";
+        let content;
+        if (trimmed.startsWith("---")) {
+            const endIdx = trimmed.indexOf("---", 3);
+            if (endIdx > 0) {
+                const frontmatter = trimmed.slice(3, endIdx);
+                content = trimmed.slice(endIdx + 3).trim();
+                for (const line of frontmatter.split("\n")) {
+                    const colonIdx = line.indexOf(":");
+                    if (colonIdx < 0)
+                        continue;
+                    const key = line.slice(0, colonIdx).trim().toLowerCase();
+                    const val = line.slice(colonIdx + 1).trim().replace(/^["']|["']$/g, "");
+                    if (key === "name" && val)
+                        name = val;
+                    if (key === "description" && val)
+                        description = val;
+                }
+            }
+            else {
+                content = trimmed;
+            }
+        }
+        else {
+            content = trimmed;
+        }
+        if (!description) {
+            const firstLine = content.split("\n").find((l) => l.trim() && !l.startsWith("#"));
+            description = firstLine?.trim().slice(0, 200) ?? name;
+        }
+        return { name, description, content };
+    }
+}

package/dist/static/AGENTS.md

@@ -0,0 +1,25 @@
+<!-- Parent: ../AGENTS.md -->
+<!-- Generated: 2026-04-10 | Updated: 2026-04-10 -->
+
+# ailo-desktop/src/static
+
+## Purpose
+Web UI static assets for the desktop endpoint config interface.
+
+## Files
+
+| File | Description |
+|------|-------------|
+| `app.html` | Main config UI HTML |
+| `app.css` | Config UI styles |
+| `app.js` | Config UI JavaScript |
+| `chat.html` | Chat UI HTML (if separate) |
+
+## For AI Agents
+
+### Working In This Directory
+- These files are copied to `dist/` during build
+- Serve as the web-based configuration UI for desktop endpoint
+- User accesses via browser to configure credentials
+
+<!-- MANUAL: -->

package/dist/static/app.css

@@ -0,0 +1,539 @@
+/* ─── Design Tokens ──────────────────────────────────────────── */
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');
+
+:root {
+  --bg-base:       #0a0a0f;
+  --bg-elevated:   #12121a;
+  --bg-surface:    #18181f;
+  --bg-surface-2:  #1e1e28;
+  --bg-muted:      #262630;
+  --accent:        #7c6ff7;
+  --accent-light:  #9d8fff;
+  --accent-soft:   rgba(124,111,247,.15);
+  --accent-user:   #5b9eef;
+  --text-primary:  #f0f0f5;
+  --text-secondary:#9898a8;
+  --text-muted:    #606070;
+  --border:        rgba(255,255,255,.08);
+  --border-focus:  rgba(124,111,247,.5);
+  --success:       #50d68d;
+  --success-soft:  rgba(80,214,141,.15);
+  --warning:       #f5c842;
+  --warning-soft:  rgba(245,200,66,.15);
+  --error:         #f57070;
+  --error-soft:    rgba(245,112,112,.15);
+  --radius-sm:     6px;
+  --radius-md:     10px;
+  --radius-lg:     14px;
+  --radius-xl:     20px;
+  --sidebar-w:     220px;
+  --shadow-sm:     0 2px 8px rgba(0,0,0,.3);
+  --shadow-md:     0 8px 32px rgba(0,0,0,.45);
+  --transition:    .18s ease;
+}
+
+/* ─── Reset ──────────────────────────────────────────────────── */
+*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
+
+body {
+  font-family: 'DM Sans','Noto Sans SC',-apple-system,BlinkMacSystemFont,sans-serif;
+  background: var(--bg-base);
+  color: var(--text-primary);
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
+  -webkit-font-smoothing: antialiased;
+  font-size: 15px;
+  line-height: 1.55;
+  background-image:
+    radial-gradient(ellipse at 10% 0%, rgba(124,111,247,.06) 0%, transparent 55%),
+    radial-gradient(ellipse at 90% 100%, rgba(91,158,239,.04) 0%, transparent 55%);
+}
+
+/* ─── Scrollbar ──────────────────────────────────────────────── */
+::-webkit-scrollbar { width:5px; height:5px; }
+::-webkit-scrollbar-track { background:transparent; }
+::-webkit-scrollbar-thumb { background:var(--bg-muted); border-radius:3px; }
+::-webkit-scrollbar-thumb:hover { background:var(--text-muted); }
+
+/* ─── Sidebar ────────────────────────────────────────────────── */
+.sidebar {
+  width: var(--sidebar-w);
+  height: 100vh;
+  background: var(--bg-elevated);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  overflow-y: auto;
+}
+
+.sidebar-brand {
+  display: flex;
+  align-items: center;
+  gap: 11px;
+  padding: 22px 18px 18px;
+  border-bottom: 1px solid var(--border);
+}
+
+.brand-icon {
+  width: 34px; height: 34px;
+  background: linear-gradient(135deg,var(--accent),var(--accent-light));
+  border-radius: 9px;
+  display: flex; align-items: center; justify-content: center;
+  flex-shrink: 0;
+  box-shadow: 0 4px 12px rgba(124,111,247,.3);
+}
+.brand-icon svg { width:18px; height:18px; color:#fff; }
+
+.brand-info { min-width:0; }
+.brand-name {
+  font-size: 15px; font-weight: 700; letter-spacing:-.02em;
+  background: linear-gradient(135deg,var(--text-primary),var(--accent-light));
+  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+  background-clip: text;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.brand-status {
+  display: flex; align-items: center; gap: 6px;
+  margin-top: 3px; font-size: 12px; color: var(--text-muted);
+}
+.status-dot {
+  width: 7px; height: 7px; border-radius: 50%;
+  background: var(--text-muted); flex-shrink: 0;
+  transition: background var(--transition), box-shadow var(--transition);
+}
+.status-dot.on  { background:var(--success); box-shadow:0 0 8px rgba(80,214,141,.5); }
+.status-dot.off { background:var(--error);   box-shadow:0 0 8px rgba(245,112,112,.4); }
+
+.sidebar-nav {
+  flex: 1;
+  padding: 10px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.nav-section-label {
+  font-size: 11px; font-weight: 600; letter-spacing: .08em;
+  color: var(--text-muted); text-transform: uppercase;
+  padding: 10px 8px 4px;
+}
+
+.nav-item {
+  display: flex; align-items: center; gap: 10px;
+  padding: 9px 10px;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  font-size: 14px; font-weight: 500; color: var(--text-secondary);
+  transition: background var(--transition), color var(--transition);
+  user-select: none;
+  position: relative;
+  border: 1px solid transparent;
+}
+.nav-item svg { width:17px; height:17px; flex-shrink:0; opacity:.75; transition:opacity var(--transition); }
+.nav-item:hover { background:var(--bg-surface); color:var(--text-primary); }
+.nav-item:hover svg { opacity:1; }
+.nav-item.active {
+  background: var(--accent-soft);
+  color: var(--accent-light);
+  border-color: rgba(124,111,247,.2);
+}
+.nav-item.active svg { opacity:1; color:var(--accent-light); }
+.nav-item.active::before {
+  content:''; position:absolute; left:-1px; top:25%; bottom:25%;
+  width:3px; background:var(--accent); border-radius:0 2px 2px 0;
+}
+
+.nav-badge {
+  margin-left: auto;
+  font-size: 11px; font-weight: 600;
+  background: var(--accent-soft); color: var(--accent-light);
+  padding: 1px 7px; border-radius: 100px;
+}
+.nav-badge.on  { background:var(--success-soft); color:var(--success); }
+.nav-badge.off { background:var(--error-soft);   color:var(--error); }
+
+/* ─── Main ───────────────────────────────────────────────────── */
+.main {
+  flex: 1;
+  height: 100vh;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.main-header {
+  padding: 24px 32px 0;
+  flex-shrink: 0;
+}
+.main-header h1 {
+  font-size: 1.35rem; font-weight: 700; letter-spacing:-.02em;
+  color: var(--text-primary);
+}
+.main-header p { font-size:14px; color:var(--text-muted); margin-top:4px; }
+
+.main-content {
+  padding: 20px 32px 32px;
+  width: 100%;
+}
+
+/* panels */
+.panel { display:none; }
+.panel.active { display:block; }
+
+/* ─── Card ───────────────────────────────────────────────────── */
+.card {
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 20px 24px;
+  margin-bottom: 16px;
+}
+.card-header {
+  display: flex; justify-content: space-between; align-items: center;
+  margin-bottom: 14px;
+}
+.card-title {
+  font-size: 15px; font-weight: 600; color: var(--text-primary);
+  display: flex; align-items: center; gap: 9px;
+}
+.card-title svg { width:17px; height:17px; color:var(--accent); opacity:.8; }
+.card-desc { font-size:13px; color:var(--text-muted); margin-top:4px; line-height:1.5; }
+
+/* ─── Badge ──────────────────────────────────────────────────── */
+.badge {
+  display: inline-flex; align-items:center; gap:5px;
+  padding: 3px 10px; border-radius: 100px;
+  font-size: 12px; font-weight: 600;
+}
+.badge svg { width:10px; height:10px; }
+.badge.on      { background:var(--success-soft); color:var(--success); }
+.badge.off     { background:var(--error-soft);   color:var(--error); }
+.badge.warning { background:var(--warning-soft); color:var(--warning); }
+.badge.info    { background:var(--accent-soft);  color:var(--accent-light); }
+.badge.muted   { background:rgba(255,255,255,.06); color:var(--text-muted); }
+
+/* ─── Status Connection ──────────────────────────────────────── */
+.connection-hero {
+  display: flex; align-items: center; gap: 18px;
+  padding: 18px 0 14px;
+}
+.connection-icon {
+  width: 52px; height: 52px; flex-shrink:0;
+  background: linear-gradient(135deg,var(--accent),var(--accent-light));
+  border-radius: var(--radius-lg);
+  display: flex; align-items:center; justify-content:center;
+  box-shadow: 0 6px 20px rgba(124,111,247,.3);
+}
+.connection-icon svg { width:26px; height:26px; color:#fff; }
+.connection-label { font-size:20px; font-weight:700; letter-spacing:-.02em; }
+.connection-sublabel { font-size:13px; color:var(--text-muted); margin-top:3px; }
+
+.info-grid {
+  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
+  margin-top: 14px;
+}
+.info-item { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:12px 16px; }
+.info-item-label { font-size:12px; color:var(--text-muted); margin-bottom:4px; }
+.info-item-value { font-size:14px; color:var(--text-primary); font-weight:500; font-family:monospace; word-break:break-all; }
+
+/* ─── Form ───────────────────────────────────────────────────── */
+.form-group { margin-bottom:14px; }
+.form-group label {
+  display: block; font-size:13px; font-weight:500;
+  color: var(--text-secondary); margin-bottom: 7px;
+}
+.form-group label span.optional { font-weight:400; color:var(--text-muted); font-size:12px; margin-left:4px; }
+
+input, textarea, select {
+  width: 100%;
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  color: var(--text-primary);
+  padding: 10px 14px;
+  border-radius: var(--radius-md);
+  font-size: 14px;
+  font-family: inherit;
+  transition: border-color var(--transition), box-shadow var(--transition);
+  outline: none;
+}
+input:focus, textarea:focus, select:focus {
+  border-color: var(--border-focus);
+  box-shadow: 0 0 0 3px rgba(124,111,247,.12);
+}
+textarea { min-height: 88px; resize: vertical; line-height:1.5; }
+select { cursor:pointer; }
+input::placeholder, textarea::placeholder { color:var(--text-muted); }
+
+.form-row { display:flex; gap:12px; }
+.form-row .form-group { flex:1; }
+
+/* ─── Buttons ────────────────────────────────────────────────── */
+.btn {
+  display: inline-flex; align-items: center; gap: 7px;
+  padding: 9px 16px;
+  border-radius: var(--radius-md);
+  border: 1px solid transparent;
+  cursor: pointer;
+  font-size: 14px; font-weight: 500;
+  font-family: inherit;
+  transition: all var(--transition);
+  white-space: nowrap;
+}
+.btn svg { width:15px; height:15px; flex-shrink:0; }
+.btn:disabled { opacity:.5; cursor:not-allowed; }
+.btn-sm { padding:6px 12px; font-size:13px; }
+.btn-sm svg { width:13px; height:13px; }
+
+.btn-primary { background:linear-gradient(135deg,var(--accent),#6a5ff7); color:#fff; box-shadow:0 3px 12px rgba(124,111,247,.35); }
+.btn-primary:hover:not(:disabled) { filter:brightness(1.1); box-shadow:0 5px 18px rgba(124,111,247,.45); transform:translateY(-1px); }
+.btn-primary:active { transform:translateY(0); }
+
+.btn-secondary { background:var(--bg-surface-2); color:var(--text-secondary); border-color:var(--border); }
+.btn-secondary:hover:not(:disabled) { background:var(--bg-muted); color:var(--text-primary); border-color:rgba(255,255,255,.12); }
+
+.btn-danger { background:var(--error-soft); color:var(--error); border-color:rgba(245,112,112,.25); }
+.btn-danger:hover:not(:disabled) { background:rgba(245,112,112,.25); }
+
+.btn-success { background:var(--success-soft); color:var(--success); border-color:rgba(80,214,141,.25); }
+.btn-success:hover:not(:disabled) { background:rgba(80,214,141,.25); }
+
+.btn-group { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:4px; }
+
+/* Loading spinner inside button */
+@keyframes spin { to { transform:rotate(360deg); } }
+.spinner {
+  width:14px; height:14px; border:2px solid rgba(255,255,255,.25);
+  border-top-color:#fff; border-radius:50%;
+  animation: spin .6s linear infinite;
+  flex-shrink:0;
+}
+
+/* ─── Table ──────────────────────────────────────────────────── */
+.table-wrap { overflow-x: auto; }
+table { width:100%; border-collapse:collapse; font-size:14px; }
+th {
+  text-align:left; padding:10px 14px;
+  border-bottom:1px solid var(--border);
+  color:var(--text-muted); font-weight:500; font-size:13px;
+  white-space:nowrap;
+}
+td {
+  padding:11px 14px;
+  border-bottom:1px solid rgba(255,255,255,.04);
+  color:var(--text-primary); vertical-align:middle;
+}
+tr:last-child td { border-bottom:none; }
+tr:hover td { background:rgba(255,255,255,.02); }
+
+code {
+  font-size:13px; font-family:'SF Mono','Fira Code',monospace;
+  background:rgba(0,0,0,.3); padding:2px 7px; border-radius:5px;
+  color:var(--accent-light); word-break:break-all;
+}
+
+/* ─── Sub-tabs ───────────────────────────────────────────────── */
+.sub-tabs {
+  display: flex; gap:4px;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 16px; padding-bottom: 0;
+}
+.sub-tab {
+  padding: 8px 14px;
+  border-radius: var(--radius-md) var(--radius-md) 0 0;
+  cursor: pointer; font-size: 13px; font-weight: 500;
+  color: var(--text-muted); border: 1px solid transparent;
+  border-bottom: none;
+  transition: color var(--transition), background var(--transition);
+  background: transparent;
+  font-family: inherit;
+}
+.sub-tab:hover { color:var(--text-primary); }
+.sub-tab.active {
+  color: var(--accent-light);
+  background: var(--bg-elevated);
+  border-color: var(--border);
+  border-bottom-color: var(--bg-elevated);
+  margin-bottom: -1px;
+}
+.sub-panel { display:none; }
+.sub-panel.active { display:block; }
+
+/* ─── Blueprint viewer ───────────────────────────────────────── */
+.blueprint-tabs { flex-wrap:wrap; }
+.blueprint-content {
+  background: var(--bg-base);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 16px 18px;
+  font-size: 13px; line-height:1.65;
+  white-space: pre-wrap; overflow: auto;
+  max-height: 60vh; color: var(--text-secondary);
+  font-family:'SF Mono','Fira Code',monospace;
+}
+
+/* ─── Skills ─────────────────────────────────────────────────── */
+.skill-item {
+  display: flex; justify-content:space-between; align-items:center;
+  padding: 13px 0;
+  border-bottom: 1px solid rgba(255,255,255,.04);
+}
+.skill-item:last-child { border-bottom:none; }
+.skill-info { min-width:0; flex:1; margin-right:16px; }
+.skill-name { font-size:14px; font-weight:600; display:flex; align-items:center; gap:8px; }
+.skill-desc { font-size:13px; color:var(--text-muted); margin-top:3px; }
+.skill-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }
+
+/* Toggle */
+.toggle { position:relative; width:40px; height:22px; display:inline-block; flex-shrink:0; }
+.toggle input { opacity:0; width:0; height:0; position:absolute; }
+.toggle .slider {
+  position:absolute; inset:0; cursor:pointer;
+  background:var(--bg-muted); border-radius:11px;
+  transition: background var(--transition);
+  border: 1px solid var(--border);
+}
+.toggle input:checked + .slider { background:var(--accent); border-color:transparent; }
+.toggle .slider::before {
+  content:''; position:absolute;
+  height:16px; width:16px; left:2px; bottom:2px;
+  background:#fff; border-radius:50%;
+  transition: transform var(--transition);
+  box-shadow: 0 1px 4px rgba(0,0,0,.4);
+}
+.toggle input:checked + .slider::before { transform:translateX(18px); }
+
+/* ─── MCP ────────────────────────────────────────────────────── */
+.input-row { display:flex; gap:8px; align-items:center; }
+.input-row input { flex:1; min-width:0; }
+.remove-btn {
+  flex-shrink:0; width:28px; height:28px;
+  background:none; border:1px solid var(--border); border-radius:var(--radius-sm);
+  color:var(--text-muted); cursor:pointer; font-size:16px; line-height:1;
+  display:flex; align-items:center; justify-content:center;
+  transition: all var(--transition);
+}
+.remove-btn:hover { border-color:var(--error); color:var(--error); background:var(--error-soft); }
+
+/* ─── Env Check ──────────────────────────────────────────────── */
+.env-item {
+  display: flex; align-items: center; gap: 14px;
+  padding: 14px 0;
+  border-bottom: 1px solid rgba(255,255,255,.04);
+}
+.env-item:last-child { border-bottom:none; }
+.env-icon {
+  width:40px; height:40px; border-radius:var(--radius-md); flex-shrink:0;
+  display:flex; align-items:center; justify-content:center;
+  font-size:20px;
+}
+.env-icon.ok  { background:var(--success-soft); }
+.env-icon.fail{ background:var(--error-soft); }
+.env-body { flex:1; min-width:0; }
+.env-name { font-size:14px; font-weight:600; display:flex; align-items:center; gap:8px; }
+.env-desc { font-size:13px; color:var(--text-muted); margin-top:2px; }
+.env-detail { font-size:12px; color:var(--success); margin-top:2px; font-family:monospace; }
+
+/* ─── Modal ──────────────────────────────────────────────────── */
+.modal-overlay {
+  position:fixed; inset:0;
+  background:rgba(5,5,10,.8);
+  backdrop-filter:blur(16px);
+  display:none; align-items:center; justify-content:center;
+  z-index:500;
+  animation:fadeIn .2s ease;
+}
+.modal-overlay.open { display:flex; }
+@keyframes fadeIn { from{opacity:0} to{opacity:1} }
+
+.modal {
+  background:var(--bg-elevated);
+  border:1px solid var(--border);
+  border-radius:var(--radius-xl);
+  padding:28px;
+  max-width:480px; width:92%;
+  box-shadow:var(--shadow-md);
+  animation:modalIn .25s ease;
+  max-height:92vh; overflow-y:auto;
+}
+.modal.modal-lg { max-width:560px; }
+@keyframes modalIn { from{opacity:0;transform:scale(.96) translateY(10px)} to{opacity:1;transform:scale(1) translateY(0)} }
+.modal-title { font-size:17px; font-weight:700; margin-bottom:6px; color:var(--text-primary); }
+.modal-sub   { font-size:13px; color:var(--text-muted); margin-bottom:10px; line-height:1.5; }
+.modal-footer{ display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }
+.modal-market-list {
+  list-style:none; padding:0; margin:0 0 16px;
+  display:flex; flex-direction:column; gap:7px;
+}
+.modal-market-list li {
+  font-size:13px; color:var(--text-secondary); line-height:1.5;
+  padding:7px 10px; background:var(--bg-tertiary,rgba(255,255,255,0.04));
+  border-radius:6px; border:1px solid var(--border-subtle,rgba(255,255,255,0.07));
+}
+.modal-market-list a {
+  font-weight:600; color:var(--accent,#7c6fe0); text-decoration:none;
+}
+.modal-market-list a:hover { text-decoration:underline; }
+.modal-market-fmt {
+  font-family:monospace; font-size:11.5px; color:var(--text-muted);
+  word-break:break-all;
+}
+.modal-market-name { font-weight:600; color:var(--text-secondary); }
+
+/* ─── Toast ──────────────────────────────────────────────────── */
+#toast-container {
+  position: fixed; bottom:24px; right:24px;
+  display:flex; flex-direction:column; gap:8px;
+  z-index:1000; pointer-events:none;
+}
+.toast {
+  display:flex; align-items:center; gap:10px;
+  background:var(--bg-surface-2); border:1px solid var(--border);
+  border-radius:var(--radius-lg);
+  padding:12px 18px;
+  font-size:14px; font-weight:500; color:var(--text-primary);
+  box-shadow:var(--shadow-md);
+  animation:toastIn .25s ease;
+  pointer-events:auto; max-width:340px;
+}
+.toast svg { width:17px; height:17px; flex-shrink:0; }
+.toast.success { border-color:rgba(80,214,141,.3); }
+.toast.success svg { color:var(--success); }
+.toast.error   { border-color:rgba(245,112,112,.3); }
+.toast.error   svg { color:var(--error); }
+.toast.info    { border-color:rgba(124,111,247,.3); }
+.toast.info    svg { color:var(--accent-light); }
+@keyframes toastIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
+@keyframes toastOut { from{opacity:1;transform:translateY(0)} to{opacity:0;transform:translateY(8px)} }
+.toast.hiding { animation:toastOut .2s ease forwards; }
+
+/* ─── Platform channel config (feishu/dingtalk/qq/email) ─────── */
+.channel-header {
+  display:flex; align-items:center; gap:14px; margin-bottom:18px;
+}
+.channel-icon {
+  width:44px; height:44px; border-radius:var(--radius-md); flex-shrink:0;
+  display:flex; align-items:center; justify-content:center; font-size:22px;
+}
+.channel-title { font-size:16px; font-weight:700; }
+.channel-subtitle { font-size:13px; color:var(--text-muted); margin-top:2px; }
+
+/* ─── Webchat embed ──────────────────────────────────────────── */
+.chat-embed {
+  width:100%; height:calc(100vh - 40px); min-height:400px;
+  border:none; border-radius:0;
+  background:var(--bg-base);
+  display:block;
+}
+
+/* ─── Responsive ─────────────────────────────────────────────── */
+@media (max-width: 700px) {
+  :root { --sidebar-w:60px; }
+  .nav-item span { display:none; }
+  .nav-section-label { display:none; }
+  .brand-info { display:none; }
+  .sidebar-brand { justify-content:center; padding:16px 0; }
+  .main-content { padding:16px; }
+  .info-grid { grid-template-columns:1fr; }
+}