)]}'
{
  "commit": "e31d2a95da49b58cabe4675335c2de80039007ec",
  "tree": "efc2dbe13a82cf2042979386bc39d159422dde71",
  "parents": [
    "04e778cbe6955cccf56a4e52c163a1c2220ff84a"
  ],
  "author": {
    "name": "Philip Zeyliger",
    "email": "philip@bold.dev",
    "time": "Sun May 11 15:22:35 2025 -0700"
  },
  "committer": {
    "name": "Philip Zeyliger",
    "email": "philip@bold.dev",
    "time": "Sun May 11 15:22:35 2025 -0700"
  },
  "message": "webui: Fix message bubbles and tool calls overflow issues in timeline\n\nOn the bright side, Sketch fixed this with repeated \"hey, look at that\nscreenshot; there\u0027s horizontal truncation.\" On the downside, it got\nreally confused by shadow dom, and the solution doesn\u0027t look clean to\nme, with lots of inline CSS.\n\n~~~~~\n\nFixed various overflow issues in timeline component, particularly with\nhandling long bash commands in shadow DOM contexts:\n\n1. Message Bubbles:\n   - Added overflow constraints to message-bubble-container\n   - Changed max-width from 80% to 100% for better containment\n   - Added text-overflow: ellipsis for clean truncation\n\n2. Tool Cards:\n   - Implemented manual string truncation for bash commands\n   - Limited display to 80 chars with ellipsis for overflowing text\n   - Added CSS to constrain width in all contexts\n\n3. Shadow DOM Challenges:\n   - Standard CSS inheritance doesn\u0027t penetrate shadow DOM boundaries\n   - Component-specific styles required direct modification in render methods\n   - Parallel CSS and JS truncation needed for reliable overflow handling\n   - Multiple nested web components required coordinated width constraints\n\n4. Global Improvements:\n   - Added overflow-x: hidden to parent containers\n   - Used box-sizing: border-box for accurate sizing\n   - Fixed scroll container to prevent horizontal scrolling\n\nThe primary insight was that shadow DOM isolation prevented CSS-only\nsolutions from working reliably. Explicit string truncation in the\ncomponent code was needed alongside careful container width management.\nThis pattern may need to be applied to other web components that\ndisplay potentially lengthy content.\n\nCo-Authored-By: sketch \u003chello@sketch.dev\u003e\nChange-ID: sc937c08ac1b7766fk\n",
  "tree_diff": [
    {
      "type": "modify",
      "old_id": "9c817d82cb5c081a126db99c574f68264b00a2d1",
      "old_mode": 33188,
      "old_path": "webui/src/web-components/demo/sketch-timeline.demo.html",
      "new_id": "b535fa1ac9279c954be5412bbbc3aa86a8034407",
      "new_mode": 33188,
      "new_path": "webui/src/web-components/demo/sketch-timeline.demo.html"
    },
    {
      "type": "modify",
      "old_id": "f28b1a369f53889f7641b15a582f4384ee3203d1",
      "old_mode": 33188,
      "old_path": "webui/src/web-components/sketch-timeline-message.ts",
      "new_id": "1edaff2fa0cdfca0603c171233c9b5d72329abd6",
      "new_mode": 33188,
      "new_path": "webui/src/web-components/sketch-timeline-message.ts"
    },
    {
      "type": "modify",
      "old_id": "64f3db0f0880401f2f3a1805a55ed7bfe3da0c92",
      "old_mode": 33188,
      "old_path": "webui/src/web-components/sketch-timeline.ts",
      "new_id": "3870e39d2ea8bf47757a4f2a3caf264af229245f",
      "new_mode": 33188,
      "new_path": "webui/src/web-components/sketch-timeline.ts"
    },
    {
      "type": "modify",
      "old_id": "3245a452c57a3e64fd1dd867795df3936714efa4",
      "old_mode": 33188,
      "old_path": "webui/src/web-components/sketch-tool-calls.ts",
      "new_id": "5f416e1c780ce170dde0ab730980685fed9c88c8",
      "new_mode": 33188,
      "new_path": "webui/src/web-components/sketch-tool-calls.ts"
    },
    {
      "type": "modify",
      "old_id": "b63e0210facb285bedd36f71f88b99d30beee5a1",
      "old_mode": 33188,
      "old_path": "webui/src/web-components/sketch-tool-card.ts",
      "new_id": "7b12eaa2c27d22d5335471aa5c9072e317e0f625",
      "new_mode": 33188,
      "new_path": "webui/src/web-components/sketch-tool-card.ts"
    }
  ]
}