superacli 1.1.22 → 1.1.26

package/server/views/mcp.ejs

@@ -9,30 +9,62 @@
     <button @click="showForm=!showForm" class="btn btn-primary">+ Add Server</button>
   </div>
 
-  <!-- Add form -->
+  <!-- Add/Edit form -->
   <div v-if="showForm" class="bento-card p-6 mb-6">
-    <form @submit.prevent="create">
+    <form @submit.prevent="editing ? update() : create()">
       <div class="flex flex-col md:flex-row gap-4 items-end mb-4">
         <div class="flex-1 w-full">
           <label class="block text-xs font-semibold text-[#787774] uppercase tracking-wider mb-2">Name</label>
           <input v-model="form.name" class="w-full px-4 py-3 bg-[#F7F6F3] border border-[#EAEAEA] rounded-md text-[#111111] focus:outline-none focus:border-[#111111] transition-colors" required placeholder="e.g. context-mode">
         </div>
-        <div class="flex-1 w-full">
-          <label class="block text-xs font-semibold text-[#787774] uppercase tracking-wider mb-2">URL (HTTP MCP)</label>
+      </div>
+
+      <div class="mb-4">
+        <label class="block text-xs font-semibold text-[#787774] uppercase tracking-wider mb-3">Transport Mode</label>
+        <div class="flex gap-6">
+          <label class="flex items-center gap-2 cursor-pointer">
+            <input type="radio" v-model="form.transport" value="http" class="w-4 h-4 accent-[#111111]">
+            <span class="text-sm text-[#2F3437]">SSE/HTTP</span>
+          </label>
+          <label class="flex items-center gap-2 cursor-pointer">
+            <input type="radio" v-model="form.transport" value="stdio" class="w-4 h-4 accent-[#111111]">
+            <span class="text-sm text-[#2F3437]">STDIO</span>
+          </label>
+        </div>
+      </div>
+
+      <!-- SSE/HTTP fields -->
+      <div v-if="form.transport === 'http'" class="space-y-4">
+        <div>
+          <label class="block text-xs font-semibold text-[#787774] uppercase tracking-wider mb-2">URL</label>
           <input v-model="form.url" class="w-full px-4 py-3 bg-[#F7F6F3] border border-[#EAEAEA] rounded-md text-[#111111] focus:outline-none focus:border-[#111111] transition-colors" placeholder="https://mcp.example.com">
+          <p class="text-xs text-[#787774] mt-1">Uses SSE with HTTP fallback</p>
         </div>
-        <div class="flex-1 w-full">
-          <label class="block text-xs font-semibold text-[#787774] uppercase tracking-wider mb-2">Command (stdio MCP)</label>
-          <input v-model="form.command" class="w-full px-4 py-3 bg-[#F7F6F3] border border-[#EAEAEA] rounded-md text-[#111111] focus:outline-none focus:border-[#111111] transition-colors" placeholder="e.g. context-mode">
+        <div>
+          <label class="block text-xs font-semibold text-[#787774] uppercase tracking-wider mb-2">Timeout (ms)</label>
+          <input v-model="form.timeout_ms" type="number" class="w-full px-4 py-3 bg-[#F7F6F3] border border-[#EAEAEA] rounded-md text-[#111111] focus:outline-none focus:border-[#111111] transition-colors" placeholder="30000">
+          <p class="text-xs text-[#787774] mt-1">Default: 30000ms (30 seconds)</p>
         </div>
       </div>
-      <div class="flex gap-4 items-center">
+
+      <!-- STDIO fields -->
+      <div v-if="form.transport === 'stdio'" class="space-y-4">
+        <div>
+          <label class="block text-xs font-semibold text-[#787774] uppercase tracking-wider mb-2">Command</label>
+          <input v-model="form.command" class="w-full px-4 py-3 bg-[#F7F6F3] border border-[#EAEAEA] rounded-md text-[#111111] focus:outline-none focus:border-[#111111] transition-colors" placeholder="e.g. context-mode">
+        </div>
         <label class="flex items-center gap-2 cursor-pointer">
           <input type="checkbox" v-model="form.stateful" class="w-4 h-4 accent-[#111111]">
-          <span class="text-sm text-[#2F3437]">Stateful (requires daemon)</span>
+          <div class="flex flex-col">
+            <span class="text-sm text-[#2F3437]">Stateful (requires daemon)</span>
+            <span class="text-xs text-[#787774]">Daemon runs on CLI side, starts when command is executed via CLI (not server)</span>
+          </div>
         </label>
-        <button type="submit" class="btn btn-primary">Save</button>
-        <button type="button" @click="showForm=false" class="btn">Cancel</button>
+      </div>
+
+      <div class="flex gap-4 items-center mt-4">
+        <button type="submit" class="btn btn-primary">{{ editing ? 'Update' : 'Save' }}</button>
+        <button type="button" @click="cancelEdit" class="btn">Cancel</button>
       </div>
     </form>
   </div>
@@ -42,21 +74,45 @@
       <thead>
         <tr class="border-b border-[#EAEAEA] bg-[#F7F6F3]">
           <th class="px-6 py-3 text-left text-xs font-semibold text-[#787774] uppercase tracking-wider">Name</th>
+          <th class="px-6 py-3 text-left text-xs font-semibold text-[#787774] uppercase tracking-wider">Plugin</th>
           <th class="px-6 py-3 text-left text-xs font-semibold text-[#787774] uppercase tracking-wider">Source</th>
           <th class="px-6 py-3 text-left text-xs font-semibold text-[#787774] uppercase tracking-wider">Type</th>
           <th class="px-6 py-3 text-left text-xs font-semibold text-[#787774] uppercase tracking-wider">Actions</th>
         </tr>
       </thead>
       <tbody>
-        <tr v-if="servers.length===0"><td colspan="4" class="px-6 py-12 text-center text-[#787774]">No MCP servers registered.</td></tr>
+        <tr v-if="servers.length===0"><td colspan="5" class="px-6 py-12 text-center text-[#787774]">No MCP servers registered.</td></tr>
         <tr v-for="s in servers" :key="s._id" class="border-b border-[#EAEAEA] hover:bg-[#F7F6F3] transition-colors">
-          <td class="px-6 py-4"><code class="mono-text text-sm text-[#1F6C9F]">{{ s.name }}</code></td>
+          <td class="px-6 py-4">
+            <code class="mono-text text-sm text-[#1F6C9F]">{{ s.displayName || s.name }}</code>
+            <div v-if="getUsedCommands(s).length > 0" class="mt-1 text-xs text-[#787774]">
+              used by: {{ getUsedCommands(s).map(c => `${c.namespace}.${c.resource}.${c.action}`).join(', ') }}
+            </div>
+            <div v-if="s.clientId" class="mt-1 text-xs text-[#787774]">
+              synced by: {{ s.clientId.substring(0, 8) }}...
+            </div>
+          </td>
+          <td class="px-6 py-4">
+            <span v-if="s.origin" class="px-2 py-1 rounded-full text-xs font-semibold" :class="{
+              'bg-blue-100 text-blue-700': s.origin === 'cli',
+              'bg-green-100 text-green-700': s.origin === 'server',
+              'bg-gray-100 text-gray-700': s.origin === 'manual'
+            }">{{ s.origin }}</span>
+            <span v-else class="text-xs text-[#787774]">manual</span>
+          </td>
           <td class="px-6 py-4 max-w-xs truncate text-[#2F3437]">{{ s.url || s.command || '' }}</td>
           <td class="px-6 py-4">
             <span v-if="s.stateful" class="badge bg-[#111111] text-white">stateful</span>
-            <span v-else class="badge">{{ s.url ? 'http' : 'stdio' }}</span>
+            <span v-else class="badge">{{ s.url ? 'sse/http' : 'stdio' }}</span>
+            <span v-if="s.url && s.status" class="ml-2 text-xs" :class="{'text-green-600': s.status === 'alive', 'text-red-600': s.status === 'error'}">
+              {{ s.status === 'alive' ? '✓' : '✗' }} {{ s.lastCheck }}
+            </span>
           </td>
           <td class="px-6 py-4">
+            <button v-if="s.url" @click="check(s)" :disabled="s.checking" class="btn text-xs border-green-200 text-green-600 hover:bg-green-50 hover:border-green-300 mr-2" :class="{'opacity-50': s.checking}">
+              {{ s.checking ? 'Checking...' : 'Check' }}
+            </button>
+            <button @click="edit(s)" class="btn text-xs border-blue-200 text-blue-600 hover:bg-blue-50 hover:border-blue-300 mr-2">Edit</button>
             <button @click="remove(s._id)" class="btn text-xs border-red-200 text-red-600 hover:bg-red-50 hover:border-red-300">Delete</button>
           </td>
         </tr>
@@ -72,16 +128,84 @@
     data() {
       return {
         servers: initialServers,
+        commands: [],
         showForm: false,
-        form: { name: '', url: '', command: '', stateful: false }
+        editing: false,
+        editId: null,
+        form: { name: '', transport: 'http', url: '', timeout_ms: 30000, command: '', stateful: false },
+        autoCheckInterval: null
+      }
+    },
+    mounted() {
+      // Start auto-check every minute for HTTP/SSE servers
+      this.autoCheckInterval = setInterval(() => {
+        this.autoCheck()
+      }, 60000)
+      
+      // Fetch commands
+      this.fetchCommands()
+      
+      // Refresh commands every 30 seconds
+      setInterval(() => {
+        this.fetchCommands()
+      }, 30000)
+    },
+    beforeUnmount() {
+      if (this.autoCheckInterval) {
+        clearInterval(this.autoCheckInterval)
       }
     },
     methods: {
+      async fetchCommands() {
+        try {
+          const res = await fetch('/api/commands?format=json')
+          const data = await res.json()
+          this.commands = data.commands || data || []
+        } catch (err) {
+          console.error('Failed to fetch commands:', err)
+        }
+      },
+      getUsedCommands(server) {
+        // Find commands that use this MCP server
+        return this.commands.filter(cmd => {
+          const adapterConfig = cmd.adapterConfig || {}
+          // Match by server name (for stdio) or URL (for HTTP)
+          if (server.url) {
+            return adapterConfig.url === server.url
+          } else {
+            return adapterConfig.server === server.name
+          }
+        })
+      },
+      edit(server) {
+        this.editing = true
+        this.editId = server._id
+        this.form = {
+          name: server.name,
+          transport: server.url ? 'http' : 'stdio',
+          url: server.url || '',
+          timeout_ms: server.timeout_ms || 30000,
+          command: server.command || '',
+          stateful: server.stateful || false
+        }
+        this.showForm = true
+      },
+      cancelEdit() {
+        this.editing = false
+        this.editId = null
+        this.form = { name: '', transport: 'http', url: '', timeout_ms: 30000, command: '', stateful: false }
+        this.showForm = false
+      },
       async create() {
         const payload = { name: this.form.name }
-        if (this.form.url) payload.url = this.form.url
-        if (this.form.command) payload.command = this.form.command
-        if (this.form.stateful) payload.stateful = true
+        if (this.form.transport === 'http') {
+          payload.url = this.form.url
+          if (this.form.timeout_ms) payload.timeout_ms = parseInt(this.form.timeout_ms)
+        }
+        if (this.form.transport === 'stdio') {
+          payload.command = this.form.command
+          if (this.form.stateful) payload.stateful = true
+        }
         const r = await fetch('/api/mcp', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
@@ -89,14 +213,147 @@
         })
         const doc = await r.json()
         this.servers.push(doc)
-        this.form = { name: '', url: '', command: '', stateful: false }
-        this.showForm = false
+        this.cancelEdit()
+        await this.fetchCommands()
+      },
+      async update() {
+        const payload = { name: this.form.name }
+        if (this.form.transport === 'http') {
+          payload.url = this.form.url
+          if (this.form.timeout_ms) payload.timeout_ms = parseInt(this.form.timeout_ms)
+        }
+        if (this.form.transport === 'stdio') {
+          payload.command = this.form.command
+          if (this.form.stateful) payload.stateful = true
+        }
+        const r = await fetch('/api/mcp/' + this.editId, {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(payload)
+        })
+        const doc = await r.json()
+        const idx = this.servers.findIndex(s => s._id === this.editId)
+        if (idx !== -1) this.servers[idx] = { ...this.servers[idx], ...payload, updatedAt: new Date() }
+        this.cancelEdit()
+        await this.fetchCommands()
+      },
+      async check(server) {
+        server.checking = true
+        let sessionId = null
+        try {
+          const timeout = server.timeout_ms || 10000
+          const controller = new AbortController()
+          const timeoutId = setTimeout(() => controller.abort(), timeout)
+          
+          // Try different endpoints
+          const endpoints = ['/mcp', '/tool', '/sse']
+          let response = null
+          
+          // First try without session (stateless)
+          for (const endpoint of endpoints) {
+            try {
+              response = await fetch(server.url + endpoint, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json', 'Accept': 'application/json, text/event-stream' },
+                body: JSON.stringify({ jsonrpc: '2.0', method: 'tools/list', id: 1 }),
+                signal: controller.signal
+              })
+              // Accept any response that returns data (SSE might not be 200)
+              if (response.status >= 200 && response.status < 500) break
+            } catch (e) {
+              // Try next endpoint
+            }
+          }
+          
+          // If stateless check failed with session error, try with session
+          if (!response || response.status >= 500) {
+            // Try to create a session
+            for (const endpoint of endpoints) {
+              try {
+                const sessionRes = await fetch(server.url + endpoint, {
+                  method: 'POST',
+                  headers: { 'Content-Type': 'application/json', 'Accept': 'application/json, text/event-stream' },
+                  body: JSON.stringify({ jsonrpc: '2.0', method: 'initialize', id: 1 }),
+                  signal: controller.signal
+                })
+                if (sessionRes.status >= 200 && sessionRes.status < 500) {
+                  const text = await sessionRes.text()
+                  // Extract session ID from response
+                  const match = text.match(/id:\s*([^\s_]+)/)
+                  if (match) {
+                    sessionId = match[1]
+                    break
+                  }
+                }
+              } catch (e) {
+                // Try next endpoint
+              }
+            }
+            
+            // If we got a session, try the check with it
+            if (sessionId) {
+              for (const endpoint of endpoints) {
+                try {
+                  response = await fetch(server.url + endpoint, {
+                    method: 'POST',
+                    headers: { 
+                      'Content-Type': 'application/json', 
+                      'Accept': 'application/json, text/event-stream',
+                      'X-MCP-Session-Id': sessionId
+                    },
+                    body: JSON.stringify({ jsonrpc: '2.0', method: 'tools/list', id: 1 }),
+                    signal: controller.signal
+                  })
+                  if (response.status >= 200 && response.status < 500) break
+                } catch (e) {
+                  // Try next endpoint
+                }
+              }
+            }
+          }
+          
+          clearTimeout(timeoutId)
+          
+          if (response && response.status >= 200 && response.status < 500) {
+            server.status = 'alive'
+            server.lastCheck = new Date().toLocaleTimeString()
+          } else {
+            server.status = 'error'
+            server.lastCheck = new Date().toLocaleTimeString()
+          }
+        } catch (err) {
+          server.status = 'error'
+          server.lastCheck = new Date().toLocaleTimeString()
+        } finally {
+          server.checking = false
+          // Clean up session if created
+          if (sessionId) {
+            try {
+              await fetch(server.url + '/mcp', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ jsonrpc: '2.0', method: 'shutdown', id: 1 })
+              })
+            } catch (e) {
+              // Ignore cleanup errors
+            }
+          }
+        }
       },
       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)
-      }
+        await this.fetchCommands()
+      },
+      autoCheck() {
+        // Check all HTTP/SSE servers that aren't already being checked
+        this.servers.forEach(server => {
+          if (server.url && !server.checking) {
+            this.check(server)
+          }
+        })
+      },
     }
   }).mount('#mcp-app')
 </script>

package/server/views/partials/head.ejs

@@ -98,7 +98,11 @@
       <a href="/api/specs" class="btn justify-start" id="nav-specs">OpenAPI Specs</a>
       <a href="/api/mcp" class="btn justify-start" id="nav-mcp">MCP Servers</a>
       <a href="/api/plugins" class="btn justify-start" id="nav-plugins">Server Plugins</a>
+      <a href="/api/settings" class="btn justify-start" id="nav-settings">Settings</a>
+      <a href="/api/api-keys" class="btn justify-start" id="nav-api-keys">API Keys</a>
+      <a href="/api/clients" class="btn justify-start" id="nav-clients">Clients</a>
       <a href="/api/jobs" class="btn justify-start" id="nav-jobs">Jobs</a>
+      <a href="/api/docs" class="btn justify-start" id="nav-docs">Documentation</a>
     </aside>
     <!-- Main content -->
     <main class="flex-1 p-8 bg-[#FBFBFA]">

package/server/views/plugins.ejs

@@ -15,30 +15,8 @@
     <span><strong>Admin Mode Enabled:</strong> CLI clients can modify server state without authentication. Disable when not needed.</span>
   </div>
 
-  <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-6">
+  <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6">
     <div class="card bg-base-100 border border-base-300">
-      <div class="card-body p-4">
-        <h2 class="card-title text-base">Settings</h2>
-        <label class="form-control mb-2">
-          <span class="label-text text-xs">Max ZIP Size (MB)</span>
-          <input v-model.number="settings.max_zip_mb" type="number" min="1" class="input input-bordered input-sm" />
-        </label>
-        <label class="form-control mb-3">
-          <span class="label-text text-xs">Default Hooks Policy</span>
-          <select v-model="settings.default_hooks_policy" class="select select-bordered select-sm">
-            <option value="deny">deny</option>
-            <option value="allow">allow</option>
-          </select>
-        </label>
-        <label class="label cursor-pointer justify-start gap-2 mb-3">
-          <input type="checkbox" v-model="settings.admin_mode_enabled" class="checkbox checkbox-error checkbox-sm" />
-          <span class="label-text text-xs text-error font-semibold">Admin Mode (allows CLI modifications)</span>
-        </label>
-        <button class="btn btn-sm btn-primary" @click="saveSettings">Save Settings</button>
-      </div>
-    </div>
-
-    <div class="card bg-base-100 border border-base-300 lg:col-span-2">
       <div class="card-body p-4">
         <h2 class="card-title text-base">Create JSON Plugin</h2>
         <div class="grid grid-cols-2 gap-2 mb-2">
@@ -180,15 +158,6 @@
         this.plugins = out.plugins || []
         if (out.settings) this.settings = out.settings
       },
-      async saveSettings() {
-        try {
-          await this.api('/api/plugins/settings', 'PUT', this.settings)
-          this.setMessage('success', 'Settings updated')
-          await this.reloadPlugins()
-        } catch (err) {
-          this.setMessage('error', err.message)
-        }
-      },
       async createJsonPlugin() {
         try {
           const manifest = JSON.parse(this.jsonForm.manifestStr)
@@ -266,6 +235,38 @@
           this.setMessage('error', err.message)
         }
       },
+      async createApiKey() {
+        if (!this.newKeyName.trim()) {
+          this.setMessage('error', 'API key name is required')
+          return
+        }
+        try {
+          const result = await this.api('/api/plugins/api-keys', 'POST', { name: this.newKeyName })
+          this.setMessage('success', `Created API key '${result.name}'`)
+          this.newKeyName = ''
+          await this.reloadPlugins()
+        } catch (err) {
+          this.setMessage('error', err.message)
+        }
+      },
+      async deleteApiKey(key) {
+        if (!confirm('Delete this API key?')) return
+        try {
+          await this.api(`/api/plugins/api-keys/${encodeURIComponent(key)}`, 'DELETE')
+          this.setMessage('success', 'API key deleted')
+          await this.reloadPlugins()
+        } catch (err) {
+          this.setMessage('error', err.message)
+        }
+      },
+      async copyApiKey(key) {
+        try {
+          await navigator.clipboard.writeText(key)
+          this.setMessage('success', 'API key copied to clipboard')
+        } catch (err) {
+          this.setMessage('error', 'Failed to copy API key')
+        }
+      },
     },
   }).mount('#plugins-app')
 </script>

package/server/views/settings.ejs

@@ -0,0 +1,99 @@
+<%- include("partials/head", { title: "Server Settings" }) %>
+
+<div id="settings-app" class="max-w-4xl">
+  <div class="flex justify-between items-center mb-6">
+    <h1 class="text-2xl font-bold">Server Settings</h1>
+    <div class="text-sm opacity-80">Configure server-wide behavior and security.</div>
+  </div>
+
+  <div v-if="message.text" :class="['alert mb-4', message.type === 'error' ? 'alert-error' : 'alert-success']">
+    <span>{{ message.text }}</span>
+  </div>
+
+  <div v-if="settings.admin_mode_enabled" class="alert alert-error mb-4">
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
+    <span><strong>Admin Mode Enabled:</strong> CLI clients can modify server state without authentication. Disable when not needed.</span>
+  </div>
+
+  <div class="card bg-base-100 border border-base-300">
+    <div class="card-body">
+      <h2 class="card-title">General Settings</h2>
+      <label class="form-control mb-3">
+        <span class="label-text">Max ZIP Size (MB)</span>
+        <input v-model.number="settings.max_zip_mb" type="number" min="1" class="input input-bordered" />
+      </label>
+      <label class="form-control mb-3">
+        <span class="label-text">Default Hooks Policy</span>
+        <select v-model="settings.default_hooks_policy" class="select select-bordered">
+          <option value="deny">deny</option>
+          <option value="allow">allow</option>
+        </select>
+      </label>
+    </div>
+  </div>
+
+  <div class="card bg-base-100 border border-base-300 mt-4">
+    <div class="card-body">
+      <h2 class="card-title">Security Settings</h2>
+      <label class="label cursor-pointer justify-start gap-2 mb-3">
+        <input type="checkbox" v-model="settings.admin_mode_enabled" class="checkbox checkbox-error" />
+        <span class="label-text text-error font-semibold">Admin Mode (allows CLI modifications without auth)</span>
+      </label>
+      <label class="label cursor-pointer justify-start gap-2 mb-3">
+        <input type="checkbox" v-model="settings.public_access" class="checkbox" />
+        <span class="label-text">Public Access (allow API requests without API key)</span>
+      </label>
+    </div>
+  </div>
+
+  <div class="mt-6">
+    <button class="btn btn-primary" @click="saveSettings">Save Settings</button>
+  </div>
+</div>
+
+<script>
+const { createApp } = Vue
+
+createApp({
+  data() {
+    return {
+      settings: {},
+      message: { text: '', type: 'success' }
+    }
+  },
+  async mounted() {
+    await this.loadSettings()
+  },
+  methods: {
+    async loadSettings() {
+      try {
+        const res = await fetch('/api/settings?format=json')
+        const data = await res.json()
+        this.settings = data
+      } catch (err) {
+        this.setMessage('error', err.message)
+      }
+    },
+    async saveSettings() {
+      try {
+        const res = await fetch('/api/settings', {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(this.settings)
+        })
+        const data = await res.json()
+        this.settings = data.settings
+        this.setMessage('success', 'Settings saved')
+      } catch (err) {
+        this.setMessage('error', err.message)
+      }
+    },
+    setMessage(type, text) {
+      this.message = { type, text }
+      setTimeout(() => this.message = { text: '', type: 'success' }, 3000)
+    }
+  }
+}).mount('#settings-app')
+</script>
+
+<%- include("partials/foot") %>