1st iter

frontend/src/routes/settings/connections/+page.svelte

@@ -0,0 +1,34 @@
+<!-- [DEF:ConnectionsSettingsPage:Component] -->
+<!--
+@SEMANTICS: settings, connections, page
+@PURPOSE: Page for managing database connection configurations.
+@LAYER: UI
+-->
+<script>
+    import ConnectionForm from '../../../components/tools/ConnectionForm.svelte';
+    import ConnectionList from '../../../components/tools/ConnectionList.svelte';
+
+    let listComponent;
+
+    function handleSuccess() {
+        if (listComponent) {
+            listComponent.fetchConnections();
+        }
+    }
+</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">Connection Management</h1>
+        
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+            <div>
+                <ConnectionForm on:success={handleSuccess} />
+            </div>
+            <div>
+                <ConnectionList bind:this={listComponent} />
+            </div>
+        </div>
+    </div>
+</div>
+<!-- [/DEF:ConnectionsSettingsPage:Component] -->

frontend/src/routes/tools/debug/+page.svelte

@@ -0,0 +1,26 @@
+<!-- [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] -->

frontend/src/routes/tools/mapper/+page.svelte

@@ -0,0 +1,26 @@
+<!-- [DEF:MapperPage:Component] -->
+<!--
+@SEMANTICS: mapper, page, tool
+@PURPOSE: Page for the dataset column mapper tool.
+@LAYER: UI
+-->
+<script>
+    import MapperTool from '../../../components/tools/MapperTool.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">Dataset Column Mapper</h1>
+        
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <div class="lg:col-span-2">
+                <MapperTool />
+            </div>
+            <div class="lg:col-span-1">
+                <TaskRunner />
+            </div>
+        </div>
+    </div>
+</div>
+<!-- [/DEF:MapperPage:Component] -->

frontend/src/routes/tools/search/+page.svelte

@@ -0,0 +1,26 @@
+<!-- [DEF:SearchPage:Component] -->
+<!--
+@SEMANTICS: search, page, tool
+@PURPOSE: Page for the dataset search tool.
+@LAYER: UI
+-->
+<script>
+    import SearchTool from '../../../components/tools/SearchTool.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">Dataset Search</h1>
+        
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <div class="lg:col-span-2">
+                <SearchTool />
+            </div>
+            <div class="lg:col-span-1">
+                <TaskRunner />
+            </div>
+        </div>
+    </div>
+</div>
+<!-- [/DEF:SearchPage:Component] -->