)]}'
{
  "commit": "5f778949e023268d0bd39cb7f102952e575e9602",
  "tree": "d606847a802b46013eb99f6881084498c774beb3",
  "parents": [
    "c3ecabb720cbf3fa7bf1372ec8ed449f0b9a4b91"
  ],
  "author": {
    "name": "Philip Zeyliger",
    "email": "philip@bold.dev",
    "time": "Sat Jun 07 00:05:20 2025 +0000"
  },
  "committer": {
    "name": "Philip Zeyliger",
    "email": "philip@bold.dev",
    "time": "Sat Jun 07 04:12:53 2025 +0000"
  },
  "message": "webui: add markdown rendering to mobile chat messages\n\nAdd comprehensive markdown support to mobile agent messages matching\ndesktop functionality with mobile-optimized styling and performance.\n\nProblem Analysis:\nMobile webui was displaying agent messages as plain text while desktop\nversion rendered rich markdown content including code blocks, headers,\nlists, and formatting. This created inconsistent user experience where\nmobile users lost important formatting context, making code examples\nand structured responses harder to read and understand.\n\nImplementation Changes:\n\n1. Markdown Library Integration:\n   - Added marked library import for markdown parsing\n   - Integrated DOMPurify for HTML sanitization security\n   - Added unsafeHTML directive for rendering parsed content\n   - Reused desktop markdown parsing patterns for consistency\n\n2. Mobile-Optimized Rendering:\n   - Created simplified renderer without complex features like Mermaid\n   - Focused on essential markdown elements: headers, code, lists, links\n   - Maintained security through DOMPurify sanitization\n   - Preserved plain text rendering for user messages\n\n3. Responsive Typography:\n   - Mobile-specific font sizes for headers (1.05em - 1.2em range)\n   - Optimized code block styling with horizontal scroll\n   - Touch-friendly spacing and line heights\n   - Compact margins for small screen readability\n\n4. Content Styling:\n   - Subtle code highlighting with background colors\n   - Proper blockquote styling with left border\n   - List indentation optimized for mobile viewing\n   - Link styling that maintains message bubble aesthetics\n\nTechnical Details:\n- Uses marked.parse() with GFM and breaks enabled for GitHub compatibility\n- DOMPurify whitelist approach for security (HTML tags and attributes)\n- Conditional rendering: markdown for assistant, plain text for user\n- CSS optimized for mobile viewport constraints and touch interaction\n\nBenefits:\n- Consistent markdown experience across desktop and mobile\n- Improved readability of code examples and structured content\n- Maintained security through proper HTML sanitization\n- Mobile-optimized styling for touch interfaces\n- Better user experience for technical discussions\n\nTesting:\n- Verified markdown parsing works with common elements\n- Confirmed code blocks render properly with scroll\n- Tested security sanitization prevents XSS\n- Validated mobile typography and spacing\n\nThis enhancement brings mobile webui markdown rendering to feature\nparity with desktop while maintaining mobile-specific optimizations.\n\nCo-Authored-By: sketch \u003chello@sketch.dev\u003e\nChange-ID: s99e90082addd4eadk\n",
  "tree_diff": [
    {
      "type": "modify",
      "old_id": "d634da510748fc0225b2e4642d3af83139ee45b7",
      "old_mode": 33188,
      "old_path": "webui/src/web-components/mobile-chat.ts",
      "new_id": "57ad44920f073c6477c51cb09d279453f2e5f83c",
      "new_mode": 33188,
      "new_path": "webui/src/web-components/mobile-chat.ts"
    }
  ]
}