feat: Improve table rendering with horizontal scroll and content-based column sizing

[devin-ai-integration]

Summary

Adds proper Markdown table rendering across three surfaces: chat messages, card detail view, and poster image generation. Tables now render as styled grids instead of raw pipe-separated text.

Chat messages (MessagingCell.makeTableView)

The existing table grid used .fillEqually columns with no horizontal scroll. Now:

// Before: fixed equal columns, no scroll
container(AdaptiveBorderView, cornerRadius:8)
  └── vstack(.fillEqually rows)

// After: measured columns, horizontal scroll, card wrapper
wrapper(AdaptiveBorderView, cornerRadius:10, clipsToBounds, border)
  └── UIScrollView(horizontal only)
        └── container(clear, width ≥ totalTableWidth)
              └── vstack(explicit-width cells)

• Column widths measured via NSString.size(withAttributes:), clamped to [56pt, 220pt]
• container.width ≥ totalTableWidth (required) + == frameLayoutGuide.width (p999) — narrow tables fill the bubble, wide tables scroll
• Row heights via boundingRect for accurate multi-line sizing
• Scroll indicators flash on appearance

Card detail view (CardDetailViewController)

• Replaced single bodyLabel with segment-aware bodyStack that parses body through MarkdownSegmenter
• .text → UILabel with CardMarkdown.attributed() (unchanged styling)
• .table → dark-themed scrollable grid matching the card sheet's visual language (white-on-dark, UIColor(white:1, alpha:0.06) background, 0.08 header fill)
• .codeBlock → monospaced label in tinted container

Poster image (MarkdownCardRenderer)

• renderPoster now walks MarkdownSegmenter.segments instead of drawing the whole body as one attributed string
• Tables drawn via drawPosterTable — CoreGraphics grid with rounded-rect background, header fill, alternating row tints, proportional column scaling when exceeding maxWidth
• Code blocks drawn with tinted rounded-rect background
• Prose segments drawn with CardMarkdown.attributed() as before

Link to Devin session: https://app.devin.ai/sessions/f4e8908baf164468a3bfdcedf298aa35

[devin-ai-integration]

Original prompt from API User

Improve table rendering in the LoopHarness iOS app. Currently, Markdown tables in chat messages render as plain text (raw pipe-separated text). They should render as proper styled tables that match the visual style of how cards and other rich content are rendered in the chat UI.

Requirements:

1. Find where Markdown (specifically CommonMark/Markdown tables) is currently parsed and rendered in the chat message views. Look for the Markdown rendering pipeline, any AttributedString or HTML rendering, and the chat bubble/message cell views.
2. Implement proper table rendering that:
   • Parses Markdown table syntax (header row, alignment, data rows)
   • Renders them as native SwiftUI tables or styled HTML that matches the existing card/chat visual language (rounded corners, appropriate padding, header styling, alternating row colors if applicable, proper column alignment)
   • Handles column alignment (left, center, right) as specified in Markdown syntax
   • Is responsive and fits within the chat message width
3. Match the visual style of existing rich content rendering (cards, code blocks, etc.) — use the same color palette, corner radii, spacing, and typography.
4. Test with various table sizes (2x2, large tables, tables with long cell content) to ensure they render correctly and don't break layout.
5. Make sure tables are scrollable horizontally if they exceed the message width, rather than truncating or breaking layout.

The repo is at https://github.com/theashbhat/LoopHarness. Focus on the iOS Swift/SwiftUI code. Open a PR with the changes and add ashbhat as a reviewer.

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment, CI, and merge conflict monitoring

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
loop-harness	Ready	Preview, Comment	Jun 21, 2026 11:34pm