---
name: sakthai-dashboard-advanced
description: Advanced interactive features for the SakThai-Agent dashboard — real-time updates, WebSocket agent streaming, Doctor diagnostics, Agent Mode switching, Integrations management, multi-view architecture, and enterprise-grade patterns seen in reference designs.
version: 0.1.0
platforms: [linux, macos, windows]
metadata:
  hermes:
    tags: [sakthai, dashboard, advanced, websocket, realtime, integrations, doctor, agent-mode]
    related_skills: [sakthai-dashboard-core, sakthai-dashboard-ui-ux, sakthai-dashboard-data]
---

# sakthai-dashboard-advanced

Advanced features skill for the SakThai-Agent dashboard. Use this when the task involves **real-time streaming, WebSocket connections, multi-view architectures, Integrations & Settings, Doctor diagnostics, Agent Mode switching, or enterprise dashboard patterns** (as shown in the reference screenshots).

## Reference Design Patterns (from screenshots)

The user provided 5 reference screenshots showing target implementations:

| Screenshot | View | Key Patterns |
|------------|------|--------------|
| `img_93834da3e92b.jpg` | **Integrations & Settings** | Connected app cards with toggles, API key management (masked/reveal), Doctor diagnostics panel, System Health heartbeat |
| `img_cadf542dcc2c.jpg` | **Chat & Reasoning** | Three-panel layout (Nav \| Chat \| Thought Process), live tool pills, reasoning summary, confidence bar, model selector |
| `img_3587a81a3b7c.jpg` | **Evolution** | Neural optimization 3D brain viz, version timeline, before/after bar charts, Thai motto footer |
| `img_24bbe659402f.jpg` | **Overview** | Two-column sidebar (Brand + Nav), KPI cards with mini-sparklines, growth line chart, observations with confidence bars, evolution gauge with milestones |
| `img_c3c14cbecb8a.jpg` | **Memory Explorer** | Three-panel (Nav \| Facts Table \| Knowledge Graph SVG), pagination, category tags, graph legend, export/add actions |

## Multi-View Architecture

The dashboard supports **multiple distinct view types** beyond the core 5:

```javascript
// View registry pattern
const VIEWS = {
  // Core (existing)
  'overview': { component: 'OverviewView', icon: '📊', category: 'core' },
  'memory': { component: 'MemoryView', icon: '🧠', category: 'core' },
  'chat': { component: 'ChatView', icon: '💬', category: 'core' },
  'evolution': { component: 'EvolutionView', icon: '⚡', category: 'core' },
  'settings': { component: 'SettingsView', icon: '⚙️', category: 'core' },

  // Advanced (from references)
  'integrations': { component: 'IntegrationsView', icon: '🔗', category: 'system' },
  'security': { component: 'SecurityView', icon: '🛡️', category: 'system' },
  'members': { component: 'MembersView', icon: '👥', category: 'system' },
  'billing': { component: 'BillingView', icon: '💳', category: 'system' },
  'tools': { component: 'ToolsView', icon: '🔧', category: 'core' },
  'planning': { component: 'PlanningView', icon: '📋', category: 'core' },
  'workflows': { component: 'WorkflowsView', icon: '⚡', category: 'core' },
  'logs': { component: 'LogsView', icon: '📜', category: 'core' },
  'analytics': { component: 'AnalyticsView', icon: '📈', category: 'core' },
  'data-sources': { component: 'DataSourcesView', icon: '🗄️', category: 'core' },
  'tasks': { component: 'TasksView', icon: '✅', category: 'core' },
  'projects': { component: 'ProjectsView', icon: '📁', category: 'core' },
  'conversations': { component: 'ConversationsView', icon: '💭', category: 'core' },
  'knowledge': { component: 'KnowledgeView', icon: '📚', category: 'core' },
};
```

### Sidebar Categories (from refs)
```html
<!-- CORE section -->
<div class="nav-section">
  <span class="nav-section-title">CORE</span>
  <button data-nav="overview">📊 Dashboard</button>
  <button data-nav="memory">🧠 Memory</button>
  <button data-nav="tools">🔧 Tools</button>
  <button data-nav="planning">📋 Planning</button>
  <button data-nav="workflows">⚡ Workflows</button>
  <button data-nav="logs">📜 Logs</button>
</div>

<!-- SYSTEM section -->
<div class="nav-section">
  <span class="nav-section-title">SYSTEM</span>
  <button data-nav="integrations" class="active">🔗 Integrations & Settings</button>
  <button data-nav="security">🛡️ Security</button>
  <button data-nav="members">👥 Members</button>
  <button data-nav="billing">💳 Billing</button>
</div>
```

## Real-Time / WebSocket Features

### 1. Agent Streaming (Chat View)
```javascript
class AgentStream {
  constructor() {
    this.ws = null;
    this.reconnectAttempts = 0;
    this.maxReconnects = 5;
  }

  connect(sessionId) {
    this.ws = new WebSocket(`ws://localhost:8000/ws/chat/${sessionId}`);
    this.ws.onmessage = (e) => this.handleMessage(JSON.parse(e.data));
    this.ws.onclose = () => this.scheduleReconnect();
  }

  handleMessage(msg) {
    switch (msg.type) {
      case 'token': this.appendToken(msg.content); break;
      case 'tool_start': this.showToolPill(msg.tool); break;
      case 'tool_end': this.hideToolPill(msg.tool); break;
      case 'thought': this.appendThought(msg.group, msg.step); break;
      case 'confidence': this.updateConfidence(msg.value); break;
      case 'done': this.finalize(); break;
    }
  }
}
```

### 2. System Health Heartbeat (Integrations View)
```javascript
// SVG pulse animation for "System Health: Optimal"
<svg class="heartbeat" viewBox="0 0 100 30" width="120" height="30">
  <path d="M0,15 Q20,15 25,5 Q30,-5 35,15 Q40,25 50,15 Q60,5 65,15 Q70,25 80,15 Q90,15 100,15"
        stroke="#34d399" stroke-width="2" fill="none"
        stroke-dasharray="1000" stroke-dashoffset="1000">
    <animate attributeName="stroke-dashoffset" from="1000" to="0" dur="2s" repeatCount="indefinite"/>
  </path>
</svg>
```

### 3. Live KPI Updates (Overview)
```javascript
// Poll or WebSocket for live metrics
async function refreshKPIs() {
  const res = await fetch('/api/dashboard/kpis');
  const data = await res.json();
  // Animate number transitions
  animateValue('kpi-facts', data.total_facts);
  animateValue('kpi-obs', data.active_observations);
  updateGrowthChart(data.growth);
  updateGauge(data.evolution.evolved_pct);
}
setInterval(refreshKPIs, 30000); // 30s poll
```

## Integrations & Settings View (from ref)

### Connected App Card Component
```html
<div class="app-card connected">
  <div class="app-icon hermes"><svg>...</svg></div>
  <div class="app-info">
    <div class="app-name">Hermes</div>
    <div class="app-status"><span class="dot green"></span>CONNECTED</div>
    <div class="app-desc">Real-time market data, news, and intelligence layer</div>
  </div>
  <div class="app-actions">
    <button class="btn-secondary">Configure</button>
    <label class="toggle"><input type="checkbox" checked><span class="slider"></span></label>
  </div>
</div>

<div class="app-card disconnected">
  <div class="app-icon slack">...</div>
  <div class="app-info">
    <div class="app-name">Slack</div>
    <div class="app-status"><span class="dot grey"></span>DISCONNECTED</div>
    <div class="app-desc">Team notifications and alerts integration</div>
  </div>
  <div class="app-actions">
    <button class="btn-primary">Connect</button>
    <label class="toggle"><input type="checkbox"><span class="slider"></span></label>
  </div>
</div>
```

### API Configuration Panel
```html
<div class="api-config">
  <h3>🔑 API Configuration</h3>
  <div class="config-row">
    <label>Hermes API Key</label>
    <div class="input-group">
      <input type="password" value="••••••••a1b2" readonly>
      <button class="icon-btn" onclick="toggleReveal(this)">👁</button>
      <span class="status valid">VALID</span>
    </div>
  </div>
  <div class="config-row">
    <label>Hermes Endpoint</label>
    <div class="input-group">
      <input type="text" value="https://hermes.sakthai.ai/api/v1" readonly>
      <button class="icon-btn" onclick="copy(this)">📋</button>
      <span class="status active">ACTIVE</span>
    </div>
  </div>
  <button class="btn-primary save-btn">Save Changes</button>
  <p class="encrypt-note">🔒 All changes are encrypted and secure.</p>
</div>
```

## Doctor Diagnostics Panel

```html
<div class="doctor-panel">
  <div class="doctor-header">
    <h3>🩺 Doctor</h3>
    <button class="btn-primary" onclick="runDoctor()">Run Doctor</button>
  </div>
  <div class="doctor-result" id="doctor-result">
    <div class="status-circle green"><svg>✓</svg></div>
    <div class="result-text">
      <h4>System Check: All Green</h4>
      <p>All systems are operational and functioning optimally.</p>
    </div>
    <ul class="checks">
      <li><span class="green">●</span> Hermes Layer: Connected</li>
      <li><span class="green">●</span> GitHub Sync: Active</li>
      <li><span class="green">●</span> System Health: Optimal</li>
    </ul>
    <div class="doctor-meta">Last checked: May 25, 2025 14:35:22 · 🟢 All Systems Operational</div>
  </div>
</div>
```

```javascript
async function runDoctor() {
  const btn = document.querySelector('#doctor-result button');
  btn.disabled = true; btn.textContent = 'Running...';
  const res = await fetch('/api/doctor', { method: 'POST' });
  const data = await res.json();
  renderDoctorResult(data);
  btn.disabled = false; btn.textContent = 'Run Doctor';
}
```

## Agent Mode Selector

```html
<div class="agent-mode-selector">
  <label>🤖 Agent Mode</label>
  <select id="agent-mode" onchange="switchMode(this.value)">
    <option value="autonomous">Autonomous</option>
    <option value="assisted">Assisted</option>
    <option value="manual">Manual</option>
    <option value="reasoning">Reasoning On</option>
  </select>
</div>
```

```javascript
function switchMode(mode) {
  // Update UI pills in chat input
  document.getElementById('mode-pill').textContent = mode;
  // Notify backend
  fetch('/api/agent/mode', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ mode })
  });
}
```

## Three-Panel Chat Layout (from ref)

### CSS Grid for 3-Panel
```css
.chat-layout {
  display: grid;
  grid-template-columns: 260px 1fr 340px;
  min-height: calc(100vh - 80px);
  gap: 0;
}
@media (max-width: 1400px) {
  .chat-layout { grid-template-columns: 1fr; }
  .thought-panel { display: none; } /* or bottom sheet */
}
```

### Thought Process Timeline
```html
<div class="thought-panel">
  <h3>🧠 Thought Process</h3>
  <div class="thought-timeline">
    <div class="thought-group">
      <div class="group-title">Memory Retrieval</div>
      <div class="thought-item done">
        <span class="check">✓</span>
        <span class="text">Retrieving fact: favorite_language → Python</span>
        <span class="time">10:42:10</span>
      </div>
      <div class="thought-item done">...</div>
    </div>
    <div class="thought-group">
      <div class="group-title">Knowledge Search</div>
      <div class="thought-item active">
        <span class="spinner"></span>
        <span class="text">Searching GitHub repositories...</span>
      </div>
    </div>
  </div>
  <div class="confidence-section">
    <div class="confidence-header">
      <span>Context Confidence</span>
      <span class="value">98%</span>
    </div>
    <div class="conf-bar"><div class="conf-fill" style="width:98%"></div></div>
    <p class="conf-note">High relevance of retrieved context 🟢</p>
  </div>
</div>
```

## Knowledge Graph SVG (Memory Explorer)

```javascript
function drawKnowledgeGraph(graphData) {
  const { categories, connections } = graphData;
  const center = { x: 200, y: 180 };
  const radius = 130;
  let svg = `<svg viewBox="0 0 400 360" class="graph-svg">`;

  // Central node
  svg += `<circle cx="${center.x}" cy="${center.y}" r="32" fill="url(#brain-gradient)"/>`;
  svg += `<text x="${center.x}" y="${center.y+6}" text-anchor="middle" fill="#fff" font-size="20">🧠</text>`;

  // Category nodes
  categories.forEach((cat, i) => {
    const angle = (i / categories.length) * 2 * Math.PI - Math.PI/2;
    const x = center.x + radius * Math.cos(angle);
    const y = center.y + radius * Math.sin(angle);
    const nodeRadius = 18 + Math.min(14, cat.count / 2);

    // Connection line
    svg += `<line x1="${center.x}" y1="${center.y}" x2="${x}" y2="${y}" stroke="${cat.color}44" stroke-width="2"/>`;

    // Node
    svg += `<circle cx="${x}" cy="${y}" r="${nodeRadius}" fill="${cat.color}" opacity="0.9"/>`;
    svg += `<text x="${x}" y="${y+5}" text-anchor="middle" fill="#fff" font-weight="600" font-size="12">${cat.count}</text>`;

    // Label
    const labelY = y > center.y ? y + nodeRadius + 16 : y - nodeRadius - 8;
    svg += `<text x="${x}" y="${labelY}" text-anchor="middle" fill="#9a9ac0" font-size="10">${escapeHtml(cat.name)}</text>`;
  });

  svg += `<defs><radialGradient id="brain-gradient"><stop offset="0%" stop-color="#a855f7"/><stop offset="100%" stop-color="#3b82f6"/></radialGradient></defs></svg>`;
  return svg;
}
```

## Neural Optimization 3D Brain (Evolution View)

```html
<!-- Three.js or CSS 3D fallback -->
<div class="neural-viz" id="neural-brain">
  <!-- Three.js canvas injected here -->
  <div class="neural-overlay">
    <span class="badge active">ACTIVE</span>
    <p>Neural pathways are being optimized for better performance.</p>
  </div>
</div>
<div class="optimization-focus">
  <div class="focus-row">
    <span>Context Understanding</span>
    <div class="bar"><div class="fill" style="width:92%"></div></div>
    <span>92%</span>
  </div>
  ...
</div>
```

```javascript
// Three.js brain initialization
import * as THREE from 'three';
function initNeuralBrain() {
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(45, 1, 0.1, 1000);
  camera.position.z = 200;

  // Brain geometry (simplified - use GLTF for production)
  const geometry = new THREE.SphereGeometry(60, 32, 32);
  const material = new THREE.MeshBasicMaterial({
    color: 0x1a1a3e,
    wireframe: true,
    transparent: true,
    opacity: 0.3
  });
  const brain = new THREE.Mesh(geometry, material);
  scene.add(brain);

  // Neural particles
  const particles = new THREE.Points(
    new THREE.BufferGeometry(),
    new THREE.PointsMaterial({ color: 0xa855f7, size: 2, transparent: true })
  );
  scene.add(particles);

  function animate() {
    requestAnimationFrame(animate);
    brain.rotation.y += 0.002;
    particles.rotation.y -= 0.001;
    renderer.render(scene, camera);
  }
  animate();
}
```

## Evolution View Enhancements

### Version Timeline with Badges
```html
<div class="evolution-timeline">
  <div class="timeline-item latest">
    <div class="version-badge">LATEST</div>
    <div class="version-info">
      <h4>V2.1 → V2.2 <span class="run">Run #18</span></h4>
      <div class="meta">May 18, 2025 09:15 PM</div>
    </div>
    <div class="metrics">
      <div class="metric success">94.4% Success</div>
      <div class="metric gain">+24% Performance</div>
    </div>
  </div>
  <div class="timeline-item">...</div>
</div>
```

### Before/After Comparison Chart
```javascript
new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Response Accuracy (%)', 'Latency (ms)'],
    datasets: [
      { label: 'V2.1', data: [78.3, 1280], backgroundColor: 'rgba(148,163,184,.6)' },
      { label: 'V2.2', data: [97.1, 820], backgroundColor: '#a855f7' }
    ]
  },
  options: {
    plugins: {
      tooltip: { callbacks: { label: ctx => `${ctx.dataset.label}: ${ctx.raw}${ctx.label.includes('ms')?'ms':'%'} (__imp: ${ctx.datasetIndex===1?'+18.8%':'-35.9%'}))` } }
    }
  }
});
```

## Thai Motto Footer (Cultural Touch)

```html
<footer class="dashboard-footer">
  <p class="thai-motto">"ไม่หยุดพัฒนา เพื่อให้เก่งขึ้นทุกวัน"</p>
  <p class="motto-attribution">– SakThai-Agent</p>
</footer>
```
*Translation: "Never stop developing to get better every day"*

## Implementation Checklist for Advanced Features

| Feature | Priority | Effort | Dependencies |
|---------|----------|--------|--------------|
| Multi-view router (14+ views) | High | Medium | Sidebar restructure |
| WebSocket chat streaming | High | High | Backend WS endpoint |
| Integrations management | High | Medium | API key encryption |
| Doctor diagnostics | Medium | Low | Health check endpoints |
| Agent Mode selector | Medium | Low | Backend mode switching |
| Three-panel chat layout | High | Medium | CSS Grid + responsive |
| Knowledge Graph SVG | Medium | Low | D3.js or custom SVG |
| 3D Neural Brain | Low | High | Three.js |
| Live KPI polling | Medium | Low | `/api/dashboard/kpis` |
| Thai motto footer | Trivial | Trivial | Copy-paste |

## Adding a New Advanced View

1. **Add route** in `VIEWS` registry
2. **Create HTML section** with `data-view="viewname"`
3. **Add nav button** in appropriate sidebar section
4. **Create `fillViewname()`** JS function
5. **Add styles** using design tokens from `sakthai-dashboard-ui-ux`
6. **Wire data** from `window.__SAKTHAI__` or new API endpoint
7. **Test responsive** at 1440px, 1080px, 820px, 375px
8. **Verify accessibility** (focus, ARIA, contrast)