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

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

@@ -0,0 +1,57 @@
+
+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, FONT_WEIGHT } from './tokens.js';
+
+function createConfirmationRow(tc, onOpenSession) {
+    const row = $("div");
+    row.style.cssText = "display:flex;flex-direction:column;gap:3px;";
+    const label = $("span");
+    label.style.cssText = `font-size:${FONT_SIZE.body};color:var(--vscode-editorWarning-foreground);font-weight:${FONT_WEIGHT.medium};`;
+    label.textContent = tc.sessionLabel;
+    const desc = $("span");
+    desc.style.cssText = `font-size:${FONT_SIZE.body};color:var(--vscode-descriptionForeground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;`;
+    desc.textContent = tc.description;
+    const btnRow = $("div");
+    btnRow.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(4805, "Approve"));
+        approveBtn.addEventListener("click", () => tc.approve());
+        const denyBtn = $("button");
+        denyBtn.style.cssText = `${btnStyle}background:var(--vscode-editorError-foreground);`;
+        denyBtn.textContent = ( localize(4806, "Deny"));
+        denyBtn.addEventListener("click", () => tc.deny());
+        btnRow.append(approveBtn, denyBtn);
+    } else {
+        const openBtn = $("button");
+        openBtn.style.cssText = `${btnStyle}background:var(--vscode-button-background);`;
+        openBtn.textContent = ( localize(4807, "Open in VS Code"));
+        openBtn.addEventListener("click", () => onOpenSession(tc.sessionResource));
+        btnRow.append(openBtn);
+    }
+    row.append(label, desc, btnRow);
+    return row;
+}
+function createToolConfirmations() {
+    const container = $("div");
+    container.style.cssText = "display:flex;flex-direction:column;gap:4px;padding:6px 2px 2px;border-top:1px solid var(--vscode-editorWidget-background);margin-top:4px;";
+    return {
+        element: container,
+        update(props) {
+            clearNode(container);
+            if (props.confirmations.length === 0) {
+                container.style.display = "none";
+                return;
+            }
+            container.style.display = "flex";
+            for (const tc of props.confirmations) {
+                container.append(createConfirmationRow(tc, props.onOpenSession));
+            }
+        }
+    };
+}
+
+export { createToolConfirmations };

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

@@ -0,0 +1,33 @@
+import { Disposable } from "@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle";
+export interface FeedbackDialogProps {
+    readonly onSubmit: (feedbackText: string) => void;
+    readonly onCancel: () => void;
+}
+export interface FeedbackDialogState {
+    readonly isSubmitting: boolean;
+    readonly error?: string;
+    readonly submitted: boolean;
+}
+export interface FeedbackDialogComponent {
+    readonly element: HTMLElement;
+    update(props: FeedbackDialogProps, state: FeedbackDialogState): void;
+}
+export declare function createFeedbackDialog(): FeedbackDialogComponent;
+/**
+ * Mount the feedback dialog into a container, returning a controller to
+ * update state and unmount.
+ */
+export declare class FeedbackDialogController extends Disposable {
+    private readonly _container;
+    private readonly _onSubmit;
+    private readonly _onClose;
+    private _state;
+    private readonly _dialog;
+    constructor(_container: HTMLElement, _onSubmit: (feedbackText: string) => Promise<{
+        ok: boolean;
+        error?: string;
+    }>, _onClose: () => void);
+    private _render;
+    private _handleSubmit;
+    dispose(): void;
+}

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

@@ -0,0 +1,98 @@
+
+import { $, createElement } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
+import { localize } from '@codingame/monaco-vscode-api/vscode/vs/nls';
+import '@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle';
+import '@codingame/monaco-vscode-api/vscode/vs/base/common/async';
+import { FONT_SIZE } from './tokens.js';
+
+function createFeedbackDialog() {
+    const container = $("div");
+    container.style.cssText = "display:flex;flex-direction:column;gap:8px;padding:4px 0;";
+    const successView = $("div");
+    successView.style.cssText = "display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 14px;gap:8px;flex:1;";
+    const successIcon = $("span.codicon.codicon-check");
+    successIcon.style.cssText = "font-size:20px;color:var(--vscode-charts-green);";
+    const successText = $("span");
+    successText.style.cssText = `font-size:${FONT_SIZE.body};color:var(--vscode-foreground);font-weight:500;text-align:center;`;
+    successText.textContent = ( localize(4808, "Thank you for your feedback!"));
+    successView.append(successIcon, successText);
+    const formView = $("div");
+    formView.style.cssText = "display:flex;flex-direction:column;gap:8px;padding:4px 0;";
+    const headerRow = $("div");
+    headerRow.style.cssText = "display:flex;align-items:center;gap:6px;";
+    const headerIcon = $("span.codicon.codicon-feedback");
+    headerIcon.style.fontSize = FONT_SIZE.iconSm;
+    headerIcon.style.color = "var(--vscode-foreground)";
+    const headerText = $("span");
+    headerText.style.cssText = `font-size:${FONT_SIZE.body};font-weight:600;color:var(--vscode-foreground);`;
+    headerText.textContent = ( localize(4809, "Send Feedback"));
+    headerRow.append(headerIcon, headerText);
+    const textarea = createElement("textarea");
+    textarea.rows = 3;
+    textarea.placeholder = ( localize(4810, "What could we improve?"));
+    textarea.style.cssText = `width:100%;box-sizing:border-box;background:var(--vscode-input-background);color:var(--vscode-input-foreground);border:1px solid var(--vscode-input-border, var(--vscode-editorWidget-border));border-radius:4px;padding:6px 8px;font-family:inherit;font-size:${FONT_SIZE.body};resize:vertical;min-height:48px;max-height:120px;outline:none;-webkit-app-region:no-drag;`;
+    textarea.addEventListener("focus", () => {
+        textarea.style.borderColor = "var(--vscode-focusBorder)";
+    });
+    textarea.addEventListener("blur", () => {
+        textarea.style.borderColor = "var(--vscode-input-border, var(--vscode-editorWidget-border))";
+    });
+    const consent = $("span");
+    consent.style.cssText = `font-size:${FONT_SIZE.micro};color:var(--vscode-descriptionForeground);line-height:1.3;`;
+    consent.textContent = ( localize(
+        4811,
+        "By submitting, you agree that your session logs and transcript history will be included with your feedback."
+    ));
+    const errorEl = $("span");
+    errorEl.style.cssText = `font-size:${FONT_SIZE.micro};color:var(--vscode-errorForeground);`;
+    const buttonRow = $("div");
+    buttonRow.style.cssText = "display:flex;gap:6px;justify-content:flex-end;";
+    const cancelBtn = createElement("button");
+    cancelBtn.style.cssText = `-webkit-app-region:no-drag;background:transparent;border:1px solid var(--vscode-button-secondaryBackground, var(--vscode-editorWidget-border));color:var(--vscode-foreground);font-size:${FONT_SIZE.body};padding:3px 10px;border-radius:3px;cursor:pointer;`;
+    cancelBtn.textContent = ( localize(4812, "Cancel"));
+    const submitBtn = createElement("button");
+    submitBtn.style.cssText = `-webkit-app-region:no-drag;background:var(--vscode-button-background);border:none;color:var(--vscode-button-foreground);font-size:${FONT_SIZE.body};padding:3px 10px;border-radius:3px;cursor:pointer;font-weight:500;`;
+    submitBtn.addEventListener("mouseenter", () => {
+        if (!submitBtn.disabled) {
+            submitBtn.style.background = "var(--vscode-button-hoverBackground)";
+        }
+    });
+    submitBtn.addEventListener("mouseleave", () => {
+        submitBtn.style.background = "var(--vscode-button-background)";
+    });
+    buttonRow.append(cancelBtn, submitBtn);
+    formView.append(headerRow, textarea, consent, errorEl, buttonRow);
+    container.append(successView, formView);
+    return {
+        element: container,
+        update(props, state) {
+            if (state.submitted) {
+                successView.style.display = "flex";
+                formView.style.display = "none";
+                return;
+            }
+            successView.style.display = "none";
+            formView.style.display = "flex";
+            const submitDisabled = state.isSubmitting;
+            textarea.disabled = submitDisabled;
+            cancelBtn.disabled = submitDisabled;
+            cancelBtn.onclick = () => props.onCancel();
+            submitBtn.disabled = submitDisabled;
+            submitBtn.textContent = state.isSubmitting ? ( localize(4813, "Submitting...")) : ( localize(4814, "Submit"));
+            submitBtn.onclick = () => {
+                const text = textarea.value.trim();
+                if (text) {
+                    props.onSubmit(text);
+                }
+            };
+            if (state.error) {
+                errorEl.style.display = "";
+                errorEl.textContent = state.error;
+            } else {
+                errorEl.style.display = "none";
+            }
+        }
+    };
+}
+
+export { createFeedbackDialog };

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

@@ -0,0 +1,30 @@
+import type { VoiceState } from "../../../chat/browser/voiceClient/voiceSessionController.js";
+export interface HeaderProps {
+    readonly copilotIconSrc: string;
+    readonly showCopilotIcon: boolean;
+    readonly isConnected: boolean;
+    readonly isConnecting: boolean;
+    readonly isReconnecting: boolean;
+    readonly voiceState: VoiceState;
+    readonly pttKeyLabel: string | undefined;
+    readonly draggable: boolean;
+    readonly showClose: boolean;
+    readonly showPopout: boolean;
+    readonly hideDisconnect: boolean;
+    readonly centerConnectButton: boolean;
+    readonly onMicDown: (e: MouseEvent) => void;
+    readonly onMicUp: () => void;
+    readonly onConnectClick: (e: MouseEvent) => void;
+    readonly onDisconnectClick: (e: MouseEvent) => void;
+    readonly onCloseClick: (e: MouseEvent) => void;
+    readonly onToggleClick: (e: MouseEvent) => void;
+    readonly onPttKeyClick: (e: MouseEvent) => void;
+    readonly onPopoutClick: (e: MouseEvent) => void;
+    readonly onFeedbackClick: (e: MouseEvent) => void;
+    readonly expanded: boolean;
+}
+export interface HeaderComponent {
+    readonly element: HTMLElement;
+    update(props: HeaderProps): void;
+}
+export declare function createHeader(): HeaderComponent;

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

@@ -0,0 +1,149 @@
+
+import { $, createElement } 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 hoverButton(className, ariaLabel, title) {
+    const el = $(`span.codicon.${className}`);
+    el.role = "button";
+    el.tabIndex = 0;
+    el.ariaLabel = ariaLabel;
+    el.title = title;
+    el.style.cssText = `font-size:${FONT_SIZE.iconSm};color:var(--vscode-descriptionForeground);cursor:pointer;-webkit-app-region:no-drag;padding:2px;`;
+    el.addEventListener("mouseenter", () => {
+        el.style.color = "var(--vscode-foreground)";
+    });
+    el.addEventListener("mouseleave", () => {
+        el.style.color = "var(--vscode-descriptionForeground)";
+    });
+    addKeyboardActivation(el);
+    return el;
+}
+function createHeader() {
+    const container = $("div");
+    container.style.cssText = "display:flex;align-items:center;gap:8px;height:30px;flex-shrink:0;";
+    const copilotIcon = createElement("img");
+    copilotIcon.style.cssText = "width:18px;height:18px;margin-right:4px;";
+    const micBtn = $("span.codicon.codicon-voice-mode");
+    micBtn.role = "button";
+    micBtn.tabIndex = 0;
+    micBtn.ariaLabel = ( localize(4815, "Push to talk (Space)"));
+    micBtn.title = ( localize(4815, "Push to talk (Space)"));
+    micBtn.style.cssText = `font-size:${FONT_SIZE.iconMd};cursor:pointer;-webkit-app-region:no-drag;border-radius:4px;padding:2px;`;
+    const gearBtn = hoverButton("codicon-gear", ( localize(4816, "Configure keybinding")), ( localize(4816, "Configure keybinding")));
+    const connIndicator = $("span.voice-conn-indicator");
+    connIndicator.role = "button";
+    connIndicator.tabIndex = 0;
+    connIndicator.ariaLabel = ( localize(4817, "Disconnect"));
+    connIndicator.title = ( localize(4817, "Disconnect"));
+    connIndicator.style.cssText = "display:inline-flex;align-items:center;justify-content:center;cursor:pointer;-webkit-app-region:no-drag;flex-shrink:0;padding:2px;";
+    const connDot = $("span.voice-conn-dot.codicon.codicon-debug-connected");
+    connDot.title = ( localize(4817, "Disconnect"));
+    connDot.style.cssText = `font-size:${FONT_SIZE.iconSm};color:var(--vscode-charts-green);`;
+    const connDisc = $("span.voice-conn-disconnect.codicon.codicon-debug-disconnect");
+    connDisc.title = ( localize(4817, "Disconnect"));
+    connDisc.style.cssText = `font-size:${FONT_SIZE.iconSm};color:var(--vscode-descriptionForeground);display:none;`;
+    connIndicator.append(connDot, connDisc);
+    addKeyboardActivation(connIndicator);
+    const placeholderText = $("span.voice-placeholder-text");
+    placeholderText.role = "button";
+    placeholderText.tabIndex = 0;
+    placeholderText.style.cssText = `font-size:${FONT_SIZE.body};color:var(--vscode-input-placeholderForeground, var(--vscode-descriptionForeground));cursor:pointer;-webkit-app-region:no-drag;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;`;
+    placeholderText.addEventListener("mouseenter", () => {
+        placeholderText.style.color = "var(--vscode-foreground)";
+    });
+    placeholderText.addEventListener("mouseleave", () => {
+        placeholderText.style.color = "var(--vscode-input-placeholderForeground, var(--vscode-descriptionForeground))";
+    });
+    addKeyboardActivation(placeholderText);
+    const spacer = $("span");
+    spacer.style.flex = "1";
+    const feedbackBtn = hoverButton("codicon-feedback", ( localize(4818, "Send feedback")), ( localize(4818, "Send feedback")));
+    const popoutBtn = hoverButton("codicon-open-in-window", ( localize(4819, "Open mini-view")), ( localize(4819, "Open mini-view")));
+    const closeBtn = hoverButton("codicon-chrome-minimize", ( localize(4820, "Minimize")), ( localize(4820, "Minimize")));
+    const connStyle = $("style");
+    connStyle.textContent = `
+        .voice-conn-indicator:hover .voice-conn-dot { display: none !important; }
+        .voice-conn-indicator:hover .voice-conn-disconnect { display: inline-block !important; color: var(--vscode-errorForeground, #f44) !important; }
+        @keyframes agents-voice-icon-pulse {
+            0%, 100% { box-shadow: 0 0 4px rgba(var(--agents-voice-icon-rgb, 88,166,255), 0.45); }
+            50% { box-shadow: 0 0 10px rgba(var(--agents-voice-icon-rgb, 88,166,255), 0.7); }
+        }
+        .monaco-workbench.monaco-enable-motion .agents-voice-mode-active {
+            animation: agents-voice-icon-pulse 1.4s ease-in-out infinite;
+        }
+    `;
+    container.append(
+        copilotIcon,
+        micBtn,
+        placeholderText,
+        gearBtn,
+        connIndicator,
+        spacer,
+        popoutBtn,
+        closeBtn,
+        connStyle
+    );
+    return {
+        element: container,
+        update(props) {
+            container.style.cssText = `display:flex;align-items:center;gap:8px;height:30px;flex-shrink:0;${props.draggable ? "-webkit-app-region:drag;" : ""}`;
+            copilotIcon.style.display = props.showCopilotIcon ? "" : "none";
+            copilotIcon.src = props.copilotIconSrc;
+            const showConnected = props.isConnected || props.isReconnecting;
+            micBtn.style.display = showConnected ? "" : "none";
+            const micColor = props.voiceState === "error" ? "var(--vscode-editorError-foreground)" : props.voiceState === "listening" ? "var(--vscode-editorInfo-foreground)" : props.voiceState === "speaking" ? "var(--vscode-agentsVoice-speakingForeground)" : "var(--vscode-descriptionForeground)";
+            micBtn.style.color = micColor;
+            const micIsActive = props.voiceState === "listening" || props.voiceState === "speaking";
+            micBtn.classList.toggle("agents-voice-mode-active", micIsActive);
+            micBtn.style.setProperty(
+                "--agents-voice-icon-rgb",
+                props.voiceState === "speaking" ? "163,113,247" : "88,166,255"
+            );
+            micBtn.style.borderRadius = "50%";
+            if (!micIsActive) {
+                micBtn.style.boxShadow = "none";
+            }
+            micBtn.onmouseenter = () => {
+                micBtn.style.color = "var(--vscode-foreground)";
+            };
+            micBtn.onmouseleave = () => {
+                micBtn.style.color = micColor;
+            };
+            micBtn.onmousedown = props.onMicDown;
+            micBtn.onmouseup = () => props.onMicUp();
+            placeholderText.style.display = showConnected ? "none" : "";
+            const keyLabel = props.pttKeyLabel;
+            const holdText = keyLabel ? ( localize(4821, "Hold {0} to talk", keyLabel)) : ( localize(4822, "Click voice mode to talk"));
+            placeholderText.textContent = holdText;
+            placeholderText.ariaLabel = holdText;
+            placeholderText.onclick = props.onConnectClick;
+            gearBtn.style.display = props.isConnected ? "" : "none";
+            gearBtn.onclick = props.onPttKeyClick;
+            connIndicator.style.display = showConnected && !props.hideDisconnect ? "inline-flex" : "none";
+            connIndicator.onclick = props.onDisconnectClick;
+            const showConnBtnCenter = !showConnected && props.centerConnectButton;
+            spacer.style.cssText = "flex:1;";
+            if (showConnBtnCenter) {
+                spacer.style.cssText = "flex:1;display:flex;justify-content:center;gap:8px;";
+                if (props.showPopout) {
+                    spacer.append(popoutBtn);
+                }
+            }
+            feedbackBtn.onclick = props.onFeedbackClick;
+            if (showConnBtnCenter) {
+                popoutBtn.style.display = props.showPopout ? "" : "none";
+            } else {
+                if (popoutBtn.parentElement === spacer) {
+                    closeBtn.before(popoutBtn);
+                }
+                popoutBtn.style.display = props.showPopout ? "" : "none";
+            }
+            popoutBtn.onclick = props.onPopoutClick;
+            closeBtn.style.display = props.showClose ? "" : "none";
+            closeBtn.onclick = props.onCloseClick;
+        }
+    };
+}
+
+export { createHeader };

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

@@ -0,0 +1,12 @@
+export interface OnboardingProps {
+    readonly pttKeyLabel: string | undefined;
+    readonly isConnecting: boolean;
+    readonly onGetStarted: (e: MouseEvent) => void;
+    readonly onOpenPttKeySettings: (e: MouseEvent) => void;
+    readonly onOpenPopout: ((e: MouseEvent) => void) | undefined;
+}
+export interface OnboardingComponent {
+    readonly element: HTMLElement;
+    update(props: OnboardingProps): void;
+}
+export declare function createOnboarding(): OnboardingComponent;

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

@@ -0,0 +1,116 @@
+
+import { $, createTextNode, createElement } 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';
+
+const ONBOARDING_FONT = "13px";
+const ONBOARDING_ICON_LG = "18px";
+function createOnboarding() {
+    const container = $("div");
+    container.style.cssText = "display:flex;flex-direction:column;gap:12px;padding:8px 0;";
+    const title = $("span");
+    title.style.cssText = "font-size:14px;font-weight:600;color:var(--vscode-foreground);";
+    title.textContent = ( localize(4823, "Welcome to Voice Chat"));
+    const descSection = $("div");
+    descSection.style.cssText = `display:flex;flex-direction:column;gap:10px;font-size:${ONBOARDING_FONT};color:var(--vscode-foreground);line-height:1.5;`;
+    const welcomeRow = $("div");
+    welcomeRow.style.cssText = "display:flex;gap:10px;align-items:center;";
+    const welcomeIconWrap = $("span");
+    welcomeIconWrap.style.cssText = "display:flex;justify-content:center;align-items:center;width:24px;flex-shrink:0;";
+    const welcomeIcon = $("span.codicon.codicon-sparkle");
+    welcomeIcon.style.fontSize = "20px";
+    welcomeIconWrap.append(welcomeIcon);
+    const welcomeText = $("span");
+    welcomeText.textContent = ( localize(
+        4824,
+        "Speak to an assistant that controls multiple coding agents at once. Get notified when work is done or input is needed."
+    ));
+    welcomeRow.append(welcomeIconWrap, welcomeText);
+    const pttRow = $("div");
+    pttRow.style.cssText = "display:flex;gap:10px;align-items:center;";
+    const pttIconWrap = $("span");
+    pttIconWrap.style.cssText = "display:flex;justify-content:center;align-items:center;width:24px;flex-shrink:0;";
+    const pttKeyChip = $("span");
+    pttKeyChip.role = "button";
+    pttKeyChip.tabIndex = 0;
+    pttKeyChip.ariaLabel = ( localize(4825, "Change push-to-talk key"));
+    pttKeyChip.style.cssText = `font-size:${FONT_SIZE.micro};padding:1px 4px;border:1px solid var(--vscode-descriptionForeground);border-radius:3px;line-height:1;color:var(--vscode-descriptionForeground);cursor:pointer;-webkit-app-region:no-drag;`;
+    addKeyboardActivation(pttKeyChip);
+    pttIconWrap.append(pttKeyChip);
+    const pttTextSpan = $("span");
+    const pttStrong = $("strong");
+    pttStrong.textContent = ( localize(4826, "Push-to-talk"));
+    const pttHold = createTextNode(" " + ( localize(4827, "— hold the key while speaking, release when done.")) + " ");
+    const pttLink = createElement("a");
+    pttLink.href = "#";
+    pttLink.style.cssText = "color:var(--vscode-textLink-foreground);cursor:pointer;text-decoration:none;";
+    pttLink.textContent = ( localize(4828, "Configure a keybinding"));
+    const pttSuffix = createTextNode(" " + ( localize(4829, "to use it from any app.")));
+    pttTextSpan.append(pttStrong, pttHold, pttLink, pttSuffix);
+    pttRow.append(pttIconWrap, pttTextSpan);
+    const feedbackRow = $("div");
+    feedbackRow.style.cssText = "display:flex;gap:10px;align-items:center;";
+    const feedbackIconWrap = $("span");
+    feedbackIconWrap.style.cssText = "display:flex;justify-content:center;align-items:center;width:24px;flex-shrink:0;";
+    const feedbackIcon = $("span.codicon.codicon-feedback");
+    feedbackIcon.style.fontSize = ONBOARDING_ICON_LG;
+    feedbackIconWrap.append(feedbackIcon);
+    const feedbackText = $("span");
+    feedbackText.textContent = ( localize(4830, "Use the feedback icon to help us improve your experience."));
+    feedbackRow.append(feedbackIconWrap, feedbackText);
+    const miniViewRow = $("div");
+    miniViewRow.style.cssText = "display:flex;gap:10px;align-items:center;";
+    const miniViewIconWrap = $("span");
+    miniViewIconWrap.style.cssText = "display:flex;justify-content:center;align-items:center;width:24px;flex-shrink:0;";
+    const miniViewIcon = $("span.codicon.codicon-link-external");
+    miniViewIcon.style.fontSize = FONT_SIZE.iconSm;
+    miniViewIconWrap.append(miniViewIcon);
+    const miniViewTextSpan = $("span");
+    const miniViewLink = createElement("a");
+    miniViewLink.href = "#";
+    miniViewLink.style.cssText = "color:var(--vscode-textLink-foreground);cursor:pointer;text-decoration:none;";
+    miniViewLink.textContent = ( localize(4831, "Open the mini-view"));
+    const miniViewSuffix = createTextNode(" " + ( localize(4832, "to multitask while VS Code is not in the foreground.")));
+    miniViewTextSpan.append(miniViewLink, miniViewSuffix);
+    miniViewRow.append(miniViewIconWrap, miniViewTextSpan);
+    descSection.append(welcomeRow, pttRow, feedbackRow, miniViewRow);
+    const button = createElement("button");
+    button.style.cssText = `-webkit-app-region:no-drag;background:var(--vscode-button-background);border:none;color:var(--vscode-button-foreground);font-size:${ONBOARDING_FONT};padding:6px 14px;border-radius:3px;font-weight:500;align-self:stretch;margin-top:2px;`;
+    button.addEventListener("mouseenter", () => {
+        if (!button.disabled) {
+            button.style.background = "var(--vscode-button-hoverBackground)";
+        }
+    });
+    button.addEventListener("mouseleave", () => {
+        button.style.background = "var(--vscode-button-background)";
+    });
+    container.append(title, descSection, button);
+    return {
+        element: container,
+        update(props) {
+            pttKeyChip.textContent = props.pttKeyLabel ?? "Space";
+            pttKeyChip.onclick = e => {
+                e.preventDefault();
+                props.onOpenPttKeySettings(e);
+            };
+            pttLink.onclick = e => {
+                e.preventDefault();
+                props.onOpenPttKeySettings(e);
+            };
+            miniViewRow.style.display = props.onOpenPopout ? "flex" : "none";
+            if (props.onOpenPopout) {
+                miniViewLink.onclick = e => {
+                    e.preventDefault();
+                    props.onOpenPopout(e);
+                };
+            }
+            button.disabled = props.isConnecting;
+            button.style.cursor = props.isConnecting ? "default" : "pointer";
+            button.style.opacity = props.isConnecting ? "0.7" : "1";
+            button.textContent = props.isConnecting ? ( localize(4833, "Connecting…")) : ( localize(4834, "Get Started"));
+            button.onclick = props.onGetStarted;
+        }
+    };
+}
+
+export { createOnboarding };

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

@@ -0,0 +1,32 @@
+import type { URI } from "@codingame/monaco-vscode-api/vscode/vs/base/common/uri";
+import type { IPendingToolConfirmation } from "../../../chat/browser/voiceClient/voiceSessionController.js";
+export interface SessionRowData {
+    readonly resource: URI;
+    readonly label: string;
+    readonly isActive: boolean;
+    readonly needsInput: boolean;
+    readonly isIdle: boolean;
+    readonly isSpeaking: boolean;
+    readonly insertions: number;
+    readonly deletions: number;
+    readonly toolConfirmation: IPendingToolConfirmation | undefined;
+}
+export interface SessionGroupData {
+    readonly label: string;
+    readonly sessions: readonly SessionRowData[];
+}
+export interface SessionListProps {
+    readonly sessions: readonly SessionRowData[];
+    readonly groups?: readonly SessionGroupData[];
+    readonly selectedTarget?: URI;
+    readonly onOpenSession: (resource: URI) => void;
+    readonly onStopSession: (resource: URI) => void;
+    readonly onCancelSession: (resource: URI) => void;
+    readonly onSelectTarget: (resource: URI | undefined) => void;
+    readonly onNewSession: () => void;
+}
+export interface SessionListComponent {
+    readonly element: HTMLElement;
+    update(props: SessionListProps): void;
+}
+export declare function createSessionList(): SessionListComponent;