UI updates and preroll buffer to 8 frames

ui/src/components/KvList.jsx

@@ -1,18 +1,12 @@
-export function KvList({ values }) {
+export function KvList({ values, variant = "cards" }) {
   return (
-    <dl className="kv">
+    <dl className={variant === "rows" ? "kv-rows" : "definition-grid compact"}>
       {values.map(([key, value]) => (
-        <FragmentRow key={key} label={key} value={value} />
+        <div className={variant === "rows" ? "kv-row" : "definition-card"} key={key}>
+          <dt>{key}</dt>
+          <dd>{value}</dd>
+        </div>
       ))}
     </dl>
   );
 }
-
-function FragmentRow({ label, value }) {
-  return (
-    <>
-      <dt>{label}</dt>
-      <dd>{value}</dd>
-    </>
-  );
-}