ai-maestro 1.0.0

package/src/ui/public/style.css

@@ -0,0 +1,460 @@
+:root {
+  color-scheme: dark;
+  --bg: #0a0d10;
+  --bg-2: #0f1418;
+  --surface: #12181d;
+  --surface-2: #182027;
+  --surface-3: #1d2730;
+  --line: #2a3640;
+  --text: #eef3f4;
+  --muted: #98a7af;
+  --accent: #63d6a5;
+  --accent-2: #6fb2ff;
+  --warning: #efc15d;
+  --danger: #ff6e6e;
+  --cyan: #61d4d0;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  min-height: 100%;
+}
+
+body {
+  margin: 0;
+  color: var(--text);
+  font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+  background:
+    linear-gradient(180deg, rgba(12, 16, 19, 0.98), rgba(8, 10, 12, 0.98)),
+    linear-gradient(120deg, rgba(99, 214, 165, 0.07), transparent 35%, rgba(111, 178, 255, 0.05) 70%);
+}
+
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  background-image:
+    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
+  background-size: 44px 44px;
+  opacity: 0.35;
+}
+
+h1, h2, h3, p {
+  margin: 0;
+}
+
+.topbar {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  display: flex;
+  justify-content: space-between;
+  gap: 20px;
+  align-items: flex-start;
+  padding: 18px 22px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  backdrop-filter: blur(12px);
+  background: rgba(10, 13, 16, 0.86);
+}
+
+.brand {
+  display: grid;
+  gap: 4px;
+}
+
+.eyebrow {
+  color: var(--muted);
+  font-size: 11px;
+  letter-spacing: 0.08em;
+}
+
+.topbar h1 {
+  font-size: 26px;
+  line-height: 1.1;
+  font-weight: 700;
+}
+
+.topbar-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 10px;
+}
+
+.shell {
+  position: relative;
+  display: grid;
+  gap: 16px;
+  padding: 16px;
+}
+
+.cards {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.workspace {
+  display: grid;
+  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
+  gap: 16px;
+  align-items: start;
+}
+
+.panel,
+.card {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: linear-gradient(180deg, rgba(20, 26, 31, 0.98), rgba(16, 21, 26, 0.98));
+  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
+}
+
+.card {
+  padding: 14px;
+  display: grid;
+  gap: 10px;
+}
+
+.card-head,
+.panel-head,
+.microterminal-head,
+.task-row__head,
+.timeline-row__head {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  align-items: center;
+}
+
+.card h3,
+.panel h2 {
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.card-detail,
+.timeline-row__detail,
+.task-row__meta,
+.meta {
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.card-event,
+.task-row__title,
+.timeline-row__summary {
+  font-size: 14px;
+  line-height: 1.35;
+}
+
+.panel {
+  padding: 14px;
+}
+
+.tasks-panel,
+.operations-panel,
+.timeline-panel {
+  min-width: 0;
+}
+
+.tasks-panel,
+.operations-panel {
+  display: grid;
+  gap: 12px;
+}
+
+.task-list,
+.timeline-list {
+  display: grid;
+  gap: 10px;
+}
+
+.task-row,
+.timeline-row {
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 8px;
+  background: rgba(8, 11, 13, 0.55);
+  padding: 12px;
+  display: grid;
+  gap: 10px;
+}
+
+.task-row__title {
+  font-weight: 600;
+}
+
+.filters,
+.command-buttons,
+.inline-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.command-buttons {
+  margin-bottom: 6px;
+}
+
+.chip,
+.filter,
+button,
+.action-button {
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  min-height: 32px;
+  padding: 0 11px;
+  color: var(--text);
+  background: rgba(255, 255, 255, 0.02);
+  font: inherit;
+}
+
+button {
+  cursor: pointer;
+}
+
+button:hover,
+.filter:hover,
+.action-button:hover {
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+button:disabled,
+.action-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.filter--active {
+  border-color: rgba(99, 214, 165, 0.7);
+  background: rgba(99, 214, 165, 0.08);
+}
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.chip--neutral,
+.chip--idle {
+  color: var(--muted);
+}
+
+.chip--running {
+  color: var(--accent-2);
+}
+
+.chip--thinking {
+  color: var(--accent);
+}
+
+.chip--success {
+  color: var(--accent);
+}
+
+.chip--warning {
+  color: var(--warning);
+}
+
+.chip--blocked,
+.chip--error {
+  color: var(--danger);
+}
+
+.action-button--primary {
+  border-color: rgba(111, 178, 255, 0.28);
+  background: rgba(111, 178, 255, 0.08);
+}
+
+.action-button--secondary {
+  border-color: rgba(239, 193, 93, 0.28);
+  background: rgba(239, 193, 93, 0.08);
+}
+
+.microterminal {
+  display: grid;
+  gap: 10px;
+  padding: 12px;
+  border-radius: 8px;
+  background: rgba(7, 10, 12, 0.72);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.microterminal-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.terminal-summary {
+  color: var(--text);
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.terminal {
+  margin: 0;
+  max-height: 240px;
+  overflow: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+  border-radius: 8px;
+  background: #07090b;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  color: #dce5e6;
+  padding: 12px;
+  font: 12px/1.5 Consolas, "SFMono-Regular", monospace;
+}
+
+.terminal--card {
+  max-height: 160px;
+}
+
+.terminal--timeline {
+  max-height: 180px;
+}
+
+.terminal--hidden {
+  display: none;
+}
+
+.meta {
+  white-space: nowrap;
+}
+
+.toast {
+  position: fixed;
+  right: 16px;
+  bottom: 16px;
+  padding: 10px 14px;
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(13, 17, 20, 0.95);
+  color: var(--text);
+  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.24);
+  opacity: 0;
+  transform: translateY(6px);
+  transition: opacity 140ms ease, transform 140ms ease;
+  pointer-events: none;
+}
+
+.toast--visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+@media (max-width: 1100px) {
+  .workspace {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 900px) {
+  .cards {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 640px) {
+  .topbar {
+    position: static;
+    flex-direction: column;
+  }
+
+  .topbar-actions {
+    justify-content: flex-start;
+  }
+
+  .cards {
+    grid-template-columns: 1fr;
+  }
+
+  .shell {
+    padding: 12px;
+  }
+}
+
+.orchestra-engines {
+  display: grid;
+  gap: 10px;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  margin-bottom: 14px;
+}
+
+.orchestra-engine {
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 8px;
+  background: rgba(8, 11, 13, 0.55);
+  padding: 10px 12px;
+  display: grid;
+  gap: 6px;
+}
+
+.orchestra-engine__head {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.orchestra-engine__name {
+  font-weight: 600;
+  font-size: 13px;
+  margin-right: auto;
+}
+
+.orchestra-engine__detail {
+  font-size: 12px;
+  opacity: 0.75;
+  line-height: 1.4;
+}
+
+.orchestra-grid {
+  display: grid;
+  gap: 14px;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+}
+
+.orchestra-block h3 {
+  font-size: 13px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  opacity: 0.7;
+  margin: 0 0 8px;
+}
+
+.orchestra-kv {
+  display: grid;
+  gap: 4px;
+}
+
+.orchestra-kv-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: 13px;
+  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
+  padding-bottom: 4px;
+}
+
+.orchestra-kv-label {
+  opacity: 0.7;
+}
+
+.orchestra-kv-value {
+  font-weight: 600;
+}
+
+.orchestra-note {
+  margin-top: 12px;
+  font-size: 12px;
+  opacity: 0.6;
+}

package/src/ui/server.mjs

@@ -0,0 +1,112 @@
+import http from 'http';
+import fs from 'fs/promises';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { readHandoffSnapshot, readUiState } from './state.mjs';
+import { handleEvents } from './events.mjs';
+import { runUiCommand } from './commands.mjs';
+
+const HOST = '127.0.0.1';
+const DEFAULT_PORT = 4317;
+const PUBLIC_DIR = path.join(path.dirname(fileURLToPath(import.meta.url)), 'public');
+
+const MIME_TYPES = {
+  '.html': 'text/html; charset=utf-8',
+  '.js': 'text/javascript; charset=utf-8',
+  '.css': 'text/css; charset=utf-8',
+  '.json': 'application/json; charset=utf-8'
+};
+
+function sendJson(res, status, value) {
+  res.writeHead(status, { 'Content-Type': 'application/json; charset=utf-8' });
+  res.end(JSON.stringify(value));
+}
+
+async function readRequestJson(req) {
+  let body = '';
+  for await (const chunk of req) {
+    body += chunk.toString();
+    if (body.length > 4096) throw new Error('Request body too large');
+  }
+  return body ? JSON.parse(body) : {};
+}
+
+async function serveStatic(req, res) {
+  const url = new URL(req.url, 'http://' + HOST);
+  const pathname = url.pathname === '/' ? '/index.html' : url.pathname;
+  const target = path.normalize(path.join(PUBLIC_DIR, pathname));
+  if (!target.startsWith(PUBLIC_DIR)) {
+    res.writeHead(403);
+    res.end('Forbidden');
+    return;
+  }
+  try {
+    const content = await fs.readFile(target);
+    res.writeHead(200, { 'Content-Type': MIME_TYPES[path.extname(target)] || 'application/octet-stream' });
+    res.end(content);
+  } catch (error) {
+    res.writeHead(error.code === 'ENOENT' ? 404 : 500);
+    res.end(error.code === 'ENOENT' ? 'Not found' : error.message);
+  }
+}
+
+export function createUiServer(projectRoot) {
+  return http.createServer(async (req, res) => {
+    try {
+      const url = new URL(req.url, 'http://' + HOST);
+      if (req.method === 'GET' && url.pathname === '/api/state') {
+        return sendJson(res, 200, await readUiState(projectRoot));
+      }
+      if (req.method === 'GET' && url.pathname === '/api/handoff') {
+        return sendJson(res, 200, await readHandoffSnapshot(projectRoot));
+      }
+      if (req.method === 'GET' && url.pathname === '/api/events') {
+        return handleEvents(req, res, projectRoot);
+      }
+      if (req.method === 'POST' && url.pathname === '/api/command') {
+        let body;
+        try {
+          body = await readRequestJson(req);
+        } catch (error) {
+          return sendJson(res, 400, { error: 'Invalid JSON body: ' + error.message });
+        }
+        if (!body.command || typeof body.command !== 'string') {
+          return sendJson(res, 400, { error: 'Missing command' });
+        }
+        try {
+          return sendJson(res, 200, await runUiCommand(body.command, body, projectRoot));
+        } catch (error) {
+          return sendJson(res, /Unknown UI command|taskId must be a positive integer/.test(error.message) ? 400 : 500, { error: error.message });
+        }
+      }
+      if (req.method === 'GET') return serveStatic(req, res);
+      sendJson(res, 405, { error: 'Method not allowed' });
+    } catch (error) {
+      sendJson(res, 500, { error: error.message });
+    }
+  });
+}
+
+export async function startUiServer({ projectRoot = process.cwd(), port = DEFAULT_PORT } = {}) {
+  let currentPort = port;
+  const maxAttempts = port === 0 ? 1 : 50;
+  while (maxAttempts === 1 || currentPort < port + 50) {
+    const server = createUiServer(projectRoot);
+    try {
+      const actualPort = await new Promise((resolve, reject) => {
+        server.once('error', reject);
+        server.listen(currentPort, HOST, () => {
+          const address = server.address();
+          resolve(address && typeof address === 'object' ? address.port : currentPort);
+        });
+      });
+      return { server, host: HOST, port: actualPort, url: 'http://' + HOST + ':' + actualPort };
+    } catch (error) {
+      server.close();
+      if (error.code !== 'EADDRINUSE') throw error;
+      currentPort++;
+      if (maxAttempts === 1) throw error;
+    }
+  }
+  throw new Error('No free Maestro UI port found near ' + port);
+}