)]}'
{
  "log": [
    {
      "commit": "ae3724ef039833e1227714412e2c5289ad8875c8",
      "tree": "7242aaea3ef677a86ace50e7c805935f27890d94",
      "parents": [
        "19a32eaa120562170595e42584f3fc4b40828b97"
      ],
      "author": {
        "name": "banksean",
        "email": "banksean@gmail.com",
        "time": "Fri Jul 18 16:52:37 2025 +0000"
      },
      "committer": {
        "name": "Autoformatter",
        "email": "bot@sketch.dev",
        "time": "Fri Jul 18 20:29:23 2025 +0000"
      },
      "message": "webui: add dark mode implementation plan\n\nAlso implements phase 1 of the plan, which just lays the foundation\nfor implementing the user-visible changes. This does not include\nany dark-mode theme settings for the rest of the web UI, and\nwhile it does inlcude a \"sketch-theme-toggle\" element, this is\nonly included in the demo:runner vite server for interactive testing.\nIt\u0027s not included in the app shell base yet.\n\n-SM\n\n---\n\nDocuments comprehensive strategy for implementing dark mode in Sketch\u0027s\nweb UI using Tailwind CSS class-based approach.\n\nThe plan covers:\n- Foundation setup (Tailwind config, theme service, toggle component)\n- Systematic component updates with dark mode variants\n- Accessibility considerations and testing checklist\n- 4-week implementation timeline\n\nKey technical decisions:\n- Uses SketchTailwindElement base class following existing patterns\n- Singleton theme service with event system for component coordination\n- Respects system preferences while allowing user override\n- Persistent theme storage in localStorage\n\nThis provides a roadmap for adding dark mode support while maintaining\nconsistency with Sketch\u0027s existing web component architecture.\n\nCo-Authored-By: sketch \u003chello@sketch.dev\u003e\nChange-ID: s6b69ad95a4394f98k\n"
    },
    {
      "commit": "b379592340a40c4c22ac1a52be4d2e612a9aa4f4",
      "tree": "37d9ce08602651cc11b0b1bc2f46ebdd6907fc6a",
      "parents": [
        "659b98361783ad139412ea2a0bc62c8ed25c292e"
      ],
      "author": {
        "name": "Sean McCullough",
        "email": "banksean@gmail.com",
        "time": "Fri Jun 27 01:59:41 2025 +0000"
      },
      "committer": {
        "name": "Autoformatter",
        "email": "bot@sketch.dev",
        "time": "Fri Jun 27 02:04:42 2025 +0000"
      },
      "message": "webui: convert sketch-call-status and sketch-chat-input to SketchTailwindElement with comprehensive demo support\n\nConvert both sketch-call-status and sketch-chat-input components from shadow DOM CSS to Tailwind classes while maintaining test compatibility and adding comprehensive demo infrastructure.\n\nProblems Solved:\n\nShadow DOM Styling Limitations:\n- Both components used CSS-in-JS with shadow DOM preventing Tailwind integration\n- Large static styles blocks with custom CSS duplicated Tailwind functionality\n- Components couldn\u0027t benefit from design system consistency\n- Difficult to maintain custom CSS alongside Tailwind-based components\n\nMissing Demo Infrastructure:\n- sketch-call-status had no demo fixtures for testing component states\n- sketch-chat-input needed dedicated demo fixture following naming convention\n- Components not properly integrated into demo runner system\n\nTest Compatibility Issues:\n- Conversion to Tailwind required updating shadow DOM selectors\n- renderRoot.querySelector calls needed conversion to direct querySelector\n- Component tests needed updating for non-shadow DOM structure\n\nSolution Implementation:\n\nTailwind CSS Conversion - sketch-call-status:\n- Changed sketch-call-status to inherit from SketchTailwindElement\n- Replaced CSS-in-JS styles with Tailwind utility classes and inline animations\n- Converted animations using @keyframes in inline \u003cstyle\u003e tag\n- Maintained exact visual appearance while using Tailwind classes\n\nTailwind CSS Conversion - sketch-chat-input:\n- Changed sketch-chat-input to inherit from SketchTailwindElement\n- Replaced extensive static styles CSS block with Tailwind utility classes\n- Converted complex chat container, input wrapper, and button styling\n- Added custom fade-in animation to tailwind.config.js with keyframes\n\nKey Tailwind Class Mappings:\n- Call status indicators: bg-yellow-100 text-amber-500 (active), text-gray-400 (idle)\n- Status banners: bg-green-50 text-green-700 (idle), bg-orange-50 text-orange-600 (working)\n- Chat container: w-full bg-gray-100 p-4 min-h-[40px] relative\n- Chat input: flex-1 p-3 border border-gray-300 rounded resize-y font-mono\n- Send button: bg-blue-500 hover:bg-blue-600 disabled:bg-gray-400\n\nShadow DOM to Light DOM Conversion:\n- Removed static styles properties completely\n- Updated all renderRoot.querySelector calls to direct querySelector calls\n- Changed shadow DOM event handler setup to work with light DOM\n- Maintained all drag-and-drop and event handling functionality\n\nTest Compatibility Maintenance:\n- Added semantic CSS classes back to elements for test selectors\n- Updated sketch-chat-input.test.ts to use querySelector instead of renderRoot.querySelector\n- Fixed drag event simulation to work with light DOM structure\n- All existing tests continue to pass with updated selectors\n\nDemo Infrastructure Implementation:\n- Created call-status.ts demo fixtures with CallStatusState interface\n- Added comprehensive sketch-call-status.demo.ts with interactive controls\n- Created chat-input.ts demo fixture with message display and controls\n- Added both components to demo-runner.ts knownComponents list\n\nInteractive Demo Features:\n- Call status: Status variations, interactive LLM/tool call controls, connection toggle\n- Chat input: Message display with user/bot styling, multiple preset buttons\n- Both demos include real-time state updates and comprehensive examples\n\nDependencies:\n- Added @tailwindcss/vite package for Tailwind integration\n- Updated package.json and package-lock.json with new dependency\n\nFiles Modified:\n- sketch/webui/src/web-components/sketch-call-status.ts: Converted to SketchTailwindElement\n- sketch/webui/src/web-components/sketch-chat-input.ts: Converted to SketchTailwindElement\n- sketch/webui/src/web-components/sketch-chat-input.test.ts: Updated selectors for light DOM\n- sketch/webui/src/web-components/demo/demo-fixtures/call-status.ts: Added call status fixtures\n- sketch/webui/src/web-components/demo/demo-fixtures/index.ts: Export call status fixtures\n- sketch/webui/src/web-components/demo/sketch-call-status.demo.ts: Complete interactive demo\n- sketch/webui/src/web-components/demo/chat-input.ts: New chat input demo fixture\n- sketch/webui/src/web-components/demo/demo-framework/demo-runner.ts: Added both components\n- sketch/webui/tailwind.config.js: Added custom fade-in animation\n- sketch/webui/package.json: Added @tailwindcss/vite dependency\n\nTesting and Validation:\n- All component tests pass with updated selectors\n- Components render correctly with Tailwind classes\n- All functionality preserved including animations and interactions\n- Interactive demos load and function properly\n- Components appear in demo runner list\n\nThe conversion maintains all functionality while enabling better integration\nwith the Tailwind-based design system and providing comprehensive demo\ninfrastructure for development and testing.\n\nCo-Authored-By: sketch \u003chello@sketch.dev\u003e\nChange-ID: s97f4190763cfe17ak\n"
    },
    {
      "commit": "d5c849d0923c6b254047ebb07589adf10bc18548",
      "tree": "4c3daefe24c0c618b1499452ca1dc974311f880b",
      "parents": [
        "4b64468e6dd5d4283c90d85a483351af11933c2f"
      ],
      "author": {
        "name": "banksean",
        "email": "banksean@gmail.com",
        "time": "Thu Jun 26 15:48:31 2025 +0000"
      },
      "committer": {
        "name": "Autoformatter",
        "email": "bot@sketch.dev",
        "time": "Thu Jun 26 19:25:55 2025 +0000"
      },
      "message": "webui: convert SketchViewModeSelect to use SketchTailwindElement with Tailwind CSS\n\nReplace LitElement shadow DOM component with SketchTailwindElement base class\nto use Tailwind CSS utility classes instead of component-scoped CSS styles.\n\nAlso adds tailwind support for CSS container queries in addition to media\nqueries.\n\nCo-Authored-By: sketch \u003chello@sketch.dev\u003e\nChange-ID: s0eeb80dd54594375k\n"
    },
    {
      "commit": "bf66a2f9313894d63f204816ba90e412e02363c0",
      "tree": "22acc34aa404c3ac5add1e2de7f4df1aadce8251",
      "parents": [
        "194bfa8cc3970d28f2d072dc82142e24b7e56c9f"
      ],
      "author": {
        "name": "Sean McCullough",
        "email": "banksean@gmail.com",
        "time": "Mon Jun 23 21:53:55 2025 -0700"
      },
      "committer": {
        "name": "Autoformatter",
        "email": "bot@sketch.dev",
        "time": "Tue Jun 24 16:43:42 2025 +0000"
      },
      "message": "webui: convert sketch-app-shell to use tailwind\n\nDoing the conversion from shadowDOM to tailwind starting with the\noutermost elements in the page because shadowDOM hides dom nodes from\nancestor styles, which means tailwind styles don\u0027t apply to an element\nif its ancestors use shadowDOM.\n\n- add new SketchTailwindElement that disables shadowDOM for tailwind\n- convert sketch-app-shell to inherit from SketchTailwindElement\n- convert sketch-app-shell\u0027s CSS from shadowDOM to tailwind classes\n"
    }
  ]
}