@agenticmail/enterprise 0.4.3 → 0.5.1

package/dashboards/html/src/pages/activity.js

@@ -0,0 +1,137 @@
+/**
+ * Activity page - Shows recent agent activity and system events
+ */
+function renderActivity() {
+  return `
+    <div class="page-title">Activity</div>
+    
+    <div class="stat-grid">
+      <div class="stat-card">
+        <div class="stat-label">Total Events</div>
+        <div class="stat-value">2,847</div>
+        <div class="stat-change" style="color: var(--success)">+12% this week</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-label">Agent Actions</div>
+        <div class="stat-value">1,923</div>
+        <div class="stat-change" style="color: var(--success)">+8% this week</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-label">System Events</div>
+        <div class="stat-value">924</div>
+        <div class="stat-change" style="color: var(--text-muted)">No change</div>
+      </div>
+    </div>
+
+    <div class="card">
+      <div class="card-header">
+        <h3>Recent Activity</h3>
+        <div>
+          <select class="input" style="width: auto; margin-right: 8px;">
+            <option>All Events</option>
+            <option>Agent Actions</option>
+            <option>System Events</option>
+            <option>Security Events</option>
+          </select>
+          <button class="btn btn-secondary">
+            <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+              <path d="M3 14.25V1.75a.75.75 0 0 1 1.5 0v12.5a.75.75 0 0 1-1.5 0zM8.5 1.75a.75.75 0 0 0-1.5 0v12.5a.75.75 0 0 0 1.5 0V1.75zM13 1.75a.75.75 0 0 0-1.5 0v12.5a.75.75 0 0 0 1.5 0V1.75z"/>
+            </svg>
+            Filter
+          </button>
+        </div>
+      </div>
+      <div class="card-body">
+        <div style="overflow-x: auto;">
+          <table>
+            <thead>
+              <tr>
+                <th>Time</th>
+                <th>Event</th>
+                <th>Agent</th>
+                <th>Details</th>
+                <th>Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>2 mins ago</td>
+                <td>Email sent</td>
+                <td>
+                  <div style="display: flex; align-items: center; gap: 8px;">
+                    <div style="width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600;">A</div>
+                    Alice
+                  </div>
+                </td>
+                <td>Sent monthly report to stakeholders</td>
+                <td><span class="badge badge-success">Success</span></td>
+              </tr>
+              <tr>
+                <td>5 mins ago</td>
+                <td>Knowledge updated</td>
+                <td>
+                  <div style="display: flex; align-items: center; gap: 8px;">
+                    <div style="width: 24px; height: 24px; border-radius: 50%; background: var(--success-soft); color: var(--success); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600;">B</div>
+                    Bob
+                  </div>
+                </td>
+                <td>Updated customer service protocols</td>
+                <td><span class="badge badge-success">Success</span></td>
+              </tr>
+              <tr>
+                <td>12 mins ago</td>
+                <td>Agent deployed</td>
+                <td>
+                  <div style="display: flex; align-items: center; gap: 8px;">
+                    <div style="width: 24px; height: 24px; border-radius: 50%; background: var(--warning-soft); color: var(--warning); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600;">C</div>
+                    Charlie
+                  </div>
+                </td>
+                <td>Deployed to production environment</td>
+                <td><span class="badge badge-success">Success</span></td>
+              </tr>
+              <tr>
+                <td>18 mins ago</td>
+                <td>Skill learned</td>
+                <td>
+                  <div style="display: flex; align-items: center; gap: 8px;">
+                    <div style="width: 24px; height: 24px; border-radius: 50%; background: var(--info-soft); color: var(--info); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600;">D</div>
+                    Diana
+                  </div>
+                </td>
+                <td>Acquired new data analysis skill</td>
+                <td><span class="badge badge-success">Success</span></td>
+              </tr>
+              <tr>
+                <td>25 mins ago</td>
+                <td>System backup</td>
+                <td>
+                  <div style="display: flex; align-items: center; gap: 8px;">
+                    <div style="width: 24px; height: 24px; border-radius: 50%; background: var(--bg-tertiary); color: var(--text-muted); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600;">S</div>
+                    System
+                  </div>
+                </td>
+                <td>Automated backup completed</td>
+                <td><span class="badge badge-success">Success</span></td>
+              </tr>
+              <tr>
+                <td>32 mins ago</td>
+                <td>Connection failed</td>
+                <td>
+                  <div style="display: flex; align-items: center; gap: 8px;">
+                    <div style="width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600;">A</div>
+                    Alice
+                  </div>
+                </td>
+                <td>Failed to connect to external API</td>
+                <td><span class="badge badge-danger">Failed</span></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+export { renderActivity };

package/dashboards/html/src/pages/approvals.js

@@ -0,0 +1,155 @@
+/**
+ * Approvals page - Manage agent action approvals and permissions
+ */
+function renderApprovals() {
+  return `
+    <div class="page-title">Approvals</div>
+    
+    <div class="stat-grid">
+      <div class="stat-card">
+        <div class="stat-label">Pending Approvals</div>
+        <div class="stat-value">7</div>
+        <div class="stat-change" style="color: var(--warning)">Requires attention</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-label">Approved Today</div>
+        <div class="stat-value">23</div>
+        <div class="stat-change" style="color: var(--success)">+15% vs yesterday</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-label">Auto-approved</div>
+        <div class="stat-value">156</div>
+        <div class="stat-change" style="color: var(--text-muted)">Automated</div>
+      </div>
+    </div>
+
+    <div class="card">
+      <div class="card-header">
+        <h3>Pending Approvals</h3>
+        <div>
+          <button class="btn btn-secondary">
+            <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+              <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+              <path d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.061L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"/>
+            </svg>
+            Approve All
+          </button>
+        </div>
+      </div>
+      <div class="card-body">
+        <div style="overflow-x: auto;">
+          <table>
+            <thead>
+              <tr>
+                <th>Agent</th>
+                <th>Action</th>
+                <th>Details</th>
+                <th>Risk Level</th>
+                <th>Requested</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>
+                  <div style="display: flex; align-items: center; gap: 8px;">
+                    <div style="width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600;">A</div>
+                    Alice
+                  </div>
+                </td>
+                <td>Send Email</td>
+                <td>Marketing campaign to 5,000 subscribers</td>
+                <td><span class="badge badge-warning">Medium</span></td>
+                <td>5 mins ago</td>
+                <td>
+                  <button class="btn btn-sm" style="background: var(--success); color: white; margin-right: 4px;">Approve</button>
+                  <button class="btn btn-sm btn-danger">Deny</button>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <div style="display: flex; align-items: center; gap: 8px;">
+                    <div style="width: 24px; height: 24px; border-radius: 50%; background: var(--success-soft); color: var(--success); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600;">B</div>
+                    Bob
+                  </div>
+                </td>
+                <td>Database Update</td>
+                <td>Update customer preferences table</td>
+                <td><span class="badge badge-danger">High</span></td>
+                <td>12 mins ago</td>
+                <td>
+                  <button class="btn btn-sm" style="background: var(--success); color: white; margin-right: 4px;">Approve</button>
+                  <button class="btn btn-sm btn-danger">Deny</button>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <div style="display: flex; align-items: center; gap: 8px;">
+                    <div style="width: 24px; height: 24px; border-radius: 50%; background: var(--warning-soft); color: var(--warning); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600;">C</div>
+                    Charlie
+                  </div>
+                </td>
+                <td>API Call</td>
+                <td>Call external payment processing API</td>
+                <td><span class="badge badge-danger">High</span></td>
+                <td>18 mins ago</td>
+                <td>
+                  <button class="btn btn-sm" style="background: var(--success); color: white; margin-right: 4px;">Approve</button>
+                  <button class="btn btn-sm btn-danger">Deny</button>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <div style="display: flex; align-items: center; gap: 8px;">
+                    <div style="width: 24px; height: 24px; border-radius: 50%; background: var(--info-soft); color: var(--info); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600;">D</div>
+                    Diana
+                  </div>
+                </td>
+                <td>File Access</td>
+                <td>Read sensitive customer data files</td>
+                <td><span class="badge badge-warning">Medium</span></td>
+                <td>25 mins ago</td>
+                <td>
+                  <button class="btn btn-sm" style="background: var(--success); color: white; margin-right: 4px;">Approve</button>
+                  <button class="btn btn-sm btn-danger">Deny</button>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <div style="display: flex; align-items: center; gap: 8px;">
+                    <div style="width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600;">E</div>
+                    Eve
+                  </div>
+                </td>
+                <td>System Command</td>
+                <td>Execute system maintenance script</td>
+                <td><span class="badge badge-success">Low</span></td>
+                <td>32 mins ago</td>
+                <td>
+                  <button class="btn btn-sm" style="background: var(--success); color: white; margin-right: 4px;">Approve</button>
+                  <button class="btn btn-sm btn-danger">Deny</button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <div class="card" style="margin-top: 24px;">
+      <div class="card-header">
+        <h3>Approval Rules</h3>
+        <button class="btn btn-secondary">Add Rule</button>
+      </div>
+      <div class="card-body">
+        <div class="empty-state">
+          <h3>No custom approval rules configured</h3>
+          <p>Set up automatic approval rules to streamline your workflow</p>
+          <button class="btn btn-secondary">Create Rule</button>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+export { renderApprovals };

package/dashboards/html/src/pages/community-skills.js

@@ -0,0 +1,236 @@
+/**
+ * Community Skills page - Browse and install skills from the community
+ */
+function renderCommunitySkills() {
+  return `
+    <div class="page-title">Community Skills</div>
+    
+    <div class="stat-grid">
+      <div class="stat-card">
+        <div class="stat-label">Available Skills</div>
+        <div class="stat-value">1,247</div>
+        <div class="stat-change" style="color: var(--success)">+23 this week</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-label">Installed</div>
+        <div class="stat-value">18</div>
+        <div class="stat-change" style="color: var(--success)">+3 this week</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-label">Updates Available</div>
+        <div class="stat-value">5</div>
+        <div class="stat-change" style="color: var(--warning)">Requires attention</div>
+      </div>
+    </div>
+
+    <div style="display: flex; gap: 16px; margin-bottom: 24px; align-items: center;">
+      <input class="input" placeholder="Search skills..." style="flex: 1;">
+      <select class="input" style="width: auto;">
+        <option>All Categories</option>
+        <option>Communication</option>
+        <option>Data Analysis</option>
+        <option>Automation</option>
+        <option>Security</option>
+        <option>Integration</option>
+      </select>
+      <select class="input" style="width: auto;">
+        <option>Most Popular</option>
+        <option>Recently Added</option>
+        <option>Most Downloaded</option>
+        <option>Highest Rated</option>
+      </select>
+    </div>
+
+    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px;">
+      <!-- Skill Card 1 -->
+      <div class="card">
+        <div class="card-header">
+          <div>
+            <h3>Advanced Email Templates</h3>
+            <div style="font-size: 11px; color: var(--text-muted); margin-top: 2px;">
+              by AgenticMail Team
+            </div>
+          </div>
+          <div style="display: flex; gap: 4px; align-items: center;">
+            <span style="font-size: 12px; color: var(--warning);">★★★★★</span>
+            <span style="font-size: 11px; color: var(--text-muted);">(248)</span>
+          </div>
+        </div>
+        <div class="card-body">
+          <p style="font-size: 13px; color: var(--text-secondary); margin-bottom: 12px;">
+            Create professional email templates with dynamic content, conditional blocks, and advanced formatting.
+          </p>
+          <div style="display: flex; gap: 4px; margin-bottom: 12px;">
+            <span class="badge badge-primary">Communication</span>
+            <span class="badge badge-info">Templates</span>
+          </div>
+          <div style="display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--text-muted); margin-bottom: 16px;">
+            <span>1.2k downloads</span>
+            <span>Updated 2 days ago</span>
+          </div>
+          <button class="btn btn-primary" style="width: 100%;">Install</button>
+        </div>
+      </div>
+
+      <!-- Skill Card 2 -->
+      <div class="card">
+        <div class="card-header">
+          <div>
+            <h3>Data Visualization</h3>
+            <div style="font-size: 11px; color: var(--text-muted); margin-top: 2px;">
+              by DataViz Inc
+            </div>
+          </div>
+          <div style="display: flex; gap: 4px; align-items: center;">
+            <span style="font-size: 12px; color: var(--warning);">★★★★☆</span>
+            <span style="font-size: 11px; color: var(--text-muted);">(156)</span>
+          </div>
+        </div>
+        <div class="card-body">
+          <p style="font-size: 13px; color: var(--text-secondary); margin-bottom: 12px;">
+            Generate beautiful charts, graphs, and interactive dashboards from your data sources.
+          </p>
+          <div style="display: flex; gap: 4px; margin-bottom: 12px;">
+            <span class="badge badge-success">Data Analysis</span>
+            <span class="badge badge-info">Charts</span>
+          </div>
+          <div style="display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--text-muted); margin-bottom: 16px;">
+            <span>856 downloads</span>
+            <span>Updated 5 days ago</span>
+          </div>
+          <button class="btn btn-primary" style="width: 100%;">Install</button>
+        </div>
+      </div>
+
+      <!-- Skill Card 3 -->
+      <div class="card">
+        <div class="card-header">
+          <div>
+            <h3>Slack Integration</h3>
+            <div style="font-size: 11px; color: var(--text-muted); margin-top: 2px;">
+              by Slack
+            </div>
+          </div>
+          <div style="display: flex; gap: 4px; align-items: center;">
+            <span style="font-size: 12px; color: var(--warning);">★★★★★</span>
+            <span style="font-size: 11px; color: var(--text-muted);">(492)</span>
+          </div>
+        </div>
+        <div class="card-body">
+          <p style="font-size: 13px; color: var(--text-secondary); margin-bottom: 12px;">
+            Send messages, create channels, and manage Slack workspaces directly from your agents.
+          </p>
+          <div style="display: flex; gap: 4px; margin-bottom: 12px;">
+            <span class="badge badge-warning">Integration</span>
+            <span class="badge badge-primary">Communication</span>
+          </div>
+          <div style="display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--text-muted); margin-bottom: 16px;">
+            <span>2.1k downloads</span>
+            <span>Updated 1 day ago</span>
+          </div>
+          <div style="display: flex; gap: 4px;">
+            <button class="btn" style="background: var(--success); color: white; flex: 1;">
+              <svg width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
+                <path d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.061L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"/>
+              </svg>
+              Installed
+            </button>
+            <button class="btn btn-secondary" style="width: auto;">Update</button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Skill Card 4 -->
+      <div class="card">
+        <div class="card-header">
+          <div>
+            <h3>Security Scanner</h3>
+            <div style="font-size: 11px; color: var(--text-muted); margin-top: 2px;">
+              by SecureTech
+            </div>
+          </div>
+          <div style="display: flex; gap: 4px; align-items: center;">
+            <span style="font-size: 12px; color: var(--warning);">★★★★☆</span>
+            <span style="font-size: 11px; color: var(--text-muted);">(89)</span>
+          </div>
+        </div>
+        <div class="card-body">
+          <p style="font-size: 13px; color: var(--text-secondary); margin-bottom: 12px;">
+            Scan files, URLs, and network connections for security threats and vulnerabilities.
+          </p>
+          <div style="display: flex; gap: 4px; margin-bottom: 12px;">
+            <span class="badge badge-danger">Security</span>
+            <span class="badge badge-warning">Scanning</span>
+          </div>
+          <div style="display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--text-muted); margin-bottom: 16px;">
+            <span>234 downloads</span>
+            <span>Updated 1 week ago</span>
+          </div>
+          <button class="btn btn-primary" style="width: 100%;">Install</button>
+        </div>
+      </div>
+
+      <!-- Skill Card 5 -->
+      <div class="card">
+        <div class="card-header">
+          <div>
+            <h3>Task Automation</h3>
+            <div style="font-size: 11px; color: var(--text-muted); margin-top: 2px;">
+              by AutoFlow
+            </div>
+          </div>
+          <div style="display: flex; gap: 4px; align-items: center;">
+            <span style="font-size: 12px; color: var(--warning);">★★★★★</span>
+            <span style="font-size: 11px; color: var(--text-muted);">(367)</span>
+          </div>
+        </div>
+        <div class="card-body">
+          <p style="font-size: 13px; color: var(--text-secondary); margin-bottom: 12px;">
+            Automate repetitive tasks with workflow builders, schedulers, and trigger systems.
+          </p>
+          <div style="display: flex; gap: 4px; margin-bottom: 12px;">
+            <span class="badge badge-info">Automation</span>
+            <span class="badge badge-success">Workflow</span>
+          </div>
+          <div style="display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--text-muted); margin-bottom: 16px;">
+            <span>1.5k downloads</span>
+            <span>Updated 3 days ago</span>
+          </div>
+          <button class="btn btn-primary" style="width: 100%;">Install</button>
+        </div>
+      </div>
+
+      <!-- Skill Card 6 -->
+      <div class="card">
+        <div class="card-header">
+          <div>
+            <h3>API Documentation</h3>
+            <div style="font-size: 11px; color: var(--text-muted); margin-top: 2px;">
+              by DevTools Pro
+            </div>
+          </div>
+          <div style="display: flex; gap: 4px; align-items: center;">
+            <span style="font-size: 12px; color: var(--warning);">★★★☆☆</span>
+            <span style="font-size: 11px; color: var(--text-muted);">(73)</span>
+          </div>
+        </div>
+        <div class="card-body">
+          <p style="font-size: 13px; color: var(--text-secondary); margin-bottom: 12px;">
+            Automatically generate comprehensive API documentation from your code and schemas.
+          </p>
+          <div style="display: flex; gap: 4px; margin-bottom: 12px;">
+            <span class="badge badge-info">Documentation</span>
+            <span class="badge badge-primary">API</span>
+          </div>
+          <div style="display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--text-muted); margin-bottom: 16px;">
+            <span>189 downloads</span>
+            <span>Updated 2 weeks ago</span>
+          </div>
+          <button class="btn btn-primary" style="width: 100%;">Install</button>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+export { renderCommunitySkills };