style(chat): render markdown tables legibly

familiar-gateway/internal/skillpkg/builtin/research/SKILL.md

@@ -1,10 +1,18 @@
 ---
 name: research
 description: >-
-  Web research expert. ALWAYS use this skill when the user asks to research,
-  investigate, dig into, or get an overview of a topic. Effort tiers: quick,
-  standard (default), deep — keyword anywhere in the request. Not for simple
-  lookups answerable with a single search.
+  Web research expert for EXPLICIT research requests: the user asks to
+  research, investigate, dig into, look into, or compile sources on a topic.
+  Effort tiers: quick, standard (default), deep — keyword anywhere in the
+  request.
+  DO NOT use this skill when the user just wants an answer written from what
+  you already know. "Give me an overview of X", "summarize X", "explain X",
+  "tell me about X" are ordinary knowledge requests — answer them directly.
+  A length hint ("1-page", "short") is a FORMAT, not a request to research.
+  If the classifier tier for the turn is trivial or knowledge, that is a strong
+  signal the user wants a direct answer; do not start a research run to satisfy
+  it. Never research a topic that is answerable from training knowledge unless
+  the user asked for sources, citations, or current/recent information.
 license: MIT
 metadata:
   version: "1.0"

familiar-workspace/static/app.css

@@ -4021,6 +4021,13 @@ code {
 .chat-messages {
     flex: 1 1 auto;
     overflow-y: auto;
+    /* Never scroll the conversation sideways: a wide child should scroll
+       inside itself (see .chat-msg-body pre) rather than widen the column.
+       min-width:0 is required because a flex item defaults to min-width:auto,
+       which lets content set the floor — .chat-right having it does not
+       propagate, each flex container needs its own. */
+    overflow-x: hidden;
+    min-width: 0;
     padding: 24px 32px;
     display: flex;
     flex-direction: column;
@@ -4056,6 +4063,7 @@ code {
     display: flex;
     flex-direction: column;
     gap: 6px;
+    min-width: 0;
     /* Cap width at the readable 760px on wide panels, but keep a
        10% gap against the opposite edge on narrower ones so the
        back-and-forth reads at a glance. */
@@ -4088,7 +4096,59 @@ code {
     font-size: var(--text-md);
     line-height: 1.65;
     color: var(--fg-2);
+    min-width: 0;
+    /* Long URLs and unbroken tokens wrap instead of widening the panel. */
+    overflow-wrap: anywhere;
+}
+/* Code blocks keep their formatting, so they cannot wrap — let them scroll
+   inside their own box rather than stretching the message column and taking
+   the whole conversation sideways with it. */
+.chat-msg-body pre {
+    max-width: 100%;
+    overflow-x: auto;
+}
+/* Markdown tables in chat. The model emits plain | pipe | tables and they
+   arrived completely unstyled: no header rule, no cell padding, no column
+   gap — adjacent cells ran together ("Rest of Europe / other" abutting
+   "remainder"). Matches the .memory-table / .users-table idiom used elsewhere
+   in the app so tables look the same wherever they appear.
+
+   display:block + overflow-x:auto keeps a wide table scrolling inside its own
+   box instead of widening the message column (see the overflow fix above).
+   width:max-content lets narrow tables stay narrow rather than being stretched
+   to the panel, while still allowing wide ones to scroll. */
+.chat-msg-body table {
+    display: block;
+    width: max-content;
+    max-width: 100%;
+    overflow-x: auto;
+    border-collapse: collapse;
+    font-size: var(--text-sm);
+    margin: 12px 0;
+}
+.chat-msg-body thead th {
+    text-align: left;
+    color: var(--fg-3);
+    font-family: var(--font-mono);
+    font-size: var(--text-2xs);
+    font-weight: 500;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    padding: 8px 16px 8px 0;
+    border-bottom: 1px solid var(--border-default);
+    white-space: nowrap;
+}
+.chat-msg-body tbody td {
+    padding: 8px 16px 8px 0;
+    border-bottom: 1px solid var(--border-subtle);
+    color: var(--fg-2);
+    vertical-align: top;
 }
+/* Last column carries no trailing gutter, and the final row no hairline, so
+   the table ends cleanly instead of looking clipped. */
+.chat-msg-body thead th:last-child,
+.chat-msg-body tbody td:last-child { padding-right: 0; }
+.chat-msg-body tbody tr:last-child td { border-bottom: 0; }
 .chat-msg-body > :first-child { margin-top: 0; }
 .chat-msg-body > :last-child { margin-bottom: 0; }
 .chat-msg-body p { margin: 0 0 12px; }