
<script>
window.__studioIntervals = window.__studioIntervals || {};
window.studioSetInterval = function(key, fn, ms){
    if(window.__studioIntervals[key]){
        clearInterval(window.__studioIntervals[key]);
    }
    window.__studioIntervals[key] = setInterval(fn, ms);
    return window.__studioIntervals[key];
};
</script>

<?php
/**
 * Homepage Studio — Professional replacement view
 * Safe rebuild: keeps all known Studio routes, widgets, variables, diagnostics modules,
 * preview, search, section/block management, drag reorder, visual designer,
 * command/actions, and existing controller endpoints.
 */

$title = 'Homepage Studio';

$moduleRenderer =
    BASE_PATH .
    '/app/views/admin/conference_home/studio_modules/render.php';

if (
    file_exists(
        $moduleRenderer
    )
) {
    require_once
        $moduleRenderer;
}

$slug =
    $conference['slug']
    ?? (
        $_SESSION['conference_slug']
        ?? ''
    );

$conferenceTitle =
    $conference['title_en']
    ?? $conference['name_en']
    ?? $conference['title']
    ?? 'Conference Homepage';

$sections =
    $sections
    ?? [];

$blocks =
    $blocks
    ?? [];

$heatmap =
    $heatmap
    ?? [];

$snapshots =
    $snapshots
    ?? [];

$stats =
    $stats
    ?? [];

$totalViews =
    array_sum(
        array_column(
            $heatmap,
            'views'
        )
    );

$totalClicks =
    array_sum(
        array_column(
            $heatmap,
            'clicks'
        )
    );

$sectionCount =
    count(
        $sections
    );

$blockCount =
    count(
        $blocks
    );

$activeSections =
    (int)(
        $stats['active_sections']
        ?? count(
            array_filter(
                $sections,
                fn($x) =>
                    (int)(
                        $x['enabled']
                        ?? 1
                    ) === 1
            )
        )
    );

$score =
    (int)(
        $stats['score']
        ?? (
            $health
            ?? 0
        )
    );

$health =
    (int)(
        $health
        ?? $score
        ?? 0
    );

$healthLabel =
    $healthLabel
    ?? (
        $health >= 90
        ? 'Excellent'
        : (
            $health >= 70
            ? 'Good'
            : 'Needs Work'
        )
    );

$governance =
    (int)(
        $governance
        ?? 0
    );

$governanceLabel =
    $governanceLabel
    ?? (
        $governance >= 90
        ? 'Enterprise'
        : (
            $governance >= 70
            ? 'Professional'
            : 'Developing'
        )
    );

function studio_h(
    $value
): string {
    return htmlspecialchars(
        (string)$value,
        ENT_QUOTES,
        'UTF-8'
    );
}

function studio_first(
    array $row,
    array $keys,
    string $fallback = ''
): string {
    foreach (
        $keys
        as $key
    ) {
        if (
            isset(
                $row[$key]
            )
            &&
            $row[$key] !== ''
            &&
            $row[$key] !== null
        ) {
            return
                (string)$row[$key];
        }
    }

    return
        $fallback;
}

function studio_section_health(
    array $section
): int {
    $score =
        100;

    if (
        empty(
            $section['title_en']
        )
        &&
        empty(
            $section['section_title_en']
        )
    ) {
        $score -=
            20;
    }

    if (
        empty(
            $section['title_ar']
        )
        &&
        empty(
            $section['section_title_ar']
        )
    ) {
        $score -=
            20;
    }

    if (
        empty(
            $section['subtitle_en']
        )
    ) {
        $score -=
            15;
    }

    if (
        empty(
            $section['subtitle_ar']
        )
    ) {
        $score -=
            15;
    }

    return
        max(
            0,
            $score
        );
}

function studio_block_health(
    array $block
): int {
    $score =
        100;

    if (
        empty(
            $block['title_en']
        )
    ) {
        $score -=
            30;
    }

    if (
        empty(
            $block['title_ar']
        )
    ) {
        $score -=
            30;
    }

    if (
        empty(
            $block['block_type']
        )
    ) {
        $score -=
            15;
    }

    return
        max(
            0,
            $score
        );
}

$primaryActions = [
    [
        'label' => 'Preview',
        'label_ar' => 'معاينة',
        'url' => '/easychair/admin/conference-home/preview',
        'class' => 'btn-primary',
        'icon' => 'fa-eye',
    ],
    [
        'label' => 'Publish',
        'label_ar' => 'نشر',
        'url' => '/easychair/admin/conference-home/publish',
        'class' => 'btn-success',
        'icon' => 'fa-rocket',
    ],
    [
        'label' => 'Versions',
        'label_ar' => 'الإصدارات',
        'url' => '/easychair/admin/conference-home/versions',
        'class' => 'btn-warning',
        'icon' => 'fa-code-branch',
    ],
    [
        'label' => 'Releases',
        'label_ar' => 'الإطلاقات',
        'url' => '/easychair/admin/conference-home/releases',
        'class' => 'btn-dark',
        'icon' => 'fa-box-open',
    ],
];

$aiActions = [
    [
        'label' => 'AI Import',
        'url' => '/easychair/admin/conference-home/ai-import',
        'icon' => 'fa-file-import',
    ],
    [
        'label' => 'AI Generate',
        'url' => '/easychair/admin/conference-home/ai-generate',
        'icon' => 'fa-wand-magic-sparkles',
    ],
    [
        'label' => 'AI Writer',
        'url' => '/easychair/admin/conference-home/ai-write',
        'icon' => 'fa-pen-nib',
    ],
    [
        'label' => 'AI Conference',
        'url' => '/easychair/admin/conference-home/ai-conference',
        'icon' => 'fa-users-gear',
    ],
];

$operationActions = [
    [
        'label' => 'Snapshot',
        'url' => '/easychair/admin/conference-home/snapshot',
        'icon' => 'fa-camera-retro',
    ],
    [
        'label' => 'Timeline',
        'url' => '/easychair/admin/conference-home/timeline',
        'icon' => 'fa-timeline',
    ],
    [
        'label' => 'Operations',
        'url' => '/easychair/admin/conference-home/ops',
        'icon' => 'fa-sliders',
    ],
    [
        'label' => 'Optimize',
        'url' => '/easychair/admin/conference-home/optimize',
        'icon' => 'fa-gauge-high',
    ],
    [
        'label' => 'Schedule',
        'url' => '/easychair/admin/conference-home/schedule',
        'icon' => 'fa-calendar-check',
    ],
    [
        'label' => 'Experiment',
        'url' => '/easychair/admin/conference-home/experiment',
        'icon' => 'fa-flask',
    ],
];

$libraryActions = [
    [
        'label' => 'Export',
        'url' => '/easychair/admin/conference-home/export',
        'icon' => 'fa-download',
    ],
    [
        'label' => 'Import',
        'url' => '/easychair/admin/conference-home/import',
        'icon' => 'fa-upload',
    ],
    [
        'label' => 'Clone',
        'url' => '/easychair/admin/conference-home/clone',
        'icon' => 'fa-copy',
    ],
    [
        'label' => 'Templates',
        'url' => '/easychair/admin/conference-home/templates',
        'icon' => 'fa-layer-group',
    ],
    [
        'label' => 'Marketplace',
        'url' => '/easychair/admin/conference-home/marketplace',
        'icon' => 'fa-store',
    ],
    [
        'label' => 'Blueprint',
        'url' => '/easychair/admin/conference-home/blueprint/export',
        'icon' => 'fa-diagram-project',
    ],
    [
        'label' => 'Blueprint Center',
        'url' => '/easychair/admin/conference-home/blueprints',
        'icon' => 'fa-network-wired',
    ],
    [
        'label' => 'Assets',
        'url' => '/easychair/admin/conference-home/assets',
        'icon' => 'fa-photo-film',
    ],
];

$commandActions = [
    [
        'label' => 'Refresh',
        'url' => '/easychair/admin/conference-home/command?cmd=refresh',
        'icon' => 'fa-rotate',
    ],
    [
        'label' => 'Simulate',
        'url' => '/easychair/admin/conference-home/simulate',
        'icon' => 'fa-vr-cardboard',
    ],
    [
        'label' => 'Archive',
        'url' => '/easychair/admin/conference-home/archive',
        'icon' => 'fa-box-archive',
        'danger' => true,
    ],
];

?>

<style>
:root{
    --studio-bg:#f4f7fb;
    --studio-card:#ffffff;
    --studio-ink:#0f172a;
    --studio-muted:#64748b;
    --studio-line:#e5e7eb;
    --studio-blue:#2563eb;
    --studio-cyan:#06b6d4;
    --studio-green:#16a34a;
    --studio-orange:#f59e0b;
    --studio-red:#dc2626;
    --studio-radius:26px;
}
body{
    background:
        radial-gradient(circle at top left,rgba(37,99,235,.10),transparent 34rem),
        radial-gradient(circle at top right,rgba(6,182,212,.08),transparent 30rem),
        var(--studio-bg)!important;
}
.studio-page{
    padding:24px;
}
.studio-hero{
    position:relative;
    overflow:hidden;
    border-radius:32px;
    color:#fff;
    padding:32px;
    background:
        linear-gradient(135deg,#07111f 0%,#0f2b5f 46%,#075985 100%);
    box-shadow:0 30px 90px rgba(15,23,42,.18);
}
.studio-hero:after{
    content:"";
    position:absolute;
    width:440px;
    height:440px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    right:-120px;
    top:-180px;
}
.studio-hero > *{
    position:relative;
    z-index:2;
}
.studio-title{
    font-weight:900;
    letter-spacing:-.04em;
    margin:0;
}
.studio-subtitle{
    color:rgba(255,255,255,.75);
    margin-top:8px;
}
.studio-chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 14px;
    border-radius:999px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.18);
    color:#fff;
    font-weight:700;
}
.metric-card{
    border:1px solid rgba(255,255,255,.20);
    background:rgba(255,255,255,.10);
    backdrop-filter:blur(12px);
    border-radius:24px;
    padding:20px;
    height:100%;
}
.metric-card .metric-label{
    color:rgba(255,255,255,.72);
    font-size:.9rem;
}
.metric-card .metric-value{
    font-size:2rem;
    font-weight:900;
    line-height:1.2;
}
.studio-card{
    background:var(--studio-card);
    border:1px solid var(--studio-line);
    border-radius:var(--studio-radius);
    box-shadow:0 18px 55px rgba(15,23,42,.07);
}
.studio-card-header{
    padding:20px 22px;
    border-bottom:1px solid var(--studio-line);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
}
.studio-card-body{
    padding:22px;
}
.studio-toolbar{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}
.studio-toolbar .btn{
    border-radius:15px;
    min-height:42px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-weight:700;
    box-shadow:none!important;
}
.studio-toolbar .btn-soft{
    background:#f8fafc;
    border:1px solid #e2e8f0;
    color:#0f172a;
}
.studio-toolbar .btn-soft:hover{
    background:#eef2ff;
    border-color:#c7d2fe;
}
.studio-search{
    border-radius:16px!important;
    min-height:46px;
    border:1px solid #dbe2ea!important;
}
.studio-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 430px;
    gap:24px;
}
.preview-frame{
    width:100%;
    min-height:920px;
    border:0;
    border-radius:24px;
    background:#fff;
    box-shadow:inset 0 0 0 1px #e5e7eb;
}
.designer-panel{
    display:grid;
    grid-template-columns:1fr 1fr auto;
    gap:12px;
}
.side-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}
.side-item{
    border:1px solid #e8eef5;
    border-radius:20px;
    padding:16px;
    background:#fff;
    transition:.2s ease;
}
.side-item:hover{
    transform:translateY(-2px);
    box-shadow:0 16px 38px rgba(15,23,42,.08);
}
.item-title{
    font-weight:800;
    color:#0f172a;
}
.item-sub{
    color:#64748b;
    font-size:.84rem;
}
.health-badge{
    border-radius:999px;
    padding:5px 10px;
    font-size:.75rem;
    font-weight:800;
}
.health-good{
    background:#dcfce7;
    color:#166534;
}
.health-warn{
    background:#fef3c7;
    color:#92400e;
}
.health-bad{
    background:#fee2e2;
    color:#991b1b;
}
.mini-card{
    border:1px solid #edf2f7;
    border-radius:18px;
    padding:16px;
    background:#f8fafc;
}
.timeline-row{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
}
.timeline-point{
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:18px;
    padding:14px;
    text-align:center;
}
.sticky-side{
    position:sticky;
    top:20px;
}
.diagnostics-wrap .card,
.diagnostics-wrap .card-studio{
    border:1px solid #e5e7eb!important;
    border-radius:20px!important;
    box-shadow:none!important;
    margin-bottom:14px!important;
}
.diagnostics-wrap .btn{
    border-radius:14px!important;
}
@media(max-width:1200px){
    .studio-grid{
        grid-template-columns:1fr;
    }
    .sticky-side{
        position:static;
    }
}
@media(max-width:768px){
    .studio-page{
        padding:12px;
    }
    .designer-panel,
    .timeline-row{
        grid-template-columns:1fr;
    }
}
</style>

<div class="studio-page">

    <section class="studio-hero mb-4">
        <div class="d-flex justify-content-between align-items-start flex-wrap gap-3">
            <div>
                <span class="studio-chip mb-3">
                    <i class="fa-solid fa-wand-magic-sparkles"></i>
                    Homepage Command Center
                </span>

                <h1 class="studio-title">
                    Homepage Studio
                </h1>

                <div class="studio-subtitle">
                    <?= studio_h($conferenceTitle) ?>
                    <?php if ($slug): ?>
                        <span class="mx-2">•</span>
                        <span>
                            /conference/<?= studio_h($slug) ?>
                        </span>
                    <?php endif; ?>
                </div>
            </div>

            <div class="d-flex gap-2 flex-wrap">
                <a
                    href="/easychair/admin/conference-home"
                    class="btn btn-light">
                    <i class="fa-solid fa-arrow-left"></i>
                    Back
                </a>

                <a
                    href="/easychair/conference/<?= urlencode($slug) ?>"
                    target="_blank"
                    class="btn btn-outline-light">
                    <i class="fa-solid fa-up-right-from-square"></i>
                    Open Public Page
                </a>
            </div>
        </div>

        <div class="row g-3 mt-4">
            <div class="col-lg-3 col-md-6">
                <div class="metric-card">
                    <div class="metric-label">
                        Sections
                    </div>
                    <div class="metric-value">
                        <?= number_format($sectionCount) ?>
                    </div>
                    <div class="small opacity-75">
                        Active: <?= number_format($activeSections) ?>
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-md-6">
                <div class="metric-card">
                    <div class="metric-label">
                        Blocks
                    </div>
                    <div class="metric-value">
                        <?= number_format($blockCount) ?>
                    </div>
                    <div class="small opacity-75">
                        Visible: <?= number_format($blockCount) ?>
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-md-6">
                <div class="metric-card">
                    <div class="metric-label">
                        Health
                    </div>
                    <div class="metric-value">
                        <?= number_format($health) ?>%
                    </div>
                    <div class="small opacity-75">
                        <?= studio_h($healthLabel) ?>
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-md-6">
                <div class="metric-card">
                    <div class="metric-label">
                        Governance
                    </div>
                    <div class="metric-value">
                        <?= number_format($governance) ?>%
                    </div>
                    <div class="small opacity-75">
                        <?= studio_h($governanceLabel) ?>
                    </div>
                </div>
            </div>
        </div>

        <div class="row g-3 mt-1">
            <div class="col-lg-3 col-md-6">
                <div class="metric-card">
                    <div class="metric-label">
                        Views
                    </div>
                    <div class="metric-value">
                        <?= number_format($totalViews) ?>
                    </div>
                    <div class="small opacity-75">
                        Heatmap visits
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-md-6">
                <div class="metric-card">
                    <div class="metric-label">
                        Clicks
                    </div>
                    <div class="metric-value">
                        <?= number_format($totalClicks) ?>
                    </div>
                    <div class="small opacity-75">
                        User interactions
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-md-6">
                <div class="metric-card">
                    <div class="metric-label">
                        Snapshots
                    </div>
                    <div class="metric-value">
                        <?= number_format(count($snapshots)) ?>
                    </div>
                    <div class="small opacity-75">
                        Recovery points
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-md-6">
                <div class="metric-card">
                    <div class="metric-label">
                        Preview
                    </div>
                    <div class="metric-value">
                        LIVE
                    </div>
                    <div class="small opacity-75">
                        Smart preview enabled
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="studio-card mb-4">
        <div class="studio-card-header">
            <div>
                <h5 class="mb-1">
                    Publishing Queue
                </h5>
                <div class="text-muted small">
                    Draft → Review → Publish
                </div>
            </div>

            <span class="badge bg-primary rounded-pill">
                75%
            </span>
        </div>

        <div class="studio-card-body">
            <div class="progress" style="height:12px;border-radius:999px;">
                <div
                    class="progress-bar"
                    style="width:75%;border-radius:999px;">
                </div>
            </div>
        </div>
    </section>

    <section class="studio-card mb-4">
        <div class="studio-card-header">
            <div>
                <h5 class="mb-1">
                    Studio Actions
                </h5>
                <div class="text-muted small">
                    Professional workflow, AI, marketplace, releases and recovery tools.
                </div>
            </div>

            <input
                type="text"
                id="homepageSearch"
                class="form-control studio-search"
                style="max-width:310px;"
                placeholder="Search sections / blocks...">
        </div>

        <div class="studio-card-body">

            <div class="mb-3">
                <div class="small text-uppercase fw-bold text-muted mb-2">
                    Primary
                </div>

                <div class="studio-toolbar">
                    <?php foreach ($primaryActions as $action): ?>
                        <a
                            href="<?= studio_h($action['url']) ?>"
                            class="btn <?= studio_h($action['class']) ?>">
                            <i class="fa-solid <?= studio_h($action['icon']) ?>"></i>
                            <?= studio_h($action['label']) ?>
                        </a>
                    <?php endforeach; ?>
                </div>
            </div>

            <div class="mb-3">
                <div class="small text-uppercase fw-bold text-muted mb-2">
                    AI Composer
                </div>

                <div class="studio-toolbar">
                    <?php foreach ($aiActions as $action): ?>
                        <a
                            href="<?= studio_h($action['url']) ?>"
                            class="btn btn-outline-danger">
                            <i class="fa-solid <?= studio_h($action['icon']) ?>"></i>
                            <?= studio_h($action['label']) ?>
                        </a>
                    <?php endforeach; ?>
                </div>
            </div>

            <div class="mb-3">
                <div class="small text-uppercase fw-bold text-muted mb-2">
                    Operations
                </div>

                <div class="studio-toolbar">
                    <?php foreach ($operationActions as $action): ?>
                        <a
                            href="<?= studio_h($action['url']) ?>"
                            class="btn btn-soft">
                            <i class="fa-solid <?= studio_h($action['icon']) ?>"></i>
                            <?= studio_h($action['label']) ?>
                        </a>
                    <?php endforeach; ?>

                    <button
                        type="button"
                        id="undoBtn"
                        class="btn btn-outline-warning">
                        <i class="fa-solid fa-rotate-left"></i>
                        Undo
                    </button>

                    <button
                        type="button"
                        id="redoBtn"
                        class="btn btn-outline-info">
                        <i class="fa-solid fa-rotate-right"></i>
                        Redo
                    </button>
                </div>
            </div>

            <div class="mb-3">
                <div class="small text-uppercase fw-bold text-muted mb-2">
                    Library & Distribution
                </div>

                <div class="studio-toolbar">
                    <?php foreach ($libraryActions as $action): ?>
                        <a
                            href="<?= studio_h($action['url']) ?>"
                            class="btn btn-outline-dark">
                            <i class="fa-solid <?= studio_h($action['icon']) ?>"></i>
                            <?= studio_h($action['label']) ?>
                        </a>
                    <?php endforeach; ?>
                </div>
            </div>

            <div>
                <div class="small text-uppercase fw-bold text-muted mb-2">
                    Command Bus
                </div>

                <div class="studio-toolbar">
                    <?php foreach ($commandActions as $action): ?>
                        <a
                            href="<?= studio_h($action['url']) ?>"
                            class="btn <?= !empty($action['danger']) ? 'btn-outline-danger' : 'btn-outline-primary' ?>">
                            <i class="fa-solid <?= studio_h($action['icon']) ?>"></i>
                            <?= studio_h($action['label']) ?>
                        </a>
                    <?php endforeach; ?>
                </div>
            </div>

        </div>
    </section>

    <div class="studio-grid">

        <main>

            <section class="studio-card mb-4">
                <div class="studio-card-header">
                    <div>
                        <h5 class="mb-1">
                            Live Preview
                        </h5>
                        <div class="text-muted small">
                            Public conference homepage preview rendered in an isolated frame.
                        </div>
                    </div>

                    <a
                        class="btn btn-dark"
                        target="_blank"
                        href="/easychair/conference/<?= urlencode($slug) ?>">
                        <i class="fa-solid fa-up-right-from-square"></i>
                        Open
                    </a>
                </div>

                <div class="studio-card-body">
                    <div class="designer-panel mb-3">
                        <select
                            id="designerTheme"
                            class="form-select">
                            <option value="glass">
                                Glass
                            </option>
                            <option value="gradient">
                                Gradient
                            </option>
                            <option value="corporate">
                                Corporate
                            </option>
                            <option value="minimal">
                                Minimal
                            </option>
                        </select>

                        <select
                            id="designerAnim"
                            class="form-select">
                            <option value="fade-up">
                                fade-up
                            </option>
                            <option value="zoom-in">
                                zoom-in
                            </option>
                            <option value="slide-left">
                                slide-left
                            </option>
                            <option value="float">
                                float
                            </option>
                        </select>

                        <button
                            type="button"
                            class="btn btn-outline-primary"
                            onclick="document.getElementById('livePreview')?.contentWindow?.location?.reload();">
                            <i class="fa-solid fa-rotate"></i>
                            Reload Preview
                        </button>
                    </div>

                    <iframe
                        id="livePreview"
                        class="preview-frame"
                        loading="lazy"
                        src="/easychair/conference/<?= urlencode($slug) ?>">
                    </iframe>
                </div>
            </section>

            <section class="studio-card mb-4">
                <div class="studio-card-header">
                    <div>
                        <h5 class="mb-1">
                            Conference Intelligence
                        </h5>
                        <div class="text-muted small">
                            Speaker intelligence, program composition and proceedings summary.
                        </div>
                    </div>

                    <span class="badge bg-success rounded-pill">
                        AI
                    </span>
                </div>

                <div class="studio-card-body">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <div class="mini-card">
                                <div class="text-muted small">
                                    Speakers
                                </div>
                                <h4 class="mb-0">
                                    8+
                                </h4>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="mini-card">
                                <div class="text-muted small">
                                    Sessions
                                </div>
                                <h4 class="mb-0">
                                    24
                                </h4>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="mini-card">
                                <div class="text-muted small">
                                    Tracks
                                </div>
                                <h4 class="mb-0">
                                    6
                                </h4>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="studio-card mb-4">
                <div class="studio-card-header">
                    <div>
                        <h5 class="mb-1">
                            Program Timeline
                        </h5>
                        <div class="text-muted small">
                            Draft timeline generated for conference homepage composition.
                        </div>
                    </div>
                </div>

                <div class="studio-card-body">
                    <div class="timeline-row">
                        <div class="timeline-point">
                            <strong>
                                09:00
                            </strong>
                            <br>
                            Opening
                        </div>

                        <div class="timeline-point">
                            <strong>
                                10:30
                            </strong>
                            <br>
                            Keynote
                        </div>

                        <div class="timeline-point">
                            <strong>
                                13:00
                            </strong>
                            <br>
                            Tracks
                        </div>

                        <div class="timeline-point">
                            <strong>
                                16:00
                            </strong>
                            <br>
                            Closing
                        </div>
                    </div>
                </div>
            </section>

        </main>

        <aside class="sticky-side">

            <section class="studio-card mb-4">
                <div class="studio-card-header">
                    <div>
                        <h5 class="mb-1">
                            Sections
                            <span class="badge bg-primary rounded-pill">
                                <?= number_format($sectionCount) ?>
                            </span>
                        </h5>
                        <div class="text-muted small">
                            Quality diagnostics and ordering.
                        </div>
                    </div>

                    <a
                        class="btn btn-sm btn-primary"
                        href="/easychair/admin/conference-home/sections">
                        Manage
                    </a>
                </div>

                <div class="studio-card-body">
                    <div
                        id="sectionSortList"
                        class="side-list">
                        <?php foreach ($sections as $s): ?>
                            <?php
                            $sectionHealth =
                                studio_section_health(
                                    $s
                                );

                            $sectionTitle =
                                studio_first(
                                    $s,
                                    [
                                        'section_title_en',
                                        'title_en',
                                        'section_key',
                                    ],
                                    'Section'
                                );

                            $sectionArabic =
                                studio_first(
                                    $s,
                                    [
                                        'section_title_ar',
                                        'title_ar',
                                    ],
                                    ''
                                );

                            $sectionKey =
                                $s['section_key']
                                ?? '';
                            ?>

                            <div
                                class="side-item studio-searchable"
                                data-type="section"
                                data-id="<?= (int)($s['id'] ?? 0) ?>">
                                <div class="d-flex justify-content-between gap-2">
                                    <div>
                                        <div class="item-title">
                                            <?= studio_h($sectionTitle) ?>
                                        </div>

                                        <?php if ($sectionArabic): ?>
                                            <div class="item-sub">
                                                <?= studio_h($sectionArabic) ?>
                                            </div>
                                        <?php endif; ?>

                                        <div class="mt-2 d-flex gap-2 flex-wrap">
                                            <?php if ($sectionKey === 'speakers'): ?>
                                                <span class="badge bg-primary">
                                                    AI Speaker
                                                </span>
                                            <?php endif; ?>

                                            <?php if (!empty($s['generated_json'])): ?>
                                                <span class="badge bg-success">
                                                    AI Generated
                                                </span>
                                            <?php endif; ?>

                                            <span class="badge bg-light text-dark">
                                                <?= studio_h($sectionKey) ?>
                                            </span>

                                            <span class="health-badge <?= $sectionHealth >= 80 ? 'health-good' : ($sectionHealth >= 60 ? 'health-warn' : 'health-bad') ?>">
                                                <?= $sectionHealth ?>%
                                            </span>
                                        </div>

                                        <?php if (!empty($s['content_en'])): ?>
                                            <div class="item-sub mt-2">
                                                <?= studio_h(mb_substr((string)$s['content_en'], 0, 110)) ?>…
                                            </div>
                                        <?php endif; ?>
                                    </div>

                                    <div>
                                        <a
                                            class="btn btn-sm btn-outline-dark"
                                            href="/easychair/admin/conference-home/sections/edit?id=<?= (int)($s['id'] ?? 0) ?>">
                                            Edit
                                        </a>
                                    </div>
                                </div>
                            </div>
                        <?php endforeach; ?>

                        <?php if (!$sections): ?>
                            <div class="text-muted">
                                No sections yet.
                            </div>
                        <?php endif; ?>
                    </div>
                </div>
            </section>

            <section class="studio-card mb-4">
                <div class="studio-card-header">
                    <div>
                        <h5 class="mb-1">
                            Proceedings Composer
                        </h5>
                        <div class="text-muted small">
                            Indexed proceedings readiness.
                        </div>
                    </div>
                </div>

                <div class="studio-card-body">
                    <div class="d-flex flex-column gap-2">
                        <div>
                            <i class="fa-solid fa-check text-success"></i>
                            Indexed
                        </div>

                        <div>
                            <i class="fa-solid fa-book text-primary"></i>
                            Publisher: Conference Proceedings
                        </div>

                        <div>
                            <i class="fa-solid fa-diagram-project text-info"></i>
                            Tracks: 6
                        </div>

                        <div>
                            <i class="fa-solid fa-robot text-danger"></i>
                            Auto Generated
                        </div>
                    </div>
                </div>
            </section>

            <section class="studio-card mb-4">
                <div class="studio-card-header">
                    <div>
                        <h5 class="mb-1">
                            Blocks
                            <span class="badge bg-dark rounded-pill">
                                <?= number_format($blockCount) ?>
                            </span>
                        </h5>
                        <div class="text-muted small">
                            Homepage content blocks.
                        </div>
                    </div>

                    <a
                        class="btn btn-sm btn-dark"
                        href="/easychair/admin/conference-home/blocks">
                        Manage
                    </a>
                </div>

                <div class="studio-card-body">
                    <div class="side-list">
                        <?php foreach ($blocks as $b): ?>
                            <?php
                            $blockHealth =
                                studio_block_health(
                                    $b
                                );

                            $blockTitle =
                                studio_first(
                                    $b,
                                    [
                                        'title_en',
                                        'block_key',
                                    ],
                                    'Block'
                                );

                            $blockArabic =
                                studio_first(
                                    $b,
                                    [
                                        'title_ar',
                                    ],
                                    ''
                                );
                            ?>

                            <div
                                class="side-item studio-searchable"
                                data-type="block">
                                <div class="d-flex justify-content-between gap-2">
                                    <div>
                                        <div class="item-title">
                                            <?= studio_h($blockTitle) ?>
                                        </div>

                                        <?php if ($blockArabic): ?>
                                            <div class="item-sub">
                                                <?= studio_h($blockArabic) ?>
                                            </div>
                                        <?php endif; ?>

                                        <div class="mt-2 d-flex gap-2 flex-wrap">
                                            <span class="badge bg-light text-dark">
                                                <?= studio_h($b['block_type'] ?? 'block') ?>
                                            </span>

                                            <span class="health-badge <?= $blockHealth >= 80 ? 'health-good' : ($blockHealth >= 60 ? 'health-warn' : 'health-bad') ?>">
                                                <?= $blockHealth ?>%
                                            </span>
                                        </div>
                                    </div>

                                    <div>
                                        <a
                                            class="btn btn-sm btn-outline-primary"
                                            href="/easychair/admin/conference-home/blocks/edit?id=<?= (int)($b['id'] ?? 0) ?>">
                                            Edit
                                        </a>
                                    </div>
                                </div>
                            </div>
                        <?php endforeach; ?>

                        <?php if (!$blocks): ?>
                            <div class="text-muted">
                                No blocks yet.
                            </div>
                        <?php endif; ?>
                    </div>
                </div>
            </section>

            <section class="studio-card mb-4 diagnostics-wrap">
                <div class="studio-card-header">
                    <div>
                        <h5 class="mb-1">
                            Diagnostics Center
                        </h5>
                        <div class="text-muted small">
                            Runtime modules, collaboration, policy, health, intelligence and automation.
                        </div>
                    </div>

                    <span
                        id="studioStatus"
                        class="badge bg-success">
                        Live
                    </span>
                </div>

                <div class="studio-card-body">
                    <?php
                    if (
                        function_exists(
                            'studio_render'
                        )
                    ) {
                        studio_render(
                            'diagnostics',
                            get_defined_vars()
                        );
                    } else {
                        ?>
                        <div class="text-muted">
                            Diagnostics module not loaded.
                        </div>
                        <?php
                    }
                    ?>
                </div>
            </section>

        </aside>

    </div>

    <footer class="text-center text-muted small mt-5 mb-3">
        Homepage Studio
        •
        Conference Command Center
        •
        <?= date('Y') ?>
    </footer>

</div>

<script>
(function(){
    const search = document.getElementById('homepageSearch');

    search?.addEventListener('input', function(){
        const q = this.value.toLowerCase();

        document.querySelectorAll('.studio-searchable').forEach(function(item){
            item.style.display = item.innerText.toLowerCase().includes(q) ? '' : 'none';
        });

        const preview = document.querySelector('.preview-frame');

        if (preview) {
            preview.style.opacity = q ? '.96' : '1';
        }
    });
})();
</script>

<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>

<script>
(function(){
    const list = document.getElementById('sectionSortList');
    const undoBtn = document.getElementById('undoBtn');
    const redoBtn = document.getElementById('redoBtn');

    let undo = [];
    let redo = [];

    function currentOrder(){
        return Array.from(
            document.querySelectorAll('#sectionSortList [data-id]')
        ).map(function(x){
            return x.dataset.id;
        }).filter(Boolean);
    }

    function saveOrder(){
        const ids = currentOrder();

        if (!ids.length) {
            return;
        }

        undo.push(ids);

        fetch('/easychair/admin/conference-home/reorder', {
            method:'POST',
            headers:{
                'Content-Type':'application/x-www-form-urlencoded'
            },
            body:'order[]=' + ids.join('&order[]=')
        }).then(function(){
            const status = document.getElementById('studioStatus');

            if (status) {
                status.className = 'badge bg-primary';
                status.innerHTML = 'Saved';
            }
        });
    }

    if (list && window.Sortable) {
        new Sortable(list, {
            animation: 180,
            handle: '.side-item',
            onEnd: saveOrder
        });
    }

    undoBtn?.addEventListener('click', function(){
        if (undo.length) {
            redo.push(undo.pop());
            location.reload();
        }
    });

    redoBtn?.addEventListener('click', function(){
        location.reload();
    });
})();
</script>

<script>
(function(){
    const iframe =
        document.getElementById('livePreview');

    document.getElementById('designerTheme')?.addEventListener('change', function(){
        if (!iframe) {
            return;
        }

        iframe.style.transition = '.35s';
        iframe.style.border =
            this.value === 'corporate'
            ? '6px solid #0f172a'
            : (
                this.value === 'gradient'
                ? '6px solid #2563eb'
                : (
                    this.value === 'minimal'
                    ? '2px solid #e5e7eb'
                    : '6px solid rgba(37,99,235,.35)'
                )
            );
    });

    document.getElementById('designerAnim')?.addEventListener('change', function(){
        if (!iframe) {
            return;
        }

        iframe.style.transition = '.25s';
        iframe.style.transform =
            this.value === 'zoom-in'
            ? 'scale(.985)'
            : (
                this.value === 'slide-left'
                ? 'translateX(-4px)'
                : (
                    this.value === 'float'
                    ? 'translateY(-4px)'
                    : 'translateY(0)'
                )
            );

        setTimeout(function(){
            iframe.style.transform = 'none';
        }, 280);
    });
})();
</script>

<script>
(function(){
    let draftTimer;

    function setStatus(label, className){
        const status = document.getElementById('studioStatus');

        if (status) {
            status.className = className;
            status.innerHTML = label;
        }
    }

    function saveDraft(){
        fetch('/easychair/admin/conference-home/autosave', {
            method:'POST',
            headers:{
                'Content-Type':'application/json'
            },
            body:JSON.stringify({
                key:'studio',
                time:Date.now()
            })
        }).then(function(){
            setStatus('Saved', 'badge bg-primary');
        }).catch(function(){
            setStatus('Offline', 'badge bg-danger');
        });
    }

    document.addEventListener('input', function(){
        clearTimeout(draftTimer);
        draftTimer = setTimeout(saveDraft, 2500);
    });

    
studioSetInterval(
'studio_refresh',
function(){


        fetch('/easychair/admin/conference-home/check-draft')
            .then(function(r){ return r.json(); })
            .then(function(x){
                if (x && x.updated_at) {
                    setStatus('Updated ' + x.updated_at, 'badge bg-success');
                }
            })
            .catch(function(){});
    }, 30000);
})();
</script>

<script>
(function(){
    function safeLoad(url, id, renderer){
        const el = document.getElementById(id);

        if (!el) {
            return;
        }

        fetch(url)
            .then(function(r){
                return r.json();
            })
            .then(function(data){
                el.innerHTML = renderer(data);
            })
            .catch(function(){
                el.innerHTML = '<div class="text-muted">Unavailable</div>';
            });
    }

    safeLoad('/easychair/admin/conference-home/activity', 'studioFeed', function(rows){
        if (!Array.isArray(rows) || !rows.length) {
            return 'No Activity';
        }

        return rows.slice(0, 8).map(function(r){
            return '<div class="small border-bottom py-1">● ' +
                (r.event_type || 'event') +
                '<br>' +
                (r.created_at || '') +
                '</div>';
        }).join('');
    });

    safeLoad('/easychair/admin/conference-home/health', 'homepageHealth', function(x){
        return '<div>Score: <b>' + (x.score ?? 0) + '%</b></div>' +
            '<div>Sections: ' + (x.sections ?? 0) + '</div>' +
            '<div>Blocks: ' + (x.blocks ?? 0) + '</div>';
    });

    safeLoad('/easychair/admin/conference-home/recommendations', 'homepageRecommendations', function(rows){
        if (!Array.isArray(rows) || !rows.length) {
            return '<div class="alert alert-success py-2">Homepage Healthy</div>';
        }

        return rows.map(function(x){
            return '<div class="alert alert-warning py-2">' +
                (x.message || '') +
                '</div>';
        }).join('');
    });

    safeLoad('/easychair/admin/conference-home/governance', 'homepageGovernance', function(rows){
        if (!Array.isArray(rows) || !rows.length) {
            return 'No Governance Data';
        }

        return rows.map(function(x){
            return '<div class="mini-card mb-2"><b>' +
                (x.type || '') +
                '</b><br>' +
                (x.score ?? 0) +
                '%<br>' +
                (x.message || '') +
                '</div>';
        }).join('');
    });

    safeLoad('/easychair/admin/conference-home/certify', 'homepageCertification', function(x){
        return '<div class="alert alert-info py-2">Score: <b>' +
            (x.score ?? 0) +
            '%</b><br>Status: ' +
            (x.status || '') +
            '</div>' +
            ((x.issues || []).map(function(i){
                return '<div class="small">⚠ ' + i + '</div>';
            }).join(''));
    });

    safeLoad('/easychair/admin/conference-home/observatory', 'homepageExecutive', function(x){
        return '<div class="row g-2 text-center">' +
            '<div class="col">Sections<br><b>' + (x.sections ?? 0) + '</b></div>' +
            '<div class="col">Blocks<br><b>' + (x.blocks ?? 0) + '</b></div>' +
            '<div class="col">Releases<br><b>' + (x.releases ?? 0) + '</b></div>' +
            '<div class="col">Quality<br><b>' + (x.quality ?? 0) + '%</b></div>' +
            '</div>';
    });

    safeLoad('/easychair/admin/conference-home/command-center', 'homepageCommandCenter', function(x){
        return '<div class="row g-2 text-center">' +
            '<div class="col">Conferences<br><b>' + (x.conferences ?? 0) + '</b></div>' +
            '<div class="col">Homepages<br><b>' + (x.homepages ?? 0) + '</b></div>' +
            '<div class="col">Releases<br><b>' + (x.releases ?? 0) + '</b></div>' +
            '<div class="col">Coverage<br><b>' + (x.coverage ?? 0) + '%</b></div>' +
            '</div>';
    });

    safeLoad('/easychair/admin/conference-home/policy', 'homepagePolicy', function(x){
        if (x.passed) {
            return '<div class="alert alert-success py-2">Organization Policy Passed</div>';
        }

        return '<div class="alert alert-warning py-2">Missing:<br>' +
            ((x.missing || []).join('<br>')) +
            '</div>';
    });

    safeLoad('/easychair/admin/conference-home/lifecycle', 'homepageLifecycle', function(x){
        return '<div class="alert alert-secondary py-2">State: <b>' +
            (x.lifecycle_state || 'active') +
            '</b></div>';
    });

    safeLoad('/easychair/admin/conference-home/simulation', 'homepageSimulation', function(x){
        if (!x.id) {
            return '<div class="text-muted">No simulation</div>';
        }

        return '<div class="alert alert-info py-2">Twin: ' +
            (x.simulation_name || '') +
            '<br>' +
            (x.created_at || '') +
            '</div>';
    });

    safeLoad('/easychair/admin/conference-home/queue', 'homepageQueue', function(x){
        if (!x.id) {
            return 'No Jobs';
        }

        return '<div class="alert alert-secondary py-2">' +
            (x.job_type || '') +
            '<br>' +
            (x.job_state || '') +
            '</div>';
    });

    safeLoad('/easychair/admin/conference-home/schedule/status', 'homepageScheduler', function(x){
        if (!x.id) {
            return 'No Schedule';
        }

        return '<div class="alert alert-info py-2">' +
            (x.job_name || '') +
            '<br>' +
            (x.execute_at || '') +
            '</div>';
    });

    safeLoad('/easychair/admin/conference-home/experiment/status', 'homepageExperiment', function(x){
        if (!x.id) {
            return 'No Experiment';
        }

        return '<div class="alert alert-primary py-2">' +
            (x.experiment_name || '') +
            '<br>Traffic: ' +
            (x.traffic_percent || 0) +
            '%</div>';
    });

    safeLoad('/easychair/admin/conference-home/intelligence', 'homepageIntelligence', function(x){
        return '<div class="alert alert-dark py-2">Score: <b>' +
            (x.score ?? 0) +
            '%</b><br>' +
            (x.decision || '') +
            '</div>';
    });

    safeLoad('/easychair/admin/conference-home/events', 'homepageEvents', function(rows){
        if (!Array.isArray(rows) || !rows.length) {
            return 'No Events';
        }

        return rows.slice(0, 8).map(function(r){
            return '<div class="small border-bottom py-1">' +
                (r.event_name || '') +
                '<br>' +
                (r.created_at || '') +
                '</div>';
        }).join('');
    });

    safeLoad('/easychair/admin/conference-home/snapshot/status', 'homepageSnapshot', function(x){
        if (!x.id) {
            return 'No Snapshot';
        }

        return '<div class="alert alert-secondary py-2">Snapshot<br>' +
            (x.created_at || '') +
            '</div>';
    });

    safeLoad('/easychair/admin/conference-home/catalog', 'homepageCatalog', function(rows){
        if (!Array.isArray(rows) || !rows.length) {
            return 'No Catalog';
        }

        return rows.slice(0, 5).map(function(r){
            return '<div class="small border rounded p-2 mb-2">' +
                (r.title_en || '') +
                '<br>' +
                (r.catalog_key || '') +
                '</div>';
        }).join('');
    });

    safeLoad('/easychair/admin/conference-home/mesh', 'homepageMesh', function(x){
        return '<div>Components: <b>' +
            ((x.components || []).length) +
            '</b></div>' +
            '<div>Themes: <b>' +
            ((x.themes || []).length) +
            '</b></div>';
    });
})();
</script>

<script>
(function(){
    function heartbeat(){
        fetch('/easychair/admin/conference-home/heartbeat').catch(function(){});
    }

    function activity(){
        fetch('/easychair/admin/conference-home/activity').catch(function(){});
    }

    heartbeat();
    activity();

    
studioSetInterval(
'heartbeat',
heartbeat,
30000
)
;
    
studioSetInterval(
'activity',
activity,
30000
)
;
})();
</script>


<script>

document
.getElementById(
'saveWorkspace'
)

?.addEventListener(

'click',

()=>{

fetch(

'/easychair/admin/conference-home/workspace/save',

{

method:
'POST',

body:

JSON.stringify({

scroll:

window.scrollY

})

}

);

alert(
'Workspace Saved'
);

}

);

</script>


<script>

let palette=
document
.getElementById(
'commandPalette'
);

document
.addEventListener(

'keydown',

e=>{

if(
e.ctrlKey
&&
e.key==='k'
){

e.preventDefault();

palette.style.display='block';

loadCommands();

}

if(
e.key==='Escape'
){

palette.style.display='none';

}

}

);

function loadCommands(){

fetch(

'/easychair/admin/conference-home/commands'

)

.then(
r=>r.json()
)

.then(

rows=>{

document
.getElementById(
'studioResults'
)

.innerHTML=

rows.map(

x=>

`
<div

class="command-row"

onclick="location.href='${x.command_url}'">

<i
class="fa ${x.command_icon}">
</i>

${x.command_title}

</div>

`

).join('');

}

);

}

</script>

<script>

function loadCollaboration(){

fetch(

'/easychair/admin/conference-home/collaboration'

)

.then(
r=>r.json()
)

.then(

x=>{

let html=

`

<div
class="badge bg-danger mb-2">

${x.unread}

Unread

</div>

`;

x.activity.forEach(

a=>{

html+=

`

<div
class="border-bottom py-2">

${a.activity_text}

<br>

<small>

${a.created_at}

</small>

</div>

`;

}

);

const el=

document
.getElementById(
'studioActivity'
);

if(
el
){

el.innerHTML=
html;

}

}

);

}

loadCollaboration();

studioSetInterval('collaboration', loadCollaboration, 30000);

</script>

<script>

function loadPresence(){

fetch(

'/easychair/admin/conference-home/presence'

)

.then(
r=>r.json()
)

.then(

rows=>{

const el=

document
.getElementById(
'studioPresence'
);

if(
!el)
return;

el.innerHTML=

rows.length

?

rows.map(

u=>

`

<div
class="mb-2">

🟢

${u.editor_name}

</div>

`

).join('')

:

'Only you';

}

);

}

loadPresence();

studioSetInterval('presence', loadPresence, 15000);

</script>

<script>

function loadTimeline(){

fetch(

'/easychair/admin/conference-home/timeline'

)

.then(
r=>r.json()
)

.then(

rows=>{

const el=

document
.getElementById(
'studioTimeline'
);

if(
!el)
return;

if(
!rows.length){

el.innerHTML=
'No Reviews';

return;

}

el.innerHTML=

rows.map(

r=>

`
<div
class="mb-2
border-bottom
pb-2">

<b>

${r.change_type}

</b>

<br>

<span
class="badge bg-secondary">

${r.approval_state}

</span>

<br>

<small>

${r.created_at}

</small>

</div>

`

).join('');

}

);

}

loadTimeline();

studioSetInterval('timeline', loadTimeline, 30000);

</script>

<script>

function loadBranch(){

fetch(

'/easychair/admin/conference-home/branches'

)

.then(
r=>r.json()
)

.then(

x=>{

const el=

document
.getElementById(
'studioBranch'
);

if(
!el)
return;

el.innerHTML=

x.id

?

`

<div
class="alert alert-primary">

${x.branch_name}

<br>

${x.created_at}

</div>

`

:

`
No Branch

`;

}

);

}

loadBranch();

</script>

<script>

function loadDeployment(){

fetch(

'/easychair/admin/conference-home/deployment'

)

.then(
r=>r.json()
)

.then(

x=>{

const el=

document
.getElementById(
'studioDeployment'
);

if(
!el)
return;

el.innerHTML=

x.id

?

`

<div
class="alert alert-success">

${x.ring_name}

<br>

${x.traffic_percent}%

<br>

${x.deployment_state}

</div>

`

:

`
No Deployment

`;

}

);

}

loadDeployment();

</script>

<script>

function loadMission(){

fetch(

'/easychair/admin/conference-home/mission-control'

)

.then(
r=>r.json()
)

.then(

x=>{

const el=

document
.getElementById(
'studioMission'
);

if(
!el)
return;

el.innerHTML=

`

<div
class="row">

<div
class="col">

Sections

<br>

<b>

${x.sections}

</b>

</div>

<div
class="col">

Blocks

<br>

<b>

${x.blocks}

</b>

</div>

<div
class="col">

Branches

<br>

<b>

${x.branches}

</b>

</div>

<div
class="col">

Deploy

<br>

<b>

${x.deployments}

</b>

</div>

</div>

<hr>

<div
class="alert alert-dark">

Health

<b>

${x.health}%

</b>

</div>

`;

}

);

}

loadMission();

studioSetInterval('mission', loadMission, 30000);

</script>

<script>

function loadHealth(){

fetch(

'/easychair/admin/conference-home/health'

)

.then(
r=>r.json()
)

.then(

x=>{

const el=

document
.getElementById(
'studioHealth'
);

if(
!el)
return;

el.innerHTML=

`

<div>

Sections:
<b>

${x.sections}

</b>

</div>

<div>

Blocks:
<b>

${x.blocks}

</b>

</div>

<div>

Jobs:
<b>

${x.jobs}

</b>

</div>

<div
class="mt-2">

<span
class="badge bg-${
x.status==='healthy'
?

'success'

:

'warning'

}">

${x.status}

</span>

</div>

`;

}

);

}

document
.getElementById(
'recoverBtn'
)

?.addEventListener(

'click',

()=>{

fetch(

'/easychair/admin/conference-home/health?recover=1'

)

.then(
loadHealth
);

}

);

loadHealth();

studioSetInterval('health', loadHealth, 30000);

</script>

<script>

function loadTower(){

fetch(

'/easychair/admin/conference-home/control-tower'

)

.then(
r=>r.json()
)

.then(

x=>{

const el=

document
.getElementById(
'studioControl'
);

if(
!el)
return;

el.innerHTML=

`

<div>

Incidents:
<b>

${x.incidents}

</b>

</div>

<div>

Maintenance:
<b>

${x.maintenance}

</b>

</div>

<div>

Deployments:
<b>

${x.deployments}

</b>

</div>

<div
class="mt-2">

<span
class="badge bg-${
x.status==='normal'

?

'success'

:

'danger'

}">

${x.status}

</span>

</div>

`;

}

);

}

document
.getElementById(
'maintenanceBtn'
)

?.addEventListener(

'click',

()=>{

fetch(

'/easychair/admin/conference-home/control-tower?maintain=1'

)

.then(
loadTower
);

}

);

loadTower();

studioSetInterval('tower', loadTower, 30000);

</script>


<script>

function loadReliability(){

fetch(

'/easychair/admin/conference-home/reliability'

)

.then(
r=>r.json()
)

.then(

x=>{

const el=

document
.getElementById(
'studioReliability'
);

if(
!el)
return;

el.innerHTML=

`

<div>

Availability

<b>

${x.availability}%

</b>

</div>

<div>

Deployments

<b>

${x.deployments}

</b>

</div>

<div>

Incidents

<b>

${x.incidents}

</b>

</div>

<div>

<span
class="badge bg-${
x.sla==='healthy'

?

'success'

:

'danger'

}">

${x.sla}

</span>

</div>

`;

}

);

}

document
.getElementById(
'healBtn'
)

?.addEventListener(

'click',

()=>{

fetch(

'/easychair/admin/conference-home/reliability?heal=1'

)

.then(
loadReliability
);

}

);

loadReliability();

studioSetInterval('reliability', loadReliability, 30000);

</script>

<script>

function loadGovernance(){

fetch(

'/easychair/admin/conference-home/governance'

)

.then(
r=>r.json()
)

.then(

x=>{

const el=

document
.getElementById(
'studioGovernance'
);

if(
!el)
return;

el.innerHTML=

`

<div>

Policies

<b>

${x.policies}

</b>

</div>

<div>

Compliance

<b>

${x.compliance}%

</b>

</div>

<div>

<span
class="badge bg-${
x.state==='compliant'

?

'success'

:

'warning'

}">

${x.state}

</span>

</div>

`;

}

);

}

loadGovernance();

studioSetInterval('governance', loadGovernance, 30000);

</script>

<script>

function loadPortfolio(){

fetch(

'/easychair/admin/conference-home/portfolio'

)

.then(
r=>r.json()
)

.then(

x=>{

const el=

document
.getElementById(
'studioPortfolio'
);

if(
!el)
return;

if(
!x.rows.length){

el.innerHTML=
'No Conferences';

return;

}

el.innerHTML=

x.rows
.slice(
0,
8
)

.map(

r=>

`

<div
class="border rounded p-2 mb-2">

<b>

${r.title}

</b>

<br>

Blocks:
${r.blocks}

•

Deploy:
${r.deployments}

•

Health:
${r.health}%

</div>

`

)

.join('');

}

);

}

loadPortfolio();

studioSetInterval('portfolio', loadPortfolio, 60000);

</script>

<script>

function loadMarketplace(){

fetch(

'/easychair/admin/conference-home/marketplace'

)

.then(
r=>r.json()
)

.then(

rows=>{

const el=

document
.getElementById(
'studioMarketplace'
);

if(
!el)
return;

if(
!rows.length){

el.innerHTML=
'No Assets';

return;

}

el.innerHTML=

rows.map(

r=>

`

<div
class="border rounded p-2 mb-2">

<b>

${r.title_en}

</b>

<br>

${r.asset_type}

•

v${r.version_no}

•

${r.downloads}

</div>

`

).join('');

}

);

}

document
.getElementById(
'publishAsset'
)

?.addEventListener(

'click',

()=>{

fetch(

'/easychair/admin/conference-home/marketplace?publish=1'

)

.then(
loadMarketplace
);

}

);

loadMarketplace();

studioSetInterval('marketplace', loadMarketplace, 60000);

</script>

<script>

function loadKnowledge(){

fetch(

'/easychair/admin/conference-home/knowledge'

)

.then(
r=>r.json()
)

.then(

x=>{

const el=

document
.getElementById(
'studioKnowledge'
);

if(
!el)
return;

el.innerHTML=

`

<div>

Score

<b>

${x.score}%

</b>

</div>

<hr>

${

x.recommendations

.map(

r=>

`
<div>

• ${r}

</div>

`

)

.join('')

}

`;

}

);

}

loadKnowledge();

studioSetInterval('knowledge', loadKnowledge, 60000);

</script>

<script>

function loadTwin(){

fetch(

'/easychair/admin/conference-home/digital-twin'

)

.then(
r=>r.json()
)

.then(

x=>{

const el=

document
.getElementById(
'studioTwin'
);

if(
!el)
return;

el.innerHTML=

`

<div>

Predicted Health

<b>

${x.predicted_score}%

</b>

</div>

<hr>

${

x.scenarios

.map(

s=>

`
<div>

→ ${s}

</div>

`

)

.join('')

}

`;

}

);

}

loadTwin();

studioSetInterval('twin', loadTwin, 60000);

</script>

<script>

function loadGraph(){

fetch(

'/easychair/admin/conference-home/graph'

)

.then(
r=>r.json()
)

.then(

x=>{

const el=

document
.getElementById(
'studioGraph'
);

if(
!el)
return;

el.innerHTML=

`

<div>

Nodes

<b>

${x.nodes}

</b>

</div>

<div>

Edges

<b>

${x.edges}

</b>

</div>

<div>

Density

<b>

${x.density}%

</b>

</div>

<div>

<span
class="badge bg-${
x.state==='connected'

?

'success'

:

'primary'

}">

${x.state}

</span>

</div>

`;

}

);

}

loadGraph();

studioSetInterval('graph', loadGraph, 60000);

</script>

<script>

function loadStrategy(){

fetch(

'/easychair/admin/conference-home/strategy'

)

.then(
r=>r.json()
)

.then(

x=>{

const el=

document
.getElementById(
'studioStrategy'
);

if(
!el)
return;

el.innerHTML=

`

<div>

Objectives

<b>

${x.objectives}

</b>

</div>

<div>

Completed

<b>

${x.completed}

</b>

</div>

<div>

Execution

<b>

${x.execution}%

</b>

</div>

<div>

<span
class="badge bg-${
x.state==='on_track'

?

'success'

:

'warning'

}">

${x.state}

</span>

</div>

`;

}

);

}

loadStrategy();

studioSetInterval('strategy', loadStrategy, 60000);

</script>

<script>

function loadPrograms(){

fetch(

'/easychair/admin/conference-home/program-office'

)

.then(
r=>r.json()
)

.then(

x=>{

const el=

document
.getElementById(
'studioPrograms'
);

if(
!el)
return;

el.innerHTML=

`

<div>

Programs

<b>

${x.programs}

</b>

</div>

<div>

Initiatives

<b>

${x.initiatives}

</b>

</div>

<div>

Delivery

<b>

${x.delivery}%

</b>

</div>

<div>

<span
class="badge bg-${
x.state==='on_schedule'

?

'success'

:

'warning'

}">

${x.state}

</span>

</div>

`;

}

);

}

loadPrograms();

studioSetInterval('programs', loadPrograms, 60000);

</script>

<script>

function loadScorecard(){

fetch(

'/easychair/admin/conference-home/scorecard'

)

.then(
r=>r.json()
)

.then(

x=>{

const el=

document
.getElementById(
'studioScorecard'
);

if(
!el)
return;

el.innerHTML=

`

<div>

Streams

<b>

${x.streams}

</b>

</div>

<div>

Outcomes

<b>

${x.outcomes}

</b>

</div>

<div>

Value

<b>

${x.value}%

</b>

</div>

<div>

<span
class="badge bg-dark">

Grade ${x.grade}

</span>

</div>

`;

}

);

}

loadScorecard();

studioSetInterval('scorecard', loadScorecard, 60000);

</script>

<script>

function loadBrain(){

fetch(

'/easychair/admin/conference-home/enterprise-brain'

)

.then(
r=>r.json()
)

.then(

x=>{

const el=

document
.getElementById(
'studioBrain'
);

if(
!el)
return;

el.innerHTML=

`

<div>

Brain Score

<b>

${x.brain_score}%

</b>

</div>

<hr>

${

x.recommendations

.map(

r=>

`
<div>

→ ${r}

</div>

`

)

.join('')

}

<div
class="mt-2">

<span
class="badge bg-${
x.state==='optimized'

?

'success'

:

'warning'

}">

${x.state}

</span>

</div>

`;

}

);

}

loadBrain();

studioSetInterval('brain', loadBrain, 60000);

</script>

<script>

function loadShell(){

fetch(

'/easychair/admin/conference-home/shell'

)

.then(
r=>r.json()
)

.then(

rows=>{

const el=

document
.getElementById(
'studioShell'
);

if(
!el)
return;

el.innerHTML=

rows.map(

x=>

`

<a

class="shell-link"

href="${x.module_url}">

<i
class="fa ${x.module_icon}">
</i>

${x.module_title}

</a>

`

).join('');

}

);

}

loadShell();

</script>

<script>

function loadActions(){

fetch(

'/easychair/admin/conference-home/command-center'

)

.then(
r=>r.json()
)

.then(

rows=>{

const el=

document
.getElementById(
'studioActions'
);

if(
!el)
return;

el.innerHTML=

`

<div
class="action-grid">

${
rows.map(

a=>

`

<div

class="action-btn"

onclick="location.href='${a.action_endpoint}'">

<div>

<i
class="fa ${a.action_icon}">
</i>

</div>

<div>

${a.action_title}

</div>

</div>

`

).join('')

}

</div>

`;

}

);

}

loadActions();

</script>

<script>

function loadOS(){

fetch(

'/easychair/admin/conference-home/os'

)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document
.getElementById(
'studioOS'
);

if(
!el
)
return;

el.innerHTML=

`

<div
class="os-grid">

<div
class="os-cell">

Events

<br>

<b>

${x.events}

</b>

</div>

<div
class="os-cell">

Notifications

<br>

<b>

${x.notifications}

</b>

</div>

<div
class="os-cell">

Deployments

<br>

<b>

${x.deployments}

</b>

</div>

<div
class="os-cell">

Incidents

<br>

<b>

${x.incidents}

</b>

</div>

</div>

<hr>

<span
class="badge bg-${
x.status==='stable'
?

'success'

:

'danger'

}">

${x.status}

</span>

`;

}

);

}

loadOS();

studioSetInterval('oS', loadOS, 60000);

</script>

<script>

function loadKernel(){

fetch(

'/easychair/admin/conference-home/kernel'

)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document
.getElementById(
'studioKernel'
);

if(
!el
)
return;

el.innerHTML=

`

<div
class="kernel-grid">

<div
class="kernel-box">

Runtime

<br>

<b>

${x.runtime}

</b>

</div>

<div
class="kernel-box">

Snapshots

<br>

<b>

${x.snapshots}

</b>

</div>

<div
class="kernel-box">

Events

<br>

<b>

${x.events}

</b>

</div>

<div
class="kernel-box">

Commands

<br>

<b>

${x.commands}

</b>

</div>

</div>

<hr>

<span
class="badge bg-${
x.runtime_state==='stable'
?

'success'

:

'warning'

}">

${x.runtime_state}

</span>

`;

}

);

}

document
.getElementById(
'snapshotBtn'
)

?.addEventListener(

'click',

()=>{

fetch(

'/easychair/admin/conference-home/kernel?snapshot=1'

)

.then(
loadKernel
);

}

);

loadKernel();

studioSetInterval('kernel', loadKernel, 60000);

</script>

<script>

function loadHypervisor(){

fetch(

'/easychair/admin/conference-home/hypervisor'

)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document
.getElementById(
'studioHypervisor'
);

if(
!el
)
return;

el.innerHTML=

`

<div
class="hypervisor-grid">

<div
class="hypervisor-box">

Tenants

<br>

<b>

${x.tenants}

</b>

</div>

<div
class="hypervisor-box">

Usage

<br>

<b>

${x.usage}

</b>

</div>

<div
class="hypervisor-box">

Runtime

<br>

<b>

${x.runtime}

</b>

</div>

<div
class="hypervisor-box">

Capacity

<br>

<b>

${x.capacity}%

</b>

</div>

</div>

<hr>

<span
class="badge bg-${
x.state==='balanced'

?

'success'

:

'warning'

}">

${x.state}

</span>

`;

}

);

}

loadHypervisor();

studioSetInterval('hypervisor', loadHypervisor, 60000);

</script>

<script>

document
.getElementById(
'runCopilot'
)

?.addEventListener(

'click',

()=>{

fetch(

'/easychair/admin/conference-home/copilot',

{

method:
'POST',

headers:{
'Content-Type':
'application/json'
},

body:

JSON.stringify({

prompt:

document
.getElementById(
'copilotPrompt'
)
.value

})

}

)

.then(
r=>r.json()
)

.then(

x=>{

document
.getElementById(
'copilotResult'
)

.innerHTML=

`

<div
class="copilot-card">

<div>

Action:

<b>

${

x.action
??

'None'

}

</b>

</div>

<div>

${x.explanation}

</div>

${
x.endpoint

?

`

<a
class="btn btn-primary mt-2"

href="${x.endpoint}">

Open

</a>

`

:

''

}

</div>

`;

}

);

}

);

</script>


<script>

document
.getElementById(
'runAgents'
)

?.addEventListener(

'click',

()=>{

fetch(

'/easychair/admin/conference-home/agents',

{

method:
'POST',

headers:{
'Content-Type':
'application/json'
},

body:

JSON.stringify({

goal:

document
.getElementById(
'agentGoal'
)
.value

})

}

)

.then(
r=>r.json()
)

.then(

x=>{

document
.getElementById(
'agentResult'
)

.innerHTML=

`

<div
class="agent-plan">

<b>

Goal

</b>

<br>

${x.goal}

<hr>

${

x.steps

.map(

s=>

`
<div>

✓ ${s}

</div>

`

)

.join('')

}

</div>

`;

}

);

}

);

</script>

<script>

function loadMemory(){

fetch(

'/easychair/admin/conference-home/memory'

)

.then(
r=>r.json()
)

.then(

x=>{

const el=

document
.getElementById(
'studioMemory'
);

if(
!el
)
return;

el.innerHTML=

`

<div
class="memory-grid">

<div
class="memory-box">

Memory

<br>

<b>

${x.memory}

</b>

</div>

<div
class="memory-box">

Learning

<br>

<b>

${x.learning}

</b>

</div>

<div
class="memory-box">

Plans

<br>

<b>

${x.plans}

</b>

</div>

<div
class="memory-box">

Copilot

<br>

<b>

${x.copilot}

</b>

</div>

</div>

<hr>

<span
class="badge bg-${
x.state==='adaptive'

?

'success'

:

'primary'

}">

${x.state}

</span>

`;

}

);

}

document
.getElementById(
'rememberBtn'
)

?.addEventListener(

'click',

()=>{

fetch(

'/easychair/admin/conference-home/memory?remember=1'

)

.then(
loadMemory
);

}

);

loadMemory();

studioSetInterval('memory', loadMemory, 60000);

</script>

<script>

function loadCognition(){

fetch(

'/easychair/admin/conference-home/cognition'

)

.then(
r=>r.json()
)

.then(

x=>{

const el=

document
.getElementById(
'studioCognition'
);

if(
!el
)
return;

el.innerHTML=

`

<div
class="cognitive-box">

Intelligence

<b>

${x.intelligence}%

</b>

</div>

${
x.insights

.map(

i=>

`
<div>

→ ${i}

</div>

`

)

.join('')

}

<hr>

<span
class="badge bg-${
x.state==='cognitive'

?

'success'

:

'primary'

}">

${x.state}

</span>

`;

}

);

}

loadCognition();

studioSetInterval('cognition', loadCognition, 60000);

</script>

<script>

function loadMesh(){

fetch(

'/easychair/admin/conference-home/neural-mesh'

)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document
.getElementById(
'studioMesh'
);

if(
!el
)
return;

el.innerHTML=

`

<div
class="mesh-grid">

<div
class="mesh-box">

Mesh

<br>

<b>

${x.mesh}

</b>

</div>

<div
class="mesh-box">

Agents

<br>

<b>

${x.agents}

</b>

</div>

<div
class="mesh-box">

Coordination

<br>

<b>

${x.coordination}

</b>

</div>

<div
class="mesh-box">

Score

<br>

<b>

${x.mesh_score}%

</b>

</div>

</div>

<hr>

<span
class="badge bg-${
x.state==='synchronized'

?

'success'

:

'primary'

}">

${x.state}

</span>

`;

}

);

}

loadMesh();

studioSetInterval('mesh', loadMesh, 60000);

</script>


<script>

function loadConscious(){

fetch(

'/easychair/admin/conference-home/conscious'

)

.then(
r=>r.json()
)

.then(

x=>{

const el=

document
.getElementById(
'studioConscious'
);

if(
!el
)
return;

el.innerHTML=

`

<div
class="conscious-card">

Awareness

<b>

${x.awareness}%

</b>

</div>

${

x.advice

.map(

a=>

`
<div>

→ ${a}

</div>

`

)

.join('')

}

<hr>

<span
class="badge bg-${
x.state==='aware'

?

'success'

:

'primary'

}">

${x.state}

</span>

`;

}

);

}

loadConscious();

studioSetInterval('conscious', loadConscious, 60000);

</script>

<script>

function loadMeta(){

fetch(

'/easychair/admin/conference-home/meta'

)

.then(
r=>r.json()
)

.then(

x=>{

const el=

document
.getElementById(
'studioMeta'
);

if(
!el
)
return;

el.innerHTML=

`

<div
class="meta-card">

Maturity

<b>

${x.maturity}%

</b>

</div>

${

x.signals

.map(

s=>

`
<div>

→ ${s}

</div>

`

)

.join('')

}

<hr>

<span
class="badge bg-${
x.state==='evolving'

?

'success'

:

'secondary'

}">

${x.state}

</span>

`;

}

);

}

loadMeta();

studioSetInterval('meta', loadMeta, 60000);

</script>


<script>

function loadUniverse(){

fetch(

'/easychair/admin/conference-home/universe'

)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document
.getElementById(
'studioUniverse'
);

if(
!el
)
return;

el.innerHTML=

`

<div
class="universe-grid">

<div
class="universe-box">

Systems

<br>

<b>

${x.systems}

</b>

</div>

<div
class="universe-box">

Sessions

<br>

<b>

${x.sessions}

</b>

</div>

<div
class="universe-box">

Events

<br>

<b>

${x.events}

</b>

</div>

<div
class="universe-box">

Federation

<br>

<b>

${x.federation}%

</b>

</div>

</div>

<hr>

<span
class="badge bg-${
x.state==='federated'

?

'success'

:

'secondary'

}">

${x.state}

</span>

`;

}

);

}

loadUniverse();

studioSetInterval('universe', loadUniverse, 60000);

</script>

<script>

function loadNexus(){

fetch(

'/easychair/admin/conference-home/nexus'

)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document
.getElementById(
'studioNexus'
);

if(
!el
)
return;

el.innerHTML=

`

<div
class="nexus-grid">

<div
class="nexus-box">

Domains

<br>

<b>

${x.domains}

</b>

</div>

<div
class="nexus-box">

Links

<br>

<b>

${x.links}

</b>

</div>

<div
class="nexus-box">

Systems

<br>

<b>

${x.systems}

</b>

</div>

<div
class="nexus-box">

Mesh

<br>

<b>

${x.mesh}%

</b>

</div>

</div>

<hr>

<span
class="badge bg-${
x.state==='unified'
?

'success'

:

'primary'

}">

${x.state}

</span>

`;

}

);

}

loadNexus();

studioSetInterval('nexus', loadNexus, 60000);

</script>

<script>

function loadCNS(){

fetch(

'/easychair/admin/conference-home/central-nervous'

)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document
.getElementById(
'studioCNS'
);

if(
!el
)
return;

el.innerHTML=

`

<div
class="cns-grid">

<div
class="cns-box">

Signals

<br>

<b>

${x.signals}

</b>

</div>

<div
class="cns-box">

Bus

<br>

<b>

${x.bus}

</b>

</div>

<div
class="cns-box">

Events

<br>

<b>

${x.events}

</b>

</div>

<div
class="cns-box">

Awareness

<br>

<b>

${x.awareness}%

</b>

</div>

</div>

<hr>

<span
class="badge bg-${
x.state==='observing'

?

'success'

:

'primary'

}">

${x.state}

</span>

`;

}

);

}

loadCNS();

studioSetInterval('cNS', loadCNS, 60000);

</script>

<script>

function loadExecutive(){

fetch(

'/easychair/admin/conference-home/executive'

)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document
.getElementById(
'studioExecutive'
);

if(
!el
)
return;

el.innerHTML=

`

<div
class="exec-grid">

<div
class="exec-box">

Domains

<br>

<b>

${x.domains}

</b>

</div>

<div
class="exec-box">

Systems

<br>

<b>

${x.systems}

</b>

</div>

<div
class="exec-box">

KPIs

<br>

<b>

${x.kpis}

</b>

</div>

<div
class="exec-box">

Mission

<br>

<b>

${x.mission}%

</b>

</div>

</div>

<hr>

<span
class="badge bg-${
x.state==='mission_ready'

?

'success'

:

'primary'

}">

${x.state}

</span>

`;

}

);

}

loadExecutive();

studioSetInterval('executive', loadExecutive, 60000);

</script>

<script>

function loadStrategic(){

fetch(

'/easychair/admin/conference-home/strategic'

)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document
.getElementById(
'studioStrategic'
);

if(
!el
)
return;

el.innerHTML=

`

<div
class="strategy-grid">

<div
class="strategy-box">

Objectives

<br>

<b>

${x.objectives}

</b>

</div>

<div
class="strategy-box">

Completed

<br>

<b>

${x.completed}

</b>

</div>

<div
class="strategy-box">

Twins

<br>

<b>

${x.twins}

</b>

</div>

<div
class="strategy-box">

Strategy

<br>

<b>

${x.strategy}%

</b>

</div>

</div>

<hr>

<span
class="badge bg-${
x.state==='command_ready'

?

'success'

:

'primary'

}">

${x.state}

</span>

`;

}

);

}

loadStrategic();

studioSetInterval('strategic', loadStrategic, 60000);

</script>

<script>

function loadConstitution(){

fetch(

'/easychair/admin/conference-home/constitution'

)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document
.getElementById(
'studioConstitution'
);

if(
!el
)
return;

el.innerHTML=

`

<div
class="const-grid">

<div
class="const-box">

Articles

<br>

<b>

${x.articles}

</b>

</div>

<div
class="const-box">

Evaluations

<br>

<b>

${x.evaluations}

</b>

</div>

<div
class="const-box">

Strategy

<br>

<b>

${x.strategy}

</b>

</div>

<div
class="const-box">

Governance

<br>

<b>

${x.governance}%

</b>

</div>

</div>

<hr>

<span
class="badge bg-${
x.state==='constitutional'

?

'success'

:

'primary'

}">

${x.state}

</span>

`;

}

);

}

loadConstitution();

studioSetInterval('constitution', loadConstitution, 60000);

</script>

<script>

function loadCabinet(){

fetch(

'/easychair/admin/conference-home/cabinet'

)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document
.getElementById(
'studioCabinet'
);

if(
!el
)
return;

el.innerHTML=

`

<div
class="cabinet-grid">

<div
class="cabinet-box">

Sessions

<br>

<b>

${x.sessions}

</b>

</div>

<div
class="cabinet-box">

Decisions

<br>

<b>

${x.decisions}

</b>

</div>

<div
class="cabinet-box">

Approved

<br>

<b>

${x.approved}

</b>

</div>

<div
class="cabinet-box">

Execution

<br>

<b>

${x.execution}%

</b>

</div>

</div>

<hr>

<span
class="badge bg-${
x.state==='governing'

?

'success'

:

'primary'

}">

${x.state}

</span>

`;

}

);

}

loadCabinet();

studioSetInterval('cabinet', loadCabinet, 60000);

</script>

<script>

function loadSenate(){

fetch(

'/easychair/admin/conference-home/senate'

)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document
.getElementById(
'studioSenate'
);

if(
!el
)
return;

el.innerHTML=

`

<div
class="senate-grid">

<div
class="senate-box">

Committees

<br>

<b>

${x.committees}

</b>

</div>

<div
class="senate-box">

Resolutions

<br>

<b>

${x.resolutions}

</b>

</div>

<div
class="senate-box">

Approved

<br>

<b>

${x.approved}

</b>

</div>

<div
class="senate-box">

Alignment

<br>

<b>

${x.alignment}%

</b>

</div>

</div>

<hr>

<span
class="badge bg-${
x.state==='aligned'

?

'success'

:

'primary'

}">

${x.state}

</span>

`;

}

);

}

loadSenate();

studioSetInterval('senate', loadSenate, 60000);

</script>

<script>

function loadChancellor(){

fetch(

'/easychair/admin/conference-home/chancellor'

)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document
.getElementById(
'studioChancellor'
);

if(
!el
)
return;

el.innerHTML=

`

<div
class="chancellor-grid">

<div
class="chancellor-box">

Contracts

<br>

<b>

${x.contracts}

</b>

</div>

<div
class="chancellor-box">

Completed

<br>

<b>

${x.completed}

</b>

</div>

<div
class="chancellor-box">

Cycles

<br>

<b>

${x.cycles}

</b>

</div>

<div
class="chancellor-box">

Execution

<br>

<b>

${x.execution}%

</b>

</div>

</div>

<hr>

<span
class="badge bg-${
x.state==='executing'

?

'success'

:

'primary'

}">

${x.state}

</span>

`;

}

);

}

loadChancellor();

studioSetInterval('chancellor', loadChancellor, 60000);

</script>

<script>

function loadObservatory(){

fetch(

'/easychair/admin/conference-home/observatory'

)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document
.getElementById(
'studioObservatory'
);

if(
!el
)
return;

el.innerHTML=

`

<div
class="obs-grid">

<div
class="obs-box">

Frameworks

<br>

<b>

${x.accreditation}

</b>

</div>

<div
class="obs-box">

Compliant

<br>

<b>

${x.compliant}

</b>

</div>

<div
class="obs-box">

Metrics

<br>

<b>

${x.metrics}

</b>

</div>

<div
class="obs-box">

Readiness

<br>

<b>

${x.readiness}%

</b>

</div>

</div>

<hr>

<span
class="badge bg-${
x.state==='accredited'

?

'success'

:

'primary'

}">

${x.state}

</span>

`;

}

);

}

loadObservatory();

studioSetInterval('observatory', loadObservatory, 60000);

</script>

<script>

function loadMinistry(){

fetch(

'/easychair/admin/conference-home/ministry'

)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document
.getElementById(
'studioMinistry'
);

if(
!el
)
return;

el.innerHTML=

`

<div
class="ministry-grid">

<div
class="ministry-box">

Frameworks

<br>

<b>

${x.frameworks}

</b>

</div>

<div
class="ministry-box">

Compliant

<br>

<b>

${x.compliant}

</b>

</div>

<div
class="ministry-box">

KPIs

<br>

<b>

${x.kpis}

</b>

</div>

<div
class="ministry-box">

Alignment

<br>

<b>

${x.alignment}%

</b>

</div>

</div>

<hr>

<span
class="badge bg-${
x.state==='aligned'

?

'success'

:

'primary'

}">

${x.state}

</span>

`;

}

);

}

loadMinistry();

studioSetInterval('ministry', loadMinistry, 60000);

</script>

<script>

function loadSovereign(){

fetch(

'/easychair/admin/conference-home/sovereign'

)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document
.getElementById(
'studioSovereign'
);

if(
!el
)
return;

el.innerHTML=

`

<div
class="sovereign-grid">

<div
class="sovereign-box">

Entities

<br>

<b>

${x.entities}

</b>

</div>

<div
class="sovereign-box">

Mesh

<br>

<b>

${x.mesh}

</b>

</div>

<div
class="sovereign-box">

Frameworks

<br>

<b>

${x.frameworks}

</b>

</div>

<div
class="sovereign-box">

Sovereignty

<br>

<b>

${x.sovereignty}%

</b>

</div>

</div>

<hr>

<span
class="badge bg-${
x.state==='federated'

?

'success'

:

'primary'

}">

${x.state}

</span>

`;

}

);

}

loadSovereign();

studioSetInterval('sovereign', loadSovereign, 60000);

</script>

<script>

function loadCivilization(){

fetch(

'/easychair/admin/conference-home/civilization'

)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document
.getElementById(
'studioCivilization'
);

if(
!el
)
return;

el.innerHTML=

`

<div
class="civil-grid">

<div
class="civil-box">

Knowledge

<br>

<b>

${x.nodes}

</b>

</div>

<div
class="civil-box">

Relations

<br>

<b>

${x.edges}

</b>

</div>

<div
class="civil-box">

Entities

<br>

<b>

${x.entities}

</b>

</div>

<div
class="civil-box">

Civilization

<br>

<b>

${x.civilization}%

</b>

</div>

</div>

<hr>

<span
class="badge bg-${
x.state==='connected'

?

'success'

:

'primary'

}">

${x.state}

</span>

`;

}

);

}

loadCivilization();

studioSetInterval('civilization', loadCivilization, 60000);

</script>

<script>

function loadSingularity(){

fetch(
'/easychair/admin/conference-home/singularity'
)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document
.getElementById(
'studioSingularity'
);

if(!el)return;

el.innerHTML=

`

<div class="singularity-grid">

<div class="singularity-box">

Knowledge

<br>

<b>${x.knowledge}</b>

</div>

<div class="singularity-box">

Planes

<br>

<b>${x.planes}</b>

</div>

<div class="singularity-box">

Signals

<br>

<b>${x.signals}</b>

</div>

<div class="singularity-box">

Coherence

<br>

<b>${x.coherence}%</b>

</div>

</div>

<hr>

<span class="badge bg-${
x.state==='coherent'

?

'success'

:

'primary'

}">

${x.state}

</span>

`;

}

);

}

loadSingularity();

studioSetInterval('singularity', loadSingularity, 60000);

</script>

<script>

function loadGenesis(){

fetch(
'/easychair/admin/conference-home/genesis'
)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document
.getElementById(
'studioGenesis'
);

if(!el)return;

el.innerHTML=

`

<div class="genesis-grid">

<div class="genesis-box">

Modules

<br>

<b>${x.modules}</b>

</div>

<div class="genesis-box">

Runs

<br>

<b>${x.runs}</b>

</div>

<div class="genesis-box">

Domains

<br>

<b>${x.domains}</b>

</div>

<div class="genesis-box">

Activation

<br>

<b>${x.activation}%</b>

</div>

</div>

<hr>

<span class="badge bg-${
x.state==='assembled'

?

'success'

:

'primary'

}">

${x.state}

</span>

`;

}

);

}

StudioWidgets.register(
'studioGenesis',
function(){
loadGenesis();
}
);

studioSetInterval('genesis', loadGenesis, 60000);

</script>

<script>

function loadHorizon(){

fetch(
'/easychair/admin/conference-home/horizon'
)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document
.getElementById(
'studioHorizon'
);

if(!el)return;

el.innerHTML=

`

<div class="horizon-grid">

<div class="horizon-box">

Roadmaps

<br>

<b>${x.roadmaps}</b>

</div>

<div class="horizon-box">

Active

<br>

<b>${x.active}</b>

</div>

<div class="horizon-box">

Milestones

<br>

<b>${x.milestones}</b>

</div>

<div class="horizon-box">

Trajectory

<br>

<b>${x.trajectory}%</b>

</div>

</div>

<hr>

<span class="badge bg-${
x.state==='on_track'

?

'success'

:

'primary'

}">

${x.state}

</span>

`;

}

);

}

loadHorizon();

studioSetInterval('horizon', loadHorizon, 60000);

</script>

<script>
function loadLegacy(){
fetch('/easychair/admin/conference-home/legacy')
.then(r=>r.json())
.then(x=>{
const el=document.getElementById('studioLegacy');
if(!el)return;
el.innerHTML=`
<div class="legacy-grid">
<div class="legacy-box">Legacy<br><b>${x.legacy}</b></div>
<div class="legacy-box">Continuity<br><b>${x.continuity}</b></div>
<div class="legacy-box">Memory<br><b>${x.memory}</b></div>
<div class="legacy-box">Score<br><b>${x.score}%</b></div>
</div>
<hr>
<span class="badge bg-${x.state==='continuous'?'success':'primary'}">${x.state}</span>
`;
});
}
StudioWidgets.register(
'studioLegacy',
function(){
loadLegacy();
}
);
studioSetInterval('legacy', loadLegacy, 60000);
</script>

<script>

function loadContinuity(){

fetch(
'/easychair/admin/conference-home/continuity-board'
)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document.getElementById(
'studioContinuity'
);

if(!el)
return;

el.innerHTML=

`

<div class="legacy-grid">

<div class="legacy-box">

Boards

<br>

<b>${x.boards}</b>

</div>

<div class="legacy-box">

Plans

<br>

<b>${x.plans}</b>

</div>

<div class="legacy-box">

Transfer

<br>

<b>${x.transfer}</b>

</div>

<div class="legacy-box">

Continuity

<br>

<b>${x.continuity}%</b>

</div>

</div>

<hr>

<span class="badge bg-${
x.state==='resilient'
?
'success'
:
'primary'
}">

${x.state}

</span>

`;

}

);

}

loadContinuity();

studioSetInterval('continuity', loadContinuity, 60000);

</script>

<script>

function loadStewardship(){

fetch(
'/easychair/admin/conference-home/stewardship'
)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document.getElementById(
'studioStewardship'
);

if(!el)
return;

el.innerHTML=

`

<div class="legacy-grid">

<div class="legacy-box">

Pillars

<br>

<b>${x.pillars}</b>

</div>

<div class="legacy-box">

Healthy

<br>

<b>${x.healthy}</b>

</div>

<div class="legacy-box">

Cycles

<br>

<b>${x.cycles}</b>

</div>

<div class="legacy-box">

Health

<br>

<b>${x.health}%</b>

</div>

</div>

<hr>

<span class="badge bg-${
x.state==='sustainable'
?
'success'
:
'primary'
}">

${x.state}

</span>

`;

}

);

}

loadStewardship();

studioSetInterval('stewardship', loadStewardship, 60000);

</script>

<script>

function loadHeritage(){

fetch('/easychair/admin/conference-home/heritage')
.then(r=>r.json())
.then(x=>{

const el=document.getElementById('studioHeritage');

if(!el)return;

el.innerHTML=`

<div class="legacy-grid">

<div class="legacy-box">
Heritage
<br>
<b>${x.heritage}</b>
</div>

<div class="legacy-box">
DNA
<br>
<b>${x.dna}</b>
</div>

<div class="legacy-box">
Legacy
<br>
<b>${x.legacy}</b>
</div>

<div class="legacy-box">
Preservation
<br>
<b>${x.preservation}%</b>
</div>

</div>

<hr>

<span class="badge bg-${x.state==='preserved'?'success':'primary'}">

${x.state}

</span>

`;

});

}

loadHeritage();

studioSetInterval('heritage', loadHeritage, 60000);

</script>

<script>

function loadArchiveVault(){

fetch(
'/easychair/admin/conference-home/archive-vault'
)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document.getElementById(
'studioArchiveVault'
);

if(!el)
return;

el.innerHTML=

`

<div class="legacy-grid">

<div class="legacy-box">

Archives

<br>

<b>

${x.archives}

</b>

</div>

<div class="legacy-box">

Evidence

<br>

<b>

${x.evidence}

</b>

</div>

<div class="legacy-box">

Retained

<br>

<b>

${x.retained}

</b>

</div>

<div class="legacy-box">

Preservation

<br>

<b>

${x.preservation}%

</b>

</div>

</div>

<hr>

<span class="badge bg-${
x.state==='preserved'
?
'success'
:
'primary'
}">

${x.state}

</span>

`;

}

);

}

loadArchiveVault();

studioSetInterval('archiveVault', loadArchiveVault, 60000);

</script>

<script>

function loadTrust(){

fetch(
'/easychair/admin/conference-home/trust'
)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document.getElementById(
'studioTrust'
);

if(!el)
return;

el.innerHTML=

`

<div class="legacy-grid">

<div class="legacy-box">

Trust

<br>

<b>

${x.trust}

</b>

</div>

<div class="legacy-box">

Audit

<br>

<b>

${x.audit}

</b>

</div>

<div class="legacy-box">

Verified

<br>

<b>

${x.verified}

</b>

</div>

<div class="legacy-box">

Integrity

<br>

<b>

${x.integrity}%

</b>

</div>

</div>

<hr>

<span class="badge bg-${
x.state==='trusted'
?
'success'
:
'primary'
}">

${x.state}

</span>

`;

}

);

}

loadTrust();

studioSetInterval('trust', loadTrust, 60000);

</script>

<script>

function loadChronicle(){

fetch(
'/easychair/admin/conference-home/chronicle'
)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document.getElementById(
'studioChronicle'
);

if(!el)
return;

el.innerHTML=

`

<div class="legacy-grid">

<div class="legacy-box">

Events

<br>

<b>

${x.events}

</b>

</div>

<div class="legacy-box">

Snapshots

<br>

<b>

${x.snapshots}

</b>

</div>

<div class="legacy-box">

Archive

<br>

<b>

${x.archive}

</b>

</div>

<div class="legacy-box">

Continuity

<br>

<b>

${x.continuity}%

</b>

</div>

</div>

<hr>

<span class="badge bg-${
x.state==='remembered'
?
'success'
:
'primary'
}">

${x.state}

</span>

`;

}

);

}

loadChronicle();

studioSetInterval('chronicle', loadChronicle, 60000);

</script>

<script>

function loadTimeCapsule(){

fetch(
'/easychair/admin/conference-home/time-capsule'
)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document.getElementById(
'studioTimeCapsule'
);

if(!el)
return;

el.innerHTML=

`

<div class="legacy-grid">

<div class="legacy-box">

Capsules

<br>

<b>

${x.capsules}

</b>

</div>

<div class="legacy-box">

Plans

<br>

<b>

${x.plans}

</b>

</div>

<div class="legacy-box">

Ready

<br>

<b>

${x.ready}

</b>

</div>

<div class="legacy-box">

Recovery

<br>

<b>

${x.recovery}%

</b>

</div>

</div>

<hr>

<span class="badge bg-${
x.state==='recoverable'
?
'success'
:
'primary'
}">

${x.state}

</span>

`;

}

);

}

loadTimeCapsule();

studioSetInterval('timeCapsule', loadTimeCapsule, 60000);

</script>

<script>

function loadCompass(){

fetch(
'/easychair/admin/conference-home/compass'
)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document.getElementById(
'studioCompass'
);

if(!el)
return;

el.innerHTML=

`

<div class="legacy-grid">

<div class="legacy-box">

Compass

<br>

<b>

${x.compass}

</b>

</div>

<div class="legacy-box">

Aligned

<br>

<b>

${x.aligned}

</b>

</div>

<div class="legacy-box">

Cycles

<br>

<b>

${x.cycles}

</b>

</div>

<div class="legacy-box">

Direction

<br>

<b>

${x.direction}%

</b>

</div>

</div>

<hr>

<span class="badge bg-${
x.state==='on_course'
?
'success'
:
'primary'
}">

${x.state}

</span>

`;

}

);

}

loadCompass();

studioSetInterval('compass', loadCompass, 60000);

</script>

<script>

function loadBeacon(){

fetch(
'/easychair/admin/conference-home/beacon'
)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document.getElementById(
'studioBeacon'
);

if(!el)
return;

el.innerHTML=

`

<div class="legacy-grid">

<div class="legacy-box">

Opportunities

<br>

<b>

${x.opportunities}

</b>

</div>

<div class="legacy-box">

Qualified

<br>

<b>

${x.qualified}

</b>

</div>

<div class="legacy-box">

Signals

<br>

<b>

${x.signals}

</b>

</div>

<div class="legacy-box">

Readiness

<br>

<b>

${x.readiness}%

</b>

</div>

</div>

<hr>

<span class="badge bg-${
x.state==='opportunity_ready'
?
'success'
:
'primary'
}">

${x.state}

</span>

`;

}

);

}

StudioWidgets.register(
'studioBeacon',
function(){
loadBeacon();
}
);

studioSetInterval('beacon', loadBeacon, 60000);

</script>

<script>

function loadAtlas(){

fetch(
'/easychair/admin/conference-home/atlas'
)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document.getElementById(
'studioAtlas'
);

if(!el)
return;

el.innerHTML=

`

<div class="legacy-grid">

<div class="legacy-box">

Capabilities

<br>

<b>

${x.capabilities}

</b>

</div>

<div class="legacy-box">

Mature

<br>

<b>

${x.mature}

</b>

</div>

<div class="legacy-box">

Topology

<br>

<b>

${x.links}

</b>

</div>

<div class="legacy-box">

Coverage

<br>

<b>

${x.coverage}%

</b>

</div>

</div>

<hr>

<span class="badge bg-${
x.state==='mapped'
?
'success'
:
'primary'
}">

${x.state}

</span>

`;

}

);

}

StudioWidgets.register(
'studioAtlas',
function(){
loadAtlas();
}
);

studioSetInterval('atlas', loadAtlas, 60000);

</script>

<script>

function loadOrbit(){

fetch(
'/easychair/admin/conference-home/orbit'
)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document.getElementById(
'studioOrbit'
);

if(!el)
return;

el.innerHTML=

`

<div class="legacy-grid">

<div class="legacy-box">

Orbits

<br>

<b>

${x.orbits}

</b>

</div>

<div class="legacy-box">

Stable

<br>

<b>

${x.stable}

</b>

</div>

<div class="legacy-box">

Interactions

<br>

<b>

${x.interactions}

</b>

</div>

<div class="legacy-box">

Coordination

<br>

<b>

${x.coordination}%

</b>

</div>

</div>

<hr>

<span class="badge bg-${
x.state==='synchronized'
?
'success'
:
'primary'
}">

${x.state}

</span>

`;

}

);

}

StudioWidgets.register(
'studioOrbit',
function(){
loadOrbit();
}
);

studioSetInterval('orbit', loadOrbit, 60000);

</script>

<script>

function loadPulse(){

fetch(
'/easychair/admin/conference-home/pulse'
)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document.getElementById(
'studioPulse'
);

if(!el)
return;

el.innerHTML=

`

<div class="legacy-grid">

<div class="legacy-box">

Pulses

<br>

<b>

${x.pulses}

</b>

</div>

<div class="legacy-box">

Healthy

<br>

<b>

${x.healthy}

</b>

</div>

<div class="legacy-box">

Signals

<br>

<b>

${x.signals}

</b>

</div>

<div class="legacy-box">

Health

<br>

<b>

${x.health}%

</b>

</div>

</div>

<hr>

<span class="badge bg-${
x.state==='healthy'
?
'success'
:
'primary'
}">

${x.state}

</span>

`;

}

);

}

StudioWidgets.register(
'studioPulse',
function(){
loadPulse();
}
);

studioSetInterval('pulse', loadPulse, 60000);

</script>

<script>

function loadResonance(){

fetch(
'/easychair/admin/conference-home/resonance'
)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document.getElementById(
'studioResonance'
);

if(!el)
return;

el.innerHTML=

`

<div class="legacy-grid">

<div class="legacy-box">

Resonance

<br>

<b>

${x.resonance}

</b>

</div>

<div class="legacy-box">

Active

<br>

<b>

${x.active}

</b>

</div>

<div class="legacy-box">

Loops

<br>

<b>

${x.loops}

</b>

</div>

<div class="legacy-box">

Learning

<br>

<b>

${x.learning}%

</b>

</div>

</div>

<hr>

<span class="badge bg-${
x.state==='learning'
?
'success'
:
'primary'
}">

${x.state}

</span>

`;

}

);

}

loadResonance();

studioSetInterval('resonance', loadResonance, 60000);

</script>

<script>

function loadGravity(){

fetch(
'/easychair/admin/conference-home/gravity'
)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document.getElementById(
'studioGravity'
);

if(!el)
return;

el.innerHTML=

`

<div class="legacy-grid">

<div class="legacy-box">

Gravity

<br>

<b>

${x.gravity}

</b>

</div>

<div class="legacy-box">

Strong

<br>

<b>

${x.strong}

</b>

</div>

<div class="legacy-box">

Fields

<br>

<b>

${x.fields}

</b>

</div>

<div class="legacy-box">

Focus

<br>

<b>

${x.focus}%

</b>

</div>

</div>

<hr>

<span class="badge bg-${
x.state==='focused'
?
'success'
:
'primary'
}">

${x.state}

</span>

`;

}

);

}

loadGravity();

studioSetInterval('gravity', loadGravity, 60000);

</script>

<script>

function loadAurora(){

fetch(
'/easychair/admin/conference-home/aurora'
)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document.getElementById(
'studioAurora'
);

if(!el)
return;

el.innerHTML=

`

<div class="legacy-grid">

<div class="legacy-box">

Aurora

<br>

<b>

${x.aurora}

</b>

</div>

<div class="legacy-box">

Emerging

<br>

<b>

${x.emerging}

</b>

</div>

<div class="legacy-box">

Cycles

<br>

<b>

${x.cycles}

</b>

</div>

<div class="legacy-box">

Transformation

<br>

<b>

${x.transformation}%

</b>

</div>

</div>

<hr>

<span class="badge bg-${
x.state==='emerging'
?
'success'
:
'primary'
}">

${x.state}

</span>

`;

}

);

}

loadAurora();

studioSetInterval('aurora', loadAurora, 60000);

</script>

<script>

function loadZenith(){

fetch(
'/easychair/admin/conference-home/zenith'
)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document.getElementById(
'studioZenith'
);

if(!el)
return;

el.innerHTML=

`

<div class="legacy-grid">

<div class="legacy-box">

Zenith

<br>

<b>

${x.zenith}

</b>

</div>

<div class="legacy-box">

Peak

<br>

<b>

${x.peak}

</b>

</div>

<div class="legacy-box">

Cycles

<br>

<b>

${x.cycles}

</b>

</div>

<div class="legacy-box">

Excellence

<br>

<b>

${x.excellence}%

</b>

</div>

</div>

<hr>

<span class="badge bg-${
x.state==='excellent'
?
'success'
:
'primary'
}">

${x.state}

</span>

`;

}

);

}

loadZenith();

studioSetInterval('zenith', loadZenith, 60000);

</script>

<script>

function loadConstellation(){

fetch(
'/easychair/admin/conference-home/constellation'
)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document.getElementById(
'studioConstellation'
);

if(!el)
return;

el.innerHTML=

`

<div class="legacy-grid">

<div class="legacy-box">

Constellations

<br>

<b>

${x.constellations}

</b>

</div>

<div class="legacy-box">

Cohesive

<br>

<b>

${x.cohesive}

</b>

</div>

<div class="legacy-box">

Links

<br>

<b>

${x.links}

</b>

</div>

<div class="legacy-box">

Coordination

<br>

<b>

${x.coordination}%

</b>

</div>

</div>

<hr>

<span class="badge bg-${
x.state==='orchestrated'
?
'success'
:
'primary'
}">

${x.state}

</span>

`;

}

);

}

loadConstellation();

studioSetInterval('constellation', loadConstellation, 60000);

</script>

<script>

function loadLighthouse(){

fetch(
'/easychair/admin/conference-home/lighthouse'
)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document.getElementById(
'studioLighthouse'
);

if(!el)
return;

el.innerHTML=

`

<div class="legacy-grid">

<div class="legacy-box">

Lighthouses

<br>

<b>

${x.lighthouses}

</b>

</div>

<div class="legacy-box">

Clear

<br>

<b>

${x.clear}

</b>

</div>

<div class="legacy-box">

Signals

<br>

<b>

${x.signals}

</b>

</div>

<div class="legacy-box">

Guidance

<br>

<b>

${x.guidance}%

</b>

</div>

</div>

<hr>

<span class="badge bg-${
x.state==='guided'
?
'success'
:
'primary'
}">

${x.state}

</span>

`;

}

);

}

loadLighthouse();

studioSetInterval('lighthouse', loadLighthouse, 60000);

</script>

<script>

function loadObservatoryPrime(){

fetch(
'/easychair/admin/conference-home/observatory-prime'
)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document.getElementById(
'studioObservatoryPrime'
);

if(!el)
return;

el.innerHTML=

`

<div class="legacy-grid">

<div class="legacy-box">

Observatories

<br>

<b>

${x.observatories}

</b>

</div>

<div class="legacy-box">

Aware

<br>

<b>

${x.aware}

</b>

</div>

<div class="legacy-box">

Insights

<br>

<b>

${x.insights}

</b>

</div>

<div class="legacy-box">

Awareness

<br>

<b>

${x.awareness}%

</b>

</div>

</div>

<hr>

<span class="badge bg-${
x.state==='aware'
?
'success'
:
'primary'
}">

${x.state}

</span>

`;

}

);

}

loadObservatoryPrime();

studioSetInterval('observatoryPrime', loadObservatoryPrime, 60000);

</script>

<script>

function loadFrontier(){

fetch(
'/easychair/admin/conference-home/frontier'
)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document.getElementById(
'studioFrontier'
);

if(!el)
return;

el.innerHTML=

`

<div class="legacy-grid">

<div class="legacy-box">

Frontiers

<br>

<b>

${x.frontiers}

</b>

</div>

<div class="legacy-box">

Ready

<br>

<b>

${x.ready}

</b>

</div>

<div class="legacy-box">

Cycles

<br>

<b>

${x.cycles}

</b>

</div>

<div class="legacy-box">

Exploration

<br>

<b>

${x.exploration}%

</b>

</div>

</div>

<hr>

<span class="badge bg-${
x.state==='frontier_ready'
?
'success'
:
'primary'
}">

${x.state}

</span>

`;

}

);

}

loadFrontier();

studioSetInterval('frontier', loadFrontier, 60000);

</script>

<script>

function loadContinuum(){

fetch(
'/easychair/admin/conference-home/continuum'
)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document.getElementById(
'studioContinuum'
);

if(!el)
return;

el.innerHTML=

`

<div class="legacy-grid">

<div class="legacy-box">

Mesh

<br>

<b>${x.mesh}</b>

</div>

<div class="legacy-box">

Stable

<br>

<b>${x.stable}</b>

</div>

<div class="legacy-box">

Decisions

<br>

<b>${x.decisions}</b>

</div>

<div class="legacy-box">

Continuity

<br>

<b>${x.continuity}%</b>

</div>

</div>

<hr>

<span class="badge bg-${
x.state==='continuous'
?
'success'
:
'primary'
}">

${x.state}

</span>

`;

}

);

}

StudioWidgets.register(
'studioContinuum',
function(){
loadContinuum();
}
);

studioSetInterval('continuum', loadContinuum, 60000);

</script>

<script>

function loadHorizonPrime(){

fetch(
'/easychair/admin/conference-home/horizon-prime'
)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document.getElementById(
'studioHorizonPrime'
);

if(!el)
return;

el.innerHTML=

`

<div class="legacy-grid">

<div class="legacy-box">

Controls

<br>

<b>${x.controls}</b>

</div>

<div class="legacy-box">

Stable

<br>

<b>${x.stable}</b>

</div>

<div class="legacy-box">

Signals

<br>

<b>${x.signals}</b>

</div>

<div class="legacy-box">

Strategy

<br>

<b>${x.strategy}%</b>

</div>

</div>

<hr>

<span class="badge bg-${
x.state==='strategic'
?
'success'
:
'primary'
}">

${x.state}

</span>

`;

}

);

}

loadHorizonPrime();

studioSetInterval('horizonPrime', loadHorizonPrime, 60000);

</script>

<script>

function loadApex(){

fetch(
'/easychair/admin/conference-home/apex'
)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document.getElementById(
'studioApex'
);

if(!el)
return;

el.innerHTML=

`

<div class="legacy-grid">

<div class="legacy-box">

Mesh

<br>

<b>${x.mesh}</b>

</div>

<div class="legacy-box">

Ready

<br>

<b>${x.ready}</b>

</div>

<div class="legacy-box">

Executive

<br>

<b>${x.observatory}</b>

</div>

<div class="legacy-box">

Execution

<br>

<b>${x.execution}%</b>

</div>

</div>

<hr>

<span class="badge bg-${
x.state==='executive'
?
'success'
:
'primary'
}">

${x.state}

</span>

`;

}

);

}

loadApex();

studioSetInterval('apex', loadApex, 60000);

</script>

<script>

function loadCrown(){

fetch(
'/easychair/admin/conference-home/crown'
)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document.getElementById(
'studioCrown'
);

if(!el)
return;

el.innerHTML=

`

<div class="legacy-grid">

<div class="legacy-box">

Mesh

<br>

<b>${x.mesh}</b>

</div>

<div class="legacy-box">

Aligned

<br>

<b>${x.aligned}</b>

</div>

<div class="legacy-box">

Governance

<br>

<b>${x.observatory}</b>

</div>

<div class="legacy-box">

Health

<br>

<b>${x.governance}%</b>

</div>

</div>

<hr>

<span class="badge bg-${
x.state==='governed'
?
'success'
:
'primary'
}">

${x.state}

</span>

`;

}

);

}

loadCrown();

studioSetInterval('crown', loadCrown, 60000);

</script>

<script>

function loadSummit(){

fetch(
'/easychair/admin/conference-home/summit'
)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document.getElementById(
'studioSummit'
);

if(!el)
return;

el.innerHTML=

`

<div class="legacy-grid">

<div class="legacy-box">

Constitution

<br>

<b>${x.constitution}</b>

</div>

<div class="legacy-box">

Compliant

<br>

<b>${x.compliant}</b>

</div>

<div class="legacy-box">

Policies

<br>

<b>${x.observatory}</b>

</div>

<div class="legacy-box">

Governance

<br>

<b>${x.governance}%</b>

</div>

</div>

<hr>

<span class="badge bg-${
x.state==='constitutional'
?
'success'
:
'primary'
}">

${x.state}

</span>

`;

}

);

}

loadSummit();

studioSetInterval('summit', loadSummit, 60000);

</script>

<script>

function loadInfinity(){

fetch(
'/easychair/admin/conference-home/infinity'
)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document.getElementById(
'studioInfinity'
);

if(!el)
return;

el.innerHTML=

`

<div class="legacy-grid">

<div class="legacy-box">

Runtime

<br>

<b>${x.runtime}</b>

</div>

<div class="legacy-box">

Cohesive

<br>

<b>${x.cohesive}</b>

</div>

<div class="legacy-box">

Dashboards

<br>

<b>${x.dashboard}</b>

</div>

<div class="legacy-box">

Unification

<br>

<b>${x.unification}%</b>

</div>

</div>

<hr>

<span class="badge bg-${
x.state==='unified'
?
'success'
:
'primary'
}">

${x.state}

</span>

`;

}

);

}

StudioWidgets.register(
'studioInfinity',
function(){
loadInfinity();
}
);

studioSetInterval('infinity', loadInfinity, 60000);

</script>

<script>

function loadOrigin(){

fetch(
'/easychair/admin/conference-home/origin'
)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document.getElementById(
'studioOrigin'
);

if(!el)
return;

el.innerHTML=

`

<div class="legacy-grid">

<div class="legacy-box">

Kernel

<br>

<b>${x.kernel}</b>

</div>

<div class="legacy-box">

Stable

<br>

<b>${x.stable}</b>

</div>

<div class="legacy-box">

Lifecycle

<br>

<b>${x.observatory}</b>

</div>

<div class="legacy-box">

Health

<br>

<b>${x.lifecycle}%</b>

</div>

</div>

<hr>

<span class="badge bg-${
x.state==='established'
?
'success'
:
'primary'
}">

${x.state}

</span>

`;

}

);

}

loadOrigin();

studioSetInterval('origin', loadOrigin, 60000);

</script>

<script>

function loadLegacyPrime(){

fetch(
'/easychair/admin/conference-home/legacy-prime'
)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document.getElementById(
'studioLegacyPrime'
);

if(!el)
return;

el.innerHTML=

`

<div class="legacy-grid">

<div class="legacy-box">
Engine
<br>
<b>${x.engine}</b>
</div>

<div class="legacy-box">
Resilient
<br>
<b>${x.resilient}</b>
</div>

<div class="legacy-box">
Renewal
<br>
<b>${x.observatory}</b>
</div>

<div class="legacy-box">
Score
<br>
<b>${x.renewal}%</b>
</div>

</div>

<hr>

<span class="badge bg-${
x.state==='renewed'
?
'success'
:
'primary'
}">

${x.state}

</span>

`;

}

);

}

loadLegacyPrime();

studioSetInterval('legacyPrime', loadLegacyPrime, 60000);

</script>

<script>

function loadGenesisPrime(){

fetch(
'/easychair/admin/conference-home/genesis-prime'
)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document.getElementById(
'studioGenesisPrime'
);

if(!el)
return;

el.innerHTML=

`

<div class="legacy-grid">

<div class="legacy-box">

Kernel

<br>

<b>${x.kernel}</b>

</div>

<div class="legacy-box">

Ready

<br>

<b>${x.ready}</b>

</div>

<div class="legacy-box">

Evolution

<br>

<b>${x.observatory}</b>

</div>

<div class="legacy-box">

Score

<br>

<b>${x.evolution}%</b>

</div>

</div>

<hr>

<span class="badge bg-${
x.state==='evolved'
?
'success'
:
'primary'
}">

${x.state}

</span>

`;

}

);

}

loadGenesisPrime();

studioSetInterval('genesisPrime', loadGenesisPrime, 60000);

</script>

<script>

function loadOmega(){

fetch(
'/easychair/admin/conference-home/omega'
)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document.getElementById(
'studioOmega'
);

if(!el)
return;

el.innerHTML=

`

<div class="legacy-grid">

<div class="legacy-box">

Engine

<br>

<b>${x.engine}</b>

</div>

<div class="legacy-box">

Stable

<br>

<b>${x.stable}</b>

</div>

<div class="legacy-box">

Continuity

<br>

<b>${x.observatory}</b>

</div>

<div class="legacy-box">

Endurance

<br>

<b>${x.endurance}%</b>

</div>

</div>

<hr>

<span class="badge bg-${
x.state==='enduring'
?
'success'
:
'primary'
}">

${x.state}

</span>

`;

}

);

}

StudioWidgets.register(
'studioOmega',
function(){
loadOmega();
}
);

studioSetInterval('omega', loadOmega, 60000);

</script>

<script>

function loadEternal(){

fetch(
'/easychair/admin/conference-home/eternal'
)

.then(
r=>r.json()
)

.then(

x=>{

const el=
document.getElementById(
'studioEternal'
);

if(!el)
return;

el.innerHTML=

`

<div class="legacy-grid">

<div class="legacy-box">

Memory

<br>

<b>${x.memory}</b>

</div>

<div class="legacy-box">

Retained

<br>

<b>${x.retained}</b>

</div>

<div class="legacy-box">

Knowledge

<br>

<b>${x.knowledge}</b>

</div>

<div class="legacy-box">

Continuum

<br>

<b>${x.continuum}%</b>

</div>

</div>

<hr>

<span class="badge bg-${
x.state==='eternal'
?
'success'
:
'primary'
}">

${x.state}

</span>

`;

}

);

}

loadEternal();

studioSetInterval('eternal', loadEternal, 60000);

</script>

<script>

async function loadStudioMetrics(){

const r=

await fetch(
'/easychair/admin/studio/metrics'
);

const x=

await r.json();

const h=

document.getElementById(
'studioHealth'
);

if(!h)
return;

h.innerHTML=

`

<div class="metric">

Health

<b>

${x.health}%

</b>

</div>

<div class="metric">

Sub

<b>

${x.submissions}

</b>

</div>

<div class="metric">

Rev

<b>

${x.reviews}

</b>

</div>

<div class="metric">

Users

<b>

${x.users}

</b>

</div>

`;

}

loadStudioMetrics();

studioSetInterval('studioMetrics', loadStudioMetrics, 30000);

</script>

<script
src="/easychair/public/assets/js/studio-runtime.js">
</script>

<script>

function refreshRuntime(){

const x=

window.__runtimeStats
?
window.__runtimeStats.size
:
0;

const el=

document.getElementById(
'runtimeStats'
);

if(el){

el.innerHTML=

`
<b>

Active Timers

</b>

<br>

${x}

`;

}

}

refreshRuntime();

setInterval(
refreshRuntime,
10000
);

</script>

<script>

const observer=

new IntersectionObserver(

entries=>{

entries.forEach(

e=>{

if(
e.isIntersecting
){

StudioWidgets.load(
e.target.id
);

observer.unobserve(
e.target
);

}

}

);

}

);

document
.querySelectorAll(
'.studio-card'
)

.forEach(

x=>

observer.observe(
x
)

);

</script>

<script>

window.StudioACL=[];

fetch(
'/easychair/admin/studio/permissions'
)

.then(
r=>r.json()
)

.then(

x=>{

window.StudioACL=x;

document
.querySelectorAll(
'[data-widget]'
)

.forEach(

e=>{

const w=

e.dataset
.widget;

if(

!x.includes(
'*'
)

&&

!x.includes(
w)

){

e.remove();

}

}

);

}

);

</script>

<script>

function optimizeStudio(){

const mobile=

window.innerWidth
<
768;

document
.querySelectorAll(
'.studio-card'
)

.forEach(

(
e,
i
)=>{

if(

mobile
&&
i>6

){

e.style.display=
'none';

}

}

);

}

optimizeStudio();

window.addEventListener(
'resize',
optimizeStudio
);

</script>

<script>

function toggleStudioWidgets(){

document
.querySelectorAll(
'.studio-card'
)

.forEach(

x=>

x.style.display=''

);

}

</script>

