loop: add diff stats from sketch-base to HEAD in /state endpoint
Add lines added/removed statistics computed from sketch-base to current HEAD,
displayed in webui Diff mode button for quick change overview.
Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: s3f10ecf39df6b581k
diff --git a/webui/src/fixtures/dummy.ts b/webui/src/fixtures/dummy.ts
index 87b73bd..2d8d91f 100644
--- a/webui/src/fixtures/dummy.ts
+++ b/webui/src/fixtures/dummy.ts
@@ -376,4 +376,6 @@
in_container: true,
first_message_index: 0,
agent_state: "WaitingForUserInput",
+ diff_lines_added: 42,
+ diff_lines_removed: 7,
};
diff --git a/webui/src/types.ts b/webui/src/types.ts
index 6b020e6..d764370 100644
--- a/webui/src/types.ts
+++ b/webui/src/types.ts
@@ -91,6 +91,8 @@
skaband_addr?: string;
link_to_github?: boolean;
ssh_connection_string?: string;
+ diff_lines_added: number;
+ diff_lines_removed: number;
}
export interface TodoItem {
diff --git a/webui/src/web-components/sketch-app-shell.ts b/webui/src/web-components/sketch-app-shell.ts
index 29e12ba..e2d27a2 100644
--- a/webui/src/web-components/sketch-app-shell.ts
+++ b/webui/src/web-components/sketch-app-shell.ts
@@ -531,6 +531,8 @@
ssh_error: "",
in_container: false,
first_message_index: 0,
+ diff_lines_added: 0,
+ diff_lines_removed: 0,
};
// Mutation observer to detect when new messages are added
@@ -1238,7 +1240,10 @@
<!-- Last Commit section moved to sketch-container-status -->
<!-- Views section with tabs -->
- <sketch-view-mode-select></sketch-view-mode-select>
+ <sketch-view-mode-select
+ .diffLinesAdded=${this.containerState?.diff_lines_added || 0}
+ .diffLinesRemoved=${this.containerState?.diff_lines_removed || 0}
+ ></sketch-view-mode-select>
<div class="refresh-control">
<button
diff --git a/webui/src/web-components/sketch-container-status.test.ts b/webui/src/web-components/sketch-container-status.test.ts
index ca1a8f5..7d01ac7 100644
--- a/webui/src/web-components/sketch-container-status.test.ts
+++ b/webui/src/web-components/sketch-container-status.test.ts
@@ -27,6 +27,8 @@
ssh_available: false,
in_container: true,
first_message_index: 0,
+ diff_lines_added: 15,
+ diff_lines_removed: 3,
};
test("render props", async ({ mount }) => {
diff --git a/webui/src/web-components/sketch-view-mode-select.ts b/webui/src/web-components/sketch-view-mode-select.ts
index c83b964..c6385d3 100644
--- a/webui/src/web-components/sketch-view-mode-select.ts
+++ b/webui/src/web-components/sketch-view-mode-select.ts
@@ -7,6 +7,14 @@
// Current active mode
@property()
activeMode: "chat" | "diff2" | "terminal" = "chat";
+
+ // Diff stats
+ @property({ type: Number })
+ diffLinesAdded: number = 0;
+
+ @property({ type: Number })
+ diffLinesRemoved: number = 0;
+
// Header bar: view mode buttons
static styles = css`
@@ -36,13 +44,32 @@
}
@media (max-width: 1400px) {
- .tab-btn span:not(.tab-icon) {
+ .tab-btn span:not(.tab-icon):not(.diff-stats) {
display: none;
}
.tab-btn {
padding: 8px 10px;
}
+
+ /* Always show diff stats */
+ .diff-stats {
+ display: inline !important;
+ font-size: 11px;
+ margin-left: 2px;
+ }
+ }
+
+ /* Style for diff stats */
+ .diff-stats {
+ font-size: 11px;
+ margin-left: 4px;
+ color: inherit;
+ opacity: 0.8;
+ }
+
+ .tab-btn.active .diff-stats {
+ opacity: 1;
}
.tab-btn:not(:last-child) {
@@ -133,11 +160,19 @@
<button
id="showDiff2Button"
class="tab-btn ${this.activeMode === "diff2" ? "active" : ""}"
- title="Diff View"
+ title="Diff View - ${this.diffLinesAdded > 0 ||
+ this.diffLinesRemoved > 0
+ ? `+${this.diffLinesAdded} -${this.diffLinesRemoved}`
+ : "No changes"}"
@click=${() => this._handleViewModeClick("diff2")}
>
<span class="tab-icon">±</span>
- <span>Diff</span>
+ <span class="diff-text">Diff</span>
+ ${this.diffLinesAdded > 0 || this.diffLinesRemoved > 0
+ ? html`<span class="diff-stats"
+ >+${this.diffLinesAdded} -${this.diffLinesRemoved}</span
+ >`
+ : ""}
</button>
<button