sanook-cli 0.5.1 → 0.5.5

package/dist/cost.js

@@ -15,9 +15,6 @@ export const PRICING = {
     // Google Gemini (≤200k context tier)
     'google:gemini-2.5-pro': { input: 1.25, output: 10, cacheWrite: 1.25, cacheRead: 0.31 },
     'google:gemini-2.5-flash': { input: 0.3, output: 2.5, cacheWrite: 0.3, cacheRead: 0.075 },
-    // DeepSeek V4
-    'deepseek:deepseek-v4-flash': { input: 0.28, output: 0.42, cacheWrite: 0.28, cacheRead: 0.028 },
-    'deepseek:deepseek-v4-pro': { input: 0.55, output: 2.19, cacheWrite: 0.55, cacheRead: 0.055 },
     // xAI Grok
     'xai:grok-4.3': { input: 3, output: 15, cacheWrite: 3, cacheRead: 0.75 },
     // Mistral
@@ -30,6 +27,9 @@ export const PRICING = {
 export function hasPricingForKey(specKey) {
     return specKey in PRICING;
 }
+function isPricingKey(key) {
+    return /^[^:\s]+:\S+$/.test(key);
+}
 /**
  * merge pricing เพิ่ม/override (จาก config `pricing` หรือ env SANOOK_PRICING)
  * — ให้ budget cap ใช้ได้กับ provider ที่ยังไม่มีในตาราง โดยไม่ต้องแก้โค้ด
@@ -38,6 +38,8 @@ export function registerPricing(extra) {
     if (!extra)
         return;
     for (const [key, p] of Object.entries(extra)) {
+        if (!isPricingKey(key))
+            continue;
         if (p == null || typeof p !== 'object')
             continue;
         const base = PRICING[key] ?? { input: 0, output: 0, cacheWrite: 0, cacheRead: 0 };
@@ -54,17 +56,41 @@ export function registerPricing(extra) {
         PRICING[key] = next;
     }
 }
+function safeTokenCount(value) {
+    if (typeof value !== 'number' || !Number.isFinite(value) || value <= 0)
+        return 0;
+    return value;
+}
+export class SharedBudget {
+    budgetUsd;
+    spent = 0;
+    constructor(budgetUsd) {
+        this.budgetUsd = budgetUsd;
+    }
+    add(usd) {
+        if (Number.isFinite(usd) && usd > 0)
+            this.spent += usd;
+    }
+    get totalUsd() {
+        return this.spent;
+    }
+    get overBudget() {
+        return this.budgetUsd != null && this.spent >= this.budgetUsd;
+    }
+}
 export class CostMeter {
     specKey;
     budgetUsd;
+    sharedBudget;
     inTok = 0;
     outTok = 0;
     cacheReadTok = 0;
     cacheWriteTok = 0;
     spent = 0;
-    constructor(specKey, budgetUsd) {
+    constructor(specKey, budgetUsd, sharedBudget) {
         this.specKey = specKey;
         this.budgetUsd = budgetUsd;
+        this.sharedBudget = sharedBudget;
     }
     /**
      * บวก usage ของ 1 step. cacheWriteTokens ดึงจาก providerMetadata แยก (default 0)
@@ -72,21 +98,23 @@ export class CostMeter {
      * ไม่งั้น double-count cacheRead (cache hit จะกลายเป็นแพงกว่า no-cache)
      */
     add(usage, cacheWriteTokens = 0) {
-        const totalInput = usage.inputTokens ?? 0;
-        const output = usage.outputTokens ?? 0;
-        const cacheRead = usage.cachedInputTokens ?? 0;
-        const noCacheInput = Math.max(0, totalInput - cacheRead - cacheWriteTokens);
+        const totalInput = safeTokenCount(usage.inputTokens);
+        const output = safeTokenCount(usage.outputTokens);
+        const cacheRead = safeTokenCount(usage.cachedInputTokens);
+        const cacheWrite = safeTokenCount(cacheWriteTokens);
+        const noCacheInput = Math.max(0, totalInput - cacheRead - cacheWrite);
         this.inTok += noCacheInput;
         this.outTok += output;
         this.cacheReadTok += cacheRead;
-        this.cacheWriteTok += cacheWriteTokens;
+        this.cacheWriteTok += cacheWrite;
         const p = PRICING[this.specKey];
         if (p) {
-            this.spent +=
-                (noCacheInput / 1e6) * p.input +
-                    (output / 1e6) * p.output +
-                    (cacheRead / 1e6) * p.cacheRead +
-                    (cacheWriteTokens / 1e6) * p.cacheWrite;
+            const delta = (noCacheInput / 1e6) * p.input +
+                (output / 1e6) * p.output +
+                (cacheRead / 1e6) * p.cacheRead +
+                (cacheWrite / 1e6) * p.cacheWrite;
+            this.spent += delta;
+            this.sharedBudget?.add(delta);
         }
     }
     /** รวม token + cost จาก meter อีกตัว (เช่น primary model ก่อน fallback) — กัน usage หาย/budget reset */
@@ -96,6 +124,8 @@ export class CostMeter {
         this.cacheReadTok += other.cacheReadTok;
         this.cacheWriteTok += other.cacheWriteTok;
         this.spent += other.spent;
+        if (this.sharedBudget && this.sharedBudget !== other.sharedBudget)
+            this.sharedBudget.add(other.spent);
     }
     get totalUsd() {
         return this.spent;
@@ -105,7 +135,11 @@ export class CostMeter {
     }
     /** true เมื่อใช้เกิน budget (เช็คก่อนยิง request ถัดไป) — no-op ถ้าไม่มี pricing (เตือนที่ entry point) */
     get overBudget() {
-        return this.budgetUsd != null && this.hasPricing && this.spent >= this.budgetUsd;
+        if (this.sharedBudget?.overBudget)
+            return true;
+        if (!this.hasPricing)
+            return false;
+        return this.budgetUsd != null && this.spent >= this.budgetUsd;
     }
     summary() {
         const total = this.inTok + this.outTok + this.cacheReadTok + this.cacheWriteTok;

package/dist/dashboard/api-helpers.js

@@ -0,0 +1,87 @@
+import { readFile, readdir, stat } from 'node:fs/promises';
+import { join, resolve, relative } from 'node:path';
+import { homedir } from 'node:os';
+import { appHomePath, BRAND } from '../brand.js';
+import { loadConfig } from '../config.js';
+import { listTasks } from '../gateway/ledger.js';
+import { gatewayServiceLogPath, gatewayServiceStatus } from '../gateway/service.js';
+import { readGatewayConfig, resolveDiscordConfig, resolveSlackConfig, resolveTelegramConfig, resolveWebhookConfig, } from '../gateway/config.js';
+export async function dashboardChannels() {
+    const cfg = await readGatewayConfig();
+    const service = await gatewayServiceStatus();
+    const channels = [
+        {
+            id: 'telegram',
+            label: 'Telegram',
+            configured: Boolean(resolveTelegramConfig(cfg).token),
+            setupCommand: `${BRAND.cliName} gateway setup telegram`,
+        },
+        {
+            id: 'discord',
+            label: 'Discord',
+            configured: Boolean(resolveDiscordConfig(cfg).token),
+            setupCommand: `${BRAND.cliName} gateway setup discord`,
+        },
+        {
+            id: 'slack',
+            label: 'Slack',
+            configured: Boolean(resolveSlackConfig(cfg).botToken),
+            setupCommand: `${BRAND.cliName} gateway setup slack`,
+        },
+        {
+            id: 'webhooks',
+            label: 'Webhooks',
+            configured: Object.keys(resolveWebhookConfig(cfg).routes ?? {}).length > 0,
+            setupCommand: `${BRAND.cliName} webhook setup`,
+        },
+    ];
+    return { channels, serviceRunning: service.running };
+}
+export async function dashboardCronTasks() {
+    return { tasks: await listTasks() };
+}
+export async function dashboardLogsTail(maxLines = 200) {
+    const path = gatewayServiceLogPath();
+    try {
+        const raw = await readFile(path, 'utf8');
+        const lines = raw.split('\n').filter(Boolean);
+        return { path, lines: lines.slice(-maxLines) };
+    }
+    catch {
+        return { path, lines: [`(no log yet — run ${BRAND.cliName} serve)`] };
+    }
+}
+function safeRoot(root) {
+    return resolve(root);
+}
+export async function dashboardListFiles(subpath = '') {
+    const config = await loadConfig({});
+    const roots = [appHomePath(), config.brainPath ? resolve(config.brainPath) : null].filter(Boolean);
+    const root = safeRoot(roots[0] ?? appHomePath());
+    const target = safeRoot(join(root, subpath.replace(/^\/+/, '')));
+    if (!target.startsWith(root) && !roots.some((r) => target.startsWith(safeRoot(r)))) {
+        throw new Error('path not allowed');
+    }
+    const entries = await readdir(target, { withFileTypes: true });
+    return {
+        root,
+        entries: entries
+            .sort((a, b) => Number(b.isDirectory()) - Number(a.isDirectory()) || a.name.localeCompare(b.name))
+            .slice(0, 200)
+            .map((e) => ({ name: e.name, dir: e.isDirectory() })),
+    };
+}
+export async function dashboardReadFile(subpath) {
+    const config = await loadConfig({});
+    const allowedRoots = [appHomePath(), config.brainPath ? resolve(config.brainPath) : null].filter(Boolean);
+    const target = safeRoot(subpath.startsWith('/') ? subpath : join(appHomePath(), subpath));
+    if (!allowedRoots.some((root) => target.startsWith(safeRoot(root))))
+        throw new Error('path not allowed');
+    const info = await stat(target);
+    if (!info.isFile())
+        throw new Error('not a file');
+    if (info.size > 512_000)
+        throw new Error('file too large');
+    const content = await readFile(target, 'utf8');
+    return { path: relative(homedir(), target) || target, content };
+}

package/dist/dashboard/server.js

@@ -0,0 +1,179 @@
+import { createServer } from 'node:http';
+import { readFile, stat } from 'node:fs/promises';
+import { join, extname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { BRAND } from '../brand.js';
+import { loadConfig, readGlobalConfigRaw } from '../config.js';
+import { listSessions } from '../session.js';
+import { loadMcpConfig } from '../mcp.js';
+const MIME = {
+    '.html': 'text/html; charset=utf-8',
+    '.js': 'text/javascript; charset=utf-8',
+    '.css': 'text/css; charset=utf-8',
+    '.json': 'application/json; charset=utf-8',
+    '.svg': 'image/svg+xml',
+    '.png': 'image/png',
+    '.ico': 'image/x-icon',
+};
+function dashboardStaticDir() {
+    const here = fileURLToPath(new URL('.', import.meta.url));
+    return join(here, 'static');
+}
+async function readBody(req) {
+    const chunks = [];
+    for await (const chunk of req)
+        chunks.push(Buffer.from(chunk));
+    return Buffer.concat(chunks).toString('utf8');
+}
+function json(res, status, body) {
+    res.writeHead(status, { 'Content-Type': 'application/json; charset=utf-8' });
+    res.end(`${JSON.stringify(body)}\n`);
+}
+async function handleApi(req, res, pathname) {
+    if (req.method === 'GET' && pathname === '/api/status') {
+        const config = await loadConfig({});
+        const raw = await readGlobalConfigRaw();
+        json(res, 200, {
+            product: 'Sanook Dashboard',
+            cli: BRAND.cliName,
+            version: process.env.npm_package_version ?? 'dev',
+            model: config.model,
+            locale: config.locale,
+            brainPath: config.brainPath ?? null,
+            permissionMode: config.permissionMode,
+            gatewayHint: `${BRAND.cliName} serve`,
+        });
+        return true;
+    }
+    if (req.method === 'GET' && pathname === '/api/config') {
+        json(res, 200, await readGlobalConfigRaw());
+        return true;
+    }
+    if (req.method === 'GET' && pathname === '/api/sessions') {
+        const sessions = await listSessions({});
+        json(res, 200, { sessions });
+        return true;
+    }
+    if (req.method === 'GET' && pathname === '/api/mcp') {
+        const servers = await loadMcpConfig();
+        json(res, 200, { servers });
+        return true;
+    }
+    if (req.method === 'GET' && pathname === '/api/brain') {
+        const config = await loadConfig({});
+        json(res, 200, { brainPath: config.brainPath ?? null });
+        return true;
+    }
+    if (req.method === 'GET' && pathname === '/api/cron') {
+        const { dashboardCronTasks } = await import('./api-helpers.js');
+        json(res, 200, await dashboardCronTasks());
+        return true;
+    }
+    if (req.method === 'GET' && pathname === '/api/channels') {
+        const { dashboardChannels } = await import('./api-helpers.js');
+        json(res, 200, await dashboardChannels());
+        return true;
+    }
+    if (req.method === 'GET' && pathname === '/api/logs') {
+        const { dashboardLogsTail } = await import('./api-helpers.js');
+        json(res, 200, await dashboardLogsTail());
+        return true;
+    }
+    if (req.method === 'GET' && pathname.startsWith('/api/files')) {
+        const url = new URL(req.url ?? '/', 'http://local');
+        const sub = url.searchParams.get('path') ?? '';
+        if (pathname === '/api/files/read') {
+            const { dashboardReadFile } = await import('./api-helpers.js');
+            json(res, 200, await dashboardReadFile(sub));
+            return true;
+        }
+        const { dashboardListFiles } = await import('./api-helpers.js');
+        json(res, 200, await dashboardListFiles(sub));
+        return true;
+    }
+    if (req.method === 'GET' && pathname === '/api/chat/status') {
+        json(res, 200, {
+            hint: `Use ${BRAND.cliName} in terminal, or start ${BRAND.cliName} serve for HTTP chat`,
+            gateway: `${BRAND.cliName} serve`,
+        });
+        return true;
+    }
+    if (req.method === 'POST' && pathname === '/api/config') {
+        const raw = await readBody(req);
+        let parsed;
+        try {
+            parsed = JSON.parse(raw || '{}');
+        }
+        catch {
+            json(res, 400, { error: 'invalid JSON' });
+            return true;
+        }
+        if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+            json(res, 400, { error: 'body must be an object' });
+            return true;
+        }
+        const { saveGlobalConfig } = await import('../config.js');
+        await saveGlobalConfig(parsed);
+        json(res, 200, { ok: true });
+        return true;
+    }
+    return false;
+}
+async function serveStatic(res, staticDir, pathname) {
+    const safe = pathname === '/' ? '/index.html' : pathname;
+    const filePath = join(staticDir, safe.replace(/^\/+/, ''));
+    try {
+        const info = await stat(filePath);
+        if (!info.isFile()) {
+            res.writeHead(404);
+            res.end('Not found');
+            return;
+        }
+        const ext = extname(filePath);
+        const body = await readFile(filePath);
+        res.writeHead(200, { 'Content-Type': MIME[ext] ?? 'application/octet-stream' });
+        res.end(body);
+    }
+    catch {
+        try {
+            const fallback = await readFile(join(staticDir, 'index.html'));
+            res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
+            res.end(fallback);
+        }
+        catch {
+            res.writeHead(503);
+            res.end('Sanook Dashboard assets missing — run npm run build:dashboard');
+        }
+    }
+}
+export async function startDashboardServer(opts = {}) {
+    const port = opts.port ?? 9119;
+    const host = opts.host ?? '127.0.0.1';
+    const staticDir = opts.staticDir ?? dashboardStaticDir();
+    const log = opts.onLog ?? (() => { });
+    const server = createServer(async (req, res) => {
+        try {
+            const url = new URL(req.url ?? '/', `http://${host}`);
+            if (url.pathname.startsWith('/api/')) {
+                const handled = await handleApi(req, res, url.pathname);
+                if (handled)
+                    return;
+                json(res, 404, { error: 'not found' });
+                return;
+            }
+            await serveStatic(res, staticDir, url.pathname);
+        }
+        catch (e) {
+            json(res, 500, { error: e.message });
+        }
+    });
+    await new Promise((resolve, reject) => {
+        server.once('error', reject);
+        server.listen(port, host, () => resolve());
+    });
+    log(`Sanook Dashboard — http://${host}:${port}`);
+    return () => server.close();
+}
+export function dashboardStaticRoot() {
+    return dashboardStaticDir();
+}

package/dist/dashboard/static/app.js

@@ -0,0 +1,277 @@
+const I18N = {
+  en: {
+    productName: 'Sanook Dashboard',
+    tagline: 'Configure models, sessions, MCP, gateway, and your second brain',
+    nav: {
+      home: 'Home',
+      chat: 'Chat',
+      models: 'Models',
+      sessions: 'Sessions',
+      files: 'Files',
+      logs: 'Logs',
+      cron: 'Cron',
+      channels: 'Channels',
+      config: 'Config',
+      mcp: 'MCP',
+      brain: 'Brain',
+    },
+    home: {
+      title: 'System status',
+      cliVersion: 'CLI version',
+      model: 'Default model',
+      brainPath: 'Second brain',
+      gateway: 'Gateway hint',
+      openRepl: 'Run sanook in your terminal to chat',
+    },
+    chat: {
+      title: 'Chat',
+      hint: 'Primary chat runs in the terminal REPL. Start the gateway for HTTP/mobile access.',
+    },
+    models: { title: 'Models', hint: 'Change with sanook config set model <spec> or /model in REPL.' },
+    sessions: { title: 'Sessions', empty: 'No resumable sessions yet.' },
+    files: { title: 'Files', open: 'Open' },
+    logs: { title: 'Gateway logs', empty: 'No log file yet.' },
+    cron: { title: 'Scheduled tasks', empty: 'No cron tasks — sanook cron add "every 1h" "task"' },
+    channels: { title: 'Messaging channels', configured: 'configured', setup: 'Setup command' },
+    config: { title: 'Configuration', save: 'Save JSON' },
+    mcp: { title: 'MCP servers', empty: 'No MCP servers configured.' },
+    brain: { title: 'Second brain', empty: 'Not configured — run sanook brain init' },
+  },
+  th: {
+    productName: 'Sanook Dashboard',
+    tagline: 'จัดการ model, session, MCP, gateway และ second brain',
+    nav: {
+      home: 'หน้าแรก',
+      chat: 'Chat',
+      models: 'Models',
+      sessions: 'Sessions',
+      files: 'Files',
+      logs: 'Logs',
+      cron: 'Cron',
+      channels: 'Channels',
+      config: 'Config',
+      mcp: 'MCP',
+      brain: 'Brain',
+    },
+    home: {
+      title: 'สถานะระบบ',
+      cliVersion: 'เวอร์ชัน CLI',
+      model: 'Model หลัก',
+      brainPath: 'Second brain',
+      gateway: 'คำสั่ง Gateway',
+      openRepl: 'รัน sanook ใน terminal เพื่อแชท',
+    },
+    chat: { title: 'Chat', hint: 'แชทหลักอยู่ใน terminal · รัน sanook serve สำหรับ HTTP/mobile' },
+    models: { title: 'Models', hint: 'เปลี่ยนด้วย sanook config set model หรือ /model ใน REPL' },
+    sessions: { title: 'Sessions', empty: 'ยังไม่มี session ที่ resume ได้' },
+    files: { title: 'Files', open: 'เปิด' },
+    logs: { title: 'Gateway logs', empty: 'ยังไม่มี log' },
+    cron: { title: 'Scheduled tasks', empty: 'ยังไม่มี cron — sanook cron add "every 1h" "task"' },
+    channels: { title: 'Messaging channels', configured: 'ตั้งแล้ว', setup: 'คำสั่ง setup' },
+    config: { title: 'Configuration', save: 'บันทึก JSON' },
+    mcp: { title: 'MCP servers', empty: 'ยังไม่ได้ตั้ง MCP server' },
+    brain: { title: 'Second brain', empty: 'ยังไม่ตั้ง — รัน sanook brain init' },
+  },
+};
+
+const routes = [
+  { id: 'home', path: '#/' },
+  { id: 'chat', path: '#/chat' },
+  { id: 'models', path: '#/models' },
+  { id: 'sessions', path: '#/sessions' },
+  { id: 'files', path: '#/files' },
+  { id: 'logs', path: '#/logs' },
+  { id: 'cron', path: '#/cron' },
+  { id: 'channels', path: '#/channels' },
+  { id: 'config', path: '#/config' },
+  { id: 'mcp', path: '#/mcp' },
+  { id: 'brain', path: '#/brain' },
+];
+
+let filesPath = '';
+
+function locale() {
+  return localStorage.getItem('sanook-dashboard-locale') || 'en';
+}
+
+function t(key) {
+  const loc = I18N[locale()] ?? I18N.en;
+  return key.split('.').reduce((o, k) => o?.[k], loc) ?? key;
+}
+
+async function api(path) {
+  const res = await fetch(path);
+  if (!res.ok) throw new Error(`${path} ${res.status}`);
+  return res.json();
+}
+
+function renderNav(active) {
+  document.getElementById('nav').innerHTML = routes
+    .map((r) => `<a class="nav-link${active === r.id ? ' active' : ''}" href="${r.path}">${t(`nav.${r.id}`)}</a>`)
+    .join('');
+}
+
+async function renderHome(page) {
+  const status = await api('/api/status');
+  page.innerHTML = `<div class="card"><h2>${t('home.title')}</h2>
+    <dl class="kv">
+      <dt>${t('home.cliVersion')}</dt><dd><span class="pill">${status.version ?? 'dev'}</span></dd>
+      <dt>${t('home.model')}</dt><dd>${status.model ?? '(not set)'}</dd>
+      <dt>${t('home.brainPath')}</dt><dd>${status.brainPath ?? '(not set)'}</dd>
+      <dt>${t('home.gateway')}</dt><dd><code>${status.gatewayHint ?? 'sanook serve'}</code></dd>
+    </dl>
+    <p class="hint">${t('home.openRepl')}</p></div>`;
+}
+
+async function renderChat(page) {
+  const status = await api('/api/chat/status');
+  page.innerHTML = `<div class="card"><h2>${t('chat.title')}</h2>
+    <p class="hint">${t('chat.hint')}</p>
+    <dl class="kv"><dt>gateway</dt><dd><code>${status.gateway ?? 'sanook serve'}</code></dd></dl>
+    <textarea id="chat-draft" placeholder="Draft a prompt to copy into terminal…" style="width:100%;min-height:120px;background:#0a1020;color:#e8edf7;border:1px solid #2a3550;border-radius:12px;padding:12px;"></textarea>
+  </div>`;
+}
+
+async function renderModels(page) {
+  const status = await api('/api/status');
+  page.innerHTML = `<div class="card"><h2>${t('models.title')}</h2>
+    <dl class="kv"><dt>model</dt><dd>${status.model ?? '(not set)'}</dd></dl>
+    <p class="hint">${t('models.hint')}</p></div>`;
+}
+
+async function renderSessions(page) {
+  const { sessions } = await api('/api/sessions');
+  if (!sessions?.length) {
+    page.innerHTML = `<div class="card"><h2>${t('sessions.title')}</h2><p class="hint">${t('sessions.empty')}</p></div>`;
+    return;
+  }
+  page.innerHTML = `<div class="card"><h2>${t('sessions.title')}</h2>
+    <table class="table"><thead><tr><th>id</th><th>model</th><th>updated</th></tr></thead><tbody>
+    ${sessions.slice(0, 50).map((s) => `<tr><td>${s.id ?? ''}</td><td>${s.model ?? ''}</td><td>${s.updated ?? ''}</td></tr>`).join('')}
+    </tbody></table></div>`;
+}
+
+async function renderFiles(page) {
+  const data = await api(`/api/files?path=${encodeURIComponent(filesPath)}`);
+  const entries = (data.entries ?? [])
+    .map((e) => {
+      const next = filesPath ? `${filesPath}/${e.name}` : e.name;
+      if (e.dir) return `<tr><td>📁 ${e.name}</td><td><a href="#" data-path="${next}">${t('files.open')}</a></td></tr>`;
+      return `<tr><td>${e.name}</td><td><a href="#" data-read="${next}">${t('files.open')}</a></td></tr>`;
+    })
+    .join('');
+  page.innerHTML = `<div class="card"><h2>${t('files.title')}</h2>
+    <p class="hint">~/.sanook · path: ${filesPath || '/'}</p>
+    <table class="table"><thead><tr><th>name</th><th></th></tr></thead><tbody>${entries}</tbody></table>
+    <pre id="file-preview" class="hint" style="white-space:pre-wrap;margin-top:12px;"></pre></div>`;
+  page.querySelectorAll('[data-path]').forEach((el) => {
+    el.onclick = (ev) => {
+      ev.preventDefault();
+      filesPath = el.getAttribute('data-path') ?? '';
+      void renderFiles(page);
+    };
+  });
+  page.querySelectorAll('[data-read]').forEach((el) => {
+    el.onclick = async (ev) => {
+      ev.preventDefault();
+      const file = await api(`/api/files/read?path=${encodeURIComponent(el.getAttribute('data-read') ?? '')}`);
+      document.getElementById('file-preview').textContent = file.content ?? '';
+    };
+  });
+}
+
+async function renderLogs(page) {
+  const data = await api('/api/logs');
+  const body = (data.lines ?? []).join('\n') || t('logs.empty');
+  page.innerHTML = `<div class="card"><h2>${t('logs.title')}</h2>
+    <p class="hint">${data.path ?? ''}</p>
+    <pre style="white-space:pre-wrap;max-height:480px;overflow:auto;background:#0a1020;padding:12px;border-radius:12px;border:1px solid #2a3550;">${body}</pre></div>`;
+}
+
+async function renderCron(page) {
+  const { tasks } = await api('/api/cron');
+  if (!tasks?.length) {
+    page.innerHTML = `<div class="card"><h2>${t('cron.title')}</h2><p class="hint">${t('cron.empty')}</p></div>`;
+    return;
+  }
+  page.innerHTML = `<div class="card"><h2>${t('cron.title')}</h2>
+    <table class="table"><thead><tr><th>id</th><th>status</th><th>schedule</th><th>spec</th></tr></thead><tbody>
+    ${tasks.map((task) => `<tr><td>${task.id}</td><td>${task.status}</td><td>${task.schedule ?? 'once'}</td><td>${(task.spec ?? '').slice(0, 60)}</td></tr>`).join('')}
+    </tbody></table></div>`;
+}
+
+async function renderChannels(page) {
+  const data = await api('/api/channels');
+  page.innerHTML = `<div class="card"><h2>${t('channels.title')}</h2>
+    <p class="hint">service: ${data.serviceRunning ? 'running' : 'stopped'}</p>
+    <table class="table"><thead><tr><th>platform</th><th>status</th><th>${t('channels.setup')}</th></tr></thead><tbody>
+    ${(data.channels ?? []).map((c) => `<tr><td>${c.label}</td><td>${c.configured ? t('channels.configured') : '—'}</td><td><code>${c.setupCommand}</code></td></tr>`).join('')}
+    </tbody></table></div>`;
+}
+
+async function renderConfig(page) {
+  const config = await api('/api/config');
+  page.innerHTML = `<div class="card"><h2>${t('config.title')}</h2>
+    <textarea id="config-json" style="width:100%;min-height:320px;background:#0a1020;color:#e8edf7;border:1px solid #2a3550;border-radius:12px;padding:12px;font-family:ui-monospace,monospace;">${JSON.stringify(config, null, 2)}</textarea>
+    <p><button id="save-config" style="margin-top:12px;padding:8px 14px;border-radius:10px;border:0;background:#38bdf8;color:#041018;font-weight:600;cursor:pointer">${t('config.save')}</button></p></div>`;
+  document.getElementById('save-config').onclick = async () => {
+    await fetch('/api/config', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: document.getElementById('config-json').value });
+    alert('Saved');
+  };
+}
+
+async function renderMcp(page) {
+  const { servers } = await api('/api/mcp');
+  const names = Object.keys(servers ?? {});
+  if (!names.length) {
+    page.innerHTML = `<div class="card"><h2>${t('mcp.title')}</h2><p class="hint">${t('mcp.empty')}</p></div>`;
+    return;
+  }
+  page.innerHTML = `<div class="card"><h2>${t('mcp.title')}</h2>
+    <table class="table"><thead><tr><th>name</th><th>command</th><th>enabled</th></tr></thead><tbody>
+    ${names.map((name) => { const s = servers[name]; return `<tr><td>${name}</td><td>${s.command ?? s.url ?? ''}</td><td>${s.enabled === false ? 'no' : 'yes'}</td></tr>`; }).join('')}
+    </tbody></table></div>`;
+}
+
+async function renderBrain(page) {
+  const { brainPath } = await api('/api/brain');
+  page.innerHTML = `<div class="card"><h2>${t('brain.title')}</h2>
+    <p>${brainPath ?? `<span class="hint">${t('brain.empty')}</span>`}</p></div>`;
+}
+
+async function renderRoute() {
+  const hash = location.hash.replace(/^#/, '') || '/';
+  const route = routes.find((r) => r.path === `#${hash}`) ?? routes[0];
+  document.getElementById('page-title').textContent = t(`nav.${route.id}`);
+  document.querySelector('.brand-title').textContent = t('productName');
+  document.querySelector('.brand-tagline').textContent = t('tagline');
+  renderNav(route.id);
+  const page = document.getElementById('page');
+  page.innerHTML = '<p class="hint">Loading…</p>';
+  try {
+    const map = {
+      home: renderHome,
+      chat: renderChat,
+      models: renderModels,
+      sessions: renderSessions,
+      files: renderFiles,
+      logs: renderLogs,
+      cron: renderCron,
+      channels: renderChannels,
+      config: renderConfig,
+      mcp: renderMcp,
+      brain: renderBrain,
+    };
+    await (map[route.id] ?? renderHome)(page);
+  } catch (e) {
+    page.innerHTML = `<div class="card"><p class="hint">${e.message}</p></div>`;
+  }
+}
+
+document.getElementById('locale-select').value = locale();
+document.getElementById('locale-select').onchange = (e) => {
+  localStorage.setItem('sanook-dashboard-locale', e.target.value);
+  renderRoute();
+};
+window.addEventListener('hashchange', renderRoute);
+renderRoute();