feat(messages): auto-convert review findings text into markdown tables

Author: Dimillian

src/features/messages/components/Markdown.test.tsx

@@ -518,4 +518,43 @@ describe("Markdown file-like href behavior", () => {
     expect(onOpenFileLink).not.toHaveBeenCalled();
   });
 
+  it("converts blank-line-separated structured review findings into one markdown table", () => {
+    const { container } = render(
+      <Markdown
+        value={[
+          "src/features/app/hooks/useMainAppLayoutSurfaces.ts | category=clarity | Layout assembly is still too broad. | Split surface assembly by domain. | high",
+          "",
+          "src/features/app/components/SidebarWorkspaceGroups.tsx | category=clarity | Workspace derivation still lives in the render component. | Move derivation into a focused hook. | high",
+          "",
+          "src/features/threads/hooks/threadMessagingHelpers.ts | category=clarity | Helper responsibilities are too broad. | Split helpers by concern. | medium",
+        ].join("\n")}
+        className="markdown"
+      />,
+    );
+
+    expect(container.querySelector(".markdown-table-wrap")).toBeTruthy();
+    expect(container.querySelector(".markdown-table")).toBeTruthy();
+    expect(screen.getByRole("columnheader", { name: "File" })).toBeTruthy();
+    expect(screen.getByRole("columnheader", { name: "Recommendation" })).toBeTruthy();
+    expect(screen.getAllByText("clarity")).toHaveLength(3);
+    expect(container.querySelectorAll(".markdown-table").length).toBe(1);
+    expect(container.querySelectorAll("tbody tr").length).toBe(3);
+    expect(screen.getAllByText("high")).toHaveLength(2);
+    expect(screen.getByText("Split helpers by concern.")).toBeTruthy();
+  });
+
+  it("wraps standard gfm tables in the styled table container", () => {
+    const { container } = render(
+      <Markdown
+        value={["| Name | Value |", "| --- | --- |", "| Status | Ready |"].join("\n")}
+        className="markdown"
+      />,
+    );
+
+    expect(container.querySelector(".markdown-table-wrap")).toBeTruthy();
+    expect(container.querySelector(".markdown-table")).toBeTruthy();
+    expect(screen.getByRole("columnheader", { name: "Name" })).toBeTruthy();
+    expect(screen.getByText("Ready")).toBeTruthy();
+  });
+
 });

src/features/messages/components/Markdown.tsx

@@ -87,6 +87,123 @@ function normalizeUrlLine(line: string) {
   return withoutBullet;
 }
 
+type StructuredReviewFinding = {
+  file: string;
+  category: string;
+  finding: string;
+  recommendation: string;
+  severity: string;
+};
+
+function escapeTableCell(value: string) {
+  return value
+    .replace(/\\/g, "\\\\")
+    .replace(/\|/g, "\\|")
+    .replace(/\r?\n/g, "<br />")
+    .trim();
+}
+
+function parseStructuredReviewFinding(line: string): StructuredReviewFinding | null {
+  const parts = line.split(/\s+\|\s+/).map((part) => part.trim());
+  if (parts.length !== 5) {
+    return null;
+  }
+  const [file, rawCategory, finding, recommendation, rawSeverity] = parts;
+  if (!file || !finding || !recommendation || !/^category=/i.test(rawCategory)) {
+    return null;
+  }
+  const category = rawCategory.replace(/^category=/i, "").trim();
+  const severity = rawSeverity.replace(/^severity=/i, "").trim();
+  if (!category || !severity) {
+    return null;
+  }
+  if (!/^(critical|high|medium|low|info|warning|error)$/i.test(severity)) {
+    return null;
+  }
+  return {
+    file,
+    category,
+    finding,
+    recommendation,
+    severity,
+  };
+}
+
+function buildStructuredReviewTable(rows: StructuredReviewFinding[]) {
+  const header = [
+    "| File | Category | Finding | Recommendation | Severity |",
+    "| --- | --- | --- | --- | --- |",
+  ];
+  const body = rows.map(
+    ({ file, category, finding, recommendation, severity }) =>
+      `| \`${escapeTableCell(file)}\` | ${escapeTableCell(category)} | ${escapeTableCell(
+        finding,
+      )} | ${escapeTableCell(recommendation)} | ${escapeTableCell(severity)} |`,
+  );
+  return [...header, ...body].join("\n");
+}
+
+function normalizeStructuredReviewTables(value: string) {
+  const lines = value.split(/\r?\n/);
+  let inFence = false;
+  let pendingRows: StructuredReviewFinding[] = [];
+  const output: string[] = [];
+
+  const flushPendingRows = () => {
+    if (pendingRows.length === 0) {
+      return;
+    }
+    if (output.length > 0 && output[output.length - 1].trim()) {
+      output.push("");
+    }
+    output.push(buildStructuredReviewTable(pendingRows));
+    output.push("");
+    pendingRows = [];
+  };
+
+  for (const line of lines) {
+    const fenceMatch = line.match(/^\s*(```|~~~)/);
+    if (fenceMatch) {
+      flushPendingRows();
+      inFence = !inFence;
+      output.push(line);
+      continue;
+    }
+    const structuredRow = inFence ? null : parseStructuredReviewFinding(line);
+    if (structuredRow) {
+      pendingRows.push(structuredRow);
+      continue;
+    }
+    if (!inFence && pendingRows.length > 0 && !line.trim()) {
+      continue;
+    }
+    flushPendingRows();
+    output.push(line);
+  }
+
+  flushPendingRows();
+  return output.join("\n");
+}
+
+function stripTrailingMemoryCitation(value: string) {
+  return value.replace(/\n*<oai-mem-citation>[\s\S]*?<\/oai-mem-citation>\s*$/i, "").trim();
+}
+
+export function isStandaloneMarkdownTable(value: string) {
+  const stripped = stripTrailingMemoryCitation(value);
+  if (!stripped) {
+    return false;
+  }
+  const normalized = normalizeStructuredReviewTables(normalizeListIndentation(stripped)).trim();
+  if (!normalized) {
+    return false;
+  }
+  const lines = normalized.split(/\r?\n/).filter((line) => line.trim().length > 0);
+  if (lines.length < 2) {
+    return false;
+  }
+  return lines.every((line) => /^\|.*\|\s*$/.test(line.trim()));
+}
 
 function extractUrlLines(value: string) {
   const lines = value.split(/\r?\n/);
@@ -323,7 +440,9 @@ export function Markdown({
   onOpenFileLinkMenu,
   onOpenThreadLink,
 }: MarkdownProps) {
-  const normalizedValue = codeBlock ? value : normalizeListIndentation(value);
+  const normalizedValue = codeBlock
+    ? value
+    : normalizeStructuredReviewTables(normalizeListIndentation(value));
   const content = codeBlock
     ? `\`\`\`\n${normalizedValue}\n\`\`\``
     : normalizedValue;
@@ -358,6 +477,11 @@ export function Markdown({
     return resolvedPath;
   };
   const components: Components = {
+    table: ({ children }) => (
+      <div className="markdown-table-wrap">
+        <table className="markdown-table">{children}</table>
+      </div>
+    ),
     a: ({ href, children }) => {
       const url = (href ?? "").trim();
       const threadId = url.startsWith("thread://")

src/features/messages/components/MessageRows.tsx

@@ -35,6 +35,7 @@ import {
   type ToolSummary,
 } from "../utils/messageRenderUtils";
 import { Markdown } from "./Markdown";
+import { isStandaloneMarkdownTable } from "./Markdown";
 
 type MarkdownFileLinkProps = {
   showMessageFilePath?: boolean;
@@ -395,6 +396,11 @@ export const MessageRow = memo(function MessageRow({
       })
       .filter(Boolean) as MessageImage[];
   }, [item.images]);
+  const isTableOnlyAssistantMessage =
+    item.role === "assistant" &&
+    hasText &&
+    imageItems.length === 0 &&
+    isStandaloneMarkdownTable(item.text);
 
   const getSelectedMessageText = useCallback(() => {
     const bubble = bubbleRef.current;
@@ -436,7 +442,10 @@ export const MessageRow = memo(function MessageRow({
 
   return (
     <div className={`message ${item.role}`}>
-      <div ref={bubbleRef} className="bubble message-bubble">
+      <div
+        ref={bubbleRef}
+        className={`bubble message-bubble${isTableOnlyAssistantMessage ? " message-bubble-table-only" : ""}`}
+      >
         {imageItems.length > 0 && (
           <MessageImageGrid
             images={imageItems}

src/features/messages/components/Messages.test.tsx

@@ -145,6 +145,35 @@ describe("Messages", () => {
     expect(markdown?.textContent ?? "").toContain("Literal [image] token");
   });
 
+  it("uses the table container as the visual bubble for assistant table-only messages", () => {
+    const items: ConversationItem[] = [
+      {
+        id: "msg-table-1",
+        kind: "message",
+        role: "assistant",
+        text: [
+          "src/features/app/hooks/useMainAppLayoutSurfaces.ts | category=clarity | Layout assembly is still too broad. | Split surface assembly by domain. | high",
+          "",
+          "src/features/threads/hooks/threadMessagingHelpers.ts | category=clarity | Helper responsibilities are too broad. | Split helpers by concern. | medium",
+        ].join("\n"),
+      },
+    ];
+
+    const { container } = render(
+      <Messages
+        items={items}
+        threadId="thread-1"
+        workspaceId="ws-1"
+        isThinking={false}
+        openTargets={[]}
+        selectedOpenAppId=""
+      />,
+    );
+
+    expect(container.querySelector(".message-bubble-table-only")).toBeTruthy();
+    expect(container.querySelector(".markdown-table-wrap")).toBeTruthy();
+  });
+
   it("quotes a message into composer using markdown blockquote format", () => {
     const onQuoteMessage = vi.fn();
     const items: ConversationItem[] = [

src/styles/messages.css

@@ -186,6 +186,18 @@
   position: relative;
 }
 
+.message.assistant .message-bubble.message-bubble-table-only {
+  max-width: min(100%, 960px);
+  padding: 0;
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+}
+
+.message.assistant .message-bubble.message-bubble-table-only .markdown-table-wrap {
+  margin: 0;
+}
+
 .message-copy-button {
   display: inline-flex;
   align-items: center;
@@ -1285,6 +1297,92 @@
   color: var(--text-strong);
 }
 
+.markdown .markdown-table-wrap {
+  --markdown-table-wide-col: max(18rem, 33%);
+  margin: 10px 0;
+  width: 100%;
+  overflow-x: auto;
+  border: 1px solid var(--border-strong);
+  border-radius: 14px;
+  background: color-mix(in srgb, var(--surface-card-strong) 92%, transparent);
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
+}
+
+.markdown .markdown-table {
+  width: max(100%, calc(var(--markdown-table-wide-col) * 2 + 40rem));
+  min-width: 0;
+  border-collapse: separate;
+  border-spacing: 0;
+  table-layout: fixed;
+}
+
+.markdown .markdown-table th,
+.markdown .markdown-table td {
+  padding: 12px 14px;
+  text-align: left;
+  vertical-align: top;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+.markdown .markdown-table thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: color-mix(in srgb, var(--surface-control) 90%, transparent);
+  border-bottom: 1px solid var(--border-strong);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+}
+
+.markdown .markdown-table tbody td {
+  border-top: 1px solid color-mix(in srgb, var(--border-subtle) 88%, transparent);
+}
+
+.markdown .markdown-table tbody tr:first-child td {
+  border-top: none;
+}
+
+.markdown .markdown-table tbody tr:hover td {
+  background: color-mix(in srgb, var(--surface-control-hover) 36%, transparent);
+}
+
+.message .markdown .markdown-table td:first-child {
+  width: 22rem;
+}
+
+.message .markdown .markdown-table th:first-child,
+.message .markdown .markdown-table td:first-child {
+  width: 22rem;
+}
+
+.message .markdown .markdown-table th:nth-child(2),
+.message .markdown .markdown-table td:nth-child(2) {
+  width: 10rem;
+}
+
+.message .markdown .markdown-table th:nth-child(3),
+.message .markdown .markdown-table td:nth-child(3),
+.message .markdown .markdown-table th:nth-child(4),
+.message .markdown .markdown-table td:nth-child(4) {
+  width: var(--markdown-table-wide-col);
+}
+
+.message .markdown .markdown-table th:last-child,
+.message .markdown .markdown-table td:last-child {
+  width: 8rem;
+  white-space: nowrap;
+  font-weight: 650;
+  text-transform: capitalize;
+}
+
+.message .markdown .markdown-table td p {
+  margin: 0;
+}
+
 .markdown ul,
 .markdown ol {
   padding-left: 18px;