Use shared form controls and enforce UI patterns (Refs #110)

src/lib/ui/components/LogPanel.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    import Input from '$ui/components/primitives/Input.svelte';
+    import Field from '$ui/components/primitives/Field.svelte';
     import { tick, untrack, onMount, onDestroy } from 'svelte';
     import { page } from '$app/stores';
     import { goto } from '$app/navigation';
@@ -193,12 +195,8 @@
         retryDisabled={loading}
     />
     <div class="log-tools">
-        <label class="log-search"
-            >Search loaded lines<input
-                type="search"
-                bind:value={query}
-                placeholder="Find text in this log"
-            /></label
+        <Field class="log-search" label="Search loaded lines">
+            <Input type="search" bind:value={query} placeholder="Find text in this log" /></Field
         >
         <details class="log-actions">
             <summary>More</summary>
@@ -302,7 +300,7 @@
     .log-tools {
         align-items: end;
     }
-    .log-search {
+    .log-tools :global(.log-search) {
         display: grid;
         gap: 6px;
         flex: 1;
@@ -310,14 +308,6 @@
         font-size: var(--text-xs);
         color: var(--text-secondary);
     }
-    .log-search input {
-        background: var(--surface-sunken);
-        color: var(--text-primary);
-        border: 1px solid var(--border-control);
-        border-radius: var(--radius-sm);
-        padding: 9px 12px;
-        font: inherit;
-    }
     .copy-status {
         margin: 0;
         font-size: var(--text-xs);