clawmon 0.1.0

package/README.md

@@ -0,0 +1,48 @@
+# OpenClaw Monitor
+
+Local task monitor plugin for OpenClaw. Tracks running, stale, and failed tasks via SQLite and serves a web UI on `127.0.0.1:7070`.
+
+## Install as OpenClaw Plugin
+
+```bash
+openclaw plugins install ./openclaw-monitor
+```
+
+## Development
+
+```bash
+# Start (installs deps, seeds DB if missing, runs server)
+./dev.sh
+
+# Force reseed test data
+./dev.sh --seed
+```
+
+Open [http://127.0.0.1:7070](http://127.0.0.1:7070)
+
+## Configuration
+
+| Env Var | Default | Description |
+|---------|---------|-------------|
+| `OPENCLAW_MONITOR_PORT` | `7070` | HTTP port |
+| `OPENCLAW_MONITOR_DB_DIR` | `~/.openclaw/monitor` | Directory for SQLite database |
+| `OPENCLAW_MONITOR_RETENTION_DAYS` | `7` | Days to keep finished tasks |
+
+These can also be set in `openclaw.json` plugin config.
+
+## API
+
+| Endpoint | Description |
+|----------|-------------|
+| `GET /health` | Health check |
+| `GET /api/overview` | Task counts and last update |
+| `GET /api/tasks` | All tasks |
+| `GET /api/tasks/running` | Running tasks |
+| `GET /api/tasks/recent` | Last 50 tasks |
+| `GET /api/tasks/failed` | Failed tasks |
+| `GET /api/system` | Version, uptime, DB path |
+| `GET /` | Web UI |
+
+## Docs
+
+- [Features](docs/FEATURES.md)

package/openclaw.plugin.json

@@ -0,0 +1,11 @@
+{
+  "name": "clawmon",
+  "version": "0.1.0",
+  "description": "Local task monitor with web UI — tracks running, stale, and failed tasks",
+  "entry": "src/index.ts",
+  "config": {
+    "port": 7070,
+    "db_dir": "~/.openclaw/monitor",
+    "retention_days": 7
+  }
+}

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "clawmon",
+  "version": "0.1.0",
+  "description": "Local task monitor plugin for OpenClaw",
+  "type": "module",
+  "main": "src/index.ts",
+  "files": ["src", "ui", "openclaw.plugin.json"],
+  "scripts": {
+    "dev": "tsx scripts/dev-standalone.ts",
+    "seed": "node scripts/seed.js",
+    "dev:seed": "node scripts/seed.js && tsx scripts/dev-standalone.ts"
+  },
+  "dependencies": {
+    "better-sqlite3": "^11.0.0"
+  },
+  "devDependencies": {
+    "@types/better-sqlite3": "^7.6.0",
+    "@types/node": "^22.0.0",
+    "tsx": "^4.0.0"
+  }
+}

package/src/config.ts

@@ -0,0 +1,56 @@
+import { homedir } from "node:os";
+import { join } from "node:path";
+
+export interface MonitorConfig {
+  host: string;
+  port: number;
+  dbDir: string;
+  dbPath: string;
+  pollInterval: number;
+  staleTimeout: number;
+  retentionDays: number;
+  cleanupInterval: number;
+}
+
+export function resolveConfig(pluginConfig?: Record<string, unknown>): MonitorConfig {
+  const dbDir =
+    env("OPENCLAW_MONITOR_DB_DIR") ??
+    str(pluginConfig?.db_dir) ??
+    join(homedir(), ".openclaw", "monitor");
+
+  const port =
+    int(env("OPENCLAW_MONITOR_PORT")) ??
+    int(pluginConfig?.port) ??
+    7070;
+
+  const retentionDays =
+    int(env("OPENCLAW_MONITOR_RETENTION_DAYS")) ??
+    int(pluginConfig?.retention_days) ??
+    7;
+
+  return {
+    host: "127.0.0.1",
+    port,
+    dbDir,
+    dbPath: join(dbDir, "status.db"),
+    pollInterval: 2_000,
+    staleTimeout: 300,
+    retentionDays,
+    cleanupInterval: 3_600_000,
+  };
+}
+
+function env(key: string): string | undefined {
+  const v = process.env[key];
+  return v !== undefined && v !== "" ? v : undefined;
+}
+
+function str(v: unknown): string | undefined {
+  return typeof v === "string" ? v : undefined;
+}
+
+function int(v: unknown): number | undefined {
+  if (v === undefined || v === null) return undefined;
+  const n = Number(v);
+  return Number.isFinite(n) ? n : undefined;
+}

package/src/db.ts

@@ -0,0 +1,46 @@
+import Database from "better-sqlite3";
+import { mkdirSync } from "node:fs";
+import type { MonitorConfig } from "./config.js";
+
+let db: Database.Database | null = null;
+
+export function initDb(config: MonitorConfig): Database.Database {
+  mkdirSync(config.dbDir, { recursive: true });
+  db = new Database(config.dbPath);
+  db.pragma("journal_mode = WAL");
+  db.exec(`
+    CREATE TABLE IF NOT EXISTS tasks (
+      id TEXT PRIMARY KEY,
+      name TEXT NOT NULL,
+      kind TEXT,
+      status TEXT NOT NULL DEFAULT 'pending',
+      pid INTEGER,
+      started_at INTEGER,
+      updated_at INTEGER,
+      finished_at INTEGER,
+      exit_code INTEGER,
+      error TEXT
+    )
+  `);
+  return db;
+}
+
+export function getDb(): Database.Database {
+  if (!db) throw new Error("Database not initialized — call initDb() first");
+  return db;
+}
+
+export function closeDb(): void {
+  if (db) {
+    db.close();
+    db = null;
+  }
+}
+
+export function query(sql: string, ...params: unknown[]): Record<string, unknown>[] {
+  return getDb().prepare(sql).all(...params) as Record<string, unknown>[];
+}
+
+export function queryOne(sql: string, ...params: unknown[]): Record<string, unknown> | undefined {
+  return (getDb().prepare(sql).get(...params) as Record<string, unknown>) ?? undefined;
+}

package/src/index.ts

@@ -0,0 +1,45 @@
+import { resolveConfig } from "./config.js";
+import { initDb, closeDb } from "./db.js";
+import { startWatcher } from "./watcher.js";
+import { createHttpServer, listenServer } from "./server.js";
+import type { Server } from "node:http";
+
+interface PluginApi {
+  registerService(service: {
+    id: string;
+    start: () => Promise<void>;
+    stop: () => Promise<void>;
+  }): void;
+  config?: Record<string, unknown>;
+}
+
+export function register(api: PluginApi): void {
+  let stopWatcher: (() => void) | null = null;
+  let server: Server | null = null;
+
+  api.registerService({
+    id: "clawmon",
+
+    async start() {
+      const config = resolveConfig(api.config);
+      initDb(config);
+      stopWatcher = startWatcher(config);
+      server = createHttpServer(config);
+      await listenServer(server, config);
+      console.log(`[clawmon] listening on http://${config.host}:${config.port}`);
+    },
+
+    async stop() {
+      if (stopWatcher) {
+        stopWatcher();
+        stopWatcher = null;
+      }
+      if (server) {
+        await new Promise<void>((resolve) => server!.close(() => resolve()));
+        server = null;
+      }
+      closeDb();
+      console.log("[clawmon] stopped");
+    },
+  });
+}

package/src/server.ts

@@ -0,0 +1,149 @@
+import { createServer, type Server, type IncomingMessage, type ServerResponse } from "node:http";
+import { readFile } from "node:fs/promises";
+import { join, extname } from "node:path";
+import { fileURLToPath } from "node:url";
+import { query, queryOne } from "./db.js";
+import type { MonitorConfig } from "./config.js";
+
+const VERSION = "0.1.0";
+
+const MIME: Record<string, string> = {
+  ".html": "text/html; charset=utf-8",
+  ".css": "text/css; charset=utf-8",
+  ".js": "application/javascript; charset=utf-8",
+  ".json": "application/json; charset=utf-8",
+  ".png": "image/png",
+  ".svg": "image/svg+xml",
+  ".ico": "image/x-icon",
+};
+
+const __dirname = join(fileURLToPath(import.meta.url), "..");
+const UI_DIR = join(__dirname, "..", "ui");
+
+let startTime = 0;
+
+export function createHttpServer(config: MonitorConfig): Server {
+  startTime = Date.now();
+
+  const server = createServer((req, res) => {
+    try {
+      route(req, res, config);
+    } catch (err) {
+      res.writeHead(500, { "Content-Type": "application/json" });
+      res.end(JSON.stringify({ error: "Internal server error" }));
+    }
+  });
+
+  return server;
+}
+
+export function listenServer(server: Server, config: MonitorConfig): Promise<void> {
+  return new Promise((resolve, reject) => {
+    server.listen(config.port, config.host, () => resolve());
+    server.once("error", reject);
+  });
+}
+
+function route(req: IncomingMessage, res: ServerResponse, config: MonitorConfig): void {
+  const url = req.url ?? "/";
+  const method = req.method ?? "GET";
+
+  if (method !== "GET") {
+    res.writeHead(405, { "Content-Type": "application/json" });
+    res.end(JSON.stringify({ error: "Method not allowed" }));
+    return;
+  }
+
+  // API routes
+  if (url === "/health") return json(res, { status: "ok" });
+  if (url === "/api/overview") return apiOverview(res);
+  if (url === "/api/tasks") return apiAllTasks(res);
+  if (url === "/api/tasks/running") return apiRunningTasks(res);
+  if (url === "/api/tasks/recent") return apiRecentTasks(res);
+  if (url === "/api/tasks/failed") return apiFailedTasks(res);
+  if (url === "/api/system") return apiSystem(res, config);
+
+  // Static files
+  if (url.startsWith("/static/")) { serveStatic(res, url.slice("/static/".length)); return; }
+
+  // Root → index.html
+  if (url === "/" || url === "/index.html") { serveStatic(res, "index.html"); return; }
+
+  res.writeHead(404, { "Content-Type": "application/json" });
+  res.end(JSON.stringify({ error: "Not found" }));
+}
+
+// --- API handlers ---
+
+function apiOverview(res: ServerResponse): void {
+  const total = queryOne("SELECT COUNT(*) AS c FROM tasks") ?? { c: 0 };
+  const running = queryOne("SELECT COUNT(*) AS c FROM tasks WHERE status = 'running'") ?? { c: 0 };
+  const failed = queryOne("SELECT COUNT(*) AS c FROM tasks WHERE status = 'failed'") ?? { c: 0 };
+  const last = queryOne("SELECT MAX(updated_at) AS ts FROM tasks") ?? { ts: null };
+  json(res, {
+    total: total.c,
+    running: running.c,
+    failed: failed.c,
+    last_updated: last.ts ?? null,
+  });
+}
+
+function apiAllTasks(res: ServerResponse): void {
+  json(res, query("SELECT * FROM tasks ORDER BY updated_at DESC"));
+}
+
+function apiRunningTasks(res: ServerResponse): void {
+  json(res, query("SELECT * FROM tasks WHERE status = 'running' ORDER BY started_at DESC"));
+}
+
+function apiRecentTasks(res: ServerResponse): void {
+  json(res, query("SELECT * FROM tasks ORDER BY updated_at DESC LIMIT 50"));
+}
+
+function apiFailedTasks(res: ServerResponse): void {
+  json(res, query("SELECT * FROM tasks WHERE status = 'failed' ORDER BY updated_at DESC"));
+}
+
+function apiSystem(res: ServerResponse, config: MonitorConfig): void {
+  const uptimeSeconds = Math.floor((Date.now() - startTime) / 1000);
+  json(res, {
+    version: VERSION,
+    uptime_seconds: uptimeSeconds,
+    db_path: config.dbPath,
+  });
+}
+
+// --- Helpers ---
+
+function json(res: ServerResponse, data: unknown): void {
+  const body = JSON.stringify(data);
+  res.writeHead(200, {
+    "Content-Type": "application/json; charset=utf-8",
+    "Content-Length": Buffer.byteLength(body),
+  });
+  res.end(body);
+}
+
+async function serveStatic(res: ServerResponse, filePath: string): Promise<void> {
+  // Prevent directory traversal
+  if (filePath.includes("..")) {
+    res.writeHead(403);
+    res.end();
+    return;
+  }
+
+  const fullPath = join(UI_DIR, filePath);
+  try {
+    const data = await readFile(fullPath);
+    const ext = extname(fullPath);
+    const contentType = MIME[ext] ?? "application/octet-stream";
+    res.writeHead(200, {
+      "Content-Type": contentType,
+      "Content-Length": data.length,
+    });
+    res.end(data);
+  } catch {
+    res.writeHead(404, { "Content-Type": "application/json" });
+    res.end(JSON.stringify({ error: "Not found" }));
+  }
+}

package/src/watcher.ts

@@ -0,0 +1,63 @@
+import { getDb } from "./db.js";
+import type { MonitorConfig } from "./config.js";
+
+export function startWatcher(config: MonitorConfig): () => void {
+  let lastCleanup = 0;
+
+  const tick = () => {
+    try {
+      markStaleTasks(config);
+      const now = Date.now();
+      if (now - lastCleanup >= config.cleanupInterval) {
+        pruneOldTasks(config);
+        lastCleanup = now;
+      }
+    } catch {
+      // monitor should not crash on transient DB issues
+    }
+  };
+
+  const id = setInterval(tick, config.pollInterval);
+  // Run immediately on start
+  tick();
+
+  return () => clearInterval(id);
+}
+
+function markStaleTasks(config: MonitorConfig): void {
+  const db = getDb();
+  const rows = db
+    .prepare("SELECT id, pid, updated_at FROM tasks WHERE status = 'running'")
+    .all() as { id: string; pid: number | null; updated_at: number | null }[];
+
+  const now = Math.floor(Date.now() / 1000);
+  const update = db.prepare("UPDATE tasks SET status = 'unknown', updated_at = ? WHERE id = ?");
+
+  for (const row of rows) {
+    let stale = false;
+    if (row.pid && !pidAlive(row.pid)) {
+      stale = true;
+    } else if (now - (row.updated_at ?? 0) > config.staleTimeout) {
+      stale = true;
+    }
+    if (stale) {
+      update.run(now, row.id);
+    }
+  }
+}
+
+function pruneOldTasks(config: MonitorConfig): void {
+  const cutoff = Math.floor(Date.now() / 1000) - config.retentionDays * 86400;
+  getDb()
+    .prepare("DELETE FROM tasks WHERE status IN ('done', 'failed', 'unknown') AND updated_at < ?")
+    .run(cutoff);
+}
+
+function pidAlive(pid: number): boolean {
+  try {
+    process.kill(pid, 0);
+    return true;
+  } catch {
+    return false;
+  }
+}

package/ui/app.js

@@ -0,0 +1,139 @@
+(function () {
+  "use strict";
+
+  var currentView = "overview";
+  var pollTimer = null;
+
+  // Menu switching
+  document.querySelector(".menu").addEventListener("click", function (e) {
+    var item = e.target.closest(".menu-item");
+    if (!item) return;
+    document.querySelectorAll(".menu-item").forEach(function (el) {
+      el.classList.remove("active");
+    });
+    item.classList.add("active");
+    currentView = item.getAttribute("data-view");
+    fetchAndRender();
+  });
+
+  function fetchAndRender() {
+    var url = endpoints[currentView];
+    if (!url) return;
+    fetch(url)
+      .then(function (r) { return r.json(); })
+      .then(function (data) { renderers[currentView](data); })
+      .catch(function () {
+        document.getElementById("content").innerHTML =
+          '<div class="empty">Failed to load data.</div>';
+      });
+  }
+
+  var endpoints = {
+    overview: "/api/overview",
+    running: "/api/tasks/running",
+    recent: "/api/tasks/recent",
+    failed: "/api/tasks/failed",
+    system: "/api/system"
+  };
+
+  var renderers = {
+    overview: renderOverview,
+    running: renderRunning,
+    recent: renderRecent,
+    failed: renderFailed,
+    system: renderSystem
+  };
+
+  function esc(s) {
+    if (s == null) return "";
+    var d = document.createElement("div");
+    d.textContent = String(s);
+    return d.innerHTML;
+  }
+
+  function fmtTime(epoch) {
+    if (!epoch) return "—";
+    var d = new Date(epoch * 1000);
+    return d.toLocaleString();
+  }
+
+  function statusBadge(status) {
+    var cls = "status status-" + esc(status);
+    return '<span class="' + cls + '">' + esc(status) + "</span>";
+  }
+
+  function renderOverview(data) {
+    document.getElementById("content").innerHTML =
+      "<h2>Overview</h2>" +
+      '<div class="overview-grid">' +
+        '<div class="card"><div class="label">Total Tasks</div><div class="value">' + esc(data.total) + "</div></div>" +
+        '<div class="card"><div class="label">Running</div><div class="value">' + esc(data.running) + "</div></div>" +
+        '<div class="card"><div class="label">Failed</div><div class="value">' + esc(data.failed) + "</div></div>" +
+        '<div class="card"><div class="label">Last Update</div><div class="value" style="font-size:14px">' + fmtTime(data.last_updated) + "</div></div>" +
+      "</div>";
+  }
+
+  function taskTable(tasks, columns) {
+    if (!tasks.length) return '<div class="empty">No tasks found.</div>';
+    var html = "<table><thead><tr>";
+    columns.forEach(function (c) { html += "<th>" + esc(c.label) + "</th>"; });
+    html += "</tr></thead><tbody>";
+    tasks.forEach(function (t) {
+      html += "<tr>";
+      columns.forEach(function (c) { html += "<td>" + c.render(t) + "</td>"; });
+      html += "</tr>";
+    });
+    html += "</tbody></table>";
+    return html;
+  }
+
+  var baseCols = [
+    { label: "Name", render: function (t) { return esc(t.name); } },
+    { label: "Kind", render: function (t) { return esc(t.kind); } },
+    { label: "Status", render: function (t) { return statusBadge(t.status); } },
+    { label: "Started", render: function (t) { return fmtTime(t.started_at); } },
+    { label: "Updated", render: function (t) { return fmtTime(t.updated_at); } }
+  ];
+
+  function renderRunning(tasks) {
+    var cols = baseCols.concat([
+      { label: "PID", render: function (t) { return esc(t.pid); } }
+    ]);
+    document.getElementById("content").innerHTML =
+      "<h2>Running Tasks</h2>" + taskTable(tasks, cols);
+  }
+
+  function renderRecent(tasks) {
+    document.getElementById("content").innerHTML =
+      "<h2>Recent Tasks</h2>" + taskTable(tasks, baseCols);
+  }
+
+  function renderFailed(tasks) {
+    var cols = baseCols.concat([
+      { label: "Exit Code", render: function (t) { return esc(t.exit_code); } },
+      { label: "Error", render: function (t) { return esc(t.error); } }
+    ]);
+    document.getElementById("content").innerHTML =
+      "<h2>Failed Tasks</h2>" + taskTable(tasks, cols);
+  }
+
+  function renderSystem(data) {
+    var uptime = data.uptime_seconds;
+    var h = Math.floor(uptime / 3600);
+    var m = Math.floor((uptime % 3600) / 60);
+    var s = uptime % 60;
+    var uptimeStr = h + "h " + m + "m " + s + "s";
+
+    document.getElementById("content").innerHTML =
+      "<h2>System Info</h2>" +
+      '<ul class="info-list">' +
+        '<li><span class="info-key">Version</span><span class="info-val">' + esc(data.version) + "</span></li>" +
+        '<li><span class="info-key">Uptime</span><span class="info-val">' + esc(uptimeStr) + "</span></li>" +
+        '<li><span class="info-key">Database Path</span><span class="info-val">' + esc(data.db_path) + "</span></li>" +
+      "</ul>";
+  }
+
+  // Initial fetch + polling
+  fetchAndRender();
+  pollTimer = setInterval(fetchAndRender, 2000);
+})();

package/ui/index.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>🦞 OpenClaw Monitor</title>
+  <link rel="stylesheet" href="/static/styles.css">
+</head>
+<body>
+  <div class="layout">
+    <nav class="sidebar">
+      <div class="sidebar-header">🦞 OpenClaw Monitor</div>
+      <ul class="menu">
+        <li class="menu-item active" data-view="overview">Overview</li>
+        <li class="menu-item" data-view="running">Running Tasks</li>
+        <li class="menu-item" data-view="recent">Recent Tasks</li>
+        <li class="menu-item" data-view="failed">Failed Tasks</li>
+        <li class="menu-item" data-view="system">System Info</li>
+      </ul>
+    </nav>
+    <main class="body" id="content">
+      <div class="loading">Loading…</div>
+    </main>
+  </div>
+  <script src="/static/app.js"></script>
+</body>
+</html>

package/ui/styles.css

@@ -0,0 +1,199 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  color: #e0e0e0;
+  background: #1a1a2e;
+}
+
+.layout {
+  display: flex;
+  height: 100vh;
+}
+
+/* Sidebar */
+.sidebar {
+  width: 200px;
+  min-width: 200px;
+  background: #16213e;
+  border-right: 1px solid #0f3460;
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebar-header {
+  padding: 16px;
+  font-size: 14px;
+  font-weight: 700;
+  color: #e94560;
+  border-bottom: 1px solid #0f3460;
+  letter-spacing: 0.5px;
+  white-space: nowrap;
+}
+
+.menu {
+  list-style: none;
+  padding: 8px 0;
+}
+
+.menu-item {
+  padding: 10px 16px;
+  cursor: pointer;
+  color: #a0a0b8;
+  transition: background 0.15s, color 0.15s;
+}
+
+.menu-item:hover {
+  background: #1a1a3e;
+  color: #e0e0e0;
+}
+
+.menu-item.active {
+  background: #0f3460;
+  color: #ffffff;
+  border-left: 3px solid #e94560;
+  padding-left: 13px;
+}
+
+/* Main content */
+.body {
+  flex: 1;
+  padding: 24px;
+  overflow-y: auto;
+  background: #1a1a2e;
+}
+
+.body h2 {
+  margin-bottom: 16px;
+  font-size: 18px;
+  color: #ffffff;
+}
+
+.loading {
+  color: #888;
+  padding: 40px;
+}
+
+/* Overview cards */
+.overview-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.card {
+  background: #16213e;
+  border: 1px solid #0f3460;
+  border-radius: 6px;
+  padding: 20px;
+}
+
+.card .label {
+  font-size: 12px;
+  color: #888;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.card .value {
+  font-size: 28px;
+  font-weight: 700;
+  margin-top: 4px;
+  color: #ffffff;
+}
+
+/* Tables */
+table {
+  width: 100%;
+  border-collapse: collapse;
+  background: #16213e;
+  border: 1px solid #0f3460;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+th, td {
+  text-align: left;
+  padding: 10px 12px;
+  border-bottom: 1px solid #0f3460;
+}
+
+th {
+  background: #0f3460;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: #a0a0b8;
+  font-weight: 600;
+}
+
+tr:last-child td {
+  border-bottom: none;
+}
+
+/* Status badges */
+.status {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 3px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.status-running {
+  background: #0a3d62;
+  color: #45aaf2;
+}
+
+.status-done {
+  background: #1e4d2b;
+  color: #26de81;
+}
+
+.status-failed {
+  background: #4d1e1e;
+  color: #fc5c65;
+}
+
+.status-pending {
+  background: #3d3d0a;
+  color: #fed330;
+}
+
+.status-unknown {
+  background: #2d2d2d;
+  color: #a0a0a0;
+}
+
+/* System info */
+.info-list {
+  list-style: none;
+}
+
+.info-list li {
+  padding: 10px 0;
+  border-bottom: 1px solid #0f3460;
+  display: flex;
+  gap: 12px;
+}
+
+.info-list .info-key {
+  color: #888;
+  min-width: 140px;
+}
+
+.info-list .info-val {
+  color: #e0e0e0;
+}
+
+.empty {
+  padding: 24px;
+  color: #666;
+  text-align: center;
+}