superacli 1.1.21 → 1.1.23

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,9 @@
       <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/plugins/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

@@ -34,11 +34,58 @@
           <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>
+        <label class="label cursor-pointer justify-start gap-2 mb-3">
+          <input type="checkbox" v-model="settings.public_access" class="checkbox checkbox-sm" />
+          <span class="label-text text-xs">Public Access (allow without API key)</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 bg-base-100 border border-base-300">
+      <div class="card-body p-4">
+        <h2 class="card-title text-base">API Keys</h2>
+        <div class="form-control mb-3">
+          <div class="label">
+            <span class="label-text text-xs">Create New API Key</span>
+          </div>
+          <div class="flex gap-2">
+            <input v-model="newKeyName" class="input input-bordered input-sm flex-1" placeholder="Key name (e.g., 'CLI Agent')" />
+            <button class="btn btn-sm btn-primary" @click="createApiKey">Create</button>
+          </div>
+        </div>
+        <div v-if="settings.api_keys && settings.api_keys.length > 0" class="overflow-x-auto">
+          <table class="table table-zebra table-xs">
+            <thead>
+              <tr>
+                <th>Name</th>
+                <th>Key</th>
+                <th>Created</th>
+                <th>Action</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="apiKey in settings.api_keys" :key="apiKey.key">
+                <td>{{ apiKey.name }}</td>
+                <td>
+                  <code class="text-xs">{{ apiKey.key.slice(0, 8) }}...</code>
+                  <button class="btn btn-xs btn-ghost ml-1" @click="copyApiKey(apiKey.key)">📋</button>
+                </td>
+                <td class="text-xs">{{ new Date(apiKey.created_at).toLocaleDateString() }}</td>
+                <td>
+                  <button class="btn btn-xs btn-error" @click="deleteApiKey(apiKey.key)">Delete</button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div v-else class="text-xs opacity-60 text-center py-2">
+          No API keys created yet
+        </div>
+      </div>
+    </div>
+
+    <div class="card bg-base-100 border border-base-300">
       <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">
@@ -154,6 +201,7 @@
           archive_file: null,
           manifestStr: '{\n  "name": "my-plugin",\n  "version": "0.0.0",\n  "commands": []\n}',
         },
+        newKeyName: '',
       }
     },
     methods: {
@@ -266,6 +314,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>