superacli 1.0.0

package/server/views/command-edit.ejs

@@ -0,0 +1,110 @@
+<%- include("partials/head", { title: command ? "Edit Command" : "New Command" }) %>
+
+<div class="max-w-2xl">
+  <h1 class="text-2xl font-bold mb-6"><%= command ? "Edit Command" : "New Command" %></h1>
+
+  <div id="cmd-editor">
+    <form @submit.prevent="save" class="flex flex-col gap-4">
+
+      <div class="grid grid-cols-3 gap-4">
+        <div class="form-control">
+          <label class="label"><span class="label-text">Namespace</span></label>
+          <input v-model="form.namespace" class="input input-bordered input-sm" required placeholder="e.g. referential">
+        </div>
+        <div class="form-control">
+          <label class="label"><span class="label-text">Resource</span></label>
+          <input v-model="form.resource" class="input input-bordered input-sm" required placeholder="e.g. users">
+        </div>
+        <div class="form-control">
+          <label class="label"><span class="label-text">Action</span></label>
+          <input v-model="form.action" class="input input-bordered input-sm" required placeholder="e.g. fetch">
+        </div>
+      </div>
+
+      <div class="form-control">
+        <label class="label"><span class="label-text">Description</span></label>
+        <input v-model="form.description" class="input input-bordered input-sm" placeholder="What does this command do?">
+      </div>
+
+      <div class="form-control">
+        <label class="label"><span class="label-text">Adapter</span></label>
+        <select v-model="form.adapter" class="select select-bordered select-sm">
+          <option value="http">http</option>
+          <option value="openapi">openapi</option>
+          <option value="mcp">mcp</option>
+          <option value="shell">shell</option>
+          <option value="custom">custom</option>
+        </select>
+      </div>
+
+      <div class="form-control">
+        <label class="label"><span class="label-text">Adapter Config (JSON)</span></label>
+        <textarea v-model="adapterConfigStr" class="textarea textarea-bordered textarea-sm font-mono" rows="4" placeholder='{"method":"GET","url":"https://..."}'></textarea>
+      </div>
+
+      <!-- Arguments -->
+      <div class="form-control">
+        <label class="label"><span class="label-text">Arguments</span></label>
+        <div v-for="(arg, i) in form.args" :key="i" class="flex gap-2 mb-2 items-center">
+          <input v-model="arg.name" class="input input-bordered input-xs flex-1" placeholder="name">
+          <select v-model="arg.type" class="select select-bordered select-xs">
+            <option value="string">string</option>
+            <option value="number">number</option>
+            <option value="boolean">boolean</option>
+          </select>
+          <label class="cursor-pointer flex items-center gap-1">
+            <input type="checkbox" v-model="arg.required" class="checkbox checkbox-xs">
+            <span class="text-xs">req</span>
+          </label>
+          <button type="button" @click="form.args.splice(i,1)" class="btn btn-xs btn-ghost text-error">✕</button>
+        </div>
+        <button type="button" @click="form.args.push({name:'',type:'string',required:false})" class="btn btn-xs btn-outline btn-primary w-fit">+ Add Arg</button>
+      </div>
+
+      <div class="flex gap-2 mt-4">
+        <button type="submit" class="btn btn-primary btn-sm">{{ editId ? 'Update' : 'Create' }}</button>
+        <a href="/api/commands" class="btn btn-ghost btn-sm">Cancel</a>
+      </div>
+
+    </form>
+  </div>
+</div>
+
+<script>
+  const editData = <%- JSON.stringify(command) %>;
+
+  Vue.createApp({
+    data() {
+      return {
+        editId: editData ? editData._id : null,
+        form: {
+          namespace: editData ? editData.namespace : '',
+          resource: editData ? editData.resource : '',
+          action: editData ? editData.action : '',
+          description: editData ? editData.description : '',
+          adapter: editData ? editData.adapter : 'http',
+          args: editData && editData.args ? editData.args : []
+        },
+        adapterConfigStr: editData && editData.adapterConfig ? JSON.stringify(editData.adapterConfig, null, 2) : '{}'
+      }
+    },
+    methods: {
+      async save() {
+        const body = {
+          ...this.form,
+          adapterConfig: JSON.parse(this.adapterConfigStr || '{}')
+        }
+        const url = this.editId ? '/api/commands/' + this.editId : '/api/commands'
+        const method = this.editId ? 'PUT' : 'POST'
+        await fetch(url, {
+          method,
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        })
+        window.location.href = '/api/commands'
+      }
+    }
+  }).mount('#cmd-editor')
+</script>
+
+<%- include("partials/foot") %>

package/server/views/commands.ejs

@@ -0,0 +1,49 @@
+<%- include("partials/head", { title: "Commands" }) %>
+
+<div class="flex justify-between items-center mb-6">
+  <h1 class="text-2xl font-bold">Commands</h1>
+  <a href="/api/commands/new" class="btn btn-primary btn-sm">+ Create Command</a>
+</div>
+
+<div class="overflow-x-auto">
+  <table class="table table-zebra w-full">
+    <thead>
+      <tr>
+        <th>Namespace</th>
+        <th>Resource</th>
+        <th>Action</th>
+        <th>Adapter</th>
+        <th>Description</th>
+        <th>Actions</th>
+      </tr>
+    </thead>
+    <tbody>
+      <% if (commands.length === 0) { %>
+        <tr><td colspan="6" class="text-center opacity-60">No commands yet. Create one to get started.</td></tr>
+      <% } %>
+      <% commands.forEach(c => { %>
+        <tr>
+          <td><span class="badge badge-outline"><%= c.namespace %></span></td>
+          <td><%= c.resource %></td>
+          <td><code><%= c.action %></code></td>
+          <td><span class="badge badge-ghost badge-sm"><%= c.adapter %></span></td>
+          <td class="max-w-xs truncate opacity-70"><%= c.description || '-' %></td>
+          <td class="flex gap-1">
+            <a href="/api/commands/<%= c._id %>/edit" class="btn btn-xs btn-outline">Edit</a>
+            <button onclick="deleteCommand('<%= c._id %>')" class="btn btn-xs btn-error btn-outline">Delete</button>
+          </td>
+        </tr>
+      <% }) %>
+    </tbody>
+  </table>
+</div>
+
+<script>
+async function deleteCommand(id) {
+  if (!confirm('Delete this command?')) return
+  await fetch('/api/commands/' + id, { method: 'DELETE' })
+  location.reload()
+}
+</script>
+
+<%- include("partials/foot") %>

package/server/views/jobs.ejs

@@ -0,0 +1,72 @@
+<%- include("partials/head", { title: "Jobs" }) %>
+
+<div id="jobs-app">
+  <div class="flex justify-between items-center mb-6">
+    <h1 class="text-2xl font-bold">Execution History</h1>
+    <button @click="loadStats" class="btn btn-ghost btn-sm">📊 Stats</button>
+  </div>
+
+  <!-- Stats panel -->
+  <div v-if="stats" class="grid grid-cols-4 gap-4 mb-6">
+    <div class="stat bg-base-300 rounded-lg p-4">
+      <div class="stat-title">Total</div>
+      <div class="stat-value text-primary">{{ stats.total }}</div>
+    </div>
+    <div class="stat bg-base-300 rounded-lg p-4">
+      <div class="stat-title">Success</div>
+      <div class="stat-value text-success">{{ stats.success }}</div>
+    </div>
+    <div class="stat bg-base-300 rounded-lg p-4">
+      <div class="stat-title">Failed</div>
+      <div class="stat-value text-error">{{ stats.failed }}</div>
+    </div>
+    <div class="stat bg-base-300 rounded-lg p-4">
+      <div class="stat-title">Failure Rate</div>
+      <div class="stat-value">{{ stats.failure_rate }}</div>
+    </div>
+  </div>
+
+  <div class="overflow-x-auto">
+    <table class="table table-zebra w-full table-sm">
+      <thead>
+        <tr>
+          <th>Command</th>
+          <th>Status</th>
+          <th>Duration</th>
+          <th>Timestamp</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-if="jobs.length===0"><td colspan="4" class="text-center opacity-60">No executions recorded yet.</td></tr>
+        <tr v-for="j in jobs" :key="j._id">
+          <td><code>{{ j.command }}</code></td>
+          <td>
+            <span class="badge badge-sm" :class="j.status==='success' ? 'badge-success' : 'badge-error'">
+              {{ j.status }}
+            </span>
+          </td>
+          <td>{{ j.duration_ms }}ms</td>
+          <td class="opacity-70">{{ new Date(j.timestamp).toLocaleString() }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+
+<script>
+  const initialJobs = <%- JSON.stringify(jobs) %>;
+
+  Vue.createApp({
+    data() {
+      return { jobs: initialJobs, stats: null }
+    },
+    methods: {
+      async loadStats() {
+        const r = await fetch('/api/jobs/stats')
+        this.stats = await r.json()
+      }
+    }
+  }).mount('#jobs-app')
+</script>
+
+<%- include("partials/foot") %>

package/server/views/layout.ejs

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>SUPERCLI — Command Control Plane</title>
+  <link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.2/dist/full.min.css" rel="stylesheet">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
+  <style>
+    body { min-height: 100vh; }
+    .nav-active { background: oklch(var(--p)/0.15); color: oklch(var(--p)); }
+  </style>
+</head>
+<body class="bg-base-200">
+
+  <div class="flex min-h-screen">
+    <!-- Sidebar -->
+    <aside class="w-64 bg-base-300 p-4 flex flex-col gap-2 border-r border-base-content/10">
+      <a href="/api/commands" class="text-xl font-bold px-3 py-2 mb-4 flex items-center gap-2">
+        <span class="text-primary">⚡</span> SUPERCLI
+      </a>
+      <a href="/api/commands" class="btn btn-ghost justify-start <%= typeof commands !== 'undefined' ? 'nav-active' : '' %>">
+        📋 Commands
+      </a>
+      <a href="/api/specs" class="btn btn-ghost justify-start <%= typeof specs !== 'undefined' ? 'nav-active' : '' %>">
+        📄 OpenAPI Specs
+      </a>
+      <a href="/api/mcp" class="btn btn-ghost justify-start <%= typeof servers !== 'undefined' ? 'nav-active' : '' %>">
+        🔌 MCP Servers
+      </a>
+    </aside>
+
+    <!-- Main content -->
+    <main class="flex-1 p-8">
+      <%- body %>
+    </main>
+  </div>
+
+  <script src="/static/app.js"></script>
+</body>
+</html>

package/server/views/mcp.ejs

@@ -0,0 +1,80 @@
+<%- include("partials/head", { title: "MCP Servers" }) %>
+
+<div id="mcp-app">
+  <div class="flex justify-between items-center mb-6">
+    <h1 class="text-2xl font-bold">MCP Servers</h1>
+    <button @click="showForm=!showForm" class="btn btn-primary btn-sm">+ Add Server</button>
+  </div>
+
+  <!-- Add form -->
+  <div v-if="showForm" class="card bg-base-300 p-4 mb-6">
+    <form @submit.prevent="create" class="flex gap-4 items-end">
+      <div class="form-control flex-1">
+        <label class="label"><span class="label-text">Name</span></label>
+        <input v-model="form.name" class="input input-bordered input-sm" required placeholder="e.g. ai-tools">
+      </div>
+      <div class="form-control flex-1">
+        <label class="label"><span class="label-text">URL</span></label>
+        <input v-model="form.url" class="input input-bordered input-sm" required placeholder="https://mcp.example.com">
+      </div>
+      <button type="submit" class="btn btn-primary btn-sm">Save</button>
+      <button type="button" @click="showForm=false" class="btn btn-ghost btn-sm">Cancel</button>
+    </form>
+  </div>
+
+  <div class="overflow-x-auto">
+    <table class="table table-zebra w-full">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>URL</th>
+          <th>Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-if="servers.length===0"><td colspan="3" class="text-center opacity-60">No MCP servers registered.</td></tr>
+        <tr v-for="s in servers" :key="s._id">
+          <td><code>{{ s.name }}</code></td>
+          <td class="max-w-xs truncate opacity-70">{{ s.url }}</td>
+          <td>
+            <button @click="remove(s._id)" class="btn btn-xs btn-error btn-outline">Delete</button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+
+<script>
+  const initialServers = <%- JSON.stringify(servers) %>;
+
+  Vue.createApp({
+    data() {
+      return {
+        servers: initialServers,
+        showForm: false,
+        form: { name: '', url: '' }
+      }
+    },
+    methods: {
+      async create() {
+        const r = await fetch('/api/mcp', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(this.form)
+        })
+        const doc = await r.json()
+        this.servers.push(doc)
+        this.form = { name: '', url: '' }
+        this.showForm = false
+      },
+      async remove(id) {
+        if (!confirm('Delete this server?')) return
+        await fetch('/api/mcp/' + id, { method: 'DELETE' })
+        this.servers = this.servers.filter(s => s._id !== id)
+      }
+    }
+  }).mount('#mcp-app')
+</script>
+
+<%- include("partials/foot") %>

package/server/views/partials/foot.ejs

@@ -0,0 +1,5 @@
+    </main>
+  </div>
+  <script src="/static/app.js"></script>
+</body>
+</html>

package/server/views/partials/head.ejs

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>SUPERCLI — <%= typeof title !== 'undefined' ? title : 'Control Plane' %></title>
+  <link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.2/dist/full.min.css" rel="stylesheet">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
+  <style>
+    .nav-active { background: oklch(var(--p)/0.15); color: oklch(var(--p)); }
+  </style>
+</head>
+<body class="bg-base-200 min-h-screen">
+  <div class="flex min-h-screen">
+    <!-- Sidebar -->
+    <aside class="w-64 bg-base-300 p-4 flex flex-col gap-2 border-r border-base-content/10">
+      <a href="/api/commands" class="text-xl font-bold px-3 py-2 mb-4 flex items-center gap-2">
+        <span class="text-primary">⚡</span> SUPERCLI
+      </a>
+      <a href="/api/commands" class="btn btn-ghost justify-start" id="nav-commands">📋 Commands</a>
+      <a href="/api/specs" class="btn btn-ghost justify-start" id="nav-specs">📄 OpenAPI Specs</a>
+      <a href="/api/mcp" class="btn btn-ghost justify-start" id="nav-mcp">🔌 MCP Servers</a>
+      <a href="/api/jobs" class="btn btn-ghost justify-start" id="nav-jobs">📊 Jobs</a>
+    </aside>
+    <!-- Main content -->
+    <main class="flex-1 p-8">

package/server/views/specs.ejs

@@ -0,0 +1,91 @@
+<%- include("partials/head", { title: "OpenAPI Specs" }) %>
+
+<div id="specs-app">
+  <div class="flex justify-between items-center mb-6">
+    <h1 class="text-2xl font-bold">OpenAPI Specs</h1>
+    <button @click="showForm=!showForm" class="btn btn-primary btn-sm">+ Add Spec</button>
+  </div>
+
+  <!-- Add form -->
+  <div v-if="showForm" class="card bg-base-300 p-4 mb-6">
+    <form @submit.prevent="create" class="flex gap-4 items-end">
+      <div class="form-control flex-1">
+        <label class="label"><span class="label-text">Name</span></label>
+        <input v-model="form.name" class="input input-bordered input-sm" required placeholder="e.g. referential-api">
+      </div>
+      <div class="form-control flex-1">
+        <label class="label"><span class="label-text">URL</span></label>
+        <input v-model="form.url" class="input input-bordered input-sm" required placeholder="https://api.example.com/openapi.json">
+      </div>
+      <div class="form-control">
+        <label class="label"><span class="label-text">Auth</span></label>
+        <select v-model="form.auth" class="select select-bordered select-sm">
+          <option value="none">none</option>
+          <option value="oauth">oauth</option>
+          <option value="apiKey">apiKey</option>
+          <option value="jwt">jwt</option>
+        </select>
+      </div>
+      <button type="submit" class="btn btn-primary btn-sm">Save</button>
+      <button type="button" @click="showForm=false" class="btn btn-ghost btn-sm">Cancel</button>
+    </form>
+  </div>
+
+  <div class="overflow-x-auto">
+    <table class="table table-zebra w-full">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>URL</th>
+          <th>Auth</th>
+          <th>Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-if="specs.length===0"><td colspan="4" class="text-center opacity-60">No specs registered.</td></tr>
+        <tr v-for="s in specs" :key="s._id">
+          <td><code>{{ s.name }}</code></td>
+          <td class="max-w-xs truncate opacity-70">{{ s.url }}</td>
+          <td><span class="badge badge-ghost badge-sm">{{ s.auth }}</span></td>
+          <td>
+            <button @click="remove(s._id)" class="btn btn-xs btn-error btn-outline">Delete</button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+
+<script>
+  const initialSpecs = <%- JSON.stringify(specs) %>;
+
+  Vue.createApp({
+    data() {
+      return {
+        specs: initialSpecs,
+        showForm: false,
+        form: { name: '', url: '', auth: 'none' }
+      }
+    },
+    methods: {
+      async create() {
+        const r = await fetch('/api/specs', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(this.form)
+        })
+        const doc = await r.json()
+        this.specs.push(doc)
+        this.form = { name: '', url: '', auth: 'none' }
+        this.showForm = false
+      },
+      async remove(id) {
+        if (!confirm('Delete this spec?')) return
+        await fetch('/api/specs/' + id, { method: 'DELETE' })
+        this.specs = this.specs.filter(s => s._id !== id)
+      }
+    }
+  }).mount('#specs-app')
+</script>
+
+<%- include("partials/foot") %>