superacli 1.1.20 → 1.1.21

package/server/views/adapter-packages.ejs

@@ -0,0 +1,191 @@
+<%- include("partials/head", { title: `${adapter.name} - Packages` }) %>
+
+<div class="max-w-2xl">
+  <div class="flex justify-between items-center mb-6">
+    <div>
+      <p class="text-xs uppercase tracking-[0.2em] text-[#787774] mb-1">Adapter Packages</p>
+      <h1 class="text-2xl editorial-heading text-[#111111]"><%= adapter.name %></h1>
+    </div>
+    <div class="flex gap-2">
+      <a href="/api/adapters/<%= adapter.name %>/edit" class="btn">Edit Adapter</a>
+      <a href="/api/adapters" class="btn">Back</a>
+    </div>
+  </div>
+
+  <div id="packages-manager">
+    <div v-if="message.text" :class="['alert mb-4', message.type === 'error' ? 'alert-error' : 'alert-success']">
+      <span>{{ message.text }}</span>
+    </div>
+
+    <div class="bento-card p-6 mb-6">
+      <h3 class="text-sm font-medium text-[#111111] mb-4">Add Package</h3>
+      <div class="flex gap-2">
+        <input v-model="newPackage" class="input input-bordered input-sm flex-1" 
+               placeholder="package-name@version (e.g., pg@8.11.0)"
+               @keyup.enter="addPackage"
+               :disabled="adding">
+        <button @click="addPackage" class="btn btn-primary btn-sm" :disabled="!newPackage.trim() || adding">
+          <span v-if="adding" class="loading loading-spinner loading-sm"></span>
+          <span v-else>Add</span>
+        </button>
+      </div>
+      <p class="text-xs text-[#787774] mt-2">
+        Enter package name with optional version. Examples: <code>pg</code>, <code>pg@8.11.0</code>, <code>redis@latest</code>
+      </p>
+    </div>
+
+    <div class="bento-card overflow-hidden">
+      <div class="px-6 py-4 border-b border-[#EAEAEA] bg-[#F7F6F3] flex justify-between items-center">
+        <h3 class="text-sm font-medium text-[#111111]">Installed Packages ({{ packages.length }})</h3>
+        <button v-if="packages.length > 0" @click="prunePackages" class="btn btn-xs border-red-200 text-red-600 hover:bg-red-50" :disabled="pruning">
+          <span v-if="pruning" class="loading loading-spinner loading-sm"></span>
+          <span v-else>Prune All</span>
+        </button>
+      </div>
+      
+      <table class="w-full">
+        <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">Package</th>
+            <th class="px-6 py-3 text-left text-xs font-semibold text-[#787774] uppercase tracking-wider">Version</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="packages.length === 0">
+            <td colspan="3" class="px-6 py-12 text-center text-[#787774]">
+              No packages installed. Add packages above.
+            </td>
+          </tr>
+          <tr v-for="pkg in packages" :key="pkg" class="border-b border-[#EAEAEA] hover:bg-[#F7F6F3] transition-colors">
+            <td class="px-6 py-4 font-medium text-[#111111]">{{ parsePackageName(pkg).name }}</td>
+            <td class="px-6 py-4 text-sm text-[#2F3437]">{{ parsePackageName(pkg).version }}</td>
+            <td class="px-6 py-4">
+              <button @click="removePackage(pkg)" class="btn text-xs border-red-200 text-red-600 hover:bg-red-50 hover:border-red-300" :disabled="removing === pkg">
+                <span v-if="removing === pkg" class="loading loading-spinner loading-sm"></span>
+                <span v-else>Remove</span>
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div class="mt-6 p-4 bg-blue-50 border border-blue-200 rounded">
+      <h4 class="text-sm font-medium text-blue-800 mb-2">Auto-Install</h4>
+      <p class="text-xs text-blue-700">
+        Packages are automatically installed when the adapter runs. 
+        For CLI-context adapters, packages are installed on the user's machine when they sync.
+      </p>
+    </div>
+  </div>
+</div>
+
+<script>
+const adapterName = '<%= adapter.name %>'
+const initialPackages = <%- JSON.stringify(packages) %>
+
+Vue.createApp({
+  data() {
+    return {
+      packages: initialPackages,
+      newPackage: '',
+      message: { text: '', type: '' },
+      adding: false,
+      removing: null,
+      pruning: false
+    }
+  },
+  methods: {
+    parsePackageName(pkg) {
+      if (pkg.includes('@') && !pkg.startsWith('@')) {
+        const parts = pkg.split('@')
+        return { name: parts[0], version: parts[1] }
+      }
+      return { name: pkg, version: 'latest' }
+    },
+    
+    async addPackage() {
+      const pkg = this.newPackage.trim()
+      if (!pkg) return
+      
+      this.message.text = ''
+      this.adding = true
+      
+      try {
+        const res = await fetch(`/api/adapters/${adapterName}/packages`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ package: pkg })
+        })
+        
+        const data = await res.json()
+        
+        if (!res.ok) {
+          throw new Error(data.error || 'Failed to add package')
+        }
+        
+        this.packages = data.packages
+        this.newPackage = ''
+        this.message = { text: `Package '${pkg}' added`, type: 'success' }
+      } catch (err) {
+        this.message = { text: err.message, type: 'error' }
+      } finally {
+        this.adding = false
+      }
+    },
+    
+    async removePackage(pkg) {
+      if (!confirm(`Remove package '${this.parsePackageName(pkg).name}'?`)) return
+      
+      this.message.text = ''
+      this.removing = pkg
+      
+      try {
+        const name = this.parsePackageName(pkg).name
+        const res = await fetch(`/api/adapters/${adapterName}/packages/${name}`, {
+          method: 'DELETE'
+        })
+        
+        const data = await res.json()
+        
+        if (!res.ok) {
+          throw new Error(data.error || 'Failed to remove package')
+        }
+        
+        this.packages = data.packages
+        this.message = { text: `Package '${name}' removed`, type: 'success' }
+      } catch (err) {
+        this.message = { text: err.message, type: 'error' }
+      } finally {
+        this.removing = null
+      }
+    },
+    
+    async prunePackages() {
+      if (!confirm('Remove all packages and uninstall them from disk?')) return
+      
+      this.message.text = ''
+      this.pruning = true
+      
+      try {
+        const res = await fetch(`/api/adapters/${adapterName}/packages`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ packages: [] })
+        })
+        
+        const data = await res.json()
+        this.packages = []
+        this.message = { text: 'All packages removed', type: 'success' }
+      } catch (err) {
+        this.message = { text: err.message, type: 'error' }
+      } finally {
+        this.pruning = false
+      }
+    }
+  }
+}).mount('#packages-manager')
+</script>
+
+<%- include("partials/foot") %>

package/server/views/adapters.ejs

@@ -0,0 +1,112 @@
+<%- include("partials/head", { title: "Adapters" }) %>
+
+<div class="flex justify-between items-center mb-8">
+  <div>
+    <p class="text-xs uppercase tracking-[0.2em] text-[#787774] mb-1">Management</p>
+    <h1 class="text-2xl editorial-heading text-[#111111]">Custom Adapters</h1>
+    <p class="text-sm text-[#787774] mt-1">Create and manage JavaScript adapters for custom integrations</p>
+  </div>
+  <a href="/api/adapters/new" class="btn btn-primary">+ New Adapter</a>
+</div>
+
+<div class="bento-card overflow-hidden">
+  <table class="w-full">
+    <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">Context</th>
+        <th class="px-6 py-3 text-left text-xs font-semibold text-[#787774] uppercase tracking-wider">Packages</th>
+        <th class="px-6 py-3 text-left text-xs font-semibold text-[#787774] uppercase tracking-wider">Updated</th>
+        <th class="px-6 py-3 text-left text-xs font-semibold text-[#787774] uppercase tracking-wider">Actions</th>
+      </tr>
+    </thead>
+    <tbody>
+      <% if (adapters.length === 0) { %>
+        <tr><td colspan="5" class="px-6 py-12 text-center text-[#787774]">No adapters yet. Create one to get started.</td></tr>
+      <% } %>
+      <% adapters.forEach(a => { %>
+        <tr class="border-b border-[#EAEAEA] hover:bg-[#F7F6F3] transition-colors">
+          <td class="px-6 py-4">
+            <div class="flex flex-col">
+              <span class="font-medium text-[#111111]"><%= a.name %></span>
+              <% if (a.description) { %>
+                <span class="text-xs text-[#787774] mt-1"><%= a.description %></span>
+              <% } %>
+            </div>
+          </td>
+          <td class="px-6 py-4">
+            <span class="badge <%= a.execution_context === 'cli' ? 'badge-warning' : 'badge-success' %>">
+              <%= a.execution_context %>
+            </span>
+          </td>
+          <td class="px-6 py-4">
+            <span class="mono-text text-sm text-[#2F3437]"><%= a.dependencies.length %> deps</span>
+          </td>
+          <td class="px-6 py-4 text-sm text-[#787774]">
+            <%= new Date(a.updated_at).toLocaleDateString() %>
+          </td>
+          <td class="px-6 py-4 flex gap-2">
+            <a href="/api/adapters/<%= a.name %>/edit" class="btn text-xs">Edit</a>
+            <a href="/api/adapters/<%= a.name %>/packages" class="btn text-xs">Packages</a>
+            <% if (a.execution_context === 'server') { %>
+              <button onclick="testAdapter('<%= a.name %>')" class="btn text-xs">Test</button>
+            <% } %>
+            <button onclick="deleteAdapter('<%= a.name %>')" class="btn text-xs border-red-200 text-red-600 hover:bg-red-50 hover:border-red-300">Delete</button>
+          </td>
+        </tr>
+      <% }) %>
+    </tbody>
+  </table>
+</div>
+
+<div id="test-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
+  <div class="bg-white rounded-lg p-6 max-w-lg w-full mx-4 shadow-xl">
+    <h3 class="text-lg font-medium text-[#111111] mb-4">Test Adapter</h3>
+    <div id="test-result" class="mb-4"></div>
+    <button onclick="closeTestModal()" class="btn btn-primary">Close</button>
+  </div>
+</div>
+
+<script>
+async function deleteAdapter(name) {
+  if (!confirm(`Delete adapter '${name}'?`)) return
+  await fetch('/api/adapters/' + name, { method: 'DELETE' })
+  location.reload()
+}
+
+async function testAdapter(name) {
+  const modal = document.getElementById('test-modal')
+  const result = document.getElementById('test-result')
+  modal.classList.remove('hidden')
+  result.innerHTML = '<p class="text-[#787774]">Running test...</p>'
+  
+  try {
+    const res = await fetch(`/api/adapters/${name}/test`, { method: 'POST' })
+    const data = await res.json()
+    
+    if (data.ok) {
+      result.innerHTML = `
+        <div class="space-y-2">
+          <p class="text-green-600 font-medium">✓ Test passed (${data.duration_ms}ms)</p>
+          <pre class="bg-[#F7F6F3] p-3 rounded text-xs overflow-auto">${JSON.stringify(data.result, null, 2)}</pre>
+        </div>
+      `
+    } else {
+      result.innerHTML = `
+        <div class="space-y-2">
+          <p class="text-red-600 font-medium">✗ Test failed (${data.duration_ms}ms)</p>
+          <p class="text-sm text-red-500">${data.error}</p>
+        </div>
+      `
+    }
+  } catch (err) {
+    result.innerHTML = `<p class="text-red-600">Error: ${err.message}</p>`
+  }
+}
+
+function closeTestModal() {
+  document.getElementById('test-modal').classList.add('hidden')
+}
+</script>
+
+<%- include("partials/foot") %>

package/server/views/command-edit.ejs

@@ -37,14 +37,22 @@
       <div class="form-control">
         <label class="label"><span class="label-text">Adapter</span></label>
         <select v-model="form.adapter" @change="onAdapterChange" 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="process">process</option>
-          <option value="builtin">builtin</option>
-          <option value="custom">custom</option>
+          <optgroup label="Built-in">
+            <option value="http">http</option>
+            <option value="openapi">openapi</option>
+            <option value="mcp">mcp</option>
+            <option value="shell">shell</option>
+            <option value="process">process</option>
+          </optgroup>
+          <optgroup v-if="customAdapters.length > 0" label="Custom">
+            <option v-for="adapter in customAdapters" :key="adapter.name" :value="adapter.name">
+              {{ adapter.name }} ({{ adapter.execution_context }})
+            </option>
+          </optgroup>
         </select>
+        <span v-if="customAdapters.length === 0" class="text-xs text-[#787774] mt-1">
+          <a href="/api/adapters" class="text-blue-600 hover:underline">Create custom adapters</a> to see them here
+        </span>
       </div>
 
       <div class="rounded border border-base-300 p-3 bg-base-100">
@@ -148,16 +156,9 @@
         timeout_ms: 5000
       }
     },
-    builtin: {
-      required: "adapterConfig.builtin",
-      help: "Runs internal built-in behavior.",
-      template: {
-        builtin: "noop"
-      }
-    },
     custom: {
       required: "Depends on your custom adapter",
-      help: "Use when loading adapters/<name>.js from the CLI workspace.",
+      help: "Custom adapters are loaded dynamically from the server. Create them in the Adapters section.",
       template: {}
     }
   };
@@ -177,19 +178,45 @@
         adapterConfigStr: editData && editData.adapterConfig ? JSON.stringify(editData.adapterConfig, null, 2) : '{}',
         message: { type: '', text: '' },
         validationResult: null,
+        customAdapters: [],
       }
     },
-    computed: {
-      adapterGuide() {
-        return ADAPTER_GUIDES[this.form.adapter] || ADAPTER_GUIDES.http
-      }
-    },
-    mounted() {
+    async mounted() {
+      await this.loadCustomAdapters()
       if (!this.editId && this.adapterConfigStr.trim() === '{}') {
         this.loadTemplate(false)
       }
     },
+    computed: {
+      adapterGuide() {
+        // Check if it's a built-in adapter
+        if (ADAPTER_GUIDES[this.form.adapter]) {
+          return ADAPTER_GUIDES[this.form.adapter]
+        }
+        // Check if it's a custom adapter
+        const customAdapter = this.customAdapters.find(a => a.name === this.form.adapter)
+        if (customAdapter) {
+          return {
+            required: "adapterConfig (custom per adapter)",
+            help: `Custom adapter: ${customAdapter.description || 'No description'} (${customAdapter.execution_context} context)`,
+            template: {}
+          }
+        }
+        return ADAPTER_GUIDES.http
+      }
+    },
     methods: {
+      async loadCustomAdapters() {
+        try {
+          const res = await fetch('/api/adapters', { headers: { 'Accept': 'application/json' } })
+          if (res.ok) {
+            const data = await res.json()
+            this.customAdapters = data.adapters || []
+          }
+        } catch (err) {
+          console.error('Failed to load custom adapters:', err)
+        }
+      },
       setMessage(type, text) {
         this.message = { type, text }
       },

package/server/views/commands.ejs

@@ -1,36 +1,39 @@
 <%- 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 class="flex justify-between items-center mb-8">
+  <div>
+    <p class="text-xs uppercase tracking-[0.2em] text-[#787774] mb-1">Management</p>
+    <h1 class="text-2xl editorial-heading text-[#111111]">Commands</h1>
+  </div>
+  <a href="/api/commands/new" class="btn btn-primary">+ Create Command</a>
 </div>
 
-<div class="overflow-x-auto">
-  <table class="table table-zebra w-full">
+<div class="bento-card overflow-hidden">
+  <table class="w-full">
     <thead>
-      <tr>
-        <th>Namespace</th>
-        <th>Resource</th>
-        <th>Action</th>
-        <th>Adapter</th>
-        <th>Description</th>
-        <th>Actions</th>
+      <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">Namespace</th>
+        <th class="px-6 py-3 text-left text-xs font-semibold text-[#787774] uppercase tracking-wider">Resource</th>
+        <th class="px-6 py-3 text-left text-xs font-semibold text-[#787774] uppercase tracking-wider">Action</th>
+        <th class="px-6 py-3 text-left text-xs font-semibold text-[#787774] uppercase tracking-wider">Adapter</th>
+        <th class="px-6 py-3 text-left text-xs font-semibold text-[#787774] uppercase tracking-wider">Description</th>
+        <th class="px-6 py-3 text-left text-xs font-semibold text-[#787774] uppercase tracking-wider">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>
+        <tr><td colspan="6" class="px-6 py-12 text-center text-[#787774]">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>
+        <tr class="border-b border-[#EAEAEA] hover:bg-[#F7F6F3] transition-colors">
+          <td class="px-6 py-4"><span class="badge badge-outline"><%= c.namespace %></span></td>
+          <td class="px-6 py-4 text-[#111111]"><%= c.resource %></td>
+          <td class="px-6 py-4"><code class="mono-text text-sm text-[#1F6C9F]"><%= c.action %></code></td>
+          <td class="px-6 py-4"><span class="badge"><%= c.adapter %></span></td>
+          <td class="px-6 py-4 max-w-xs truncate text-[#2F3437]"><%= c.description || '-' %></td>
+          <td class="px-6 py-4 flex gap-2">
+            <a href="/api/commands/<%= c._id %>/edit" class="btn text-xs">Edit</a>
+            <button onclick="deleteCommand('<%= c._id %>')" class="btn text-xs border-red-200 text-red-600 hover:bg-red-50 hover:border-red-300">Delete</button>
           </td>
         </tr>
       <% }) %>

package/server/views/dashboard.ejs

@@ -0,0 +1,196 @@
+<%- include("partials/head", { title: "Dashboard" }) %>
+
+<div class="mb-8">
+  <p class="text-xs uppercase tracking-[0.2em] text-[#787774] mb-1">Overview</p>
+  <h1 class="text-2xl editorial-heading text-[#111111]">Dashboard</h1>
+</div>
+
+<!-- Resource Summary Cards -->
+<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
+  <a href="/api/commands" class="bento-card p-5 block no-underline">
+    <p class="text-xs uppercase tracking-widest text-[#787774] mb-2">Commands</p>
+    <p class="text-3xl font-semibold text-[#111111]"><%= counts.commands %></p>
+  </a>
+  <a href="/api/mcp" class="bento-card p-5 block no-underline">
+    <p class="text-xs uppercase tracking-widest text-[#787774] mb-2">MCP Servers</p>
+    <p class="text-3xl font-semibold text-[#111111]"><%= counts.mcpServers %></p>
+  </a>
+  <a href="/api/specs" class="bento-card p-5 block no-underline">
+    <p class="text-xs uppercase tracking-widest text-[#787774] mb-2">OpenAPI Specs</p>
+    <p class="text-3xl font-semibold text-[#111111]"><%= counts.specs %></p>
+  </a>
+  <a href="/api/plugins" class="bento-card p-5 block no-underline">
+    <p class="text-xs uppercase tracking-widest text-[#787774] mb-2">Plugins</p>
+    <p class="text-3xl font-semibold text-[#111111]"><%= counts.plugins %></p>
+    <p class="text-xs text-[#787774] mt-1"><%= counts.pluginsEnabled %> enabled</p>
+  </a>
+</div>
+
+<!-- Job Metrics Row -->
+<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
+  <div class="bento-card p-5">
+    <p class="text-xs uppercase tracking-widest text-[#787774] mb-2">Total Jobs</p>
+    <p class="text-3xl font-semibold text-[#111111]"><%= jobs.total %></p>
+  </div>
+  <div class="bento-card p-5">
+    <p class="text-xs uppercase tracking-widest text-[#787774] mb-2">Success Rate</p>
+    <p class="text-3xl font-semibold text-[#346538]"><%= jobs.successRate %>%</p>
+  </div>
+  <div class="bento-card p-5">
+    <p class="text-xs uppercase tracking-widest text-[#787774] mb-2">Failure Rate</p>
+    <p class="text-3xl font-semibold <%= jobs.failed > 0 ? 'text-red-600' : 'text-[#111111]' %>"><%= jobs.failureRate %>%</p>
+  </div>
+  <div class="bento-card p-5">
+    <p class="text-xs uppercase tracking-widest text-[#787774] mb-2">Avg Duration</p>
+    <p class="text-3xl font-semibold text-[#111111]"><%= jobs.avgDuration %><span class="text-base text-[#787774] ml-1">ms</span></p>
+  </div>
+</div>
+
+<!-- Charts Row -->
+<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
+  <!-- 7-day Trend Chart -->
+  <div class="bento-card p-5 md:col-span-2">
+    <p class="text-xs uppercase tracking-widest text-[#787774] mb-4">Job Activity (Last 7 Days)</p>
+    <canvas id="trendChart" height="120"></canvas>
+  </div>
+  <!-- Status Pie Chart -->
+  <div class="bento-card p-5">
+    <p class="text-xs uppercase tracking-widest text-[#787774] mb-4">Job Status</p>
+    <% if (jobs.total > 0) { %>
+      <canvas id="statusChart" height="160"></canvas>
+    <% } else { %>
+      <div class="flex items-center justify-center h-40 text-[#787774] text-sm">No jobs yet</div>
+    <% } %>
+  </div>
+</div>
+
+<!-- Top Commands + Recent Jobs -->
+<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+  <!-- Top Commands -->
+  <div class="bento-card overflow-hidden">
+    <div class="px-6 py-4 border-b border-[#EAEAEA] bg-[#F7F6F3]">
+      <p class="text-xs uppercase tracking-widest text-[#787774]">Top Commands</p>
+    </div>
+    <% if (topCommands.length === 0) { %>
+      <div class="px-6 py-10 text-center text-[#787774] text-sm">No job data yet</div>
+    <% } else { %>
+      <div class="divide-y divide-[#EAEAEA]">
+        <% topCommands.forEach((cmd, i) => { %>
+          <div class="px-6 py-3 flex items-center justify-between">
+            <div class="flex items-center gap-3">
+              <span class="text-xs text-[#787774] w-4"><%= i + 1 %></span>
+              <code class="mono-text text-sm text-[#1F6C9F]"><%= cmd.command %></code>
+            </div>
+            <div class="flex items-center gap-4 text-xs text-[#787774]">
+              <span><%= cmd.count %> runs</span>
+              <span><%= cmd.avg_ms %>ms avg</span>
+            </div>
+          </div>
+        <% }) %>
+      </div>
+    <% } %>
+  </div>
+
+  <!-- Recent Jobs -->
+  <div class="bento-card overflow-hidden">
+    <div class="px-6 py-4 border-b border-[#EAEAEA] bg-[#F7F6F3] flex items-center justify-between">
+      <p class="text-xs uppercase tracking-widest text-[#787774]">Recent Jobs</p>
+      <a href="/api/jobs" class="text-xs text-[#787774] hover:text-[#111111] transition-colors">View all →</a>
+    </div>
+    <% if (recentJobs.length === 0) { %>
+      <div class="px-6 py-10 text-center text-[#787774] text-sm">No jobs yet</div>
+    <% } else { %>
+      <div class="divide-y divide-[#EAEAEA]">
+        <% recentJobs.forEach(job => { %>
+          <div class="px-6 py-3 flex items-center justify-between">
+            <div class="flex items-center gap-3">
+              <span class="w-2 h-2 rounded-full flex-shrink-0
+                <%= job.status === 'success' ? 'bg-[#346538]' : job.status === 'failed' ? 'bg-red-500' : 'bg-[#787774]' %>">
+              </span>
+              <code class="mono-text text-xs text-[#1F6C9F] truncate max-w-[160px]"><%= job.command || '—' %></code>
+            </div>
+            <div class="flex items-center gap-3 text-xs text-[#787774] flex-shrink-0">
+              <% if (job.duration_ms) { %><span><%= job.duration_ms %>ms</span><% } %>
+              <span><%= new Date(job.timestamp).toLocaleDateString('en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' }) %></span>
+            </div>
+          </div>
+        <% }) %>
+      </div>
+    <% } %>
+  </div>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.2/dist/chart.umd.min.js"></script>
+<script>
+  const trend = <%- JSON.stringify(trend) %>;
+  const jobs = <%- JSON.stringify(jobs) %>;
+
+  Chart.defaults.font.family = "'Geist', system-ui, sans-serif";
+  Chart.defaults.color = '#787774';
+
+  // Trend line chart
+  const trendCtx = document.getElementById('trendChart');
+  if (trendCtx) {
+    new Chart(trendCtx, {
+      type: 'bar',
+      data: {
+        labels: trend.map(d => d.label),
+        datasets: [
+          {
+            label: 'Success',
+            data: trend.map(d => d.success),
+            backgroundColor: '#EDF3EC',
+            borderColor: '#346538',
+            borderWidth: 1,
+            borderRadius: 4,
+          },
+          {
+            label: 'Failed',
+            data: trend.map(d => d.failed),
+            backgroundColor: '#FEE2E2',
+            borderColor: '#DC2626',
+            borderWidth: 1,
+            borderRadius: 4,
+          }
+        ]
+      },
+      options: {
+        responsive: true,
+        plugins: {
+          legend: { position: 'bottom', labels: { boxWidth: 12, padding: 16, font: { size: 11 } } }
+        },
+        scales: {
+          x: { grid: { display: false }, border: { display: false } },
+          y: { grid: { color: '#EAEAEA' }, border: { display: false }, beginAtZero: true, ticks: { stepSize: 1 } }
+        }
+      }
+    });
+  }
+
+  // Status pie chart
+  const statusCtx = document.getElementById('statusChart');
+  if (statusCtx && jobs.total > 0) {
+    const unknown = jobs.total - jobs.success - jobs.failed;
+    new Chart(statusCtx, {
+      type: 'doughnut',
+      data: {
+        labels: ['Success', 'Failed', 'Unknown'],
+        datasets: [{
+          data: [jobs.success, jobs.failed, unknown],
+          backgroundColor: ['#EDF3EC', '#FEE2E2', '#F7F6F3'],
+          borderColor: ['#346538', '#DC2626', '#EAEAEA'],
+          borderWidth: 1,
+        }]
+      },
+      options: {
+        responsive: true,
+        cutout: '65%',
+        plugins: {
+          legend: { position: 'bottom', labels: { boxWidth: 12, padding: 12, font: { size: 11 } } }
+        }
+      }
+    });
+  }
+</script>
+
+<%- include("partials/foot") %>