webui: Improve dx
For local development, switch to Vite and update web components for improved demo experience. Note that we haven't changed how we bundle when we're actually running in sketch; that's still the go/esbuild in-memory setup. This just changes demo dev setup to get breakpoints working and a functioning full sketch-app-shell.
We still need to add some mock data, but this is a start
- Introduced `vite.config.mts` for Vite setup with hot module reloading.
- Updated `package.json` and `package-lock.json` to include Vite and related plugins.
- Refactored demo scripts to utilize Vite for local development.
- Created `launch.json` for VSCode debugging configuration.
- Enhanced `Makefile` with a new demo task.
- Improved styling and structure in demo HTML and CSS files.
- Implemented `aggregateAgentMessages` function for message handling in web components.
diff --git a/loop/webui/src/web-components/sketch-timeline.ts b/loop/webui/src/web-components/sketch-timeline.ts
index b630679..1e63f32 100644
--- a/loop/webui/src/web-components/sketch-timeline.ts
+++ b/loop/webui/src/web-components/sketch-timeline.ts
@@ -7,15 +7,15 @@
@customElement("sketch-timeline")
export class SketchTimeline extends LitElement {
- @property()
+ @property({ attribute: false })
messages: AgentMessage[] = [];
// Track if we should scroll to the bottom
@state()
private scrollingState: "pinToLatest" | "floating" = "pinToLatest";
- @property()
- scrollContainer: HTMLDivElement;
+ @property({ attribute: false })
+ scrollContainer: HTMLElement;
static styles = css`
/* Hide views initially to prevent flash of content */
@@ -142,7 +142,7 @@
Math.abs(
this.scrollContainer.scrollHeight -
this.scrollContainer.clientHeight -
- this.scrollContainer.scrollTop,
+ this.scrollContainer.scrollTop
) <= 1;
if (isAtBottom) {
this.scrollingState = "pinToLatest";
@@ -159,7 +159,7 @@
// Listen for showCommitDiff events from the renderer
document.addEventListener(
"showCommitDiff",
- this._handleShowCommitDiff as EventListener,
+ this._handleShowCommitDiff as EventListener
);
this.scrollContainer?.addEventListener("scroll", this._handleScroll);
}
@@ -171,7 +171,7 @@
// Remove event listeners
document.removeEventListener(
"showCommitDiff",
- this._handleShowCommitDiff as EventListener,
+ this._handleShowCommitDiff as EventListener
);
this.scrollContainer?.removeEventListener("scroll", this._handleScroll);