feat(session-ui): style markdown tables like generated UI tables (#57002)

packages/session-ui/src/components/markdown.css

@@ -382,29 +382,43 @@
     text-underline-offset: 2px;
   }
 
-  /* Tables */
+  /* Tables: same frame, header and rows as generated UI tables (genui.css) */
+  [data-component="markdown-table"] {
+    margin: 16px 0;
+    overflow-x: auto;
+    border-radius: 6px;
+    box-shadow: inset 0 0 0 0.5px var(--v2-border-border-muted);
+  }
+
   table {
     width: 100%;
-    border-collapse: collapse;
-    margin: 16px 0;
-    font-size: var(--font-size-base);
-    display: block;
-    overflow-x: auto;
+    border-collapse: separate;
+    border-spacing: 0;
+    color: var(--v2-text-text-base);
+    font-size: 13px;
+    font-variant-numeric: tabular-nums;
+    font-weight: 440;
+    line-height: var(--line-height-compact);
+    letter-spacing: -0.04px;
   }
 
   th,
   td {
-    /* Minimal borders for structure, matching TUI "lines" roughly but keeping it web-clean */
+    padding: 8px 12px;
     border-bottom: 0.5px solid var(--v2-border-border-muted);
-    padding: 12px;
     text-align: start;
     vertical-align: top;
   }
 
   th {
-    color: var(--v2-text-text-base);
-    font-weight: var(--font-weight-medium);
-    border-bottom: 0.5px solid var(--v2-border-border-base);
+    border-bottom-color: var(--v2-border-border-base);
+    background: var(--v2-background-bg-layer-01);
+    color: var(--v2-text-text-muted);
+    font-weight: 530;
+  }
+
+  tr:last-child td {
+    border-bottom: 0;
   }
 
   /* Images */

packages/session-ui/src/components/markdown.stories.tsx

@@ -34,6 +34,25 @@ export const CompactResult = {
   ),
 }
 
+export const Table = {
+  render: () => (
+    <div class="mx-auto max-w-[760px] rounded-lg border border-border-weak-base bg-background-base px-5 py-4">
+      <Markdown
+        text={[
+          "Crops on the outside, kitchen in the middle, farms at the bottom next to it.",
+          "",
+          "| | West | Centre | East |",
+          "| --- | --- | --- | --- |",
+          "| North | Lettuce ×2 | Tomato ×2 | Berry ×1 (pal food) |",
+          "| Middle | Wheat ×1 + Mill | Palbox + Feed Box | Hot Spring + Pal Beds |",
+          "| South | Ranch | Refrigerator · Electric Kitchen · Generator | Chest (overflow) |",
+          "| Far south | Breeding Farm A | (walkway) | Breeding Farm B |",
+        ].join("\n")}
+      />
+    </div>
+  ),
+}
+
 const streamed =
   "Streaming Markdown now keeps existing elements alive while each newly arriving word fades into the response."
 

packages/session-ui/src/components/markdown.tsx

@@ -326,6 +326,16 @@ function markCodeLinks(root: HTMLDivElement) {
   }
 }
 
+// Tables scroll inside a rounded frame, matching generated UI tables.
+function wrapTables(root: HTMLDivElement) {
+  root.querySelectorAll("table").forEach((table) => {
+    const wrapper = document.createElement("div")
+    wrapper.dataset.component = "markdown-table"
+    table.replaceWith(wrapper)
+    wrapper.appendChild(table)
+  })
+}
+
 const publicFaviconHost = /^(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z]{2,63}$/
 
 const privateFaviconSuffix = /\.(?:alt|example|internal|invalid|local|localhost|onion|test|ts\.net)$/
@@ -916,6 +926,7 @@ function updateBlock(
   source.innerHTML = block.html
   markInlineCode(source, next, block.mode === "live", localFileExists)
   markCodeLinks(source)
+  wrapTables(source)
 
   if (sessionLinks) markSessionLinks(source)
   markExternalLinkFavicons(source)