fix: add table styles to .msg-body for readable bordered chat tables (fixes #341) (#345)

* fix: add table CSS to .msg-body for readable bordered tables in chat (fixes #341)

* fix: remove accidentally included ui.js and test_issue342.py from CSS-only PR

* docs: combine v0.50.11 CHANGELOG entries, bump version badge

* fix: restore ui.js from master (autolink already landed in #346)

* fix: restore test_issue342.py deleted by cleanup commit (already on master)

---------

Co-authored-by: Nathan Esquenazi <nesquena@gmail.com>

CHANGELOG.md

@@ -5,15 +5,11 @@
 
 ---
 
+## [v0.50.11] Chat table styles + plain URL auto-linking (fixes #341, #342)
 
-## [v0.50.11] Auto-link plain URLs in chat messages (fixes #342)
-
-- **Plain URLs in chat messages are now clickable** (`static/ui.js`): The `renderMd()` function previously only converted Markdown-style `[label](url)` links to `<a>` tags. Bare URLs like `https://example.com` were rendered as plain text. A new autolink pass converts `https?://...` URLs to `<a href="..." target="_blank" rel="noopener">` tags automatically.
-  - The pass runs after the `[label](url)` link pass and the `SAFE_TAGS` HTML-escape pass (protecting code blocks in `<pre>`), but before the paragraph-wrapping stage.
-  - The same autolink pass is applied inside `inlineMd()` so URLs in list items, blockquotes, and table cells are linked too.
-  - Trailing punctuation (`.`, `,`, `;`, `:`, `!`, `?`, `)`) is stripped from the end of URLs to avoid linking sentence-ending characters.
-  - URLs are passed through `esc()` before placement in `href` and link text — no XSS risk.
-  - 7 new structural tests in `tests/test_issue342.py`; 809 tests total (up from 802)
+- **Tables in chat messages now render with visible borders** (`static/style.css`): The `.msg-body` area had no table CSS, so markdown tables sent by the assistant were unstyled and unreadable. Four new rules mirror the existing `.preview-md` table styles: `border-collapse:collapse`, per-cell padding and borders via `var(--border2)`, and an alternating-row tint. Two `:root[data-theme="light"]` overrides ensure the borders and header background adapt correctly in light mode. (fixes #341)
+- **Plain URLs in chat messages are now clickable** (`static/ui.js`): Bare URLs like `https://example.com` were rendered as plain text. A new autolink pass in `renderMd()` converts `https?://...` URLs to `<a>` tags automatically. Runs after the SAFE_TAGS escape pass (protecting code blocks), before paragraph wrapping. Also applied inside `inlineMd()` so URLs in list items, blockquotes, and table cells are linked too. Trailing punctuation stripped; `esc()` applied to both href and link text. (fixes #342)
+  - 11 new tests (4 in `tests/test_issue341.py`, 7 in `tests/test_issue342.py`); 813 tests total (up from 802)
 
 ## [v0.50.10] Title auto-generation fix + mobile close button (PR #333)
 

static/index.html

@@ -526,7 +526,7 @@
                 <div class="settings-section-title">System</div>
                 <div class="settings-section-meta">Instance version and access controls.</div>
               </div>
-              <span class="settings-version-badge">v0.50.10</span>
+              <span class="settings-version-badge">v0.50.11</span>
             </div>
             <div class="settings-field" style="border-top:1px solid var(--border);padding-top:12px;margin-top:8px">
               <label for="settingsPassword" data-i18n="settings_label_password">Access Password</label>

static/style.css

@@ -66,7 +66,9 @@
   :root[data-theme="light"] .panel-icon-btn:hover{background:rgba(0,0,0,.06);}
   :root[data-theme="light"] .file-item:hover{background:rgba(0,0,0,.04);}
   :root[data-theme="light"] .preview-md th{background:rgba(0,0,0,.04);}
+  :root[data-theme="light"] .msg-body th{background:rgba(0,0,0,.04);}
   :root[data-theme="light"] .preview-md td{border-color:rgba(0,0,0,.08);}
+  :root[data-theme="light"] .msg-body td{border-color:rgba(0,0,0,.08);}
   :root[data-theme="light"] .preview-badge.code{background:rgba(0,0,0,.05);}
   :root[data-theme="light"] .ctx-ring-center{background:var(--bg);color:#5a544a;}
   :root[data-theme="light"] .ctx-ring-track{stroke:rgba(0,0,0,.12);}
@@ -369,6 +371,10 @@
   .msg-body blockquote{border-left:3px solid var(--blue);padding-left:14px;color:var(--muted);font-style:italic;margin:10px 0;}
   .msg-body a{color:var(--blue);text-decoration:underline;}
   .msg-body hr{border:none;border-top:1px solid var(--border);margin:14px 0;}
+  .msg-body table{border-collapse:collapse;width:100%;margin:8px 0;font-size:12px;}
+  .msg-body th{background:rgba(255,255,255,.07);padding:6px 10px;text-align:left;font-weight:600;border:1px solid var(--border2);}
+  .msg-body td{padding:5px 10px;border:1px solid rgba(255,255,255,.06);}
+  .msg-body tr:nth-child(even){background:rgba(255,255,255,.03);}
   .msg-files{display:flex;flex-wrap:wrap;gap:6px;padding-left:30px;margin-bottom:10px;}
   .msg-file-badge{display:flex;align-items:center;gap:5px;background:rgba(124,185,255,0.1);border:1px solid rgba(124,185,255,0.25);border-radius:6px;padding:4px 9px;font-size:12px;color:var(--blue);}
   .thinking{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:13px;padding-left:30px;}

tests/test_issue341.py

@@ -0,0 +1,34 @@
+"""Tests for GitHub issue #341: .msg-body table CSS styles."""
+import os
+
+CSS_PATH = os.path.join(os.path.dirname(__file__), "..", "static", "style.css")
+
+
+def _read_css():
+    with open(CSS_PATH, "r") as f:
+        return f.read()
+
+
+def test_msg_body_table_css_present():
+    css = _read_css()
+    assert ".msg-body table" in css, ".msg-body table rule missing from style.css"
+    assert "border-collapse:collapse" in css, "border-collapse:collapse missing from style.css"
+
+
+def test_msg_body_table_th_td_present():
+    css = _read_css()
+    assert ".msg-body th" in css, ".msg-body th rule missing from style.css"
+    assert ".msg-body td" in css, ".msg-body td rule missing from style.css"
+
+
+def test_msg_body_table_tr_stripe_present():
+    css = _read_css()
+    assert ".msg-body tr:nth-child(even)" in css, ".msg-body tr:nth-child(even) rule missing from style.css"
+
+
+def test_msg_body_light_theme_overrides():
+    css = _read_css()
+    assert ':root[data-theme="light"] .msg-body th' in css, \
+        'Light-theme override for .msg-body th missing from style.css'
+    assert ':root[data-theme="light"] .msg-body td' in css, \
+        'Light-theme override for .msg-body td missing from style.css'