@longshot/cli 0.0.1

package/dist/views/services.js

@@ -0,0 +1,230 @@
+import { layout } from "./layout.js";
+function escapeHtml(str) {
+    return str
+        .replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;");
+}
+function statusDot(status) {
+    const colors = {
+        running: "var(--accent-green)",
+        stopped: "var(--text-muted)",
+        crashed: "var(--accent-red)",
+    };
+    return `<span class="service-dot" style="background:${colors[status]}"></span>`;
+}
+function formatUptime(startedAt) {
+    const ms = Date.now() - new Date(startedAt).getTime();
+    const seconds = Math.floor(ms / 1000);
+    if (seconds < 60)
+        return `${seconds}s`;
+    const minutes = Math.floor(seconds / 60);
+    if (minutes < 60)
+        return `${minutes}m`;
+    const hours = Math.floor(minutes / 60);
+    const mins = minutes % 60;
+    return `${hours}h ${mins}m`;
+}
+function renderServiceCard(service) {
+    const statusClass = `service-status-${service.status}`;
+    const actions = [];
+    if (service.status === "stopped" || service.status === "crashed") {
+        actions.push(`<button class="btn btn-small btn-service-start" onclick="startService('${service.id}')">Start</button>`);
+    }
+    if (service.status === "running") {
+        actions.push(`<button class="btn btn-small btn-service-stop" onclick="stopService('${service.id}')">Stop</button>`);
+        actions.push(`<button class="btn btn-small" onclick="restartService('${service.id}')">Restart</button>`);
+    }
+    actions.push(`<a href="/services/${service.id}/logs" class="btn btn-small">Logs</a>`);
+    if (service.status !== "running") {
+        actions.push(`<button class="btn btn-small" onclick="editService('${service.id}')">Edit</button>`);
+        actions.push(`<button class="btn btn-small btn-service-delete" onclick="deleteService('${service.id}')">Delete</button>`);
+    }
+    const statusInfo = service.status === "running" && service.startedAt
+        ? `<span class="service-uptime">up ${formatUptime(service.startedAt)}</span>`
+        : service.status === "crashed" && service.exitCode !== undefined
+            ? `<span class="service-exit-code">exit ${service.exitCode}</span>`
+            : "";
+    return `<div class="service-card ${statusClass}" data-id="${service.id}" data-name="${escapeHtml(service.name)}" data-command="${escapeHtml(service.command)}" data-cwd="${escapeHtml(service.cwd || "")}">
+    <div class="service-card-top">
+      ${statusDot(service.status)}
+      <span class="service-name">${escapeHtml(service.name)}</span>
+      <span class="service-status-label">${service.status}</span>
+      ${statusInfo}
+    </div>
+    <div class="service-command">${escapeHtml(service.command)}</div>
+    <div class="service-actions">${actions.join("\n")}</div>
+  </div>`;
+}
+export function servicesPage(services) {
+    const body = `
+    <div class="services-container">
+      <div class="services-header">
+        <h1>Services</h1>
+        <button class="btn btn-primary btn-small" id="add-service-btn" onclick="showAddForm()">Add Service</button>
+      </div>
+
+      <div class="service-form" id="service-form" style="display:none">
+        <input type="hidden" id="service-edit-id" value="">
+        <input type="text" id="service-name" placeholder="Service name" class="service-input">
+        <input type="text" id="service-command" placeholder="Command (e.g. npm run dev)" class="service-input">
+        <input type="text" id="service-cwd" placeholder="Working directory (optional)" class="service-input">
+        <div class="service-form-actions">
+          <button class="btn btn-primary btn-small" onclick="saveService()">Save</button>
+          <button class="btn btn-small" onclick="hideForm()">Cancel</button>
+        </div>
+      </div>
+
+      <div class="service-list" id="service-list">
+        ${services.length
+        ? services.map(renderServiceCard).join("\n")
+        : '<p class="empty-state">No services defined. Add one to get started.</p>'}
+      </div>
+    </div>
+    <script>
+      function showAddForm() {
+        document.getElementById('service-edit-id').value = '';
+        document.getElementById('service-name').value = '';
+        document.getElementById('service-command').value = '';
+        document.getElementById('service-cwd').value = '';
+        document.getElementById('service-form').style.display = 'block';
+        document.getElementById('service-name').focus();
+      }
+
+      function editService(id) {
+        const card = document.querySelector('[data-id="' + id + '"]');
+        document.getElementById('service-edit-id').value = id;
+        document.getElementById('service-name').value = card.dataset.name;
+        document.getElementById('service-command').value = card.dataset.command;
+        document.getElementById('service-cwd').value = card.dataset.cwd;
+        document.getElementById('service-form').style.display = 'block';
+        document.getElementById('service-name').focus();
+      }
+
+      function hideForm() {
+        document.getElementById('service-form').style.display = 'none';
+      }
+
+      async function saveService() {
+        const editId = document.getElementById('service-edit-id').value;
+        const name = document.getElementById('service-name').value.trim();
+        const command = document.getElementById('service-command').value.trim();
+        const cwd = document.getElementById('service-cwd').value.trim();
+        if (!name || !command) return;
+
+        const body = { name, command, cwd: cwd || undefined };
+        if (editId) {
+          await fetch('/api/services/' + editId, {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(body),
+          });
+        } else {
+          await fetch('/api/services', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(body),
+          });
+        }
+        location.reload();
+      }
+
+      async function startService(id) {
+        const btn = event.target;
+        btn.disabled = true;
+        btn.textContent = 'Starting...';
+        await fetch('/api/services/' + id + '/start', { method: 'POST' });
+        location.reload();
+      }
+
+      async function stopService(id) {
+        const btn = event.target;
+        btn.disabled = true;
+        btn.textContent = 'Stopping...';
+        await fetch('/api/services/' + id + '/stop', { method: 'POST' });
+        location.reload();
+      }
+
+      async function restartService(id) {
+        const btn = event.target;
+        btn.disabled = true;
+        btn.textContent = '...';
+        await fetch('/api/services/' + id + '/restart', { method: 'POST' });
+        location.reload();
+      }
+
+      async function deleteService(id) {
+        if (!confirm('Delete this service?')) return;
+        await fetch('/api/services/' + id, { method: 'DELETE' });
+        location.reload();
+      }
+
+      // Poll for status updates every 5s
+      setInterval(async () => {
+        try {
+          const resp = await fetch('/api/services');
+          const services = await resp.json();
+          // Update status dots and labels without full reload
+          for (const s of services) {
+            const card = document.querySelector('[data-id="' + s.id + '"]');
+            if (!card) continue;
+            const dot = card.querySelector('.service-dot');
+            const label = card.querySelector('.service-status-label');
+            const colors = { running: 'var(--accent-green)', stopped: 'var(--text-muted)', crashed: 'var(--accent-red)' };
+            if (dot) dot.style.background = colors[s.status] || colors.stopped;
+            if (label) label.textContent = s.status;
+          }
+        } catch {}
+      }, 5000);
+    </script>`;
+    return layout("Services", "services", body);
+}
+export function serviceLogsPage(service, logs) {
+    const body = `
+    <div class="service-logs-container">
+      <div class="service-logs-header">
+        <a href="/services" class="back-link">Services</a>
+        <h1>${escapeHtml(service.name)} — Logs</h1>
+        <div class="service-logs-meta">
+          ${statusDot(service.status)}
+          <span>${service.status}</span>
+          <span class="service-command-small">${escapeHtml(service.command)}</span>
+        </div>
+      </div>
+      <div class="service-logs-actions">
+        <button class="btn btn-small" onclick="clearLogs()">Clear Logs</button>
+        <label class="service-autoscroll-label">
+          <input type="checkbox" id="autoscroll" checked> Auto-scroll
+        </label>
+      </div>
+      <pre class="service-logs" id="logs">${escapeHtml(logs)}</pre>
+    </div>
+    <script>
+      const logsEl = document.getElementById('logs');
+      const autoscrollEl = document.getElementById('autoscroll');
+
+      function scrollToBottom() {
+        if (autoscrollEl.checked) {
+          logsEl.scrollTop = logsEl.scrollHeight;
+        }
+      }
+      scrollToBottom();
+
+      // Poll for new log content
+      setInterval(async () => {
+        try {
+          const resp = await fetch('/api/services/${service.id}/logs');
+          const data = await resp.json();
+          logsEl.textContent = data.logs;
+          scrollToBottom();
+        } catch {}
+      }, 2000);
+
+      async function clearLogs() {
+        await fetch('/api/services/${service.id}/logs/clear', { method: 'POST' });
+        logsEl.textContent = '';
+      }
+    </script>`;
+    return layout("Logs — " + service.name, "services", body);
+}

package/dist/views/spec.js

@@ -0,0 +1,18 @@
+import { marked } from "marked";
+import { layout } from "./layout.js";
+export function specPage(specContent) {
+    const rendered = specContent
+        ? marked.parse(specContent, { async: false })
+        : '<p class="empty-state">No spec yet. Start chatting to build one.</p>';
+    const body = `
+    <div class="spec-container">
+      <div class="spec-header">
+        <h1>Project Spec</h1>
+        <button class="btn btn-small" onclick="location.reload()">Refresh</button>
+      </div>
+      <div class="spec-content">
+        ${rendered}
+      </div>
+    </div>`;
+    return layout("Spec", "spec", body);
+}