@adminforge/core 0.3.1

package/src/ui/index.ts

@@ -0,0 +1,18 @@
+export { AdminLayout } from "./components/AdminLayout.js";
+export { AdminDashboard } from "./AdminDashboard.js";
+export { AdminPage } from "./screens/AdminPage.js";
+export { CollectionListPage } from "./screens/CollectionListPage.js";
+export { CollectionFormPage } from "./screens/CollectionFormPage.js";
+export { CollectionSchemaPage } from "./screens/CollectionSchemaPage.js";
+export { RolesListPage } from "./screens/RolesListPage.js";
+export { RoleDetailPage } from "./screens/RoleDetailPage.js";
+export { AgentTokenPage } from "./screens/AgentTokenPage.js";
+export { FormEngine } from "./form-engine/FormEngine.js";
+export { TableEngine } from "./table-engine/TableEngine.js";
+export { RichTextEditor } from "./form-engine/RichTextEditor.js";
+export { ImageUpload } from "./form-engine/ImageUpload.js";
+export { AdminForgeProvider, useAdminForge } from "./AdminForgeContext.js";
+
+// Auth Client
+export { AuthProvider, useAdminSession } from "../auth/provider.js";
+

package/src/ui/screens/AdminPage.tsx

@@ -0,0 +1,162 @@
+"use client";
+import { useState, useEffect } from "react";
+import type { AdminForgeConfig } from "../../core";
+import { AdminLayout } from "../components/AdminLayout.js";
+import Link from "next/link";
+import { useAdminSession } from "../../auth/provider.js";
+
+interface AdminPageProps {
+  config: AdminForgeConfig;
+  role?: string;
+}
+
+const iconMap: Record<string, string> = {
+  posts: "article",
+  categories: "category",
+  tags: "sell",
+  users: "person",
+};
+
+function formatRelativeTime(date: Date) {
+  const diff = Date.now() - date.getTime();
+  const minutes = Math.floor(diff / 60000);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+
+  if (isNaN(date.getTime())) return "Invalid date";
+  if (minutes < 1) return "Just now";
+  if (minutes < 60) return `${minutes}m ago`;
+  if (hours < 24) return `${hours}h ago`;
+  return `${days}d ago`;
+}
+
+function CollectionActivity({ activity }: { activity?: { createdAt: string, updatedAt: string } }) {
+  if (!activity) return <span style={{ color: '#94a3b8', fontSize: '13px' }}>-</span>;
+  
+  const createdAt = new Date(activity.createdAt);
+  const updatedAt = new Date(activity.updatedAt);
+  const isUpdated = updatedAt.getTime() > createdAt.getTime() + 1000;
+  const date = isUpdated ? updatedAt : createdAt;
+  const label = isUpdated ? "Updated" : "Created";
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '13px' }}>
+      <span 
+        style={{ 
+          fontSize: '9px', 
+          padding: '1px 6px', 
+          borderRadius: '10px',
+          background: isUpdated ? '#fef3c7' : '#92400e20',
+          color: isUpdated ? '#92400e' : '#166534',
+          fontWeight: 700,
+          textTransform: 'uppercase',
+          border: '1px solid',
+          borderColor: isUpdated ? '#fde68a' : '#bbf7d0'
+        }}
+      >
+        {label}
+      </span>
+      <span style={{ fontWeight: 500, color: 'var(--color-text)' }}>{formatRelativeTime(date)}</span>
+    </div>
+  );
+}
+
+export function AdminPage({ config, role: propRole }: AdminPageProps) {
+  const session = useAdminSession();
+  const role = propRole || session?.role || session?.user?.role;
+  const schemaActivity = config.collections?.[0] && (config.collections[0] as any)?.schemaActivity;
+
+  return (
+    <AdminLayout config={config} currentPath="/admin" role={role}>
+      <div className="adminforge-dashboard">
+        <div className="mb-10">
+          <div style={{ display: 'flex', alignItems: 'center', gap: '16px', marginBottom: '8px' }}>
+            <h2 className="adminforge-display-title" style={{ marginBottom: 0 }}>Collection Registry</h2>
+          </div>
+          <p className="adminforge-display-subtitle" style={{ marginBottom: '32px' }}>
+            Index of all data models defined in your system.
+          </p>
+        </div>
+
+        {schemaActivity && (
+          <div style={{ 
+            display: 'flex', 
+            alignItems: 'center', 
+            gap: '12px', 
+            padding: '12px 20px', 
+            background: '#f0f9ff', 
+            border: '1px solid #bae6fd', 
+            borderRadius: '12px', 
+            marginBottom: '24px',
+            boxShadow: '0 1px 2px rgba(0,0,0,0.05)'
+          }}>
+            <span className="material-symbols-outlined" style={{ color: '#0284c7', fontSize: '20px' }}>sync</span>
+            <div style={{ fontSize: '14px', color: '#0369a1' }}>
+              <span style={{ fontWeight: 600 }}>Schema Synced:</span> Your definitions from <code style={{ background: '#e0f2fe', padding: '2px 4px', borderRadius: '4px' }}>adminforge.ts</code> were last updated <span style={{ fontWeight: 500 }}>{formatRelativeTime(new Date(schemaActivity.updatedAt))}</span>
+            </div>
+          </div>
+        )}
+
+        <div className="adminforge-table-wrapper">
+          <div style={{ padding: '24px', borderBottom: '1px solid var(--color-border)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+            <h3 style={{ fontSize: '18px', fontWeight: 600 }}>Registered Collections</h3>
+          </div>
+          <table className="adminforge-table">
+            <thead>
+              <tr>
+                <th style={{ width: 'auto' }}>Collection Name</th>
+                <th style={{ width: '180px' }}>Field Definitions</th>
+                <th style={{ width: '120px', textAlign: 'right' }}>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {config.collections
+                .filter((collection) => {
+                  const a = collection.access;
+                  if (!a?.read) return true;
+                  if (!role) return false;
+                  return a.read.includes(role);
+                })
+                .map((collection) => {
+                  return (
+                    <tr key={collection.name}>
+                      <td>
+                        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+                          <div style={{ width: '36px', height: '36px', borderRadius: '8px', background: '#f1f5f9', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#64748b' }}>
+                            <span className="material-symbols-outlined" style={{ fontSize: '20px' }}>
+                              {collection.icon || 'database'}
+                            </span>
+                          </div>
+                          <span style={{ fontWeight: 600, color: 'var(--color-text)', fontSize: '15px' }}>{collection.label}</span>
+                        </div>
+                      </td>
+                      <td>
+                        <span className="adminforge-badge adminforge-badge-secondary" style={{ padding: '4px 10px' }}>
+                          {Object.keys(collection.fields).length} mapped fields
+                        </span>
+                      </td>
+                      <td style={{ textAlign: 'right' }}>
+                        <div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end' }}>
+                          <Link href={`/admin/${collection.name}`} className="adminforge-btn-icon" title="View Data">
+                            <span className="material-symbols-outlined" style={{ fontSize: '20px' }}>database</span>
+                          </Link>
+                          <Link href={`/admin/${collection.name}/schema`} className="adminforge-btn-icon" title="View Schema">
+                            <span className="material-symbols-outlined" style={{ fontSize: '20px' }}>visibility</span>
+                          </Link>
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                })}
+            </tbody>
+          </table>
+          <div style={{ padding: '20px 24px', background: '#fcfcfd', borderTop: '1px solid var(--color-border)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+            <p style={{ fontSize: '13px', color: 'var(--color-text-secondary)' }}>
+              Showing {config.collections.length} models from your current configuration.
+            </p>
+          </div>
+        </div>
+      </div>
+    </AdminLayout>
+  );
+}

package/src/ui/screens/AgentTokenPage.tsx

@@ -0,0 +1,232 @@
+"use client";
+
+import React, { useState } from "react";
+import { AdminLayout } from "../components/AdminLayout.js";
+import type { AdminForgeConfig } from "../../core/index.js";
+import { useAdminSession } from "../../auth/provider.js";
+import { useAdminForge } from "../AdminForgeContext.js";
+
+interface AgentTokenPageProps {
+  config: AdminForgeConfig;
+}
+
+export function AgentTokenPage({ config }: AgentTokenPageProps) {
+  const { apiBase } = useAdminForge();
+  const session = useAdminSession();
+  const [selectedScopes, setSelectedScopes] = useState<string[]>([]);
+  const [expiresIn, setExpiresIn] = useState(600); // Default 10 min
+  const [token, setToken] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const toggleScope = (scope: string) => {
+    setSelectedScopes(prev => 
+      prev.includes(scope) ? prev.filter(s => s !== scope) : [...prev, scope]
+    );
+  };
+
+  const handleGenerate = async () => {
+    setLoading(true);
+    try {
+      const res = await fetch(`${apiBase}/_tokens`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ scope: selectedScopes, expiresIn }),
+      });
+      const data = await res.json();
+      if (data.token) {
+        setToken(data.token);
+      } else {
+        alert(data.error || "Failed to generate token");
+      }
+    } catch (e: any) {
+      alert("Error connecting to API: " + e.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const role = session?.role || (session?.user as any)?.role;
+
+  return (
+    <AdminLayout config={config} currentPath="/admin/settings/agent-tokens" role={role}>
+      <div className="adminforge-collection-page">
+        <div className="adminforge-page-header" style={{ marginBottom: '40px' }}>
+          <div>
+            <h1 style={{ fontSize: '24px', fontWeight: 700, margin: 0 }}>Agent Token Generator</h1>
+            <p style={{ color: '#64748b', fontSize: '14px', marginTop: '4px' }}>Issue secure, scoped passes for your AI agents.</p>
+          </div>
+        </div>
+
+        {token ? (
+          <div style={{ 
+            background: '#f0fdf4', 
+            border: '1px solid #10b981', 
+            borderRadius: '12px', 
+            padding: '32px',
+            boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)'
+          }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '20px' }}>
+              <span className="material-symbols-outlined" style={{ color: '#059669', fontSize: '32px' }}>verified_user</span>
+              <h2 style={{ fontSize: '20px', fontWeight: 700, color: '#064e3b', margin: 0 }}>Token Generated Successfully</h2>
+            </div>
+            
+            <div style={{ background: '#dcfce7', padding: '16px', borderRadius: '8px', marginBottom: '24px', border: '1px solid #10b98140' }}>
+              <p style={{ fontSize: '14px', color: '#166534', lineHeight: 1.6, margin: 0 }}>
+                <strong>⚠️ Security Alert:</strong> Copy this token now. It is never stored and will only be shown once. 
+              It will expire in <strong>{expiresIn / 60} minutes</strong>.
+              </p>
+            </div>
+
+            <div style={{ display: 'flex', gap: '12px' }}>
+              <input 
+                readOnly 
+                value={token} 
+                className="adminforge-input"
+                style={{ fontFamily: 'monospace', fontSize: '12px', flex: 1, height: '48px', background: 'white' }}
+              />
+              <button 
+                onClick={() => {
+                  navigator.clipboard.writeText(token);
+                  alert("Copied to clipboard!");
+                }}
+                className="adminforge-btn adminforge-btn-primary"
+                style={{ height: '48px', padding: '0 24px' }}
+              >
+                <span className="material-symbols-outlined">content_copy</span>
+                Copy
+              </button>
+            </div>
+            
+            <button 
+              onClick={() => setToken(null)}
+              className="adminforge-btn-text"
+              style={{ marginTop: '24px', display: 'flex', alignItems: 'center', gap: '8px', color: '#059669', background: 'none', border: 'none', cursor: 'pointer', fontWeight: 600 }}
+            >
+              <span className="material-symbols-outlined" style={{ fontSize: '18px' }}>refresh</span>
+              Generate another token
+            </button>
+          </div>
+        ) : (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>
+            <div className="adminforge-table-wrapper">
+              <table className="adminforge-table">
+                <thead>
+                  <tr>
+                    <th>Collection</th>
+                    <th style={{ textAlign: 'center' }}>Create</th>
+                    <th style={{ textAlign: 'center' }}>Read</th>
+                    <th style={{ textAlign: 'center' }}>Update</th>
+                    <th style={{ textAlign: 'center' }}>Delete</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {config.collections.map(c => (
+                    <tr key={c.name}>
+                      <td style={{ fontWeight: 600 }}>
+                        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+                          <span className="material-symbols-outlined" style={{ fontSize: '20px', color: '#94a3b8' }}>{c.icon || 'database'}</span>
+                          {c.label}
+                        </div>
+                      </td>
+                      {["create", "read", "update", "delete"].map(action => {
+                        const scope = `${c.name}:${action}`;
+                        return (
+                          <td key={action} style={{ textAlign: 'center' }}>
+                            <div style={{ display: 'flex', justifyContent: 'center' }}>
+                              <input 
+                                type="checkbox"
+                                checked={selectedScopes.includes(scope)}
+                                onChange={() => toggleScope(scope)}
+                                style={{ width: '18px', height: '18px', cursor: 'pointer' }}
+                              />
+                            </div>
+                          </td>
+                        );
+                      })}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+
+            <div style={{ 
+              display: 'flex', 
+              justifyContent: 'space-between', 
+              alignItems: 'center',
+              background: '#fff',
+              padding: '24px',
+              borderRadius: '12px',
+              border: '1px solid var(--color-border)',
+              boxShadow: 'var(--shadow-sm)'
+            }}>
+              <div>
+                <div style={{ marginBottom: '16px' }}>
+                  <p style={{ fontWeight: 700, fontSize: '16px', color: 'var(--color-text)', marginBottom: '8px', margin: 0 }}>
+                    {selectedScopes.length} scopes selected
+                  </p>
+                  <div style={{ display: 'flex', gap: '8px', marginTop: '12px' }}>
+                    {[
+                      { label: '10m', val: 600 },
+                      { label: '30m', val: 1800 },
+                      { label: '1h', val: 3600 }
+                    ].map(opt => (
+                      <button
+                        key={opt.val}
+                        onClick={() => setExpiresIn(opt.val)}
+                        style={{
+                          padding: '6px 12px',
+                          fontSize: '12px',
+                          fontWeight: 600,
+                          borderRadius: '6px',
+                          border: '1px solid',
+                          background: expiresIn === opt.val ? 'var(--color-primary)' : '#fff',
+                          color: expiresIn === opt.val ? '#fff' : 'var(--color-text)',
+                          borderColor: expiresIn === opt.val ? 'var(--color-primary)' : 'var(--color-border)',
+                          cursor: 'pointer',
+                          transition: 'all 0.2s'
+                        }}
+                      >
+                        {opt.label}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+                <p style={{ fontSize: '13px', color: '#64748b', margin: 0 }}>
+                  Token will expire in {expiresIn / 60} minutes.
+                </p>
+              </div>
+              <button 
+                onClick={handleGenerate}
+                disabled={loading || selectedScopes.length === 0}
+                className="adminforge-btn adminforge-btn-primary"
+                style={{ padding: '12px 32px', fontSize: '15px' }}
+              >
+                {loading ? "Generating..." : "Generate Agent Token"}
+              </button>
+            </div>
+
+            <div style={{ marginTop: '24px' }}>
+              <h3 style={{ fontSize: '11px', fontWeight: 700, color: '#94a3b8', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: '16px', margin: 0 }}>
+                Security Protocol
+              </h3>
+              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '24px', marginTop: '16px' }}>
+                <div style={{ background: '#fff', padding: '20px', borderRadius: '8px', border: '1px solid var(--color-border)' }}>
+                  <p style={{ fontSize: '13px', fontWeight: 600, marginBottom: '8px', margin: 0 }}>Short-Lived Keys</p>
+                  <p style={{ fontSize: '13px', color: '#64748b', lineHeight: 1.6, margin: 0 }}>
+                    Tokens expire after 10 minutes. This reduces the risk of long-term credential leakage.
+                  </p>
+                </div>
+                <div style={{ background: '#fff', padding: '20px', borderRadius: '8px', border: '1px solid var(--color-border)' }}>
+                  <p style={{ fontSize: '13px', fontWeight: 600, marginBottom: '8px', margin: 0 }}>Scoped Authority</p>
+                  <p style={{ fontSize: '13px', color: '#64748b', lineHeight: 1.6, margin: 0 }}>
+                    Agents are strictly limited to the checkboxes above. They cannot bypass RBAC rules.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </AdminLayout>
+  );
+}

package/src/ui/screens/CollectionFormPage.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import type { AdminForgeConfig, CollectionDefinition } from "../../core";
+import { AdminLayout } from "../components/AdminLayout.js";
+import { FormEngine } from "../form-engine/FormEngine.js";
+import Link from "next/link";
+import { useAdminSession } from "../../auth/provider.js";
+
+interface CollectionFormPageProps {
+  config: AdminForgeConfig;
+  collection: CollectionDefinition;
+  record?: Record<string, unknown> | null;
+  isNew: boolean;
+  role?: string;
+}
+
+function formatDate(date: Date) {
+  if (isNaN(date.getTime())) return "Invalid date";
+  return date.toLocaleString('en-US', { 
+    month: 'short', 
+    day: 'numeric', 
+    year: 'numeric', 
+    hour: 'numeric', 
+    minute: '2-digit',
+    hour12: true 
+  });
+}
+
+export function CollectionFormPage({ config, collection, record, isNew, role: propRole }: CollectionFormPageProps) {
+  const session = useAdminSession();
+  const role = propRole || session?.role || session?.user?.role;
+
+  return (
+    <AdminLayout config={config} currentPath={`/admin/${collection.name}`} role={role}>
+      <div className="adminforge-collection-page">
+        <div className="adminforge-page-header">
+          <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+            <h2 style={{ fontSize: '24px', fontWeight: 700, margin: 0 }}>{isNew ? `Create ${collection.label}` : `Edit ${collection.label}`}</h2>
+            {!isNew && (
+              <span className="adminforge-badge" style={{ background: '#f8fafc', color: '#64748b', borderColor: '#e2e8f0', fontSize: '11px' }}>
+                ID: {String(record?.id).substring(0, 8)}...
+              </span>
+            )}
+          </div>
+          <div style={{ display: 'flex', gap: '12px' }}>
+            {!isNew && (
+              <button
+                className="adminforge-btn adminforge-btn-danger"
+                onClick={async () => {
+                  if (confirm("Are you sure you want to delete this item?")) {
+                    const res = await fetch(`/api/${collection.name}/${record?.id}`, { method: 'DELETE' });
+                    if (res.ok) {
+                      window.location.href = `/admin/${collection.name}`;
+                    } else {
+                      const err = await res.json();
+                      alert(err.error || "Failed to delete item");
+                    }
+                  }
+                }}
+              >
+                <span className="material-symbols-outlined" style={{ fontSize: '20px', marginRight: '8px' }}>delete</span>
+                Delete
+              </button>
+            )}
+            <Link href={`/admin/${collection.name}`} className="adminforge-btn adminforge-btn-secondary">
+              <span className="material-symbols-outlined" style={{ fontSize: '20px', marginRight: '8px' }}>arrow_back</span>
+              Back
+            </Link>
+          </div>
+        </div>
+
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
+          <FormEngine collection={collection} record={record} isNew={isNew} role={role} />
+          
+          {!isNew && record && (
+            <div style={{ 
+              padding: '24px', 
+              background: 'var(--color-surface)', 
+              border: '1px solid var(--color-border)', 
+              borderRadius: 'var(--radius-lg)',
+              boxShadow: 'var(--shadow-sm)'
+            }}>
+              <h3 style={{ 
+                fontSize: '14px', 
+                fontWeight: 600, 
+                color: '#64748b', 
+                marginBottom: '20px', 
+                display: 'flex', 
+                alignItems: 'center', 
+                gap: '10px',
+                textTransform: 'uppercase',
+                letterSpacing: '0.025em'
+              }}>
+                <span className="material-symbols-outlined" style={{ fontSize: '20px', color: 'var(--color-primary)' }}>info</span>
+                System Information
+              </h3>
+              
+              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '32px' }}>
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+                  <div style={{ fontSize: '11px', fontWeight: 700, color: '#94a3b8', textTransform: 'uppercase' }}>Created</div>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+                    <div style={{ width: '32px', height: '32px', borderRadius: '50%', background: '#f1f5f9', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#64748b' }}>
+                      <span className="material-symbols-outlined" style={{ fontSize: '18px' }}>person</span>
+                    </div>
+                    <div>
+                      <div style={{ fontSize: '14px', color: 'var(--color-text)', fontWeight: 500 }}>Admin</div>
+                      <div style={{ fontSize: '12px', color: '#64748b' }}>
+                        {record.createdAt ? formatDate(new Date(record.createdAt as string)) : 'Unknown date'}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+                  <div style={{ fontSize: '11px', fontWeight: 700, color: '#94a3b8', textTransform: 'uppercase' }}>Last Updated</div>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+                    <div style={{ width: '32px', height: '32px', borderRadius: '50%', background: '#f0f9ff', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#0284c7' }}>
+                      <span className="material-symbols-outlined" style={{ fontSize: '18px' }}>edit_note</span>
+                    </div>
+                    <div>
+                      <div style={{ fontSize: '14px', color: 'var(--color-text)', fontWeight: 500 }}>Admin</div>
+                      <div style={{ fontSize: '12px', color: '#64748b' }}>
+                        {(record.updatedAt || record.createdAt) ? formatDate(new Date((record.updatedAt || record.createdAt) as string)) : 'Unknown date'}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </AdminLayout>
+  );
+}