feat(web): solver output enhancing

- math render header
- tooltips
- copy word to input
- cancel solver

web/src/components/SolverOutput.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    import katex from "katex";
+    import "katex/dist/katex.min.css";
     import type {
         EvaluateWordsProgress,
         EvaluateWordsResult,
@@ -7,10 +9,22 @@
     let {
         data,
         progress = null,
+        insert_guess = null,
     }: {
         data: Promise<EvaluateWordsResult>;
         progress: EvaluateWordsProgress | null;
+        insert_guess: (word: string[]) => void | null;
     } = $props();
+
+    function renderMath(txt: string | null) {
+        return (element: HTMLElement) => {
+            if (txt) {
+                katex.render(txt, element);
+            } else {
+                katex.render(element.innerText, element);
+            }
+        };
+    }
 </script>
 
 {#await data}
@@ -27,16 +41,35 @@
         <table class="w-full text-left text-sm text-gray-700">
             <thead class="bg-gray-800 text-xs uppercase text-gray-600">
                 <tr>
-                    <th class="px-4 py-3">Word</th>
-                    <th class="px-4 py-3">p[solution]</th>
-                    <th class="px-4 py-3">E[Inf.]</th>
-                    <th class="px-4 py-3">E[Score]</th>
+                    <th class="px-4 py-3" title="The best words">Word</th>
+                    <th
+                        class="px-4 py-3 math-header"
+                        title="The probability that this word is the solution."
+                        {@attach renderMath("p(x=\\text{word})")}
+                    ></th>
+                    <th
+                        title="The expected information to gain when guessing this word."
+                        class="px-4 py-3 math-header"
+                        {@attach renderMath("E[\\text{Inf.}]")}
+                    ></th>
+                    <th
+                        title="The expected number of guesses for this wordle when guessing this word."
+                        class="px-4 py-3 math-header"
+                        {@attach renderMath("E[\\text{Score}]")}
+                    ></th>
                 </tr>
             </thead>
 
             <tbody class="divide-y divide-gray-500">
                 {#each d.stats as s}
-                    <tr class="transition-colors hover:bg-gray-50">
+                    <tr
+                        class="transition-colors hover:bg-gray-50"
+                        onclick={() => {
+                            if (insert_guess) {
+                                insert_guess([...s.word]);
+                            }
+                        }}
+                    >
                         <td class="px-4 py-3 font-bold">{s.word}</td>
                         <td class="px-4 py-3"
                             >{s.solution_probability.toFixed(3)}</td
@@ -57,3 +90,13 @@
         {e}
     </div>
 {/await}
+
+<style>
+    .math-header :global(.katex) {
+        font-size: 1em;
+    }
+
+    .math-header :global(.katex .mord) {
+        margin: 0;
+    }
+</style>