<!-- [DEF:DebugPage:Component] -->
<!--
@SEMANTICS: debug, page, tool
@PURPOSE: Page for system diagnostics and debugging.
@LAYER: UI
-->
<script>
    import DebugTool from '../../../components/tools/DebugTool.svelte';
    import TaskRunner from '../../../components/TaskRunner.svelte';
</script>

<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
    <div class="px-4 py-6 sm:px-0">
        <h1 class="text-2xl font-semibold text-gray-900 mb-6">System Diagnostics</h1>
        
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <div class="lg:col-span-2">
                <DebugTool />
            </div>
            <div class="lg:col-span-1">
                <TaskRunner />
            </div>
        </div>
    </div>
</div>
<!-- [/DEF:DebugPage:Component] -->