@codingame/monaco-vscode-chat-service-override 34.1.2 → 35.0.0

package/vscode/src/vs/workbench/contrib/agentsVoice/browser/components/sessionListComponent.js

@@ -0,0 +1,226 @@
+
+import { $, clearNode } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
+import { localize } from '@codingame/monaco-vscode-api/vscode/vs/nls';
+import { FONT_SIZE, addKeyboardActivation } from './tokens.js';
+
+function hoverIcon(className, ariaLabel) {
+    const el = $(`span.codicon.${className}`);
+    el.role = "button";
+    el.tabIndex = 0;
+    el.ariaLabel = ariaLabel;
+    el.style.cssText = `font-size:${FONT_SIZE.iconSm};color:var(--vscode-descriptionForeground);cursor:pointer;-webkit-app-region:no-drag;padding:1px;`;
+    el.addEventListener("mouseenter", () => {
+        el.style.color = "var(--vscode-foreground)";
+    });
+    el.addEventListener("mouseleave", () => {
+        el.style.color = "var(--vscode-descriptionForeground)";
+    });
+    addKeyboardActivation(el);
+    return el;
+}
+function createSessionRow(session, props) {
+    const isSelected = props.selectedTarget?.toString() === ( session.resource.toString());
+    const dotColor = session.needsInput ? "var(--vscode-editorWarning-foreground)" : session.isActive ? "var(--vscode-charts-green)" : "var(--vscode-editorWhitespace-foreground)";
+    const effectiveDotColor = session.isSpeaking ? "var(--vscode-agentsVoice-speakingForeground)" : dotColor;
+    const shouldPulse = session.isActive || session.isSpeaking;
+    const labelColor = session.isSpeaking ? "var(--vscode-agentsVoice-speakingForeground)" : session.isIdle ? "var(--vscode-descriptionForeground)" : "var(--vscode-foreground)";
+    const labelWeight = session.isSpeaking ? "500" : "normal";
+    const rowBg = isSelected ? "background:var(--vscode-list-activeSelectionBackground);border-radius:4px;" : "";
+    const rowLabelColor = isSelected ? "var(--vscode-list-activeSelectionForeground)" : labelColor;
+    const row = $("div");
+    row.role = "option";
+    row.tabIndex = 0;
+    row.ariaLabel = session.label || "Untitled session";
+    row.setAttribute("aria-selected", String(isSelected));
+    row.style.cssText = `display:flex;align-items:center;gap:6px;height:28px;padding:0 4px;border-bottom:1px solid var(--vscode-editorGroup-border);flex-shrink:0;cursor:pointer;${rowBg}`;
+    row.addEventListener("click", e => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (isSelected) {
+            props.onSelectTarget(undefined);
+        } else {
+            props.onSelectTarget(session.resource);
+        }
+    });
+    row.addEventListener("keydown", e => {
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            row.click();
+        }
+    });
+    const showActions = () => {
+        if (stats) {
+            stats.style.display = "none";
+        }
+        if (actions) {
+            actions.style.display = "flex";
+        }
+    };
+    const hideActions = () => {
+        if (stats) {
+            stats.style.display = "flex";
+        }
+        if (actions) {
+            actions.style.display = "none";
+        }
+    };
+    row.addEventListener("mouseenter", showActions);
+    row.addEventListener("mouseleave", hideActions);
+    row.addEventListener("focusin", showActions);
+    row.addEventListener("focusout", e => {
+        if (!row.contains(e.relatedTarget)) {
+            hideActions();
+        }
+    });
+    if (isSelected) {
+        const check = $("span.codicon.codicon-check");
+        check.style.cssText = `font-size:10px;color:${rowLabelColor};flex-shrink:0;`;
+        row.append(check);
+    } else {
+        const dot = $("span");
+        dot.style.cssText = `width:7px;height:7px;border-radius:50%;background:${effectiveDotColor};flex-shrink:0;${shouldPulse ? "animation:agents-voice-pulse 1.4s ease-in-out infinite;" : ""}`;
+        row.append(dot);
+    }
+    const label = $("span");
+    label.style.cssText = `font-size:${FONT_SIZE.body};flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:${rowLabelColor};font-weight:${labelWeight};`;
+    label.textContent = session.label || "Untitled session";
+    row.append(label);
+    const actionsContainer = $("div");
+    actionsContainer.style.cssText = "display:flex;align-items:center;gap:4px;flex-shrink:0;";
+    const stats = $("span");
+    stats.setAttribute("data-role", "stats");
+    stats.style.cssText = `display:flex;gap:4px;font-size:${FONT_SIZE.body};`;
+    if (session.insertions > 0) {
+        const ins = $("span");
+        ins.style.color = "var(--vscode-charts-green)";
+        ins.textContent = `+${session.insertions}`;
+        stats.append(ins);
+    }
+    if (session.deletions > 0) {
+        const del = $("span");
+        del.style.color = "var(--vscode-editorError-foreground)";
+        del.textContent = `-${session.deletions}`;
+        stats.append(del);
+    }
+    const actions = $("span");
+    actions.setAttribute("data-role", "actions");
+    actions.style.cssText = "display:none;gap:4px;align-items:center;";
+    if (!session.isIdle) {
+        const stopBtn = hoverIcon("codicon-debug-stop", ( localize(4835, "Stop session")));
+        stopBtn.addEventListener("mouseenter", () => {
+            stopBtn.style.color = "var(--vscode-editorError-foreground)";
+        });
+        stopBtn.addEventListener("mouseleave", () => {
+            stopBtn.style.color = "var(--vscode-descriptionForeground)";
+        });
+        stopBtn.addEventListener("click", e => {
+            e.preventDefault();
+            e.stopPropagation();
+            props.onStopSession(session.resource);
+        });
+        actions.append(stopBtn);
+    }
+    actionsContainer.append(stats, actions);
+    row.append(actionsContainer);
+    const wrapper = $("div");
+    wrapper.append(row);
+    if (session.toolConfirmation) {
+        const tc = session.toolConfirmation;
+        const confRow = $("div");
+        confRow.style.cssText = "display:flex;flex-direction:column;gap:3px;padding:2px 2px 6px 15px;border-bottom:1px solid var(--vscode-panel-border);";
+        const confDesc = $("span");
+        confDesc.style.cssText = `font-size:${FONT_SIZE.body};color:var(--vscode-editorWarning-foreground);`;
+        confDesc.textContent = tc.description;
+        const confBtns = $("div");
+        confBtns.style.cssText = "display:flex;gap:6px;";
+        const btnStyle = `-webkit-app-region:no-drag;border:none;color:var(--vscode-button-foreground);font-size:${FONT_SIZE.body};padding:2px 8px;border-radius:3px;cursor:pointer;`;
+        if (tc.type === "approval") {
+            const approveBtn = $("button");
+            approveBtn.style.cssText = `${btnStyle}background:var(--vscode-charts-green);`;
+            approveBtn.textContent = ( localize(4836, "Approve"));
+            approveBtn.addEventListener("click", () => tc.approve());
+            const denyBtn = $("button");
+            denyBtn.style.cssText = `${btnStyle}background:var(--vscode-button-secondaryBackground);color:var(--vscode-foreground);`;
+            denyBtn.textContent = ( localize(4837, "Deny"));
+            denyBtn.addEventListener("click", () => tc.deny());
+            const stopBtn = $("button");
+            stopBtn.style.cssText = `${btnStyle}background:var(--vscode-button-secondaryBackground);color:var(--vscode-foreground);`;
+            stopBtn.textContent = ( localize(4838, "Stop"));
+            stopBtn.addEventListener("click", () => props.onCancelSession(session.resource));
+            confBtns.append(approveBtn, denyBtn, stopBtn);
+        } else {
+            const openInVSCode = $("button");
+            openInVSCode.style.cssText = `${btnStyle}background:var(--vscode-button-background);`;
+            openInVSCode.textContent = ( localize(4839, "Open in VS Code"));
+            openInVSCode.addEventListener("click", () => props.onOpenSession(session.resource));
+            confBtns.append(openInVSCode);
+        }
+        confRow.append(confDesc, confBtns);
+        wrapper.append(confRow);
+    }
+    return wrapper;
+}
+function createSessionList() {
+    const container = $("div.voice-session-list");
+    container.style.cssText = "display:flex;flex-direction:column;min-height:84px;max-height:320px;overflow-y:auto;margin:0 -14px 0 0;padding-right:8px;";
+    const style = $("style");
+    style.textContent = `
+        @keyframes agents-voice-pulse{0%,100%{opacity:1}50%{opacity:0.4}}
+        .voice-session-list::-webkit-scrollbar{width:6px;background:transparent;}
+        .voice-session-list::-webkit-scrollbar-thumb{background:var(--vscode-scrollbarSlider-activeBackground);border-radius:3px;}
+        .voice-session-list::-webkit-scrollbar-thumb:hover{background:var(--vscode-scrollbarSlider-activeBackground);}
+        .voice-session-list > div:last-of-type{border-bottom:none !important;}
+    `;
+    return {
+        element: container,
+        update(props) {
+            clearNode(container);
+            const hasGroups = props.groups && props.groups.length > 0;
+            const hasSessions = props.sessions.length > 0;
+            const headerRow = $("div");
+            headerRow.style.cssText = "display:flex;align-items:center;justify-content:space-between;padding:2px 2px 4px;border-bottom:1px solid var(--vscode-editorGroup-border);";
+            const headerLabel = $("span");
+            headerLabel.style.cssText = `font-size:${FONT_SIZE.micro};color:var(--vscode-disabledForeground);text-transform:uppercase;letter-spacing:0.5px;font-weight:500;`;
+            headerLabel.textContent = props.selectedTarget ? ( localize(4840, "Send to")) : ( localize(4841, "Send to (active)"));
+            const addBtn = hoverIcon("codicon-add", ( localize(4842, "New session")));
+            addBtn.title = ( localize(4842, "New session"));
+            addBtn.style.cssText += "padding:1px 2px;";
+            addBtn.addEventListener("click", e => {
+                e.preventDefault();
+                e.stopPropagation();
+                props.onNewSession();
+            });
+            headerRow.append(headerLabel, addBtn);
+            container.append(headerRow);
+            if (!hasGroups && !hasSessions) {
+                const empty = $("div");
+                empty.style.cssText = "display:flex;align-items:center;justify-content:center;height:60px;";
+                const emptyText = $("span");
+                emptyText.style.cssText = `font-size:${FONT_SIZE.body};color:var(--vscode-foreground);`;
+                emptyText.textContent = ( localize(4843, "No active sessions"));
+                empty.append(emptyText);
+                container.append(empty);
+            } else if (hasGroups) {
+                for (const group of props.groups) {
+                    const groupHeader = $("div");
+                    groupHeader.style.cssText = "padding:4px 2px 2px;";
+                    const groupLabel = $("span");
+                    groupLabel.style.cssText = `font-size:${FONT_SIZE.micro};color:var(--vscode-disabledForeground);text-transform:uppercase;letter-spacing:0.5px;font-weight:500;`;
+                    groupLabel.textContent = group.label;
+                    groupHeader.append(groupLabel);
+                    container.append(groupHeader);
+                    for (const session of group.sessions) {
+                        container.append(createSessionRow(session, props));
+                    }
+                }
+            } else {
+                for (const session of props.sessions) {
+                    container.append(createSessionRow(session, props));
+                }
+            }
+            container.append(style);
+        }
+    };
+}
+
+export { createSessionList };

package/vscode/src/vs/workbench/contrib/agentsVoice/browser/components/statusRowsComponent.d.ts

@@ -0,0 +1,18 @@
+import type { IPendingToolConfirmation } from "../../../chat/browser/voiceClient/voiceSessionController.js";
+import { URI } from "@codingame/monaco-vscode-api/vscode/vs/base/common/uri";
+export interface StatusRowsProps {
+    readonly workingCount: number;
+    readonly needsInputCount: number;
+    readonly doneCount: number;
+    readonly speakingSessionLabel: string | undefined;
+    readonly speakingSessionResource: URI | undefined;
+    readonly pendingToolConfirmations: readonly IPendingToolConfirmation[];
+    readonly onOpenSession: (resource: URI) => void;
+    /** When false, hide the counter rows and the "No active sessions" placeholder. */
+    readonly showCounters?: boolean;
+}
+export interface StatusRowsComponent {
+    readonly element: HTMLElement;
+    update(props: StatusRowsProps): void;
+}
+export declare function createStatusRows(): StatusRowsComponent;

package/vscode/src/vs/workbench/contrib/agentsVoice/browser/components/statusRowsComponent.js

@@ -0,0 +1,138 @@
+
+import { $ } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
+import { localize } from '@codingame/monaco-vscode-api/vscode/vs/nls';
+import { createToolConfirmations } from './confirmationComponent.js';
+import { FONT_SIZE } from './tokens.js';
+
+function createStatusRow() {
+    const row = $("div");
+    row.style.cssText = "display:flex;align-items:center;gap:6px;height:20px;flex-shrink:0;padding-left:2px;";
+    const dot = $("span");
+    dot.style.cssText = "width:7px;height:7px;border-radius:50%;flex-shrink:0;";
+    const text = $("span");
+    text.style.cssText = `font-size:${FONT_SIZE.body};color:var(--vscode-descriptionForeground);`;
+    row.append(dot, text);
+    return {
+        element: row,
+        update(dotColor, count, label) {
+            if (count <= 0) {
+                row.style.display = "none";
+                return;
+            }
+            row.style.display = "flex";
+            dot.style.background = dotColor;
+            text.textContent = `${count} session${count > 1 ? "s" : ""} ${label}`;
+        }
+    };
+}
+function createStatusRows() {
+    const container = $("div");
+    container.style.cssText = "display:flex;flex-direction:column;";
+    const inner = $("div");
+    inner.style.cssText = "display:flex;flex-direction:column;";
+    const speakingRow = $("div");
+    speakingRow.style.cssText = "display:flex;align-items:center;gap:6px;height:20px;flex-shrink:0;padding-left:2px;";
+    const speakingDot = $("span");
+    speakingDot.style.cssText = "width:7px;height:7px;border-radius:50%;background:var(--vscode-agentsVoice-speakingForeground);flex-shrink:0;animation:agents-voice-pulse 1.4s ease-in-out infinite;";
+    const speakingLabel = $("span");
+    speakingLabel.style.cssText = `font-size:${FONT_SIZE.body};color:var(--vscode-agentsVoice-speakingForeground);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;`;
+    speakingRow.append(speakingDot, speakingLabel);
+    let speakingClickHandler;
+    let speakingKeyHandler;
+    const workingRow = createStatusRow();
+    const needsInputRow = createStatusRow();
+    const doneRow = createStatusRow();
+    const noSessionsRow = $("div");
+    noSessionsRow.style.cssText = "display:flex;align-items:center;height:20px;flex-shrink:0;padding-left:2px;";
+    const noSessionsText = $("span");
+    noSessionsText.style.cssText = `font-size:${FONT_SIZE.body};color:var(--vscode-descriptionForeground);font-style:italic;`;
+    noSessionsText.textContent = ( localize(4844, "No active sessions"));
+    noSessionsRow.append(noSessionsText);
+    inner.append(
+        speakingRow,
+        workingRow.element,
+        needsInputRow.element,
+        doneRow.element,
+        noSessionsRow
+    );
+    const confirmations = createToolConfirmations();
+    const pulseStyle = $("style");
+    pulseStyle.textContent = "@keyframes agents-voice-pulse{0%,100%{opacity:1}50%{opacity:0.4}}";
+    container.append(inner, confirmations.element, pulseStyle);
+    return {
+        element: container,
+        update(props) {
+            const showCounters = props.showCounters ?? true;
+            const hasAny = props.workingCount > 0 || props.needsInputCount > 0 || props.doneCount > 0 || !!props.speakingSessionLabel;
+            if (props.speakingSessionLabel) {
+                speakingRow.style.display = "flex";
+                speakingLabel.textContent = props.speakingSessionLabel;
+                if (speakingClickHandler) {
+                    speakingRow.removeEventListener("click", speakingClickHandler);
+                    speakingClickHandler = undefined;
+                }
+                if (speakingKeyHandler) {
+                    speakingRow.removeEventListener("keydown", speakingKeyHandler);
+                    speakingKeyHandler = undefined;
+                }
+                if (props.speakingSessionResource) {
+                    const resource = props.speakingSessionResource;
+                    speakingClickHandler = () => props.onOpenSession(resource);
+                    speakingKeyHandler = e => {
+                        if (e.key === "Enter" || e.key === " ") {
+                            e.preventDefault();
+                            props.onOpenSession(resource);
+                        }
+                    };
+                    speakingRow.addEventListener("click", speakingClickHandler);
+                    speakingRow.addEventListener("keydown", speakingKeyHandler);
+                    speakingRow.style.cursor = "pointer";
+                    speakingRow.tabIndex = 0;
+                    speakingRow.setAttribute("role", "button");
+                    speakingRow.title = ( localize(4845, "Jump to session"));
+                } else {
+                    speakingRow.style.cursor = "";
+                    speakingRow.removeAttribute("tabIndex");
+                    speakingRow.removeAttribute("role");
+                    speakingRow.title = "";
+                }
+            } else {
+                speakingRow.style.display = "none";
+                if (speakingClickHandler) {
+                    speakingRow.removeEventListener("click", speakingClickHandler);
+                    speakingClickHandler = undefined;
+                }
+                if (speakingKeyHandler) {
+                    speakingRow.removeEventListener("keydown", speakingKeyHandler);
+                    speakingKeyHandler = undefined;
+                }
+                speakingRow.style.cursor = "";
+                speakingRow.removeAttribute("tabIndex");
+                speakingRow.removeAttribute("role");
+                speakingRow.title = "";
+            }
+            if (showCounters) {
+                workingRow.update("var(--vscode-charts-green)", props.workingCount, ( localize(4846, "working")));
+                needsInputRow.update(
+                    "var(--vscode-editorWarning-foreground)",
+                    props.needsInputCount,
+                    ( localize(4847, "needs input"))
+                );
+                doneRow.update("var(--vscode-disabledForeground)", props.doneCount, ( localize(4848, "done")));
+                noSessionsRow.style.display = !hasAny ? "flex" : "none";
+            } else {
+                workingRow.element.style.display = "none";
+                needsInputRow.element.style.display = "none";
+                doneRow.element.style.display = "none";
+                noSessionsRow.style.display = "none";
+            }
+            confirmations.update({
+                confirmations: props.pendingToolConfirmations,
+                onOpenSession: props.onOpenSession
+            });
+            pulseStyle.style.display = props.speakingSessionLabel ? "" : "none";
+        }
+    };
+}
+
+export { createStatusRows };

package/vscode/src/vs/workbench/contrib/agentsVoice/browser/components/tokens.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Visual design tokens for the agentsVoice floating pane.
+ * Centralize sizes and colors so every component pulls from the same palette.
+ */
+export declare const FONT_SIZE: {
+    readonly micro: "10px";
+    readonly body: "12px";
+    readonly base: "13px";
+    readonly iconSm: "14px";
+    readonly iconMd: "16px";
+};
+export declare const FONT_WEIGHT: {
+    readonly normal: "400";
+    readonly medium: "500";
+    readonly semibold: "600";
+    readonly bold: "700";
+};
+export declare const COLOR: {
+    readonly userTranscript: "rgb(88,166,255)";
+    readonly assistantTranscript: "rgb(163,113,247)";
+};
+/**
+ * Add Enter/Space keyboard activation to a non-native button element.
+ * Required for elements with role="button" + tabindex="0".
+ */
+export declare function addKeyboardActivation(el: HTMLElement): void;

package/vscode/src/vs/workbench/contrib/agentsVoice/browser/components/tokens.js

@@ -0,0 +1,25 @@
+
+
+const FONT_SIZE = {
+    micro: '10px',
+    body: '12px',
+    base: '13px',
+    iconSm: '14px',
+    iconMd: '16px',
+};
+const FONT_WEIGHT = {
+    medium: '500'};
+const COLOR = {
+    userTranscript: 'rgb(88,166,255)',
+    assistantTranscript: 'rgb(163,113,247)',
+};
+function addKeyboardActivation(el) {
+    el.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            el.click();
+        }
+    });
+}
+
+export { COLOR, FONT_SIZE, FONT_WEIGHT, addKeyboardActivation };

package/vscode/src/vs/workbench/contrib/agentsVoice/browser/components/transcriptComponent.d.ts

@@ -0,0 +1,13 @@
+import { IDisposable } from "@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle";
+import type { ITranscriptTurn } from "../../../chat/browser/voiceClient/voiceSessionController.js";
+export interface TranscriptProps {
+    readonly turns: readonly ITranscriptTurn[];
+    readonly chatStyle?: boolean;
+    /** When true, keep the scroll anchored to the top instead of the bottom. */
+    readonly scrollToTop?: boolean;
+}
+export interface TranscriptComponent {
+    readonly element: HTMLElement;
+    update(props: TranscriptProps): void;
+}
+export declare function createTranscript(): TranscriptComponent & IDisposable;

package/vscode/src/vs/workbench/contrib/agentsVoice/browser/components/transcriptComponent.js

@@ -0,0 +1,108 @@
+
+import { $, clearNode } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
+import { DomScrollableElement } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/scrollbar/scrollableElement';
+import { ScrollbarVisibility } from '@codingame/monaco-vscode-api/vscode/vs/base/common/scrollable';
+import { DisposableStore } from '@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle';
+import { COLOR, FONT_SIZE } from './tokens.js';
+
+const MAX_LINES = 10;
+const LINE_HEIGHT = 1.4;
+const MAX_HEIGHT = `${MAX_LINES * LINE_HEIGHT}em`;
+const USER_CONTAINER_STYLE = ["overflow-x:hidden"].join(";");
+const ASSISTANT_STYLE = [
+    "overflow-x:hidden",
+    "white-space:pre-wrap",
+    `color:${COLOR.assistantTranscript}`
+].join(";");
+const TRANSCRIPT_CSS = `
+    @keyframes textPulse { 0%,100%{opacity:0.9} 50%{opacity:0.4} }
+`;
+function createUserTurn(turn, chatStyle) {
+    const wrapper = $("div.voice-user-transcript");
+    wrapper.style.cssText = USER_CONTAINER_STYLE;
+    const userColor = chatStyle ? "var(--vscode-foreground)" : COLOR.userTranscript;
+    const inner = $("div");
+    if (!turn.isPartial) {
+        const span = $("span");
+        span.style.color = userColor;
+        span.textContent = turn.text;
+        inner.append(span);
+    } else {
+        const unsure = turn.committed ? turn.text.slice(turn.committed.length) : turn.text;
+        if (turn.committed) {
+            const committedSpan = $("span");
+            committedSpan.style.color = userColor;
+            committedSpan.textContent = turn.committed;
+            inner.append(committedSpan);
+        }
+        const unsureSpan = $("span");
+        unsureSpan.style.cssText = `color:${userColor};opacity:0.6;font-style:italic;animation:textPulse 1.5s ease-in-out infinite;`;
+        unsureSpan.textContent = unsure;
+        const cursor = $("span");
+        cursor.style.fontStyle = "normal";
+        cursor.textContent = "▉";
+        unsureSpan.append(cursor);
+        inner.append(unsureSpan);
+    }
+    wrapper.append(inner);
+    return wrapper;
+}
+function createAssistantTurn(turn, chatStyle) {
+    const el = $("div");
+    if (chatStyle) {
+        el.style.cssText = ASSISTANT_STYLE.replace(
+            `color:${COLOR.assistantTranscript}`,
+            "color:var(--vscode-descriptionForeground)"
+        );
+    } else {
+        el.style.cssText = ASSISTANT_STYLE;
+    }
+    el.textContent = turn.text;
+    return el;
+}
+function createTranscript() {
+    const store = ( new DisposableStore());
+    const container = $("div");
+    container.style.cssText = `display:flex;flex-direction:column;gap:2px;padding:2px 2px 4px;font-size:${FONT_SIZE.body};line-height:${LINE_HEIGHT};word-break:break-word;max-height:${MAX_HEIGHT};overflow:hidden;box-sizing:border-box;`;
+    const scrollable = store.add(( new DomScrollableElement(container, {
+        horizontal: ScrollbarVisibility.Hidden,
+        vertical: ScrollbarVisibility.Auto
+    })));
+    const wrapper = scrollable.getDomNode();
+    wrapper.style.maxHeight = MAX_HEIGHT;
+    const style = $("style");
+    style.textContent = TRANSCRIPT_CSS;
+    wrapper.prepend(style);
+    return {
+        element: wrapper,
+        update(props) {
+            let visible = props.turns.filter(t => t.text.length > 0 || (t.speaker === "user" && t.isPartial));
+            if (visible.length >= 2 && visible[visible.length - 1].speaker === "assistant" && visible[visible.length - 2].speaker === "assistant") {
+                visible = [visible[visible.length - 1]];
+            }
+            if (props.chatStyle && visible.length > 0) {
+                visible = [visible[visible.length - 1]];
+            }
+            clearNode(container);
+            if (visible.length === 0) {
+                container.style.display = "none";
+                return;
+            }
+            container.style.display = "flex";
+            for (const turn of visible) {
+                container.append(
+                    turn.speaker === "user" ? createUserTurn(turn, props.chatStyle) : createAssistantTurn(turn, props.chatStyle)
+                );
+            }
+            scrollable.scanDomNode();
+            scrollable.setScrollPosition({
+                scrollTop: props.scrollToTop ? 0 : container.scrollHeight
+            });
+        },
+        dispose() {
+            store.dispose();
+        }
+    };
+}
+
+export { createTranscript };

package/vscode/src/vs/workbench/contrib/agentsVoice/browser/components/voiceBarComponent.d.ts

@@ -0,0 +1,13 @@
+import type { VoiceState } from "../../../chat/browser/voiceClient/voiceSessionController.js";
+import type { URI } from "@codingame/monaco-vscode-api/vscode/vs/base/common/uri";
+export interface VoiceBarProps {
+    readonly voiceState: VoiceState;
+    readonly speakingSessionLabel: string | undefined;
+    readonly speakingSession: URI | undefined;
+    readonly onStopSpeech: () => void;
+}
+export interface VoiceBarComponent {
+    readonly element: HTMLElement;
+    update(props: VoiceBarProps): void;
+}
+export declare function createVoiceBar(): VoiceBarComponent;

package/vscode/src/vs/workbench/contrib/agentsVoice/browser/components/voiceBarComponent.js

@@ -0,0 +1,63 @@
+
+import { $ } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
+import { localize } from '@codingame/monaco-vscode-api/vscode/vs/nls';
+import { FONT_SIZE, addKeyboardActivation } from './tokens.js';
+
+function createVoiceBar() {
+    const container = $("div");
+    container.style.cssText = "display:flex;align-items:center;gap:6px;height:24px;padding:4px 2px;border-bottom:1px solid var(--vscode-panel-border);flex-shrink:0;";
+    const dot = $("span");
+    dot.style.cssText = "width:7px;height:7px;border-radius:50%;flex-shrink:0;";
+    const label = $("span");
+    label.style.cssText = `font-size:${FONT_SIZE.body};color:var(--vscode-foreground);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;`;
+    const waveform = $("div");
+    waveform.style.cssText = "display:flex;align-items:center;gap:2px;height:16px;flex:0 0 auto;";
+    for (let i = 0; i < 6; i++) {
+        const bar = $("div");
+        bar.style.cssText = "width:2px;height:3px;border-radius:1px;background:var(--vscode-editorWidget-background);transition:height 0.05s ease;";
+        waveform.append(bar);
+    }
+    const stopBtn = $("span.codicon.codicon-debug-stop");
+    stopBtn.role = "button";
+    stopBtn.tabIndex = 0;
+    stopBtn.ariaLabel = ( localize(4849, "Stop speech"));
+    stopBtn.style.cssText = `font-size:${FONT_SIZE.body};color:var(--vscode-editorError-foreground);cursor:pointer;-webkit-app-region:no-drag;padding:2px;`;
+    addKeyboardActivation(stopBtn);
+    container.append(dot, label, waveform, stopBtn);
+    let currentStopHandler;
+    return {
+        element: container,
+        update(props) {
+            const isSpeaking = props.voiceState === "speaking";
+            const isListening = props.voiceState === "listening";
+            if ((isSpeaking && props.speakingSession) || (!isSpeaking && !isListening)) {
+                container.style.display = "none";
+                if (currentStopHandler) {
+                    stopBtn.removeEventListener("click", currentStopHandler);
+                    currentStopHandler = undefined;
+                }
+                return;
+            }
+            container.style.display = "flex";
+            dot.style.background = isSpeaking ? "var(--vscode-charts-green)" : "var(--vscode-editorInfo-foreground)";
+            label.textContent = isSpeaking ? (props.speakingSessionLabel || ( localize(4850, "Speaking..."))) : ( localize(4851, "Listening"));
+            stopBtn.style.display = isSpeaking ? "" : "none";
+            if (isSpeaking) {
+                if (currentStopHandler) {
+                    stopBtn.removeEventListener("click", currentStopHandler);
+                }
+                currentStopHandler = e => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    props.onStopSpeech();
+                };
+                stopBtn.addEventListener("click", currentStopHandler);
+            } else if (currentStopHandler) {
+                stopBtn.removeEventListener("click", currentStopHandler);
+                currentStopHandler = undefined;
+            }
+        }
+    };
+}
+
+export { createVoiceBar };

package/vscode/src/vs/workbench/contrib/agentsVoice/browser/transcriptsView/voiceTranscripts.contribution.d.ts

@@ -0,0 +1 @@
+export {};