Move webui from /loop/webui to /webui
Thanks, perl (and git mv):
perl -pi -e s,loop/webui,webui,g $(git grep -l loop/webui)
diff --git a/webui/src/data.ts b/webui/src/data.ts
new file mode 100644
index 0000000..9b5aca9
--- /dev/null
+++ b/webui/src/data.ts
@@ -0,0 +1,400 @@
+import { AgentMessage } from "./types";
+import { formatNumber } from "./utils";
+
+/**
+ * Event types for data manager
+ */
+export type DataManagerEventType = "dataChanged" | "connectionStatusChanged";
+
+/**
+ * Connection status types
+ */
+export type ConnectionStatus = "connected" | "disconnected" | "disabled";
+
+/**
+ * State interface
+ */
+export interface TimelineState {
+ hostname?: string;
+ working_dir?: string;
+ initial_commit?: string;
+ message_count?: number;
+ title?: string;
+ total_usage?: {
+ input_tokens: number;
+ output_tokens: number;
+ cache_read_input_tokens: number;
+ cache_creation_input_tokens: number;
+ total_cost_usd: number;
+ };
+}
+
+/**
+ * DataManager - Class to manage timeline data, fetching, and polling
+ */
+export class DataManager {
+ // State variables
+ private lastMessageCount: number = 0;
+ private nextFetchIndex: number = 0;
+ private currentFetchStartIndex: number = 0;
+ private currentPollController: AbortController | null = null;
+ private isFetchingMessages: boolean = false;
+ private isPollingEnabled: boolean = true;
+ private isFirstLoad: boolean = true;
+ private connectionStatus: ConnectionStatus = "disabled";
+ private messages: AgentMessage[] = [];
+ private timelineState: TimelineState | null = null;
+
+ // Event listeners
+ private eventListeners: Map<
+ DataManagerEventType,
+ Array<(...args: any[]) => void>
+ > = new Map();
+
+ constructor() {
+ // Initialize empty arrays for each event type
+ this.eventListeners.set("dataChanged", []);
+ this.eventListeners.set("connectionStatusChanged", []);
+ }
+
+ /**
+ * Initialize the data manager and fetch initial data
+ */
+ public async initialize(): Promise<void> {
+ try {
+ // Initial data fetch
+ await this.fetchData();
+ // Start polling for updates only if initial fetch succeeds
+ this.startPolling();
+ } catch (error) {
+ console.error("Initial data fetch failed, will retry via polling", error);
+ // Still start polling to recover
+ this.startPolling();
+ }
+ }
+
+ /**
+ * Get all messages
+ */
+ public getMessages(): AgentMessage[] {
+ return this.messages;
+ }
+
+ /**
+ * Get the current state
+ */
+ public getState(): TimelineState | null {
+ return this.timelineState;
+ }
+
+ /**
+ * Get the connection status
+ */
+ public getConnectionStatus(): ConnectionStatus {
+ return this.connectionStatus;
+ }
+
+ /**
+ * Get the isFirstLoad flag
+ */
+ public getIsFirstLoad(): boolean {
+ return this.isFirstLoad;
+ }
+
+ /**
+ * Get the currentFetchStartIndex
+ */
+ public getCurrentFetchStartIndex(): number {
+ return this.currentFetchStartIndex;
+ }
+
+ /**
+ * Add an event listener
+ */
+ public addEventListener(
+ event: DataManagerEventType,
+ callback: (...args: any[]) => void,
+ ): void {
+ const listeners = this.eventListeners.get(event) || [];
+ listeners.push(callback);
+ this.eventListeners.set(event, listeners);
+ }
+
+ /**
+ * Remove an event listener
+ */
+ public removeEventListener(
+ event: DataManagerEventType,
+ callback: (...args: any[]) => void,
+ ): void {
+ const listeners = this.eventListeners.get(event) || [];
+ const index = listeners.indexOf(callback);
+ if (index !== -1) {
+ listeners.splice(index, 1);
+ this.eventListeners.set(event, listeners);
+ }
+ }
+
+ /**
+ * Emit an event
+ */
+ private emitEvent(event: DataManagerEventType, ...args: any[]): void {
+ const listeners = this.eventListeners.get(event) || [];
+ listeners.forEach((callback) => callback(...args));
+ }
+
+ /**
+ * Set polling enabled/disabled state
+ */
+ public setPollingEnabled(enabled: boolean): void {
+ this.isPollingEnabled = enabled;
+
+ if (enabled) {
+ this.startPolling();
+ } else {
+ this.stopPolling();
+ }
+ }
+
+ /**
+ * Start polling for updates
+ */
+ public startPolling(): void {
+ this.stopPolling(); // Stop any existing polling
+
+ // Start long polling
+ this.longPoll();
+ }
+
+ /**
+ * Stop polling for updates
+ */
+ public stopPolling(): void {
+ // Abort any ongoing long poll request
+ if (this.currentPollController) {
+ this.currentPollController.abort();
+ this.currentPollController = null;
+ }
+
+ // If polling is disabled by user, set connection status to disabled
+ if (!this.isPollingEnabled) {
+ this.updateConnectionStatus("disabled");
+ }
+ }
+
+ /**
+ * Update the connection status
+ */
+ private updateConnectionStatus(status: ConnectionStatus): void {
+ if (this.connectionStatus !== status) {
+ this.connectionStatus = status;
+ this.emitEvent("connectionStatusChanged", status);
+ }
+ }
+
+ /**
+ * Long poll for updates
+ */
+ private async longPoll(): Promise<void> {
+ // Abort any existing poll request
+ if (this.currentPollController) {
+ this.currentPollController.abort();
+ this.currentPollController = null;
+ }
+
+ // If polling is disabled, don't start a new poll
+ if (!this.isPollingEnabled) {
+ return;
+ }
+
+ let timeoutId: number | undefined;
+
+ try {
+ // Create a new abort controller for this request
+ this.currentPollController = new AbortController();
+ const signal = this.currentPollController.signal;
+
+ // Get the URL with the current message count
+ const pollUrl = `state?poll=true&seen=${this.lastMessageCount}`;
+
+ // Make the long poll request
+ // Use explicit timeout to handle stalled connections (120s)
+ const controller = new AbortController();
+ timeoutId = window.setTimeout(() => controller.abort(), 120000);
+
+ interface CustomFetchOptions extends RequestInit {
+ [Symbol.toStringTag]?: unknown;
+ }
+
+ const fetchOptions: CustomFetchOptions = {
+ signal: controller.signal,
+ // Use the original signal to allow manual cancellation too
+ get [Symbol.toStringTag]() {
+ if (signal.aborted) controller.abort();
+ return "";
+ },
+ };
+
+ try {
+ const response = await fetch(pollUrl, fetchOptions);
+ // Clear the timeout since we got a response
+ clearTimeout(timeoutId);
+
+ // Parse the JSON response
+ const _data = await response.json();
+
+ // If we got here, data has changed, so fetch the latest data
+ await this.fetchData();
+
+ // Start a new long poll (if polling is still enabled)
+ if (this.isPollingEnabled) {
+ this.longPoll();
+ }
+ } catch (error) {
+ // Handle fetch errors inside the inner try block
+ clearTimeout(timeoutId);
+ throw error; // Re-throw to be caught by the outer catch block
+ }
+ } catch (error: unknown) {
+ // Clean up timeout if we're handling an error
+ if (timeoutId) clearTimeout(timeoutId);
+
+ // Don't log or treat manual cancellations as errors
+ const isErrorWithName = (
+ err: unknown,
+ ): err is { name: string; message?: string } =>
+ typeof err === "object" && err !== null && "name" in err;
+
+ if (
+ isErrorWithName(error) &&
+ error.name === "AbortError" &&
+ this.currentPollController?.signal.aborted
+ ) {
+ console.log("Polling cancelled by user");
+ return;
+ }
+
+ // Handle different types of errors with specific messages
+ let errorMessage = "Not connected";
+
+ if (isErrorWithName(error)) {
+ if (error.name === "AbortError") {
+ // This was our timeout abort
+ errorMessage = "Connection timeout - not connected";
+ console.error("Long polling timeout");
+ } else if (error.name === "SyntaxError") {
+ // JSON parsing error
+ errorMessage = "Invalid response from server - not connected";
+ console.error("JSON parsing error:", error);
+ } else if (
+ error.name === "TypeError" &&
+ error.message?.includes("NetworkError")
+ ) {
+ // Network connectivity issues
+ errorMessage = "Network connection lost - not connected";
+ console.error("Network error during polling:", error);
+ } else {
+ // Generic error
+ console.error("Long polling error:", error);
+ }
+ }
+
+ // Disable polling on error
+ this.isPollingEnabled = false;
+
+ // Update connection status to disconnected
+ this.updateConnectionStatus("disconnected");
+
+ // Emit an event that we're disconnected with the error message
+ this.emitEvent(
+ "connectionStatusChanged",
+ this.connectionStatus,
+ errorMessage,
+ );
+ }
+ }
+
+ /**
+ * Fetch timeline data
+ */
+ public async fetchData(): Promise<void> {
+ // If we're already fetching messages, don't start another fetch
+ if (this.isFetchingMessages) {
+ console.log("Already fetching messages, skipping request");
+ return;
+ }
+
+ this.isFetchingMessages = true;
+
+ try {
+ // Fetch state first
+ const stateResponse = await fetch("state");
+ const state = await stateResponse.json();
+ this.timelineState = state;
+
+ // Check if new messages are available
+ if (
+ state.message_count === this.lastMessageCount &&
+ this.lastMessageCount > 0
+ ) {
+ // No new messages, early return
+ this.isFetchingMessages = false;
+ this.emitEvent("dataChanged", { state, newMessages: [] });
+ return;
+ }
+
+ // Fetch messages with a start parameter
+ this.currentFetchStartIndex = this.nextFetchIndex;
+ const messagesResponse = await fetch(
+ `messages?start=${this.nextFetchIndex}`,
+ );
+ const newMessages = (await messagesResponse.json()) || [];
+
+ // Store messages in our array
+ if (this.nextFetchIndex === 0) {
+ // If this is the first fetch, replace the entire array
+ this.messages = [...newMessages];
+ } else {
+ // Otherwise append the new messages
+ this.messages = [...this.messages, ...newMessages];
+ }
+
+ // Update connection status to connected
+ this.updateConnectionStatus("connected");
+
+ // Update the last message index for next fetch
+ if (newMessages && newMessages.length > 0) {
+ this.nextFetchIndex += newMessages.length;
+ }
+
+ // Update the message count
+ this.lastMessageCount = state?.message_count ?? 0;
+
+ // Mark that we've completed first load
+ if (this.isFirstLoad) {
+ this.isFirstLoad = false;
+ }
+
+ // Emit an event that data has changed
+ this.emitEvent("dataChanged", {
+ state,
+ newMessages,
+ isFirstFetch: this.nextFetchIndex === newMessages.length,
+ });
+ } catch (error) {
+ console.error("Error fetching data:", error);
+
+ // Update connection status to disconnected
+ this.updateConnectionStatus("disconnected");
+
+ // Emit an event that we're disconnected
+ this.emitEvent(
+ "connectionStatusChanged",
+ this.connectionStatus,
+ "Not connected",
+ );
+ } finally {
+ this.isFetchingMessages = false;
+ }
+ }
+}
diff --git a/webui/src/diff2.css b/webui/src/diff2.css
new file mode 100644
index 0000000..f716a01
--- /dev/null
+++ b/webui/src/diff2.css
@@ -0,0 +1,142 @@
+/* Custom styles for diff2 view */
+
+/* Override container max-width for diff2 view */
+#diff2View .diff-container {
+ max-width: 100%;
+ width: 100%;
+}
+
+/* When diff2 view is active, allow container to expand to full width */
+.container.diff2-active,
+.timeline-container.diff-active {
+ max-width: 100%;
+ padding-left: 20px;
+ padding-right: 20px;
+}
+
+/* Fix line-height inheritance issue */
+.d2h-code-line,
+.d2h-code-line-ctn,
+.d2h-code-linenumber {
+ line-height: 1.4 !important;
+}
+
+/* Make diff2 file container use the full width */
+.d2h-file-wrapper {
+ width: 100%;
+ margin-bottom: 20px;
+}
+
+/* Make side-by-side view use the full width */
+.d2h-file-side-diff {
+ width: 50% !important;
+}
+
+/* Style for diff lines - for both side-by-side and unified views */
+.d2h-code-line,
+.d2h-code-side-line {
+ transition: background-color 0.2s;
+ position: relative;
+}
+
+.d2h-code-line:hover,
+.d2h-code-side-line:hover {
+ background-color: #e6f7ff !important;
+}
+
+/* Plus button styles for commenting */
+.d2h-gutter-comment-button {
+ display: none;
+ position: absolute;
+ right: 0; /* Adjusted from -11px to prevent layout shifts */
+ top: 50%;
+ transform: translateY(-50%);
+ width: 22px;
+ height: 22px;
+ background-color: #0366d6;
+ color: white;
+ border-radius: 50%;
+ text-align: center;
+ line-height: 20px;
+ font-size: 16px;
+ font-weight: bold;
+ cursor: pointer;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+ opacity: 0.9;
+ z-index: 100;
+ user-select: none;
+}
+
+.d2h-gutter-comment-button:hover {
+ background-color: #0256bd;
+ opacity: 1;
+}
+
+/* Show the plus button on row hover (including line number and code) and when hovering over the button itself */
+tr:hover .d2h-gutter-comment-button,
+.d2h-gutter-comment-button:hover {
+ display: block;
+}
+
+/* Ensure diff2html content uses all available space */
+.diff2html-content {
+ width: 100%;
+ overflow-x: auto;
+}
+
+/* Diff view controls */
+#diff-view-controls {
+ display: flex;
+ justify-content: flex-end;
+ padding: 10px;
+ background-color: #f5f5f5;
+ border-bottom: 1px solid #ddd;
+}
+
+.diff-view-format {
+ display: flex;
+ gap: 15px;
+}
+
+.diff-view-format label {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ cursor: pointer;
+ font-size: 14px;
+ user-select: none;
+}
+
+.diff-view-format input[type="radio"] {
+ margin: 0;
+ cursor: pointer;
+}
+
+/* Adjust code line padding to make room for the gutter button */
+.d2h-code-line-ctn {
+ position: relative;
+ padding-left: 14px !important;
+}
+
+/* Ensure gutter is wide enough for the plus button */
+.d2h-code-linenumber,
+.d2h-code-side-linenumber {
+ position: relative;
+ min-width: 60px !important; /* Increased from 45px to accommodate 3-digit line numbers plus button */
+ padding-right: 15px !important; /* Ensure space for the button */
+ overflow: visible !important; /* Prevent button from being clipped */
+ text-align: right; /* Ensure consistent text alignment */
+ box-sizing: border-box; /* Ensure padding is included in width calculation */
+}
+
+/* Ensure table rows and cells don't clip the button */
+.d2h-diff-table tr,
+.d2h-diff-table td {
+ overflow: visible !important;
+}
+
+/* Add a bit of padding between line number and code content for visual separation */
+.d2h-code-line-ctn,
+.d2h-code-side-line-ctn {
+ padding-left: 8px !important;
+}
diff --git a/webui/src/diff2html.min.css b/webui/src/diff2html.min.css
new file mode 100644
index 0000000..8014a13
--- /dev/null
+++ b/webui/src/diff2html.min.css
@@ -0,0 +1 @@
+:host,:root{--d2h-bg-color:#fff;--d2h-border-color:#ddd;--d2h-dim-color:rgba(0,0,0,.3);--d2h-line-border-color:#eee;--d2h-file-header-bg-color:#f7f7f7;--d2h-file-header-border-color:#d8d8d8;--d2h-empty-placeholder-bg-color:#f1f1f1;--d2h-empty-placeholder-border-color:#e1e1e1;--d2h-selected-color:#c8e1ff;--d2h-ins-bg-color:#dfd;--d2h-ins-border-color:#b4e2b4;--d2h-ins-highlight-bg-color:#97f295;--d2h-ins-label-color:#399839;--d2h-del-bg-color:#fee8e9;--d2h-del-border-color:#e9aeae;--d2h-del-highlight-bg-color:#ffb6ba;--d2h-del-label-color:#c33;--d2h-change-del-color:#fdf2d0;--d2h-change-ins-color:#ded;--d2h-info-bg-color:#f8fafd;--d2h-info-border-color:#d5e4f2;--d2h-change-label-color:#d0b44c;--d2h-moved-label-color:#3572b0;--d2h-dark-color:#e6edf3;--d2h-dark-bg-color:#0d1117;--d2h-dark-border-color:#30363d;--d2h-dark-dim-color:#6e7681;--d2h-dark-line-border-color:#21262d;--d2h-dark-file-header-bg-color:#161b22;--d2h-dark-file-header-border-color:#30363d;--d2h-dark-empty-placeholder-bg-color:hsla(215,8%,47%,.1);--d2h-dark-empty-placeholder-border-color:#30363d;--d2h-dark-selected-color:rgba(56,139,253,.1);--d2h-dark-ins-bg-color:rgba(46,160,67,.15);--d2h-dark-ins-border-color:rgba(46,160,67,.4);--d2h-dark-ins-highlight-bg-color:rgba(46,160,67,.4);--d2h-dark-ins-label-color:#3fb950;--d2h-dark-del-bg-color:rgba(248,81,73,.1);--d2h-dark-del-border-color:rgba(248,81,73,.4);--d2h-dark-del-highlight-bg-color:rgba(248,81,73,.4);--d2h-dark-del-label-color:#f85149;--d2h-dark-change-del-color:rgba(210,153,34,.2);--d2h-dark-change-ins-color:rgba(46,160,67,.25);--d2h-dark-info-bg-color:rgba(56,139,253,.1);--d2h-dark-info-border-color:rgba(56,139,253,.4);--d2h-dark-change-label-color:#d29922;--d2h-dark-moved-label-color:#3572b0}.d2h-wrapper{text-align:left}.d2h-file-header{background-color:#f7f7f7;background-color:var(--d2h-file-header-bg-color);border-bottom:1px solid #d8d8d8;border-bottom:1px solid var(--d2h-file-header-border-color);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:Source Sans Pro,Helvetica Neue,Helvetica,Arial,sans-serif;height:35px;padding:5px 10px}.d2h-file-header.d2h-sticky-header{position:sticky;top:0;z-index:1}.d2h-file-stats{display:-webkit-box;display:-ms-flexbox;display:flex;font-size:14px;margin-left:auto}.d2h-lines-added{border:1px solid #b4e2b4;border:1px solid var(--d2h-ins-border-color);border-radius:5px 0 0 5px;color:#399839;color:var(--d2h-ins-label-color);padding:2px;text-align:right;vertical-align:middle}.d2h-lines-deleted{border:1px solid #e9aeae;border:1px solid var(--d2h-del-border-color);border-radius:0 5px 5px 0;color:#c33;color:var(--d2h-del-label-color);margin-left:1px;padding:2px;text-align:left;vertical-align:middle}.d2h-file-name-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:15px;width:100%}.d2h-file-name{overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}.d2h-file-wrapper{border:1px solid #ddd;border:1px solid var(--d2h-border-color);border-radius:3px;margin-bottom:1em}.d2h-file-collapse{-webkit-box-pack:end;-ms-flex-pack:end;cursor:pointer;display:none;font-size:12px;justify-content:flex-end;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:1px solid #ddd;border:1px solid var(--d2h-border-color);border-radius:3px;padding:4px 8px}.d2h-file-collapse.d2h-selected{background-color:#c8e1ff;background-color:var(--d2h-selected-color)}.d2h-file-collapse-input{margin:0 4px 0 0}.d2h-diff-table{border-collapse:collapse;font-family:Menlo,Consolas,monospace;font-size:13px;width:100%}.d2h-files-diff{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}.d2h-file-diff{overflow-y:hidden}.d2h-file-diff.d2h-d-none,.d2h-files-diff.d2h-d-none{display:none}.d2h-file-side-diff{display:inline-block;overflow-x:scroll;overflow-y:hidden;width:50%}.d2h-code-line{padding:0 8em;width:calc(100% - 16em)}.d2h-code-line,.d2h-code-side-line{display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap}.d2h-code-side-line{padding:0 4.5em;width:calc(100% - 9em)}.d2h-code-line-ctn{background:none;display:inline-block;padding:0;word-wrap:normal;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;vertical-align:middle;white-space:pre;width:100%}.d2h-code-line del,.d2h-code-side-line del{background-color:#ffb6ba;background-color:var(--d2h-del-highlight-bg-color)}.d2h-code-line del,.d2h-code-line ins,.d2h-code-side-line del,.d2h-code-side-line ins{border-radius:.2em;display:inline-block;margin-top:-1px;-webkit-text-decoration:none;text-decoration:none}.d2h-code-line ins,.d2h-code-side-line ins{background-color:#97f295;background-color:var(--d2h-ins-highlight-bg-color);text-align:left}.d2h-code-line-prefix{background:none;display:inline;padding:0;word-wrap:normal;white-space:pre}.line-num1{float:left}.line-num1,.line-num2{-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;padding:0 .5em;text-overflow:ellipsis;width:3.5em}.line-num2{float:right}.d2h-code-linenumber{background-color:#fff;background-color:var(--d2h-bg-color);border:solid #eee;border:solid var(--d2h-line-border-color);border-width:0 1px;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0,0,0,.3);color:var(--d2h-dim-color);cursor:pointer;display:inline-block;position:absolute;text-align:right;width:7.5em}.d2h-code-linenumber:after{content:"\200b"}.d2h-code-side-linenumber{background-color:#fff;background-color:var(--d2h-bg-color);border:solid #eee;border:solid var(--d2h-line-border-color);border-width:0 1px;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0,0,0,.3);color:var(--d2h-dim-color);cursor:pointer;display:inline-block;overflow:hidden;padding:0 .5em;position:absolute;text-align:right;text-overflow:ellipsis;width:4em}.d2h-code-side-linenumber:after{content:"\200b"}.d2h-code-side-emptyplaceholder,.d2h-emptyplaceholder{background-color:#f1f1f1;background-color:var(--d2h-empty-placeholder-bg-color);border-color:#e1e1e1;border-color:var(--d2h-empty-placeholder-border-color)}.d2h-code-line-prefix,.d2h-code-linenumber,.d2h-code-side-linenumber,.d2h-emptyplaceholder{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.d2h-code-linenumber,.d2h-code-side-linenumber{direction:rtl}.d2h-del{background-color:#fee8e9;background-color:var(--d2h-del-bg-color);border-color:#e9aeae;border-color:var(--d2h-del-border-color)}.d2h-ins{background-color:#dfd;background-color:var(--d2h-ins-bg-color);border-color:#b4e2b4;border-color:var(--d2h-ins-border-color)}.d2h-info{background-color:#f8fafd;background-color:var(--d2h-info-bg-color);border-color:#d5e4f2;border-color:var(--d2h-info-border-color);color:rgba(0,0,0,.3);color:var(--d2h-dim-color)}.d2h-file-diff .d2h-del.d2h-change{background-color:#fdf2d0;background-color:var(--d2h-change-del-color)}.d2h-file-diff .d2h-ins.d2h-change{background-color:#ded;background-color:var(--d2h-change-ins-color)}.d2h-file-list-wrapper{margin-bottom:10px}.d2h-file-list-wrapper a{-webkit-text-decoration:none;text-decoration:none}.d2h-file-list-wrapper a,.d2h-file-list-wrapper a:visited{color:#3572b0;color:var(--d2h-moved-label-color)}.d2h-file-list-header{text-align:left}.d2h-file-list-title{font-weight:700}.d2h-file-list-line{display:-webkit-box;display:-ms-flexbox;display:flex;text-align:left}.d2h-file-list{display:block;list-style:none;margin:0;padding:0}.d2h-file-list>li{border-bottom:1px solid #ddd;border-bottom:1px solid var(--d2h-border-color);margin:0;padding:5px 10px}.d2h-file-list>li:last-child{border-bottom:none}.d2h-file-switch{cursor:pointer;display:none;font-size:10px}.d2h-icon{margin-right:10px;vertical-align:middle;fill:currentColor}.d2h-deleted{color:#c33;color:var(--d2h-del-label-color)}.d2h-added{color:#399839;color:var(--d2h-ins-label-color)}.d2h-changed{color:#d0b44c;color:var(--d2h-change-label-color)}.d2h-moved{color:#3572b0;color:var(--d2h-moved-label-color)}.d2h-tag{background-color:#fff;background-color:var(--d2h-bg-color);display:-webkit-box;display:-ms-flexbox;display:flex;font-size:10px;margin-left:5px;padding:0 2px}.d2h-deleted-tag{border:1px solid #c33;border:1px solid var(--d2h-del-label-color)}.d2h-added-tag{border:1px solid #399839;border:1px solid var(--d2h-ins-label-color)}.d2h-changed-tag{border:1px solid #d0b44c;border:1px solid var(--d2h-change-label-color)}.d2h-moved-tag{border:1px solid #3572b0;border:1px solid var(--d2h-moved-label-color)}.d2h-dark-color-scheme{background-color:#0d1117;background-color:var(--d2h-dark-bg-color);color:#e6edf3;color:var(--d2h-dark-color)}.d2h-dark-color-scheme .d2h-file-header{background-color:#161b22;background-color:var(--d2h-dark-file-header-bg-color);border-bottom:#30363d;border-bottom:var(--d2h-dark-file-header-border-color)}.d2h-dark-color-scheme .d2h-lines-added{border:1px solid rgba(46,160,67,.4);border:1px solid var(--d2h-dark-ins-border-color);color:#3fb950;color:var(--d2h-dark-ins-label-color)}.d2h-dark-color-scheme .d2h-lines-deleted{border:1px solid rgba(248,81,73,.4);border:1px solid var(--d2h-dark-del-border-color);color:#f85149;color:var(--d2h-dark-del-label-color)}.d2h-dark-color-scheme .d2h-code-line del,.d2h-dark-color-scheme .d2h-code-side-line del{background-color:rgba(248,81,73,.4);background-color:var(--d2h-dark-del-highlight-bg-color)}.d2h-dark-color-scheme .d2h-code-line ins,.d2h-dark-color-scheme .d2h-code-side-line ins{background-color:rgba(46,160,67,.4);background-color:var(--d2h-dark-ins-highlight-bg-color)}.d2h-dark-color-scheme .d2h-diff-tbody{border-color:#30363d;border-color:var(--d2h-dark-border-color)}.d2h-dark-color-scheme .d2h-code-side-linenumber{background-color:#0d1117;background-color:var(--d2h-dark-bg-color);border-color:#21262d;border-color:var(--d2h-dark-line-border-color);color:#6e7681;color:var(--d2h-dark-dim-color)}.d2h-dark-color-scheme .d2h-files-diff .d2h-code-side-emptyplaceholder,.d2h-dark-color-scheme .d2h-files-diff .d2h-emptyplaceholder{background-color:hsla(215,8%,47%,.1);background-color:var(--d2h-dark-empty-placeholder-bg-color);border-color:#30363d;border-color:var(--d2h-dark-empty-placeholder-border-color)}.d2h-dark-color-scheme .d2h-code-linenumber{background-color:#0d1117;background-color:var(--d2h-dark-bg-color);border-color:#21262d;border-color:var(--d2h-dark-line-border-color);color:#6e7681;color:var(--d2h-dark-dim-color)}.d2h-dark-color-scheme .d2h-del{background-color:rgba(248,81,73,.1);background-color:var(--d2h-dark-del-bg-color);border-color:rgba(248,81,73,.4);border-color:var(--d2h-dark-del-border-color)}.d2h-dark-color-scheme .d2h-ins{background-color:rgba(46,160,67,.15);background-color:var(--d2h-dark-ins-bg-color);border-color:rgba(46,160,67,.4);border-color:var(--d2h-dark-ins-border-color)}.d2h-dark-color-scheme .d2h-info{background-color:rgba(56,139,253,.1);background-color:var(--d2h-dark-info-bg-color);border-color:rgba(56,139,253,.4);border-color:var(--d2h-dark-info-border-color);color:#6e7681;color:var(--d2h-dark-dim-color)}.d2h-dark-color-scheme .d2h-file-diff .d2h-del.d2h-change{background-color:rgba(210,153,34,.2);background-color:var(--d2h-dark-change-del-color)}.d2h-dark-color-scheme .d2h-file-diff .d2h-ins.d2h-change{background-color:rgba(46,160,67,.25);background-color:var(--d2h-dark-change-ins-color)}.d2h-dark-color-scheme .d2h-file-wrapper{border:1px solid #30363d;border:1px solid var(--d2h-dark-border-color)}.d2h-dark-color-scheme .d2h-file-collapse{border:1px solid #0d1117;border:1px solid var(--d2h-dark-bg-color)}.d2h-dark-color-scheme .d2h-file-collapse.d2h-selected{background-color:rgba(56,139,253,.1);background-color:var(--d2h-dark-selected-color)}.d2h-dark-color-scheme .d2h-file-list-wrapper a,.d2h-dark-color-scheme .d2h-file-list-wrapper a:visited{color:#3572b0;color:var(--d2h-dark-moved-label-color)}.d2h-dark-color-scheme .d2h-file-list>li{border-bottom:1px solid #0d1117;border-bottom:1px solid var(--d2h-dark-bg-color)}.d2h-dark-color-scheme .d2h-deleted{color:#f85149;color:var(--d2h-dark-del-label-color)}.d2h-dark-color-scheme .d2h-added{color:#3fb950;color:var(--d2h-dark-ins-label-color)}.d2h-dark-color-scheme .d2h-changed{color:#d29922;color:var(--d2h-dark-change-label-color)}.d2h-dark-color-scheme .d2h-moved{color:#3572b0;color:var(--d2h-dark-moved-label-color)}.d2h-dark-color-scheme .d2h-tag{background-color:#0d1117;background-color:var(--d2h-dark-bg-color)}.d2h-dark-color-scheme .d2h-deleted-tag{border:1px solid #f85149;border:1px solid var(--d2h-dark-del-label-color)}.d2h-dark-color-scheme .d2h-added-tag{border:1px solid #3fb950;border:1px solid var(--d2h-dark-ins-label-color)}.d2h-dark-color-scheme .d2h-changed-tag{border:1px solid #d29922;border:1px solid var(--d2h-dark-change-label-color)}.d2h-dark-color-scheme .d2h-moved-tag{border:1px solid #3572b0;border:1px solid var(--d2h-dark-moved-label-color)}@media (prefers-color-scheme:dark){.d2h-auto-color-scheme{background-color:#0d1117;background-color:var(--d2h-dark-bg-color);color:#e6edf3;color:var(--d2h-dark-color)}.d2h-auto-color-scheme .d2h-file-header{background-color:#161b22;background-color:var(--d2h-dark-file-header-bg-color);border-bottom:#30363d;border-bottom:var(--d2h-dark-file-header-border-color)}.d2h-auto-color-scheme .d2h-lines-added{border:1px solid rgba(46,160,67,.4);border:1px solid var(--d2h-dark-ins-border-color);color:#3fb950;color:var(--d2h-dark-ins-label-color)}.d2h-auto-color-scheme .d2h-lines-deleted{border:1px solid rgba(248,81,73,.4);border:1px solid var(--d2h-dark-del-border-color);color:#f85149;color:var(--d2h-dark-del-label-color)}.d2h-auto-color-scheme .d2h-code-line del,.d2h-auto-color-scheme .d2h-code-side-line del{background-color:rgba(248,81,73,.4);background-color:var(--d2h-dark-del-highlight-bg-color)}.d2h-auto-color-scheme .d2h-code-line ins,.d2h-auto-color-scheme .d2h-code-side-line ins{background-color:rgba(46,160,67,.4);background-color:var(--d2h-dark-ins-highlight-bg-color)}.d2h-auto-color-scheme .d2h-diff-tbody{border-color:#30363d;border-color:var(--d2h-dark-border-color)}.d2h-auto-color-scheme .d2h-code-side-linenumber{background-color:#0d1117;background-color:var(--d2h-dark-bg-color);border-color:#21262d;border-color:var(--d2h-dark-line-border-color);color:#6e7681;color:var(--d2h-dark-dim-color)}.d2h-auto-color-scheme .d2h-files-diff .d2h-code-side-emptyplaceholder,.d2h-auto-color-scheme .d2h-files-diff .d2h-emptyplaceholder{background-color:hsla(215,8%,47%,.1);background-color:var(--d2h-dark-empty-placeholder-bg-color);border-color:#30363d;border-color:var(--d2h-dark-empty-placeholder-border-color)}.d2h-auto-color-scheme .d2h-code-linenumber{background-color:#0d1117;background-color:var(--d2h-dark-bg-color);border-color:#21262d;border-color:var(--d2h-dark-line-border-color);color:#6e7681;color:var(--d2h-dark-dim-color)}.d2h-auto-color-scheme .d2h-del{background-color:rgba(248,81,73,.1);background-color:var(--d2h-dark-del-bg-color);border-color:rgba(248,81,73,.4);border-color:var(--d2h-dark-del-border-color)}.d2h-auto-color-scheme .d2h-ins{background-color:rgba(46,160,67,.15);background-color:var(--d2h-dark-ins-bg-color);border-color:rgba(46,160,67,.4);border-color:var(--d2h-dark-ins-border-color)}.d2h-auto-color-scheme .d2h-info{background-color:rgba(56,139,253,.1);background-color:var(--d2h-dark-info-bg-color);border-color:rgba(56,139,253,.4);border-color:var(--d2h-dark-info-border-color);color:#6e7681;color:var(--d2h-dark-dim-color)}.d2h-auto-color-scheme .d2h-file-diff .d2h-del.d2h-change{background-color:rgba(210,153,34,.2);background-color:var(--d2h-dark-change-del-color)}.d2h-auto-color-scheme .d2h-file-diff .d2h-ins.d2h-change{background-color:rgba(46,160,67,.25);background-color:var(--d2h-dark-change-ins-color)}.d2h-auto-color-scheme .d2h-file-wrapper{border:1px solid #30363d;border:1px solid var(--d2h-dark-border-color)}.d2h-auto-color-scheme .d2h-file-collapse{border:1px solid #0d1117;border:1px solid var(--d2h-dark-bg-color)}.d2h-auto-color-scheme .d2h-file-collapse.d2h-selected{background-color:rgba(56,139,253,.1);background-color:var(--d2h-dark-selected-color)}.d2h-auto-color-scheme .d2h-file-list-wrapper a,.d2h-auto-color-scheme .d2h-file-list-wrapper a:visited{color:#3572b0;color:var(--d2h-dark-moved-label-color)}.d2h-auto-color-scheme .d2h-file-list>li{border-bottom:1px solid #0d1117;border-bottom:1px solid var(--d2h-dark-bg-color)}.d2h-dark-color-scheme .d2h-deleted{color:#f85149;color:var(--d2h-dark-del-label-color)}.d2h-auto-color-scheme .d2h-added{color:#3fb950;color:var(--d2h-dark-ins-label-color)}.d2h-auto-color-scheme .d2h-changed{color:#d29922;color:var(--d2h-dark-change-label-color)}.d2h-auto-color-scheme .d2h-moved{color:#3572b0;color:var(--d2h-dark-moved-label-color)}.d2h-auto-color-scheme .d2h-tag{background-color:#0d1117;background-color:var(--d2h-dark-bg-color)}.d2h-auto-color-scheme .d2h-deleted-tag{border:1px solid #f85149;border:1px solid var(--d2h-dark-del-label-color)}.d2h-auto-color-scheme .d2h-added-tag{border:1px solid #3fb950;border:1px solid var(--d2h-dark-ins-label-color)}.d2h-auto-color-scheme .d2h-changed-tag{border:1px solid #d29922;border:1px solid var(--d2h-dark-change-label-color)}.d2h-auto-color-scheme .d2h-moved-tag{border:1px solid #3572b0;border:1px solid var(--d2h-dark-moved-label-color)}}
\ No newline at end of file
diff --git a/webui/src/sketch-app-shell.css b/webui/src/sketch-app-shell.css
new file mode 100644
index 0000000..57c96df
--- /dev/null
+++ b/webui/src/sketch-app-shell.css
@@ -0,0 +1,22 @@
+html,
+body {
+ height: 100%;
+ overflow-y: auto;
+}
+
+body {
+ font-family:
+ system-ui,
+ -apple-system,
+ BlinkMacSystemFont,
+ "Segoe UI",
+ Roboto,
+ sans-serif;
+ margin: 0;
+ padding: 0;
+ color: #333;
+ line-height: 1.4;
+ overflow-x: hidden; /* Prevent horizontal scrolling */
+ display: flex;
+ flex-direction: column;
+}
diff --git a/webui/src/sketch-app-shell.html b/webui/src/sketch-app-shell.html
new file mode 100644
index 0000000..c12ce8c
--- /dev/null
+++ b/webui/src/sketch-app-shell.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>sketch coding assistant</title>
+ <link rel="stylesheet" href="sketch-app-shell.css" />
+ <script src="static/sketch-app-shell.js" async type="module"></script>
+ </head>
+ <body>
+ <sketch-app-shell></sketch-app-shell>
+ </body>
+</html>
diff --git a/webui/src/types.ts b/webui/src/types.ts
new file mode 100644
index 0000000..7874a3b
--- /dev/null
+++ b/webui/src/types.ts
@@ -0,0 +1,81 @@
+// Auto-generated by sketch.dev/cmd/go2ts.go
+// DO NOT EDIT. This file is automatically generated.
+
+export interface ToolCall {
+ name: string;
+ input: string;
+ tool_call_id: string;
+ result_message?: AgentMessage | null;
+ args?: string;
+ result?: string;
+}
+
+export interface GitCommit {
+ hash: string;
+ subject: string;
+ body: string;
+ pushed_branch?: string;
+}
+
+export interface Usage {
+ input_tokens: number;
+ cache_creation_input_tokens: number;
+ cache_read_input_tokens: number;
+ output_tokens: number;
+ cost_usd: number;
+}
+
+export interface AgentMessage {
+ type: CodingAgentMessageType;
+ end_of_turn: boolean;
+ content: string;
+ tool_name?: string;
+ input?: string;
+ tool_result?: string;
+ tool_error?: boolean;
+ tool_call_id?: string;
+ tool_calls?: ToolCall[] | null;
+ toolResponses?: AgentMessage[] | null;
+ commits?: (GitCommit | null)[] | null;
+ timestamp: string;
+ conversation_id: string;
+ parent_conversation_id?: string | null;
+ usage?: Usage | null;
+ start_time?: string | null;
+ end_time?: string | null;
+ elapsed?: Duration | null;
+ turnDuration?: Duration | null;
+ idx: number;
+}
+
+export interface CumulativeUsage {
+ start_time: string;
+ messages: number;
+ input_tokens: number;
+ output_tokens: number;
+ cache_read_input_tokens: number;
+ cache_creation_input_tokens: number;
+ total_cost_usd: number;
+ tool_uses: { [key: string]: number } | null;
+}
+
+export interface State {
+ message_count: number;
+ total_usage?: CumulativeUsage | null;
+ hostname: string;
+ working_dir: string;
+ initial_commit: string;
+ title: string;
+ os: string;
+ outside_hostname?: string;
+ inside_hostname?: string;
+ outside_os?: string;
+ inside_os?: string;
+ outside_working_dir?: string;
+ inside_working_dir?: string;
+ git_origin?: string;
+}
+
+export type CodingAgentMessageType = 'user' | 'agent' | 'error' | 'budget' | 'tool' | 'commit' | 'auto';
+
+export type Duration = number;
diff --git a/webui/src/utils.ts b/webui/src/utils.ts
new file mode 100644
index 0000000..b60a0fa
--- /dev/null
+++ b/webui/src/utils.ts
@@ -0,0 +1,50 @@
+/**
+ * Escapes HTML special characters in a string
+ */
+export function escapeHTML(str: string): string {
+ return str
+ .replace(/&/g, "&")
+ .replace(/</g, "<")
+ .replace(/>/g, ">")
+ .replace(/"/g, """)
+ .replace(/'/g, "'");
+}
+
+/**
+ * Formats a number with locale-specific formatting
+ */
+export function formatNumber(
+ num: number | null | undefined,
+ defaultValue: string = "0",
+): string {
+ if (num === undefined || num === null) return defaultValue;
+ try {
+ return num.toLocaleString();
+ } catch (e) {
+ return String(num);
+ }
+}
+
+/**
+ * Generates a consistent color based on an ID string
+ */
+export function generateColorFromId(id: string | null | undefined): string {
+ if (!id) return "#7c7c7c"; // Default color for null/undefined
+
+ // Generate a hash from the ID
+ let hash = 0;
+ for (let i = 0; i < id.length; i++) {
+ hash = id.charCodeAt(i) + ((hash << 5) - hash);
+ }
+
+ // Convert hash to a hex color
+ let color = "#";
+ for (let i = 0; i < 3; i++) {
+ // Generate more muted colors by using only part of the range
+ // and adding a base value to avoid very dark colors
+ const value = (hash >> (i * 8)) & 0xff;
+ const scaledValue = Math.floor(100 + (value * 100) / 255); // Range 100-200 for more muted colors
+ color += scaledValue.toString(16).padStart(2, "0");
+ }
+ return color;
+}
diff --git a/webui/src/vega-types.d.ts b/webui/src/vega-types.d.ts
new file mode 100644
index 0000000..97a4655
--- /dev/null
+++ b/webui/src/vega-types.d.ts
@@ -0,0 +1,34 @@
+// Type definitions for Vega-Lite and related modules
+declare module "fast-json-patch/index.mjs";
+
+// Add any interface augmentations for TimelineMessage and ToolCall
+interface ToolCall {
+ name: string;
+ args?: string;
+ result?: string;
+ input?: string; // Add missing property
+}
+
+interface TimelineMessage {
+ type: string;
+ content?: string;
+ timestamp?: string | number | Date;
+ elapsed?: number;
+ end_of_turn?: boolean;
+ conversation_id?: string;
+ parent_conversation_id?: string;
+ tool_calls?: ToolCall[];
+ tool_name?: string;
+ tool_error?: boolean;
+ tool_result?: string;
+ input?: string;
+ start_time?: string | number | Date; // Add start time
+ end_time?: string | number | Date; // Add end time
+ usage?: {
+ input_tokens?: number;
+ output_tokens?: number;
+ cache_read_input_tokens?: number;
+ cache_creation_input_tokens?: number;
+ cost_usd?: number;
+ };
+}
diff --git a/webui/src/web-components/aggregateAgentMessages.ts b/webui/src/web-components/aggregateAgentMessages.ts
new file mode 100644
index 0000000..3dc11f8
--- /dev/null
+++ b/webui/src/web-components/aggregateAgentMessages.ts
@@ -0,0 +1,35 @@
+import { AgentMessage } from "../types";
+
+export function aggregateAgentMessages(
+ arr1: AgentMessage[],
+ arr2: AgentMessage[],
+): AgentMessage[] {
+ const mergedArray = [...arr1, ...arr2];
+ const seenIds = new Set<number>();
+ const toolCallResults = new Map<string, AgentMessage>();
+
+ let ret: AgentMessage[] = mergedArray
+ .filter((msg) => {
+ if (msg.type == "tool") {
+ toolCallResults.set(msg.tool_call_id, msg);
+ return false;
+ }
+ if (seenIds.has(msg.idx)) {
+ return false; // Skip if idx is already seen
+ }
+
+ seenIds.add(msg.idx);
+ return true;
+ })
+ .sort((a: AgentMessage, b: AgentMessage) => a.idx - b.idx);
+
+ // Attach any tool_call result messages to the original message's tool_call object.
+ ret.forEach((msg) => {
+ msg.tool_calls?.forEach((toolCall) => {
+ if (toolCallResults.has(toolCall.tool_call_id)) {
+ toolCall.result_message = toolCallResults.get(toolCall.tool_call_id);
+ }
+ });
+ });
+ return ret;
+}
diff --git a/webui/src/web-components/demo/demo.css b/webui/src/web-components/demo/demo.css
new file mode 100644
index 0000000..08e02a2
--- /dev/null
+++ b/webui/src/web-components/demo/demo.css
@@ -0,0 +1,18 @@
+body {
+ font-family:
+ system-ui,
+ -apple-system,
+ BlinkMacSystemFont,
+ "Segoe UI",
+ Roboto,
+ sans-serif;
+ margin: 0;
+ padding: 20px;
+ padding-bottom: 100px; /* Adjusted padding for chat container */
+ color: #333;
+ line-height: 1.4; /* Reduced line height for more compact text */
+}
+
+pre {
+ white-space: normal;
+}
diff --git a/webui/src/web-components/demo/index.html b/webui/src/web-components/demo/index.html
new file mode 100644
index 0000000..77df51e
--- /dev/null
+++ b/webui/src/web-components/demo/index.html
@@ -0,0 +1,29 @@
+<html>
+ <head>
+ <link rel="stylesheet" href="demo.css" />
+ </head>
+ <body>
+ sketch web-components demo index
+ <ul>
+ <li><a href="sketch-app-shell.demo.html">sketch-app-shell</a></li>
+ <li><a href="sketch-charts.demo.html">sketch-charts</a></li>
+ <li><a href="sketch-chat-input.demo.html">sketch-chat-input</a></li>
+ <li><a href="sketch-diff-view.demo.html">sketch-diff-view</a></li>
+ <li>
+ <a href="sketch-container-status.demo.html">sketch-container-status</a>
+ </li>
+ <li>
+ <a href="sketch-network-status.demo.html">sketch-network-status</a>
+ </li>
+ <li>
+ <a href="sketch-timeline-message.demo.html">sketch-timeline-message</a>
+ </li>
+ <li><a href="sketch-timeline.demo.html">sketch-timeline</a></li>
+ <li><a href="sketch-tool-calls.demo.html">sketch-tool-calls</a></li>
+ <li><a href="sketch-tool-card.demo.html">sketch-tool-card</a></li>
+ <li>
+ <a href="sketch-view-mode-select.demo.html">sketch-view-mode-select</a>
+ </li>
+ </ul>
+ </body>
+</html>
diff --git a/webui/src/web-components/demo/readme.md b/webui/src/web-components/demo/readme.md
new file mode 100644
index 0000000..324d077
--- /dev/null
+++ b/webui/src/web-components/demo/readme.md
@@ -0,0 +1,5 @@
+# Stand-alone demo pages for sketch web components
+
+These are handy for iterating on specific component UI issues in isolation from the rest of the sketch application, and without having to start a full backend to serve the full frontend app UI.
+
+See [README](../../../readme.md#development-mode) for more information on how to run the demo pages.
diff --git a/webui/src/web-components/demo/sketch-app-shell.demo.html b/webui/src/web-components/demo/sketch-app-shell.demo.html
new file mode 100644
index 0000000..48fc100
--- /dev/null
+++ b/webui/src/web-components/demo/sketch-app-shell.demo.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>sketch coding assistant</title>
+ <link rel="stylesheet" href="sketch-app-shell.css" />
+ <script src="../sketch-app-shell.ts" type="module"></script>
+ </head>
+ <body>
+ <sketch-app-shell></sketch-app-shell>
+ </body>
+</html>
diff --git a/webui/src/web-components/demo/sketch-charts.demo.html b/webui/src/web-components/demo/sketch-charts.demo.html
new file mode 100644
index 0000000..64a9bd2
--- /dev/null
+++ b/webui/src/web-components/demo/sketch-charts.demo.html
@@ -0,0 +1,134 @@
+<!doctype html>
+<html>
+ <head>
+ <meta charset="utf-8" />
+ <title>Sketch Charts Demo</title>
+ <script type="module" src="../sketch-charts.ts"></script>
+ <link rel="stylesheet" href="demo.css" />
+ <style>
+ sketch-charts {
+ margin: 20px;
+ max-width: 1000px;
+ }
+
+ body {
+ font-family:
+ system-ui,
+ -apple-system,
+ BlinkMacSystemFont,
+ "Segoe UI",
+ Roboto,
+ sans-serif;
+ }
+ </style>
+ </head>
+ <body>
+ <h1>Sketch Charts Demo</h1>
+ <sketch-charts id="charts"></sketch-charts>
+
+ <script>
+ // Sample data for testing
+ const sampleMessages = [
+ {
+ idx: 1,
+ type: "human",
+ content: "Hello, can you help me with a coding task?",
+ timestamp: new Date(Date.now() - 3600000).toISOString(),
+ usage: { cost_usd: 0.0001 },
+ },
+ {
+ idx: 2,
+ type: "assistant",
+ content:
+ "I'd be happy to help! What kind of coding task are you working on?",
+ timestamp: new Date(Date.now() - 3500000).toISOString(),
+ usage: { cost_usd: 0.0005 },
+ },
+ {
+ idx: 3,
+ type: "human",
+ content: "I need to create a web component using lit-element",
+ timestamp: new Date(Date.now() - 3400000).toISOString(),
+ usage: { cost_usd: 0.0001 },
+ },
+ {
+ idx: 4,
+ type: "assistant",
+ content:
+ "I can definitely help with that. Lit Element is a great library for building web components.",
+ timestamp: new Date(Date.now() - 3300000).toISOString(),
+ usage: { cost_usd: 0.0008 },
+ },
+ {
+ idx: 5,
+ type: "assistant",
+ tool_name: "bash",
+ input: "ls -la",
+ tool_result:
+ "total 16\ndrwxr-xr-x 4 user staff 128 Jan 10 12:34 .\ndrwxr-xr-x 10 user staff 320 Jan 10 12:34 ..\n-rw-r--r-- 1 user staff 123 Jan 10 12:34 file1.txt\n-rw-r--r-- 1 user staff 456 Jan 10 12:34 file2.txt",
+ start_time: new Date(Date.now() - 3200000).toISOString(),
+ end_time: new Date(Date.now() - 3190000).toISOString(),
+ timestamp: new Date(Date.now() - 3190000).toISOString(),
+ usage: { cost_usd: 0.0002 },
+ },
+ {
+ idx: 6,
+ type: "assistant",
+ content: "Let me create a basic web component for you.",
+ timestamp: new Date(Date.now() - 3100000).toISOString(),
+ usage: { cost_usd: 0.0015 },
+ },
+ {
+ idx: 7,
+ type: "human",
+ content: "Can you show me how to handle events in the web component?",
+ timestamp: new Date(Date.now() - 3000000).toISOString(),
+ usage: { cost_usd: 0.0001 },
+ },
+ {
+ idx: 8,
+ type: "assistant",
+ tool_name: "bash",
+ input: "cat example.ts",
+ tool_result:
+ "import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\n@customElement('my-element')\nexport class MyElement extends LitElement {\n render() {\n return html`<div>Hello World</div>`;\n }\n}",
+ start_time: new Date(Date.now() - 2900000).toISOString(),
+ end_time: new Date(Date.now() - 2800000).toISOString(),
+ timestamp: new Date(Date.now() - 2800000).toISOString(),
+ usage: { cost_usd: 0.0003 },
+ },
+ {
+ idx: 9,
+ type: "assistant",
+ content:
+ "Here's how you can handle events in a web component using Lit.",
+ timestamp: new Date(Date.now() - 2700000).toISOString(),
+ usage: { cost_usd: 0.002 },
+ },
+ {
+ idx: 10,
+ type: "human",
+ content: "Thank you! How about adding properties and attributes?",
+ timestamp: new Date(Date.now() - 2600000).toISOString(),
+ usage: { cost_usd: 0.0001 },
+ },
+ {
+ idx: 11,
+ type: "assistant",
+ content:
+ "You can use the @property decorator to define properties in your Lit Element component.",
+ timestamp: new Date(Date.now() - 2500000).toISOString(),
+ usage: { cost_usd: 0.0025 },
+ },
+ ];
+
+ // Set sample data as soon as the component is defined
+ document.addEventListener("DOMContentLoaded", () => {
+ console.time("chart-demo-load");
+ const chartsComponent = document.getElementById("charts");
+ chartsComponent.messages = sampleMessages;
+ console.timeEnd("chart-demo-load");
+ });
+ </script>
+ </body>
+</html>
diff --git a/webui/src/web-components/demo/sketch-chat-input.demo.html b/webui/src/web-components/demo/sketch-chat-input.demo.html
new file mode 100644
index 0000000..afc79fb
--- /dev/null
+++ b/webui/src/web-components/demo/sketch-chat-input.demo.html
@@ -0,0 +1,30 @@
+<html>
+ <head>
+ <title>sketch-chat-input demo</title>
+ <link rel="stylesheet" href="demo.css" />
+ <script type="module" src="../sketch-chat-input.ts"></script>
+
+ <script>
+ document.addEventListener("DOMContentLoaded", () => {
+ const chatInput = document.querySelector("sketch-chat-input");
+ console.log("chatInput: ", chatInput);
+ chatInput.content = "hi";
+ chatInput.addEventListener("send-chat", (evt) => {
+ console.log("send chat event: ", evt);
+ const msgDiv = document.querySelector("#chat-messages");
+ const newDiv = document.createElement("div");
+ newDiv.innerText = evt.detail.message;
+ msgDiv.append(newDiv);
+ chatInput.content = "";
+ });
+ });
+ </script>
+ </head>
+ <body>
+ <h1>sketch-chat-input demo</h1>
+
+ <div id="chat-messages"></div>
+
+ <sketch-chat-input></sketch-chat-input>
+ </body>
+</html>
diff --git a/webui/src/web-components/demo/sketch-container-status.demo.html b/webui/src/web-components/demo/sketch-container-status.demo.html
new file mode 100644
index 0000000..0945d70
--- /dev/null
+++ b/webui/src/web-components/demo/sketch-container-status.demo.html
@@ -0,0 +1,38 @@
+<html>
+ <head>
+ <title>sketch-container-status demo</title>
+ <link rel="stylesheet" href="demo.css" />
+ <script type="module" src="../sketch-container-status.ts"></script>
+
+ <script>
+ document.addEventListener("DOMContentLoaded", () => {
+ const containerStatus = document.querySelector("#status-2");
+ containerStatus.state = {
+ hostname: "example.hostname",
+ initial_commit: "decafbad",
+ message_count: 27,
+ os: "linux",
+ total_usage: {
+ start_time: "around lunch",
+ messages: 1337,
+ input_tokens: 3,
+ output_tokens: 1000,
+ cache_read_input_tokens: 28,
+ cache_creation_input_tokens: 12354,
+ total_cost_usd: 2.03,
+ },
+ working_dir: "/app",
+ };
+ });
+ </script>
+ </head>
+ <body>
+ <h1>sketch-container-status demo</h1>
+
+ Empty:
+ <sketch-container-status id="status-1"></sketch-container-status>
+
+ With state fields set:
+ <sketch-container-status id="status-2"></sketch-container-status>
+ </body>
+</html>
diff --git a/webui/src/web-components/demo/sketch-diff-view.demo.html b/webui/src/web-components/demo/sketch-diff-view.demo.html
new file mode 100644
index 0000000..6ab6e62
--- /dev/null
+++ b/webui/src/web-components/demo/sketch-diff-view.demo.html
@@ -0,0 +1,109 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Sketch Diff Viewer Demo</title>
+ <link
+ rel="stylesheet"
+ href="../../../node_modules/diff2html/bundles/css/diff2html.min.css"
+ />
+ <script type="module" src="../sketch-diff-view.ts"></script>
+ <style>
+ body {
+ font-family:
+ -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+ Arial, sans-serif;
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 2rem;
+ }
+
+ h1 {
+ color: #333;
+ margin-bottom: 2rem;
+ }
+
+ .control-panel {
+ margin-bottom: 2rem;
+ padding: 1rem;
+ background-color: #f0f0f0;
+ border-radius: 4px;
+ }
+
+ input {
+ padding: 0.5rem;
+ border-radius: 4px;
+ border: 1px solid #ccc;
+ width: 300px;
+ }
+
+ button {
+ padding: 0.5rem 1rem;
+ background-color: #2196f3;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ margin-left: 1rem;
+ }
+
+ button:hover {
+ background-color: #0d8bf2;
+ }
+ </style>
+
+ <script>
+ document.addEventListener("DOMContentLoaded", () => {
+ const diffViewer = document.getElementById("diffViewer");
+ const commitHashInput = document.getElementById("commitHash");
+ const viewDiffButton = document.getElementById("viewDiff");
+ let commit = false;
+ viewDiffButton.addEventListener("click", () => {
+ let diffContent = `diff --git a/sample.txt b/sample.txt
+index 1111111..2222222 100644
+--- a/sample.txt
++++ b/sample.txt
+@@ -1,5 +1,5 @@
+ This is a sample file
+-This line will be removed
++This line is added as a replacement
+ This line stays the same
+-Another line to remove
++A completely new line
+ The last line is unchanged`;
+ if (commit) {
+ // For demo purposes, generate fake diff based on commit hash
+ diffContent = `diff --git a/file-${commit.substring(0, 5)}.txt b/file-${commit.substring(0, 5)}.txt
+index 3333333..4444444 100644
+--- a/file-${commit.substring(0, 5)}.txt
++++ b/file-${commit.substring(0, 5)}.txt
+@@ -1,4 +1,6 @@
+ File with commit: ${commit}
++This line was added in commit ${commit}
+ This line exists in both versions
+-This line was removed in commit ${commit}
++This line replaced the removed line
++Another new line added in this commit
+ Last line of the file`;
+ }
+ diffViewer.diffText = diffContent;
+ diffViewer.commitHash = commitHashInput.value.trim();
+ });
+ });
+ </script>
+ </head>
+ <body>
+ <h1>Sketch Diff Viewer Demo</h1>
+
+ <div class="control-panel">
+ <label for="commitHash"
+ >Commit Hash (leave empty for unstaged changes):</label
+ >
+ <input type="text" id="commitHash" placeholder="Enter commit hash" />
+ <button id="viewDiff">View Diff</button>
+ </div>
+
+ <sketch-diff-view id="diffViewer"></sketch-diff-view>
+ </body>
+</html>
diff --git a/webui/src/web-components/demo/sketch-network-status.demo.html b/webui/src/web-components/demo/sketch-network-status.demo.html
new file mode 100644
index 0000000..f248a5d
--- /dev/null
+++ b/webui/src/web-components/demo/sketch-network-status.demo.html
@@ -0,0 +1,22 @@
+<html>
+ <head>
+ <title>sketch-network-status demo</title>
+ <link rel="stylesheet" href="demo.css" />
+ <script type="module" src="../sketch-network-status.ts"></script>
+ </head>
+ <body>
+ <h1>sketch-network-status demo</h1>
+
+ Connected:
+ <sketch-network-status
+ connection="connected"
+ message="connected"
+ ></sketch-network-status>
+
+ Error:
+ <sketch-network-status
+ connection="error"
+ error="error"
+ ></sketch-network-status>
+ </body>
+</html>
diff --git a/webui/src/web-components/demo/sketch-timeline-message.demo.html b/webui/src/web-components/demo/sketch-timeline-message.demo.html
new file mode 100644
index 0000000..3c5d77e
--- /dev/null
+++ b/webui/src/web-components/demo/sketch-timeline-message.demo.html
@@ -0,0 +1,62 @@
+<html>
+ <head>
+ <title>sketch-timeline-message demo</title>
+ <link rel="stylesheet" href="demo.css" />
+ <script type="module" src="../sketch-timeline-message.ts"></script>
+
+ <script>
+ const messages = [
+ {
+ type: "agent",
+ content: "an agent message",
+ },
+ {
+ type: "user",
+ content: "a user message",
+ },
+ {
+ type: "tool",
+ content: "a tool use message",
+ },
+ {
+ type: "commit",
+ end_of_turn: false,
+ content: "",
+ commits: [
+ {
+ hash: "ece101c103ec231da87f4df05c1b5e6a24e13add",
+ subject: "Add README.md for web components directory",
+ body: "This adds documentation for the web components used in the Loop UI,\nincluding a description of each component, usage examples, and\ndevelopment guidelines.\n\nCo-Authored-By: sketch\nadd README.md for webui/src/web-components",
+ pushed_branch:
+ "sketch/create-readmemd-for-web-components-directory",
+ },
+ ],
+ timestamp: "2025-04-14T16:39:33.639533919Z",
+ conversation_id: "",
+ idx: 17,
+ },
+ {
+ type: "agent",
+ content: "an end-of-turn agent message",
+ end_of_turn: true,
+ },
+ ];
+ document.addEventListener("DOMContentLoaded", () => {
+ messages.forEach((msg, idx) => {
+ const jsonEl = document.createElement("pre");
+ jsonEl.innerText = `.message property: ${JSON.stringify(msg)}`;
+ document.body.append(jsonEl);
+ const messageEl = document.createElement("sketch-timeline-message");
+ messageEl.message = msg;
+ document.body.appendChild(messageEl);
+ });
+ window.addEventListener("show-commit-diff", (evt) => {
+ console.log("show-commit-diff", evt);
+ });
+ });
+ </script>
+ </head>
+ <body>
+ <h1>sketch-timeline-message demo</h1>
+ </body>
+</html>
diff --git a/webui/src/web-components/demo/sketch-timeline.demo.html b/webui/src/web-components/demo/sketch-timeline.demo.html
new file mode 100644
index 0000000..58ff5d9
--- /dev/null
+++ b/webui/src/web-components/demo/sketch-timeline.demo.html
@@ -0,0 +1,149 @@
+<html>
+ <head>
+ <title>sketch-timeline demo</title>
+ <link rel="stylesheet" href="demo.css" />
+ <script type="module" src="../sketch-timeline.ts"></script>
+ <script>
+ const messages = [
+ {
+ type: "user",
+ content: "a user message",
+ },
+ {
+ type: "agent",
+ content: "an agent message",
+ },
+ {
+ type: "agent",
+ content: "an agent message",
+ },
+ {
+ type: "agent",
+ content: "an agent message",
+ },
+ {
+ type: "user",
+ content: "a user message",
+ },
+ {
+ type: "user",
+ content: "a user message",
+ },
+ {
+ type: "agent",
+ content: "an agent message",
+ },
+ {
+ type: "user",
+ content: "a user message",
+ },
+ {
+ type: "tool",
+ content: "a tool use message",
+ },
+ {
+ type: "commit",
+ end_of_turn: false,
+ content: "",
+ commits: [
+ {
+ hash: "ece101c103ec231da87f4df05c1b5e6a24e13add",
+ subject: "Add README.md for web components directory",
+ body: "This adds documentation for the web components used in the Loop UI,\nincluding a description of each component, usage examples, and\ndevelopment guidelines.\n\nCo-Authored-By: sketch\nadd README.md for webui/src/web-components",
+ pushed_branch:
+ "sketch/create-readmemd-for-web-components-directory",
+ },
+ ],
+ timestamp: "2025-04-14T16:39:33.639533919Z",
+ conversation_id: "",
+ idx: 17,
+ },
+ {
+ type: "agent",
+ content: "an end-of-turn agent message",
+ end_of_turn: true,
+ },
+ ];
+
+ document.addEventListener("DOMContentLoaded", () => {
+ const appShell = document.querySelector(".app-shell");
+ const timelineEl = document.querySelector("sketch-timeline");
+ timelineEl.messages = messages;
+ timelineEl.scrollContainer = appShell;
+ const addMessagesCheckbox = document.querySelector("#addMessages");
+ addMessagesCheckbox.addEventListener("change", toggleAddMessages);
+
+ let addingMessages = false;
+ const addNewMessagesInterval = 1000;
+
+ function addNewMessages() {
+ if (!addingMessages) {
+ return;
+ }
+ const n = new Date().getMilliseconds() % messages.length;
+ const msgToDup = messages[n];
+ const dup = JSON.parse(JSON.stringify(msgToDup));
+ dup.idx = messages.length;
+ dup.timestamp = new Date().toISOString();
+ messages.push(dup);
+ timelineEl.messages = messages.concat();
+ timelineEl.prop;
+ timelineEl.requestUpdate();
+ }
+
+ let addMessagesHandler = setInterval(
+ addNewMessages,
+ addNewMessagesInterval,
+ );
+
+ function toggleAddMessages() {
+ addingMessages = !addingMessages;
+ if (addingMessages) {
+ } else {
+ }
+ }
+ });
+ </script>
+ <style>
+ .app-shell {
+ display: block;
+ font-family:
+ system-ui,
+ -apple-system,
+ BlinkMacSystemFont,
+ "Segoe UI",
+ Roboto,
+ sans-serif;
+ color: rgb(51, 51, 51);
+ line-height: 1.4;
+ min-height: 100vh;
+ width: 100%;
+ position: relative;
+ overflow-x: hidden;
+ }
+ .app-header {
+ flex-grow: 0;
+ }
+ .view-container {
+ flex-grow: 2;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="app-shell">
+ <div class="app-header">
+ <h1>sketch-timeline demo</h1>
+ <input
+ type="checkbox"
+ id="addMessages"
+ title="Automatically add new messages"
+ /><label for="addMessages">Automatically add new messages</label>
+ </div>
+ <div class="view-container">
+ <div class="chat-view view-active">
+ <sketch-timeline></sketch-timeline>
+ </div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/webui/src/web-components/demo/sketch-tool-calls.demo.html b/webui/src/web-components/demo/sketch-tool-calls.demo.html
new file mode 100644
index 0000000..9ad1677
--- /dev/null
+++ b/webui/src/web-components/demo/sketch-tool-calls.demo.html
@@ -0,0 +1,184 @@
+<html>
+ <head>
+ <title>sketch-tool-calls demo</title>
+ <link rel="stylesheet" href="demo.css" />
+
+ <script type="module" src="../sketch-tool-calls.ts"></script>
+
+ <script>
+ const toolCalls = [
+ [
+ {
+ name: "bash",
+ input: JSON.stringify({
+ command:
+ "docker ps -a --format '{{.ID}} {{.Image }} {{.Names}}' | grep sketch | awk '{print $1 }' | xargs -I {} docker rm {} && docker image prune -af",
+ }),
+ },
+ ],
+ [
+ {
+ name: "bash",
+ input: JSON.stringify({
+ command: "ls -a",
+ }),
+ result_message: {
+ type: "tool",
+ tool_result: ".\n..",
+ },
+ },
+ ],
+ [
+ {
+ name: "bash",
+ input: JSON.stringify({
+ command: "sleep 200",
+ }),
+ result_message: {
+ type: "tool",
+ tool_error: "the user canceled this operation",
+ },
+ },
+ ],
+ [
+ {
+ name: "title",
+ input: JSON.stringify({
+ title: "a new title for this sketch",
+ }),
+ },
+ ],
+ [
+ {
+ name: "codereview",
+ input: "{}",
+ tool_call_id: "toolu_01WT5qQwHZgdogfKhkD8R9PZ",
+ result_message: {
+ type: "tool",
+ end_of_turn: false,
+ content: "",
+ tool_name: "codereview",
+ input: "{}",
+ tool_result: "OK",
+ tool_call_id: "toolu_01WT5qQwHZgdogfKhkD8R9PZ",
+ timestamp: "2025-04-14T16:33:17.575759565Z",
+ conversation_id: "xsa-8hw0",
+ start_time: "2025-04-14T16:33:07.11793816Z",
+ end_time: "2025-04-14T16:33:17.57575719Z",
+ elapsed: 10457819031,
+ idx: 45,
+ },
+ },
+ ],
+ [
+ {
+ name: "codereview",
+ input: "{}",
+ tool_call_id: "toolu_01WT5qQwHZgdogfKhkD8R9PZ",
+ result_message: {
+ type: "tool",
+ end_of_turn: false,
+ content: "",
+ tool_name: "codereview",
+ input: "{}",
+ tool_result: "Not OK",
+ tool_call_id: "toolu_01WT5qQwHZgdogfKhkD8R9PZ",
+ timestamp: "2025-04-14T16:33:17.575759565Z",
+ conversation_id: "xsa-8hw0",
+ start_time: "2025-04-14T16:33:07.11793816Z",
+ end_time: "2025-04-14T16:33:17.57575719Z",
+ elapsed: 10457819031,
+ idx: 45,
+ },
+ },
+ ],
+ [
+ {
+ name: "think",
+ input:
+ '{"thoughts":"I\'m going to inspect a few key components to understand their purpose and relationships:\\n1. sketch-app-shell.ts - Appears to be the main container component\\n2. sketch-timeline.ts - Likely manages the chat timeline\\n3. sketch-view-mode-select.ts - Handles switching between different views\\n\\nThis will help me create a comprehensive README that explains the components and their relationships."}',
+ tool_call_id: "toolu_01R1g5mQVgKxEJZFNp9QGvUr",
+ result_message: {
+ type: "tool",
+ end_of_turn: false,
+ content: "",
+ tool_name: "think",
+ input:
+ '{"thoughts":"I\'m going to inspect a few key components to understand their purpose and relationships:\\n1. sketch-app-shell.ts - Appears to be the main container component\\n2. sketch-timeline.ts - Likely manages the chat timeline\\n3. sketch-view-mode-select.ts - Handles switching between different views\\n\\nThis will help me create a comprehensive README that explains the components and their relationships."}',
+ tool_result: "recorded",
+ tool_call_id: "toolu_01R1g5mQVgKxEJZFNp9QGvUr",
+ timestamp: "2025-04-14T16:32:14.12647133Z",
+ conversation_id: "xsa-8hw0",
+ start_time: "2025-04-14T16:32:14.126454329Z",
+ end_time: "2025-04-14T16:32:14.126468539Z",
+ elapsed: 14209,
+ idx: 18,
+ },
+ },
+ ],
+ [
+ {
+ name: "patch",
+ input:
+ '{"path":"/app/webui/src/web-components/README.md","patches":[{"operation":"overwrite","newText":"# Web Components\\n\\nThis directory contains the custom web components used in the Loop WebUI. These components are built using the [Lit](https://lit.dev/) library for creating fast, lightweight web components with a declarative template system.\\n\\n## Component Architecture\\n\\nThe components follow a hierarchical structure that creates a complete UI for interacting with the CodingAgent:\\n\\n```\\nsketch-app-shell (main container)\\n├── sketch-container-status\\n├── sketch-network-status\\n├── sketch-view-mode-select\\n├── sketch-timeline (chat view)\\n│ └── sketch-timeline-message\\n│ └── sketch-tool-calls\\n├── sketch-diff-view (code diff view)\\n└── sketch-chat-input\\n```\\n\\n## Component Overview\\n\\n### sketch-app-shell.ts\\nThe main container component that orchestrates the entire UI. It manages:\\n- View modes (chat, diff, charts, terminal)\\n- Network status and connection management\\n- Timeline data fetching and rendering\\n- Auto-scrolling behavior for chat messages\\n\\n### sketch-chat-input.ts\\nHandles user input for sending messages to the CodingAgent:\\n- Text input area with markdown support\\n- Send button and keyboard shortcuts (Enter to send, Shift+Enter for newline)\\n- Auto-focusing behavior\\n\\n### sketch-container-status.ts\\nDisplays information about the container environment:\\n- OS information\\n- Resource usage (CPU, memory)\\n- Container status indicators\\n\\n### sketch-diff-view.ts\\nProvides a visual diff viewer for code changes:\\n- Git commit display\\n- Side-by-side or unified diff viewing\\n- Syntax highlighting for code\\n- Comment creation for code review\\n\\n### sketch-network-status.ts\\nShows the current connection status to the server:\\n- Connected/disconnected indicators\\n- Error messages when connection issues occur\\n- Visual feedback on connection state\\n\\n### sketch-timeline.ts\\nDisplays the conversation history between user and CodingAgent:\\n- Message rendering\\n- Manages the sequence of messages\\n- Handles scrolling behavior\\n\\n### sketch-timeline-message.ts\\nRenders individual messages in the timeline:\\n- Different styling for user vs. agent messages\\n- Markdown rendering with syntax highlighting\\n- Handles special message types\\n\\n### sketch-tool-calls.ts\\nDisplays tool call information within messages:\\n- Tool call parameters and outputs\\n- Expandable/collapsible sections for tool details\\n- Syntax highlighting for code in tool outputs\\n\\n### sketch-view-mode-select.ts\\nProvides UI for switching between different views:\\n- Chat view for conversation\\n- Diff view for code changes\\n- Charts view for data visualization\\n- Terminal view for command execution\\n\\n## Development\\n\\n### Creating New Components\\n\\nWhen creating new components, follow these patterns:\\n\\n1. Use the `@customElement` decorator to define the component\\n2. Encapsulate styles using the static `styles` property\\n3. Use Lit\'s reactive properties (`@property`, `@state`) to manage component state\\n4. Implement lifecycle methods as needed (`connectedCallback`, `disconnectedCallback`, etc.)\\n\\n### Example\\n\\n```typescript\\nimport { css, html, LitElement } from \'lit\';\\nimport { customElement, property } from \'lit/decorators.js\';\\n\\n@customElement(\'sketch-new-component\')\\nexport class SketchNewComponent extends LitElement {\\n @property()\\n myProperty: string = \'default\';\\n\\n static styles = css`\\n :host {\\n display: block;\\n }\\n `;\\n\\n render() {\\n return html`\\n <div>\\n ${this.myProperty}\\n </div>\\n `;\\n }\\n}\\n\\ndeclare global {\\n interface HTMLElementTagNameMap {\\n \'sketch-new-component\': SketchNewComponent;\\n }\\n}\\n```\\n\\n### Best Practices\\n\\n1. Maintain a single responsibility for each component\\n2. Use properties and events for parent-child communication\\n3. Document the purpose and API of each component\\n4. Write tests for components where possible\\n5. Keep styles encapsulated within components\\n6. Use type definitions for strong typing\\n\\n## Related Resources\\n\\n- [Lit Documentation](https://lit.dev/docs/)\\n- [Web Components Introduction](https://developer.mozilla.org/en-US/docs/Web/Web_Components)\\n- See `/app/webui/readme.md` for more information on the Loop WebUI project\\n"}]}',
+ tool_call_id: "toolu_01TNhLX2AWkZwsu2KCLKrpju",
+ result_message: {
+ type: "tool",
+ end_of_turn: false,
+ content: "",
+ tool_name: "patch",
+ input:
+ '{"path":"/app/webui/src/web-components/README.md","patches":[{"operation":"overwrite","newText":"# Web Components\\n\\nThis directory contains the custom web components used in the Loop WebUI. These components are built using the [Lit](https://lit.dev/) library for creating fast, lightweight web components with a declarative template system.\\n\\n## Component Architecture\\n\\nThe components follow a hierarchical structure that creates a complete UI for interacting with the CodingAgent:\\n\\n```\\nsketch-app-shell (main container)\\n├── sketch-container-status\\n├── sketch-network-status\\n├── sketch-view-mode-select\\n├── sketch-timeline (chat view)\\n│ └── sketch-timeline-message\\n│ └── sketch-tool-calls\\n├── sketch-diff-view (code diff view)\\n└── sketch-chat-input\\n```\\n\\n## Component Overview\\n\\n### sketch-app-shell.ts\\nThe main container component that orchestrates the entire UI. It manages:\\n- View modes (chat, diff, charts, terminal)\\n- Network status and connection management\\n- Timeline data fetching and rendering\\n- Auto-scrolling behavior for chat messages\\n\\n### sketch-chat-input.ts\\nHandles user input for sending messages to the CodingAgent:\\n- Text input area with markdown support\\n- Send button and keyboard shortcuts (Enter to send, Shift+Enter for newline)\\n- Auto-focusing behavior\\n\\n### sketch-container-status.ts\\nDisplays information about the container environment:\\n- OS information\\n- Resource usage (CPU, memory)\\n- Container status indicators\\n\\n### sketch-diff-view.ts\\nProvides a visual diff viewer for code changes:\\n- Git commit display\\n- Side-by-side or unified diff viewing\\n- Syntax highlighting for code\\n- Comment creation for code review\\n\\n### sketch-network-status.ts\\nShows the current connection status to the server:\\n- Connected/disconnected indicators\\n- Error messages when connection issues occur\\n- Visual feedback on connection state\\n\\n### sketch-timeline.ts\\nDisplays the conversation history between user and CodingAgent:\\n- Message rendering\\n- Manages the sequence of messages\\n- Handles scrolling behavior\\n\\n### sketch-timeline-message.ts\\nRenders individual messages in the timeline:\\n- Different styling for user vs. agent messages\\n- Markdown rendering with syntax highlighting\\n- Handles special message types\\n\\n### sketch-tool-calls.ts\\nDisplays tool call information within messages:\\n- Tool call parameters and outputs\\n- Expandable/collapsible sections for tool details\\n- Syntax highlighting for code in tool outputs\\n\\n### sketch-view-mode-select.ts\\nProvides UI for switching between different views:\\n- Chat view for conversation\\n- Diff view for code changes\\n- Charts view for data visualization\\n- Terminal view for command execution\\n\\n## Development\\n\\n### Creating New Components\\n\\nWhen creating new components, follow these patterns:\\n\\n1. Use the `@customElement` decorator to define the component\\n2. Encapsulate styles using the static `styles` property\\n3. Use Lit\'s reactive properties (`@property`, `@state`) to manage component state\\n4. Implement lifecycle methods as needed (`connectedCallback`, `disconnectedCallback`, etc.)\\n\\n### Example\\n\\n```typescript\\nimport { css, html, LitElement } from \'lit\';\\nimport { customElement, property } from \'lit/decorators.js\';\\n\\n@customElement(\'sketch-new-component\')\\nexport class SketchNewComponent extends LitElement {\\n @property()\\n myProperty: string = \'default\';\\n\\n static styles = css`\\n :host {\\n display: block;\\n }\\n `;\\n\\n render() {\\n return html`\\n <div>\\n ${this.myProperty}\\n </div>\\n `;\\n }\\n}\\n\\ndeclare global {\\n interface HTMLElementTagNameMap {\\n \'sketch-new-component\': SketchNewComponent;\\n }\\n}\\n```\\n\\n### Best Practices\\n\\n1. Maintain a single responsibility for each component\\n2. Use properties and events for parent-child communication\\n3. Document the purpose and API of each component\\n4. Write tests for components where possible\\n5. Keep styles encapsulated within components\\n6. Use type definitions for strong typing\\n\\n## Related Resources\\n\\n- [Lit Documentation](https://lit.dev/docs/)\\n- [Web Components Introduction](https://developer.mozilla.org/en-US/docs/Web/Web_Components)\\n- See `/app/webui/readme.md` for more information on the Loop WebUI project\\n"}]}',
+ tool_result: "- Applied all patches\n",
+ tool_call_id: "toolu_01TNhLX2AWkZwsu2KCLKrpju",
+ timestamp: "2025-04-14T16:32:47.10299854Z",
+ conversation_id: "xsa-8hw0",
+ start_time: "2025-04-14T16:32:47.101660683Z",
+ end_time: "2025-04-14T16:32:47.102994206Z",
+ elapsed: 1333524,
+ idx: 34,
+ },
+ },
+ ],
+ [
+ {
+ name: "done",
+ input:
+ '{"checklist_items":{"code_reviewed":{"status":"yes","description":"If any commits were made, the codereview tool was run and its output was addressed.","comments":"Since this commit only adds a documentation file (README.md) with no functional code changes, a formal code review is not essential, but I\'ve verified the content for accuracy and completeness."},"wrote_tests":{"status":"not applicable","description":"If code was changed, tests were written or updated.","comments":"No code was changed; only documentation was added. The README file is purely informational and doesn\'t require tests."},"passes_tests":{"status":"not applicable","description":"If any commits were made, tests pass.","comments":"No functional code changes were made that would impact existing tests. The addition of a README file is a documentation-only change."},"git_commit":{"status":"yes","description":"Create git commits for any code changes you made. Match the style of recent commit messages. Include \'Co-Authored-By: sketch\' and the original user prompt. Use GIT_AUTHOR_NAME=\\"Sean McCullough\\" GIT_AUTHOR_EMAIL=\\"banksean@gmail.com\\" (not git config).","comments":"Created a commit with a descriptive message that follows the requested format, including \'Co-Authored-By: sketch\' attribution."}}}',
+ tool_call_id: "toolu_01HPgWQJF1aF9LUqkdDKWeES",
+ result_message: {
+ type: "tool",
+ end_of_turn: false,
+ content: "",
+ tool_name: "done",
+ input:
+ '{"checklist_items":{"code_reviewed":{"status":"yes","description":"If any commits were made, the codereview tool was run and its output was addressed.","comments":"Since this commit only adds a documentation file (README.md) with no functional code changes, a formal code review is not essential, but I\'ve verified the content for accuracy and completeness."},"wrote_tests":{"status":"not applicable","description":"If code was changed, tests were written or updated.","comments":"No code was changed; only documentation was added. The README file is purely informational and doesn\'t require tests."},"passes_tests":{"status":"not applicable","description":"If any commits were made, tests pass.","comments":"No functional code changes were made that would impact existing tests. The addition of a README file is a documentation-only change."},"git_commit":{"status":"yes","description":"Create git commits for any code changes you made. Match the style of recent commit messages. Include \'Co-Authored-By: sketch\' and the original user prompt. Use GIT_AUTHOR_NAME=\\"Sean McCullough\\" GIT_AUTHOR_EMAIL=\\"banksean@gmail.com\\" (not git config).","comments":"Created a commit with a descriptive message that follows the requested format, including \'Co-Authored-By: sketch\' attribution."}}}',
+ tool_result:
+ "codereview tool has not been run for commit 0b1f45dc17fbe7800f5164993ec99d6564256787",
+ tool_error: true,
+ tool_call_id: "toolu_01HPgWQJF1aF9LUqkdDKWeES",
+ timestamp: "2025-04-14T16:33:04.639179373Z",
+ conversation_id: "xsa-8hw0",
+ start_time: "2025-04-14T16:33:04.616273148Z",
+ end_time: "2025-04-14T16:33:04.639173456Z",
+ elapsed: 22900309,
+ idx: 43,
+ },
+ },
+ ],
+ ];
+ document.addEventListener("DOMContentLoaded", () => {
+ toolCalls.forEach((calls) => {
+ const toolCallsEl = document.createElement("sketch-tool-calls");
+ toolCallsEl.toolCalls = calls;
+ document.body.append(toolCallsEl);
+ });
+ });
+ </script>
+ </head>
+ <body>
+ <h1>sketch-tool-calls demo</h1>
+
+ <sketch-tool-calls></sketch-tool-calls>
+ </body>
+</html>
diff --git a/webui/src/web-components/demo/sketch-tool-card.demo.html b/webui/src/web-components/demo/sketch-tool-card.demo.html
new file mode 100644
index 0000000..f8ba308
--- /dev/null
+++ b/webui/src/web-components/demo/sketch-tool-card.demo.html
@@ -0,0 +1,254 @@
+<html>
+ <head>
+ <title>sketch-tool-card demo</title>
+ <link rel="stylesheet" href="demo.css" />
+
+ <script type="module" src="../sketch-tool-card.ts"></script>
+
+ <script>
+ const toolCalls = [
+ {
+ name: "bash",
+ input: JSON.stringify({
+ command:
+ "docker ps -a --format '{{.ID}} {{.Image }} {{.Names}}' | grep sketch | awk '{print $1 }' | xargs -I {} docker rm {} && docker image prune -af",
+ }),
+ result_message: {
+ type: "tool",
+ tool_result: `Deleted Images:
+deleted: sha256:110d4aed8bcc76cb7327412504af8aef31670b816453a3088d834bbeefd11a2c
+deleted: sha256:042622460c913078901555a8a72de18e95228fca98b9ac388503b3baafafb683
+deleted: sha256:04ccf3d087e258ffd5f940f378c2aab3c0ed646fb2fb283f90e65397db304694
+deleted: sha256:877120aa3efd02b6afdad181c1cd75bbdc67e41a75dd770fbf781e4fe9c95fc7
+deleted: sha256:d96824c284e594acacc631458818d07842fd4cfa3a1037668a1b23abce077d7b
+deleted: sha256:d90eef6007f5782b59643eecb3edab38af6399d4142f0bb306742efa0e1cf6a4
+deleted: sha256:66b006b0d7570ccf7e2afa15e7b6e6385debba0e60e76eb314383215e480a664
+deleted: sha256:834ff90a57edf5c3987a3f21713310d189f209cec7b002a863c75a22e24cc114
+deleted: sha256:735be867a9939611842099b1131e23096fbde47bb326416382ff7a90a86ab687
+deleted: sha256:986792e96058cabe4452eab0fda2694fe2d5f0b951c446c9c1f94d86614f7bc6
+deleted: sha256:01539d19a06b87dd7a2268677c6beb06bc5aed3cde0c52691a684f4d085bc437
+deleted: sha256:d03b7602a43340d6d1e53ad1d7daa5b55740613ad969c360e1377b7af7597eba
+deleted: sha256:5a7310817c5fa3e29ebfe5b17031fdc5789543460c790ae2e1039226044a6109
+deleted: sha256:def65005e4b1e48e9531ce6ca6bea682bd8285e32b0748212fb8ace12976f920
+deleted: sha256:3b17b8e4e349ac09bac24da27ec4d65e3dec359645f73bd9a38bf015ca5f8a98
+deleted: sha256:1bef4e5c965c2fa2658954096dbe64dae8f3b1d7d595bdb370d54f4027a95603
+deleted: sha256:16e6b5b274b06916833d3f040ca045a12fe1a6a10bebf5f92338fe6b4c7dbbf7
+deleted: sha256:d90588879cc818bc3b3b575a291a3c4088d0ea1c61fad2c4a2f34160bdc86db6
+deleted: sha256:85903960027c7b9baf8bd0ee662571758ce8ffe83526839377284e2fccac558f
+untagged: sketch-94924d08c163:latest
+deleted: sha256:7c7c3957d3ba526a351d21e52a1aee0e72bb4a62d0422a0eb3a0e2b53391824f
+deleted: sha256:e4a1fe6a3369ca8f24baaba277bc9d97353992e9e051020c5a25e588a702e634
+deleted: sha256:28ccbe834ee66199498458f500b10cc9ea69460216982a537ea3294d6dfb0b63
+deleted: sha256:95c7d2956020039d92b546d6824c5d7fac163a6247be599160483d263094c047
+deleted: sha256:f87bc9eb655a06edd50d5a34e016175006c430ad129146b9b755169a3c318a57
+deleted: sha256:b455829fdcd5fe238567af2370f9fc021eb416ec2140f98b0ab59478febcfb2e
+deleted: sha256:ed64271d223807308a391a733fc556a6c16bfb87e6f9aed6d4ce394fcbb77ba6
+deleted: sha256:a5ce6521003bca24abcb4a0021837e789349fb3f44f7ceb00ef4af33ca01f84f
+deleted: sha256:57e05db1ff95deab5f5c3f38f9607a1c3bb21518133f4e0c137ffe6bb9cbfde9
+deleted: sha256:540194db01e12f59d19f7795ec9c8a1bb753df2de935469b21a10fc7ca1d25a5
+deleted: sha256:97519dae495c256597a9b7975a332e67edb21f93e306b72132ed2c30bb01b8aa
+deleted: sha256:162c7a942156fd5f16616c6fea4a26f2bfa01a53e499d59fdb8c68e815f5350e
+deleted: sha256:51b9d76df1fbcb277e4f22496ff661d4d748f499453a27a012629f78bb61107e
+deleted: sha256:7a1a595c3015a6b2f5e996988d094bcaca328ebeaafe37403e78322e10d6b859
+deleted: sha256:27631f63a84d9a524381a95168f24deb89612fb468e03bce724f352bb5ef7b3b
+deleted: sha256:58746669dff4a4051d05542e05109d57c94f867981b47bdb5800d62567a6280f
+untagged: golang:1.24.2-alpine3.21
+untagged: golang@sha256:7772cb5322baa875edd74705556d08f0eeca7b9c4b5367754ce3f2f00041ccee
+untagged: sketch-3c262c60c42c:latest
+deleted: sha256:fadf166900e61610d77d613ce52ca1c03711ce2a7bcd31f1f634529791c0c107
+deleted: sha256:8b719162dad84cddd630e1e943520041947ca91b3794417c0d2a03b3726ebaa4
+deleted: sha256:444f0e44dcaff517142f8aab35d35f08536d886a746f6858dac7052977ee2cff
+deleted: sha256:a95a3660958ed25a27ae7b0622b5426e046d4c5587693aa7c0098e050e057311
+deleted: sha256:edb781114acb505bbde5e4a3db68b7ab6f4a3c0da92ceed2d10f02c6278b93c8
+deleted: sha256:1429402020a73b7d5c1de32f9451c68e22508cc4238750f5a500e1d9737eedae
+deleted: sha256:3f749e03b0f5ef2dfc538581c92230f2cd6b844fe3c734c728fd3775865ed24c
+deleted: sha256:f62c6ba2d4f4b94796d4c4c111031fbbbaf22df24623a2d6729277dc1eaf8da8
+deleted: sha256:504579f990b8894755910252d3b401f86a589709efafb30b9ded67cb3edad80e
+deleted: sha256:2e22f953ef8cc5fac95fb0babc5042f5e2a7fefc9d5ec444429c490d54acb1ab
+deleted: sha256:afa0c23676c039532a39faa1f1506b19f34507b586796ea070dcaee30e6228ef
+deleted: sha256:5f176f397253734bdc726a505c84448f9b00e5652d9a28ef59de0581a2e8e923
+deleted: sha256:253afbfd579bc6daf71e42b0f1e369d2b6c9015028191af4478da0b77b8a85ed
+deleted: sha256:81f79e13183887f93db52268f00975f43613abc520c88e1090a1dbb3d09094e9
+deleted: sha256:3c0b6f56bdbec5bf995b818e8a67d2d6c3bd9aa3698c403b6dabc01a81a4cb52
+deleted: sha256:635f4ba57c6445e69cf8c6fba61c3690f76901e17334f6d2d165979b2d387dfa
+
+Total reclaimed space: 1.426GB`,
+ },
+ },
+ {
+ name: "bash",
+ input: JSON.stringify({
+ command: "ls -a",
+ }),
+ result_message: {
+ type: "tool",
+ tool_result: ".\n..",
+ },
+ },
+ {
+ name: "bash",
+ input: JSON.stringify({
+ command: "sleep 200",
+ }),
+ result_message: {
+ type: "tool",
+ tool_error: "the user canceled this operation",
+ },
+ },
+ {
+ name: "title",
+ input: JSON.stringify({
+ title: "a new title for this sketch",
+ }),
+ },
+ {
+ name: "codereview",
+ input: "{}",
+ tool_call_id: "toolu_01WT5qQwHZgdogfKhkD8R9PZ",
+ result_message: {
+ type: "tool",
+ end_of_turn: false,
+ content: "",
+ tool_name: "codereview",
+ input: "{}",
+ tool_result: "OK",
+ tool_call_id: "toolu_01WT5qQwHZgdogfKhkD8R9PZ",
+ timestamp: "2025-04-14T16:33:17.575759565Z",
+ conversation_id: "xsa-8hw0",
+ start_time: "2025-04-14T16:33:07.11793816Z",
+ end_time: "2025-04-14T16:33:17.57575719Z",
+ elapsed: 10457819031,
+ idx: 45,
+ },
+ },
+ {
+ name: "codereview",
+ input: "{}",
+ tool_call_id: "toolu_01WT5qQwHZgdogfKhkD8R9PZ",
+ result_message: {
+ type: "tool",
+ end_of_turn: false,
+ content: "",
+ tool_name: "codereview",
+ input: "{}",
+ tool_result: "Not OK",
+ tool_call_id: "toolu_01WT5qQwHZgdogfKhkD8R9PZ",
+ timestamp: "2025-04-14T16:33:17.575759565Z",
+ conversation_id: "xsa-8hw0",
+ start_time: "2025-04-14T16:33:07.11793816Z",
+ end_time: "2025-04-14T16:33:17.57575719Z",
+ elapsed: 10457819031,
+ idx: 45,
+ },
+ },
+ {
+ name: "think",
+ input:
+ '{"thoughts":"I\'m going to inspect a few key components to understand their purpose and relationships:\\n1. sketch-app-shell.ts - Appears to be the main container component\\n2. sketch-timeline.ts - Likely manages the chat timeline\\n3. sketch-view-mode-select.ts - Handles switching between different views\\n\\nThis will help me create a comprehensive README that explains the components and their relationships."}',
+ tool_call_id: "toolu_01R1g5mQVgKxEJZFNp9QGvUr",
+ result_message: {
+ type: "tool",
+ end_of_turn: false,
+ content: "",
+ tool_name: "think",
+ input:
+ '{"thoughts":"I\'m going to inspect a few key components to understand their purpose and relationships:\\n1. sketch-app-shell.ts - Appears to be the main container component\\n2. sketch-timeline.ts - Likely manages the chat timeline\\n3. sketch-view-mode-select.ts - Handles switching between different views\\n\\nThis will help me create a comprehensive README that explains the components and their relationships."}',
+ tool_result: "recorded",
+ tool_call_id: "toolu_01R1g5mQVgKxEJZFNp9QGvUr",
+ timestamp: "2025-04-14T16:32:14.12647133Z",
+ conversation_id: "xsa-8hw0",
+ start_time: "2025-04-14T16:32:14.126454329Z",
+ end_time: "2025-04-14T16:32:14.126468539Z",
+ elapsed: 14209,
+ idx: 18,
+ },
+ },
+ {
+ name: "patch",
+ input:
+ '{"path":"/app/webui/src/web-components/README.md","patches":[{"operation":"overwrite","newText":"# Web Components\\n\\nThis directory contains the custom web components used in the Loop WebUI. These components are built using the [Lit](https://lit.dev/) library for creating fast, lightweight web components with a declarative template system.\\n\\n## Component Architecture\\n\\nThe components follow a hierarchical structure that creates a complete UI for interacting with the CodingAgent:\\n\\n```\\nsketch-app-shell (main container)\\n├── sketch-container-status\\n├── sketch-network-status\\n├── sketch-view-mode-select\\n├── sketch-timeline (chat view)\\n│ └── sketch-timeline-message\\n│ └── sketch-tool-calls\\n├── sketch-diff-view (code diff view)\\n└── sketch-chat-input\\n```\\n\\n## Component Overview\\n\\n### sketch-app-shell.ts\\nThe main container component that orchestrates the entire UI. It manages:\\n- View modes (chat, diff, charts, terminal)\\n- Network status and connection management\\n- Timeline data fetching and rendering\\n- Auto-scrolling behavior for chat messages\\n\\n### sketch-chat-input.ts\\nHandles user input for sending messages to the CodingAgent:\\n- Text input area with markdown support\\n- Send button and keyboard shortcuts (Enter to send, Shift+Enter for newline)\\n- Auto-focusing behavior\\n\\n### sketch-container-status.ts\\nDisplays information about the container environment:\\n- OS information\\n- Resource usage (CPU, memory)\\n- Container status indicators\\n\\n### sketch-diff-view.ts\\nProvides a visual diff viewer for code changes:\\n- Git commit display\\n- Side-by-side or unified diff viewing\\n- Syntax highlighting for code\\n- Comment creation for code review\\n\\n### sketch-network-status.ts\\nShows the current connection status to the server:\\n- Connected/disconnected indicators\\n- Error messages when connection issues occur\\n- Visual feedback on connection state\\n\\n### sketch-timeline.ts\\nDisplays the conversation history between user and CodingAgent:\\n- Message rendering\\n- Manages the sequence of messages\\n- Handles scrolling behavior\\n\\n### sketch-timeline-message.ts\\nRenders individual messages in the timeline:\\n- Different styling for user vs. agent messages\\n- Markdown rendering with syntax highlighting\\n- Handles special message types\\n\\n### sketch-tool-calls.ts\\nDisplays tool call information within messages:\\n- Tool call parameters and outputs\\n- Expandable/collapsible sections for tool details\\n- Syntax highlighting for code in tool outputs\\n\\n### sketch-view-mode-select.ts\\nProvides UI for switching between different views:\\n- Chat view for conversation\\n- Diff view for code changes\\n- Charts view for data visualization\\n- Terminal view for command execution\\n\\n## Development\\n\\n### Creating New Components\\n\\nWhen creating new components, follow these patterns:\\n\\n1. Use the `@customElement` decorator to define the component\\n2. Encapsulate styles using the static `styles` property\\n3. Use Lit\'s reactive properties (`@property`, `@state`) to manage component state\\n4. Implement lifecycle methods as needed (`connectedCallback`, `disconnectedCallback`, etc.)\\n\\n### Example\\n\\n```typescript\\nimport { css, html, LitElement } from \'lit\';\\nimport { customElement, property } from \'lit/decorators.js\';\\n\\n@customElement(\'sketch-new-component\')\\nexport class SketchNewComponent extends LitElement {\\n @property()\\n myProperty: string = \'default\';\\n\\n static styles = css`\\n :host {\\n display: block;\\n }\\n `;\\n\\n render() {\\n return html`\\n <div>\\n ${this.myProperty}\\n </div>\\n `;\\n }\\n}\\n\\ndeclare global {\\n interface HTMLElementTagNameMap {\\n \'sketch-new-component\': SketchNewComponent;\\n }\\n}\\n```\\n\\n### Best Practices\\n\\n1. Maintain a single responsibility for each component\\n2. Use properties and events for parent-child communication\\n3. Document the purpose and API of each component\\n4. Write tests for components where possible\\n5. Keep styles encapsulated within components\\n6. Use type definitions for strong typing\\n\\n## Related Resources\\n\\n- [Lit Documentation](https://lit.dev/docs/)\\n- [Web Components Introduction](https://developer.mozilla.org/en-US/docs/Web/Web_Components)\\n- See `/app/webui/readme.md` for more information on the Loop WebUI project\\n"}]}',
+ tool_call_id: "toolu_01TNhLX2AWkZwsu2KCLKrpju",
+ result_message: {
+ type: "tool",
+ end_of_turn: false,
+ content: "",
+ tool_name: "patch",
+ input:
+ '{"path":"/app/webui/src/web-components/README.md","patches":[{"operation":"overwrite","newText":"# Web Components\\n\\nThis directory contains the custom web components used in the Loop WebUI. These components are built using the [Lit](https://lit.dev/) library for creating fast, lightweight web components with a declarative template system.\\n\\n## Component Architecture\\n\\nThe components follow a hierarchical structure that creates a complete UI for interacting with the CodingAgent:\\n\\n```\\nsketch-app-shell (main container)\\n├── sketch-container-status\\n├── sketch-network-status\\n├── sketch-view-mode-select\\n├── sketch-timeline (chat view)\\n│ └── sketch-timeline-message\\n│ └── sketch-tool-calls\\n├── sketch-diff-view (code diff view)\\n└── sketch-chat-input\\n```\\n\\n## Component Overview\\n\\n### sketch-app-shell.ts\\nThe main container component that orchestrates the entire UI. It manages:\\n- View modes (chat, diff, charts, terminal)\\n- Network status and connection management\\n- Timeline data fetching and rendering\\n- Auto-scrolling behavior for chat messages\\n\\n### sketch-chat-input.ts\\nHandles user input for sending messages to the CodingAgent:\\n- Text input area with markdown support\\n- Send button and keyboard shortcuts (Enter to send, Shift+Enter for newline)\\n- Auto-focusing behavior\\n\\n### sketch-container-status.ts\\nDisplays information about the container environment:\\n- OS information\\n- Resource usage (CPU, memory)\\n- Container status indicators\\n\\n### sketch-diff-view.ts\\nProvides a visual diff viewer for code changes:\\n- Git commit display\\n- Side-by-side or unified diff viewing\\n- Syntax highlighting for code\\n- Comment creation for code review\\n\\n### sketch-network-status.ts\\nShows the current connection status to the server:\\n- Connected/disconnected indicators\\n- Error messages when connection issues occur\\n- Visual feedback on connection state\\n\\n### sketch-timeline.ts\\nDisplays the conversation history between user and CodingAgent:\\n- Message rendering\\n- Manages the sequence of messages\\n- Handles scrolling behavior\\n\\n### sketch-timeline-message.ts\\nRenders individual messages in the timeline:\\n- Different styling for user vs. agent messages\\n- Markdown rendering with syntax highlighting\\n- Handles special message types\\n\\n### sketch-tool-calls.ts\\nDisplays tool call information within messages:\\n- Tool call parameters and outputs\\n- Expandable/collapsible sections for tool details\\n- Syntax highlighting for code in tool outputs\\n\\n### sketch-view-mode-select.ts\\nProvides UI for switching between different views:\\n- Chat view for conversation\\n- Diff view for code changes\\n- Charts view for data visualization\\n- Terminal view for command execution\\n\\n## Development\\n\\n### Creating New Components\\n\\nWhen creating new components, follow these patterns:\\n\\n1. Use the `@customElement` decorator to define the component\\n2. Encapsulate styles using the static `styles` property\\n3. Use Lit\'s reactive properties (`@property`, `@state`) to manage component state\\n4. Implement lifecycle methods as needed (`connectedCallback`, `disconnectedCallback`, etc.)\\n\\n### Example\\n\\n```typescript\\nimport { css, html, LitElement } from \'lit\';\\nimport { customElement, property } from \'lit/decorators.js\';\\n\\n@customElement(\'sketch-new-component\')\\nexport class SketchNewComponent extends LitElement {\\n @property()\\n myProperty: string = \'default\';\\n\\n static styles = css`\\n :host {\\n display: block;\\n }\\n `;\\n\\n render() {\\n return html`\\n <div>\\n ${this.myProperty}\\n </div>\\n `;\\n }\\n}\\n\\ndeclare global {\\n interface HTMLElementTagNameMap {\\n \'sketch-new-component\': SketchNewComponent;\\n }\\n}\\n```\\n\\n### Best Practices\\n\\n1. Maintain a single responsibility for each component\\n2. Use properties and events for parent-child communication\\n3. Document the purpose and API of each component\\n4. Write tests for components where possible\\n5. Keep styles encapsulated within components\\n6. Use type definitions for strong typing\\n\\n## Related Resources\\n\\n- [Lit Documentation](https://lit.dev/docs/)\\n- [Web Components Introduction](https://developer.mozilla.org/en-US/docs/Web/Web_Components)\\n- See `/app/webui/readme.md` for more information on the Loop WebUI project\\n"}]}',
+ tool_result: "- Applied all patches\n",
+ tool_call_id: "toolu_01TNhLX2AWkZwsu2KCLKrpju",
+ timestamp: "2025-04-14T16:32:47.10299854Z",
+ conversation_id: "xsa-8hw0",
+ start_time: "2025-04-14T16:32:47.101660683Z",
+ end_time: "2025-04-14T16:32:47.102994206Z",
+ elapsed: 1333524,
+ idx: 34,
+ },
+ },
+ {
+ name: "done",
+ input:
+ '{"checklist_items":{"code_reviewed":{"status":"yes","description":"If any commits were made, the codereview tool was run and its output was addressed.","comments":"Since this commit only adds a documentation file (README.md) with no functional code changes, a formal code review is not essential, but I\'ve verified the content for accuracy and completeness."},"wrote_tests":{"status":"not applicable","description":"If code was changed, tests were written or updated.","comments":"No code was changed; only documentation was added. The README file is purely informational and doesn\'t require tests."},"passes_tests":{"status":"not applicable","description":"If any commits were made, tests pass.","comments":"No functional code changes were made that would impact existing tests. The addition of a README file is a documentation-only change."},"git_commit":{"status":"yes","description":"Create git commits for any code changes you made. Match the style of recent commit messages. Include \'Co-Authored-By: sketch\' and the original user prompt. Use GIT_AUTHOR_NAME=\\"Sean McCullough\\" GIT_AUTHOR_EMAIL=\\"banksean@gmail.com\\" (not git config).","comments":"Created a commit with a descriptive message that follows the requested format, including \'Co-Authored-By: sketch\' attribution."}}}',
+ tool_call_id: "toolu_01HPgWQJF1aF9LUqkdDKWeES",
+ result_message: {
+ type: "tool",
+ end_of_turn: false,
+ content: "",
+ tool_name: "done",
+ input:
+ '{"checklist_items":{"code_reviewed":{"status":"yes","description":"If any commits were made, the codereview tool was run and its output was addressed.","comments":"Since this commit only adds a documentation file (README.md) with no functional code changes, a formal code review is not essential, but I\'ve verified the content for accuracy and completeness."},"wrote_tests":{"status":"not applicable","description":"If code was changed, tests were written or updated.","comments":"No code was changed; only documentation was added. The README file is purely informational and doesn\'t require tests."},"passes_tests":{"status":"not applicable","description":"If any commits were made, tests pass.","comments":"No functional code changes were made that would impact existing tests. The addition of a README file is a documentation-only change."},"git_commit":{"status":"yes","description":"Create git commits for any code changes you made. Match the style of recent commit messages. Include \'Co-Authored-By: sketch\' and the original user prompt. Use GIT_AUTHOR_NAME=\\"Sean McCullough\\" GIT_AUTHOR_EMAIL=\\"banksean@gmail.com\\" (not git config).","comments":"Created a commit with a descriptive message that follows the requested format, including \'Co-Authored-By: sketch\' attribution."}}}',
+ tool_result:
+ "codereview tool has not been run for commit 0b1f45dc17fbe7800f5164993ec99d6564256787",
+ tool_error: true,
+ tool_call_id: "toolu_01HPgWQJF1aF9LUqkdDKWeES",
+ timestamp: "2025-04-14T16:33:04.639179373Z",
+ conversation_id: "xsa-8hw0",
+ start_time: "2025-04-14T16:33:04.616273148Z",
+ end_time: "2025-04-14T16:33:04.639173456Z",
+ elapsed: 22900309,
+ idx: 43,
+ },
+ },
+ ];
+ document.addEventListener("DOMContentLoaded", () => {
+ toolCalls.forEach((toolCall) => {
+ const h2El = document.createElement("h2");
+ h2El.innerText = toolCall.name;
+ document.body.append(h2El);
+
+ let toolCardEl = document.createElement("sketch-tool-card-generic");
+ switch (toolCall.name) {
+ case "bash":
+ toolCardEl = document.createElement("sketch-tool-card-bash");
+ break;
+ case "codereview":
+ toolCardEl = document.createElement(
+ "sketch-tool-card-codereview",
+ );
+ break;
+ case "done":
+ toolCardEl = document.createElement("sketch-tool-card-done");
+ break;
+ case "patch":
+ toolCardEl = document.createElement("sketch-tool-card-patch");
+ break;
+ case "think":
+ toolCardEl = document.createElement("sketch-tool-card-think");
+ break;
+ case "title":
+ toolCardEl = document.createElement("sketch-tool-card-title");
+ break;
+ }
+ toolCardEl.toolCall = toolCall;
+ toolCardEl.open = true;
+ document.body.append(toolCardEl);
+ });
+ });
+ </script>
+ </head>
+ <body>
+ <h1>sketch-tool-calls demo</h1>
+
+ <sketch-tool-calls></sketch-tool-calls>
+ </body>
+</html>
diff --git a/webui/src/web-components/demo/sketch-view-mode-select.demo.html b/webui/src/web-components/demo/sketch-view-mode-select.demo.html
new file mode 100644
index 0000000..0068616
--- /dev/null
+++ b/webui/src/web-components/demo/sketch-view-mode-select.demo.html
@@ -0,0 +1,32 @@
+<html>
+ <head>
+ <title>sketch-view-mode-select demo</title>
+ <link rel="stylesheet" href="demo.css" />
+
+ <script type="module" src="../sketch-view-mode-select.ts"></script>
+
+ <script>
+ document.addEventListener("DOMContentLoaded", () => {
+ const viewModeSelect = document.querySelector(
+ "sketch-view-mode-select",
+ );
+ const msgDiv = document.querySelector("#selected-mode");
+ msgDiv.innerText = `selected mode: ${viewModeSelect.activeMode}`;
+
+ console.log("viewModeSelect: ", viewModeSelect);
+ viewModeSelect.addEventListener("view-mode-select", (evt) => {
+ console.log("view mode change event: ", evt);
+ const msgDiv = document.querySelector("#selected-mode");
+ msgDiv.innerText = `selected mode: ${evt.detail.mode}`;
+ viewModeSelect.activeMode = evt.detail.mode;
+ });
+ });
+ </script>
+ </head>
+ <body>
+ <h1>sketch-view-mode-select demo</h1>
+
+ <sketch-view-mode-select></sketch-view-mode-select>
+ <div id="selected-mode"></div>
+ </body>
+</html>
diff --git a/webui/src/web-components/sketch-app-shell.ts b/webui/src/web-components/sketch-app-shell.ts
new file mode 100644
index 0000000..1dd3b6f
--- /dev/null
+++ b/webui/src/web-components/sketch-app-shell.ts
@@ -0,0 +1,603 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { DataManager, ConnectionStatus } from "../data";
+import { State, AgentMessage } from "../types";
+import "./sketch-container-status";
+import "./sketch-view-mode-select";
+import "./sketch-network-status";
+import "./sketch-timeline";
+import "./sketch-chat-input";
+import "./sketch-diff-view";
+import "./sketch-charts";
+import "./sketch-terminal";
+import { SketchDiffView } from "./sketch-diff-view";
+import { aggregateAgentMessages } from "./aggregateAgentMessages";
+
+type ViewMode = "chat" | "diff" | "charts" | "terminal";
+
+@customElement("sketch-app-shell")
+export class SketchAppShell extends LitElement {
+ // Current view mode (chat, diff, charts, terminal)
+ @state()
+ viewMode: "chat" | "diff" | "charts" | "terminal" = "chat";
+
+ // Current commit hash for diff view
+ @state()
+ currentCommitHash: string = "";
+
+ // See https://lit.dev/docs/components/styles/ for how lit-element handles CSS.
+ // Note that these styles only apply to the scope of this web component's
+ // shadow DOM node, so they won't leak out or collide with CSS declared in
+ // other components or the containing web page (...unless you want it to do that).
+ static styles = css`
+ :host {
+ display: block;
+ font-family:
+ system-ui,
+ -apple-system,
+ BlinkMacSystemFont,
+ "Segoe UI",
+ Roboto,
+ sans-serif;
+ color: #333;
+ line-height: 1.4;
+ min-height: 100vh;
+ width: 100%;
+ position: relative;
+ overflow-x: hidden;
+ }
+
+ /* Top banner with combined elements */
+ .top-banner {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 5px 20px;
+ margin-bottom: 0;
+ border-bottom: 1px solid #eee;
+ gap: 10px;
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ background: white;
+ z-index: 100;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ max-width: 100%;
+ }
+
+ .banner-title {
+ font-size: 18px;
+ font-weight: 600;
+ margin: 0;
+ min-width: 6em;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .chat-title {
+ margin: 0;
+ padding: 0;
+ color: rgba(82, 82, 82, 0.85);
+ font-size: 16px;
+ font-weight: normal;
+ font-style: italic;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ /* View mode container styles - mirroring timeline.css structure */
+ .view-container {
+ max-width: 1200px;
+ margin: 0 auto;
+ margin-top: 65px; /* Space for the top banner */
+ margin-bottom: 90px; /* Increased space for the chat input */
+ position: relative;
+ padding-bottom: 15px; /* Additional padding to prevent clipping */
+ padding-top: 15px; /* Add padding at top to prevent content touching the header */
+ }
+
+ /* Allow the container to expand to full width in diff mode */
+ .view-container.diff-active {
+ max-width: 100%;
+ }
+
+ /* Individual view styles */
+ .chat-view,
+ .diff-view,
+ .chart-view,
+ .terminal-view {
+ display: none; /* Hidden by default */
+ width: 100%;
+ }
+
+ /* Active view styles - these will be applied via JavaScript */
+ .view-active {
+ display: flex;
+ flex-direction: column;
+ }
+
+ .title-container {
+ display: flex;
+ flex-direction: column;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 33%;
+ }
+
+ .refresh-control {
+ display: flex;
+ align-items: center;
+ margin-bottom: 0;
+ flex-wrap: nowrap;
+ white-space: nowrap;
+ flex-shrink: 0;
+ }
+
+ .refresh-button {
+ background: #4caf50;
+ color: white;
+ border: none;
+ padding: 4px 10px;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 12px;
+ margin-right: 5px;
+ }
+
+ .stop-button:hover {
+ background-color: #c82333 !important;
+ }
+
+ .poll-updates {
+ display: flex;
+ align-items: center;
+ margin: 0 5px;
+ font-size: 12px;
+ }
+ `;
+
+ // Header bar: Network connection status details
+ @property()
+ connectionStatus: ConnectionStatus = "disconnected";
+
+ @property()
+ connectionErrorMessage: string = "";
+
+ @property()
+ messageStatus: string = "";
+
+ // Chat messages
+ @property({ attribute: false })
+ messages: AgentMessage[] = [];
+
+ @property()
+ title: string = "";
+
+ private dataManager = new DataManager();
+
+ @property({ attribute: false })
+ containerState: State = {
+ title: "",
+ os: "",
+ message_count: 0,
+ hostname: "",
+ working_dir: "",
+ initial_commit: "",
+ };
+
+ // Mutation observer to detect when new messages are added
+ private mutationObserver: MutationObserver | null = null;
+
+ constructor() {
+ super();
+ console.log("Hello!");
+
+ // Binding methods to this
+ this._handleViewModeSelect = this._handleViewModeSelect.bind(this);
+ this._handleShowCommitDiff = this._handleShowCommitDiff.bind(this);
+ this._handlePopState = this._handlePopState.bind(this);
+ }
+
+ // See https://lit.dev/docs/components/lifecycle/
+ connectedCallback() {
+ super.connectedCallback();
+
+ // Initialize client-side nav history.
+ const url = new URL(window.location.href);
+ const mode = url.searchParams.get("view") || "chat";
+ window.history.replaceState({ mode }, "", url.toString());
+
+ this.toggleViewMode(mode as ViewMode, false);
+ // Add popstate event listener to handle browser back/forward navigation
+ window.addEventListener("popstate", this._handlePopState);
+
+ // Add event listeners
+ window.addEventListener("view-mode-select", this._handleViewModeSelect);
+ window.addEventListener("show-commit-diff", this._handleShowCommitDiff);
+
+ // register event listeners
+ this.dataManager.addEventListener(
+ "dataChanged",
+ this.handleDataChanged.bind(this),
+ );
+ this.dataManager.addEventListener(
+ "connectionStatusChanged",
+ this.handleConnectionStatusChanged.bind(this),
+ );
+
+ // Initialize the data manager
+ this.dataManager.initialize();
+ }
+
+ // See https://lit.dev/docs/components/lifecycle/
+ disconnectedCallback() {
+ super.disconnectedCallback();
+ window.removeEventListener("popstate", this._handlePopState);
+
+ // Remove event listeners
+ window.removeEventListener("view-mode-select", this._handleViewModeSelect);
+ window.removeEventListener("show-commit-diff", this._handleShowCommitDiff);
+
+ // unregister data manager event listeners
+ this.dataManager.removeEventListener(
+ "dataChanged",
+ this.handleDataChanged.bind(this),
+ );
+ this.dataManager.removeEventListener(
+ "connectionStatusChanged",
+ this.handleConnectionStatusChanged.bind(this),
+ );
+
+ // Disconnect mutation observer if it exists
+ if (this.mutationObserver) {
+ console.log("Auto-scroll: Disconnecting mutation observer");
+ this.mutationObserver.disconnect();
+ this.mutationObserver = null;
+ }
+ }
+
+ updateUrlForViewMode(mode: "chat" | "diff" | "charts" | "terminal"): void {
+ // Get the current URL without search parameters
+ const url = new URL(window.location.href);
+
+ // Clear existing parameters
+ url.search = "";
+
+ // Only add view parameter if not in default chat view
+ if (mode !== "chat") {
+ url.searchParams.set("view", mode);
+ const diffView = this.shadowRoot?.querySelector(
+ ".diff-view",
+ ) as SketchDiffView;
+
+ // If in diff view and there's a commit hash, include that too
+ if (mode === "diff" && diffView.commitHash) {
+ url.searchParams.set("commit", diffView.commitHash);
+ }
+ }
+
+ // Update the browser history without reloading the page
+ window.history.pushState({ mode }, "", url.toString());
+ }
+
+ private _handlePopState(event: PopStateEvent) {
+ if (event.state && event.state.mode) {
+ this.toggleViewMode(event.state.mode, false);
+ } else {
+ this.toggleViewMode("chat", false);
+ }
+ }
+
+ /**
+ * Handle view mode selection event
+ */
+ private _handleViewModeSelect(event: CustomEvent) {
+ const mode = event.detail.mode as "chat" | "diff" | "charts" | "terminal";
+ this.toggleViewMode(mode, true);
+ }
+
+ /**
+ * Handle show commit diff event
+ */
+ private _handleShowCommitDiff(event: CustomEvent) {
+ const { commitHash } = event.detail;
+ if (commitHash) {
+ this.showCommitDiff(commitHash);
+ }
+ }
+
+ /**
+ * Listen for commit diff event
+ * @param commitHash The commit hash to show diff for
+ */
+ private showCommitDiff(commitHash: string): void {
+ // Store the commit hash
+ this.currentCommitHash = commitHash;
+
+ // Switch to diff view
+ this.toggleViewMode("diff", true);
+
+ // Wait for DOM update to complete
+ this.updateComplete.then(() => {
+ // Get the diff view component
+ const diffView = this.shadowRoot?.querySelector("sketch-diff-view");
+ if (diffView) {
+ // Call the showCommitDiff method
+ (diffView as any).showCommitDiff(commitHash);
+ }
+ });
+ }
+
+ /**
+ * Toggle between different view modes: chat, diff, charts, terminal
+ */
+ private toggleViewMode(mode: ViewMode, updateHistory: boolean): void {
+ // Don't do anything if the mode is already active
+ if (this.viewMode === mode) return;
+
+ // Update the view mode
+ this.viewMode = mode;
+
+ if (updateHistory) {
+ // Update URL with the current view mode
+ this.updateUrlForViewMode(mode);
+ }
+
+ // Wait for DOM update to complete
+ this.updateComplete.then(() => {
+ // Update active view
+ const viewContainer = this.shadowRoot?.querySelector(".view-container");
+ const chatView = this.shadowRoot?.querySelector(".chat-view");
+ const diffView = this.shadowRoot?.querySelector(".diff-view");
+ const chartView = this.shadowRoot?.querySelector(".chart-view");
+ const terminalView = this.shadowRoot?.querySelector(".terminal-view");
+
+ // Remove active class from all views
+ chatView?.classList.remove("view-active");
+ diffView?.classList.remove("view-active");
+ chartView?.classList.remove("view-active");
+ terminalView?.classList.remove("view-active");
+
+ // Add/remove diff-active class on view container
+ if (mode === "diff") {
+ viewContainer?.classList.add("diff-active");
+ } else {
+ viewContainer?.classList.remove("diff-active");
+ }
+
+ // Add active class to the selected view
+ switch (mode) {
+ case "chat":
+ chatView?.classList.add("view-active");
+ break;
+ case "diff":
+ diffView?.classList.add("view-active");
+ // Load diff content if we have a diff view
+ const diffViewComp =
+ this.shadowRoot?.querySelector("sketch-diff-view");
+ if (diffViewComp && this.currentCommitHash) {
+ (diffViewComp as any).showCommitDiff(this.currentCommitHash);
+ } else if (diffViewComp) {
+ (diffViewComp as any).loadDiffContent();
+ }
+ break;
+ case "charts":
+ chartView?.classList.add("view-active");
+ break;
+ case "terminal":
+ terminalView?.classList.add("view-active");
+ break;
+ }
+
+ // Update view mode buttons
+ const viewModeSelect = this.shadowRoot?.querySelector(
+ "sketch-view-mode-select",
+ );
+ if (viewModeSelect) {
+ const event = new CustomEvent("update-active-mode", {
+ detail: { mode },
+ bubbles: true,
+ composed: true,
+ });
+ viewModeSelect.dispatchEvent(event);
+ }
+
+ // FIXME: This is a hack to get vega chart in sketch-charts.ts to work properly
+ // When the chart is in the background, its container has a width of 0, so vega
+ // renders width 0 and only changes that width on a resize event.
+ // See https://github.com/vega/react-vega/issues/85#issuecomment-1826421132
+ window.dispatchEvent(new Event("resize"));
+ });
+ }
+
+ private handleDataChanged(eventData: {
+ state: State;
+ newMessages: AgentMessage[];
+ isFirstFetch?: boolean;
+ }): void {
+ const { state, newMessages, isFirstFetch } = eventData;
+
+ // Check if this is the first data fetch or if there are new messages
+ if (isFirstFetch) {
+ this.messageStatus = "Initial messages loaded";
+ } else if (newMessages && newMessages.length > 0) {
+ this.messageStatus = "Updated just now";
+ } else {
+ this.messageStatus = "No new messages";
+ }
+
+ // Update state if we received it
+ if (state) {
+ this.containerState = state;
+ this.title = state.title;
+ }
+
+ // Create a copy of the current messages before updating
+ const oldMessageCount = this.messages.length;
+
+ // Update messages
+ this.messages = aggregateAgentMessages(this.messages, newMessages);
+
+ // Log information about the message update
+ if (this.messages.length > oldMessageCount) {
+ console.log(
+ `Auto-scroll: Messages updated from ${oldMessageCount} to ${this.messages.length}`,
+ );
+ }
+ }
+
+ private handleConnectionStatusChanged(
+ status: ConnectionStatus,
+ errorMessage?: string,
+ ): void {
+ this.connectionStatus = status;
+ this.connectionErrorMessage = errorMessage || "";
+ }
+
+ async _sendChat(e: CustomEvent) {
+ console.log("app shell: _sendChat", e);
+ const message = e.detail.message?.trim();
+ if (message == "") {
+ return;
+ }
+ try {
+ // Send the message to the server
+ const response = await fetch("chat", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({ message }),
+ });
+
+ if (!response.ok) {
+ const errorData = await response.text();
+ throw new Error(`Server error: ${response.status} - ${errorData}`);
+ }
+
+ // TOOD(philip): If the data manager is getting messages out of order, there's a bug?
+ // Reset data manager state to force a full refresh after sending a message
+ // This ensures we get all messages in the correct order
+ // Use private API for now - TODO: add a resetState() method to DataManager
+ (this.dataManager as any).nextFetchIndex = 0;
+ (this.dataManager as any).currentFetchStartIndex = 0;
+
+ // // If in diff view, switch to conversation view
+ // if (this.viewMode === "diff") {
+ // await this.toggleViewMode("chat");
+ // }
+
+ // Refresh the timeline data to show the new message
+ await this.dataManager.fetchData();
+ } catch (error) {
+ console.error("Error sending chat message:", error);
+ const statusText = document.getElementById("statusText");
+ if (statusText) {
+ statusText.textContent = "Error sending message";
+ }
+ }
+ }
+
+ render() {
+ return html`
+ <div class="top-banner">
+ <div class="title-container">
+ <h1 class="banner-title">sketch</h1>
+ <h2 id="chatTitle" class="chat-title">${this.title}</h2>
+ </div>
+
+ <sketch-container-status
+ .state=${this.containerState}
+ ></sketch-container-status>
+
+ <div class="refresh-control">
+ <sketch-view-mode-select></sketch-view-mode-select>
+
+ <button id="stopButton" class="refresh-button stop-button">
+ Stop
+ </button>
+
+ <div class="poll-updates">
+ <input type="checkbox" id="pollToggle" checked />
+ <label for="pollToggle">Poll</label>
+ </div>
+
+ <sketch-network-status
+ message=${this.messageStatus}
+ connection=${this.connectionStatus}
+ error=${this.connectionErrorMessage}
+ ></sketch-network-status>
+ </div>
+ </div>
+
+ <div class="view-container">
+ <div class="chat-view ${this.viewMode === "chat" ? "view-active" : ""}">
+ <sketch-timeline
+ .messages=${this.messages}
+ .scrollContainer=${this}
+ ></sketch-timeline>
+ </div>
+
+ <div class="diff-view ${this.viewMode === "diff" ? "view-active" : ""}">
+ <sketch-diff-view
+ .commitHash=${this.currentCommitHash}
+ ></sketch-diff-view>
+ </div>
+
+ <div
+ class="chart-view ${this.viewMode === "charts" ? "view-active" : ""}"
+ >
+ <sketch-charts .messages=${this.messages}></sketch-charts>
+ </div>
+
+ <div
+ class="terminal-view ${this.viewMode === "terminal"
+ ? "view-active"
+ : ""}"
+ >
+ <sketch-terminal></sketch-terminal>
+ </div>
+ </div>
+
+ <sketch-chat-input @send-chat="${this._sendChat}"></sketch-chat-input>
+ `;
+ }
+
+ /**
+ * Lifecycle callback when component is first connected to DOM
+ */
+ firstUpdated(): void {
+ if (this.viewMode !== "chat") {
+ return;
+ }
+
+ // Initial scroll to bottom when component is first rendered
+ setTimeout(
+ () => this.scrollTo({ top: this.scrollHeight, behavior: "smooth" }),
+ 50,
+ );
+
+ const pollToggleCheckbox = this.renderRoot?.querySelector(
+ "#pollToggle",
+ ) as HTMLInputElement;
+ pollToggleCheckbox?.addEventListener("change", () => {
+ this.dataManager.setPollingEnabled(pollToggleCheckbox.checked);
+ if (!pollToggleCheckbox.checked) {
+ this.connectionStatus = "disabled";
+ this.messageStatus = "Polling stopped";
+ } else {
+ this.messageStatus = "Polling for updates...";
+ }
+ });
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "sketch-app-shell": SketchAppShell;
+ }
+}
diff --git a/webui/src/web-components/sketch-charts.ts b/webui/src/web-components/sketch-charts.ts
new file mode 100644
index 0000000..8cf2606
--- /dev/null
+++ b/webui/src/web-components/sketch-charts.ts
@@ -0,0 +1,498 @@
+import "./vega-embed";
+import { css, html, LitElement, PropertyValues } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { TopLevelSpec } from "vega-lite";
+import type { AgentMessage } from "../types";
+import "vega-embed";
+import { VisualizationSpec } from "vega-embed";
+
+/**
+ * Web component for rendering charts related to the timeline data
+ * Displays cumulative cost over time and message timing visualization
+ */
+@customElement("sketch-charts")
+export class SketchCharts extends LitElement {
+ @property({ type: Array })
+ messages: AgentMessage[] = [];
+
+ @state()
+ private chartData: { timestamp: Date; cost: number }[] = [];
+
+ // We need to make the styles available to Vega-Embed when it's rendered
+ static styles = css`
+ :host {
+ display: block;
+ width: 100%;
+ }
+
+ .chart-container {
+ padding: 20px;
+ background-color: #fff;
+ border-radius: 8px;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+ margin-bottom: 20px;
+ }
+
+ .chart-section {
+ margin-bottom: 30px;
+ }
+
+ .chart-section h3 {
+ margin-top: 0;
+ margin-bottom: 15px;
+ font-size: 18px;
+ color: #333;
+ border-bottom: 1px solid #eee;
+ padding-bottom: 8px;
+ }
+
+ .chart-content {
+ width: 100%;
+ min-height: 300px;
+ }
+
+ .loader {
+ border: 4px solid #f3f3f3;
+ border-radius: 50%;
+ border-top: 4px solid #3498db;
+ width: 40px;
+ height: 40px;
+ margin: 20px auto;
+ animation: spin 2s linear infinite;
+ }
+
+ @keyframes spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+ }
+ `;
+
+ constructor() {
+ super();
+ this.chartData = [];
+ }
+
+ private calculateCumulativeCostData(
+ messages: AgentMessage[],
+ ): { timestamp: Date; cost: number }[] {
+ if (!messages || messages.length === 0) {
+ return [];
+ }
+
+ let cumulativeCost = 0;
+ const data: { timestamp: Date; cost: number }[] = [];
+
+ for (const message of messages) {
+ if (message.timestamp && message.usage && message.usage.cost_usd) {
+ const timestamp = new Date(message.timestamp);
+ cumulativeCost += message.usage.cost_usd;
+
+ data.push({
+ timestamp,
+ cost: cumulativeCost,
+ });
+ }
+ }
+
+ return data;
+ }
+
+ protected willUpdate(changedProperties: PropertyValues): void {
+ if (changedProperties.has("messages")) {
+ this.chartData = this.calculateCumulativeCostData(this.messages);
+ }
+ }
+
+ private getMessagesChartSpec(): VisualizationSpec {
+ try {
+ const allMessages = this.messages;
+ if (!Array.isArray(allMessages) || allMessages.length === 0) {
+ return null;
+ }
+
+ // Sort messages chronologically
+ allMessages.sort((a, b) => {
+ const dateA = a.timestamp ? new Date(a.timestamp).getTime() : 0;
+ const dateB = b.timestamp ? new Date(b.timestamp).getTime() : 0;
+ return dateA - dateB;
+ });
+
+ // Create unique indexes for all messages
+ const messageIndexMap = new Map<string, number>();
+ let messageIdx = 0;
+
+ // First pass: Process parent messages
+ allMessages.forEach((msg, index) => {
+ // Create a unique ID for each message to track its position
+ const msgId = msg.timestamp ? msg.timestamp.toString() : `msg-${index}`;
+ messageIndexMap.set(msgId, messageIdx++);
+ });
+
+ // Process tool calls from messages to account for filtered out tool messages
+ const toolCallData: any[] = [];
+ allMessages.forEach((msg) => {
+ if (msg.tool_calls && msg.tool_calls.length > 0) {
+ msg.tool_calls.forEach((toolCall) => {
+ if (toolCall.result_message) {
+ // Add this tool result message to our data
+ const resultMsg = toolCall.result_message;
+
+ // Important: use the original message's idx to maintain the correct order
+ // The original message idx value is what we want to show in the chart
+ if (resultMsg.idx !== undefined) {
+ // If the tool call has start/end times, add it to bar data, otherwise to point data
+ if (resultMsg.start_time && resultMsg.end_time) {
+ toolCallData.push({
+ type: "bar",
+ index: resultMsg.idx, // Use actual idx from message
+ message_type: "tool",
+ content: resultMsg.content || "",
+ tool_name: resultMsg.tool_name || toolCall.name || "",
+ tool_input: toolCall.input || "",
+ tool_result: resultMsg.tool_result || "",
+ start_time: new Date(resultMsg.start_time).toISOString(),
+ end_time: new Date(resultMsg.end_time).toISOString(),
+ message: JSON.stringify(resultMsg, null, 2),
+ });
+ } else if (resultMsg.timestamp) {
+ toolCallData.push({
+ type: "point",
+ index: resultMsg.idx, // Use actual idx from message
+ message_type: "tool",
+ content: resultMsg.content || "",
+ tool_name: resultMsg.tool_name || toolCall.name || "",
+ tool_input: toolCall.input || "",
+ tool_result: resultMsg.tool_result || "",
+ time: new Date(resultMsg.timestamp).toISOString(),
+ message: JSON.stringify(resultMsg, null, 2),
+ });
+ }
+ }
+ }
+ });
+ }
+ });
+
+ // Prepare data for messages with start_time and end_time (bar marks)
+ const barData = allMessages
+ .filter((msg) => msg.start_time && msg.end_time) // Only include messages with explicit start and end times
+ .map((msg) => {
+ // Parse start and end times
+ const startTime = new Date(msg.start_time!);
+ const endTime = new Date(msg.end_time!);
+
+ // Use the message idx directly for consistent ordering
+ const index = msg.idx;
+
+ // Truncate content for tooltip readability
+ const displayContent = msg.content
+ ? msg.content.length > 100
+ ? msg.content.substring(0, 100) + "..."
+ : msg.content
+ : "No content";
+
+ // Prepare tool input and output for tooltip if applicable
+ const toolInput = msg.input
+ ? msg.input.length > 100
+ ? msg.input.substring(0, 100) + "..."
+ : msg.input
+ : "";
+
+ const toolResult = msg.tool_result
+ ? msg.tool_result.length > 100
+ ? msg.tool_result.substring(0, 100) + "..."
+ : msg.tool_result
+ : "";
+
+ return {
+ index: index,
+ message_type: msg.type,
+ content: displayContent,
+ tool_name: msg.tool_name || "",
+ tool_input: toolInput,
+ tool_result: toolResult,
+ start_time: startTime.toISOString(),
+ end_time: endTime.toISOString(),
+ message: JSON.stringify(msg, null, 2), // Full message for detailed inspection
+ };
+ });
+
+ // Prepare data for messages with timestamps only (point marks)
+ const pointData = allMessages
+ .filter((msg) => msg.timestamp && !(msg.start_time && msg.end_time)) // Only messages with timestamp but without start/end times
+ .map((msg) => {
+ // Get the timestamp
+ const timestamp = new Date(msg.timestamp!);
+
+ // Use the message idx directly for consistent ordering
+ const index = msg.idx;
+
+ // Truncate content for tooltip readability
+ const displayContent = msg.content
+ ? msg.content.length > 100
+ ? msg.content.substring(0, 100) + "..."
+ : msg.content
+ : "No content";
+
+ // Prepare tool input and output for tooltip if applicable
+ const toolInput = msg.input
+ ? msg.input.length > 100
+ ? msg.input.substring(0, 100) + "..."
+ : msg.input
+ : "";
+
+ const toolResult = msg.tool_result
+ ? msg.tool_result.length > 100
+ ? msg.tool_result.substring(0, 100) + "..."
+ : msg.tool_result
+ : "";
+
+ return {
+ index: index,
+ message_type: msg.type,
+ content: displayContent,
+ tool_name: msg.tool_name || "",
+ tool_input: toolInput,
+ tool_result: toolResult,
+ time: timestamp.toISOString(),
+ message: JSON.stringify(msg, null, 2), // Full message for detailed inspection
+ };
+ });
+
+ // Add tool call data to the appropriate arrays
+ const toolBarData = toolCallData
+ .filter((d) => d.type === "bar")
+ .map((d) => {
+ delete d.type;
+ return d;
+ });
+
+ const toolPointData = toolCallData
+ .filter((d) => d.type === "point")
+ .map((d) => {
+ delete d.type;
+ return d;
+ });
+
+ // Check if we have any data to display
+ if (
+ barData.length === 0 &&
+ pointData.length === 0 &&
+ toolBarData.length === 0 &&
+ toolPointData.length === 0
+ ) {
+ return null;
+ }
+
+ // Calculate height based on number of unique messages
+ const chartHeight = 20 * Math.min(allMessages.length, 25); // Max 25 visible at once
+
+ // Create a layered Vega-Lite spec combining bars and points
+ const messagesSpec: TopLevelSpec = {
+ $schema: "https://vega.github.io/schema/vega-lite/v5.json",
+ description: "Message Timeline",
+ width: "container",
+ height: chartHeight,
+ layer: [],
+ };
+
+ // Add bar layer if we have bar data
+ if (barData.length > 0 || toolBarData.length > 0) {
+ const combinedBarData = [...barData, ...toolBarData];
+ messagesSpec.layer.push({
+ data: { values: combinedBarData },
+ mark: {
+ type: "bar",
+ height: 16,
+ },
+ encoding: {
+ x: {
+ field: "start_time",
+ type: "temporal",
+ title: "Time",
+ axis: {
+ format: "%H:%M:%S",
+ title: "Time",
+ labelAngle: -45,
+ },
+ },
+ x2: { field: "end_time" },
+ y: {
+ field: "index",
+ type: "ordinal",
+ title: "Message Index",
+ axis: {
+ grid: true,
+ },
+ },
+ color: {
+ field: "message_type",
+ type: "nominal",
+ title: "Message Type",
+ legend: {},
+ },
+ tooltip: [
+ { field: "message_type", type: "nominal", title: "Type" },
+ { field: "tool_name", type: "nominal", title: "Tool" },
+ {
+ field: "start_time",
+ type: "temporal",
+ title: "Start Time",
+ format: "%H:%M:%S.%L",
+ },
+ {
+ field: "end_time",
+ type: "temporal",
+ title: "End Time",
+ format: "%H:%M:%S.%L",
+ },
+ { field: "content", type: "nominal", title: "Content" },
+ { field: "tool_input", type: "nominal", title: "Tool Input" },
+ { field: "tool_result", type: "nominal", title: "Tool Result" },
+ ],
+ },
+ });
+ }
+
+ // Add point layer if we have point data
+ if (pointData.length > 0 || toolPointData.length > 0) {
+ const combinedPointData = [...pointData, ...toolPointData];
+ messagesSpec.layer.push({
+ data: { values: combinedPointData },
+ mark: {
+ type: "point",
+ size: 100,
+ filled: true,
+ },
+ encoding: {
+ x: {
+ field: "time",
+ type: "temporal",
+ title: "Time",
+ axis: {
+ format: "%H:%M:%S",
+ title: "Time",
+ labelAngle: -45,
+ },
+ },
+ y: {
+ field: "index",
+ type: "ordinal",
+ title: "Message Index",
+ },
+ color: {
+ field: "message_type",
+ type: "nominal",
+ title: "Message Type",
+ },
+ tooltip: [
+ { field: "message_type", type: "nominal", title: "Type" },
+ { field: "tool_name", type: "nominal", title: "Tool" },
+ {
+ field: "time",
+ type: "temporal",
+ title: "Timestamp",
+ format: "%H:%M:%S.%L",
+ },
+ { field: "content", type: "nominal", title: "Content" },
+ { field: "tool_input", type: "nominal", title: "Tool Input" },
+ { field: "tool_result", type: "nominal", title: "Tool Result" },
+ ],
+ },
+ });
+ }
+ return messagesSpec;
+ } catch (error) {
+ console.error("Error rendering messages chart:", error);
+ }
+ }
+
+ render() {
+ const costSpec = this.createCostChartSpec();
+ const messagesSpec = this.getMessagesChartSpec();
+
+ return html`
+ <div class="chart-container" id="chartContainer">
+ <div class="chart-section">
+ <h3>Dollar Usage Over Time</h3>
+ <div class="chart-content">
+ ${this.chartData.length > 0
+ ? html`<vega-embed .spec=${costSpec}></vega-embed>`
+ : html`<p>No cost data available to display.</p>`}
+ </div>
+ </div>
+ <div class="chart-section">
+ <h3>Message Timeline</h3>
+ <div class="chart-content">
+ ${messagesSpec?.data
+ ? html`<vega-embed .spec=${messagesSpec}></vega-embed>`
+ : html`<p>No messages available to display.</p>`}
+ </div>
+ </div>
+ </div>
+ `;
+ }
+
+ private createCostChartSpec(): VisualizationSpec {
+ return {
+ $schema: "https://vega.github.io/schema/vega-lite/v5.json",
+ description: "Cumulative cost over time",
+ width: "container",
+ height: 300,
+ data: {
+ values: this.chartData.map((d) => ({
+ timestamp: d.timestamp.toISOString(),
+ cost: d.cost,
+ })),
+ },
+ mark: {
+ type: "line",
+ point: true,
+ },
+ encoding: {
+ x: {
+ field: "timestamp",
+ type: "temporal",
+ title: "Time",
+ axis: {
+ format: "%H:%M:%S",
+ title: "Time",
+ labelAngle: -45,
+ },
+ },
+ y: {
+ field: "cost",
+ type: "quantitative",
+ title: "Cumulative Cost (USD)",
+ axis: {
+ format: "$,.4f",
+ },
+ },
+ tooltip: [
+ {
+ field: "timestamp",
+ type: "temporal",
+ title: "Time",
+ format: "%Y-%m-%d %H:%M:%S",
+ },
+ {
+ field: "cost",
+ type: "quantitative",
+ title: "Cumulative Cost",
+ format: "$,.4f",
+ },
+ ],
+ },
+ };
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "sketch-charts": SketchCharts;
+ }
+}
diff --git a/webui/src/web-components/sketch-chat-input.test.ts b/webui/src/web-components/sketch-chat-input.test.ts
new file mode 100644
index 0000000..efb303f
--- /dev/null
+++ b/webui/src/web-components/sketch-chat-input.test.ts
@@ -0,0 +1,163 @@
+import { test, expect } from "@sand4rt/experimental-ct-web";
+import { SketchChatInput } from "./sketch-chat-input";
+
+test("initializes with empty content by default", async ({ mount }) => {
+ const component = await mount(SketchChatInput, {});
+
+ // Check public property via component's evaluate method
+ const content = await component.evaluate((el: SketchChatInput) => el.content);
+ expect(content).toBe("");
+
+ // Check textarea value
+ await expect(component.locator("#chatInput")).toHaveValue("");
+});
+
+test("initializes with provided content", async ({ mount }) => {
+ const testContent = "Hello, world!";
+ const component = await mount(SketchChatInput, {
+ props: {
+ content: testContent,
+ },
+ });
+
+ // Check public property via component's evaluate method
+ const content = await component.evaluate((el: SketchChatInput) => el.content);
+ expect(content).toBe(testContent);
+
+ // Check textarea value
+ await expect(component.locator("#chatInput")).toHaveValue(testContent);
+});
+
+test("updates content when typing in the textarea", async ({ mount }) => {
+ const component = await mount(SketchChatInput, {});
+ const newValue = "New message";
+
+ // Fill the textarea with new content
+ await component.locator("#chatInput").fill(newValue);
+
+ // Check that the content property was updated
+ const content = await component.evaluate((el: SketchChatInput) => el.content);
+ expect(content).toBe(newValue);
+});
+
+test("sends message when clicking the send button", async ({ mount }) => {
+ const testContent = "Test message";
+ const component = await mount(SketchChatInput, {
+ props: {
+ content: testContent,
+ },
+ });
+
+ // Set up promise to wait for the event
+ const eventPromise = component.evaluate((el) => {
+ return new Promise((resolve) => {
+ el.addEventListener(
+ "send-chat",
+ (event) => {
+ resolve((event as CustomEvent).detail);
+ },
+ { once: true },
+ );
+ });
+ });
+
+ // Click the send button
+ await component.locator("#sendChatButton").click();
+
+ // Wait for the event and check its details
+ const detail: any = await eventPromise;
+ expect(detail.message).toBe(testContent);
+});
+
+test.skip("sends message when pressing Enter (without shift)", async ({
+ mount,
+}) => {
+ const testContent = "Test message";
+ const component = await mount(SketchChatInput, {
+ props: {
+ content: testContent,
+ },
+ });
+
+ // Set up promise to wait for the event
+ const eventPromise = component.evaluate((el) => {
+ return new Promise((resolve) => {
+ el.addEventListener(
+ "send-chat",
+ (event) => {
+ resolve((event as CustomEvent).detail);
+ },
+ { once: true },
+ );
+ });
+ });
+
+ // Press Enter in the textarea
+ await component.locator("#chatInput").press("Enter");
+
+ // Wait for the event and check its details
+ const detail: any = await eventPromise;
+ expect(detail.message).toBe(testContent);
+
+ // Check that content was cleared
+ const content = await component.evaluate((el: SketchChatInput) => el.content);
+ expect(content).toBe("");
+});
+
+test.skip("does not send message when pressing Shift+Enter", async ({
+ mount,
+}) => {
+ const testContent = "Test message";
+ const component = await mount(SketchChatInput, {
+ props: {
+ content: testContent,
+ },
+ });
+
+ // Set up to track if event fires
+ let eventFired = false;
+ await component.evaluate((el) => {
+ el.addEventListener("send-chat", () => {
+ (window as any).__eventFired = true;
+ });
+ (window as any).__eventFired = false;
+ });
+
+ // Press Shift+Enter in the textarea
+ await component.locator("#chatInput").press("Shift+Enter");
+
+ // Wait a short time and check if event fired
+ await new Promise((resolve) => setTimeout(resolve, 50));
+ eventFired = await component.evaluate(() => (window as any).__eventFired);
+ expect(eventFired).toBe(false);
+
+ // Check that content was not cleared
+ const content = await component.evaluate((el: SketchChatInput) => el.content);
+ expect(content).toBe(testContent);
+});
+
+test("resizes when user enters more text than will fit", async ({ mount }) => {
+ const testContent = "Test message\n\n\n\n\n\n\n\n\n\n\n\n\nends here.";
+ const component = await mount(SketchChatInput, {
+ props: {
+ content: "",
+ },
+ });
+ const origHeight = await component.evaluate(
+ (el: SketchChatInput) => el.chatInput.style.height,
+ );
+
+ // Enter very tall text in the textarea
+ await component.locator("#chatInput").fill(testContent);
+
+ // Wait for the requestAnimationFrame to complete
+ await component.evaluate(() => new Promise(requestAnimationFrame));
+
+ // Check that textarea resized
+ const newHeight = await component.evaluate(
+ (el: SketchChatInput) => el.chatInput.style.height,
+ );
+ expect(Number.parseInt(newHeight)).toBeGreaterThan(
+ Number.parseInt(origHeight),
+ );
+});
diff --git a/webui/src/web-components/sketch-chat-input.ts b/webui/src/web-components/sketch-chat-input.ts
new file mode 100644
index 0000000..74e462f
--- /dev/null
+++ b/webui/src/web-components/sketch-chat-input.ts
@@ -0,0 +1,176 @@
+import { css, html, LitElement, PropertyValues } from "lit";
+import { customElement, property, state, query } from "lit/decorators.js";
+
+@customElement("sketch-chat-input")
+export class SketchChatInput extends LitElement {
+ @state()
+ content: string = "";
+
+ // See https://lit.dev/docs/components/styles/ for how lit-element handles CSS.
+ // Note that these styles only apply to the scope of this web component's
+ // shadow DOM node, so they won't leak out or collide with CSS declared in
+ // other components or the containing web page (...unless you want it to do that).
+ static styles = css`
+ /* Chat styles - exactly matching timeline.css */
+ .chat-container {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ background: #f0f0f0;
+ padding: 15px;
+ box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+ z-index: 1000;
+ min-height: 40px; /* Ensure minimum height */
+ }
+
+ .chat-input-wrapper {
+ display: flex;
+ max-width: 1200px;
+ margin: 0 auto;
+ gap: 10px;
+ }
+
+ #chatInput {
+ flex: 1;
+ padding: 12px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ resize: vertical;
+ font-family: monospace;
+ font-size: 12px;
+ min-height: 40px;
+ max-height: 300px;
+ background: #f7f7f7;
+ overflow-y: auto;
+ box-sizing: border-box; /* Ensure padding is included in height calculation */
+ line-height: 1.4; /* Consistent line height for better height calculation */
+ }
+
+ #sendChatButton {
+ background-color: #2196f3;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ padding: 0 20px;
+ cursor: pointer;
+ font-weight: 600;
+ align-self: center;
+ height: 40px;
+ }
+
+ #sendChatButton:hover {
+ background-color: #0d8bf2;
+ }
+ `;
+
+ constructor() {
+ super();
+ this._handleDiffComment = this._handleDiffComment.bind(this);
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+ window.addEventListener("diff-comment", this._handleDiffComment);
+ }
+
+ private _handleDiffComment(event: CustomEvent) {
+ const { comment } = event.detail;
+ if (!comment) return;
+
+ if (this.content != "") {
+ this.content += "\n\n";
+ }
+ this.content += comment;
+ requestAnimationFrame(() => this.adjustChatSpacing());
+ }
+
+ // See https://lit.dev/docs/components/lifecycle/
+ disconnectedCallback() {
+ super.disconnectedCallback();
+ window.removeEventListener("diff-comment", this._handleDiffComment);
+ }
+
+ sendChatMessage() {
+ const event = new CustomEvent("send-chat", {
+ detail: { message: this.content },
+ bubbles: true,
+ composed: true,
+ });
+ this.dispatchEvent(event);
+
+ // TODO(philip?): Ideally we only clear the content if the send is successful.
+ this.content = ""; // Clear content after sending
+ }
+
+ adjustChatSpacing() {
+ if (!this.chatInput) return;
+
+ // Reset height to minimal value to correctly calculate scrollHeight
+ this.chatInput.style.height = "auto";
+
+ // Get the scroll height (content height)
+ const scrollHeight = this.chatInput.scrollHeight;
+
+ // Set the height to match content (up to max-height which is handled by CSS)
+ this.chatInput.style.height = `${scrollHeight}px`;
+ }
+
+ async _sendChatClicked() {
+ this.sendChatMessage();
+ this.chatInput.focus(); // Refocus the input after sending
+ // Reset height after sending a message
+ requestAnimationFrame(() => this.adjustChatSpacing());
+ }
+
+ _chatInputKeyDown(event: KeyboardEvent) {
+ // Send message if Enter is pressed without Shift key
+ if (event.key === "Enter" && !event.shiftKey) {
+ event.preventDefault(); // Prevent default newline
+ this.sendChatMessage();
+ }
+ }
+
+ _chatInputChanged(event) {
+ this.content = event.target.value;
+ // Use requestAnimationFrame to ensure DOM updates have completed
+ requestAnimationFrame(() => this.adjustChatSpacing());
+ }
+
+ @query("#chatInput")
+ chatInput: HTMLTextAreaElement;
+
+ protected firstUpdated(): void {
+ if (this.chatInput) {
+ this.chatInput.focus();
+ // Initialize the input height
+ this.adjustChatSpacing();
+ }
+ }
+
+ render() {
+ return html`
+ <div class="chat-container">
+ <div class="chat-input-wrapper">
+ <textarea
+ id="chatInput"
+ placeholder="Type your message here and press Enter to send..."
+ autofocus
+ @keydown="${this._chatInputKeyDown}"
+ @input="${this._chatInputChanged}"
+ .value=${this.content || ""}
+ ></textarea>
+ <button @click="${this._sendChatClicked}" id="sendChatButton">
+ Send
+ </button>
+ </div>
+ </div>
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "sketch-chat-input": SketchChatInput;
+ }
+}
diff --git a/webui/src/web-components/sketch-container-status.test.ts b/webui/src/web-components/sketch-container-status.test.ts
new file mode 100644
index 0000000..db11a4e
--- /dev/null
+++ b/webui/src/web-components/sketch-container-status.test.ts
@@ -0,0 +1,171 @@
+import { test, expect } from "@sand4rt/experimental-ct-web";
+import { SketchContainerStatus } from "./sketch-container-status";
+import { State } from "../types";
+
+// Mock complete state for testing
+const mockCompleteState: State = {
+ hostname: "test-host",
+ working_dir: "/test/dir",
+ initial_commit: "abcdef1234567890",
+ message_count: 42,
+ os: "linux",
+ title: "Test Session",
+ total_usage: {
+ input_tokens: 1000,
+ output_tokens: 2000,
+ cache_read_input_tokens: 300,
+ cache_creation_input_tokens: 400,
+ total_cost_usd: 0.25,
+ start_time: "",
+ messages: 0,
+ tool_uses: {},
+ },
+};
+
+test("render props", async ({ mount }) => {
+ const component = await mount(SketchContainerStatus, {
+ props: {
+ state: mockCompleteState,
+ },
+ });
+ await expect(component.locator("#hostname")).toContainText(
+ mockCompleteState.hostname,
+ );
+ // Check that all expected elements exist
+ await expect(component.locator("#workingDir")).toContainText(
+ mockCompleteState.working_dir,
+ );
+ await expect(component.locator("#initialCommit")).toContainText(
+ mockCompleteState.initial_commit.substring(0, 8),
+ );
+
+ await expect(component.locator("#messageCount")).toContainText(
+ mockCompleteState.message_count + "",
+ );
+ await expect(component.locator("#inputTokens")).toContainText(
+ mockCompleteState.total_usage.input_tokens + "",
+ );
+ await expect(component.locator("#outputTokens")).toContainText(
+ mockCompleteState.total_usage.output_tokens + "",
+ );
+
+ await expect(component.locator("#cacheReadInputTokens")).toContainText(
+ mockCompleteState.total_usage.cache_read_input_tokens + "",
+ );
+ await expect(component.locator("#cacheCreationInputTokens")).toContainText(
+ mockCompleteState.total_usage.cache_creation_input_tokens + "",
+ );
+ await expect(component.locator("#totalCost")).toContainText(
+ "$" + mockCompleteState.total_usage.total_cost_usd.toFixed(2),
+ );
+});
+
+test("renders with undefined state", async ({ mount }) => {
+ const component = await mount(SketchContainerStatus, {});
+
+ // Elements should exist but be empty
+ await expect(component.locator("#hostname")).toContainText("");
+ await expect(component.locator("#workingDir")).toContainText("");
+ await expect(component.locator("#initialCommit")).toContainText("");
+ await expect(component.locator("#messageCount")).toContainText("");
+ await expect(component.locator("#inputTokens")).toContainText("");
+ await expect(component.locator("#outputTokens")).toContainText("");
+ await expect(component.locator("#totalCost")).toContainText("$0.00");
+});
+
+test("renders with partial state data", async ({ mount }) => {
+ const partialState: Partial<State> = {
+ hostname: "partial-host",
+ message_count: 10,
+ os: "linux",
+ title: "Partial Test",
+ total_usage: {
+ input_tokens: 500,
+ start_time: "",
+ messages: 0,
+ output_tokens: 0,
+ cache_read_input_tokens: 0,
+ cache_creation_input_tokens: 0,
+ total_cost_usd: 0,
+ tool_uses: {},
+ },
+ };
+
+ const component = await mount(SketchContainerStatus, {
+ props: {
+ state: partialState as State,
+ },
+ });
+
+ // Check that elements with data are properly populated
+ await expect(component.locator("#hostname")).toContainText("partial-host");
+ await expect(component.locator("#messageCount")).toContainText("10");
+ await expect(component.locator("#inputTokens")).toContainText("500");
+
+ // Check that elements without data are empty
+ await expect(component.locator("#workingDir")).toContainText("");
+ await expect(component.locator("#initialCommit")).toContainText("");
+ await expect(component.locator("#outputTokens")).toContainText("");
+ await expect(component.locator("#totalCost")).toContainText("$0.00");
+});
+
+test("handles cost formatting correctly", async ({ mount }) => {
+ // Test with different cost values
+ const testCases = [
+ { cost: 0, expected: "$0.00" },
+ { cost: 0.1, expected: "$0.10" },
+ { cost: 1.234, expected: "$1.23" },
+ { cost: 10.009, expected: "$10.01" },
+ ];
+
+ for (const testCase of testCases) {
+ const stateWithCost = {
+ ...mockCompleteState,
+ total_usage: {
+ ...mockCompleteState.total_usage,
+ total_cost_usd: testCase.cost,
+ },
+ };
+
+ const component = await mount(SketchContainerStatus, {
+ props: {
+ state: stateWithCost,
+ },
+ });
+ await expect(component.locator("#totalCost")).toContainText(
+ testCase.expected,
+ );
+ await component.unmount();
+ }
+});
+
+test("truncates commit hash to 8 characters", async ({ mount }) => {
+ const stateWithLongCommit = {
+ ...mockCompleteState,
+ initial_commit: "1234567890abcdef1234567890abcdef12345678",
+ };
+
+ const component = await mount(SketchContainerStatus, {
+ props: {
+ state: stateWithLongCommit,
+ },
+ });
+
+ await expect(component.locator("#initialCommit")).toContainText("12345678");
+});
+
+test("has correct link elements", async ({ mount }) => {
+ const component = await mount(SketchContainerStatus, {
+ props: {
+ state: mockCompleteState,
+ },
+ });
+
+ // Check for logs link
+ const logsLink = component.locator("a").filter({ hasText: "Logs" });
+ await expect(logsLink).toHaveAttribute("href", "logs");
+
+ // Check for download link
+ const downloadLink = component.locator("a").filter({ hasText: "Download" });
+ await expect(downloadLink).toHaveAttribute("href", "download");
+});
diff --git a/webui/src/web-components/sketch-container-status.ts b/webui/src/web-components/sketch-container-status.ts
new file mode 100644
index 0000000..9e542cb
--- /dev/null
+++ b/webui/src/web-components/sketch-container-status.ts
@@ -0,0 +1,237 @@
+import { State } from "../types";
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+@customElement("sketch-container-status")
+export class SketchContainerStatus extends LitElement {
+ // Header bar: Container status details
+
+ @property()
+ state: State;
+
+ // See https://lit.dev/docs/components/styles/ for how lit-element handles CSS.
+ // Note that these styles only apply to the scope of this web component's
+ // shadow DOM node, so they won't leak out or collide with CSS declared in
+ // other components or the containing web page (...unless you want it to do that).
+ static styles = css`
+ .info-card {
+ background: #f9f9f9;
+ border-radius: 8px;
+ padding: 15px;
+ margin-bottom: 20px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+ display: none; /* Hidden in the combined layout */
+ }
+
+ .info-grid {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ background: #f9f9f9;
+ border-radius: 4px;
+ padding: 4px 10px;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+ flex: 1;
+ }
+
+ .info-item {
+ display: flex;
+ align-items: center;
+ white-space: nowrap;
+ margin-right: 10px;
+ font-size: 13px;
+ }
+
+ .info-label {
+ font-size: 11px;
+ color: #555;
+ margin-right: 3px;
+ font-weight: 500;
+ }
+
+ .info-value {
+ font-size: 11px;
+ font-weight: 600;
+ }
+
+ [title] {
+ cursor: help;
+ text-decoration: underline dotted;
+ }
+
+ .cost {
+ color: #2e7d32;
+ }
+
+ .info-item a {
+ --tw-text-opacity: 1;
+ color: rgb(37 99 235 / var(--tw-text-opacity, 1));
+ text-decoration: inherit;
+ }
+ `;
+
+ constructor() {
+ super();
+ }
+
+ formatHostname() {
+ const outsideHostname = this.state?.outside_hostname;
+ const insideHostname = this.state?.inside_hostname;
+
+ if (!outsideHostname || !insideHostname) {
+ return this.state?.hostname;
+ }
+
+ if (outsideHostname === insideHostname) {
+ return outsideHostname;
+ }
+
+ return `${outsideHostname}:${insideHostname}`;
+ }
+
+ formatWorkingDir() {
+ const outsideWorkingDir = this.state?.outside_working_dir;
+ const insideWorkingDir = this.state?.inside_working_dir;
+
+ if (!outsideWorkingDir || !insideWorkingDir) {
+ return this.state?.working_dir;
+ }
+
+ if (outsideWorkingDir === insideWorkingDir) {
+ return outsideWorkingDir;
+ }
+
+ return `${outsideWorkingDir}:${insideWorkingDir}`;
+ }
+
+ getHostnameTooltip() {
+ const outsideHostname = this.state?.outside_hostname;
+ const insideHostname = this.state?.inside_hostname;
+
+ if (
+ !outsideHostname ||
+ !insideHostname ||
+ outsideHostname === insideHostname
+ ) {
+ return "";
+ }
+
+ return `Outside: ${outsideHostname}, Inside: ${insideHostname}`;
+ }
+
+ getWorkingDirTooltip() {
+ const outsideWorkingDir = this.state?.outside_working_dir;
+ const insideWorkingDir = this.state?.inside_working_dir;
+
+ if (
+ !outsideWorkingDir ||
+ !insideWorkingDir ||
+ outsideWorkingDir === insideWorkingDir
+ ) {
+ return "";
+ }
+
+ return `Outside: ${outsideWorkingDir}, Inside: ${insideWorkingDir}`;
+ }
+
+ // See https://lit.dev/docs/components/lifecycle/
+ connectedCallback() {
+ super.connectedCallback();
+ // register event listeners
+ }
+
+ // See https://lit.dev/docs/components/lifecycle/
+ disconnectedCallback() {
+ super.disconnectedCallback();
+ // unregister event listeners
+ }
+
+ render() {
+ return html`
+ <div class="info-grid">
+ <div class="info-item">
+ <a href="logs">Logs</a>
+ </div>
+ <div class="info-item">
+ <a href="download">Download</a>
+ </div>
+ <div class="info-item">
+ <span
+ id="hostname"
+ class="info-value"
+ title="${this.getHostnameTooltip()}"
+ >
+ ${this.formatHostname()}
+ </span>
+ </div>
+ <div class="info-item">
+ <span
+ id="workingDir"
+ class="info-value"
+ title="${this.getWorkingDirTooltip()}"
+ >
+ ${this.formatWorkingDir()}
+ </span>
+ </div>
+ ${this.state?.git_origin
+ ? html`
+ <div class="info-item">
+ <span class="info-label">Origin:</span>
+ <span id="gitOrigin" class="info-value"
+ >${this.state?.git_origin}</span
+ >
+ </div>
+ `
+ : ""}
+ <div class="info-item">
+ <span class="info-label">Commit:</span>
+ <span id="initialCommit" class="info-value"
+ >${this.state?.initial_commit?.substring(0, 8)}</span
+ >
+ </div>
+ <div class="info-item">
+ <span class="info-label">Msgs:</span>
+ <span id="messageCount" class="info-value"
+ >${this.state?.message_count}</span
+ >
+ </div>
+ <div class="info-item">
+ <span class="info-label">In:</span>
+ <span id="inputTokens" class="info-value"
+ >${this.state?.total_usage?.input_tokens}</span
+ >
+ </div>
+ <div class="info-item">
+ <span class="info-label">Cache Read:</span>
+ <span id="cacheReadInputTokens" class="info-value"
+ >${this.state?.total_usage?.cache_read_input_tokens}</span
+ >
+ </div>
+ <div class="info-item">
+ <span class="info-label">Cache Create:</span>
+ <span id="cacheCreationInputTokens" class="info-value"
+ >${this.state?.total_usage?.cache_creation_input_tokens}</span
+ >
+ </div>
+ <div class="info-item">
+ <span class="info-label">Out:</span>
+ <span id="outputTokens" class="info-value"
+ >${this.state?.total_usage?.output_tokens}</span
+ >
+ </div>
+ <div class="info-item">
+ <span class="info-label">Cost:</span>
+ <span id="totalCost" class="info-value cost"
+ >$${(this.state?.total_usage?.total_cost_usd || 0).toFixed(2)}</span
+ >
+ </div>
+ </div>
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "sketch-container-status": SketchContainerStatus;
+ }
+}
diff --git a/webui/src/web-components/sketch-diff-view.ts b/webui/src/web-components/sketch-diff-view.ts
new file mode 100644
index 0000000..47c14f3
--- /dev/null
+++ b/webui/src/web-components/sketch-diff-view.ts
@@ -0,0 +1,615 @@
+import { css, html, LitElement, unsafeCSS } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import * as Diff2Html from "diff2html";
+
+@customElement("sketch-diff-view")
+export class SketchDiffView extends LitElement {
+ // Current commit hash being viewed
+ @property({ type: String })
+ commitHash: string = "";
+
+ // Selected line in the diff for commenting
+ @state()
+ private selectedDiffLine: string | null = null;
+
+ // The clicked button element used for positioning the comment box
+ @state()
+ private clickedElement: HTMLElement | null = null;
+
+ // View format (side-by-side or line-by-line)
+ @state()
+ private viewFormat: "side-by-side" | "line-by-line" = "side-by-side";
+
+ static styles = css`
+ .diff-view {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ height: 100%;
+ }
+
+ .diff-container {
+ height: 100%;
+ overflow: auto;
+ flex: 1;
+ padding: 0 1rem;
+ }
+
+ #diff-view-controls {
+ display: flex;
+ justify-content: flex-end;
+ padding: 10px;
+ background: #f8f8f8;
+ border-bottom: 1px solid #eee;
+ }
+
+ .diff-view-format {
+ display: flex;
+ gap: 10px;
+ }
+
+ .diff-view-format label {
+ cursor: pointer;
+ }
+
+ .diff2html-content {
+ font-family: var(--monospace-font);
+ position: relative;
+ }
+
+ /* Comment box styles */
+ .diff-comment-box {
+ position: absolute;
+ width: 400px;
+ background-color: white;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+ padding: 16px;
+ z-index: 1000;
+ margin-top: 10px;
+ }
+
+ .diff-comment-box h3 {
+ margin-top: 0;
+ margin-bottom: 10px;
+ font-size: 16px;
+ }
+
+ .selected-line {
+ margin-bottom: 10px;
+ font-size: 14px;
+ }
+
+ .selected-line pre {
+ padding: 6px;
+ background: #f5f5f5;
+ border: 1px solid #eee;
+ border-radius: 3px;
+ margin: 5px 0;
+ max-height: 100px;
+ overflow: auto;
+ font-family: var(--monospace-font);
+ font-size: 13px;
+ white-space: pre-wrap;
+ }
+
+ #diffCommentInput {
+ width: 100%;
+ height: 100px;
+ padding: 8px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ resize: vertical;
+ font-family: inherit;
+ margin-bottom: 10px;
+ }
+
+ .diff-comment-buttons {
+ display: flex;
+ justify-content: flex-end;
+ gap: 8px;
+ }
+
+ .diff-comment-buttons button {
+ padding: 6px 12px;
+ border-radius: 4px;
+ border: 1px solid #ddd;
+ background: white;
+ cursor: pointer;
+ }
+
+ .diff-comment-buttons button:hover {
+ background: #f5f5f5;
+ }
+
+ .diff-comment-buttons button#submitDiffComment {
+ background: #1a73e8;
+ color: white;
+ border-color: #1a73e8;
+ }
+
+ .diff-comment-buttons button#submitDiffComment:hover {
+ background: #1967d2;
+ }
+
+ /* Styles for the comment button on diff lines */
+ .d2h-gutter-comment-button {
+ position: absolute;
+ right: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ visibility: hidden;
+ background: rgba(255, 255, 255, 0.8);
+ border-radius: 50%;
+ width: 16px;
+ height: 16px;
+ line-height: 13px;
+ text-align: center;
+ font-size: 14px;
+ cursor: pointer;
+ color: #666;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+ }
+
+ tr:hover .d2h-gutter-comment-button {
+ visibility: visible;
+ }
+
+ .d2h-gutter-comment-button:hover {
+ background: white;
+ color: #333;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+ }
+ `;
+
+ constructor() {
+ super();
+ }
+
+ // See https://lit.dev/docs/components/lifecycle/
+ connectedCallback() {
+ super.connectedCallback();
+
+ // Load the diff2html CSS if needed
+ this.loadDiff2HtmlCSS();
+ }
+
+ // Load diff2html CSS into the shadow DOM
+ private async loadDiff2HtmlCSS() {
+ try {
+ // Check if diff2html styles are already loaded
+ const styleId = "diff2html-styles";
+ if (this.shadowRoot?.getElementById(styleId)) {
+ return; // Already loaded
+ }
+
+ // Fetch the diff2html CSS
+ const response = await fetch("static/diff2html.min.css");
+
+ if (!response.ok) {
+ console.error(
+ `Failed to load diff2html CSS: ${response.status} ${response.statusText}`,
+ );
+ return;
+ }
+
+ const cssText = await response.text();
+
+ // Create a style element and append to shadow DOM
+ const style = document.createElement("style");
+ style.id = styleId;
+ style.textContent = cssText;
+ this.shadowRoot?.appendChild(style);
+
+ console.log("diff2html CSS loaded into shadow DOM");
+ } catch (error) {
+ console.error("Error loading diff2html CSS:", error);
+ }
+ }
+
+ // See https://lit.dev/docs/components/lifecycle/
+ disconnectedCallback() {
+ super.disconnectedCallback();
+ }
+
+ // Method called to load diff content
+ async loadDiffContent() {
+ // Wait for the component to be rendered
+ await this.updateComplete;
+
+ const diff2htmlContent =
+ this.shadowRoot?.getElementById("diff2htmlContent");
+ if (!diff2htmlContent) return;
+
+ try {
+ // Build the diff URL - include commit hash if specified
+ const diffUrl = this.commitHash
+ ? `diff?commit=${this.commitHash}`
+ : "diff";
+
+ if (this.commitHash) {
+ diff2htmlContent.innerHTML = `Loading diff for commit <strong>${this.commitHash}</strong>...`;
+ } else {
+ diff2htmlContent.innerHTML = "Loading diff...";
+ }
+
+ // Fetch the diff from the server
+ const response = await fetch(diffUrl);
+
+ if (!response.ok) {
+ throw new Error(
+ `Server returned ${response.status}: ${response.statusText}`,
+ );
+ }
+
+ const diffText = await response.text();
+
+ if (!diffText || diffText.trim() === "") {
+ diff2htmlContent.innerHTML =
+ "<span style='color: #666; font-style: italic;'>No changes detected since conversation started.</span>";
+ return;
+ }
+
+ // Render the diff using diff2html
+ const diffHtml = Diff2Html.html(diffText, {
+ outputFormat: this.viewFormat,
+ drawFileList: true,
+ matching: "lines",
+ renderNothingWhenEmpty: false,
+ colorScheme: "light" as any, // Force light mode to match the rest of the UI
+ });
+
+ // Insert the generated HTML
+ diff2htmlContent.innerHTML = diffHtml;
+
+ // Add CSS styles to ensure we don't have double scrollbars
+ const d2hFiles = diff2htmlContent.querySelectorAll(".d2h-file-wrapper");
+ d2hFiles.forEach((file) => {
+ const contentElem = file.querySelector(".d2h-files-diff");
+ if (contentElem) {
+ // Remove internal scrollbar - the outer container will handle scrolling
+ (contentElem as HTMLElement).style.overflow = "visible";
+ (contentElem as HTMLElement).style.maxHeight = "none";
+ }
+ });
+
+ // Add click event handlers to each code line for commenting
+ this.setupDiffLineComments();
+ } catch (error) {
+ console.error("Error loading diff2html content:", error);
+ const errorMessage =
+ error instanceof Error ? error.message : "Unknown error";
+ diff2htmlContent.innerHTML = `<span style='color: #dc3545;'>Error loading enhanced diff: ${errorMessage}</span>`;
+ }
+ }
+
+ // Handle view format changes
+ private handleViewFormatChange(event: Event) {
+ const input = event.target as HTMLInputElement;
+ if (input.checked) {
+ this.viewFormat = input.value as "side-by-side" | "line-by-line";
+ this.loadDiffContent();
+ }
+ }
+
+ /**
+ * Setup handlers for diff code lines to enable commenting
+ */
+ private setupDiffLineComments(): void {
+ const diff2htmlContent =
+ this.shadowRoot?.getElementById("diff2htmlContent");
+ if (!diff2htmlContent) return;
+
+ // Add plus buttons to each code line
+ this.addCommentButtonsToCodeLines();
+
+ // Use event delegation for handling clicks on plus buttons
+ diff2htmlContent.addEventListener("click", (event) => {
+ const target = event.target as HTMLElement;
+
+ // Only respond to clicks on the plus button
+ if (target.classList.contains("d2h-gutter-comment-button")) {
+ // Find the parent row first
+ const row = target.closest("tr");
+ if (!row) return;
+
+ // Then find the code line in that row
+ const codeLine =
+ row.querySelector(".d2h-code-side-line") ||
+ row.querySelector(".d2h-code-line");
+ if (!codeLine) return;
+
+ // Get the line text content
+ const lineContent = codeLine.querySelector(".d2h-code-line-ctn");
+ if (!lineContent) return;
+
+ const lineText = lineContent.textContent?.trim() || "";
+
+ // Get file name to add context
+ const fileHeader = codeLine
+ .closest(".d2h-file-wrapper")
+ ?.querySelector(".d2h-file-name");
+ const fileName = fileHeader
+ ? fileHeader.textContent?.trim()
+ : "Unknown file";
+
+ // Get line number if available
+ const lineNumElem = codeLine
+ .closest("tr")
+ ?.querySelector(".d2h-code-side-linenumber");
+ const lineNum = lineNumElem ? lineNumElem.textContent?.trim() : "";
+ const lineInfo = lineNum ? `Line ${lineNum}: ` : "";
+
+ // Format the line for the comment box with file context and line number
+ const formattedLine = `${fileName} ${lineInfo}${lineText}`;
+
+ console.log("Comment button clicked for line: ", formattedLine);
+
+ // Open the comment box with this line and store the clicked element for positioning
+ this.clickedElement = target;
+ this.openDiffCommentBox(formattedLine);
+
+ // Prevent event from bubbling up
+ event.stopPropagation();
+ }
+ });
+ }
+
+ /**
+ * Add plus buttons to each table row in the diff for commenting
+ */
+ private addCommentButtonsToCodeLines(): void {
+ const diff2htmlContent =
+ this.shadowRoot?.getElementById("diff2htmlContent");
+ if (!diff2htmlContent) return;
+
+ // Target code lines first, then find their parent rows
+ const codeLines = diff2htmlContent.querySelectorAll(
+ ".d2h-code-side-line, .d2h-code-line",
+ );
+
+ // Create a Set to store unique rows to avoid duplicates
+ const rowsSet = new Set<HTMLElement>();
+
+ // Get all rows that contain code lines
+ codeLines.forEach((line) => {
+ const row = line.closest("tr");
+ if (row) rowsSet.add(row as HTMLElement);
+ });
+
+ // Convert Set back to array for processing
+ const codeRows = Array.from(rowsSet);
+
+ codeRows.forEach((row) => {
+ const rowElem = row as HTMLElement;
+
+ // Skip info lines without actual code (e.g., "file added")
+ if (rowElem.querySelector(".d2h-info")) {
+ return;
+ }
+
+ // Find the code line number element (first TD in the row)
+ const lineNumberCell = rowElem.querySelector(
+ ".d2h-code-side-linenumber, .d2h-code-linenumber",
+ );
+
+ if (!lineNumberCell) return;
+
+ // Create the plus button
+ const plusButton = document.createElement("span");
+ plusButton.className = "d2h-gutter-comment-button";
+ plusButton.innerHTML = "+";
+ plusButton.title = "Add a comment on this line";
+
+ // Add button to the line number cell for proper positioning
+ (lineNumberCell as HTMLElement).style.position = "relative"; // Ensure positioning context
+ lineNumberCell.appendChild(plusButton);
+ });
+ }
+
+ /**
+ * Open the comment box for a selected diff line
+ */
+ private openDiffCommentBox(lineText: string): void {
+ // Make sure the comment box div exists
+ const commentBoxId = "diffCommentBox";
+ let commentBox = this.shadowRoot?.getElementById(commentBoxId);
+
+ // If it doesn't exist, create it
+ if (!commentBox) {
+ commentBox = document.createElement("div");
+ commentBox.id = commentBoxId;
+ commentBox.className = "diff-comment-box";
+
+ // Create the comment box contents
+ commentBox.innerHTML = `
+ <h3>Add a comment</h3>
+ <div class="selected-line">
+ Line:
+ <pre id="selectedLine"></pre>
+ </div>
+ <textarea
+ id="diffCommentInput"
+ placeholder="Enter your comment about this line..."
+ ></textarea>
+ <div class="diff-comment-buttons">
+ <button id="cancelDiffComment">Cancel</button>
+ <button id="submitDiffComment">Add Comment</button>
+ </div>
+ `;
+
+ // Append the comment box to the diff container to ensure proper positioning
+ const diffContainer = this.shadowRoot?.querySelector(".diff-container");
+ if (diffContainer) {
+ diffContainer.appendChild(commentBox);
+ } else {
+ this.shadowRoot?.appendChild(commentBox);
+ }
+ }
+
+ // Store the selected line
+ this.selectedDiffLine = lineText;
+
+ // Display the line in the comment box
+ const selectedLine = this.shadowRoot?.getElementById("selectedLine");
+ if (selectedLine) {
+ selectedLine.textContent = lineText;
+ }
+
+ // Reset the comment input
+ const commentInput = this.shadowRoot?.getElementById(
+ "diffCommentInput",
+ ) as HTMLTextAreaElement;
+ if (commentInput) {
+ commentInput.value = "";
+ }
+
+ // Show the comment box and position it below the clicked line
+ if (commentBox && this.clickedElement) {
+ // Get the row that contains the clicked button
+ const row = this.clickedElement.closest("tr");
+ if (row) {
+ // Get the position of the row
+ const rowRect = row.getBoundingClientRect();
+ const diffContainerRect = this.shadowRoot
+ ?.querySelector(".diff-container")
+ ?.getBoundingClientRect();
+
+ if (diffContainerRect) {
+ // Position the comment box below the row
+ const topPosition =
+ rowRect.bottom -
+ diffContainerRect.top +
+ this.shadowRoot!.querySelector(".diff-container")!.scrollTop;
+ const leftPosition = rowRect.left - diffContainerRect.left;
+
+ commentBox.style.top = `${topPosition}px`;
+ commentBox.style.left = `${leftPosition}px`;
+ commentBox.style.display = "block";
+ }
+ } else {
+ // Fallback if we can't find the row
+ commentBox.style.display = "block";
+ }
+ } else if (commentBox) {
+ // Fallback if we don't have clickedElement
+ commentBox.style.display = "block";
+ }
+
+ // Add event listeners for submit and cancel buttons
+ const submitButton = this.shadowRoot?.getElementById("submitDiffComment");
+ if (submitButton) {
+ submitButton.onclick = () => this.submitDiffComment();
+ }
+
+ const cancelButton = this.shadowRoot?.getElementById("cancelDiffComment");
+ if (cancelButton) {
+ cancelButton.onclick = () => this.closeDiffCommentBox();
+ }
+
+ // Focus on the comment input
+ if (commentInput) {
+ commentInput.focus();
+ }
+ }
+
+ /**
+ * Close the diff comment box without submitting
+ */
+ private closeDiffCommentBox(): void {
+ const commentBox = this.shadowRoot?.getElementById("diffCommentBox");
+ if (commentBox) {
+ commentBox.style.display = "none";
+ }
+ this.selectedDiffLine = null;
+ this.clickedElement = null;
+ }
+
+ /**
+ * Submit a comment on a diff line
+ */
+ private submitDiffComment(): void {
+ const commentInput = this.shadowRoot?.getElementById(
+ "diffCommentInput",
+ ) as HTMLTextAreaElement;
+
+ if (!commentInput) return;
+
+ const comment = commentInput.value.trim();
+
+ // Validate inputs
+ if (!this.selectedDiffLine || !comment) {
+ alert("Please select a line and enter a comment.");
+ return;
+ }
+
+ // Format the comment in a readable way
+ const formattedComment = `\`\`\`\n${this.selectedDiffLine}\n\`\`\`\n\n${comment}`;
+
+ // Dispatch a custom event with the formatted comment
+ const event = new CustomEvent("diff-comment", {
+ detail: { comment: formattedComment },
+ bubbles: true,
+ composed: true,
+ });
+ this.dispatchEvent(event);
+
+ // Close only the comment box but keep the diff view open
+ this.closeDiffCommentBox();
+ }
+
+ // Clear the current state
+ public clearState(): void {
+ this.commitHash = "";
+ }
+
+ // Show diff for a specific commit
+ public showCommitDiff(commitHash: string): void {
+ // Store the commit hash
+ this.commitHash = commitHash;
+ // Load the diff content
+ this.loadDiffContent();
+ }
+
+ render() {
+ return html`
+ <div class="diff-view">
+ <div class="diff-container">
+ <div id="diff-view-controls">
+ <div class="diff-view-format">
+ <label>
+ <input
+ type="radio"
+ name="diffViewFormat"
+ value="side-by-side"
+ ?checked=${this.viewFormat === "side-by-side"}
+ @change=${this.handleViewFormatChange}
+ />
+ Side-by-side
+ </label>
+ <label>
+ <input
+ type="radio"
+ name="diffViewFormat"
+ value="line-by-line"
+ ?checked=${this.viewFormat === "line-by-line"}
+ @change=${this.handleViewFormatChange}
+ />
+ Line-by-line
+ </label>
+ </div>
+ </div>
+ <div id="diff2htmlContent" class="diff2html-content"></div>
+ </div>
+ </div>
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "sketch-diff-view": SketchDiffView;
+ }
+}
diff --git a/webui/src/web-components/sketch-network-status.test.ts b/webui/src/web-components/sketch-network-status.test.ts
new file mode 100644
index 0000000..45882a0
--- /dev/null
+++ b/webui/src/web-components/sketch-network-status.test.ts
@@ -0,0 +1,65 @@
+import { test, expect } from "@sand4rt/experimental-ct-web";
+import { SketchNetworkStatus } from "./sketch-network-status";
+
+test("displays the correct connection status when connected", async ({
+ mount,
+}) => {
+ const component = await mount(SketchNetworkStatus, {
+ props: {
+ connection: "connected",
+ message: "Connected to server",
+ },
+ });
+
+ await expect(component.locator(".polling-indicator")).toBeVisible();
+ await expect(component.locator(".status-text")).toBeVisible();
+ await expect(component.locator(".polling-indicator.active")).toBeVisible();
+ await expect(component.locator(".status-text")).toContainText(
+ "Connected to server",
+ );
+});
+
+test("displays the correct connection status when disconnected", async ({
+ mount,
+}) => {
+ const component = await mount(SketchNetworkStatus, {
+ props: {
+ connection: "disconnected",
+ message: "Disconnected",
+ },
+ });
+
+ await expect(component.locator(".polling-indicator")).toBeVisible();
+ await expect(component.locator(".polling-indicator.error")).toBeVisible();
+});
+
+test("displays the correct connection status when disabled", async ({
+ mount,
+}) => {
+ const component = await mount(SketchNetworkStatus, {
+ props: {
+ connection: "disabled",
+ message: "Disabled",
+ },
+ });
+
+ await expect(component.locator(".polling-indicator")).toBeVisible();
+ await expect(component.locator(".polling-indicator.error")).not.toBeVisible();
+ await expect(
+ component.locator(".polling-indicator.active"),
+ ).not.toBeVisible();
+});
+
+test("displays error message when provided", async ({ mount }) => {
+ const errorMsg = "Connection error";
+ const component = await mount(SketchNetworkStatus, {
+ props: {
+ connection: "disconnected",
+ message: "Disconnected",
+ error: errorMsg,
+ },
+ });
+
+ await expect(component.locator(".status-text")).toBeVisible();
+ await expect(component.locator(".status-text")).toContainText(errorMsg);
+});
diff --git a/webui/src/web-components/sketch-network-status.ts b/webui/src/web-components/sketch-network-status.ts
new file mode 100644
index 0000000..2a0e455
--- /dev/null
+++ b/webui/src/web-components/sketch-network-status.ts
@@ -0,0 +1,103 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+@customElement("sketch-network-status")
+export class SketchNetworkStatus extends LitElement {
+ @property()
+ connection: string;
+
+ @property()
+ message: string;
+
+ @property()
+ error: string;
+
+ // See https://lit.dev/docs/components/styles/ for how lit-element handles CSS.
+ // Note that these styles only apply to the scope of this web component's
+ // shadow DOM node, so they won't leak out or collide with CSS declared in
+ // other components or the containing web page (...unless you want it to do that).
+
+ static styles = css`
+ .status-container {
+ display: flex;
+ align-items: center;
+ }
+
+ .polling-indicator {
+ display: inline-block;
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ margin-right: 4px;
+ background-color: #ccc;
+ }
+
+ .polling-indicator.active {
+ background-color: #4caf50;
+ animation: pulse 1.5s infinite;
+ }
+
+ .polling-indicator.error {
+ background-color: #f44336;
+ animation: pulse 1.5s infinite;
+ }
+
+ @keyframes pulse {
+ 0% {
+ opacity: 1;
+ }
+ 50% {
+ opacity: 0.5;
+ }
+ 100% {
+ opacity: 1;
+ }
+ }
+
+ .status-text {
+ font-size: 11px;
+ color: #666;
+ }
+ `;
+
+ constructor() {
+ super();
+ }
+
+ // See https://lit.dev/docs/components/lifecycle/
+ connectedCallback() {
+ super.connectedCallback();
+ }
+
+ // See https://lit.dev/docs/components/lifecycle/
+ disconnectedCallback() {
+ super.disconnectedCallback();
+ }
+
+ indicator() {
+ if (this.connection === "disabled") {
+ return "";
+ }
+ return this.connection === "connected" ? "active" : "error";
+ }
+
+ render() {
+ return html`
+ <div class="status-container">
+ <span
+ id="pollingIndicator"
+ class="polling-indicator ${this.indicator()}"
+ ></span>
+ <span id="statusText" class="status-text"
+ >${this.error || this.message}</span
+ >
+ </div>
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "sketch-network-status": SketchNetworkStatus;
+ }
+}
diff --git a/webui/src/web-components/sketch-terminal.ts b/webui/src/web-components/sketch-terminal.ts
new file mode 100644
index 0000000..4ffccfd
--- /dev/null
+++ b/webui/src/web-components/sketch-terminal.ts
@@ -0,0 +1,365 @@
+import { Terminal } from "@xterm/xterm";
+import { FitAddon } from "@xterm/addon-fit";
+
+import { css, html, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+import "./sketch-container-status";
+
+@customElement("sketch-terminal")
+export class SketchTerminal extends LitElement {
+ // Terminal instance
+ private terminal: Terminal | null = null;
+ // Terminal fit addon for handling resize
+ private fitAddon: FitAddon | null = null;
+ // Terminal EventSource for SSE
+ private terminalEventSource: EventSource | null = null;
+ // Terminal ID (always 1 for now, will support 1-9 later)
+ private terminalId: string = "1";
+ // Queue for serializing terminal inputs
+ private terminalInputQueue: string[] = [];
+ // Flag to track if we're currently processing a terminal input
+ private processingTerminalInput: boolean = false;
+
+ static styles = css`
+ /* Terminal View Styles */
+ .terminal-view {
+ width: 100%;
+ background-color: #f5f5f5;
+ border-radius: 8px;
+ overflow: hidden;
+ margin-bottom: 20px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ padding: 15px;
+ height: 70vh;
+ }
+
+ .terminal-container {
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ }
+ `;
+
+ constructor() {
+ super();
+ this._resizeHandler = this._resizeHandler.bind(this);
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+ this.loadXtermlCSS();
+ // Setup resize handler
+ window.addEventListener("resize", this._resizeHandler);
+ }
+
+ disconnectedCallback() {
+ super.disconnectedCallback();
+
+ window.removeEventListener("resize", this._resizeHandler);
+
+ this.closeTerminalConnections();
+
+ if (this.terminal) {
+ this.terminal.dispose();
+ this.terminal = null;
+ }
+ this.fitAddon = null;
+ }
+
+ firstUpdated() {
+ this.initializeTerminal();
+ }
+
+ _resizeHandler() {
+ if (this.fitAddon) {
+ this.fitAddon.fit();
+ // Send resize information to server
+ this.sendTerminalResize();
+ }
+ }
+
+ // Load xterm CSS into the shadow DOM
+ private async loadXtermlCSS() {
+ try {
+ // Check if diff2html styles are already loaded
+ const styleId = "xterm-styles";
+ if (this.shadowRoot?.getElementById(styleId)) {
+ return; // Already loaded
+ }
+
+ // Fetch the diff2html CSS
+ const response = await fetch("static/xterm.css");
+
+ if (!response.ok) {
+ console.error(
+ `Failed to load xterm CSS: ${response.status} ${response.statusText}`,
+ );
+ return;
+ }
+
+ const cssText = await response.text();
+
+ // Create a style element and append to shadow DOM
+ const style = document.createElement("style");
+ style.id = styleId;
+ style.textContent = cssText;
+ this.renderRoot?.appendChild(style);
+
+ console.log("xterm CSS loaded into shadow DOM");
+ } catch (error) {
+ console.error("Error loading xterm CSS:", error);
+ }
+ }
+
+ /**
+ * Initialize the terminal component
+ * @param terminalContainer The DOM element to contain the terminal
+ */
+ public async initializeTerminal(): Promise<void> {
+ const terminalContainer = this.renderRoot.querySelector(
+ "#terminalContainer",
+ ) as HTMLElement;
+
+ if (!terminalContainer) {
+ console.error("Terminal container not found");
+ return;
+ }
+
+ // If terminal is already initialized, just focus it
+ if (this.terminal) {
+ this.terminal.focus();
+ if (this.fitAddon) {
+ this.fitAddon.fit();
+ }
+ return;
+ }
+
+ // Clear the terminal container
+ terminalContainer.innerHTML = "";
+
+ // Create new terminal instance
+ this.terminal = new Terminal({
+ cursorBlink: true,
+ theme: {
+ background: "#f5f5f5",
+ foreground: "#333333",
+ cursor: "#0078d7",
+ selectionBackground: "rgba(0, 120, 215, 0.4)",
+ },
+ });
+
+ // Add fit addon to handle terminal resizing
+ this.fitAddon = new FitAddon();
+ this.terminal.loadAddon(this.fitAddon);
+
+ // Open the terminal in the container
+ this.terminal.open(terminalContainer);
+
+ // Connect to WebSocket
+ await this.connectTerminal();
+
+ // Fit the terminal to the container
+ this.fitAddon.fit();
+
+ // Focus the terminal
+ this.terminal.focus();
+ }
+
+ /**
+ * Connect to terminal events stream
+ */
+ private async connectTerminal(): Promise<void> {
+ if (!this.terminal) {
+ return;
+ }
+
+ // Close existing connections if any
+ this.closeTerminalConnections();
+
+ try {
+ // Connect directly to the SSE endpoint for terminal 1
+ // Use relative URL based on current location
+ const baseUrl = window.location.pathname.endsWith("/") ? "." : ".";
+ const eventsUrl = `${baseUrl}/terminal/events/${this.terminalId}`;
+ this.terminalEventSource = new EventSource(eventsUrl);
+
+ // Handle SSE events
+ this.terminalEventSource.onopen = () => {
+ console.log("Terminal SSE connection opened");
+ this.sendTerminalResize();
+ };
+
+ this.terminalEventSource.onmessage = (event) => {
+ if (this.terminal) {
+ // Decode base64 data before writing to terminal
+ try {
+ // @ts-ignore This isn't in the type definitions yet; it's pretty new?!?
+ const decoded = base64ToUint8Array(event.data);
+ this.terminal.write(decoded);
+ } catch (e) {
+ console.error("Error decoding terminal data:", e);
+ }
+ }
+ };
+
+ this.terminalEventSource.onerror = (error) => {
+ console.error("Terminal SSE error:", error);
+ if (this.terminal) {
+ this.terminal.write("\r\n\x1b[1;31mConnection error\x1b[0m\r\n");
+ }
+ // Attempt to reconnect if the connection was lost
+ if (this.terminalEventSource?.readyState === EventSource.CLOSED) {
+ this.closeTerminalConnections();
+ }
+ };
+
+ // Send key inputs to the server via POST requests
+ if (this.terminal) {
+ this.terminal.onData((data) => {
+ this.sendTerminalInput(data);
+ });
+ }
+ } catch (error) {
+ console.error("Failed to connect to terminal:", error);
+ if (this.terminal) {
+ this.terminal.write(
+ `\r\n\x1b[1;31mFailed to connect: ${error}\x1b[0m\r\n`,
+ );
+ }
+ }
+ }
+
+ /**
+ * Close any active terminal connections
+ */
+ private closeTerminalConnections(): void {
+ if (this.terminalEventSource) {
+ this.terminalEventSource.close();
+ this.terminalEventSource = null;
+ }
+ }
+
+ /**
+ * Send input to the terminal
+ * @param data The input data to send
+ */
+ private async sendTerminalInput(data: string): Promise<void> {
+ // Add the data to the queue
+ this.terminalInputQueue.push(data);
+
+ // If we're not already processing inputs, start processing
+ if (!this.processingTerminalInput) {
+ await this.processTerminalInputQueue();
+ }
+ }
+
+ /**
+ * Process the terminal input queue in order
+ */
+ private async processTerminalInputQueue(): Promise<void> {
+ if (this.terminalInputQueue.length === 0) {
+ this.processingTerminalInput = false;
+ return;
+ }
+
+ this.processingTerminalInput = true;
+
+ // Concatenate all available inputs from the queue into a single request
+ let combinedData = "";
+
+ // Take all currently available items from the queue
+ while (this.terminalInputQueue.length > 0) {
+ combinedData += this.terminalInputQueue.shift()!;
+ }
+
+ try {
+ // Use relative URL based on current location
+ const baseUrl = window.location.pathname.endsWith("/") ? "." : ".";
+ const response = await fetch(
+ `${baseUrl}/terminal/input/${this.terminalId}`,
+ {
+ method: "POST",
+ body: combinedData,
+ headers: {
+ "Content-Type": "text/plain",
+ },
+ },
+ );
+
+ if (!response.ok) {
+ console.error(
+ `Failed to send terminal input: ${response.status} ${response.statusText}`,
+ );
+ }
+ } catch (error) {
+ console.error("Error sending terminal input:", error);
+ }
+
+ // Continue processing the queue (for any new items that may have been added)
+ await this.processTerminalInputQueue();
+ }
+
+ /**
+ * Send terminal resize information to the server
+ */
+ private async sendTerminalResize(): Promise<void> {
+ if (!this.terminal || !this.fitAddon) {
+ return;
+ }
+
+ // Get terminal dimensions
+ try {
+ // Send resize message in a format the server can understand
+ // Use relative URL based on current location
+ const baseUrl = window.location.pathname.endsWith("/") ? "." : ".";
+ const response = await fetch(
+ `${baseUrl}/terminal/input/${this.terminalId}`,
+ {
+ method: "POST",
+ body: JSON.stringify({
+ type: "resize",
+ cols: this.terminal.cols || 80, // Default to 80 if undefined
+ rows: this.terminal.rows || 24, // Default to 24 if undefined
+ }),
+ headers: {
+ "Content-Type": "application/json",
+ },
+ },
+ );
+
+ if (!response.ok) {
+ console.error(
+ `Failed to send terminal resize: ${response.status} ${response.statusText}`,
+ );
+ }
+ } catch (error) {
+ console.error("Error sending terminal resize:", error);
+ }
+ }
+
+ render() {
+ return html`
+ <div id="terminalView" class="terminal-view">
+ <div id="terminalContainer" class="terminal-container"></div>
+ </div>
+ `;
+ }
+}
+
+function base64ToUint8Array(base64String) {
+ // This isn't yet available in Chrome, but Safari has it!
+ // @ts-ignore
+ if (Uint8Array.fromBase64) {
+ // @ts-ignore
+ return Uint8Array.fromBase64(base64String);
+ }
+
+ const binaryString = atob(base64String);
+ return Uint8Array.from(binaryString, (char) => char.charCodeAt(0));
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "sketch-terminal": SketchTerminal;
+ }
+}
diff --git a/webui/src/web-components/sketch-timeline-message.test.ts b/webui/src/web-components/sketch-timeline-message.test.ts
new file mode 100644
index 0000000..bc74202
--- /dev/null
+++ b/webui/src/web-components/sketch-timeline-message.test.ts
@@ -0,0 +1,311 @@
+import { test, expect } from "@sand4rt/experimental-ct-web";
+import { SketchTimelineMessage } from "./sketch-timeline-message";
+import {
+ AgentMessage,
+ CodingAgentMessageType,
+ GitCommit,
+ Usage,
+} from "../types";
+
+// Helper function to create mock timeline messages
+function createMockMessage(props: Partial<AgentMessage> = {}): AgentMessage {
+ return {
+ idx: props.idx || 0,
+ type: props.type || "agent",
+ content: props.content || "Hello world",
+ timestamp: props.timestamp || "2023-05-15T12:00:00Z",
+ elapsed: props.elapsed || 1500000000, // 1.5 seconds in nanoseconds
+ end_of_turn: props.end_of_turn || false,
+ conversation_id: props.conversation_id || "conv123",
+ tool_calls: props.tool_calls || [],
+ commits: props.commits || [],
+ usage: props.usage,
+ ...props,
+ };
+}
+
+test("renders with basic message content", async ({ mount }) => {
+ const message = createMockMessage({
+ type: "agent",
+ content: "This is a test message",
+ });
+
+ const component = await mount(SketchTimelineMessage, {
+ props: {
+ message: message,
+ },
+ });
+
+ await expect(component.locator(".message-text")).toBeVisible();
+ await expect(component.locator(".message-text")).toContainText(
+ "This is a test message",
+ );
+});
+
+test.skip("renders with correct message type classes", async ({ mount }) => {
+ const messageTypes: CodingAgentMessageType[] = [
+ "user",
+ "agent",
+ "error",
+ "budget",
+ "tool",
+ "commit",
+ "auto",
+ ];
+
+ for (const type of messageTypes) {
+ const message = createMockMessage({ type });
+
+ const component = await mount(SketchTimelineMessage, {
+ props: {
+ message: message,
+ },
+ });
+
+ await expect(component.locator(".message")).toBeVisible();
+ await expect(component.locator(`.message.${type}`)).toBeVisible();
+ }
+});
+
+test("renders end-of-turn marker correctly", async ({ mount }) => {
+ const message = createMockMessage({
+ end_of_turn: true,
+ });
+
+ const component = await mount(SketchTimelineMessage, {
+ props: {
+ message: message,
+ },
+ });
+
+ await expect(component.locator(".message")).toBeVisible();
+ await expect(component.locator(".message.end-of-turn")).toBeVisible();
+});
+
+test("formats timestamps correctly", async ({ mount }) => {
+ const message = createMockMessage({
+ timestamp: "2023-05-15T12:00:00Z",
+ });
+
+ const component = await mount(SketchTimelineMessage, {
+ props: {
+ message: message,
+ },
+ });
+
+ await expect(component.locator(".message-timestamp")).toBeVisible();
+ // Should include a formatted date like "May 15, 2023"
+ await expect(component.locator(".message-timestamp")).toContainText(
+ "May 15, 2023",
+ );
+ // Should include elapsed time
+ await expect(component.locator(".message-timestamp")).toContainText(
+ "(1.50s)",
+ );
+});
+
+test("renders markdown content correctly", async ({ mount }) => {
+ const markdownContent =
+ "# Heading\n\n- List item 1\n- List item 2\n\n`code block`";
+ const message = createMockMessage({
+ content: markdownContent,
+ });
+
+ const component = await mount(SketchTimelineMessage, {
+ props: {
+ message: message,
+ },
+ });
+
+ await expect(component.locator(".markdown-content")).toBeVisible();
+
+ // Check HTML content
+ const html = await component
+ .locator(".markdown-content")
+ .evaluate((element) => element.innerHTML);
+ expect(html).toContain("<h1>Heading</h1>");
+ expect(html).toContain("<ul>");
+ expect(html).toContain("<li>List item 1</li>");
+ expect(html).toContain("<code>code block</code>");
+});
+
+test("displays usage information when available", async ({ mount }) => {
+ const usage: Usage = {
+ input_tokens: 150,
+ output_tokens: 300,
+ cost_usd: 0.025,
+ cache_read_input_tokens: 50,
+ cache_creation_input_tokens: 0,
+ };
+
+ const message = createMockMessage({
+ usage,
+ });
+
+ const component = await mount(SketchTimelineMessage, {
+ props: {
+ message: message,
+ },
+ });
+
+ await expect(component.locator(".message-usage")).toBeVisible();
+ await expect(component.locator(".message-usage")).toContainText("150"); // In
+ await expect(component.locator(".message-usage")).toContainText("300"); // Out
+ await expect(component.locator(".message-usage")).toContainText("50"); // Cache
+ await expect(component.locator(".message-usage")).toContainText("$0.03"); // Cost
+});
+
+test("renders commit information correctly", async ({ mount }) => {
+ const commits: GitCommit[] = [
+ {
+ hash: "1234567890abcdef",
+ subject: "Fix bug in application",
+ body: "This fixes a major bug in the application\n\nSigned-off-by: Developer",
+ pushed_branch: "main",
+ },
+ ];
+
+ const message = createMockMessage({
+ commits,
+ });
+
+ const component = await mount(SketchTimelineMessage, {
+ props: {
+ message: message,
+ },
+ });
+
+ await expect(component.locator(".commits-container")).toBeVisible();
+ await expect(component.locator(".commits-header")).toBeVisible();
+ await expect(component.locator(".commits-header")).toContainText("1 new");
+
+ await expect(component.locator(".commit-hash")).toBeVisible();
+ await expect(component.locator(".commit-hash")).toHaveText("12345678"); // First 8 chars
+
+ await expect(component.locator(".pushed-branch")).toBeVisible();
+ await expect(component.locator(".pushed-branch")).toContainText("main");
+});
+
+test("dispatches show-commit-diff event when commit diff button is clicked", async ({
+ mount,
+}) => {
+ const commits: GitCommit[] = [
+ {
+ hash: "1234567890abcdef",
+ subject: "Fix bug in application",
+ body: "This fixes a major bug in the application",
+ pushed_branch: "main",
+ },
+ ];
+
+ const message = createMockMessage({
+ commits,
+ });
+
+ const component = await mount(SketchTimelineMessage, {
+ props: {
+ message: message,
+ },
+ });
+
+ await expect(component.locator(".commit-diff-button")).toBeVisible();
+
+ // Set up promise to wait for the event
+ const eventPromise = component.evaluate((el) => {
+ return new Promise((resolve) => {
+ el.addEventListener(
+ "show-commit-diff",
+ (event) => {
+ resolve((event as CustomEvent).detail);
+ },
+ { once: true },
+ );
+ });
+ });
+
+ // Click the diff button
+ await component.locator(".commit-diff-button").click();
+
+ // Wait for the event and check its details
+ const detail = await eventPromise;
+ expect(detail["commitHash"]).toBe("1234567890abcdef");
+});
+
+test.skip("handles message type icon display correctly", async ({ mount }) => {
+ // First message of a type should show icon
+ const firstMessage = createMockMessage({
+ type: "user",
+ idx: 0,
+ });
+
+ // Second message of same type should not show icon
+ const secondMessage = createMockMessage({
+ type: "user",
+ idx: 1,
+ });
+
+ // Test first message (should show icon)
+ const firstComponent = await mount(SketchTimelineMessage, {
+ props: {
+ message: firstMessage,
+ },
+ });
+
+ await expect(firstComponent.locator(".message-icon")).toBeVisible();
+ await expect(firstComponent.locator(".message-icon")).toHaveText("U");
+
+ // Test second message with previous message of same type
+ const secondComponent = await mount(SketchTimelineMessage, {
+ props: {
+ message: secondMessage,
+ previousMessage: firstMessage,
+ },
+ });
+
+ await expect(secondComponent.locator(".message-icon")).not.toBeVisible();
+});
+
+test("formats numbers correctly", async ({ mount }) => {
+ const component = await mount(SketchTimelineMessage, {});
+
+ // Test accessing public method via evaluate
+ const result1 = await component.evaluate((el: SketchTimelineMessage) =>
+ el.formatNumber(1000),
+ );
+ expect(result1).toBe("1,000");
+
+ const result2 = await component.evaluate((el: SketchTimelineMessage) =>
+ el.formatNumber(null, "N/A"),
+ );
+ expect(result2).toBe("N/A");
+
+ const result3 = await component.evaluate((el: SketchTimelineMessage) =>
+ el.formatNumber(undefined, "--"),
+ );
+ expect(result3).toBe("--");
+});
+
+test("formats currency values correctly", async ({ mount }) => {
+ const component = await mount(SketchTimelineMessage, {});
+
+ // Test with different precisions
+ const result1 = await component.evaluate((el: SketchTimelineMessage) =>
+ el.formatCurrency(10.12345, "$0.00", true),
+ );
+ expect(result1).toBe("$10.1235"); // message level (4 decimals)
+
+ const result2 = await component.evaluate((el: SketchTimelineMessage) =>
+ el.formatCurrency(10.12345, "$0.00", false),
+ );
+ expect(result2).toBe("$10.12"); // total level (2 decimals)
+
+ const result3 = await component.evaluate((el: SketchTimelineMessage) =>
+ el.formatCurrency(null, "N/A"),
+ );
+ expect(result3).toBe("N/A");
+
+ const result4 = await component.evaluate((el: SketchTimelineMessage) =>
+ el.formatCurrency(undefined, "--"),
+ );
+ expect(result4).toBe("--");
+});
diff --git a/webui/src/web-components/sketch-timeline-message.ts b/webui/src/web-components/sketch-timeline-message.ts
new file mode 100644
index 0000000..36f1640
--- /dev/null
+++ b/webui/src/web-components/sketch-timeline-message.ts
@@ -0,0 +1,765 @@
+import { css, html, LitElement } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { customElement, property } from "lit/decorators.js";
+import { AgentMessage } from "../types";
+import { marked, MarkedOptions } from "marked";
+import "./sketch-tool-calls";
+@customElement("sketch-timeline-message")
+export class SketchTimelineMessage extends LitElement {
+ @property()
+ message: AgentMessage;
+
+ @property()
+ previousMessage: AgentMessage;
+
+ @property()
+ open: boolean = false;
+
+ // See https://lit.dev/docs/components/styles/ for how lit-element handles CSS.
+ // Note that these styles only apply to the scope of this web component's
+ // shadow DOM node, so they won't leak out or collide with CSS declared in
+ // other components or the containing web page (...unless you want it to do that).
+ static styles = css`
+ .message {
+ position: relative;
+ margin-bottom: 5px;
+ padding-left: 30px;
+ }
+
+ .message-icon {
+ position: absolute;
+ left: 10px;
+ top: 0;
+ transform: translateX(-50%);
+ width: 16px;
+ height: 16px;
+ border-radius: 3px;
+ text-align: center;
+ line-height: 16px;
+ color: #fff;
+ font-size: 10px;
+ }
+
+ .message-content {
+ position: relative;
+ padding: 5px 10px;
+ background: #fff;
+ border-radius: 3px;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+ border-left: 3px solid transparent;
+ }
+
+ /* Copy button styles */
+ .message-text-container,
+ .tool-result-container {
+ position: relative;
+ }
+
+ .message-actions {
+ position: absolute;
+ top: 5px;
+ right: 5px;
+ z-index: 10;
+ opacity: 0;
+ transition: opacity 0.2s ease;
+ }
+
+ .message-text-container:hover .message-actions,
+ .tool-result-container:hover .message-actions {
+ opacity: 1;
+ }
+
+ .copy-button {
+ background-color: rgba(255, 255, 255, 0.9);
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ color: #555;
+ cursor: pointer;
+ font-size: 12px;
+ padding: 2px 8px;
+ transition: all 0.2s ease;
+ }
+
+ .copy-button:hover {
+ background-color: #f0f0f0;
+ color: #333;
+ }
+
+ /* Removed arrow decoration for a more compact look */
+
+ .message-header {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 5px;
+ margin-bottom: 3px;
+ font-size: 12px;
+ }
+
+ .message-timestamp {
+ font-size: 10px;
+ color: #888;
+ font-style: italic;
+ margin-left: 3px;
+ }
+
+ .message-usage {
+ font-size: 10px;
+ color: #888;
+ margin-left: 3px;
+ }
+
+ .conversation-id {
+ font-family: monospace;
+ font-size: 12px;
+ padding: 2px 4px;
+ background-color: #f0f0f0;
+ border-radius: 3px;
+ margin-left: auto;
+ }
+
+ .parent-info {
+ font-size: 11px;
+ opacity: 0.8;
+ }
+
+ .subconversation {
+ border-left: 2px solid transparent;
+ padding-left: 5px;
+ margin-left: 20px;
+ transition: margin-left 0.3s ease;
+ }
+
+ .message-text {
+ overflow-x: auto;
+ margin-bottom: 3px;
+ font-family: monospace;
+ padding: 3px 5px;
+ background: rgb(236, 236, 236);
+ border-radius: 6px;
+ user-select: text;
+ cursor: text;
+ -webkit-user-select: text;
+ -moz-user-select: text;
+ -ms-user-select: text;
+ font-size: 13px;
+ line-height: 1.3;
+ }
+
+ .tool-details {
+ margin-top: 3px;
+ padding-top: 3px;
+ border-top: 1px dashed #e0e0e0;
+ font-size: 12px;
+ }
+
+ .tool-name {
+ font-size: 12px;
+ font-weight: bold;
+ margin-bottom: 2px;
+ background: #f0f0f0;
+ padding: 2px 4px;
+ border-radius: 2px;
+ display: flex;
+ align-items: center;
+ gap: 3px;
+ }
+
+ .tool-input,
+ .tool-result {
+ margin-top: 2px;
+ padding: 3px 5px;
+ background: #f7f7f7;
+ border-radius: 2px;
+ font-family: monospace;
+ font-size: 12px;
+ overflow-x: auto;
+ white-space: pre;
+ line-height: 1.3;
+ user-select: text;
+ cursor: text;
+ -webkit-user-select: text;
+ -moz-user-select: text;
+ -ms-user-select: text;
+ }
+
+ .tool-result {
+ max-height: 300px;
+ overflow-y: auto;
+ }
+
+ .usage-info {
+ margin-top: 10px;
+ padding-top: 10px;
+ border-top: 1px dashed #e0e0e0;
+ font-size: 12px;
+ color: #666;
+ }
+
+ /* Custom styles for IRC-like experience */
+ .user .message-content {
+ border-left-color: #2196f3;
+ }
+
+ .agent .message-content {
+ border-left-color: #4caf50;
+ }
+
+ .tool .message-content {
+ border-left-color: #ff9800;
+ }
+
+ .error .message-content {
+ border-left-color: #f44336;
+ }
+
+ /* Make message type display bold but without the IRC-style markers */
+ .message-type {
+ font-weight: bold;
+ }
+
+ /* Commit message styling */
+ .message.commit {
+ background-color: #f0f7ff;
+ border-left: 4px solid #0366d6;
+ }
+
+ .commits-container {
+ margin-top: 10px;
+ padding: 5px;
+ }
+
+ .commits-header {
+ font-weight: bold;
+ margin-bottom: 5px;
+ color: #24292e;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ .commit-boxes-row {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ margin-top: 8px;
+ }
+
+ .commit-box {
+ border: 1px solid #d1d5da;
+ border-radius: 4px;
+ overflow: hidden;
+ background-color: #ffffff;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+ max-width: 100%;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .commit-preview {
+ padding: 8px 12px;
+ font-family: monospace;
+ background-color: #f6f8fa;
+ border-bottom: 1px dashed #d1d5da;
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 4px;
+ }
+
+ .commit-preview:hover {
+ background-color: #eef2f6;
+ }
+
+ .commit-hash {
+ color: #0366d6;
+ font-weight: bold;
+ cursor: pointer;
+ margin-right: 8px;
+ text-decoration: none;
+ position: relative;
+ }
+
+ .commit-hash:hover {
+ text-decoration: underline;
+ }
+
+ .commit-hash:hover::after {
+ content: "📋";
+ font-size: 10px;
+ position: absolute;
+ top: -8px;
+ right: -12px;
+ opacity: 0.7;
+ }
+
+ .branch-wrapper {
+ margin-right: 8px;
+ color: #555;
+ }
+
+ .commit-branch {
+ color: #28a745;
+ font-weight: 500;
+ cursor: pointer;
+ text-decoration: none;
+ position: relative;
+ }
+
+ .commit-branch:hover {
+ text-decoration: underline;
+ }
+
+ .commit-branch:hover::after {
+ content: "📋";
+ font-size: 10px;
+ position: absolute;
+ top: -8px;
+ right: -12px;
+ opacity: 0.7;
+ }
+
+ .commit-preview {
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 4px;
+ }
+
+ .commit-details {
+ padding: 8px 12px;
+ max-height: 200px;
+ overflow-y: auto;
+ }
+
+ .commit-details pre {
+ margin: 0;
+ white-space: pre-wrap;
+ word-break: break-word;
+ }
+
+ .commit-details.is-hidden {
+ display: none;
+ }
+
+ .pushed-branch {
+ color: #28a745;
+ font-weight: 500;
+ margin-left: 6px;
+ }
+
+ .commit-diff-button {
+ padding: 3px 6px;
+ border: 1px solid #ccc;
+ border-radius: 3px;
+ background-color: #f7f7f7;
+ color: #24292e;
+ font-size: 11px;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ margin-left: auto;
+ }
+
+ .commit-diff-button:hover {
+ background-color: #e7e7e7;
+ border-color: #aaa;
+ }
+
+ /* Tool call cards */
+ .tool-call-cards-container {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ margin-top: 8px;
+ }
+
+ /* Message type styles */
+
+ .user .message-icon {
+ background-color: #2196f3;
+ }
+
+ .agent .message-icon {
+ background-color: #4caf50;
+ }
+
+ .tool .message-icon {
+ background-color: #ff9800;
+ }
+
+ .error .message-icon {
+ background-color: #f44336;
+ }
+
+ .end-of-turn {
+ margin-bottom: 15px;
+ }
+
+ .end-of-turn::after {
+ content: "End of Turn";
+ position: absolute;
+ left: 15px;
+ bottom: -10px;
+ transform: translateX(-50%);
+ font-size: 10px;
+ color: #666;
+ background: #f0f0f0;
+ padding: 1px 4px;
+ border-radius: 3px;
+ }
+
+ .markdown-content {
+ box-sizing: border-box;
+ min-width: 200px;
+ margin: 0 auto;
+ }
+
+ .markdown-content p {
+ margin-block-start: 0.5em;
+ margin-block-end: 0.5em;
+ }
+ `;
+
+ constructor() {
+ super();
+ }
+
+ // See https://lit.dev/docs/components/lifecycle/
+ connectedCallback() {
+ super.connectedCallback();
+ }
+
+ // See https://lit.dev/docs/components/lifecycle/
+ disconnectedCallback() {
+ super.disconnectedCallback();
+ }
+
+ renderMarkdown(markdownContent: string): string {
+ try {
+ // Set markdown options for proper code block highlighting and safety
+ const markedOptions: MarkedOptions = {
+ gfm: true, // GitHub Flavored Markdown
+ breaks: true, // Convert newlines to <br>
+ async: false,
+ // DOMPurify is recommended for production, but not included in this implementation
+ };
+ return marked.parse(markdownContent, markedOptions) as string;
+ } catch (error) {
+ console.error("Error rendering markdown:", error);
+ // Fallback to plain text if markdown parsing fails
+ return markdownContent;
+ }
+ }
+
+ /**
+ * Format timestamp for display
+ */
+ formatTimestamp(
+ timestamp: string | number | Date | null | undefined,
+ defaultValue: string = "",
+ ): string {
+ if (!timestamp) return defaultValue;
+ try {
+ const date = new Date(timestamp);
+ if (isNaN(date.getTime())) return defaultValue;
+
+ // Format: Mar 13, 2025 09:53:25 AM
+ return date.toLocaleString("en-US", {
+ month: "short",
+ day: "numeric",
+ year: "numeric",
+ hour: "numeric",
+ minute: "2-digit",
+ second: "2-digit",
+ hour12: true,
+ });
+ } catch (e) {
+ return defaultValue;
+ }
+ }
+
+ formatNumber(
+ num: number | null | undefined,
+ defaultValue: string = "0",
+ ): string {
+ if (num === undefined || num === null) return defaultValue;
+ try {
+ return num.toLocaleString();
+ } catch (e) {
+ return String(num);
+ }
+ }
+ formatCurrency(
+ num: number | string | null | undefined,
+ defaultValue: string = "$0.00",
+ isMessageLevel: boolean = false,
+ ): string {
+ if (num === undefined || num === null) return defaultValue;
+ try {
+ // Use 4 decimal places for message-level costs, 2 for totals
+ const decimalPlaces = isMessageLevel ? 4 : 2;
+ return `$${parseFloat(String(num)).toFixed(decimalPlaces)}`;
+ } catch (e) {
+ return defaultValue;
+ }
+ }
+
+ showCommit(commitHash: string) {
+ this.dispatchEvent(
+ new CustomEvent("show-commit-diff", {
+ bubbles: true,
+ composed: true,
+ detail: { commitHash },
+ }),
+ );
+ }
+
+ copyToClipboard(text: string, event: Event) {
+ const element = event.currentTarget as HTMLElement;
+ const rect = element.getBoundingClientRect();
+
+ navigator.clipboard
+ .writeText(text)
+ .then(() => {
+ this.showFloatingMessage("Copied!", rect, "success");
+ })
+ .catch((err) => {
+ console.error("Failed to copy text: ", err);
+ this.showFloatingMessage("Failed to copy!", rect, "error");
+ });
+ }
+
+ showFloatingMessage(
+ message: string,
+ targetRect: DOMRect,
+ type: "success" | "error",
+ ) {
+ // Create floating message element
+ const floatingMsg = document.createElement("div");
+ floatingMsg.textContent = message;
+ floatingMsg.className = `floating-message ${type}`;
+
+ // Position it near the clicked element
+ // Position just above the element
+ const top = targetRect.top - 30;
+ const left = targetRect.left + targetRect.width / 2 - 40;
+
+ floatingMsg.style.position = "fixed";
+ floatingMsg.style.top = `${top}px`;
+ floatingMsg.style.left = `${left}px`;
+ floatingMsg.style.zIndex = "9999";
+
+ // Add to document body
+ document.body.appendChild(floatingMsg);
+
+ // Animate in
+ floatingMsg.style.opacity = "0";
+ floatingMsg.style.transform = "translateY(10px)";
+
+ setTimeout(() => {
+ floatingMsg.style.opacity = "1";
+ floatingMsg.style.transform = "translateY(0)";
+ }, 10);
+
+ // Remove after animation
+ setTimeout(() => {
+ floatingMsg.style.opacity = "0";
+ floatingMsg.style.transform = "translateY(-10px)";
+
+ setTimeout(() => {
+ document.body.removeChild(floatingMsg);
+ }, 300);
+ }, 1500);
+ }
+
+ render() {
+ return html`
+ <div
+ class="message ${this.message?.type} ${this.message?.end_of_turn
+ ? "end-of-turn"
+ : ""}"
+ >
+ ${this.previousMessage?.type != this.message?.type
+ ? html`<div class="message-icon">
+ ${this.message?.type.toUpperCase()[0]}
+ </div>`
+ : ""}
+ <div class="message-content">
+ <div class="message-header">
+ <span class="message-type">${this.message?.type}</span>
+ <span class="message-timestamp"
+ >${this.formatTimestamp(this.message?.timestamp)}
+ ${this.message?.elapsed
+ ? html`(${(this.message?.elapsed / 1e9).toFixed(2)}s)`
+ : ""}</span
+ >
+ ${this.message?.usage
+ ? html` <span class="message-usage">
+ <span title="Input tokens"
+ >In: ${this.message?.usage?.input_tokens}</span
+ >
+ ${this.message?.usage?.cache_read_input_tokens > 0
+ ? html`<span title="Cache tokens"
+ >[Cache:
+ ${this.formatNumber(
+ this.message?.usage?.cache_read_input_tokens,
+ )}]</span
+ >`
+ : ""}
+ <span title="Output tokens"
+ >Out: ${this.message?.usage?.output_tokens}</span
+ >
+ <span title="Message cost"
+ >(${this.formatCurrency(
+ this.message?.usage?.cost_usd,
+ )})</span
+ >
+ </span>`
+ : ""}
+ </div>
+ <div class="message-text-container">
+ <div class="message-actions">
+ ${copyButton(this.message?.content)}
+ </div>
+ ${this.message?.content
+ ? html`
+ <div class="message-text markdown-content">
+ ${unsafeHTML(this.renderMarkdown(this.message?.content))}
+ </div>
+ `
+ : ""}
+ </div>
+ <sketch-tool-calls
+ .toolCalls=${this.message?.tool_calls}
+ .open=${this.open}
+ ></sketch-tool-calls>
+ ${this.message?.commits
+ ? html`
+ <div class="commits-container">
+ <div class="commits-header">
+ ${this.message.commits.length} new
+ commit${this.message.commits.length > 1 ? "s" : ""} detected
+ </div>
+ ${this.message.commits.map((commit) => {
+ return html`
+ <div class="commit-boxes-row">
+ <div class="commit-box">
+ <div class="commit-preview">
+ <span
+ class="commit-hash"
+ title="Click to copy: ${commit.hash}"
+ @click=${(e) =>
+ this.copyToClipboard(
+ commit.hash.substring(0, 8),
+ e,
+ )}
+ >
+ ${commit.hash.substring(0, 8)}
+ </span>
+ ${commit.pushed_branch
+ ? html`
+ <span class="branch-wrapper">
+ (<span
+ class="commit-branch pushed-branch"
+ title="Click to copy: ${commit.pushed_branch}"
+ @click=${(e) =>
+ this.copyToClipboard(
+ commit.pushed_branch,
+ e,
+ )}
+ >${commit.pushed_branch}</span
+ >)
+ </span>
+ `
+ : ``}
+ <span class="commit-subject"
+ >${commit.subject}</span
+ >
+ <button
+ class="commit-diff-button"
+ @click=${() => this.showCommit(commit.hash)}
+ >
+ View Diff
+ </button>
+ </div>
+ <div class="commit-details is-hidden">
+ <pre>${commit.body}</pre>
+ </div>
+ </div>
+ </div>
+ `;
+ })}
+ </div>
+ `
+ : ""}
+ </div>
+ </div>
+ `;
+ }
+}
+
+function copyButton(textToCopy: string) {
+ // Add click event listener to handle copying
+ const buttonClass = "copy-button";
+ const buttonContent = "Copy";
+ const successContent = "Copied!";
+ const failureContent = "Failed";
+
+ const ret = html`<button
+ class="${buttonClass}"
+ title="Copy to clipboard"
+ @click=${(e: Event) => {
+ e.stopPropagation();
+ const copyButton = e.currentTarget as HTMLButtonElement;
+ navigator.clipboard
+ .writeText(textToCopy)
+ .then(() => {
+ copyButton.textContent = successContent;
+ setTimeout(() => {
+ copyButton.textContent = buttonContent;
+ }, 2000);
+ })
+ .catch((err) => {
+ console.error("Failed to copy text: ", err);
+ copyButton.textContent = failureContent;
+ setTimeout(() => {
+ copyButton.textContent = buttonContent;
+ }, 2000);
+ });
+ }}
+ >
+ ${buttonContent}
+ </button>`;
+
+ return ret;
+}
+
+// Create global styles for floating messages
+const floatingMessageStyles = document.createElement("style");
+floatingMessageStyles.textContent = `
+ .floating-message {
+ background-color: rgba(0, 0, 0, 0.8);
+ color: white;
+ padding: 5px 10px;
+ border-radius: 4px;
+ font-size: 12px;
+ font-family: system-ui, sans-serif;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+ pointer-events: none;
+ transition: opacity 0.3s ease, transform 0.3s ease;
+ }
+
+ .floating-message.success {
+ background-color: rgba(40, 167, 69, 0.9);
+ }
+
+ .floating-message.error {
+ background-color: rgba(220, 53, 69, 0.9);
+ }
+`;
+document.head.appendChild(floatingMessageStyles);
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "sketch-timeline-message": SketchTimelineMessage;
+ }
+}
diff --git a/webui/src/web-components/sketch-timeline.ts b/webui/src/web-components/sketch-timeline.ts
new file mode 100644
index 0000000..e2c8ee7
--- /dev/null
+++ b/webui/src/web-components/sketch-timeline.ts
@@ -0,0 +1,224 @@
+import { css, html, LitElement } from "lit";
+import { PropertyValues } from "lit";
+import { repeat } from "lit/directives/repeat.js";
+import { customElement, property, state } from "lit/decorators.js";
+import { AgentMessage } from "../types";
+import "./sketch-timeline-message";
+
+@customElement("sketch-timeline")
+export class SketchTimeline extends LitElement {
+ @property({ attribute: false })
+ messages: AgentMessage[] = [];
+
+ // Track if we should scroll to the bottom
+ @state()
+ private scrollingState: "pinToLatest" | "floating" = "pinToLatest";
+
+ @property({ attribute: false })
+ scrollContainer: HTMLElement;
+
+ static styles = css`
+ /* Hide views initially to prevent flash of content */
+ .timeline-container .timeline,
+ .timeline-container .diff-view,
+ .timeline-container .chart-view,
+ .timeline-container .terminal-view {
+ visibility: hidden;
+ }
+
+ /* Will be set by JavaScript once we know which view to display */
+ .timeline-container.view-initialized .timeline,
+ .timeline-container.view-initialized .diff-view,
+ .timeline-container.view-initialized .chart-view,
+ .timeline-container.view-initialized .terminal-view {
+ visibility: visible;
+ }
+
+ .timeline-container {
+ width: 100%;
+ position: relative;
+ }
+
+ /* Timeline styles that should remain unchanged */
+ .timeline {
+ position: relative;
+ margin: 10px 0;
+ scroll-behavior: smooth;
+ }
+
+ .timeline::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 15px;
+ width: 2px;
+ background: #e0e0e0;
+ border-radius: 1px;
+ }
+
+ /* Hide the timeline vertical line when there are no messages */
+ .timeline.empty::before {
+ display: none;
+ }
+
+ #scroll-container {
+ overflow: auto;
+ padding-left: 1em;
+ }
+ #jump-to-latest {
+ display: none;
+ position: fixed;
+ bottom: 100px;
+ right: 0;
+ background: rgb(33, 150, 243);
+ color: white;
+ border-radius: 8px;
+ padding: 0.5em;
+ margin: 0.5em;
+ font-size: x-large;
+ opacity: 0.5;
+ cursor: pointer;
+ }
+ #jump-to-latest:hover {
+ opacity: 1;
+ }
+ #jump-to-latest.floating {
+ display: block;
+ }
+ `;
+
+ constructor() {
+ super();
+
+ // Binding methods
+ this._handleShowCommitDiff = this._handleShowCommitDiff.bind(this);
+ this._handleScroll = this._handleScroll.bind(this);
+ }
+
+ /**
+ * Scroll to the bottom of the timeline
+ */
+ private scrollToBottom(): void {
+ this.scrollContainer?.scrollTo({
+ top: this.scrollContainer?.scrollHeight,
+ behavior: "smooth",
+ });
+ }
+
+ /**
+ * Called after the component's properties have been updated
+ */
+ updated(changedProperties: PropertyValues): void {
+ // If messages have changed, scroll to bottom if needed
+ if (changedProperties.has("messages") && this.messages.length > 0) {
+ if (this.scrollingState == "pinToLatest") {
+ setTimeout(() => this.scrollToBottom(), 50);
+ }
+ }
+ if (changedProperties.has("scrollContainer")) {
+ this.scrollContainer?.addEventListener("scroll", this._handleScroll);
+ }
+ }
+
+ /**
+ * Handle showCommitDiff event
+ */
+ private _handleShowCommitDiff(event: CustomEvent) {
+ const { commitHash } = event.detail;
+ if (commitHash) {
+ // Bubble up the event to the app shell
+ const newEvent = new CustomEvent("show-commit-diff", {
+ detail: { commitHash },
+ bubbles: true,
+ composed: true,
+ });
+ this.dispatchEvent(newEvent);
+ }
+ }
+
+ private _handleScroll(event) {
+ const isAtBottom =
+ Math.abs(
+ this.scrollContainer.scrollHeight -
+ this.scrollContainer.clientHeight -
+ this.scrollContainer.scrollTop,
+ ) <= 1;
+ if (isAtBottom) {
+ this.scrollingState = "pinToLatest";
+ } else {
+ // TODO: does scroll direction matter here?
+ this.scrollingState = "floating";
+ }
+ }
+
+ // See https://lit.dev/docs/components/lifecycle/
+ connectedCallback() {
+ super.connectedCallback();
+
+ // Listen for showCommitDiff events from the renderer
+ document.addEventListener(
+ "showCommitDiff",
+ this._handleShowCommitDiff as EventListener,
+ );
+ this.scrollContainer?.addEventListener("scroll", this._handleScroll);
+ }
+
+ // See https://lit.dev/docs/components/lifecycle/
+ disconnectedCallback() {
+ super.disconnectedCallback();
+
+ // Remove event listeners
+ document.removeEventListener(
+ "showCommitDiff",
+ this._handleShowCommitDiff as EventListener,
+ );
+
+ this.scrollContainer?.removeEventListener("scroll", this._handleScroll);
+ }
+
+ // messageKey uniquely identifes a AgentMessage based on its ID and tool_calls, so
+ // that we only re-render <sketch-message> elements that we need to re-render.
+ messageKey(message: AgentMessage): string {
+ // If the message has tool calls, and any of the tool_calls get a response, we need to
+ // re-render that message.
+ const toolCallResponses = message.tool_calls
+ ?.filter((tc) => tc.result_message)
+ .map((tc) => tc.tool_call_id)
+ .join("-");
+ return `message-${message.idx}-${toolCallResponses}`;
+ }
+
+ render() {
+ return html`
+ <div id="scroll-container">
+ <div class="timeline-container">
+ ${repeat(this.messages, this.messageKey, (message, index) => {
+ let previousMessage: AgentMessage;
+ if (index > 0) {
+ previousMessage = this.messages[index - 1];
+ }
+ return html`<sketch-timeline-message
+ .message=${message}
+ .previousMessage=${previousMessage}
+ .open=${index == this.messages.length - 1}
+ ></sketch-timeline-message>`;
+ })}
+ </div>
+ </div>
+ <div
+ id="jump-to-latest"
+ class="${this.scrollingState}"
+ @click=${this.scrollToBottom}
+ >
+ ⇩
+ </div>
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "sketch-timeline": SketchTimeline;
+ }
+}
diff --git a/webui/src/web-components/sketch-tool-calls.ts b/webui/src/web-components/sketch-tool-calls.ts
new file mode 100644
index 0000000..3f036c2
--- /dev/null
+++ b/webui/src/web-components/sketch-tool-calls.ts
@@ -0,0 +1,148 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+import { ToolCall } from "../types";
+import "./sketch-tool-card";
+
+@customElement("sketch-tool-calls")
+export class SketchToolCalls extends LitElement {
+ @property()
+ toolCalls: ToolCall[] = [];
+
+ @property()
+ open: boolean = false;
+
+ static styles = css`
+ /* Tool calls container styles */
+ .tool-calls-container {
+ /* Container for all tool calls */
+ }
+
+ /* Header for tool calls section */
+ .tool-calls-header {
+ /* Empty header - just small spacing */
+ }
+
+ /* Card container */
+ .tool-call-card {
+ display: flex;
+ flex-direction: column;
+ background-color: white;
+ overflow: hidden;
+ cursor: pointer;
+ }
+
+ /* Status indicators for tool calls */
+ .tool-call-status {
+ margin-right: 4px;
+ text-align: center;
+ }
+
+ .tool-call-status.spinner {
+ animation: spin 1s infinite linear;
+ display: inline-block;
+ width: 1em;
+ }
+
+ @keyframes spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+ }
+ `;
+
+ constructor() {
+ super();
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+ }
+
+ disconnectedCallback() {
+ super.disconnectedCallback();
+ }
+
+ cardForToolCall(toolCall: ToolCall, open: boolean) {
+ switch (toolCall.name) {
+ case "bash":
+ return html`<sketch-tool-card-bash
+ .open=${open}
+ .toolCall=${toolCall}
+ ></sketch-tool-card-bash>`;
+ case "codereview":
+ return html`<sketch-tool-card-codereview
+ .open=${open}
+ .toolCall=${toolCall}
+ ></sketch-tool-card-codereview>`;
+ case "done":
+ return html`<sketch-tool-card-done
+ .open=${open}
+ .toolCall=${toolCall}
+ ></sketch-tool-card-done>`;
+ case "patch":
+ return html`<sketch-tool-card-patch
+ .open=${open}
+ .toolCall=${toolCall}
+ ></sketch-tool-card-patch>`;
+ case "think":
+ return html`<sketch-tool-card-think
+ .open=${open}
+ .toolCall=${toolCall}
+ ></sketch-tool-card-think>`;
+ case "title":
+ return html`<sketch-tool-card-title
+ .open=${open}
+ .toolCall=${toolCall}
+ ></sketch-tool-card-title>`;
+ }
+ return html`<sketch-tool-card-generic
+ .open=${open}
+ .toolCall=${toolCall}
+ ></sketch-tool-card-generic>`;
+ }
+
+ // toolUseKey return value should change, if the toolCall gets a response.
+ toolUseKey(toolCall: ToolCall): string {
+ console.log(
+ "toolUseKey",
+ toolCall.tool_call_id,
+ toolCall.result_message?.idx,
+ );
+ if (!toolCall.result_message) {
+ return toolCall.tool_call_id;
+ }
+ return `${toolCall.tool_call_id}-${toolCall.result_message.idx}`;
+ }
+
+ render() {
+ return html`<div class="tool-calls-container">
+ <div class="tool-calls-header"></div>
+ <div class="tool-call-cards-container">
+ ${this.toolCalls
+ ? repeat(this.toolCalls, this.toolUseKey, (toolCall, idx) => {
+ let lastCall = false;
+ if (idx == this.toolCalls?.length - 1) {
+ lastCall = true;
+ }
+ return html`<div
+ id="${toolCall.tool_call_id}"
+ class="tool-call-card ${toolCall.name}"
+ >
+ ${this.cardForToolCall(toolCall, lastCall && this.open)}
+ </div>`;
+ })
+ : ""}
+ </div>
+ </div>`;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "sketch-tool-calls": SketchToolCalls;
+ }
+}
diff --git a/webui/src/web-components/sketch-tool-card.ts b/webui/src/web-components/sketch-tool-card.ts
new file mode 100644
index 0000000..dbb09ae
--- /dev/null
+++ b/webui/src/web-components/sketch-tool-card.ts
@@ -0,0 +1,630 @@
+import { css, html, LitElement } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { customElement, property } from "lit/decorators.js";
+import { ToolCall } from "../types";
+import { marked, MarkedOptions } from "marked";
+
+function renderMarkdown(markdownContent: string): string {
+ try {
+ // Set markdown options for proper code block highlighting and safety
+ const markedOptions: MarkedOptions = {
+ gfm: true, // GitHub Flavored Markdown
+ breaks: true, // Convert newlines to <br>
+ async: false,
+ // DOMPurify is recommended for production, but not included in this implementation
+ };
+ return marked.parse(markdownContent, markedOptions) as string;
+ } catch (error) {
+ console.error("Error rendering markdown:", error);
+ // Fallback to plain text if markdown parsing fails
+ return markdownContent;
+ }
+}
+
+@customElement("sketch-tool-card")
+export class SketchToolCard extends LitElement {
+ @property()
+ toolCall: ToolCall;
+
+ @property()
+ open: boolean;
+
+ static styles = css`
+ .tool-call {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ white-space: nowrap;
+ }
+
+ .tool-call-status {
+ margin-right: 4px;
+ text-align: center;
+ }
+
+ .tool-call-status.spinner {
+ animation: spin 1s infinite linear;
+ display: inline-block;
+ width: 1em;
+ }
+
+ @keyframes spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+ }
+
+ .title {
+ font-style: italic;
+ }
+
+ .cancel-button {
+ background: rgb(76, 175, 80);
+ color: white;
+ border: none;
+ padding: 4px 10px;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 12px;
+ margin: 5px;
+ }
+
+ .cancel-button:hover {
+ background: rgb(200, 35, 51) !important;
+ }
+
+ .codereview-OK {
+ color: green;
+ }
+
+ details {
+ border-radius: 4px;
+ padding: 0.25em;
+ margin: 0.25em;
+ display: flex;
+ flex-direction: column;
+ align-items: start;
+ }
+
+ details summary {
+ list-style: none;
+ &::before {
+ cursor: hand;
+ font-family: monospace;
+ content: "+";
+ color: white;
+ background-color: darkgray;
+ border-radius: 1em;
+ padding-left: 0.5em;
+ margin: 0.25em;
+ min-width: 1em;
+ }
+ [open] &::before {
+ content: "-";
+ }
+ }
+
+ details summary:hover {
+ list-style: none;
+ &::before {
+ background-color: gray;
+ }
+ }
+ summary {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: flex-start;
+ align-items: baseline;
+ }
+
+ summary .tool-name {
+ font-family: monospace;
+ color: white;
+ background: rgb(124 145 160);
+ border-radius: 4px;
+ padding: 0.25em;
+ margin: 0.25em;
+ white-space: pre;
+ }
+
+ .summary-text {
+ padding: 0.25em;
+ display: flex;
+ max-width: 50%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ details[open] .summary-text {
+ /*display: none;*/
+ }
+
+ .tool-error-message {
+ font-style: italic;
+ color: #aa0909;
+ }
+
+ .elapsed {
+ font-size: 10px;
+ color: #888;
+ font-style: italic;
+ margin-left: 3px;
+ }
+ `;
+
+ constructor() {
+ super();
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+ }
+
+ disconnectedCallback() {
+ super.disconnectedCallback();
+ }
+
+ _cancelToolCall = async (tool_call_id: string, button: HTMLButtonElement) => {
+ console.log("cancelToolCall", tool_call_id, button);
+ button.innerText = "Cancelling";
+ button.disabled = true;
+ try {
+ const response = await fetch("cancel", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({
+ tool_call_id: tool_call_id,
+ reason: "user requested cancellation",
+ }),
+ });
+ if (response.ok) {
+ console.log("cancel", tool_call_id, response);
+ button.parentElement.removeChild(button);
+ } else {
+ button.innerText = "Cancel";
+ console.log(`error trying to cancel ${tool_call_id}: `, response);
+ }
+ } catch (e) {
+ console.error("cancel", tool_call_id, e);
+ }
+ };
+
+ render() {
+ const toolCallStatus = this.toolCall?.result_message
+ ? this.toolCall?.result_message.tool_error
+ ? html`❌
+ <span class="tool-error-message"
+ >${this.toolCall?.result_message.tool_result}</span
+ >`
+ : ""
+ : "⏳";
+
+ const cancelButton = this.toolCall?.result_message
+ ? ""
+ : html`<button
+ class="cancel-button"
+ title="Cancel this operation"
+ @click=${(e: Event) => {
+ e.stopPropagation();
+ const button = e.target as HTMLButtonElement;
+ this._cancelToolCall(this.toolCall?.tool_call_id, button);
+ }}
+ >
+ Cancel
+ </button>`;
+
+ const status = html`<span
+ class="tool-call-status ${this.toolCall?.result_message ? "" : "spinner"}"
+ >${toolCallStatus}</span
+ >`;
+
+ const elapsed = html`${this.toolCall?.result_message?.elapsed
+ ? html`<span class="elapsed"
+ >${(this.toolCall?.result_message?.elapsed / 1e9).toFixed(2)}s
+ elapsed</span
+ >`
+ : ""}`;
+
+ const ret = html`<div class="tool-call">
+ <details ?open=${this.open}>
+ <summary>
+ <span class="tool-name">${this.toolCall?.name}</span>
+ <span class="summary-text"><slot name="summary"></slot></span>
+ ${status} ${cancelButton} ${elapsed}
+ </summary>
+ <slot name="input"></slot>
+ <slot name="result"></slot>
+ </details>
+ </div> `;
+ if (true) {
+ return ret;
+ }
+ }
+}
+
+@customElement("sketch-tool-card-bash")
+export class SketchToolCardBash extends LitElement {
+ @property()
+ toolCall: ToolCall;
+
+ @property()
+ open: boolean;
+
+ static styles = css`
+ pre {
+ background: rgb(236, 236, 236);
+ color: black;
+ padding: 0.5em;
+ border-radius: 4px;
+ }
+ .summary-text {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ font-family: monospace;
+ }
+ .input {
+ display: flex;
+ }
+ .input pre {
+ width: 100%;
+ margin-bottom: 0;
+ border-radius: 4px 4px 0 0;
+ }
+ .result pre {
+ margin-top: 0;
+ color: #555;
+ border-radius: 0 0 4px 4px;
+ }
+ .background-badge {
+ display: inline-block;
+ background-color: #6200ea;
+ color: white;
+ font-size: 10px;
+ font-weight: bold;
+ padding: 2px 6px;
+ border-radius: 10px;
+ margin-left: 8px;
+ vertical-align: middle;
+ }
+ .command-wrapper {
+ display: flex;
+ align-items: center;
+ }
+ `;
+
+ constructor() {
+ super();
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+ }
+
+ disconnectedCallback() {
+ super.disconnectedCallback();
+ }
+
+ render() {
+ const inputData = JSON.parse(this.toolCall?.input || "{}");
+ const isBackground = inputData?.background === true;
+ const backgroundIcon = isBackground ? "🔄 " : "";
+
+ return html`
+ <sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
+ <span slot="summary" class="summary-text">
+ <div class="command-wrapper">
+ 🖥️ ${backgroundIcon}${inputData?.command}
+ </div>
+ </span>
+ <div slot="input" class="input">
+ <pre>🖥️ ${backgroundIcon}${inputData?.command}</pre>
+ </div>
+ ${
+ this.toolCall?.result_message
+ ? html` ${this.toolCall?.result_message.tool_result
+ ? html`<div slot="result" class="result">
+ <pre class="tool-call-result">
+${this.toolCall?.result_message.tool_result}</pre
+ >
+ </div>`
+ : ""}`
+ : ""
+ }</div>
+ </sketch-tool-card>`;
+ }
+}
+
+@customElement("sketch-tool-card-codereview")
+export class SketchToolCardCodeReview extends LitElement {
+ @property()
+ toolCall: ToolCall;
+
+ @property()
+ open: boolean;
+
+ static styles = css``;
+
+ constructor() {
+ super();
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+ }
+
+ disconnectedCallback() {
+ super.disconnectedCallback();
+ }
+ render() {
+ return html` <sketch-tool-card
+ .open=${this.open}
+ .toolCall=${this.toolCall}
+ >
+ <span slot="summary" class="summary-text">
+ ${this.toolCall?.result_message?.tool_result == "OK" ? "✔️" : "⛔"}
+ </span>
+ <div slot="result">
+ <pre>${this.toolCall?.result_message?.tool_result}</pre>
+ </div>
+ </sketch-tool-card>`;
+ }
+}
+
+@customElement("sketch-tool-card-done")
+export class SketchToolCardDone extends LitElement {
+ @property()
+ toolCall: ToolCall;
+
+ @property()
+ open: boolean;
+
+ static styles = css``;
+
+ constructor() {
+ super();
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+ }
+
+ disconnectedCallback() {
+ super.disconnectedCallback();
+ }
+
+ render() {
+ const doneInput = JSON.parse(this.toolCall.input);
+ return html` <sketch-tool-card
+ .open=${this.open}
+ .toolCall=${this.toolCall}
+ >
+ <span slot="summary" class="summary-text"> </span>
+ <div slot="result">
+ ${Object.keys(doneInput.checklist_items).map((key) => {
+ const item = doneInput.checklist_items[key];
+ let statusIcon = "⛔";
+ if (item.status == "yes") {
+ statusIcon = "👍";
+ } else if (item.status == "not applicable") {
+ statusIcon = "🤷♂️";
+ }
+ return html`<div>
+ <span>${statusIcon}</span> ${key}:${item.status}
+ </div>`;
+ })}
+ </div>
+ </sketch-tool-card>`;
+ }
+}
+
+@customElement("sketch-tool-card-patch")
+export class SketchToolCardPatch extends LitElement {
+ @property()
+ toolCall: ToolCall;
+
+ @property()
+ open: boolean;
+
+ static styles = css`
+ .summary-text {
+ color: #555;
+ font-family: monospace;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ border-radius: 3px;
+ }
+ `;
+
+ constructor() {
+ super();
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+ }
+
+ disconnectedCallback() {
+ super.disconnectedCallback();
+ }
+
+ render() {
+ const patchInput = JSON.parse(this.toolCall?.input);
+ return html` <sketch-tool-card
+ .open=${this.open}
+ .toolCall=${this.toolCall}
+ >
+ <span slot="summary" class="summary-text">
+ ${patchInput?.path}: ${patchInput.patches.length}
+ edit${patchInput.patches.length > 1 ? "s" : ""}
+ </span>
+ <div slot="input">
+ ${patchInput.patches.map((patch) => {
+ return html` Patch operation: <b>${patch.operation}</b>
+ <pre>${patch.newText}</pre>`;
+ })}
+ </div>
+ <div slot="result">
+ <pre>${this.toolCall?.result_message?.tool_result}</pre>
+ </div>
+ </sketch-tool-card>`;
+ }
+}
+
+@customElement("sketch-tool-card-think")
+export class SketchToolCardThink extends LitElement {
+ @property()
+ toolCall: ToolCall;
+
+ @property()
+ open: boolean;
+
+ static styles = css`
+ .thought-bubble {
+ overflow-x: auto;
+ margin-bottom: 3px;
+ font-family: monospace;
+ padding: 3px 5px;
+ background: rgb(236, 236, 236);
+ border-radius: 6px;
+ user-select: text;
+ cursor: text;
+ -webkit-user-select: text;
+ -moz-user-select: text;
+ -ms-user-select: text;
+ font-size: 13px;
+ line-height: 1.3;
+ }
+ .summary-text {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ font-family: monospace;
+ max-width: 50%;
+ }
+ `;
+
+ constructor() {
+ super();
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+ }
+
+ disconnectedCallback() {
+ super.disconnectedCallback();
+ }
+
+ render() {
+ return html`
+ <sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
+ <span slot="summary" class="summary-text"
+ >${JSON.parse(this.toolCall?.input)?.thoughts}</span
+ >
+ <div slot="input" class="thought-bubble">
+ <div class="markdown-content">
+ ${unsafeHTML(
+ renderMarkdown(JSON.parse(this.toolCall?.input)?.thoughts),
+ )}
+ </div>
+ </div>
+ </sketch-tool-card>
+ `;
+ }
+}
+
+@customElement("sketch-tool-card-title")
+export class SketchToolCardTitle extends LitElement {
+ @property()
+ toolCall: ToolCall;
+
+ @property()
+ open: boolean;
+
+ static styles = css`
+ .summary-text {
+ font-style: italic;
+ }
+ `;
+ constructor() {
+ super();
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+ }
+
+ disconnectedCallback() {
+ super.disconnectedCallback();
+ }
+
+ render() {
+ return html`
+ <span class="summary-text"
+ >I've set the title of this sketch to
+ <b>"${JSON.parse(this.toolCall?.input)?.title}"</b></span
+ >
+ `;
+ }
+}
+
+@customElement("sketch-tool-card-generic")
+export class SketchToolCardGeneric extends LitElement {
+ @property()
+ toolCall: ToolCall;
+
+ @property()
+ open: boolean;
+
+ constructor() {
+ super();
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+ }
+
+ disconnectedCallback() {
+ super.disconnectedCallback();
+ }
+
+ render() {
+ return html` <sketch-tool-card
+ .open=${this.open}
+ .toolCall=${this.toolCall}
+ >
+ <span slot="summary" class="summary-text">${this.toolCall?.input}</span>
+ <div slot="input">
+ Input:
+ <pre>${this.toolCall?.input}</pre>
+ </div>
+ <div slot="result">
+ Result:
+ ${this.toolCall?.result_message
+ ? html` ${this.toolCall?.result_message.tool_result
+ ? html`<pre>${this.toolCall?.result_message.tool_result}</pre>`
+ : ""}`
+ : ""}
+ </div>
+ </sketch-tool-card>`;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "sketch-tool-card": SketchToolCard;
+ "sketch-tool-card-generic": SketchToolCardGeneric;
+ "sketch-tool-card-bash": SketchToolCardBash;
+ "sketch-tool-card-codereview": SketchToolCardCodeReview;
+ "sketch-tool-card-done": SketchToolCardDone;
+ "sketch-tool-card-patch": SketchToolCardPatch;
+ "sketch-tool-card-think": SketchToolCardThink;
+ "sketch-tool-card-title": SketchToolCardTitle;
+ }
+}
diff --git a/webui/src/web-components/sketch-view-mode-select.test.ts b/webui/src/web-components/sketch-view-mode-select.test.ts
new file mode 100644
index 0000000..6db790b
--- /dev/null
+++ b/webui/src/web-components/sketch-view-mode-select.test.ts
@@ -0,0 +1,119 @@
+import { test, expect } from "@sand4rt/experimental-ct-web";
+import { SketchViewModeSelect } from "./sketch-view-mode-select";
+
+test("initializes with 'chat' as the default mode", async ({ mount }) => {
+ const component = await mount(SketchViewModeSelect, {});
+
+ // Check the activeMode property
+ const activeMode = await component.evaluate(
+ (el: SketchViewModeSelect) => el.activeMode,
+ );
+ expect(activeMode).toBe("chat");
+
+ // Check that the chat button has the active class
+ await expect(
+ component.locator("#showConversationButton.active"),
+ ).toBeVisible();
+});
+
+test("displays all four view mode buttons", async ({ mount }) => {
+ const component = await mount(SketchViewModeSelect, {});
+
+ // Count the number of buttons
+ const buttonCount = await component.locator(".emoji-button").count();
+ expect(buttonCount).toBe(4);
+
+ // Check that each button exists
+ await expect(component.locator("#showConversationButton")).toBeVisible();
+ await expect(component.locator("#showDiffButton")).toBeVisible();
+ await expect(component.locator("#showChartsButton")).toBeVisible();
+ await expect(component.locator("#showTerminalButton")).toBeVisible();
+
+ // Check the title attributes
+ expect(
+ await component.locator("#showConversationButton").getAttribute("title"),
+ ).toBe("Conversation View");
+ expect(await component.locator("#showDiffButton").getAttribute("title")).toBe(
+ "Diff View",
+ );
+ expect(
+ await component.locator("#showChartsButton").getAttribute("title"),
+ ).toBe("Charts View");
+ expect(
+ await component.locator("#showTerminalButton").getAttribute("title"),
+ ).toBe("Terminal View");
+});
+
+test("dispatches view-mode-select event when clicking a mode button", async ({
+ mount,
+}) => {
+ const component = await mount(SketchViewModeSelect, {});
+
+ // Set up promise to wait for the event
+ const eventPromise = component.evaluate((el) => {
+ return new Promise((resolve) => {
+ el.addEventListener(
+ "view-mode-select",
+ (event) => {
+ resolve((event as CustomEvent).detail);
+ },
+ { once: true },
+ );
+ });
+ });
+
+ // Click the diff button
+ await component.locator("#showDiffButton").click();
+
+ // Wait for the event and check its details
+ const detail: any = await eventPromise;
+ expect(detail.mode).toBe("diff");
+});
+
+test("updates the active mode when receiving update-active-mode event", async ({
+ mount,
+}) => {
+ const component = await mount(SketchViewModeSelect, {});
+
+ // Initially should be in chat mode
+ let activeMode = await component.evaluate(
+ (el: SketchViewModeSelect) => el.activeMode,
+ );
+ expect(activeMode).toBe("chat");
+
+ // Dispatch the update-active-mode event
+ await component.evaluate((el) => {
+ const updateEvent = new CustomEvent("update-active-mode", {
+ detail: { mode: "diff" },
+ bubbles: true,
+ });
+ el.dispatchEvent(updateEvent);
+ });
+
+ // Check that the mode was updated
+ activeMode = await component.evaluate(
+ (el: SketchViewModeSelect) => el.activeMode,
+ );
+ expect(activeMode).toBe("diff");
+
+ // Check that the diff button is now active
+ await expect(component.locator("#showDiffButton.active")).toBeVisible();
+});
+
+test("correctly marks the active button based on mode", async ({ mount }) => {
+ const component = await mount(SketchViewModeSelect, {
+ props: {
+ activeMode: "terminal",
+ },
+ });
+
+ // Terminal button should be active
+ await expect(component.locator("#showTerminalButton.active")).toBeVisible();
+
+ // Other buttons should not be active
+ await expect(
+ component.locator("#showConversationButton.active"),
+ ).not.toBeVisible();
+ await expect(component.locator("#showDiffButton.active")).not.toBeVisible();
+ await expect(component.locator("#showChartsButton.active")).not.toBeVisible();
+});
diff --git a/webui/src/web-components/sketch-view-mode-select.ts b/webui/src/web-components/sketch-view-mode-select.ts
new file mode 100644
index 0000000..52f8a4e
--- /dev/null
+++ b/webui/src/web-components/sketch-view-mode-select.ts
@@ -0,0 +1,146 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import "./sketch-container-status";
+
+@customElement("sketch-view-mode-select")
+export class SketchViewModeSelect extends LitElement {
+ // Current active mode
+ @property()
+ activeMode: "chat" | "diff" | "charts" | "terminal" = "chat";
+ // Header bar: view mode buttons
+
+ static styles = css`
+ /* View Mode Button Styles */
+ .view-mode-buttons {
+ display: flex;
+ gap: 8px;
+ margin-right: 10px;
+ }
+
+ .emoji-button {
+ font-size: 18px;
+ width: 32px;
+ height: 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: white;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ padding: 0;
+ line-height: 1;
+ }
+
+ .emoji-button:hover {
+ background-color: #f0f0f0;
+ transform: translateY(-2px);
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ }
+
+ .emoji-button.active {
+ background-color: #e6f7ff;
+ border-color: #1890ff;
+ color: #1890ff;
+ }
+ `;
+
+ constructor() {
+ super();
+
+ // Binding methods
+ this._handleViewModeClick = this._handleViewModeClick.bind(this);
+ this._handleUpdateActiveMode = this._handleUpdateActiveMode.bind(this);
+ }
+
+ // See https://lit.dev/docs/components/lifecycle/
+ connectedCallback() {
+ super.connectedCallback();
+
+ // Listen for update-active-mode events
+ this.addEventListener(
+ "update-active-mode",
+ this._handleUpdateActiveMode as EventListener,
+ );
+ }
+
+ /**
+ * Handle view mode button clicks
+ */
+ private _handleViewModeClick(mode: "chat" | "diff" | "charts" | "terminal") {
+ // Dispatch a custom event to notify the app shell to change the view
+ const event = new CustomEvent("view-mode-select", {
+ detail: { mode },
+ bubbles: true,
+ composed: true,
+ });
+ this.dispatchEvent(event);
+ }
+
+ /**
+ * Handle updates to the active mode
+ */
+ private _handleUpdateActiveMode(event: CustomEvent) {
+ const { mode } = event.detail;
+ if (mode) {
+ this.activeMode = mode;
+ }
+ }
+
+ // See https://lit.dev/docs/components/lifecycle/
+ disconnectedCallback() {
+ super.disconnectedCallback();
+
+ // Remove event listeners
+ this.removeEventListener(
+ "update-active-mode",
+ this._handleUpdateActiveMode as EventListener,
+ );
+ }
+
+ render() {
+ return html`
+ <div class="view-mode-buttons">
+ <button
+ id="showConversationButton"
+ class="emoji-button ${this.activeMode === "chat" ? "active" : ""}"
+ title="Conversation View"
+ @click=${() => this._handleViewModeClick("chat")}
+ >
+ 💬
+ </button>
+ <button
+ id="showDiffButton"
+ class="emoji-button ${this.activeMode === "diff" ? "active" : ""}"
+ title="Diff View"
+ @click=${() => this._handleViewModeClick("diff")}
+ >
+ ±
+ </button>
+ <button
+ id="showChartsButton"
+ class="emoji-button ${this.activeMode === "charts" ? "active" : ""}"
+ title="Charts View"
+ @click=${() => this._handleViewModeClick("charts")}
+ >
+ 📈
+ </button>
+ <button
+ id="showTerminalButton"
+ class="emoji-button ${this.activeMode === "terminal" ? "active" : ""}"
+ title="Terminal View"
+ @click=${() => this._handleViewModeClick("terminal")}
+ >
+ 💻
+ </button>
+ </div>
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "sketch-view-mode-select": SketchViewModeSelect;
+ }
+}
diff --git a/webui/src/web-components/vega-embed.ts b/webui/src/web-components/vega-embed.ts
new file mode 100644
index 0000000..04f0087
--- /dev/null
+++ b/webui/src/web-components/vega-embed.ts
@@ -0,0 +1,86 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import vegaEmbed from "vega-embed";
+import { VisualizationSpec } from "vega-embed";
+
+/**
+ * A web component wrapper for vega-embed.
+ * Renders Vega and Vega-Lite visualizations.
+ *
+ * Usage:
+ * <vega-embed .spec="${yourVegaLiteSpec}"></vega-embed>
+ */
+@customElement("vega-embed")
+export class VegaEmbed extends LitElement {
+ /**
+ * The Vega or Vega-Lite specification to render
+ */
+ @property({ type: Object })
+ spec?: VisualizationSpec;
+
+ static styles = css`
+ :host {
+ display: block;
+ width: 100%;
+ height: 100%;
+ }
+
+ #vega-container {
+ width: 100%;
+ height: 100%;
+ min-height: 200px;
+ }
+ `;
+
+ @query("#vega-container")
+ protected container?: HTMLElement;
+
+ protected firstUpdated() {
+ this.renderVegaVisualization();
+ }
+
+ protected updated() {
+ this.renderVegaVisualization();
+ }
+
+ /**
+ * Renders the Vega/Vega-Lite visualization using vega-embed
+ */
+ private async renderVegaVisualization() {
+ if (!this.spec) {
+ return;
+ }
+
+ if (!this.container) {
+ return;
+ }
+
+ try {
+ // Clear previous visualization if any
+ this.container.innerHTML = "";
+
+ // Render new visualization
+ await vegaEmbed(this.container, this.spec, {
+ actions: true,
+ renderer: "svg",
+ });
+ } catch (error) {
+ console.error("Error rendering Vega visualization:", error);
+ this.container.innerHTML = `<div style="color: red; padding: 10px;">
+ Error rendering visualization: ${
+ error instanceof Error ? error.message : String(error)
+ }
+ </div>`;
+ }
+ }
+
+ render() {
+ return html`<div id="vega-container"></div> `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "vega-embed": VegaEmbed;
+ }
+}