Add full shell, replaceable Omics adapter and bilingual interaction

Implement approved specification #32 and tickets #33-#37. Keep host authentication server-verified and pin session interaction language. Compile scoped base selectors for browser compatibility and retain full gutters during CSS pruning.

frontend/src/viewers/SchemaLinkingViewer.tsx

@@ -1,3 +1,5 @@
+import { useI18n } from "../i18n";
+import { useShell } from "../shell/host/ShellProvider";
 import React, { useEffect, useState } from "react";
 import { renderMermaid } from "./mermaid";
 
@@ -104,6 +106,8 @@ function buildHierarchicalRows(promoted: Candidate[]) {
 }
 
 export function SchemaLinkingViewer({ linking }: { linking: SchemaLinking }) {
+  const { t } = useI18n();
+  const { theme } = useShell();
   const promoted = linking.candidates.filter((c) => c.decision === "promoted");
   // The graph only contains promoted candidates, so cap on that count.
   const oversized = promoted.length > CAP;
@@ -116,14 +120,14 @@ export function SchemaLinkingViewer({ linking }: { linking: SchemaLinking }) {
     if (view !== "chart" || oversized) return;
     let cancelled = false;
     const def = buildErDiagram(promoted, linking.joins);
-    renderMermaid(def)
+    renderMermaid(def, theme)
       .then((s) => { if (!cancelled) setSvg(s); })
       .catch(() => { if (!cancelled) setView("table"); });
     return () => {
       cancelled = true;
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [view, linking, oversized]);
+  }, [view, linking, oversized, theme]);
 
   const { grouped, orphans } = buildHierarchicalRows(promoted);
 
@@ -135,19 +139,19 @@ export function SchemaLinkingViewer({ linking }: { linking: SchemaLinking }) {
           disabled={oversized}
           className={`rounded-md border border-border/70 px-2 py-1 text-xs shadow-xs transition-colors hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50 ${view === "chart" ? "font-semibold" : ""}`}
         >
-          Graph
+          {t("Graph")}
         </button>
         <button
           onClick={() => setView("table")}
           className={`rounded-md border border-border/70 px-2 py-1 text-xs shadow-xs transition-colors hover:bg-accent ${view === "table" ? "font-semibold" : ""}`}
         >
-          Table
+          {t("Table")}
         </button>
       </div>
 
       {oversized && (
         <p className="text-sm text-amber-600">
-          Too many nodes to display in the graph. Use the table instead.
+          {t("Too many nodes to display in the graph. Use the table instead.")}
         </p>
       )}
 
@@ -163,9 +167,9 @@ export function SchemaLinkingViewer({ linking }: { linking: SchemaLinking }) {
         <table className="w-full text-sm border-collapse">
           <thead>
             <tr>
-              <th className="text-left border-b py-1">Name</th>
-              <th className="text-left border-b py-1">Type</th>
-              <th className="text-left border-b py-1">Why</th>
+              <th className="text-left border-b py-1">{t("Name")}</th>
+              <th className="text-left border-b py-1">{t("Type")}</th>
+              <th className="text-left border-b py-1">{t("Why")}</th>
             </tr>
           </thead>
           <tbody>
@@ -173,7 +177,7 @@ export function SchemaLinkingViewer({ linking }: { linking: SchemaLinking }) {
               <React.Fragment key={table.name}>
                 <tr className="font-semibold bg-muted/30">
                   <td className="py-1 pl-1">{table.name}</td>
-                  <td>table</td>
+                  <td>{t("table")}</td>
                   <td className="text-xs text-muted-foreground">
                     {reasonFor(table)}
                   </td>
@@ -183,7 +187,7 @@ export function SchemaLinkingViewer({ linking }: { linking: SchemaLinking }) {
                     <td className="py-0.5 pl-4 text-muted-foreground">
                       {col.name}
                     </td>
-                    <td>column</td>
+                    <td>{t("column")}</td>
                     <td className="text-xs text-muted-foreground">
                       {reasonFor(col)}
                     </td>
@@ -196,7 +200,7 @@ export function SchemaLinkingViewer({ linking }: { linking: SchemaLinking }) {
                 <td className="py-0.5 pl-1 text-muted-foreground">
                   {col.name}
                 </td>
-                <td>column</td>
+                <td>{t("column")}</td>
                 <td className="text-xs text-muted-foreground">
                   {reasonFor(col)}
                 </td>