)]}' { "log": [ { "commit": "53ab24547cd684fc38254a6bd63759d7121ca7d6", "tree": "15122689ee81490ea8d3497b6baade986c6bad2c", "parents": [ "16098932295e067fb0a6b3ca2082b0d4b06027b4" ], "author": { "name": "Philip Zeyliger", "email": "philip@bold.dev", "time": "Wed Jun 04 17:49:33 2025 +0000" }, "committer": { "name": "Autoformatter", "email": "bot@sketch.dev", "time": "Wed Jun 04 18:10:57 2025 +0000" }, "message": "webui: implement DOMPurify sanitization for markdown security\n\nImplement comprehensive HTML sanitization using DOMPurify library to\nprevent XSS vulnerabilities in markdown rendering while preserving\nfull markdown functionality.\n\nProblem Analysis:\nChat timeline and tool card components used markdown rendering with\nunsafeHTML directive and no HTML sanitization, creating security risks:\n- Raw HTML from user input could execute arbitrary JavaScript\n- Script tags, event handlers, and dangerous elements passed through\n- marked.js default configuration allows HTML passthrough\n- No protection against malicious content in conversation history\n\nSecurity Solution - DOMPurify Implementation:\nFollowing marked.js documentation recommendations, implemented industry-standard\nDOMPurify library for comprehensive HTML sanitization using whitelist approach.\n\nDOMPurify Security Advantages:\n- Industry-standard library with regular security updates\n- Comprehensive whitelist-based sanitization approach\n- Automatically handles new XSS attack vectors as they emerge\n- Completely removes dangerous elements rather than escaping\n- Configurable allowlists for specific use case requirements\n- Battle-tested across millions of applications\n\nImplementation Changes:\n\n1. Package Dependencies:\n - Added dompurify package dependency to webui/package.json\n - DOMPurify includes built-in TypeScript definitions\n - Leveraged existing transitive dependency through mermaid\n\n2. Enhanced sketch-timeline-message.ts Security:\n - Integrated DOMPurify.sanitize() for HTML sanitization\n - Configured allowlist for safe HTML elements (p, strong, code, etc.)\n - Added support for mermaid diagram elements (svg, path, etc.)\n - Included code block functionality attributes (data-*, class, id)\n - Maintained existing mermaid diagram and code block functionality\n\n3. Enhanced sketch-tool-card.ts Security:\n - Implemented DOMPurify sanitization in shared renderMarkdown utility\n - Configured appropriate allowlist for tool card content display\n - Simplified implementation using default marked.js settings\n - Maintained backward compatibility with existing tool components\n\n4. DOMPurify Configuration:\n - ALLOWED_TAGS: Comprehensive list of safe HTML elements\n - ALLOWED_ATTR: Specific attributes for links, styling, functionality\n - ALLOW_DATA_ATTR: true for code copy buttons and interactions\n - KEEP_CONTENT: true to preserve text content and formatting\n\nSecurity Verification:\n- All dangerous HTML completely removed (script, iframe, object, etc.)\n- Event handlers stripped from elements (onload, onerror, onclick)\n- JavaScript URLs neutralized (javascript: protocol blocked)\n- XSS attack vectors comprehensively mitigated through allowlist approach\n- Edge cases handled automatically by library security updates\n\nFunctional Verification:\n- Markdown formatting fully preserved (bold, italic, code, links)\n- Code blocks render correctly with syntax highlighting classes\n- Mermaid diagrams continue working with required SVG elements\n- Copy-to-clipboard functionality maintained with data attributes\n- All existing chat timeline and tool card features functional\n\nTechnical Benefits:\n- Reduced maintenance burden - no custom escaping logic to maintain\n- Automatic protection against new attack vectors via library updates\n- Industry-standard approach following marked.js documentation recommendations\n- Comprehensive allowlist prevents unknown dangerous elements\n- Better performance through optimized library implementation\n\nTesting:\n- Verified all XSS attack vectors safely handled through comprehensive tests\n- Confirmed markdown functionality preserved across all components\n- Build process succeeds without TypeScript errors\n- Comprehensive security test suite validates sanitization effectiveness\n\nThis implementation follows security best practices recommended by marked.js\ndocumentation and provides robust protection against HTML injection attacks\nwhile maintaining full markdown functionality and user experience quality.\n\nCo-Authored-By: sketch \u003chello@sketch.dev\u003e\nChange-ID: s233c12c6daac5bb0k\n" }, { "commit": "00bcaef0355aaff1daea17ac0631fd17cabb0235", "tree": "7b1c05bafa95d90c682af161579c93012ef22a16", "parents": [ "c7cdd77f99dece73f223597263f8495c15d7f35f" ], "author": { "name": "Philip Zeyliger", "email": "philip@bold.dev", "time": "Fri May 30 04:21:15 2025 +0000" }, "committer": { "name": "Autoformatter", "email": "bot@sketch.dev", "time": "Fri May 30 05:13:07 2025 +0000" }, "message": "webui: remove unused diff2html-based diff view\n\nRemove the old diff view implementation that used diff2html library\nin favor of the Monaco-based diff2 view. This cleanup removes:\n\n- sketch-diff-view.ts component that used diff2html library\n- diff2html static CSS files (diff2html.min.css, diff2.css)\n- diff2html npm package dependency from package.json\n- Old diff view mode references throughout the codebase\n- Demo files for the old diff view component\n\nChanges include:\n\n1. Removed Files:\n - webui/src/web-components/sketch-diff-view.ts\n - webui/src/diff2html.min.css\n - webui/src/diff2.css\n - webui/src/web-components/demo/sketch-diff-view.demo.html\n\n2. Updated Components:\n - sketch-app-shell.ts: Remove old diff view import, ViewMode type,\n CSS selectors, and view switching logic\n - sketch-view-mode-select.ts: Update type definitions to remove \u0027diff\u0027 mode\n - sketch-terminal.ts: Fix view mode type and correct CSS loading comments\n\n3. Package Management:\n - Removed diff2html 3.4.51 dependency from package.json\n - Updated package-lock.json to reflect removed dependency\n\n4. Demo Cleanup:\n - Removed reference to old diff view demo from index.html\n - Updated timeline demo to remove diff2html from dependencies list\n\nThe Monaco-based diff2 view (sketch-diff2-view.ts) remains fully\nfunctional and is now the only diff view implementation. All file\npicker, range picker, and empty view components continue to work\nwith the new diff view.\n\nTesting confirms the diff functionality works correctly after cleanup.\n\nCo-Authored-By: sketch \u003chello@sketch.dev\u003e\nChange-ID: s22dd1dc722d02125k\n" }, { "commit": "272a90ee1a74bda5618d4866e03f4b7067947784", "tree": "9baf4f84ce80b1c7073a95b6959f6dd11ab3b48b", "parents": [ "d3ac112a45111abf0e57c327d55e2cc66a136abb" ], "author": { "name": "Philip Zeyliger", "email": "philip@bold.dev", "time": "Fri May 16 14:49:51 2025 -0700" }, "committer": { "name": "Philip Zeyliger", "email": "philip@bold.dev", "time": "Fri May 16 14:51:40 2025 -0700" }, "message": "Add Monaco diff-view, the saga ...\n\nI set out to use Monaco to support the diff view. diff2html is lovely,\nbut there were a ton of usability improvements I wanted to make (line\nnumbers not making things double spaced, choosing which diff, editing\nthe right-hand side), and it seemed a dead end. Furthermore, Phabricator\nand Gerrit\u0027s experience is that diffs should be shown file by file,\nbecause you\u0027ll inevitably see a diff with a file that\u0027s too large, and\nthe GitHub PR view often breaks on big changes... so I wanted to show\nfiles diff-by-diff, with \"infinite\" context when unchanged sections are\nexpanded. So...\n\nUltimately, all of this was sketch-coded over maybe 30 Sketch sessions.\nI threw away a lot of branches. My git reflog is a superfund site.\n\nPrompting whole-hog didn\u0027t work. Or, rather, it made significant\nprogress, but something very serious wouldn\u0027t work, and I couldn\u0027t\nfigure out what, and nor could Sketch.\n\nInstead, I started by adding a new webcomponent that was just a\nplaceholder. Then, using https://rodydavis.com/posts/lit-monaco-editor,\nI nudged Sketch into adding Monaco to it. Sketch pulled out:\n\n You\u0027re right, I should properly read the blog post before implementing the\n solution. Let me check the referenced blog post.\n\nI worked heavily in the demo environment at first, but here I ran into\nthe issue that we have two different esbuild systems: one is vite and\none is esbuild.go, and they\u0027re configured differently enough.\n\nMonaco is unusable and confusingly so when its CSS isn\u0027t loaded. The right\nway to load it, I\u0027ve found, is via\n\n @import url(\u0027./static/monaco/min/vs/editor/editor.main.css\u0027);\n\nI spent more time than I care to admit noticing that originally\nthis wasn\u0027t relative, and when we use a skaband setting, the\npaths need to be relative-aware.\n\nThe paths to the various workers need to be similarly correctly placed.\n\nGetting Sketch to build demo data but not put testing code into production\ncode was tricky. (I threw away a lot of efforts and factories and singletons...)\n\nWhen I set out to do the git commit selection, I wanted to do a bunch of\nbackend /git/* handlers. These were easy enough to code in sketch. I had\nto convince Sketch to put them in git_tools.go and not in the agent.\nIt doesn\u0027t really matter: these functions to parse git are pretty stateless,\nbut it\u0027s less work to have them separate. Sketch was mediocre at writing\ntests for them. Did you know that our container has an older version\nof git that doesn\u0027t have the same options to decorate ref names? Yeah, nor did\nI.\n\nHandling unstaged changes was fun. git diff --raw shows unstaged files\nas having identity 0000. Ideally we\u0027d be using jj and there\u0027d be\na synthetic commit, but instead uncommitted-possible files are read\nby content.\n\nA real big challenge was getting the Monaco view to use the right vertical and\nhorizontal space. I did this many, many times. I don\u0027t claim to understand flex\nand the virtual dom, and :host, and all the interactions. It would fix one\nthing and break another. The chat window would shrink. The terminal would\nshrink.\n\nScreenshot support was excellent. I eventually added paste support just so\nthat I could expedite my workflow, and Sketch coded that easily on the first\npass with minor feedback.\n\nI learned the hard way that Safari\u0027s support for WebComponents/shadow\ndom in its web inspector is rough. See https://fediverse.zachleat.com/@zachleat/114518629612122858\n\nI also learned the hard way that Chrome doesn\u0027t use fonts loaded in CSS\nin a shadow dom. That\u0027s why the codicon font had to be in the global\nstyle sheet.\n\nKudos to John Reese who kindly allowed me, a long time ago, to adapt a\nshell script he had at work to look over diffs into https://github.com/philz/git-vimdiff.\nThat\u0027s the inspiration for having the \"new code\" be editable when you\u0027re\nreviewing it; why shouldn\u0027t it be!?!\n\nThere are a handful of follow up tasks:\n\n* We lose state when we switch to the Chat view and back.\n* Need URL-based support for where we are.\n* Maybe need shortcut keys to move between diffs and changes.\n* Maybe need caching or look-ahead for downloading the next or previous\n file.\n* We spend too much vertical real estate on all the diff selections;\n could we scroll it out of the way, collapse it, tighten it, etc.\n* The workers sometimes throw errors into the console. I think they\u0027re\n harmless and merely need to be caught and suppressed.\n* Needing to commit changes when things are saved is weird. Should we\n commit automatically? Amend the previous commit? Have a button for\n that? Show the git dirty state?\n* Our JS bundle is big. We could maybe delay loading the monaco bundle\n to help.\n\nThanks for coming to my TED talk.\n" }, { "commit": "3a89ba89acee96cd963a0e64d812f4ba7943d6d6", "tree": "9139f02cd222fcdfc7d3d4a2d2820a8198a7a754", "parents": [ "d01f67c2669a8b408c382e40465c152855e89125" ], "author": { "name": "dependabot[bot]", "email": "49699333+dependabot[bot]@users.noreply.github.com", "time": "Wed Apr 30 17:52:29 2025 +0000" }, "committer": { "name": "Philip Zeyliger", "email": "philip@bold.dev", "time": "Wed Apr 30 11:10:03 2025 -0700" }, "message": "build(deps-dev): bump vite from 6.3.2 to 6.3.4 in /webui\n\nBumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) from 6.3.2 to 6.3.4.\n- [Release notes](https://github.com/vitejs/vite/releases)\n- [Changelog](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md)\n- [Commits](https://github.com/vitejs/vite/commits/v6.3.4/packages/vite)\n\n---\nupdated-dependencies:\n- dependency-name: vite\n dependency-version: 6.3.4\n dependency-type: direct:development\n...\n\nSigned-off-by: dependabot[bot] \u003csupport@github.com\u003e" }, { "commit": "8d93e3679e088af8086fd1c9f4d33de2e85608c2", "tree": "fe40a5fc3fdf341da5eb4f40954b7a941df284be", "parents": [ "d8adbbaf6970b8d9c40cdf9795476d2850096b18" ], "author": { "name": "Sean McCullough", "email": "banksean@gmail.com", "time": "Sun Apr 27 23:32:18 2025 +0000" }, "committer": { "name": "Sean McCullough", "email": "banksean@gmail.com", "time": "Sun Apr 27 17:25:09 2025 -0700" }, "message": "webui: Add Mermaid diagram support to markdown\n\n* Installed mermaid library\n* Extended markdown renderer to support mermaid code blocks\n* Added CSS styling for mermaid diagrams\n* Added a demo page for testing mermaid diagrams\n\nCo-Authored-By: sketch \u003chello@sketch.dev\u003e\n" }, { "commit": "8cac59aedb3ae4f45464ce3cd4eed36d6834dc7b", "tree": "2ffecc10a275f859c354c234d08e9b763376a4ff", "parents": [ "bbca240367c3df26870ffe0fcc41c0c004679736" ], "author": { "name": "Pokey Rule", "email": "755842+pokey@users.noreply.github.com", "time": "Thu Apr 24 12:21:19 2025 +0100" }, "committer": { "name": "Pokey Rule", "email": "755842+pokey@users.noreply.github.com", "time": "Thu Apr 24 12:21:19 2025 +0100" }, "message": "feat: integrate Mock Service Worker (MSW) for API mocking and testing\n\nCurrently just used for demo page\n\n- Added MSW as a dependency in package.json.\n- Configured MSW in the demo HTML to start the worker and handle API requests.\n- Created mockServiceWorker.js to manage service worker lifecycle and request handling.\n- Implemented browser.ts to set up the MSW worker with defined request handlers.\n- Developed handlers.ts to simulate API responses and manage application state for testing.\n" }, { "commit": "2032b1c1971ceb85ca14b20273a3783729fba3e3", "tree": "0486e9222643ffcbbd34286148f4a7913a169668", "parents": [ "4f50a68ac73677c0022b2b3da8b4667cee01c11b" ], "author": { "name": "Philip Zeyliger", "email": "philip.zeyliger@gmail.com", "time": "Wed Apr 23 19:40:42 2025 -0700" }, "committer": { "name": "Philip Zeyliger", "email": "philip.zeyliger@gmail.com", "time": "Wed Apr 23 19:40:42 2025 -0700" }, "message": "Move webui from /loop/webui to /webui\n\nThanks, perl (and git mv):\n\n\tperl -pi -e s,loop/webui,webui,g $(git grep -l loop/webui)\n" }, { "commit": "e2a8c2f1fae1f8e3162b2533d27825e1bf800574", "tree": "4dcdd7de679c90a4d3ec79b47111ce5e67fd07b2", "parents": [ "d140295fa7d794f5b30feb4eee2f45f9cc9ff383" ], "author": { "name": "Pokey Rule", "email": "755842+pokey@users.noreply.github.com", "time": "Wed Apr 23 15:09:25 2025 +0100" }, "committer": { "name": "Pokey Rule", "email": "755842+pokey@users.noreply.github.com", "time": "Wed Apr 23 15:09:49 2025 +0100" }, "message": "webui: Improve dx\n\nFor local development, switch to Vite and update web components for improved demo experience. Note that we haven\u0027t changed how we bundle when we\u0027re actually running in sketch; that\u0027s still the go/esbuild in-memory setup. This just changes demo dev setup to get breakpoints working and a functioning full sketch-app-shell.\n\nWe still need to add some mock data, but this is a start\n\n- Introduced `vite.config.mts` for Vite setup with hot module reloading.\n- Updated `package.json` and `package-lock.json` to include Vite and related plugins.\n- Refactored demo scripts to utilize Vite for local development.\n- Created `launch.json` for VSCode debugging configuration.\n- Enhanced `Makefile` with a new demo task.\n- Improved styling and structure in demo HTML and CSS files.\n- Implemented `aggregateAgentMessages` function for message handling in web components.\n" }, { "commit": "2c5bba48c23d379fa9a77d06b77093849af87a9d", "tree": "66ec4140ecac50d81f8e521204e315183ec83f35", "parents": [ "43664f62866c05a5d7d6b324904f75995d37bba7" ], "author": { "name": "Sean McCullough", "email": "banksean@gmail.com", "time": "Sun Apr 20 19:33:17 2025 -0700" }, "committer": { "name": "Sean McCullough", "email": "banksean@gmail.com", "time": "Sun Apr 20 19:45:01 2025 -0700" }, "message": "webui: mv scroll behavior to sketch-timeline\n\nMoves the automatic scrolling behavior from sketch-app-shell into\nsketch-timeline, where it makes more sense.\n\nThis change also makes automatic scrolling conditional on\nan internal \"scrollingState\", which we update whenever you\nmanually scroll to, or away from the bottom of the timeline.\n\nIf you scroll to the bottom of the timeline, then it\u0027s \"sticky\"\nand newly arriving messages will keep scrolling you to the bottom\nas they render.\n\nIf you scroll up to older messages though, then we stop automatically\nscrolling you to the latest messages at the bottom of the timeline.\n\nWhen the timeline is in this latter \"floating\" scrollingState, we\nalso render a floating down-arrow button over the lower right corner\nof the timeline. Clicking on this will take you down to the latest\nmessage at the end of the timeline.\n" }, { "commit": "b29f8911e4c0d99d6c32866d7174a51b6730e9d8", "tree": "34e445527e949fb27970d4264db8a776323be485", "parents": [ "ec3ad1a7798b0dc1d17d363c91680b7828d7fce2" ], "author": { "name": "Sean McCullough", "email": "banksean@gmail.com", "time": "Sun Apr 20 15:39:11 2025 -0700" }, "committer": { "name": "Sean McCullough", "email": "banksean@gmail.com", "time": "Sun Apr 20 15:53:30 2025 -0700" }, "message": "webui: Migrate from @open-wc/testing to Playwright\n" }, { "commit": "71941bdfa1156b748072e2dfe61c714d3ed02913", "tree": "28eeb5cb68bef3e0eb5b6a5ec63d17f4150e4fbb", "parents": [ "9abbf92a1c58300005971d7f89b301620d59e883" ], "author": { "name": "Sean McCullough", "email": "banksean@gmail.com", "time": "Fri Apr 18 13:31:48 2025 -0700" }, "committer": { "name": "Sean McCullough", "email": "banksean@gmail.com", "time": "Fri Apr 18 14:01:53 2025 -0700" }, "message": "loop/webui: add prettier\n" }, { "commit": "86b56862f8d3e192646a17548ef5294582c31f8f", "tree": "d0235f3f56695de8e6281ba3f57a663847204f33", "parents": [ "f5bb3d3f1aa33e2a066c4139675f096f73c1f9d4" ], "author": { "name": "Sean McCullough", "email": "banksean@gmail.com", "time": "Fri Apr 18 13:04:03 2025 -0700" }, "committer": { "name": "GitHub", "email": "noreply@github.com", "time": "Fri Apr 18 13:04:03 2025 -0700" }, "message": "loop/webui: swtich to web components impl (#1)\n\n* loop/webui: swtich to web components impl\n\nThis change reorganizes the original vibe-coded\nfrontend code into a structure that\u0027s much\neasier for a human to read and reason about,\nwhile retaining the user-visible functionality\nof its vibe-coded predecessor. Perhaps most\nimportantly, this change makes the code testable.\n\nSome other notable details:\n\nThis does not use any of the popular large web\nframeworks, but instead follows more of an\n\"a la carte\" approach: leverage features\nthat already exist in modern web browsers,\nlike custom elements and shadow DOM.\n\nTemplating and basic component lifecycle\nmanagement are provided by lit.\n\nState management is nothing fancy. It\ndoesn\u0027t use any library or framework, just\na basic \"Events up, properties down\"\napproach.\n\n* fix bad esbuild.go merge\n\n* loop/webui: don\u0027t bundle src/web-components/demo\n\n* loop/webui: don\u0027t \u0027npm ci\u0027 dev deps in the container\n\n* rebase to main, undo README.md changes, add webuil.Build() call to LaunchContainer()" }, { "commit": "2e463fb649fcff14d4025ddb91f630a98e7da526", "tree": "0e86854d80d2759a913870655f13226c31f9d30c", "parents": [], "author": { "name": "Earl Lee", "email": "earl.lee@sketch.dev", "time": "Thu Apr 17 11:22:22 2025 -0700" }, "committer": { "name": "Earl Lee", "email": "earl.lee@sketch.dev", "time": "Thu Apr 17 11:35:33 2025 -0700" }, "message": "Initial commit\n" } ] }