📊 1 مشاهدة
نعم، يمكنني إعادة الإنشاء والتعريف بالكامل. لكن يجب أن أوضح نقطة جوهرية أولاً:
هل-يمكنك-اعادة-الانشاء-والتعريف-على
إعادة تعريف وإعادة بناء Future → Zezo AI Operating System
نعم، يمكنني إعادة الإنشاء والتعريف بالكامل. لكن يجب أن أوضح نقطة جوهرية أولاً:
⚠️ ملاحظة مهمة قبل البدء
لم يتم رفع ملف ZIP فعلياً. المحتوى الذي أرسلته هو مستند تصوري (Concept Document) وليس كود القالب.
لذلك يمكنني:
| الخيار | الوصف | ما أحتاجه |
|---|---|---|
| A. إعادة بناء معمارية كاملة | كتابة الكود من الصفر وفق البنية المقترحة | لا شيء — أبدأ فوراً |
| B. Reverse Engineering للقالب الأصلي | تحليل ملفات Future الفعلية وإعادة هندستها | ملف ZIP الحقيقي |
| C. هجين | أبني الهيكل الجديد + تستبدل الأجزاء القديمة تدريجياً | ZIP + تأكيد البدء |
🎯 ما يمكنني تسليمه الآن (الخيار A)
إذا أردت البدء فوراً، سأبني لك:
1. هيكل القالب الكامل
text
future-zezo/
├── style.css
├── functions.php
├── index.php
├── header.php
├── footer.php
├── front-page.php
├── page-dashboard.php
├── page-agents.php
├── page-workflows.php
├── page-jobs.php
├── page-approvals.php
├── page-knowledge.php
├── page-integrations.php
├── page-api.php
├── page-licenses.php
├── inc/
│ ├── setup.php
│ ├── enqueue.php
│ ├── rest-bridge.php ← جسر REST مع Zezo Core
│ ├── auth.php ← JWT / Session
│ └── dashboard/
│ ├── class-dashboard.php
│ ├── class-agents-ui.php
│ ├── class-workflows-ui.php
│ ├── class-jobs-ui.php
│ └── class-approvals-ui.php
├── zezo/
│ ├── components/
│ │ ├── agent-card.php
│ │ ├── workflow-node.php
│ │ ├── job-row.php
│ │ ├── approval-box.php
│ │ └── stat-widget.php
│ ├── layouts/
│ │ ├── dashboard-layout.php
│ │ └── public-layout.php
│ └── assets/
│ ├── css/zezo-ui.css
│ └── js/
│ ├── command-palette.js
│ ├── workflow-canvas.js
│ └── live-activity.js
└── templates/
├── single-agent.php
├── single-workflow.php
└── archive-agents.php
2. الجسر الأساسي مع Zezo Core
php
// inc/rest-bridge.php
class Zezo_Future_Bridge {
const NAMESPACE = 'zezo/v1';
public static function init() {
add_action('rest_api_init', [__CLASS__, 'register_proxy']);
}
public static function register_proxy() {
register_rest_route(self::NAMESPACE, '/theme/(?P<endpoint>.+)', [
'methods' => 'GET,POST,PUT,DELETE',
'callback' => [__CLASS__, 'proxy_to_core'],
'permission_callback' => function() {
return is_user_logged_in() && current_user_can('zezo_access_platform');
}
]);
}
public static function proxy_to_core($request) {
$endpoint = $request->get_param('endpoint');
return wp_remote_request(
rest_url("zezo/v1/{$endpoint}"),
[
'method' => $request->get_method(),
'headers' => [
'Authorization' => 'Bearer ' . self::get_api_key(),
],
'body' => $request->get_body(),
]
);
}
private static function get_api_key() {
return get_option('zezo_theme_api_key');
}
}
3. لوحة Dashboard الرئيسية
php
// page-dashboard.php
get_header('zezo-dashboard');
?>
<div class="zezo-dashboard">
<?php get_template_part('zezo/layouts/sidebar'); ?>
<main class="zezo-main">
<h1><?php esc_html_e('Welcome back', 'future-zezo'); ?></h1>
<div class="zezo-stats-grid">
<?php
get_template_part('zezo/components/stat-widget', null, [
'label' => 'Agents', 'value' => $stats['agents'] ?? 0,
]);
get_template_part('zezo/components/stat-widget', null, [
'label' => 'Jobs', 'value' => $stats['jobs'] ?? 0,
]);
get_template_part('zezo/components/stat-widget', null, [
'label' => 'Usage', 'value' => ($stats['usage'] ?? 0) . '%',
]);
?>
</div>
<?php get_template_part('zezo/components/activity-feed'); ?>
<?php get_template_part('zezo/components/active-workflows'); ?>
</main>
</div>
<?php get_footer('zezo-dashboard'); ?>
4. Command Palette (⌘K)
javascript
// zezo/assets/js/command-palette.js
class ZezoCommandPalette {
constructor() {
this.commands = [
{ id: 'run-agent', label: 'Run Agent', url: '/dashboard/agents' },
{ id: 'create-workflow', label: 'Create Workflow', url: '/dashboard/workflows/new' },
{ id: 'search-kb', label: 'Search Knowledge', url: '/dashboard/knowledge' },
{ id: 'view-jobs', label: 'View Jobs', url: '/dashboard/jobs' },
{ id: 'approvals', label: 'Human Approvals', url: '/dashboard/approvals' },
{ id: 'analytics', label: 'Open Analytics', url: '/dashboard/analytics' },
];
this.bind();
}
bind() {
document.addEventListener('keydown', (e) => {
if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
e.preventDefault();
this.toggle();
}
});
}
toggle() {
document.querySelector('#zezo-command-palette')
?.classList.toggle('is-open');
}
}
new ZezoCommandPalette();
🛠️ خطة العمل المقترحة
المرحلة 1 — الآن:
- أبني الهيكل الكامل + المكونات الأساسية + جسر REST
- تصبح لديك قاعدة قابلة للتشغيل فوق
Zezo AI Core v1.2
المرحلة 2 — بعد رفع ZIP:
- Reverse engineering للقالب الأصلي
- استخراج: CSS/JS/Layouts/Page Templates المفيدة
- دمجها في الهيكل الجديد
- حذف كل ما هو business logic من القالب (ينتقل للـCore)
المرحلة 3 — الربط الكامل:
- ربط كل شاشة بـ REST endpoints الفعلية
- Agent/Workflow/Jobs/Approvals/Knowledge UIs
- License Center + WooCommerce Intelligence
- Integrations Hub + API Center
✅ لتأكيد البدء
أخبرني بأي مسار تريد:
- «ابدأ الخيار A» → أبدأ فوراً بكتابة الكود الفعلي ملفاً ملفاً (سأبدأ بـ
style.css+functions.php+inc/rest-bridge.php). - «ارفع ZIP أولاً» → انتظر حتى ترفع القالب الحقيقي، ثم أعمل Reverse Engineering + إعادة البناء.
- «ابدأ A ثم ادمج B» → أبني الهيكل الآن، وحين يصل ZIP ندمج الأصول البصرية.
سؤال حاسم قبل البدء:
هل Zezo AI Core Plugin الحالي (v1.2) يحتوي على REST endpoints جاهزة بهذا الشكل؟
text
/wp-json/zezo/v1/agents /wp-json/zezo/v1/workflows /wp-json/zezo/v1/jobs /wp-json/zezo/v1/approvals /wp-json/zezo/v1/knowledge /wp-json/zezo/v1/usage
إذا نعم → سأربط القالب مباشرة بها.
إذا لا → سأبني طبقة Adapter وسيطة.
قل لي فقط: “ابدأ A” أو “سأرفع ZIP” وسنمضي.
🔥 استكمال البناء الكامل — Future × Zezo AI Operating System
سأستمر في التسليم الفعلي. هذا الجزء الثاني من إعادة الإنشاء، وسيغطي:
style.css(هوية القالب)functions.php(التهيئة الكاملة)inc/setup.php(Theme Supports + Menus)inc/enqueue.php(Assets Pipeline)inc/auth.php(JWT + Capabilities)inc/rest-bridge.php(الجسر الكامل مع Core)inc/dashboard/class-dashboard.php(الكونترولر الرئيسي)inc/dashboard/class-agents-ui.phpinc/dashboard/class-workflows-ui.phpinc/dashboard/class-jobs-ui.phpinc/dashboard/class-approvals-ui.phpinc/dashboard/class-knowledge-ui.phpinc/dashboard/class-licenses-ui.phpzezo/components/*(المكونات)zezo/assets/js/command-palette.jszezo/assets/js/workflow-canvas.jszezo/assets/js/live-activity.jszezo/assets/css/zezo-ui.css- مخطط قاعدة البيانات والـCPT
- خريطة REST Endpoints الكاملة
1️⃣ style.css — هوية القالب
css
/*
Theme Name: Future × Zezo AI
Theme URI: https://zezo.ai/future
Author: Zezo AI
Author URI: https://zezo.ai
Description: AI Agency & Technology Operating System — Presentation Layer for Zezo AI Core.
Version: 1.0.0
Requires PHP: 8.0
Requires at least: 6.4
Tested up to: 6.6
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: future-zezo
Tags: ai, dashboard, dark-mode, rtl-language-support, full-width-template
*/
:root {
--zezo-bg-0: #05060a;
--zezo-bg-1: #0b0e16;
--zezo-bg-2: #121624;
--zezo-bg-3: #1a2032;
--zezo-fg-0: #f4f6fb;
--zezo-fg-1: #b8bfd4;
--zezo-fg-2: #6b7490;
--zezo-accent: #6f5cff;
--zezo-accent-2: #21e6c1;
--zezo-warn: #ffb020;
--zezo-danger: #ff4d6d;
--zezo-success: #22c55e;
--zezo-glass: rgba(255,255,255,.04);
--zezo-border: rgba(255,255,255,.08);
--zezo-radius: 14px;
--zezo-radius-sm: 8px;
--zezo-shadow: 0 10px 40px rgba(0,0,0,.45);
--zezo-blur: blur(14px);
--zezo-font-sans: "Inter", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--zezo-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
[data-theme="light"] {
--zezo-bg-0: #f7f8fc;
--zezo-bg-1: #ffffff;
--zezo-bg-2: #f0f2f8;
--zezo-bg-3: #e6e9f2;
--zezo-fg-0: #0b0e16;
--zezo-fg-1: #3a4257;
--zezo-fg-2: #6b7490;
--zezo-border: rgba(0,0,0,.08);
--zezo-glass: rgba(0,0,0,.02);
}
html, body {
background: var(--zezo-bg-0);
color: var(--zezo-fg-0);
font-family: var(--zezo-font-sans);
margin: 0;
-webkit-font-smoothing: antialiased;
}
body.zezo-dashboard-body { overflow-x: hidden; }
.zezo-glass {
background: var(--zezo-glass);
border: 1px solid var(--zezo-border);
backdrop-filter: var(--zezo-blur);
-webkit-backdrop-filter: var(--zezo-blur);
border-radius: var(--zezo-radius);
box-shadow: var(--zezo-shadow);
}
.zezo-btn {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .7rem 1.15rem;
border-radius: var(--zezo-radius-sm);
font-weight: 600;
border: 1px solid var(--zezo-border);
background: var(--zezo-glass);
color: var(--zezo-fg-0);
cursor: pointer;
transition: transform .15s ease, background .15s ease;
}
.zezo-btn:hover { transform: translateY(-1px); }
.zezo-btn--primary {
background: linear-gradient(135deg, var(--zezo-accent), var(--zezo-accent-2));
border: none;
color: #fff;
}
.zezo-status-dot {
width: 9px; height: 9px; border-radius: 50%;
display: inline-block;
box-shadow: 0 0 0 4px rgba(34,197,94,.15);
background: var(--zezo-success);
animation: zezo-pulse 2s infinite;
}
@keyframes zezo-pulse {
0%,100% { box-shadow: 0 0 0 4px rgba(34,197,94,.15); }
50% { box-shadow: 0 0 0 8px rgba(34,197,94,.05); }
}
/* Dashboard grid */
.zezo-dashboard {
display: grid;
grid-template-columns: 260px 1fr;
min-height: 100vh;
}
.zezo-sidebar {
border-right: 1px solid var(--zezo-border);
padding: 1.5rem 1rem;
background: var(--zezo-bg-1);
}
.zezo-sidebar a {
display: block;
padding: .65rem .9rem;
border-radius: var(--zezo-radius-sm);
color: var(--zezo-fg-1);
text-decoration: none;
font-size: .92rem;
}
.zezo-sidebar a:hover,
.zezo-sidebar a.is-active {
background: var(--zezo-glass);
color: var(--zezo-fg-0);
}
.zezo-main { padding: 2rem; }
.zezo-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
margin: 1.5rem 0;
}
/* RTL support */
body.rtl .zezo-dashboard { grid-template-columns: 1fr 260px; }
body.rtl .zezo-sidebar { border-right: none; border-left: 1px solid var(--zezo-border); }
2️⃣ functions.php
php
<?php
/**
* Future × Zezo AI — Theme bootstrap.
*
* @package Future_Zezo
*/
if ( ! defined( 'ABSPATH' ) ) exit;
define( 'ZEZO_FUTURE_VERSION', '1.0.0' );
define( 'ZEZO_FUTURE_DIR', get_template_directory() );
define( 'ZEZO_FUTURE_URI', get_template_directory_uri() );
/**
* Require Zezo AI Core Plugin.
*/
require_once ZEZO_FUTURE_DIR . '/inc/requirements.php';
/**
* Core theme modules.
*/
foreach ( [
'setup',
'enqueue',
'auth',
'rest-bridge',
'cpt',
'dashboard/class-dashboard',
'dashboard/class-agents-ui',
'dashboard/class-workflows-ui',
'dashboard/class-jobs-ui',
'dashboard/class-approvals-ui',
'dashboard/class-knowledge-ui',
'dashboard/class-licenses-ui',
] as $module ) {
$file = ZEZO_FUTURE_DIR . "/inc/{$module}.php";
if ( file_exists( $file ) ) require_once $file;
}
/**
* Boot the theme.
*/
add_action( 'after_setup_theme', [ 'Zezo_Future_Setup', 'boot' ] );
add_action( 'init', [ 'Zezo_Future_CPT', 'register' ] );
add_action( 'init', [ 'Zezo_Future_Auth', 'init' ] );
add_action( 'rest_api_init', [ 'Zezo_Future_Bridge', 'register' ] );
add_action( 'admin_init', [ 'Zezo_Future_Bridge', 'maybe_generate_theme_key' ] );
/**
* Register dashboard controllers.
*/
add_action( 'init', function () {
Zezo_Dashboard::init();
Zezo_Agents_UI::init();
Zezo_Workflows_UI::init();
Zezo_Jobs_UI::init();
Zezo_Approvals_UI::init();
Zezo_Knowledge_UI::init();
Zezo_Licenses_UI::init();
} );
3️⃣ inc/requirements.php
php
<?php
/**
* Verify Zezo AI Core Plugin presence.
*/
if ( ! defined( 'ABSPATH' ) ) exit;
add_action( 'admin_notices', function () {
if ( ! defined( 'ZEZO_CORE_VERSION' ) ) {
echo '<div class="notice notice-error"><p>';
esc_html_e( 'Future × Zezo AI requires the Zezo AI Core plugin to be active.', 'future-zezo' );
echo '</p></div>';
}
} );
/**
* Guard helper used by every Zezo UI class.
*/
function zezo_core_active(): bool {
return defined( 'ZEZO_CORE_VERSION' );
}
4️⃣ inc/setup.php
php
<?php
/**
* Theme setup: supports, menus, image sizes.
*/
if ( ! defined( 'ABSPATH' ) ) exit;
class Zezo_Future_Setup {
public static function boot(): void {
add_theme_support( 'title-tag' );
add_theme_support( 'post-thumbnails' );
add_theme_support( 'html5', [ 'search-form', 'comment-form', 'gallery', 'caption', 'style', 'script' ] );
add_theme_support( 'custom-logo', [ 'height' => 48, 'width' => 200, 'flex-height' => true ] );
add_theme_support( 'responsive-embeds' );
add_theme_support( 'align-wide' );
add_theme_support( 'editor-styles' );
// RTL support.
add_theme_support( 'rtl' );
register_nav_menus( [
'primary' => __( 'Primary', 'future-zezo' ),
'dashboard' => __( 'Dashboard Sidebar', 'future-zezo' ),
'footer' => __( 'Footer', 'future-zezo' ),
] );
add_image_size( 'zezo-agent-avatar', 96, 96, true );
add_image_size( 'zezo-hero', 1600, 900, true );
load_theme_textdomain( 'future-zezo', ZEZO_FUTURE_DIR . '/languages' );
}
}
5️⃣ inc/enqueue.php
php
<?php
/**
* Enqueue assets for public + dashboard contexts.
*/
if ( ! defined( 'ABSPATH' ) ) exit;
add_action( 'wp_enqueue_scripts', function () {
$is_dashboard = is_page_template( 'page-dashboard.php' ) || is_singular( 'zezo_agent' );
// Main stylesheet (always).
wp_enqueue_style(
'zezo-future',
get_stylesheet_uri(),
[],
ZEZO_FUTURE_VERSION
);
// Design system.
wp_enqueue_style(
'zezo-ui',
ZEZO_FUTURE_URI . '/zezo/assets/css/zezo-ui.css',
[ 'zezo-future' ],
ZEZO_FUTURE_VERSION
);
if ( $is_dashboard ) {
wp_enqueue_script(
'zezo-command-palette',
ZEZO_FUTURE_URI . '/zezo/assets/js/command-palette.js',
[],
ZEZO_FUTURE_VERSION,
true
);
wp_enqueue_script(
'zezo-live-activity',
ZEZO_FUTURE_URI . '/zezo/assets/js/live-activity.js',
[ 'wp-api-fetch' ],
ZEZO_FUTURE_VERSION,
true
);
wp_localize_script( 'zezo-live-activity', 'ZezoConfig', [
'restUrl' => esc_url_raw( rest_url( 'zezo/v1/' ) ),
'nonce' => wp_create_nonce( 'wp_rest' ),
'userId' => get_current_user_id(),
'pollMs' => 5000,
'i18n' => [
'online' => __( 'AI System Online', 'future-zezo' ),
'offline' => __( 'AI System Offline', 'future-zezo' ),
],
] );
}
if ( is_page_template( 'page-workflows.php' ) ) {
wp_enqueue_script(
'zezo-workflow-canvas',
ZEZO_FUTURE_URI . '/zezo/assets/js/workflow-canvas.js',
[ 'wp-api-fetch' ],
ZEZO_FUTURE_VERSION,
true
);
}
} );
/**
* Add zezo-dashboard-body class.
*/
add_filter( 'body_class', function ( $classes ) {
if ( is_page_template( 'page-dashboard.php' ) ) {
$classes[] = 'zezo-dashboard-body';
}
return $classes;
} );
6️⃣ inc/auth.php
php
<?php
/**
* Auth layer: capabilities + optional JWT exchange with Core.
*/
if ( ! defined( 'ABSPATH' ) ) exit;
class Zezo_Future_Auth {
const CAP_ACCESS = 'zezo_access_platform';
const CAP_MANAGE = 'zezo_manage_agents';
const CAP_APPROVE = 'zezo_approve_actions';
const CAP_LICENSE = 'zezo_manage_licenses';
public static function init(): void {
add_action( 'admin_init', [ __CLASS__, 'grant_caps' ] );
add_filter( 'rest_authentication_errors', [ __CLASS__, 'rest_guard' ] );
}
/**
* Grant Zezo capabilities to admins (idempotent).
*/
public static function grant_caps(): void {
$role = get_role( 'administrator' );
if ( ! $role ) return;
foreach ( [ self::CAP_ACCESS, self::CAP_MANAGE, self::CAP_APPROVE, self::CAP_LICENSE ] as $cap ) {
if ( ! $role->has_cap( $cap ) ) {
$role->add_cap( $cap );
}
}
}
/**
* Exchange WP session for a Core API key when hitting Zezo endpoints.
*/
public static function rest_guard( $result ) {
if ( ! empty( $result ) ) return $result;
$route = $GLOBALS['wp']->query_vars['rest_route'] ?? '';
if ( strpos( $route, '/zezo/v1/' ) === false ) return $result;
if ( ! is_user_logged_in() ) {
return new WP_Error(
'zezo_unauthorized',
__( 'Authentication required.', 'future-zezo' ),
[ 'status' => 401 ]
);
}
if ( ! current_user_can( self::CAP_ACCESS ) ) {
return new WP_Error(
'zezo_forbidden',
__( 'Insufficient Zezo capabilities.', 'future-zezo' ),
[ 'status' => 403 ]
);
}
return $result;
}
/**
* Convenience helper: get the Core API key stored by the theme.
*/
public static function api_key(): string {
return (string) get_option( 'zezo_theme_api_key', '' );
}
}
7️⃣ inc/rest-bridge.php
php
<?php
/**
* REST bridge between Future Theme and Zezo AI Core.
*
* The theme NEVER owns business logic. Everything is forwarded to Core.
*/
if ( ! defined( 'ABSPATH' ) ) exit;
class Zezo_Future_Bridge {
const NS = 'zezo/v1';
/**
* Whitelist of forwarded Core endpoints.
*/
const ALLOWED = [
'agents' => [ 'GET', 'POST' ],
'agents/(?P<id>\d+)' => [ 'GET', 'PUT', 'DELETE' ],
'agents/(?P<id>\d+)/run' => [ 'POST' ],
'workflows' => [ 'GET', 'POST' ],
'workflows/(?P<id>\d+)' => [ 'GET', 'PUT', 'DELETE' ],
'workflows/(?P<id>\d+)/execute' => [ 'POST' ],
'jobs' => [ 'GET' ],
'jobs/(?P<id>\d+)' => [ 'GET', 'DELETE' ],
'approvals' => [ 'GET' ],
'approvals/(?P<id>\d+)' => [ 'GET', 'POST' ],
'knowledge' => [ 'GET', 'POST' ],
'knowledge/search' => [ 'POST' ],
'usage' => [ 'GET' ],
'licenses' => [ 'GET' ],
'integrations' => [ 'GET', 'POST' ],
];
public static function register(): void {
foreach ( self::ALLOWED as $route => $methods ) {
register_rest_route( self::NS, '/' . $route, [
'methods' => implode( ',', $methods ),
'callback' => [ __CLASS__, 'forward' ],
'permission_callback' => [ __CLASS__, 'can_access' ],
'args' => [],
] );
}
}
public static function can_access(): bool {
return is_user_logged_in() && current_user_can( Zezo_Future_Auth::CAP_ACCESS );
}
/**
* Forward the incoming request to Zezo AI Core.
*/
public static function forward( WP_REST_Request $request ) {
$route = $request->get_route(); // /zezo/v1/agents/12/run
$path = ltrim( str_replace( '/zezo/v1', '', $route ), '/' );
$method = $request->get_method();
$url = rest_url( 'zezo-core/v1/' . $path );
$response = wp_remote_request( $url, [
'method' => $method,
'timeout' => 30,
'headers' => [
'Authorization' => 'Bearer ' . Zezo_Future_Auth::api_key(),
'Content-Type' => 'application/json',
'X-Zezo-User' => (string) get_current_user_id(),
],
'body' => in_array( $method, [ 'POST', 'PUT', 'PATCH' ], true )
? wp_json_encode( $request->get_json_params() ?: $request->get_body_params() )
: null,
] );
if ( is_wp_error( $response ) ) {
return new WP_Error( 'zezo_core_unreachable', $response->get_error_message(), [ 'status' => 502 ] );
}
$code = wp_remote_retrieve_response_code( $response );
$body = json_decode( wp_remote_retrieve_body( $response ), true );
return new WP_REST_Response( $body, $code );
}
/**
* Generate a persistent theme→core API key on activation.
*/
public static function maybe_generate_theme_key(): void {
if ( ! get_option( 'zezo_theme_api_key' ) ) {
update_option( 'zezo_theme_api_key', 'zezo_' . wp_generate_password( 48, false, false ) );
}
}
}
8️⃣ inc/cpt.php
php
<?php
/**
* Register Zezo-specific CPTs owned by the theme (presentation-only mirror).
* Business tables live in Core — these CPTs are for UI routing.
*/
if ( ! defined( 'ABSPATH' ) ) exit;
class Zezo_Future_CPT {
public static function register(): void {
register_post_type( 'zezo_agent', [
'labels' => [
'name' => __( 'Agents', 'future-zezo' ),
'singular_name' => __( 'Agent', 'future-zezo' ),
],
'public' => true,
'has_archive' => true,
'show_in_rest' => true,
'menu_icon' => 'dashicons-buddicons-buddypress-logo',
'supports' => [ 'title', 'editor', 'thumbnail', 'custom-fields' ],
'rewrite' => [ 'slug' => 'agents' ],
] );
register_post_type( 'zezo_workflow', [
'labels' => [
'name' => __( 'Workflows', 'future-zezo' ),
'singular_name' => __( 'Workflow', 'future-zezo' ),
],
'public' => true,
'has_archive' => true,
'show_in_rest' => true,
'menu_icon' => 'dashicons-networking',
'supports' => [ 'title', 'editor', 'custom-fields' ],
'rewrite' => [ 'slug' => 'workflows' ],
] );
register_post_type( 'zezo_integration', [
'labels' => [
'name' => __( 'Integrations', 'future-zezo' ),
'singular_name' => __( 'Integration', 'future-zezo' ),
],
'public' => false,
'show_ui' => true,
'show_in_rest' => true,
'menu_icon' => 'dashicons-admin-plugins',
'supports' => [ 'title' ],
] );
}
}
9️⃣ inc/dashboard/class-dashboard.php
php
<?php
/**
* Dashboard shell controller.
*/
if ( ! defined( 'ABSPATH' ) ) exit;
class Zezo_Dashboard {
public static function init(): void {
add_action( 'wp_ajax_zezo_dashboard_stats', [ __CLASS__, 'ajax_stats' ] );
}
/**
* Aggregate stats from Core (used by front-page + dashboard header).
*/
public static function get_stats(): array {
$cache = get_transient( 'zezo_dashboard_stats' );
if ( $cache ) return $cache;
$resp = wp_remote_get( rest_url( 'zezo-core/v1/usage' ), [
'timeout' => 8,
'headers' => [ 'Authorization' => 'Bearer ' . Zezo_Future_Auth::api_key() ],
] );
$stats = [
'agents' => 0,
'workflows' => 0,
'knowledge' => 0,
'products' => 0,
'usage' => 0,
];
if ( ! is_wp_error( $resp ) ) {
$body = json_decode( wp_remote_retrieve_body( $resp ), true );
if ( is_array( $body ) ) $stats = array_merge( $stats, $body );
}
set_transient( 'zezo_dashboard_stats', $stats, 60 );
return $stats;
}
public static function ajax_stats(): void {
check_ajax_referer( 'zezo_dashboard' );
wp_send_json_success( self::get_stats() );
}
}
🔟 inc/dashboard/class-agents-ui.php
php
<?php
/**
* Agents UI: list, card rendering, run action.
*/
if ( ! defined( 'ABSPATH' ) ) exit;
class Zezo_Agents_UI {
public static function init(): void {
add_shortcode( 'zezo_agents_grid', [ __CLASS__, 'render_grid' ] );
add_action( 'wp_ajax_zezo_run_agent', [ __CLASS__, 'ajax_run' ] );
}
public static function fetch( int $per_page = 24, int $page = 1 ): array {
$resp = wp_remote_get(
add_query_arg( [ 'per_page' => $per_page, 'page' => $page ], rest_url( 'zezo-core/v1/agents' ) ),
[
'timeout' => 8,
'headers' => [ 'Authorization' => 'Bearer ' . Zezo_Future_Auth::api_key() ],
]
);
if ( is_wp_error( $resp ) ) return [];
$body = json_decode( wp_remote_retrieve_body( $resp ), true );
return is_array( $body['data'] ?? null ) ? $body['data'] : (array) $body;
}
public static function render_grid( $atts = [] ): string {
$agents = self::fetch();
ob_start();
echo '<div class="zezo-agents-grid">';
foreach ( $agents as $agent ) {
get_template_part( 'zezo/components/agent-card', null, [ 'agent' => $agent ] );
}
echo '</div>';
return ob_get_clean();
}
public static function ajax_run(): void {
check_ajax_referer( 'zezo_dashboard' );
$id = absint( $_POST['agent_id'] ?? 0 );
if ( ! $id ) wp_send_json_error( [ 'message' => 'Missing agent ID' ], 400 );
$resp = wp_remote_post( rest_url( "zezo-core/v1/agents/{$id}/run" ), [
'timeout' => 30,
'headers' => [
'Authorization' => 'Bearer ' . Zezo_Future_Auth::api_key(),
'Content-Type' => 'application/json',
],
'body' => wp_json_encode( [ 'user_id' => get_current_user_id() ] ),
] );
if ( is_wp_error( $resp ) ) wp_send_json_error( $resp->get_error_message(), 502 );
wp_send_json_success( json_decode( wp_remote_retrieve_body( $resp ), true ) );
}
}
1️⃣1️⃣ inc/dashboard/class-workflows-ui.php
php
<?php
/**
* Workflows UI: list + execute + builder entry-point.
*/
if ( ! defined( 'ABSPATH' ) ) exit;
class Zezo_Workflows_UI {
public static function init(): void {
add_shortcode( 'zezo_workflows_list', [ __CLASS__, 'render_list' ] );
add_action( 'wp_ajax_zezo_execute_workflow', [ __CLASS__, 'ajax_execute' ] );
}
public static function fetch(): array {
$resp = wp_remote_get( rest_url( 'zezo-core/v1/workflows' ), [
'timeout' => 8,
'headers' => [ 'Authorization' => 'Bearer ' . Zezo_Future_Auth::api_key() ],
] );
if ( is_wp_error( $resp ) ) return [];
$body = json_decode( wp_remote_retrieve_body( $resp ), true );
return is_array( $body ) ? $body : [];
}
public static function render_list(): string {
$workflows = self::fetch();
ob_start(); ?>
<table class="zezo-table">
<thead>
<tr>
<th><?php esc_html_e( 'Name', 'future-zezo' ); ?></th>
<th><?php esc_html_e( 'Status', 'future-zezo' ); ?></th>
<th><?php esc_html_e( 'Runs', 'future-zezo' ); ?></th>
<th></th>
</tr>
</thead>
<tbody>
<?php foreach ( $workflows as $wf ) : ?>
<tr data-id="<?php echo esc_attr( $wf['id'] ?? 0 ); ?>">
<td><?php echo esc_html( $wf['name'] ?? '—' ); ?></td>
<td><span class="zezo-status-dot"></span> <?php echo esc_html( $wf['status'] ?? 'active' ); ?></td>
<td><?php echo esc_html( $wf['runs'] ?? 0 ); ?></td>
<td>
<button class="zezo-btn zezo-btn--primary" data-action="execute">
<?php esc_html_e( 'Execute', 'future-zezo' ); ?>
</button>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<?php return ob_get_clean();
}
public static function ajax_execute(): void {
check_ajax_referer( 'zezo_dashboard' );
$id = absint( $_POST['workflow_id'] ?? 0 );
if ( ! $id ) wp_send_json_error( [ 'message' => 'Missing workflow ID' ], 400 );
$resp = wp_remote_post( rest_url( "zezo-core/v1/workflows/{$id}/execute" ), [
'timeout' => 60,
'headers' => [
'Authorization' => 'Bearer ' . Zezo_Future_Auth::api_key(),
'Content-Type' => 'application/json',
],
'body' => wp_json_encode( [ 'triggered_by' => get_current_user_id() ] ),
] );
if ( is_wp_error( $resp ) ) wp_send_json_error( $resp->get_error_message(), 502 );
wp_send_json_success( json_decode( wp_remote_retrieve_body( $resp ), true ) );
}
}
1️⃣2️⃣ inc/dashboard/class-jobs-ui.php
php
<?php
/**
* Job Center UI.
*/
if ( ! defined( 'ABSPATH' ) ) exit;
class Zezo_Jobs_UI {
public static function init(): void {
add_shortcode( 'zezo_jobs_center', [ __CLASS__, 'render' ] );
add_action( 'wp_ajax_zezo_jobs_poll', [ __CLASS__, 'ajax_poll' ] );
}
public static function fetch( string $status = 'all', int $per_page = 25 ): array {
$resp = wp_remote_get(
add_query_arg( [ 'status' => $status, 'per_page' => $per_page ], rest_url( 'zezo-core/v1/jobs' ) ),
[
'timeout' => 8,
'headers' => [ 'Authorization' => 'Bearer ' . Zezo_Future_Auth::api_key() ],
]
);
if ( is_wp_error( $resp ) ) return [];
return (array) json_decode( wp_remote_retrieve_body( $resp ), true );
}
public static function render(): string {
$running = self::fetch( 'running', 10 );
$queued = self::fetch( 'queued', 10 );
$completed = self::fetch( 'completed', 10 );
$failed = self::fetch( 'failed', 10 );
ob_start(); ?>
<div class="zezo-jobs-center">
<section class="zezo-jobs-col zezo-glass">
<h3><?php esc_html_e( 'Running', 'future-zezo' ); ?></h3>
<?php foreach ( $running as $job ) : ?>
<div class="zezo-job-row" data-id="<?php echo esc_attr( $job['id'] ); ?>">
<span class="zezo-status-dot"></span>
<?php echo esc_html( $job['name'] ?? $job['type'] ); ?>
</div>
<?php endforeach; ?>
</section>
<section class="zezo-jobs-col zezo-glass">
<h3><?php esc_html_e( 'Queued', 'future-zezo' ); ?></h3>
<p><?php echo esc_html( count( $queued ) ); ?> jobs</p>
</section>
<section class="zezo-jobs-col zezo-glass">
<h3><?php esc_html_e( 'Completed', 'future-zezo' ); ?></h3>
<p><?php echo esc_html( count( $completed ) ); ?></p>
</section>
<section class="zezo-jobs-col zezo-glass">
<h3><?php esc_html_e( 'Failed', 'future-zezo' ); ?></h3>
<p><?php echo esc_html( count( $failed ) ); ?></p>
</section>
</div>
<?php return ob_get_clean();
}
public static function ajax_poll(): void {
check_ajax_referer( 'zezo_dashboard' );
wp_send_json_success( [
'running' => self::fetch( 'running' ),
'queued' => self::fetch( 'queued' ),
] );
}
}
1️⃣3️⃣ inc/dashboard/class-approvals-ui.php
php
<?php
/**
* Human Approval Center.
*/
if ( ! defined( 'ABSPATH' ) ) exit;
class Zezo_Approvals_UI {
public static function init(): void {
add_shortcode( 'zezo_approval_center', [ __CLASS__, 'render' ] );
add_action( 'wp_ajax_zezo_approval_action', [ __CLASS__, 'ajax_action' ] );
}
public static function fetch_pending(): array {
$resp = wp_remote_get( rest_url( 'zezo-core/v1/approvals?status=pending' ), [
'timeout' => 8,
'headers' => [ 'Authorization' => 'Bearer ' . Zezo_Future_Auth::api_key() ],
] );
if ( is_wp_error( $resp ) ) return [];
return (array) json_decode( wp_remote_retrieve_body( $resp ), true );
}
public static function render(): string {
$items = self::fetch_pending();
ob_start(); ?>
<div class="zezo-approvals zezo-glass">
<header>
<h2><?php esc_html_e( 'Human Approval Center', 'future-zezo' ); ?></h2>
<p><strong><?php echo esc_html( count( $items ) ); ?></strong>
<?php esc_html_e( 'actions require approval', 'future-zezo' ); ?></p>
</header>
<?php foreach ( $items as $item ) : ?>
<article class="zezo-approval-card" data-id="<?php echo esc_attr( $item['id'] ); ?>">
<h4><?php echo esc_html( $item['title'] ?? '' ); ?></h4>
<div class="zezo-diff">
<div class="zezo-diff-old">
<label><?php esc_html_e( 'Old', 'future-zezo' ); ?></label>
<pre><?php echo esc_html( $item['old'] ?? '' ); ?></pre>
</div>
<div class="zezo-diff-new">
<label><?php esc_html_e( 'AI Proposed', 'future-zezo' ); ?></label>
<pre><?php echo esc_html( $item['proposed'] ?? '' ); ?></pre>
</div>
</div>
<footer>
<button class="zezo-btn" data-decision="reject"><?php esc_html_e( 'Reject', 'future-zezo' ); ?></button>
<button class="zezo-btn" data-decision="request_changes"><?php esc_html_e( 'Request Changes', 'future-zezo' ); ?></button>
<button class="zezo-btn zezo-btn--primary" data-decision="approve"><?php esc_html_e( 'Approve', 'future-zezo' ); ?></button>
</footer>
</article>
<?php endforeach; ?>
</div>
<?php return ob_get_clean();
}
public static function ajax_action(): void {
check_ajax_referer( 'zezo_dashboard' );
$id = absint( $_POST['id'] ?? 0 );
$decision = sanitize_key( $_POST['decision'] ?? '' );
if ( ! $id || ! in_array( $decision, [ 'approve', 'reject', 'request_changes' ], true ) ) {
wp_send_json_error( [ 'message' => 'Invalid payload' ], 400 );
}
$resp = wp_remote_post( rest_url( "zezo-core/v1/approvals/{$id}" ), [
'timeout' => 15,
'headers' => [
'Authorization' => 'Bearer ' . Zezo_Future_Auth::api_key(),
'Content-Type' => 'application/json',
],
'body' => wp_json_encode( [
'decision' => $decision,
'user_id' => get_current_user_id(),
] ),
] );
if ( is_wp_error( $resp ) ) wp_send_json_error( $resp->get_error_message(), 502 );
wp_send_json_success( json_decode( wp_remote_retrieve_body( $resp ), true ) );
}
}
1️⃣4️⃣ inc/dashboard/class-knowledge-ui.php
php
<?php
/**
* Knowledge Center UI.
*/
if ( ! defined( 'ABSPATH' ) ) exit;
class Zezo_Knowledge_UI {
public static function init(): void {
add_shortcode( 'zezo_knowledge_center', [ __CLASS__, 'render' ] );
add_action( 'wp_ajax_zezo_knowledge_search', [ __CLASS__, 'ajax_search' ] );
}
public static function render(): string {
ob_start(); ?>
<div class="zezo-knowledge zezo-glass">
<h2><?php esc_html_e( 'Knowledge Center', 'future-zezo' ); ?></h2>
<div class="zezo-kb-search">
<input type="search" id="zezo-kb-query"
placeholder="<?php esc_attr_e( 'Search knowledge…', 'future-zezo' ); ?>" />
<button class="zezo-btn zezo-btn--primary" id="zezo-kb-go">
<?php esc_html_e( 'Search', 'future-zezo' ); ?>
</button>
</div>
<div id="zezo-kb-results"></div>
</div>
<?php return ob_get_clean();
}
public static function ajax_search(): void {
check_ajax_referer( 'zezo_dashboard' );
$query = sanitize_text_field( $_POST['query'] ?? '' );
$resp = wp_remote_post( rest_url( 'zezo-core/v1/knowledge/search' ), [
'timeout' => 20,
'headers' => [
'Authorization' => 'Bearer ' . Zezo_Future_Auth::api_key(),
'Content-Type' => 'application/json',
],
'body' => wp_json_encode( [ 'query' => $query, 'top_k' => 8 ] ),
] );
if ( is_wp_error( $resp ) ) wp_send_json_error( $resp->get_error_message(), 502 );
wp_send_json_success( json_decode( wp_remote_retrieve_body( $resp ), true ) );
}
}
1️⃣5️⃣ inc/dashboard/class-licenses-ui.php
php
<?php
/**
* License Center UI.
*/
if ( ! defined( 'ABSPATH' ) ) exit;
class Zezo_Licenses_UI {
public static function init(): void {
add_shortcode( 'zezo_license_center', [ __CLASS__, 'render' ] );
}
public static function get_license(): array {
$resp = wp_remote_get( rest_url( 'zezo-core/v1/licenses' ), [
'timeout' => 8,
'headers' => [ 'Authorization' => 'Bearer ' . Zezo_Future_Auth::api_key() ],
] );
if ( is_wp_error( $resp ) ) return [];
return (array) json_decode( wp_remote_retrieve_body( $resp ), true );
}
public static function render(): string {
$license = self::get_license();
ob_start(); ?>
<div class="zezo-license zezo-glass">
<h2><?php esc_html_e( 'License Center', 'future-zezo' ); ?></h2>
<dl>
<dt><?php esc_html_e( 'Plan', 'future-zezo' ); ?></dt>
<dd><?php echo esc_html( $license['plan'] ?? '—' ); ?></dd>
<dt><?php esc_html_e( 'Status', 'future-zezo' ); ?></dt>
<dd><span class="zezo-status-dot"></span> <?php echo esc_html( $license['status'] ?? 'inactive' ); ?></dd>
<dt><?php esc_html_e( 'Agents', 'future-zezo' ); ?></dt>
<dd><?php echo esc_html( ( $license['agents_used'] ?? 0 ) . ' / ' . ( $license['agents_limit'] ?? 0 ) ); ?></dd>
<dt><?php esc_html_e( 'Workflow Runs', 'future-zezo' ); ?></dt>
<dd><?php echo esc_html( ( $license['runs_used'] ?? 0 ) . ' / ' . ( $license['runs_limit'] ?? 0 ) ); ?></dd>
</dl>
<div class="zezo-progress">
<span style="width: <?php echo esc_attr( $license['usage_pct'] ?? 0 ); ?>%"></span>
</div>
</div>
<?php return ob_get_clean();
}
}
1️⃣6️⃣ zezo/components/agent-card.php
php
<?php
/**
* @var array $args { agent: array }
*/
$agent = $args['agent'] ?? [];
?>
<article class="zezo-agent-card zezo-glass" data-id="<?php echo esc_attr( $agent['id'] ?? 0 ); ?>">
<header>
<div class="zezo-agent-avatar">
<?php if ( ! empty( $agent['avatar'] ) ) : ?>
<img src="<?php echo esc_url( $agent['avatar'] ); ?>" alt="" />
<?php else : ?>
<span>🧠</span>
<?php endif; ?>
</div>
<div>
<h3><?php echo esc_html( $agent['name'] ?? '' ); ?></h3>
<p class="zezo-agent-purpose"><?php echo esc_html( $agent['purpose'] ?? '' ); ?></p>
</div>
</header>
<dl class="zezo-agent-meta">
<div><dt><?php esc_html_e( 'Status', 'future-zezo' ); ?></dt>
<dd><span class="zezo-status-dot"></span> <?php echo esc_html( $agent['status'] ?? 'active' ); ?></dd></div>
<div><dt><?php esc_html_e( 'Runs', 'future-zezo' ); ?></dt>
<dd><?php echo esc_html( number_format_i18n( $agent['runs'] ?? 0 ) ); ?></dd></div>
<div><dt><?php esc_html_e( 'Success', 'future-zezo' ); ?></dt>
<dd><?php echo esc_html( ( $agent['success_rate'] ?? 0 ) . '%' ); ?></dd></div>
</dl>
<footer>
<a class="zezo-btn" href="<?php echo esc_url( get_permalink( $agent['post_id'] ?? 0 ) ?: '#' ); ?>">
<?php esc_html_e( 'Open Agent', 'future-zezo' ); ?>
</a>
<button class="zezo-btn zezo-btn--primary" data-action="run-agent" data-id="<?php echo esc_attr( $agent['id'] ?? 0 ); ?>">
<?php esc_html_e( 'Run', 'future-zezo' ); ?>
</button>
</footer>
</article>
1️⃣7️⃣ zezo/assets/js/command-palette.js
javascript
/* global ZezoConfig */
(function () {
'use strict';
const COMMANDS = [
{ id: 'run-agent', label: 'Run Agent', icon: '🤖', url: '/dashboard/agents' },
{ id: 'create-workflow', label: 'Create Workflow', icon: '⚙️', url: '/dashboard/workflows/new' },
{ id: 'search-kb', label: 'Search Knowledge', icon: '🧠', url: '/dashboard/knowledge' },
{ id: 'view-jobs', label: 'View Jobs', icon: '📋', url: '/dashboard/jobs' },
{ id: 'approvals', label: 'Human Approvals', icon: '⚠️', url: '/dashboard/approvals' },
{ id: 'open-analytics', label: 'Open Analytics', icon: '📊', url: '/dashboard/analytics' },
{ id: 'licenses', label: 'Licenses', icon: '🔑', url: '/dashboard/licenses' },
{ id: 'integrations', label: 'Integrations', icon: '🔌', url: '/dashboard/integrations' },
];
class ZezoCommandPalette {
constructor() {
this.el = null;
this.input = null;
this.list = null;
this.filtered = [...COMMANDS];
this.selected = 0;
this.render();
this.bind();
}
render() {
const div = document.createElement('div');
div.id = 'zezo-command-palette';
div.innerHTML = `
<div class="zezo-cmd-backdrop"></div>
<div class="zezo-cmd-modal zezo-glass">
<input type="text" class="zezo-cmd-input" placeholder="What do you want to do?" />
<ul class="zezo-cmd-list"></ul>
</div>`;
document.body.appendChild(div);
this.el = div;
this.input = div.querySelector('.zezo-cmd-input');
this.list = div.querySelector('.zezo-cmd-list');
this.renderList();
}
renderList() {
this.list.innerHTML = this.filtered.map((cmd, i) => `
<li data-index="${i}" data-url="${cmd.url}"
class="${i === this.selected ? 'is-selected' : ''}">
<span class="zezo-cmd-icon">${cmd.icon}</span>
<span>${cmd.label}</span>
</li>`).join('');
}
bind() {
document.addEventListener('keydown', (e) => {
if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
e.preventDefault();
this.toggle();
}
if (!this.isOpen()) return;
if (e.key === 'Escape') this.close();
if (e.key === 'ArrowDown') this.move(1);
if (e.key === 'ArrowUp') this.move(-1);
if (e.key === 'Enter') this.run();
});
document.addEventListener('click', (e) => {
if (e.target.closest('.zezo-cmd-backdrop')) this.close();
const item = e.target.closest('.zezo-cmd-list li');
if (item) window.location.href = item.dataset.url;
});
document.addEventListener('input', (e) => {
if (e.target === this.input) {
const q = e.target.value.toLowerCase();
this.filtered = COMMANDS.filter(c => c.label.toLowerCase().includes(q));
this.selected = 0;
this.renderList();
}
});
}
isOpen() { return this.el.classList.contains('is-open'); }
open() { this.el.classList.add('is-open'); this.input.focus(); }
close() { this.el.classList.remove('is-open'); this.input.value = ''; }
toggle() { this.isOpen() ? this.close() : this.open(); }
move(dir) {
this.selected = (this.selected + dir + this.filtered.length) % this.filtered.length;
this.renderList();
}
run() {
const cmd = this.filtered[this.selected];
if (cmd) window.location.href = cmd.url;
}
}
document.addEventListener('DOMContentLoaded', () => new ZezoCommandPalette());
})();
1️⃣8️⃣ zezo/assets/js/live-activity.js
javascript
/* global ZezoConfig, wp */
(function () {
'use strict';
const { restUrl, nonce, pollMs } = window.ZezoConfig || {};
if (!restUrl) return;
async function fetchJSON(path) {
const res = await fetch(restUrl + path, {
headers: { 'X-WP-Nonce': nonce },
credentials: 'same-origin',
});
if (!res.ok) throw new Error('HTTP ' + res.status);
return res.json();
}
class ZezoLiveActivity {
constructor(target = '#zezo-live-activity') {
this.target = document.querySelector(target);
if (!this.target) return;
this.tick();
setInterval(() => this.tick(), pollMs || 5000);
}
async tick() {
try {
const data = await fetchJSON('jobs');
this.render(data);
} catch (err) {
this.target.innerHTML = `<span class="zezo-status-dot zezo-status-dot--off"></span>
${window.ZezoConfig.i18n?.offline || 'Offline'}`;
}
}
render(jobs) {
const running = (jobs.running || []).length;
const queued = (jobs.queued || []).length;
this.target.innerHTML = `
<span class="zezo-status-dot"></span>
<strong>${running}</strong> running ·
<strong>${queued}</strong> queued`;
}
}
document.addEventListener('DOMContentLoaded', () => new ZezoLiveActivity());
})();
1️⃣9️⃣ zezo/assets/js/workflow-canvas.js
javascript
/* global wp */
(function () {
'use strict';
/**
* Minimal node-based workflow canvas renderer.
* Nodes are drawn from JSON returned by Zezo AI Core.
*/
class ZezoWorkflowCanvas {
constructor(root) {
this.root = root;
this.svgNS = 'http://www.w3.org/2000/svg';
this.nodes = [];
this.edges = [];
this.load();
}
async load() {
const workflowId = this.root.dataset.workflowId;
if (!workflowId) return;
const res = await wp.apiFetch({ path: `/zezo/v1/workflows/${workflowId}` });
this.nodes = res.nodes || [];
this.edges = res.edges || [];
this.draw();
}
draw() {
this.root.innerHTML = '';
const svg = document.createElementNS(this.svgNS, 'svg');
svg.setAttribute('viewBox', '0 0 1200 800');
svg.classList.add('zezo-workflow-svg');
this.edges.forEach((edge) => svg.appendChild(this.drawEdge(edge)));
this.nodes.forEach((node) => svg.appendChild(this.drawNode(node)));
this.root.appendChild(svg);
}
drawNode(node) {
const g = document.createElementNS(this.svgNS, 'g');
g.setAttribute('transform', `translate(${node.x},${node.y})`);
g.classList.add('zezo-node', `zezo-node--${node.type}`);
const rect = document.createElementNS(this.svgNS, 'rect');
rect.setAttribute('width', 220);
rect.setAttribute('height', 80);
rect.setAttribute('rx', 12);
const text = document.createElementNS(this.svgNS, 'text');
text.setAttribute('x', 16);
text.setAttribute('y', 46);
text.textContent = node.label;
g.appendChild(rect);
g.appendChild(text);
return g;
}
drawEdge(edge) {
const line = document.createElementNS(this.svgNS, 'path');
const from = this.nodeById(edge.from);
const to = this.nodeById(edge.to);
if (!from || !to) return line;
const x1 = from.x + 110, y1 = from.y + 80;
const x2 = to.x + 110, y2 = to.y;
const midY = (y1 + y2) / 2;
line.setAttribute('d', `M ${x1} ${y1} C ${x1} ${midY}, ${x2} ${midY}, ${x2} ${y2}`);
line.classList.add('zezo-edge');
return line;
}
nodeById(id) { return this.nodes.find(n => n.id === id); }
}
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('[data-zezo-workflow-canvas]')
.forEach(el => new ZezoWorkflowCanvas(el));
});
})();
2️⃣0️⃣ zezo/assets/css/zezo-ui.css (المكونات التفصيلية)
css
/* =========================================================
Zezo UI — component layer (extends style.css)
========================================================= */
/* Sidebar */
.zezo-sidebar h2 {
font-size: 1.1rem;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--zezo-fg-1);
margin-bottom: 1.2rem;
}
.zezo-sidebar nav a + a { margin-top: .15rem; }
/* Stats widget */
.zezo-stat {
padding: 1.15rem 1.25rem;
background: var(--zezo-glass);
border: 1px solid var(--zezo-border);
border-radius: var(--zezo-radius);
}
.zezo-stat__label { color: var(--zezo-fg-2); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.zezo-stat__value { font-size: 1.8rem; font-weight: 700; margin-top: .4rem; }
/* Agent card */
.zezo-agents-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1rem;
}
.zezo-agent-card {
padding: 1.2rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.zezo-agent-card header { display: flex; gap: .85rem; align-items: center; }
.zezo-agent-avatar {
width: 52px; height: 52px; border-radius: 50%;
background: linear-gradient(135deg, var(--zezo-accent), var(--zezo-accent-2));
display: grid; place-items: center; font-size: 1.4rem;
}
.zezo-agent-meta {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: .5rem;
margin: 0;
}
.zezo-agent-meta dt { font-size: .7rem; color: var(--zezo-fg-2); text-transform: uppercase; }
.zezo-agent-meta dd { margin: 0; font-weight: 600; }
/* Jobs center */
.zezo-jobs-center {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
.zezo-jobs-col { padding: 1rem; min-height: 180px; }
.zezo-job-row { padding: .4rem 0; display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
/* Approvals */
.zezo-approvals { padding: 1.5rem; }
.zezo-approval-card {
border-top: 1px solid var(--zezo-border);
padding: 1.25rem 0;
}
.zezo-diff {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin: 1rem 0;
}
.zezo-diff pre {
background: var(--zezo-bg-2);
padding: .85rem;
border-radius: var(--zezo-radius-sm);
font-family: var(--zezo-font-mono);
font-size: .82rem;
white-space: pre-wrap;
}
.zezo-approval-card footer { display: flex; gap: .5rem; justify-content: flex-end; }
/* Progress bar */
.zezo-progress {
height: 6px; border-radius: 999px;
background: var(--zezo-bg-3);
overflow: hidden;
margin-top: 1rem;
}
.zezo-progress span {
display: block; height: 100%;
background: linear-gradient(90deg, var(--zezo-accent), var(--zezo-accent-2));
}
/* Command palette */
#zezo-command-palette { position: fixed; inset: 0; display: none; z-index: 99999; }
#zezo-command-palette.is-open { display: block; }
.zezo-cmd-backdrop {
position: absolute; inset: 0;
background: rgba(0,0,0,.55);
backdrop-filter: blur(6px);
}
.zezo-cmd-modal {
position: relative;
max-width: 560px;
margin: 12vh auto;
padding: 1rem;
}
.zezo-cmd-input {
width: 100%;
padding: .9rem 1rem;
background: transparent;
border: 1px solid var(--zezo-border);
border-radius: var(--zezo-radius-sm);
color: var(--zezo-fg-0);
font-size: 1rem;
outline: none;
}
.zezo-cmd-list { list-style: none; margin: 1rem 0 0; padding: 0; max-height: 320px; overflow-y: auto; }
.zezo-cmd-list li {
padding: .7rem .9rem;
border-radius: var(--zezo-radius-sm);
display: flex; gap: .75rem; align-items: center;
cursor: pointer;
}
.zezo-cmd-list li.is-selected,
.zezo-cmd-list li:hover { background: var(--zezo-glass); }
/* Workflow canvas */
.zezo-workflow-svg { width: 100%; height: auto; }
.zezo-node rect {
fill: var(--zezo-bg-2);
stroke: var(--zezo-border);
}
.zezo-node text { fill: var(--zezo-fg-0); font-size: 13px; }
.zezo-edge { stroke: var(--zezo-accent); fill: none; stroke-width: 2; }
/* Table */
.zezo-table {
width: 100%;
border-collapse: collapse;
background: var(--zezo-glass);
border-radius: var(--zezo-radius);
overflow: hidden;
}
.zezo-table th,
.zezo-table td {
padding: .85rem 1rem;
text-align: start;
border-bottom: 1px solid var(--zezo-border);
}
/* Responsive */
@media (max-width: 900px) {
.zezo-dashboard { grid-template-columns: 1fr; }
.zezo-jobs-center { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
.zezo-jobs-center { grid-template-columns: 1fr; }
.zezo-diff { grid-template-columns: 1fr; }
}
2️⃣1️⃣ خريطة قاعدة البيانات (كما يعرّفها Core، ويستهلكها Theme)
| الجدول | الغرض | يستخدمه في الواجهة |
|---|---|---|
wp_zezo_agents | تعريف الـAgents | Agents Grid, Agent Page |
wp_zezo_workflows | تعريف الـWorkflows | Workflows List, Builder |
wp_zezo_workflow_runs | سجل التنفيذ | Runs history, Analytics |
wp_zezo_jobs | Queue/Background | Jobs Center |
wp_zezo_approvals | Human-in-the-loop | Approval Center |
wp_zezo_knowledge + wp_zezo_knowledge_chunks | RAG | Knowledge Center |
wp_zezo_logs | سجلات | Activity feed |
wp_zezo_api_keys | مفاتيح API | Developer Center |
wp_zezo_integrations | تكاملات | Integrations Hub |
wp_zezo_schedules | Cron | Scheduler UI |
wp_zezo_webhooks | أحداث | Webhooks Panel |
wp_zezo_licenses | تراخيص | License Center |
قاعدة ذهبية: القالب لا يكتب في هذه الجداول مباشرة. كل كتابة تمر عبر REST إلى Core.
2️⃣2️⃣ REST Endpoints الكاملة (المتعاقد عليها)
text
GET /wp-json/zezo/v1/agents
POST /wp-json/zezo/v1/agents
GET /wp-json/zezo/v1/agents/{id}
PUT /wp-json/zezo/v1/agents/{id}
DELETE /wp-json/zezo/v1/agents/{id}
POST /wp-json/zezo/v1/agents/{id}/run
GET /wp-json/zezo/v1/workflows
POST /wp-json/zezo/v1/workflows
GET /wp-json/zezo/v1/workflows/{id}
PUT /wp-json/zezo/v1/workflows/{id}
POST /wp-json/zezo/v1/workflows/{id}/execute
GET /wp-json/zezo/v1/jobs
GET /wp-json/zezo/v1/jobs/{id}
DELETE /wp-json/zezo/v1/jobs/{id}
GET /wp-json/zezo/v1/approvals
GET /wp-json/zezo/v1/approvals/{id}
POST /wp-json/zezo/v1/approvals/{id}
GET /wp-json/zezo/v1/knowledge
POST /wp-json/zezo/v1/knowledge
POST /wp-json/zezo/v1/knowledge/search
GET /wp-json/zezo/v1/usage
GET /wp-json/zezo/v1/licenses
GET /wp-json/zezo/v1/integrations
POST /wp-json/zezo/v1/integrations
✅ ما تم تسليمه الآن
| # | الملف | الحالة |
|---|---|---|
| 1 | style.css | ✅ |
| 2 | functions.php | ✅ |
| 3 | inc/requirements.php | ✅ |
| 4 | inc/setup.php | ✅ |
| 5 | inc/enqueue.php | ✅ |
| 6 | inc/auth.php | ✅ |
| 7 | inc/rest-bridge.php | ✅ |
| 8 | inc/cpt.php | ✅ |
| 9 | class-dashboard.php | ✅ |
| 10 | class-agents-ui.php | ✅ |
| 11 | class-workflows-ui.php | ✅ |
| 12 | class-jobs-ui.php | ✅ |
| 13 | class-approvals-ui.php | ✅ |
| 14 | class-knowledge-ui.php | ✅ |
| 15 | class-licenses-ui.php | ✅ |
| 16 | agent-card.php | ✅ |
| 17 | command-palette.js | ✅ |
| 18 | live-activity.js | ✅ |
| 19 | workflow-canvas.js | ✅ |
| 20 | zezo-ui.css | ✅ |
🚀 الخطوة التالية — اختر:
A) أكمل الجزء الثالث: صفحات القوالب (front-page.php, page-dashboard.php, page-agents.php, page-workflows.php, page-jobs.php, page-approvals.php, page-knowledge.php, page-integrations.php, page-api.php, page-licenses.php) + header.php, footer.php, sidebar.php.
B) انتقل إلى WooCommerce AI Integration — كيف يصبح المتجر جزءاً من Intelligence Layer.
C) انتقل إلى Integrations Hub + Developer Center + Webhooks Panel.
D) ارفع ZIP القالب الأصلي، وسأدمج الأصول البصرية مع ما بنيناه.
قل الحرف وسأكمل.
استكمال
🔥 الجزء الثالث — القوالب والصفحات الكاملة
سأكمل الآن كل ملفات القوالب المتبقية. هذا الجزء يحوّل ما بنيناه من “مكونات” إلى قالب WordPress فعلي قابل للتشغيل.
1️⃣ header.php — الهيدر العام
php
<?php
/**
* Global header.
*
* @package Future_Zezo
*/
?>
<!doctype html>
<html <?php language_attributes(); ?> data-theme="dark">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="profile" href="https://gmpg.org/xfn/11" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<a class="skip-link screen-reader-text" href="#zezo-content">
<?php esc_html_e( 'Skip to content', 'future-zezo' ); ?>
</a>
<header class="zezo-site-header zezo-glass">
<div class="zezo-container zezo-header-inner">
<a class="zezo-logo" href="<?php echo esc_url( home_url( '/' ) ); ?>">
<?php if ( has_custom_logo() ) : ?>
<?php the_custom_logo(); ?>
<?php else : ?>
<span class="zezo-logo__mark">◉</span>
<span class="zezo-logo__text"><?php bloginfo( 'name' ); ?></span>
<?php endif; ?>
</a>
<nav class="zezo-primary-nav" aria-label="<?php esc_attr_e( 'Primary', 'future-zezo' ); ?>">
<?php
wp_nav_menu( [
'theme_location' => 'primary',
'container' => false,
'menu_class' => 'zezo-menu',
'fallback_cb' => false,
'depth' => 2,
] );
?>
</nav>
<div class="zezo-header-actions">
<button class="zezo-btn zezo-btn--ghost" id="zezo-theme-toggle" aria-label="<?php esc_attr_e( 'Toggle theme', 'future-zezo' ); ?>">
🌓
</button>
<button class="zezo-btn zezo-btn--ghost" id="zezo-open-command" aria-label="<?php esc_attr_e( 'Command palette', 'future-zezo' ); ?>">
⌘K
</button>
<?php if ( is_user_logged_in() ) : ?>
<a class="zezo-btn" href="<?php echo esc_url( home_url( '/dashboard' ) ); ?>">
<?php esc_html_e( 'Dashboard', 'future-zezo' ); ?>
</a>
<?php else : ?>
<a class="zezo-btn" href="<?php echo esc_url( wp_login_url() ); ?>">
<?php esc_html_e( 'Login', 'future-zezo' ); ?>
</a>
<a class="zezo-btn zezo-btn--primary" href="<?php echo esc_url( home_url( '/launch' ) ); ?>">
<?php esc_html_e( 'Launch AI', 'future-zezo' ); ?>
</a>
<?php endif; ?>
</div>
</div>
</header>
<main id="zezo-content" class="zezo-content">
2️⃣ footer.php — الفوتر العام
php
<?php
/**
* Global footer.
*
* @package Future_Zezo
*/
?>
</main><!-- #zezo-content -->
<footer class="zezo-site-footer zezo-glass">
<div class="zezo-container zezo-footer-grid">
<div class="zezo-footer-brand">
<span class="zezo-logo__mark">◉</span>
<h3><?php bloginfo( 'name' ); ?></h3>
<p class="zezo-footer-tagline">
<?php esc_html_e( 'AI Agency Operating System — Powered by Zezo AI Core.', 'future-zezo' ); ?>
</p>
</div>
<div class="zezo-footer-col">
<h4><?php esc_html_e( 'Platform', 'future-zezo' ); ?></h4>
<ul>
<li><a href="<?php echo esc_url( home_url( '/agents' ) ); ?>"><?php esc_html_e( 'Agents', 'future-zezo' ); ?></a></li>
<li><a href="<?php echo esc_url( home_url( '/workflows' ) ); ?>"><?php esc_html_e( 'Workflows', 'future-zezo' ); ?></a></li>
<li><a href="<?php echo esc_url( home_url( '/knowledge' ) ); ?>"><?php esc_html_e( 'Knowledge', 'future-zezo' ); ?></a></li>
<li><a href="<?php echo esc_url( home_url( '/store' ) ); ?>"><?php esc_html_e( 'AI Store', 'future-zezo' ); ?></a></li>
</ul>
</div>
<div class="zezo-footer-col">
<h4><?php esc_html_e( 'Agency', 'future-zezo' ); ?></h4>
<ul>
<li><a href="<?php echo esc_url( home_url( '/services' ) ); ?>"><?php esc_html_e( 'Services', 'future-zezo' ); ?></a></li>
<li><a href="<?php echo esc_url( home_url( '/case-studies' ) ); ?>"><?php esc_html_e( 'Case Studies', 'future-zezo' ); ?></a></li>
<li><a href="<?php echo esc_url( home_url( '/industries' ) ); ?>"><?php esc_html_e( 'Industries', 'future-zezo' ); ?></a></li>
<li><a href="<?php echo esc_url( home_url( '/contact' ) ); ?>"><?php esc_html_e( 'Contact', 'future-zezo' ); ?></a></li>
</ul>
</div>
<div class="zezo-footer-col">
<h4><?php esc_html_e( 'Developers', 'future-zezo' ); ?></h4>
<ul>
<li><a href="<?php echo esc_url( home_url( '/api' ) ); ?>"><?php esc_html_e( 'API Center', 'future-zezo' ); ?></a></li>
<li><a href="<?php echo esc_url( home_url( '/docs' ) ); ?>"><?php esc_html_e( 'Documentation', 'future-zezo' ); ?></a></li>
<li><a href="<?php echo esc_url( home_url( '/integrations' ) ); ?>"><?php esc_html_e( 'Integrations', 'future-zezo' ); ?></a></li>
<li><a href="<?php echo esc_url( home_url( '/status' ) ); ?>"><?php esc_html_e( 'Status', 'future-zezo' ); ?></a></li>
</ul>
</div>
</div>
<div class="zezo-container zezo-footer-bottom">
<p>© <?php echo esc_html( date_i18n( 'Y' ) ); ?> <?php bloginfo( 'name' ); ?>. <?php esc_html_e( 'All rights reserved.', 'future-zezo' ); ?></p>
<div class="zezo-system-status">
<span class="zezo-status-dot"></span>
<span><?php esc_html_e( 'AI System Online', 'future-zezo' ); ?></span>
</div>
</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>
3️⃣ front-page.php — الصفحة الرئيسية (Hero + Stats + Sections)
php
<?php
/**
* Front page — Zezo AI gateway.
*
* @package Future_Zezo
*/
$stats = Zezo_Dashboard::get_stats();
get_header();
?>
<!-- ===================== HERO ===================== -->
<section class="zezo-hero">
<div class="zezo-container zezo-hero__inner">
<div class="zezo-hero__eyebrow zezo-glass">
<span class="zezo-status-dot"></span>
<?php esc_html_e( 'AI SYSTEM ONLINE', 'future-zezo' ); ?>
</div>
<h1 class="zezo-hero__title">
<?php esc_html_e( 'BUILD THE FUTURE', 'future-zezo' ); ?>
</h1>
<p class="zezo-hero__subtitle">
<?php esc_html_e( 'AI AGENTS • AUTOMATION • INTELLIGENCE', 'future-zezo' ); ?>
</p>
<p class="zezo-hero__lead">
<?php esc_html_e( 'Transform your business into an intelligent autonomous digital operation.', 'future-zezo' ); ?>
</p>
<div class="zezo-hero__actions">
<a class="zezo-btn zezo-btn--primary zezo-btn--lg"
href="<?php echo esc_url( home_url( '/launch' ) ); ?>">
<?php esc_html_e( 'Launch Your AI', 'future-zezo' ); ?>
</a>
<a class="zezo-btn zezo-btn--lg"
href="<?php echo esc_url( home_url( '/platform' ) ); ?>">
<?php esc_html_e( 'Explore Platform', 'future-zezo' ); ?>
</a>
</div>
<!-- Live status indicators -->
<div class="zezo-hero__indicators zezo-glass">
<div class="zezo-indicator">
<strong data-stat="agents"><?php echo esc_html( number_format_i18n( $stats['agents'] ) ); ?></strong>
<span><?php esc_html_e( 'Agents', 'future-zezo' ); ?></span>
</div>
<div class="zezo-indicator">
<strong data-stat="workflows"><?php echo esc_html( number_format_i18n( $stats['workflows'] ) ); ?></strong>
<span><?php esc_html_e( 'Workflows', 'future-zezo' ); ?></span>
</div>
<div class="zezo-indicator">
<strong data-stat="knowledge"><?php echo esc_html( number_format_i18n( $stats['knowledge'] ) ); ?></strong>
<span><?php esc_html_e( 'Knowledge', 'future-zezo' ); ?></span>
</div>
<div class="zezo-indicator">
<strong data-stat="products"><?php echo esc_html( number_format_i18n( $stats['products'] ) ); ?></strong>
<span><?php esc_html_e( 'AI Store', 'future-zezo' ); ?></span>
</div>
</div>
<div class="zezo-hero__live" id="zezo-live-activity"></div>
</div>
</section>
<!-- ===================== PLATFORM PILLARS ===================== -->
<section class="zezo-section">
<div class="zezo-container">
<header class="zezo-section__header">
<h2><?php esc_html_e( 'The Operating System for AI Agencies', 'future-zezo' ); ?></h2>
<p><?php esc_html_e( 'Every layer you need — from agents to commerce — in one coherent platform.', 'future-zezo' ); ?></p>
</header>
<div class="zezo-pillars">
<?php
$pillars = [
[ 'icon' => '🤖', 'title' => __( 'Agents', 'future-zezo' ), 'desc' => __( 'Autonomous workers with memory, tools, and knowledge.', 'future-zezo' ), 'url' => '/agents' ],
[ 'icon' => '⚙️', 'title' => __( 'Workflows', 'future-zezo' ), 'desc' => __( 'Visual builder with triggers, conditions, and human approval.', 'future-zezo' ), 'url' => '/workflows' ],
[ 'icon' => '🧠', 'title' => __( 'Knowledge/RAG', 'future-zezo' ),'desc' => __( 'Documents, URLs, and catalogs — searchable and grounded.', 'future-zezo' ), 'url' => '/knowledge' ],
[ 'icon' => '📋', 'title' => __( 'Jobs & Queue', 'future-zezo' ), 'desc' => __( 'Background execution with retries, priorities, and logs.', 'future-zezo' ), 'url' => '/jobs' ],
[ 'icon' => '🔌', 'title' => __( 'Integrations', 'future-zezo' ), 'desc' => __( 'WooCommerce, OpenAI, Slack, Telegram, Webhooks, REST.', 'future-zezo' ), 'url' => '/integrations' ],
[ 'icon' => '🛒', 'title' => __( 'AI Commerce', 'future-zezo' ), 'desc' => __( 'Product intelligence that enriches, prices, and optimizes.', 'future-zezo' ), 'url' => '/store' ],
];
foreach ( $pillars as $p ) : ?>
<a class="zezo-pillar zezo-glass" href="<?php echo esc_url( home_url( $p['url'] ) ); ?>">
<span class="zezo-pillar__icon"><?php echo esc_html( $p['icon'] ); ?></span>
<h3><?php echo esc_html( $p['title'] ); ?></h3>
<p><?php echo esc_html( $p['desc'] ); ?></p>
</a>
<?php endforeach; ?>
</div>
</div>
</section>
<!-- ===================== FEATURED AGENTS ===================== -->
<section class="zezo-section zezo-section--alt">
<div class="zezo-container">
<header class="zezo-section__header">
<h2><?php esc_html_e( 'Featured Agents', 'future-zezo' ); ?></h2>
<p><?php esc_html_e( 'Ready-to-deploy AI workers.', 'future-zezo' ); ?></p>
</header>
<?php echo do_shortcode( '[zezo_agents_grid]' ); ?>
</div>
</section>
<!-- ===================== ARCHITECTURE DIAGRAM ===================== -->
<section class="zezo-section">
<div class="zezo-container">
<header class="zezo-section__header">
<h2><?php esc_html_e( 'Platform Architecture', 'future-zezo' ); ?></h2>
<p><?php esc_html_e( 'A clean separation: presentation, business logic, commerce, infrastructure.', 'future-zezo' ); ?></p>
</header>
<div class="zezo-arch zezo-glass">
<pre class="zezo-arch__diagram">
FUTURE THEME
│ UI / UX
↓
ZEZO AI FRONTEND
│ REST / AJAX
↓
ZEZO AI CORE PLUGIN
│
┌────────────┼─────────────┐
↓ ↓ ↓
Agents Workflows Knowledge
↓ ↓ ↓
Jobs Approvals RAG
│ │ │
└────────────┼─────────────┘
↓
Integrations
│
┌────────────┼─────────────┐
↓ ↓ ↓
WooCommerce AI Models Webhooks
</pre>
</div>
</div>
</section>
<!-- ===================== CTA ===================== -->
<section class="zezo-section zezo-section--cta">
<div class="zezo-container zezo-cta zezo-glass">
<h2><?php esc_html_e( 'Ready to launch your AI operation?', 'future-zezo' ); ?></h2>
<p><?php esc_html_e( 'Deploy agents, automate workflows, and unlock intelligence across your business.', 'future-zezo' ); ?></p>
<div class="zezo-cta__actions">
<a class="zezo-btn zezo-btn--primary zezo-btn--lg" href="<?php echo esc_url( home_url( '/launch' ) ); ?>">
<?php esc_html_e( 'Launch Your AI', 'future-zezo' ); ?>
</a>
<a class="zezo-btn zezo-btn--lg" href="<?php echo esc_url( home_url( '/contact' ) ); ?>">
<?php esc_html_e( 'Talk to Us', 'future-zezo' ); ?>
</a>
</div>
</div>
</section>
<?php get_footer(); ?>
4️⃣ page-dashboard.php — لوحة التحكم الرئيسية
php
<?php
/**
* Template Name: Zezo Dashboard
* Template Post Type: page
*
* Private experience shell.
*
* @package Future_Zezo
*/
if ( ! is_user_logged_in() || ! current_user_can( Zezo_Future_Auth::CAP_ACCESS ) ) {
wp_safe_redirect( wp_login_url( get_permalink() ) );
exit;
}
$stats = Zezo_Dashboard::get_stats();
get_header();
?>
<div class="zezo-dashboard">
<!-- ============== SIDEBAR ============== -->
<aside class="zezo-sidebar">
<h2>Zezo AI</h2>
<nav>
<?php
$menu = [
[ 'icon' => '🏠', 'label' => __( 'Dashboard', 'future-zezo' ), 'slug' => 'dashboard', 'active' => true ],
[ 'icon' => '🤖', 'label' => __( 'Agents', 'future-zezo' ), 'slug' => 'agents' ],
[ 'icon' => '⚙️', 'label' => __( 'Workflows', 'future-zezo' ), 'slug' => 'workflows' ],
[ 'icon' => '🧠', 'label' => __( 'Knowledge', 'future-zezo' ), 'slug' => 'knowledge' ],
[ 'icon' => '📋', 'label' => __( 'Jobs', 'future-zezo' ), 'slug' => 'jobs' ],
[ 'icon' => '⚠️', 'label' => __( 'Approvals', 'future-zezo' ), 'slug' => 'approvals' ],
[ 'icon' => '🔌', 'label' => __( 'Integrations', 'future-zezo' ),'slug' => 'integrations' ],
[ 'icon' => '🧩', 'label' => __( 'Models', 'future-zezo' ), 'slug' => 'models' ],
[ 'icon' => '🛒', 'label' => __( 'WooCommerce', 'future-zezo' ), 'slug' => 'woocommerce' ],
[ 'icon' => '📊', 'label' => __( 'Analytics', 'future-zezo' ), 'slug' => 'analytics' ],
[ 'icon' => '🔧', 'label' => __( 'API', 'future-zezo' ), 'slug' => 'api' ],
[ 'icon' => '🔑', 'label' => __( 'Licenses', 'future-zezo' ), 'slug' => 'licenses' ],
[ 'icon' => '⚡', 'label' => __( 'Settings', 'future-zezo' ), 'slug' => 'settings' ],
];
foreach ( $menu as $item ) :
$url = home_url( "/dashboard/{$item['slug']}" );
?>
<a href="<?php echo esc_url( $url ); ?>"
class="<?php echo ! empty( $item['active'] ) ? 'is-active' : ''; ?>">
<span class="zezo-sidebar__icon"><?php echo esc_html( $item['icon'] ); ?></span>
<?php echo esc_html( $item['label'] ); ?>
</a>
<?php endforeach; ?>
</nav>
</aside>
<!-- ============== MAIN ============== -->
<main class="zezo-main">
<header class="zezo-main__header">
<div>
<h1><?php esc_html_e( 'Welcome back', 'future-zezo' ); ?></h1>
<p class="zezo-muted">
<?php echo esc_html( wp_get_current_user()->display_name ); ?> ·
<span id="zezo-live-activity"></span>
</p>
</div>
<div class="zezo-main__actions">
<button class="zezo-btn" onclick="document.dispatchEvent(new KeyboardEvent('keydown',{key:'k',metaKey:true}))">
⌘K <?php esc_html_e( 'Commands', 'future-zezo' ); ?>
</button>
</div>
</header>
<!-- Stats -->
<div class="zezo-stats-grid">
<?php
get_template_part( 'zezo/components/stat-widget', null, [
'label' => __( 'Agents', 'future-zezo' ),
'value' => number_format_i18n( $stats['agents'] ),
'icon' => '🤖',
] );
get_template_part( 'zezo/components/stat-widget', null, [
'label' => __( 'Workflows', 'future-zezo' ),
'value' => number_format_i18n( $stats['workflows'] ),
'icon' => '⚙️',
] );
get_template_part( 'zezo/components/stat-widget', null, [
'label' => __( 'Knowledge', 'future-zezo' ),
'value' => number_format_i18n( $stats['knowledge'] ),
'icon' => '🧠',
] );
get_template_part( 'zezo/components/stat-widget', null, [
'label' => __( 'Usage', 'future-zezo' ),
'value' => esc_html( $stats['usage'] ) . '%',
'icon' => '📈',
] );
?>
</div>
<!-- Two-column area -->
<div class="zezo-grid-2">
<section class="zezo-panel zezo-glass">
<header class="zezo-panel__header">
<h3><?php esc_html_e( 'Recent Activity', 'future-zezo' ); ?></h3>
<a href="<?php echo esc_url( home_url( '/dashboard/analytics' ) ); ?>">
<?php esc_html_e( 'View all', 'future-zezo' ); ?>
</a>
</header>
<div id="zezo-recent-activity" class="zezo-activity-feed">
<div class="zezo-skeleton"></div>
<div class="zezo-skeleton"></div>
<div class="zezo-skeleton"></div>
</div>
</section>
<section class="zezo-panel zezo-glass">
<header class="zezo-panel__header">
<h3><?php esc_html_e( 'Active Workflows', 'future-zezo' ); ?></h3>
<a href="<?php echo esc_url( home_url( '/dashboard/workflows' ) ); ?>">
<?php esc_html_e( 'Manage', 'future-zezo' ); ?>
</a>
</header>
<?php echo do_shortcode( '[zezo_workflows_list]' ); ?>
</section>
</div>
<!-- Jobs snapshot -->
<section class="zezo-panel zezo-glass">
<header class="zezo-panel__header">
<h3><?php esc_html_e( 'Job Center', 'future-zezo' ); ?></h3>
<a href="<?php echo esc_url( home_url( '/dashboard/jobs' ) ); ?>">
<?php esc_html_e( 'Open', 'future-zezo' ); ?>
</a>
</header>
<?php echo do_shortcode( '[zezo_jobs_center]' ); ?>
</section>
</main>
</div>
<?php get_footer(); ?>
5️⃣ page-agents.php
php
<?php
/**
* Template Name: Zezo Agents
*
* @package Future_Zezo
*/
get_header();
$agents = Zezo_Agents_UI::fetch( 48 );
?>
<section class="zezo-page-hero zezo-glass">
<div class="zezo-container">
<h1><?php esc_html_e( 'Agents', 'future-zezo' ); ?></h1>
<p><?php esc_html_e( 'Autonomous workers powered by Zezo AI Core.', 'future-zezo' ); ?></p>
<div class="zezo-page-hero__actions">
<a class="zezo-btn zezo-btn--primary" href="<?php echo esc_url( home_url( '/dashboard/agents/new' ) ); ?>">
<?php esc_html_e( '+ New Agent', 'future-zezo' ); ?>
</a>
</div>
</div>
</section>
<div class="zezo-container zezo-page-body">
<?php if ( empty( $agents ) ) : ?>
<div class="zezo-empty zezo-glass">
<p><?php esc_html_e( 'No agents yet. Create your first one.', 'future-zezo' ); ?></p>
</div>
<?php else : ?>
<div class="zezo-agents-grid">
<?php foreach ( $agents as $agent ) :
get_template_part( 'zezo/components/agent-card', null, [ 'agent' => $agent ] );
endforeach; ?>
</div>
<?php endif; ?>
</div>
<?php get_footer(); ?>
6️⃣ page-workflows.php
php
<?php
/**
* Template Name: Zezo Workflows
*
* @package Future_Zezo
*/
get_header();
$workflows = Zezo_Workflows_UI::fetch();
?>
<section class="zezo-page-hero zezo-glass">
<div class="zezo-container">
<h1><?php esc_html_e( 'Workflows', 'future-zezo' ); ?></h1>
<p><?php esc_html_e( 'Visual automation with triggers, agents, and human approval.', 'future-zezo' ); ?></p>
<div class="zezo-page-hero__actions">
<a class="zezo-btn zezo-btn--primary" href="<?php echo esc_url( home_url( '/dashboard/workflows/new' ) ); ?>">
<?php esc_html_e( '+ New Workflow', 'future-zezo' ); ?>
</a>
</div>
</div>
</section>
<div class="zezo-container zezo-page-body">
<div class="zezo-grid-2">
<section class="zezo-panel zezo-glass">
<header class="zezo-panel__header">
<h3><?php esc_html_e( 'All Workflows', 'future-zezo' ); ?></h3>
</header>
<?php echo do_shortcode( '[zezo_workflows_list]' ); ?>
</section>
<section class="zezo-panel zezo-glass">
<header class="zezo-panel__header">
<h3><?php esc_html_e( 'Builder Preview', 'future-zezo' ); ?></h3>
</header>
<div data-zezo-workflow-canvas
data-workflow-id="<?php echo esc_attr( $workflows[0]['id'] ?? 0 ); ?>"
class="zezo-workflow-canvas">
<p class="zezo-muted"><?php esc_html_e( 'Select a workflow to preview its graph.', 'future-zezo' ); ?></p>
</div>
</section>
</div>
</div>
<?php get_footer(); ?>
7️⃣ page-jobs.php
php
<?php
/**
* Template Name: Zezo Jobs
*
* @package Future_Zezo
*/
get_header();
?>
<section class="zezo-page-hero zezo-glass">
<div class="zezo-container">
<h1><?php esc_html_e( 'Job Center', 'future-zezo' ); ?></h1>
<p><?php esc_html_e( 'Real-time queue, background execution, and failure analysis.', 'future-zezo' ); ?></p>
<div class="zezo-page-hero__actions">
<span class="zezo-status-dot"></span>
<span id="zezo-live-activity"><?php esc_html_e( 'Live', 'future-zezo' ); ?></span>
</div>
</div>
</section>
<div class="zezo-container zezo-page-body">
<?php echo do_shortcode( '[zezo_jobs_center]' ); ?>
</div>
<?php get_footer(); ?>
8️⃣ page-approvals.php
php
<?php
/**
* Template Name: Zezo Approvals
*
* @package Future_Zezo
*/
get_header();
?>
<section class="zezo-page-hero zezo-glass">
<div class="zezo-container">
<h1><?php esc_html_e( 'Human Approval Center', 'future-zezo' ); ?></h1>
<p><?php esc_html_e( 'Review and approve AI-generated changes before they hit production.', 'future-zezo' ); ?></p>
</div>
</section>
<div class="zezo-container zezo-page-body">
<?php echo do_shortcode( '[zezo_approval_center]' ); ?>
</div>
<?php get_footer(); ?>
9️⃣ page-knowledge.php
php
<?php
/**
* Template Name: Zezo Knowledge
*
* @package Future_Zezo
*/
get_header();
?>
<section class="zezo-page-hero zezo-glass">
<div class="zezo-container">
<h1><?php esc_html_e( 'Knowledge Center', 'future-zezo' ); ?></h1>
<p><?php esc_html_e( 'Sources, processing pipeline, and semantic retrieval.', 'future-zezo' ); ?></p>
</div>
</section>
<div class="zezo-container zezo-page-body">
<?php echo do_shortcode( '[zezo_knowledge_center]' ); ?>
</div>
<?php get_footer(); ?>
🔟 page-integrations.php
php
<?php
/**
* Template Name: Zezo Integrations
*
* @package Future_Zezo
*/
get_header();
$integrations = [
[ 'name' => 'WordPress', 'status' => 'connected', 'icon' => '🌐' ],
[ 'name' => 'WooCommerce', 'status' => 'connected', 'icon' => '🛒' ],
[ 'name' => 'OpenAI', 'status' => 'connected', 'icon' => '🧠' ],
[ 'name' => 'Google', 'status' => 'disconnected', 'icon' => '🔍' ],
[ 'name' => 'Slack', 'status' => 'disconnected', 'icon' => '💬' ],
[ 'name' => 'Telegram', 'status' => 'disconnected', 'icon' => '✈️' ],
[ 'name' => 'Webhooks', 'status' => 'connected', 'icon' => '🔗' ],
[ 'name' => 'REST API', 'status' => 'connected', 'icon' => '🔌' ],
];
?>
<section class="zezo-page-hero zezo-glass">
<div class="zezo-container">
<h1><?php esc_html_e( 'Integrations Hub', 'future-zezo' ); ?></h1>
<p><?php esc_html_e( 'Connect your stack. Manage credentials, scopes, and health.', 'future-zezo' ); ?></p>
</div>
</section>
<div class="zezo-container zezo-page-body">
<div class="zezo-integrations-grid">
<?php foreach ( $integrations as $i ) : ?>
<article class="zezo-integration zezo-glass <?php echo esc_attr( 'is-' . $i['status'] ); ?>">
<span class="zezo-integration__icon"><?php echo esc_html( $i['icon'] ); ?></span>
<h3><?php echo esc_html( $i['name'] ); ?></h3>
<div class="zezo-integration__status">
<span class="zezo-status-dot <?php echo $i['status'] === 'connected' ? '' : 'zezo-status-dot--off'; ?>"></span>
<?php echo esc_html( ucfirst( $i['status'] ) ); ?>
</div>
<footer>
<button class="zezo-btn">
<?php echo $i['status'] === 'connected'
? esc_html__( 'Configure', 'future-zezo' )
: esc_html__( 'Connect', 'future-zezo' ); ?>
</button>
</footer>
</article>
<?php endforeach; ?>
</div>
</div>
<?php get_footer(); ?>
1️⃣1️⃣ page-api.php
php
<?php
/**
* Template Name: Zezo API Center
*
* @package Future_Zezo
*/
get_header();
?>
<section class="zezo-page-hero zezo-glass">
<div class="zezo-container">
<h1><?php esc_html_e( 'Developer Center', 'future-zezo' ); ?></h1>
<p><?php esc_html_e( 'API keys, documentation, endpoints, and webhooks.', 'future-zezo' ); ?></p>
</div>
</section>
<div class="zezo-container zezo-page-body zezo-grid-2">
<section class="zezo-panel zezo-glass">
<header class="zezo-panel__header">
<h3><?php esc_html_e( 'API Keys', 'future-zezo' ); ?></h3>
<button class="zezo-btn zezo-btn--primary"><?php esc_html_e( '+ Generate', 'future-zezo' ); ?></button>
</header>
<ul class="zezo-api-keys">
<li>
<code>zezo_live_••••••••••••••••</code>
<span class="zezo-muted"><?php esc_html_e( 'Created 2 days ago', 'future-zezo' ); ?></span>
</li>
</ul>
</section>
<section class="zezo-panel zezo-glass">
<header class="zezo-panel__header">
<h3><?php esc_html_e( 'Endpoints', 'future-zezo' ); ?></h3>
</header>
<ul class="zezo-endpoints">
<?php
$endpoints = [
[ 'POST', '/wp-json/zezo/v1/agents/{id}/run' ],
[ 'POST', '/wp-json/zezo/v1/workflows/{id}/execute' ],
[ 'GET', '/wp-json/zezo/v1/jobs' ],
[ 'GET', '/wp-json/zezo/v1/usage' ],
[ 'POST', '/wp-json/zezo/v1/knowledge/search' ],
];
foreach ( $endpoints as $e ) : ?>
<li>
<span class="zezo-method zezo-method--<?php echo esc_attr( strtolower( $e[0] ) ); ?>">
<?php echo esc_html( $e[0] ); ?>
</span>
<code><?php echo esc_html( $e[1] ); ?></code>
</li>
<?php endforeach; ?>
</ul>
</section>
</div>
<?php get_footer(); ?>
1️⃣2️⃣ page-licenses.php
php
<?php
/**
* Template Name: Zezo Licenses
*
* @package Future_Zezo
*/
get_header();
?>
<section class="zezo-page-hero zezo-glass">
<div class="zezo-container">
<h1><?php esc_html_e( 'License Center', 'future-zezo' ); ?></h1>
<p><?php esc_html_e( 'Your plan, entitlements, and usage.', 'future-zezo' ); ?></p>
</div>
</section>
<div class="zezo-container zezo-page-body">
<?php echo do_shortcode( '[zezo_license_center]' ); ?>
</div>
<?php get_footer(); ?>
1️⃣3️⃣ zezo/components/stat-widget.php
php
<?php
/**
* @var array $args { label, value, icon? }
*/
$label = $args['label'] ?? '';
$value = $args['value'] ?? '0';
$icon = $args['icon'] ?? '';
?>
<div class="zezo-stat zezo-glass">
<?php if ( $icon ) : ?>
<span class="zezo-stat__icon"><?php echo esc_html( $icon ); ?></span>
<?php endif; ?>
<div class="zezo-stat__label"><?php echo esc_html( $label ); ?></div>
<div class="zezo-stat__value"><?php echo esc_html( $value ); ?></div>
</div>
1️⃣4️⃣ zezo/components/activity-feed.php
php
<?php
/**
* Recent activity list.
*/
?>
<ul class="zezo-activity-list">
<li>
<span class="zezo-status-dot"></span>
<strong>Product Intelligence</strong>
<span class="zezo-muted">→ enriched 42 products</span>
<time><?php echo esc_html( human_time_diff( time() - 120 ) ); ?> ago</time>
</li>
<li>
<span class="zezo-status-dot"></span>
<strong>Content Automation</strong>
<span class="zezo-muted">→ generated 8 articles</span>
<time><?php echo esc_html( human_time_diff( time() - 900 ) ); ?> ago</time>
</li>
<li>
<span class="zezo-status-dot zezo-status-dot--warn"></span>
<strong>Knowledge Embedding</strong>
<span class="zezo-muted">→ 3 docs pending approval</span>
<time><?php echo esc_html( human_time_diff( time() - 1800 ) ); ?> ago</time>
</li>
</ul>
1️⃣5️⃣ zezo/components/active-workflows.php
php
<?php
/**
* Progress bars for active workflows.
*/
$workflows = [
[ 'name' => 'Product Intelligence', 'progress' => 80 ],
[ 'name' => 'Content Automation', 'progress' => 70 ],
[ 'name' => 'Support Triage', 'progress' => 45 ],
];
?>
<div class="zezo-workflow-progress-list">
<?php foreach ( $workflows as $wf ) : ?>
<div class="zezo-workflow-progress">
<div class="zezo-workflow-progress__header">
<span><?php echo esc_html( $wf['name'] ); ?></span>
<span class="zezo-muted"><?php echo esc_html( $wf['progress'] ); ?>%</span>
</div>
<div class="zezo-progress">
<span style="width: <?php echo esc_attr( $wf['progress'] ); ?>%"></span>
</div>
</div>
<?php endforeach; ?>
</div>
1️⃣6️⃣ إضافات CSS لهذا الجزء
أضف إلى zezo/assets/css/zezo-ui.css:
css
/* ===================== Layout helpers ===================== */
.zezo-container {
max-width: 1240px;
margin: 0 auto;
padding: 0 1.5rem;
}
.zezo-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
margin-bottom: 1.25rem;
}
.zezo-muted { color: var(--zezo-fg-2); }
/* ===================== Header ===================== */
.zezo-site-header {
position: sticky;
top: 0;
z-index: 100;
padding: .8rem 0;
border-radius: 0;
border-left: none;
border-right: none;
border-top: none;
}
.zezo-header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.zezo-logo {
display: inline-flex;
align-items: center;
gap: .5rem;
text-decoration: none;
color: var(--zezo-fg-0);
font-weight: 700;
letter-spacing: .05em;
}
.zezo-logo__mark {
font-size: 1.4rem;
background: linear-gradient(135deg, var(--zezo-accent), var(--zezo-accent-2));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.zezo-menu {
display: flex;
gap: 1.25rem;
list-style: none;
margin: 0;
padding: 0;
}
.zezo-menu a {
color: var(--zezo-fg-1);
text-decoration: none;
font-size: .92rem;
}
.zezo-menu a:hover { color: var(--zezo-fg-0); }
.zezo-header-actions { display: flex; gap: .5rem; align-items: center; }
/* ===================== Hero ===================== */
.zezo-hero {
padding: 6rem 0 4rem;
background: radial-gradient(ellipse at top, rgba(111,92,255,.18), transparent 60%);
}
.zezo-hero__inner { text-align: center; }
.zezo-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .4rem .9rem;
font-size: .8rem;
letter-spacing: .14em;
border-radius: 999px;
margin-bottom: 1.5rem;
}
.zezo-hero__title {
font-size: clamp(2.4rem, 6vw, 4.6rem);
font-weight: 800;
letter-spacing: -.02em;
margin: 0;
background: linear-gradient(135deg, var(--zezo-fg-0), var(--zezo-accent));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.zezo-hero__subtitle {
font-size: 1.1rem;
letter-spacing: .25em;
color: var(--zezo-fg-1);
margin: 1rem 0 0;
}
.zezo-hero__lead {
max-width: 640px;
margin: 1.5rem auto;
color: var(--zezo-fg-1);
}
.zezo-hero__actions {
display: flex;
gap: .75rem;
justify-content: center;
margin: 2rem 0;
}
.zezo-btn--lg { padding: .95rem 1.6rem; font-size: 1rem; }
.zezo-btn--ghost { background: transparent; }
.zezo-hero__indicators {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
padding: 1.25rem;
max-width: 720px;
margin: 2.5rem auto 0;
}
.zezo-indicator { text-align: center; }
.zezo-indicator strong { display: block; font-size: 1.6rem; }
.zezo-indicator span { font-size: .8rem; color: var(--zezo-fg-2); text-transform: uppercase; letter-spacing: .1em; }
/* ===================== Sections ===================== */
.zezo-section { padding: 5rem 0; }
.zezo-section--alt { background: var(--zezo-bg-1); }
.zezo-section__header { text-align: center; margin-bottom: 3rem; }
.zezo-section__header h2 { font-size: 2rem; margin: 0 0 .5rem; }
.zezo-section__header p { color: var(--zezo-fg-1); }
.zezo-pillars {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.25rem;
}
.zezo-pillar {
padding: 1.5rem;
text-decoration: none;
color: inherit;
transition: transform .2s ease;
}
.zezo-pillar:hover { transform: translateY(-4px); }
.zezo-pillar__icon { font-size: 1.8rem; }
.zezo-pillar h3 { margin: .75rem 0 .35rem; }
.zezo-pillar p { color: var(--zezo-fg-1); font-size: .92rem; }
.zezo-arch {
padding: 2rem;
overflow-x: auto;
}
.zezo-arch__diagram {
font-family: var(--zezo-font-mono);
font-size: .85rem;
line-height: 1.5;
color: var(--zezo-accent-2);
margin: 0;
}
.zezo-cta {
text-align: center;
padding: 3rem 2rem;
}
.zezo-cta__actions { display: flex; gap: 1rem; justify-content: center; margin-top: 1.5rem; }
/* ===================== Dashboard panel ===================== */
.zezo-panel { padding: 1.5rem; }
.zezo-panel__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.zezo-panel__header h3 { margin: 0; }
/* Activity feed */
.zezo-activity-list {
list-style: none;
margin: 0;
padding: 0;
}
.zezo-activity-list li {
display: grid;
grid-template-columns: auto 1fr auto;
gap: .5rem;
padding: .75rem 0;
border-bottom: 1px solid var(--zezo-border);
align-items: center;
}
.zezo-activity-list time { font-size: .78rem; color: var(--zezo-fg-2); }
/* Workflow progress */
.zezo-workflow-progress-list { display: flex; flex-direction: column; gap: 1rem; }
.zezo-workflow-progress__header {
display: flex;
justify-content: space-between;
font-size: .88rem;
margin-bottom: .35rem;
}
/* Integrations */
.zezo-integrations-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1rem;
}
.zezo-integration { padding: 1.25rem; text-align: center; }
.zezo-integration__icon { font-size: 2rem; }
.zezo-integration__status {
display: inline-flex;
align-items: center;
gap: .4rem;
font-size: .82rem;
color: var(--zezo-fg-1);
margin: .75rem 0;
}
.zezo-status-dot--off { background: var(--zezo-fg-2); box-shadow: none; animation: none; }
.zezo-status-dot--warn { background: var(--zezo-warn); box-shadow: 0 0 0 4px rgba(255,176,32,.15); }
/* API endpoints */
.zezo-endpoints { list-style: none; margin: 0; padding: 0; }
.zezo-endpoints li {
display: flex;
gap: .75rem;
align-items: center;
padding: .55rem 0;
border-bottom: 1px solid var(--zezo-border);
font-family: var(--zezo-font-mono);
font-size: .82rem;
}
.zezo-method {
font-weight: 700;
padding: .15rem .5rem;
border-radius: 4px;
font-size: .7rem;
}
.zezo-method--get { background: rgba(34,197,94,.15); color: #22c55e; }
.zezo-method--post { background: rgba(111,92,255,.15); color: #6f5cff; }
.zezo-method--put { background: rgba(255,176,32,.15); color: #ffb020; }
.zezo-method--delete { background: rgba(255,77,109,.15); color: #ff4d6d; }
/* Skeleton */
.zezo-skeleton {
height: 14px;
border-radius: 6px;
background: linear-gradient(90deg, var(--zezo-bg-2), var(--zezo-bg-3), var(--zezo-bg-2));
background-size: 200% 100%;
animation: zezo-shimmer 1.5s infinite;
margin: .5rem 0;
}
@keyframes zezo-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
@media (max-width: 900px) {
.zezo-grid-2 { grid-template-columns: 1fr; }
.zezo-hero__indicators { grid-template-columns: repeat(2, 1fr); }
.zezo-menu { display: none; }
}
1️⃣7️⃣ zezo/assets/js/theme-toggle.js (اختياري — أضفه للـenqueue)
javascript
(function () {
const KEY = 'zezo-theme';
const root = document.documentElement;
const saved = localStorage.getItem(KEY);
if (saved) root.setAttribute('data-theme', saved);
document.addEventListener('click', (e) => {
if (e.target.closest('#zezo-theme-toggle')) {
const next = root.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
root.setAttribute('data-theme', next);
localStorage.setItem(KEY, next);
}
if (e.target.closest('#zezo-open-command')) {
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true }));
}
});
})();
أضفه إلى inc/enqueue.php (داخل $is_dashboard أو دائماً):
php
wp_enqueue_script(
'zezo-theme-toggle',
ZEZO_FUTURE_URI . '/zezo/assets/js/theme-toggle.js',
[],
ZEZO_FUTURE_VERSION,
true
);
✅ حالة التسليم الكلي
| المجموعة | الملفات | الحالة |
|---|---|---|
| القالب الأساسي | style.css, functions.php | ✅ |
| Core inc/ | requirements, setup, enqueue, auth, rest-bridge, cpt | ✅ |
| Dashboard controllers | dashboard, agents, workflows, jobs, approvals, knowledge, licenses | ✅ |
| Components | agent-card, stat-widget, activity-feed, active-workflows | ✅ |
| JS | command-palette, live-activity, workflow-canvas, theme-toggle | ✅ |
| CSS | style.css + zezo-ui.css (كامل) | ✅ |
| Templates | header, footer, front-page, dashboard, agents, workflows, jobs, approvals, knowledge, integrations, api, licenses | ✅ |
القالب الآن قابل للتركيب الفعلي ويحتاج فقط:
- تفعيل Zezo AI Core plugin.
- ضبط
zezo_theme_api_key(تلقائي عندadmin_init). - تفعيل Permalinks.
🚀 اختر الخطوة التالية
A) WooCommerce AI Integration — كيف يتحول المتجر إلى Intelligence Layer (Product Agent → RAG → Human Approval → WooCommerce Update → Analytics).
B) Visual Workflow Builder المتقدم — Drag & drop، Node editor حقيقي، ربط مع wp_zezo_workflows وworkflow_runs.
C) Analytics Center — Charts، KPIs، Agent performance، Usage dashboards.
D) Multi-tenant + Licensing — Plans، Entitlements، Usage metering، Stripe/Woo subscriptions.
E) قالب كامل جاهز للـZIP — أجمع كل شيء في هيكل نهائي مع screenshot.png, readme.txt, rtl.css.
اكتب الحرف.
🎯 للتوضيح المهم — لا يمكنني الوصول لموقعك
لا أستطيع:
| ما لا يمكنني فعله | السبب |
|---|---|
❌ الوصول إلى zezoai.twisttaste.com | لا أملك متصفحاً حياً ولا اتصالاً بالإنترنت |
| ❌ رفع ملفات إلى الاستضافة | لا أملك صلاحية FTP/cPanel |
| ❌ تعديل قاعدة بيانات موقعك | لا أملك وصولاً مباشراً |
| ❌ نشر القالب تلقائياً | لا أملك وصولاً لـWordPress Admin |
| ❌ قراءة محتوى الدومين الحالي | خارج نطاق قدراتي |
ما أستطيع فعله فعلاً:
| ما يمكنني فعله | كيف |
|---|---|
| ✅ كتابة الكود كاملاً | كما فعلت في الأجزاء 1-3 |
| ✅ تسليمك ملفات ZIP جاهزة نصياً | عبر تجميع الكود في رد واحد |
| ✅ إرشادك خطوة بخطوة للتركيب | تعليمات دقيقة |
| ✅ حل المشاكل التي تواجهها | بعد أن تجرب وترسل الأخطاء |
| ✅ تكييف الكود لدومين معين | تعديل الـURLs والمسارات |
🛠️ كيف تنشر ما بنيناه على zezoai.twisttaste.com
الطريقة 1: عبر cPanel / File Manager
الخطوة 1 — جهّز الملفات محلياً:
أنشئ على جهازك هذا الهيكل بالضبط:
text
future-zezo/
├── style.css
├── functions.php
├── index.php
├── header.php
├── footer.php
├── front-page.php
├── page-dashboard.php
├── page-agents.php
├── page-workflows.php
├── page-jobs.php
├── page-approvals.php
├── page-knowledge.php
├── page-integrations.php
├── page-api.php
├── page-licenses.php
├── screenshot.png ← صورة 1200×900
├── rtl.css ← (اختياري)
├── readme.txt
├── inc/
│ ├── requirements.php
│ ├── setup.php
│ ├── enqueue.php
│ ├── auth.php
│ ├── rest-bridge.php
│ ├── cpt.php
│ └── dashboard/
│ ├── class-dashboard.php
│ ├── class-agents-ui.php
│ ├── class-workflows-ui.php
│ ├── class-jobs-ui.php
│ ├── class-approvals-ui.php
│ ├── class-knowledge-ui.php
│ └── class-licenses-ui.php
└── zezo/
├── components/
│ ├── agent-card.php
│ ├── stat-widget.php
│ ├── activity-feed.php
│ └── active-workflows.php
└── assets/
├── css/zezo-ui.css
└── js/
├── command-palette.js
├── live-activity.js
├── workflow-canvas.js
└── theme-toggle.js
الخطوة 2 — اضغطه ZIP:
text
future-zezo.zip
الخطوة 3 — ارفعه إلى موقعك:
الطريقة A — عبر WordPress Admin:
text
https://zezoai.twisttaste.com/wp-admin → المظهر → القوالب → أضف جديد → رفع قالب → اختر future-zezo.zip → تثبيت → تفعيل
الطريقة B — عبر cPanel File Manager:
text
cPanel → File Manager → public_html/wp-content/themes/ → Upload future-zezo.zip → Extract → WordPress Admin → Appearance → Themes → Activate
الطريقة C — عبر FTP (FileZilla):
text
Host: ftp.zezoai.twisttaste.com User: (من cPanel) Pass: (من cPanel) → /public_html/wp-content/themes/ → ارفع مجلد future-zezo
الخطوة 4 — بعد التفعيل:
- ثبّت Zezo AI Core Plugin أولاً (إن لم يكن مثبتاً).
- Settings → Permalinks → اختر “Post name” → احفظ.
- Pages → Add New → أنشئ الصفحات:
Dashboard→ Template: Zezo DashboardAgents→ Template: Zezo AgentsWorkflows→ Template: Zezo WorkflowsJobs→ Template: Zezo JobsApprovals→ Template: Zezo ApprovalsKnowledge→ Template: Zezo KnowledgeIntegrations→ Template: Zezo IntegrationsAPI→ Template: Zezo API CenterLicenses→ Template: Zezo Licenses
- Settings → Reading → Front page displays: A static page → اختر صفحة رئيسية.
الطريقة 2: أن أسلمك ZIP كامل الآن
أستطيع تجميع كل الكود الذي كتبته في الأجزاء 1-3 وتقديمه لك في رد واحد، جاهزاً للنسخ واللصق، مع:
- ملف
install.sh(سكربت bash لإنشاء الهيكل تلقائياً على Linux/Mac). - ملف
install.ps1(لسكربت PowerShell على Windows). - ملف
README-AR.mdبتعليمات عربية مفصلة.
الطريقة 3: النشر عبر SSH / WP-CLI
إذا كانت استضافتك تدعم SSH، يمكنك استخدام:
bash
# 1. اتصال ssh user@zezoai.twisttaste.com # 2. انتقل لمجلد القوالب cd ~/public_html/wp-content/themes/ # 3. ارفع الـZIP عبر scp من جهازك: # (على جهازك المحلي) scp future-zezo.zip user@zezoai.twisttaste.com:~/public_html/wp-content/themes/ # 4. على السيرفر: unzip future-zezo.zip rm future-zezo.zip # 5. عبر WP-CLI: wp theme activate future-zezo wp rewrite flush
⚠️ تنبيهات مهمة قبل النشر
- النسخة الاحتياطية أولاً:bash# قبل أي شيء wp db export backup-$(date +%F).sql tar -czf wp-content-backup.tar.gz wp-content/
- اختبر على staging أولاً:
- أنشئ
staging.zezoai.twisttaste.com - طبّق كل شيء هناك
- ثم انقل إلى الإنتاج
- أنشئ
- تأكد أن Zezo AI Core Plugin مثبّت:
- بدون Core، القالب سيعرض رسالة خطأ (كما في
inc/requirements.php) - الرابط:
/wp-admin/plugins.php
- بدون Core، القالب سيعرض رسالة خطأ (كما في
- افحص PHP version:bashphp -v # يجب أن يكون 8.0 أو أعلى
- افحص memory_limit:bashphp -i | grep memory_limit # الموصى به: 256M+
🎯 ماذا تريد الآن؟
اختر واحداً:
(1) «جمّع ZIP كامل» → سأسلمك كل الأجزاء 1-3 في رد واحد منظّم مع سكربت تثبيت تلقائي وتعليمات عربية.
(2) «أكمل الأجزاء 4-5-6» → WooCommerce AI + Workflow Builder المتقدم + Analytics Center قبل التجميع.
(3) «واجهت مشكلة» → أخبرني بالخطأ الفعلي الذي يظهر عندك في zezoai.twisttaste.com وسأحلّه لك فوراً.
(4) «أرسل محتوى موقعي» → انسخ لي HTML/PHP الموجود على الدومين، وسأعيد بناءه فوق الهيكل الجديد.
ما اخترته؟