compend 0.0.1 → 1.1.0

package/dashboard/public/style.css

@@ -0,0 +1,497 @@
+:root {
+  --background: #101010;
+  --foreground: #F4F4F5;
+  --strings:    #DEBAAB;
+  --variables:  #A1DCF8;
+  --accent:     #2a2a2a;
+  --border:     #2a2a2a;
+  --success:    #4caf50;
+  --warning:    #ff9800;
+  --info:       #2196f3;
+  --focus-ring: #A1DCF8;
+}
+
+html[data-theme="light"] {
+  --background: #FFFFFF;
+  --foreground: #030507;
+  --strings:    #A31E22;
+  --variables:  #2B5484;
+  --accent:     #F3F3F3;
+  --border:     #d1d5db;
+  --focus-ring: #2B5484;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  background: var(--background);
+  color: var(--foreground);
+  padding: 0 20px;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+#app {
+  max-width: 960px;
+  margin: 0 auto;
+}
+
+header {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  padding: 12px 0;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 16px;
+}
+
+header h1 {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--foreground);
+}
+
+.logo-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+header div {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.theme-btn {
+  background: none;
+  border: unset;
+  color: var(--foreground);
+  cursor: pointer;
+  font-size: 16px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  line-height: 1;
+  display: flex;
+}
+
+.theme-btn:hover {
+  background: var(--accent);
+}
+
+.theme-btn:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+
+.filters {
+  margin-bottom: 12px;
+}
+
+.filter-row {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  align-items: end;
+}
+
+.field {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.field label {
+  font-size: 11px;
+  text-transform: uppercase;
+  color: var(--foreground);
+  letter-spacing: .5px;
+}
+
+.field input,
+.field select {
+  background: var(--accent);
+  border: 1px solid var(--border);
+  color: var(--foreground);
+  padding: 6px 10px;
+  border-radius: 4px;
+  font-size: 13px;
+  outline: none;
+  width: 100%;
+}
+
+.field input:focus,
+.field select:focus {
+  border-color: var(--focus-ring);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-ring) 30%, transparent);
+}
+
+.search-field input {
+  width: 100%;
+}
+
+.tags-bar {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-top: 8px;
+  padding: 6px 0;
+}
+
+.tag-check {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: var(--foreground);
+  cursor: pointer;
+  padding: 2px 8px;
+  border-radius: 12px;
+  background: var(--accent);
+  border: 1px solid var(--border);
+}
+
+.tag-check:hover {
+  border-color: var(--focus-ring);
+}
+
+.tag-check input[type="checkbox"] {
+  margin: 0;
+  accent-color: var(--variables);
+}
+
+.tag-count {
+  color: color-mix(in srgb, var(--foreground) 50%, transparent);
+  font-size: 11px;
+}
+
+#stats {
+  font-size: 13px;
+  color: var(--foreground);
+  margin-bottom: 8px;
+  padding: 0 4px;
+}
+
+#loading-skeleton table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+#loading-skeleton th {
+  text-align: left;
+  padding: 8px 12px;
+  font-size: 12px;
+  text-transform: uppercase;
+  color: var(--foreground);
+  letter-spacing: .5px;
+  border-bottom: 1px solid var(--border);
+  font-weight: 500;
+  background: var(--accent);
+}
+
+.skeleton-row td {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--border);
+}
+
+.skeleton-cell {
+  height: 14px;
+  border-radius: 4px;
+  background: linear-gradient(90deg, var(--accent) 25%, color-mix(in srgb, var(--accent) 140%, var(--foreground)) 50%, var(--accent) 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s ease-in-out infinite;
+}
+
+.skeleton-cell.wide { width: 85%; }
+.skeleton-cell.narrow { width: 30%; }
+.skeleton-cell.tiny { width: 20%; }
+
+@keyframes shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+#table-wrap {
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  overflow-x: auto;
+  position: relative;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+thead {
+  background: var(--accent);
+}
+
+th {
+  text-align: left;
+  padding: 8px 12px;
+  font-size: 12px;
+  text-transform: uppercase;
+  color: var(--foreground);
+  letter-spacing: .5px;
+  border-bottom: 1px solid var(--border);
+  font-weight: 500;
+}
+
+td {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--border);
+  font-size: 13px;
+}
+
+tbody tr:last-child td {
+  border-bottom: none;
+}
+
+tbody tr.concept-row {
+  cursor: pointer;
+  transition: background .15s;
+}
+
+tbody tr.concept-row:hover {
+  background: var(--accent);
+}
+
+tbody tr.concept-row:focus-within {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: -2px;
+}
+
+.type-badge {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 3px;
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: .4px;
+}
+
+.type-skill,
+.type-agent,
+.type-instruction,
+.type-prompt,
+.type-workflow,
+.type-reference,
+.type-default {
+  background: none;
+  border: 1px solid color-mix(in srgb, var(--foreground) 75%, transparent);
+  color: color-mix(in srgb, var(--foreground) 75%, transparent);
+}
+
+.tag-pill {
+  display: inline-block;
+  padding: 1px 6px;
+  border-radius: 3px;
+  font-size: 11px;
+  background: color-mix(in srgb, var(--accent) 40%, transparent);
+  color: var(--foreground);
+  margin: 1px;
+}
+
+.title-cell {
+  font-weight: 500;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.desc-cell {
+  max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tags-cell {
+  max-width: 200px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.status-badge {
+  display: inline-block;
+  padding: 1px 8px;
+  border-radius: 3px;
+  font-size: 11px;
+  font-weight: 400;
+  text-transform: lowercase;
+  background: color-mix(in srgb, var(--foreground) 15%, transparent);
+  color: var(--foreground);
+}
+
+.status-badge.status-stable {
+  background: color-mix(in srgb, var(--success) 30%, transparent);
+}
+
+.status-badge.status-draft {
+  background: color-mix(in srgb, var(--warning) 30%, transparent);
+}
+
+.status-badge.status-deprecated {
+  background: color-mix(in srgb, var(--strings) 30%, transparent);
+}
+
+.related-none {
+  color: color-mix(in srgb, var(--foreground) 30%, transparent);
+  font-size: 11px;
+}
+
+.detail-row td {
+  padding: 0;
+  background: color-mix(in srgb, var(--accent) 90%, var(--foreground));
+}
+
+.detail {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height .2s ease;
+  padding: 0 12px;
+}
+
+.detail.open {
+  max-height: 500px;
+  overflow-y: auto;
+  padding: 10px 12px;
+}
+
+.detail pre {
+  white-space: pre-wrap;
+  word-break: break-all;
+  color: var(--foreground);
+  font-size: 12px;
+  line-height: 1.6;
+  opacity: .85;
+}
+
+#pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  padding: 12px;
+  font-size: 13px;
+  color: var(--foreground);
+}
+
+#pagination button {
+  background: var(--accent);
+  border: 1px solid var(--border);
+  color: var(--foreground);
+  padding: 4px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+}
+
+#pagination button:disabled {
+  opacity: .3;
+  cursor: default;
+}
+
+#pagination button:not(:disabled):hover {
+  background: color-mix(in srgb, var(--accent) 110%, var(--foreground));
+}
+
+#pagination button:not(:disabled):focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+
+.empty {
+  text-align: center;
+  padding: 40px;
+  color: var(--foreground);
+  font-size: 14px;
+}
+
+#error {
+  display: none;
+  background: color-mix(in srgb, var(--strings) 15%, var(--background));
+  color: var(--foreground);
+  padding: 8px 12px;
+  border-radius: 4px;
+  margin-bottom: 8px;
+  font-size: 13px;
+}
+
+/* Toast notifications */
+#toast-container {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 10000;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  pointer-events: none;
+}
+
+.toast {
+  pointer-events: auto;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 16px;
+  border-radius: 6px;
+  font-size: 13px;
+  line-height: 1.4;
+  background: color-mix(in srgb, var(--accent) 90%, var(--foreground));
+  border: 1px solid var(--border);
+  color: var(--foreground);
+  box-shadow: 0 4px 12px rgba(0,0,0,.3);
+  animation: toast-in .25s ease-out;
+  min-width: 240px;
+  max-width: 400px;
+}
+
+.toast.removing {
+  animation: toast-out .2s ease-in forwards;
+}
+
+.toast-success {
+  border-left: 3px solid var(--success);
+}
+
+.toast-error {
+  border-left: 3px solid var(--strings);
+}
+
+.toast-info {
+  border-left: 3px solid var(--info);
+}
+
+@keyframes toast-in {
+  from { transform: translateY(20px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+@keyframes toast-out {
+  from { transform: translateY(0); opacity: 1; }
+  to { transform: translateY(20px); opacity: 0; }
+}

package/dashboard.js

@@ -0,0 +1,203 @@
+#!/usr/bin/env node
+
+import http from 'node:http';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { execSync } from 'node:child_process';
+import { initDb } from './db.js';
+import { getConfig } from './config.js';
+import { createApiHandler, err } from './dashboard/api-handler.js';
+
+const arg = process.argv[2] || 'start';
+const PORT = getConfig().port;
+
+function killOnPort(port) {
+  try {
+    const pids = execSync('lsof -ti:' + port, { encoding: 'utf-8' }).trim();
+    if (!pids) return;
+    for (const pid of pids.split('\n')) {
+      try {
+        const cmd = execSync('ps -p ' + pid + ' -o comm=', { encoding: 'utf-8' }).trim();
+        if (cmd === 'node') process.kill(parseInt(pid), 'SIGTERM');
+      } catch {}
+    }
+  } catch {}
+}
+
+if (arg === 'stop') {
+  killOnPort(PORT);
+  console.log('Compend stopped');
+  process.exit(0);
+}
+if (arg === 'restart') {
+  killOnPort(PORT);
+}
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const PUBLIC = path.join(__dirname, 'dashboard', 'public');
+
+const DB = initDb();
+
+const MIME = {
+  '.html': 'text/html; charset=utf-8',
+  '.css': 'text/css; charset=utf-8',
+  '.js': 'application/javascript; charset=utf-8',
+  '.json': 'application/json',
+  '.png': 'image/png',
+  '.ico': 'image/x-icon',
+  '.svg': 'image/svg+xml',
+};
+
+const sseClients = new Set();
+
+const rateLimit = new Map();
+function checkRate(ip, limit, windowMs) {
+  const now = Date.now();
+  const entry = rateLimit.get(ip) || { count: 0, reset: now + windowMs };
+  if (now > entry.reset) { entry.count = 0; entry.reset = now + windowMs; }
+  entry.count++;
+  rateLimit.set(ip, entry);
+  return entry.count <= limit;
+}
+
+function broadcast(type, data) {
+  const cleanType = String(type).replace(/[\r\n]/g, '');
+  const payload = `event: ${cleanType}\ndata: ${JSON.stringify(data)}\n\n`;
+  for (const client of sseClients) {
+    client.write(payload);
+  }
+}
+
+const server = http.createServer((req, res) => {
+  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:' + PORT);
+  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
+  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
+
+  if (req.method === 'OPTIONS') {
+    res.writeHead(200);
+    res.end();
+    return;
+  }
+
+  const url = new URL(req.url, `http://${req.headers.host || 'localhost'}`);
+  const pathname = url.pathname;
+  const params = url.searchParams;
+
+  if (pathname === '/api/events' && req.method === 'GET') {
+    if (sseClients.size >= 100) {
+      res.writeHead(429, { 'Content-Type': 'text/plain' });
+      res.end('Too many connections');
+      return;
+    }
+    res.writeHead(200, {
+      'Content-Type': 'text/event-stream',
+      'Cache-Control': 'no-cache',
+      'Connection': 'keep-alive'
+    });
+    res.write('\n');
+    sseClients.add(res);
+    req.on('close', () => { sseClients.delete(res); });
+    return;
+  }
+
+  if (pathname === '/api/notify' && req.method === 'POST') {
+    let body = '';
+    let bodyBytes = 0;
+    req.on('data', chunk => {
+      bodyBytes += chunk.length;
+      if (bodyBytes > 65536) { res.writeHead(413); res.end('Payload too large'); req.destroy(); return; }
+      body += chunk.toString();
+    });
+    req.on('end', () => {
+      try {
+        const { event, ...data } = JSON.parse(body);
+        broadcast(event, data);
+        res.writeHead(200, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ ok: true }));
+      } catch (e) {
+        res.writeHead(400, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ error: 'Invalid JSON' }));
+      }
+    });
+    return;
+  }
+
+  const ip = req.headers['x-forwarded-for'] || req.socket.remoteAddress || '127.0.0.1';
+  if (pathname.startsWith('/api/') && !checkRate(ip, 50, 1000)) {
+    res.writeHead(429, { 'Content-Type': 'text/plain' });
+    res.end('Rate limited');
+    return;
+  }
+
+  try {
+    if (pathname.startsWith('/api/')) {
+      const handleApi = createApiHandler(DB);
+      const result = handleApi(pathname, req.method, params) || err('Not found', 404);
+
+      if (result.status === 200 && result.body) {
+        const indexMatch = pathname.match(/^\/api\/notify$/);
+        if (indexMatch && req.method === 'POST') {
+          try {
+            const data = JSON.parse(result.body);
+            if (data && data.event) {
+              broadcast(data.event, { counts: { added: data.added, updated: data.updated, removed: data.removed, total: data.total } });
+            }
+          } catch {}
+        }
+      }
+
+      res.writeHead(result.status, result.headers);
+      res.end(result.body);
+      return;
+    }
+
+    const filePath = path.join(PUBLIC, pathname === '/' ? 'index.html' : pathname);
+    const resolved = path.resolve(filePath);
+    if (!resolved.startsWith(PUBLIC + path.sep)) {
+      res.writeHead(404, { 'Content-Type': 'text/plain' });
+      res.end('Not found');
+      return;
+    }
+    const ext = path.extname(resolved);
+
+    fs.readFile(resolved, (err, data) => {
+      if (err) {
+        res.writeHead(404, { 'Content-Type': 'text/plain' });
+        res.end('Not found');
+        return;
+      }
+      res.writeHead(200, { 'Content-Type': MIME[ext] || 'application/octet-stream' });
+      res.end(data);
+    });
+  } catch (e) {
+    console.error('Server error:', e);
+    res.writeHead(500, { 'Content-Type': 'application/json' });
+    res.end(JSON.stringify({ error: 'Internal server error' }));
+  }
+});
+
+let closing = false;
+function shutdown() {
+  if (closing) return;
+  closing = true;
+  for (const client of sseClients) { try { client.end(); } catch {} }
+  server.close(() => {
+    try { DB.close(); } catch {}
+    process.exit(0);
+  });
+  setTimeout(() => process.exit(0), 1000);
+}
+process.on('SIGTERM', shutdown);
+process.on('SIGINT', shutdown);
+
+server.listen(PORT, () => {
+  console.log('\nCompend dashboard: http://localhost:' + PORT + '/\n');
+});
+server.on('error', (e) => {
+  if (e.code === 'EADDRINUSE') {
+    console.error('Port ' + PORT + ' is in use. Run "compend stop" first.');
+    process.exit(1);
+  }
+  throw e;
+});