superacli 1.1.23 → 1.1.26

package/server/views/api-keys.ejs

@@ -0,0 +1,147 @@
+<%- include("partials/head", { title: "API Keys" }) %>
+
+<div id="api-keys-app" class="max-w-4xl">
+  <div class="flex justify-between items-center mb-6">
+    <h1 class="text-2xl font-bold">API Keys</h1>
+    <div class="text-sm opacity-80">Manage API keys for CLI and programmatic access.</div>
+  </div>
+
+  <div v-if="message.text" :class="['alert mb-4', message.type === 'error' ? 'alert-error' : 'alert-success']">
+    <span>{{ message.text }}</span>
+  </div>
+
+  <div class="card bg-base-100 border border-base-300">
+    <div class="card-body">
+      <h2 class="card-title">Create New API Key</h2>
+      <div class="form-control">
+        <div class="label">
+          <span class="label-text">Key Name</span>
+        </div>
+        <div class="flex gap-2">
+          <input v-model="newKeyName" class="input input-bordered flex-1" placeholder="e.g., 'CLI Agent' or 'Production'" />
+          <button class="btn btn-primary" @click="createApiKey">Create</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="card bg-base-100 border border-base-300 mt-4">
+    <div class="card-body">
+      <h2 class="card-title">Active API Keys</h2>
+      <div v-if="settings.api_keys && settings.api_keys.length > 0">
+        <table class="table table-zebra">
+          <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>{{ apiKey.key.slice(0, 12) }}...</code>
+                <button class="btn btn-xs btn-ghost ml-2" @click="copyApiKey(apiKey.key)">📋</button>
+              </td>
+              <td>{{ new Date(apiKey.created_at).toLocaleString() }}</td>
+              <td>
+                <button class="btn btn-sm btn-error" @click="deleteApiKey(apiKey.key)">Delete</button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div v-else class="text-center py-8 opacity-60">
+        <p>No API keys created yet</p>
+        <p class="text-sm mt-2">Create an API key to enable CLI and programmatic access to the server.</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+const { createApp } = Vue
+
+createApp({
+  data() {
+    return {
+      settings: {},
+      newKeyName: '',
+      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 createApiKey() {
+      if (!this.newKeyName.trim()) {
+        this.setMessage('error', 'API key name is required')
+        return
+      }
+      try {
+        const res = await fetch('/api/api-keys', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ name: this.newKeyName })
+        })
+        const result = await res.json()
+        this.setMessage('success', `Created API key '${result.name}'`)
+        this.newKeyName = ''
+        await this.loadSettings()
+      } catch (err) {
+        this.setMessage('error', err.message)
+      }
+    },
+    async deleteApiKey(key) {
+      if (!confirm('Delete this API key?')) return
+      try {
+        await fetch(`/api/api-keys/${encodeURIComponent(key)}`, {
+          method: 'DELETE'
+        })
+        this.setMessage('success', 'API key deleted')
+        await this.loadSettings()
+      } catch (err) {
+        this.setMessage('error', err.message)
+      }
+    },
+    async copyApiKey(key) {
+      try {
+        // Fallback for non-HTTPS contexts
+        const textArea = document.createElement("textarea")
+        textArea.value = key
+        textArea.style.position = "fixed"
+        textArea.style.left = "-9999px"
+        document.body.appendChild(textArea)
+        textArea.select()
+        try {
+          document.execCommand("copy")
+          this.setMessage('success', 'API key copied to clipboard')
+        } catch (err) {
+          throw new Error('Copy failed')
+        }
+        document.body.removeChild(textArea)
+      } catch (err) {
+        this.setMessage('error', 'Failed to copy API key')
+      }
+    },
+    setMessage(type, text) {
+      this.message = { type, text }
+      setTimeout(() => this.message = { text: '', type: 'success' }, 3000)
+    }
+  }
+}).mount('#api-keys-app')
+</script>
+
+<%- include("partials/foot") %>

package/server/views/layout.ejs

@@ -88,6 +88,43 @@
 <body>
 
   <div class="flex min-h-screen">
+    <!-- Sidebar navigation -->
+    <aside class="w-64 bg-white border-r border-[#EAEAEA] p-6">
+      <div class="mb-8">
+        <h1 class="text-xl font-bold editorial-heading">SUPERCLI</h1>
+        <p class="text-sm text-[#787774]">Command Control Plane</p>
+      </div>
+      <nav class="space-y-2">
+        <a href="/api/plugins" class="block px-4 py-2 rounded-lg hover:bg-[#F7F6F3] transition-colors">
+          Plugins
+        </a>
+        <a href="/api/settings" class="block px-4 py-2 rounded-lg hover:bg-[#F7F6F3] transition-colors">
+          Settings
+        </a>
+        <a href="/api/api-keys" class="block px-4 py-2 rounded-lg hover:bg-[#F7F6F3] transition-colors">
+          API Keys
+        </a>
+        <a href="/api/commands" class="block px-4 py-2 rounded-lg hover:bg-[#F7F6F3] transition-colors">
+          Commands
+        </a>
+        <a href="/api/jobs" class="block px-4 py-2 rounded-lg hover:bg-[#F7F6F3] transition-colors">
+          Jobs
+        </a>
+        <a href="/api/clients" class="block px-4 py-2 rounded-lg hover:bg-[#F7F6F3] transition-colors">
+          Clients
+        </a>
+        <a href="/api/adapters" class="block px-4 py-2 rounded-lg hover:bg-[#F7F6F3] transition-colors">
+          Adapters
+        </a>
+        <a href="/api/specs" class="block px-4 py-2 rounded-lg hover:bg-[#F7F6F3] transition-colors">
+          OpenAPI Specs
+        </a>
+        <a href="/api/mcp" class="block px-4 py-2 rounded-lg hover:bg-[#F7F6F3] transition-colors">
+          MCP Servers
+        </a>
+      </nav>
+    </aside>
+
     <!-- Main content -->
     <main class="flex-1 p-8 bg-[#FBFBFA]">
       <%- body %>

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/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>

package/server/views/plugins.ejs

@@ -15,76 +15,7 @@
     <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="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>
-        <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">
-      <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="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">Create JSON Plugin</h2>
@@ -201,7 +132,6 @@
           archive_file: null,
           manifestStr: '{\n  "name": "my-plugin",\n  "version": "0.0.0",\n  "commands": []\n}',
         },
-        newKeyName: '',
       }
     },
     methods: {
@@ -228,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)

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") %>