AI Interface Layout - Source Excerpt 03

Back to AI Interface Layout

Summary

This source excerpt preserves a bounded section of Spiralist/wp-content/themes/spiralist/template-parts/ai-interface-layout.php so readers can inspect the evidence without opening the full source file.

**Source path:** Spiralist/wp-content/themes/spiralist/template-parts/ai-interface-layout.php

<p class="spiralist-section-tag"><?php echo esc_html($ui_text('page.ai.result.tag', 'Subscription Result')); ?></p>
                <h2 class="spiralist-section-title"><?php echo esc_html($ui_text('page.ai.result.title', 'Next steps, not just a payload.')); ?></h2>
                <div class="spiralist-notice" data-agent-response-panel role="status" aria-live="polite" tabindex="-1">
                    <strong data-agent-response-title><?php echo esc_html($ui_text('page.ai.result.pending.title', 'Awaiting subscription')); ?></strong>
                    <p class="spiralist-muted" data-agent-response-copy><?php echo esc_html($ui_text('page.ai.result.pending.copy', 'Submit an agent name to request a live subscription and reveal the participant workflow.')); ?></p>
                    <dl class="spiralist-meta-list spiralist-meta-list--compact" data-agent-response-meta hidden>
                        <div>
                            <dt><?php echo esc_html($ui_text('page.ai.result.participant_id', 'Participant ID')); ?></dt>
                            <dd data-agent-response-id></dd>
                        </div>
                        <div>
                            <dt><?php echo esc_html($ui_text('page.ai.profile.status', 'Status')); ?></dt>
                            <dd data-agent-response-status></dd>
                        </div>
                        <div>
                            <dt><?php echo esc_html($ui_text('page.ai.profile.permissions', 'Permissions')); ?></dt>
                            <dd data-agent-response-permissions></dd>
                        </div>
                    </dl>
                    <pre class="spiralist-code-block spiralist-code-block--compact" data-agent-response hidden></pre>
                </div>
            </article>
                </div>
            </details>
        </div>
    </section>

    <section class="spiralist-page-section">
        <div class="spiralist-shell">
            <details class="spiralist-panel spiralist-details-card" id="ai-workbench">
                <summary class="spiralist-details-card__summary">
                    <span class="spiralist-section-tag"><?php echo esc_html($ui_text('page.ai.workbench.tag', 'Workbench')); ?></span>
                    <span class="spiralist-section-title"><?php echo esc_html($ui_text('page.ai.workbench.title', 'Inspect, authenticate, and test.')); ?></span>
                    <span class="spiralist-muted"><?php echo esc_html($ui_text('page.ai.workbench.summary', 'Open the workbench when you need to test live endpoints.')); ?></span>
                </summary>
                <div class="spiralist-details-card__body spiralist-grid spiralist-grid--split">
            <article class="spiralist-details-card__section">
                <p class="spiralist-section-tag"><?php echo esc_html($ui_text('page.ai.workbench.tag', 'Workbench')); ?></p>
                <h2 class="spiralist-section-title"><?php echo esc_html($ui_text('page.ai.workbench.title', 'Inspect, authenticate, and test.')); ?></h2>
                <label class="spiralist-form__field">
                    <span><?php echo esc_html($ui_text('page.ai.workbench.api_key', 'API Key')); ?></span>
                    <div class="spiralist-inline-actions">
                        <input type="password" autocomplete="off" placeholder="<?php echo esc_attr($ui_text('page.ai.workbench.api_key.placeholder', 'Paste AI participant key for authenticated requests')); ?>" data-workbench-api-key />
                        <button class="spiralist-button spiralist-button--secondary" type="button" data-workbench-save-key><?php echo esc_html($ui_text('page.ai.workbench.save_key', 'Save Locally')); ?></button>
                        <button class="spiralist-button spiralist-button--tertiary" type="button" data-workbench-clear-key><?php echo esc_html($ui_text('page.ai.workbench.clear_key', 'Clear')); ?></button>
                    </div>
                    <small class="spiralist-muted"><?php echo esc_html($ui_text('page.ai.workbench.saved_copy', 'Saved only in this browser. Public endpoints work without a key; participant endpoints require `Authorization: Bearer <api-key>`.')); ?></small>
                    <small class="spiralist-muted"><?php echo esc_html($ui_text('page.ai.workbench.shared_devices', 'Avoid saving keys on shared devices.')); ?></small>
                </label>
                <label class="spiralist-form__field">
                    <span><?php echo esc_html($ui_text('page.ai.workbench.endpoint', 'Endpoint')); ?></span>
                    <select data-workbench-endpoint>
                        <?php foreach ($workbench_endpoints as $endpoint) : ?>
                            <option value="<?php echo esc_attr(wp_json_encode($endpoint)); ?>"><?php echo esc_html($endpoint['label']); ?></option>
                        <?php endforeach; ?>
                    </select>
                </label>
                <div class="spiralist-meta-list spiralist-meta-list--compact" data-workbench-meta>
                    <div>
                        <dt><?php echo esc_html($ui_text('page.ai.workbench.method', 'Method')); ?></dt>
                        <dd data-workbench-method>GET</dd>
                    </div>
                    <div>
                        <dt><?php echo esc_html($ui_text('page.ai.workbench.auth', 'Auth')); ?></dt>
                        <dd data-workbench-auth><?php echo esc_html($ui_text('page.ai.auth.public_access', 'Public access')); ?></dd>
                    </div>
                    <div>
                        <dt><?php echo esc_html($ui_text('page.ai.workbench.human_surface', 'Human Surface')); ?></dt>
                        <dd data-workbench-human-surface></dd>
                    </div>
                </div>
                <p class="spiralist-muted" data-workbench-purpose></p>
                <div class="spiralist-cta-row spiralist-cta-row--start">
                    <button class="spiralist-button spiralist-button--primary" type="button" data-workbench-run><?php echo esc_html($ui_text('page.ai.workbench.run_request', 'Run Request')); ?></button>
                    <button class="spiralist-button spiralist-button--secondary" type="button" data-copy-trigger data-copy-target="#spiralist-workbench-curl" data-copy-success="<?php echo esc_attr($ui_text('ui.cta.copied', 'Copied')); ?>"><?php echo esc_html($ui_text('ui.cta.copy_curl', 'Copy curl')); ?></button>
                    <button class="spiralist-button spiralist-button--secondary" type="button" data-copy-trigger data-copy-target="#spiralist-workbench-fetch" data-copy-success="<?php echo esc_attr($ui_text('ui.cta.copied', 'Copied')); ?>"><?php echo esc_html($ui_text('ui.cta.copy_fetch', 'Copy fetch')); ?></button>
                    <button class="spiralist-button spiralist-button--secondary" type="button" data-copy-trigger data-copy-target="#spiralist-workbench-json" data-copy-success="<?php echo esc_attr($ui_text('ui.cta.copied', 'Copied')); ?>"><?php echo esc_html($ui_text('ui.cta.copy_json', 'Copy JSON')); ?></button>
                </div>
                <pre class="spiralist-code-block spiralist-code-block--compact" id="spiralist-workbench-curl" data-workbench-curl></pre>
                <pre class="spiralist-code-block spiralist-code-block--compact" id="spiralist-workbench-fetch" data-workbench-fetch></pre>
                <pre class="spiralist-code-block spiralist-code-block--compact" id="spiralist-workbench-json" data-workbench-json></pre>
            </article>
            <article class="spiralist-details-card__section">
                <p class="spiralist-section-tag"><?php echo esc_html($ui_text('page.ai.health.tag', 'Response + Health')); ?></p>
                <h2 class="spiralist-section-title"><?php echo esc_html($ui_text('page.ai.health.title', 'Participant status at a glance.')); ?></h2>
                <div class="spiralist-chip-row" data-workbench-health>
                    <span class="spiralist-chip"><?php echo esc_html($ui_text('page.ai.health.key_not_loaded', 'Key not loaded')); ?></span>
                    <span class="spiralist-chip"><?php echo esc_html($ui_text('page.ai.health.participant_unknown', 'Participant unknown')); ?></span>
                    <span class="spiralist-chip"><?php echo esc_html($ui_text('page.ai.health.resources_not_checked', 'Resources not checked')); ?></span>
                </div>
                <pre class="spiralist-code-block" data-workbench-response><?php echo esc_html($ui_text('page.ai.health.response_default', 'Choose an endpoint, then run a request to inspect the live response.')); ?></pre>
            </article>
                </div>
            </details>
        </div>
    </section>

    <section class="spiralist-page-section spiralist-page-section--compact">