)]}' { "commit": "618bfb28892561a8ef2e3d6163de4fd6c990beda", "tree": "c1ef367f8a4ecea00f237bc084f1ecbd15773764", "parents": [ "8b2bc8eacb6ca23c1dbfda31eb9f3651eb756820" ], "author": { "name": "Sean McCullough", "email": "banksean@gmail.com", "time": "Wed Jun 25 20:52:30 2025 +0000" }, "committer": { "name": "Autoformatter", "email": "bot@sketch.dev", "time": "Wed Jun 25 22:24:00 2025 +0000" }, "message": "webui: implement modular demo system with TypeScript and shared fixtures\n\nReplace hand-written HTML demo pages with TypeScript demo modules and\nautomated infrastructure to reduce maintenance overhead and improve\ndeveloper experience with type safety and shared code.\n\nProblems Solved:\n\nDemo Maintenance Overhead:\n- Hand-written HTML demo pages contained extensive boilerplate duplication\n- No type checking for demo setup code or component data\n- Manual maintenance of demo/index.html with available demos\n- Difficult to share common fake data between demo pages\n- No hot module replacement for demo development\n\nCode Quality and Consistency:\n- Demo setup code written in plain JavaScript without type safety\n- No validation that demo data matches component interfaces\n- Inconsistent styling and structure across demo pages\n- Duplicated fake data declarations in each demo file\n\nSolution Architecture:\n\nTypeScript Demo Module System:\n- Created DemoModule interface for standardized demo structure\n- Demo modules export title, description, imports, and setup functions\n- Full TypeScript compilation with type checking for demo code\n- Dynamic import system for on-demand demo loading with Vite integration\n\nShared Demo Infrastructure:\n- demo-framework/ with types.ts and demo-runner.ts for core functionality\n- DemoRunner class handles dynamic loading, cleanup, and error handling\n- Single demo-runner.html page loads any demo module dynamically\n- Supports URL hash routing for direct demo links\n\nCentralized Fake Data:\n- demo-fixtures/ directory with shared TypeScript data files\n- sampleToolCalls, sampleTimelineMessages, and sampleContainerState\n- Type-safe imports ensure demo data matches component interfaces\n- demoUtils with helper functions for consistent demo UI creation\n\nAuto-generated Index Page:\n- generate-index.ts scans for *.demo.ts files and extracts metadata\n- Creates index-generated.html with links to all available demos\n- Automatically includes demo titles and descriptions\n- Eliminates manual maintenance of demo listing\n\nImplementation Details:\n\nDemo Framework:\n- DemoRunner.loadDemo() uses dynamic imports with Vite ignore comments\n- Automatic component import based on demo module configuration\n- Support for demo-specific CSS and cleanup functions\n- Error handling with detailed error display for debugging\n\nDemo Module Structure:\n- sketch-chat-input.demo.ts: Interactive chat with message history\n- sketch-container-status.demo.ts: Status variations with real-time updates\n- sketch-tool-calls.demo.ts: Multiple tool call examples with progressive loading\n- All use shared fixtures and utilities for consistent experience\n\nVite Integration:\n- Hot Module Replacement works for demo modules and shared fixtures\n- TypeScript compilation on-the-fly for immediate feedback\n- Dynamic imports work seamlessly with Vite\u0027s module system\n- @vite-ignore comments prevent import analysis warnings\n\nTesting and Validation:\n- Tested demo runner loads and displays available components\n- Verified component discovery and dynamic import functionality\n- Confirmed shared fixture imports work correctly\n- Validated auto-generated index creation and content\n\nFiles Modified:\n- demo-framework/types.ts: TypeScript interfaces for demo system\n- demo-framework/demo-runner.ts: Core demo loading and execution logic\n- demo-fixtures/: Shared fake data (tool-calls.ts, timeline-messages.ts, container-status.ts, index.ts)\n- demo-runner.html: Interactive demo browser with sidebar navigation\n- generate-index.ts: Auto-generation script for demo index\n- sketch-chat-input.demo.ts: Converted chat input demo to TypeScript\n- sketch-container-status.demo.ts: Container status demo with variations\n- sketch-tool-calls.demo.ts: Tool calls demo with interactive examples\n- readme.md: Comprehensive documentation for new demo system\n\nBenefits:\n- Developers get full TypeScript type checking for demo code\n- Shared fake data ensures consistency and reduces duplication\n- Hot module replacement provides instant feedback during development\n- Auto-generated index eliminates manual maintenance\n- Modular architecture makes it easy to add new demos\n- Vite integration provides fast development iteration\n\nThe new system reduces demo maintenance overhead while providing\nbetter developer experience through TypeScript, shared code, and\nautomated infrastructure.\n\nCo-Authored-By: sketch \u003chello@sketch.dev\u003e\nChange-ID: s3d91894eb7c4a79fk\n", "tree_diff": [ { "type": "modify", "old_id": "21b15b4afd5df9f5ad3a4619bda127e9ad57c60d", "old_mode": 33188, "old_path": "webui/package-lock.json", "new_id": "28616e5b9d02dd11e340d11cd6edecf87b7d069b", "new_mode": 33188, "new_path": "webui/package-lock.json" }, { "type": "modify", "old_id": "8e97fb74e3ea318480a56f6892f0499f14d586a2", "old_mode": 33188, "old_path": "webui/package.json", "new_id": "91a1f773585e9b6cace4827c2995a7363cf3fa39", "new_mode": 33188, "new_path": "webui/package.json" }, { "type": "add", "old_id": "0000000000000000000000000000000000000000", "old_mode": 0, "old_path": "/dev/null", "new_id": "14c4964a954271b92623b915c806fe790b60444c", "new_mode": 33188, "new_path": "webui/src/web-components/demo/demo-fixtures/container-status.ts" }, { "type": "add", "old_id": "0000000000000000000000000000000000000000", "old_mode": 0, "old_path": "/dev/null", "new_id": "9a47f8e1136415dc83e6f32cdd483e592adf9078", "new_mode": 33188, "new_path": "webui/src/web-components/demo/demo-fixtures/index.ts" }, { "type": "add", "old_id": "0000000000000000000000000000000000000000", "old_mode": 0, "old_path": "/dev/null", "new_id": "a98c7281acfb67635c0d2930d4e81000d93b91ee", "new_mode": 33188, "new_path": "webui/src/web-components/demo/demo-fixtures/timeline-messages.ts" }, { "type": "add", "old_id": "0000000000000000000000000000000000000000", "old_mode": 0, "old_path": "/dev/null", "new_id": "eaa50090ab63a973bb327816e3cbdaf25ad8427a", "new_mode": 33188, "new_path": "webui/src/web-components/demo/demo-fixtures/tool-calls.ts" }, { "type": "add", "old_id": "0000000000000000000000000000000000000000", "old_mode": 0, "old_path": "/dev/null", "new_id": "53f9fba87ba253565aa3c6d01d930fb0f1721f16", "new_mode": 33188, "new_path": "webui/src/web-components/demo/demo-framework/demo-runner.ts" }, { "type": "add", "old_id": "0000000000000000000000000000000000000000", "old_mode": 0, "old_path": "/dev/null", "new_id": "88b1fc5d7b5356d7aef82567424037c0ab671974", "new_mode": 33188, "new_path": "webui/src/web-components/demo/demo-framework/types.ts" }, { "type": "add", "old_id": "0000000000000000000000000000000000000000", "old_mode": 0, "old_path": "/dev/null", "new_id": "94af314212747ba9cee6ee3f936653784f8defc4", "new_mode": 33188, "new_path": "webui/src/web-components/demo/demo-runner.html" }, { "type": "add", "old_id": "0000000000000000000000000000000000000000", "old_mode": 0, "old_path": "/dev/null", "new_id": "015ef88ff67494e5b867fdc9f9005016d5b492a4", "new_mode": 33188, "new_path": "webui/src/web-components/demo/generate-index.ts" }, { "type": "add", "old_id": "0000000000000000000000000000000000000000", "old_mode": 0, "old_path": "/dev/null", "new_id": "7460e787d0c9eb1b5f5c4953bfe8434708a52cb3", "new_mode": 33188, "new_path": "webui/src/web-components/demo/index-generated.html" }, { "type": "modify", "old_id": "324d0772a49c9e7607a97803698dc356c16ef1e2", "old_mode": 33188, "old_path": "webui/src/web-components/demo/readme.md", "new_id": "686eb63c44f62d0610c4003fe92b56fdaf07e4f7", "new_mode": 33188, "new_path": "webui/src/web-components/demo/readme.md" }, { "type": "modify", "old_id": "51c356493f6852bdf5ba34b13f5ec71b6896aaaa", "old_mode": 33188, "old_path": "webui/src/web-components/demo/sketch-app-shell.demo.html", "new_id": "651c46a0468c939c527736c9186f31937525205b", "new_mode": 33188, "new_path": "webui/src/web-components/demo/sketch-app-shell.demo.html" }, { "type": "add", "old_id": "0000000000000000000000000000000000000000", "old_mode": 0, "old_path": "/dev/null", "new_id": "f18c0b9e294d61c9dfbf9c966c81fd968cf51a57", "new_mode": 33188, "new_path": "webui/src/web-components/demo/sketch-chat-input.demo.ts" }, { "type": "modify", "old_id": "3b5725b132c8185826e05516041a21b9dabec12b", "old_mode": 33188, "old_path": "webui/src/web-components/demo/sketch-container-status.demo.html", "new_id": "a48584db0ca6f4feccc443ad01f999ed56314dc5", "new_mode": 33188, "new_path": "webui/src/web-components/demo/sketch-container-status.demo.html" }, { "type": "add", "old_id": "0000000000000000000000000000000000000000", "old_mode": 0, "old_path": "/dev/null", "new_id": "20d6a470c70d213781cf5aa5673b5c0bd46f8d8b", "new_mode": 33188, "new_path": "webui/src/web-components/demo/sketch-container-status.demo.ts" }, { "type": "add", "old_id": "0000000000000000000000000000000000000000", "old_mode": 0, "old_path": "/dev/null", "new_id": "f2796574c3225b70adf33eff194a0d1bae6ae4f8", "new_mode": 33188, "new_path": "webui/src/web-components/demo/sketch-tool-calls.demo.ts" }, { "type": "modify", "old_id": "73455148987130f2271b632851333e41d1ffdf2d", "old_mode": 33188, "old_path": "webui/vite.config.mts", "new_id": "9fc8e3a1d578f33b9162742534f315a782594ff3", "new_mode": 33188, "new_path": "webui/vite.config.mts" } ] }