fix(vscode): replace Show Changes with diff stats badge, shorten Worktree label

Replace the "Show Changes" text button with a compact diff stats badge
showing file count, additions, and deletions (3f +42 -8) using data
from session.summary(). Shorten "Continue in Worktree" to "Worktree".
All three buttons share one row.
This commit is contained in:
marius-kilocode
2026-03-25 20:18:22 +01:00
parent 14ba3f49c5
commit 4dc55f6e59
2 changed files with 51 additions and 8 deletions
@@ -151,15 +151,18 @@ export const ChatView: Component<ChatViewProps> = (props) => {
{language.t("command.session.new.task")}
</Button>
<Show when={isSidebar()}>
<Button
variant="ghost"
size="small"
<button
class="session-diff-badge"
onClick={() => vscode.postMessage({ type: "openChanges" })}
aria-label={language.t("command.session.show.changes")}
>
<Icon name="file-tree" size="small" />
{language.t("command.session.show.changes")}
</Button>
<Icon name="layers" size="small" />
<Show when={session.summary()?.files} fallback={<span>0f</span>}>
<span class="session-diff-files">{session.summary()!.files}f</span>
<span class="session-diff-add">+{session.summary()!.additions}</span>
<span class="session-diff-del">-{session.summary()!.deletions}</span>
</Show>
</button>
</Show>
<Show when={canContinueInWorktree()}>
<Button
@@ -178,7 +181,7 @@ export const ChatView: Component<ChatViewProps> = (props) => {
<Show when={transferring()} fallback={<Icon name="branch" size="small" />}>
<Spinner class="chat-spinner-small" />
</Show>
{transferring() ? transferDetail() : "Continue in Worktree"}
{transferring() ? transferDetail() : "Worktree"}
</Button>
</Show>
</div>
@@ -180,13 +180,53 @@
display: flex;
flex-wrap: wrap;
gap: 4px;
align-items: center;
}
.session-actions-row > [data-component="button"] {
.session-actions-row > [data-component="button"],
.session-actions-row > .session-diff-badge {
flex: 1 1 0;
min-width: fit-content;
}
/* Diff stats badge — matches Agent Manager diff toggle style */
.session-diff-badge {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 4px 8px;
border: none;
border-radius: 4px;
background: transparent;
color: var(--vscode-descriptionForeground);
font-family: var(--vscode-editor-font-family), monospace;
font-size: 11px;
font-variant-numeric: tabular-nums;
cursor: pointer;
white-space: nowrap;
}
.session-diff-badge:hover {
background: var(--vscode-toolbar-hoverBackground);
}
.session-diff-badge [data-component="icon"] {
opacity: 0.7;
}
.session-diff-files {
color: var(--vscode-descriptionForeground);
}
.session-diff-add {
color: #34d399;
}
.session-diff-del {
color: #f87171;
}
/* ============================================
Message List
============================================ */