<!-- #region DebugToolPage [C:3] [TYPE Page] [SEMANTICS sveltekit, debug, diagnostics, tool, task-runner] -->
<!-- @BRIEF Page component: routes/tools/debug/+page.svelte -->
<!-- @LAYER Page -->
<!--
@SEMANTICS: debug, diagnostics, tool, task-runner
@PURPOSE: Page for system diagnostics and debugging.
@LAYER UI
@RELATION IMPLEMENTS -> [EXT:frontend:RoutePages]
@RELATION IMPLEMENTS -> [PageContracts]
@RELATION BINDS_TO -> [NavigationContracts]
@RELATION DEPENDS_ON -> [EXT:frontend:DebugTool]
@RELATION DEPENDS_ON -> [EXT:frontend:TaskRunner]
@UX_STATE: Ready -> Debug controls and task runner render in a two-column tools layout.
@UX_STATE: Running -> Long-running diagnostics are observed through the adjacent task runner.
@UX_STATE: Error -> Nested diagnostic failures remain scoped to the debug workspace.
-->
<script lang="ts">
    import DebugTool from '../../../components/tools/DebugTool.svelte';
    import TaskRunner from '../../../components/TaskRunner.svelte';
    import { PageHeader } from '$lib/ui';
    import { t } from '$lib/i18n/index.svelte.js';
</script>

<div class="max-w-7xl mx-auto p-6">
    <PageHeader title={$t.debug?.title } />
    
    <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>
<!-- #endregion DebugToolPage -->
