@codingame/monaco-vscode-workbench-service-override 37.2.0 → 37.3.0

package/vscode/src/vs/sessions/contrib/automations/browser/media/automationDialog.css

@@ -0,0 +1,746 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+/* Dialog */
+.monaco-dialog-box.automation-dialog .dialog-message-container > .dialog-message-detail {
+	display: none;
+}
+
+/*
+ * The dialog's built-in title (rendered into `.dialog-message-text`)
+ * stays in the DOM so `aria-labelledby="monaco-dialog-message-text"`
+ * still binds for screen readers, but is visually hidden. Our own
+ * `.automation-titlebar` provides the visible chrome. Visually-hidden
+ * pattern (not `display: none`) because some AT/screen-reader combos
+ * skip aria-labelledby targets when `display: none` is in effect.
+ * Same treatment for the unused dialog icon slot.
+ */
+.monaco-dialog-box.automation-dialog .dialog-message-container > .dialog-message {
+	margin: 0;
+	padding: 0;
+}
+
+.monaco-dialog-box.automation-dialog .dialog-message-container > .dialog-message .dialog-message-text {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}
+
+.monaco-dialog-box.automation-dialog .dialog-message-row > .dialog-icon.codicon {
+	display: none;
+}
+
+/*
+ * Lock the dialog box to a stable width. Without this rule the dialog
+ * inherits `width: min-content` from `dialog.css` and re-flows as the
+ * embedded chat input's chips change size (e.g. when the model picker
+ * resolves a shorter label). Use min(640px, 92vw) so the dialog still
+ * shrinks gracefully on narrow viewports.
+ *
+ * Padding is stripped (vs. the base 8px) so our `.automation-titlebar`
+ * stripe can paint edge-to-edge inside the dialog body. The form pane
+ * re-adds its own padding.
+ *
+ * Note: `extraClasses` on Dialog adds the class to `.monaco-dialog-box`
+ * itself (not an ancestor), so we attach the rule directly here.
+ */
+.monaco-dialog-box.automation-dialog {
+	width: min(640px, 92vw);
+	min-width: min(520px, 92vw);
+	max-width: 92vw;
+	padding: 0;
+	background-color: var(--vscode-editorWidget-background);
+	color: var(--vscode-editorWidget-foreground);
+	/* Anchor for the absolutely-positioned close-X (see below). */
+	position: relative;
+}
+
+.monaco-workbench .monaco-dialog-box.automation-dialog:focus:not(:focus-visible) {
+	outline: none;
+}
+
+/*
+ * Float the close-X over the titlebar so the title text sits flush
+ * with the top edge of the modal (QuickInput-style). Without this,
+ * `.dialog-toolbar-row` reserves ~24px of dead space above the title.
+ * `z-index` keeps the X above the sticky titlebar.
+ */
+.monaco-dialog-box.automation-dialog .dialog-toolbar-row {
+	position: absolute;
+	top: 0;
+	right: 0;
+	height: auto;
+	padding: 8px 10px 0 0;
+	z-index: 2;
+}
+
+.automation-dialog-body {
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+}
+
+.monaco-dialog-box.automation-dialog > .dialog-buttons-row:not(.automation-dialog-footer-row) {
+	display: none;
+}
+
+.monaco-dialog-box.automation-dialog > .automation-dialog-footer-row {
+	flex-grow: 0;
+	margin-top: 0;
+	padding: 8px 10px 10px;
+}
+
+.monaco-dialog-box.automation-dialog:not(.align-vertical) > .automation-dialog-footer-row > .automation-dialog-footer-actions {
+	margin-left: 0;
+}
+
+/*
+ * Strip the base dialog padding on the message row and container so
+ * our titlebar can full-bleed. The form pane below re-adds horizontal
+ * padding so the form fields don't crash into the dialog edge.
+ *
+ * Container still owns the scrolling (per base/.../dialog.css), so
+ * the titlebar uses `position: sticky; top: 0` to stay visible as the
+ * form scrolls underneath it.
+ */
+.monaco-dialog-box.automation-dialog .dialog-message-row {
+	padding: 0;
+}
+
+.monaco-dialog-box.automation-dialog .dialog-message-row .dialog-message-container {
+	padding: 0;
+	/*
+	 * The base dialog leaves the message container at content size
+	 * (`align-self: stretch` only stretches height in a horizontal flex
+	 * row). Our form fields are `width: 100%` of this container, so they
+	 * track the container's intrinsic min-content width. It shrinks
+	 * over the first second as the embedded chat input's chip labels
+	 * (model name, mode name, etc.) resolve and the toolbar's
+	 * min-content drops. Forcing the container to fill the row width
+	 * keeps every field at the dialog's locked width from first paint
+	 * onwards. `min-width: 0` lets the container shrink inside the row
+	 * (which has `overflow: hidden`) instead of being pushed by long
+	 * chip labels.
+	 */
+	flex: 1 1 auto;
+	min-width: 0;
+}
+
+/*
+ * Titlebar background matches the dialog body so the header reads as
+ * part of the modal, with no contrasting stripe. Both are anchored to
+ * `editorWidget.background`, the dialog widget's own native background
+ * (see defaultDialogStyles), so the header and body are always the same
+ * color in every theme. Set explicitly (not transparent) because the
+ * titlebar is sticky. A transparent background would let scrolled form
+ * content show through. No `border-bottom`. Sticky so the title stays
+ * in view as the form scrolls (the dialog's message-container is the
+ * scroll host).
+ */
+.automation-titlebar {
+	position: sticky;
+	top: 0;
+	z-index: 1;
+	/* Right padding reserves room for the floating close-X chip. */
+	padding: 8px 36px 8px 14px;
+	text-align: left;
+	font-weight: var(--vscode-fontWeight-semiBold);
+	font-size: var(--vscode-fontSize-heading2);
+	color: var(--vscode-editorWidget-foreground);
+	background-color: var(--vscode-editorWidget-background);
+}
+
+.automation-description {
+	padding: 8px 14px;
+	font-size: var(--vscode-fontSize-body2, 12px);
+	color: var(--vscode-descriptionForeground);
+	line-height: 1.4;
+}
+
+.automation-form-pane {
+	flex: 1 1 auto;
+	min-width: 0;
+	min-height: 0;
+	padding: 4px 14px 6px;
+}
+
+/*
+ * Theme the native overflow scrollbar on the dialog body so it matches
+ * the rest of VS Code. .dialog-message-container is the scroll host
+ * (see base/browser/ui/dialog/dialog.css). Without this the dialog
+ * shows the platform's default scrollbar which clashes visually with
+ * the chat input embedded above.
+ */
+.monaco-dialog-box.automation-dialog .dialog-message-row .dialog-message-container::-webkit-scrollbar {
+	width: 10px;
+}
+
+.monaco-dialog-box.automation-dialog .dialog-message-row .dialog-message-container::-webkit-scrollbar-track {
+	background-color: transparent;
+}
+
+.monaco-dialog-box.automation-dialog .dialog-message-row .dialog-message-container::-webkit-scrollbar-thumb {
+	min-height: 20px;
+	background-color: var(--vscode-scrollbarSlider-background);
+}
+
+.monaco-dialog-box.automation-dialog .dialog-message-row .dialog-message-container::-webkit-scrollbar-thumb:hover {
+	background-color: var(--vscode-scrollbarSlider-hoverBackground);
+}
+
+.monaco-dialog-box.automation-dialog .dialog-message-row .dialog-message-container::-webkit-scrollbar-thumb:active {
+	background-color: var(--vscode-scrollbarSlider-activeBackground);
+}
+
+.monaco-dialog-box.automation-dialog .dialog-message-row .dialog-message-container::-webkit-scrollbar-corner {
+	display: none;
+}
+
+/*
+ * Z-index bridge for popups while the automation dialog is open.
+ * The dialog modal block is z-index 2575 (see base/.../dialog.css)
+ * and shares that value with .context-view (set inline in
+ * contextview.ts as `2575 + layer`). DOM order means the dialog
+ * shows on top, hiding any popup the chat input chips, the quick
+ * input, or a context menu try to open. We can't change the inline
+ * z-index from outside, so use `!important` while the dialog service
+ * marks the active container as automation-dialog-open.
+ */
+.automation-dialog-open .context-view.monaco-component {
+	z-index: 2600 !important;
+}
+
+.automation-dialog-open .quick-input-widget {
+	z-index: 2600 !important;
+}
+
+.automation-dialog-open .monaco-menu-container {
+	z-index: 2600 !important;
+}
+
+.automation-dialog-open .automation-dialog-editor-overflow {
+	z-index: 2600;
+}
+
+.automation-form {
+	display: flex;
+	flex-direction: column;
+	gap: var(--vscode-spacing-size100);
+	padding: 2px 2px 4px;
+}
+
+.automation-form-content {
+	display: flex;
+	flex-direction: column;
+	gap: var(--vscode-spacing-size100);
+}
+
+.automation-session-section,
+.automation-prompt-section {
+	display: flex;
+	flex-direction: column;
+	gap: var(--vscode-spacing-size100);
+}
+
+.automation-target-toolbar,
+.automation-target-toolbar .monaco-toolbar,
+.automation-target-toolbar .monaco-action-bar,
+.automation-target-toolbar .actions-container {
+	min-width: 0;
+	width: 100%;
+}
+
+.automation-dialog .automation-target-toolbar .monaco-action-bar .actions-container {
+	padding-inline-start: 0;
+	gap: var(--vscode-spacing-size40);
+}
+
+.automation-target-toolbar .action-item {
+	min-width: 0;
+	max-width: 100%;
+}
+
+.automation-target-toolbar .compact-picker .sessions-chat-dropdown-label,
+.automation-target-toolbar .compact-picker .automation-form-branch-name {
+	display: none;
+}
+
+/* Let the editor size the prompt independently of the target toolbar. */
+.automation-form-prompt-host {
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+	/*
+	 * The host carries the `.interactive-session` class so the shared
+	 * chat input CSS (chip colors, focus borders, etc.) matches what
+	 * users see in a real chat session. That class also sets
+	 * `max-width: 950px; margin: auto; height: 100%` (chat.css), which
+	 * is meant for the full chat panel. In our flex column it makes
+	 * the host take its content's min-content width and center,
+	 * collapsing the chat input to ~chip-bar width. Re-assert
+	 * full-width sizing so the host fills the dialog's form column.
+	 */
+	width: auto;
+	max-width: 100%;
+	margin: 0;
+	height: auto;
+	align-self: stretch;
+}
+
+.automation-form-prompt-host .interactive-input-part {
+	/*
+	 * `.interactive-input-part` in chat.css has `margin: 0 12px`, which
+	 * (combined with the default `width: auto`) is designed to inset the
+	 * composer inside a wider chat panel. In our dialog the prompt host
+	 * is already the form column, so the margin pushes the composer 12px
+	 * past the host on each side. Its right border ends up sitting
+	 * outside the dialog. Zero out the margin so the composer aligns
+	 * with the other form fields.
+	 */
+	margin: 0;
+	/* chat.css sets `padding: 4px 0` — zero both ends so the container
+	 * sits flush with the label above and the Enabled separator below. */
+	padding-top: 0;
+	padding-bottom: 0;
+	/* Don't let long custom-mode names or model identifiers push the
+	 * modal wider than its declared max-width. */
+	max-width: 100%;
+	min-width: 0;
+}
+
+.automation-form-prompt-host .chat-input-container {
+	/* chat.css sets `padding: 0 6px 6px` — the 6px bottom gap between the
+	 * picker chips and the container border looks excessive in the compact
+	 * dialog. Tighten it to 2px. */
+	padding-bottom: 2px;
+}
+
+.automation-form-prompt-host .interactive-input-editor,
+.automation-form-prompt-host .monaco-editor,
+.automation-form-prompt-host .monaco-editor-background,
+.automation-form-prompt-host .monaco-editor .margin {
+	background-color: var(--vscode-settings-textInputBackground, var(--vscode-input-background));
+}
+
+.automation-form-prompt-host .interactive-input-and-side-toolbar {
+	/* Allow the input column to shrink below its content's preferred
+	 * width so flex children (chips, custom-mode names) don't push the
+	 * modal wider than its declared max-width. */
+	min-width: 0;
+}
+
+.automation-session-configuration {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: var(--vscode-spacing-size80);
+	min-width: 0;
+	min-height: 22px;
+	padding-top: var(--vscode-spacing-size40);
+}
+
+.automation-session-configuration.controls-unavailable .automation-session-config,
+.automation-session-configuration.controls-unavailable .automation-session-controls {
+	opacity: 0.5;
+	pointer-events: none;
+}
+
+.automation-session-config,
+.automation-session-controls {
+	min-width: 0;
+	max-width: 100%;
+	overflow: hidden;
+}
+
+.automation-session-configuration-unavailable {
+	color: var(--vscode-descriptionForeground);
+	font-size: var(--vscode-fontSize-body2);
+}
+
+.automation-session-configuration-error {
+	flex-basis: 100%;
+	color: var(--vscode-inputValidation-errorForeground);
+	font-size: var(--vscode-fontSize-body2);
+}
+
+.automation-form-save-status {
+	color: var(--vscode-descriptionForeground);
+	font-size: var(--vscode-fontSize-body2);
+}
+
+.automation-session-config .monaco-toolbar,
+.automation-session-controls .monaco-toolbar,
+.automation-session-config .monaco-action-bar,
+.automation-session-controls .monaco-action-bar,
+.automation-session-config .actions-container,
+.automation-session-controls .actions-container {
+	min-width: 0;
+	overflow: hidden;
+}
+
+.automation-session-configuration .compact-picker .sessions-chat-dropdown-label,
+.automation-session-configuration .compact-picker .chat-input-picker-label,
+.automation-session-configuration .compact-picker .chat-session-option-label {
+	display: none;
+}
+
+.automation-session-controls .action-item.compact-picker,
+.automation-session-controls .action-item.compact-picker .action-label {
+	box-sizing: border-box;
+	width: 22px;
+	min-width: 22px;
+}
+
+.automation-session-controls .action-item.compact-picker {
+	padding: 0;
+}
+
+.automation-session-controls .action-item.compact-picker .action-label {
+	justify-content: flex-start;
+	padding: var(--vscode-spacing-size20) var(--vscode-spacing-size20) var(--vscode-spacing-size20) var(--vscode-spacing-size80);
+}
+
+/*
+ * Suppress every inter-chip divider drawn by chat.css inside the dialog,
+ * in both the primary (`.chat-input-toolbar`) and secondary
+ * (`.chat-secondary-input-toolbar`) toolbars. CSS `+` matches by DOM
+ * order regardless of `display:none`, so the divider would otherwise
+ * appear as an orphan vertical line on whichever visible chip follows
+ * our hidden `+`/settings items. For example the bar drawn to the left
+ * of the Folder/Worktree isolation chip because it follows the Copilot
+ * CLI chip in the secondary toolbar (microsoft/vscode-internalbacklog#8304). The remaining visible
+ * chips (Agent, model, mode, isolation) already have enough intrinsic
+ * padding to read as separate without the divider. Dropping dividers
+ * entirely is simpler and more resilient than per-pair suppression rules
+ * that depend on DOM order.
+ */
+.automation-form-prompt-host .chat-input-toolbar .monaco-action-bar .actions-container > .action-item + .action-item::before,
+.automation-form-prompt-host .chat-secondary-input-toolbar .monaco-action-bar .actions-container > .action-item + .action-item::before {
+	display: none;
+}
+
+/*
+ * Cancel the dialog's `<ul>` indent for the chat input toolbars.
+ *
+ * `dialog.css:120` applies `padding-inline-start: 20px` to every `<ul>`
+ * inside `.dialog-message-container` (meant to reduce the excessive
+ * default indent on bulleted lists in dialog body text). The
+ * `monaco-action-bar`'s `.actions-container` is rendered as a `<ul>`, so
+ * the chat input's primary and secondary toolbars inherit that 20px
+ * left indent. This pushes the Agent / Copilot CLI chips ~20px right of
+ * the chat input's bottom-left corner.
+ *
+ * `actionbar.css` sets `.actions-container { padding: 0 }`, but the
+ * dialog rule uses a logical property (`padding-inline-start`), which
+ * cascades-after the physical shorthand and wins regardless of selector
+ * specificity. Override the logical property explicitly here.
+ *
+ * Scoped to `.automation-form-prompt-host` so the regular chat panel
+ * (which isn't inside a dialog) is unaffected. Any `<ul>`
+ * elements in the dialog's actual message body text retain the
+ * intended 20px indent.
+ */
+.automation-form-prompt-host .chat-input-toolbar .monaco-action-bar .actions-container,
+.automation-form-prompt-host .chat-secondary-toolbar .monaco-action-bar .actions-container {
+	padding-inline-start: 0;
+	margin-left: 0;
+}
+
+.automation-target-toolbar .sessions-chat-picker-slot .action-label {
+	height: 22px;
+	padding: var(--vscode-spacing-size20) var(--vscode-spacing-size60);
+	font-size: var(--vscode-fontSize-label1);
+	line-height: normal;
+	color: var(--vscode-icon-foreground);
+}
+
+.automation-target-toolbar .sessions-chat-dropdown-label {
+	font-size: inherit;
+	line-height: inherit;
+}
+
+.automation-target-toolbar .sessions-chat-picker-slot .action-label > .codicon {
+	font-size: var(--vscode-codiconFontSize-compact);
+}
+
+.automation-target-toolbar .sessions-chat-dropdown-chevron {
+	margin-left: var(--vscode-spacing-size40);
+}
+
+.automation-form-row {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.automation-form-row.automation-form-checkbox-row {
+	flex-direction: row;
+	align-items: center;
+	gap: 8px;
+	margin-top: 2px;
+	padding-top: 10px;
+	border-top: 1px solid var(--vscode-widget-border, transparent);
+}
+
+.automation-form-row.automation-form-checkbox-row > .monaco-checkbox {
+	margin-right: 0;
+}
+
+/*
+ * Lay the Schedule / Time / Day controls along a single horizontal axis.
+ * Each control lives in its own `.automation-form-schedule-group`
+ * (label-above-control flex column). Time and Day join the row only
+ * when the interval is daily or weekly; flex-wrap keeps the layout
+ * stable if a translation pushes the row past the dialog width.
+ */
+.automation-form-row.automation-form-schedule-row {
+	flex-direction: row;
+	align-items: flex-end;
+	flex-wrap: wrap;
+	gap: 12px;
+}
+
+.automation-form-schedule-group {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	/*
+	 * Each visible group splits the schedule row equally. Hidden
+	 * groups (`display: none` from `applyIntervalVisibility`) drop out
+	 * of flex distribution, so:
+	 *   - manual / hourly → Schedule fills 100% of the row
+	 *   - daily          → Schedule + Time split 50/50
+	 *   - weekly         → Schedule + Time + Day split 33/33/33
+	 * `min-width: 0` lets the contained SelectBox shrink past its
+	 * intrinsic content width when the row is narrow, before the
+	 * row's `flex-wrap: wrap` kicks in as a final safety net.
+	 */
+	flex: 1 1 0;
+	min-width: 0;
+}
+
+/* SelectBox container sizing. Give Schedule / Time / Day the full
+ * width of their parent group (which itself flex-shares the row).
+ *
+ * `.monaco-select-box` ships with no intrinsic padding or height (the
+ * only baked-in metrics live in the `.monaco-action-bar .action-item`
+ * selector, which we're not inside of). Mirror the standalone-form
+ * pattern used by the settings editor (`settingsEditor2.css:689-694`).
+ * It uses `height: 26px` and `padding: 2px 6px`. This makes the dropdowns match the
+ * Name InputBox above them instead of reading as toolbar widgets
+ * crammed into a form. */
+.automation-form-schedule-select-container {
+	display: flex;
+	min-width: 0;
+	width: 100%;
+}
+
+.automation-form-schedule-select-container .monaco-select-box {
+	height: 26px;
+	padding: 2px 8px;
+}
+
+/*
+ * Form-row labels read as section titles ("Name", "Schedule", "Time",
+ * "Day of week", "Prompt"). Mirror the established agents
+ * design-system section-label pattern (see `.overview-section
+ * .section-label` at line ~734: label1 / fontWeight-medium /
+ * foreground) so the labels carry visual weight as section headings
+ * and clearly out-rank their controls.
+ *
+ * `margin-bottom` adds breathing room between the title text and
+ * its control so each form row reads as a discrete section.
+ */
+.automation-form-label {
+	font-size: var(--vscode-fontSize-label1);
+	font-weight: var(--vscode-fontWeight-semiBold);
+	color: var(--vscode-foreground);
+	line-height: 1.4;
+	margin-bottom: 2px;
+	cursor: default;
+}
+
+.automation-form-hint {
+	font-size: var(--vscode-fontSize-body2, 11px);
+	color: var(--vscode-descriptionForeground);
+	line-height: 1.4;
+	min-height: 1em;
+}
+
+.automation-form-checkbox-label {
+	font-size: var(--vscode-fontSize-body1, 13px);
+	color: var(--vscode-foreground);
+	cursor: pointer;
+}
+
+/*
+ * Host for the native `InputBox` widget. The widget owns its own
+ * `<input>` and styling (border, padding, focus ring); the host just
+ * lets it grow to the row width.
+ */
+.automation-form-input-host {
+	display: flex;
+	width: 100%;
+}
+
+.automation-form-input-host > .monaco-inputbox {
+	flex: 1 1 auto;
+	min-width: 0;
+}
+
+.automation-form-input,
+.automation-form-select,
+.automation-form-textarea {
+	font-family: inherit;
+	font-size: var(--vscode-fontSize-body1, 13px);
+	color: var(--vscode-settings-textInputForeground, var(--vscode-input-foreground));
+	background-color: var(--vscode-settings-textInputBackground, var(--vscode-input-background));
+	border: 1px solid var(--vscode-settings-textInputBorder, var(--vscode-input-border, var(--vscode-contrastBorder, transparent)));
+	border-radius: 2px;
+	padding: 4px 6px;
+	box-sizing: border-box;
+	width: 100%;
+	min-height: 26px;
+}
+
+.automation-form-select {
+	color: var(--vscode-settings-dropdownForeground, var(--vscode-dropdown-foreground));
+	background-color: var(--vscode-settings-dropdownBackground, var(--vscode-dropdown-background));
+	border-color: var(--vscode-settings-dropdownBorder, var(--vscode-dropdown-border, var(--vscode-contrastBorder, transparent)));
+}
+
+.automation-form-textarea {
+	resize: vertical;
+	min-height: 60px;
+	line-height: 1.4;
+}
+
+.automation-form-input:focus,
+.automation-form-select:focus,
+.automation-form-textarea:focus {
+	outline: 1px solid var(--vscode-focusBorder);
+	outline-offset: -1px;
+	border-color: var(--vscode-focusBorder);
+}
+
+.automation-form-empty {
+	font-size: 12px;
+	color: var(--vscode-errorForeground);
+	padding: 6px 0;
+}
+
+.automation-target-toolbar .automation-form-isolation-group {
+	display: inline-flex;
+	align-items: center;
+	margin-left: auto;
+	min-width: 0;
+	max-width: 100%;
+	gap: var(--vscode-spacing-size60);
+}
+
+.automation-target-toolbar .sessions-chat-branch-picker-group {
+	max-width: 100%;
+}
+
+.automation-target-toolbar .automation-form-branch-picker-slot {
+	display: inline-flex;
+	min-width: 0;
+	max-width: 100%;
+}
+
+.automation-target-toolbar .automation-form-branch-slot {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--vscode-spacing-size40);
+	box-sizing: border-box;
+	height: 22px;
+	padding: var(--vscode-spacing-size20) var(--vscode-spacing-size60);
+	font-size: var(--vscode-fontSize-label1);
+	color: var(--vscode-icon-foreground);
+	background: transparent;
+	border: none;
+	min-width: 0;
+	border-radius: var(--vscode-cornerRadius-small);
+	touch-action: manipulation;
+}
+
+.automation-target-toolbar .automation-form-branch-slot > .codicon {
+	font-size: var(--vscode-codiconFontSize-compact);
+	color: var(--vscode-icon-foreground);
+	flex-shrink: 0;
+}
+
+.automation-target-toolbar .automation-form-branch-slot:not(.branch-picker-disabled) {
+	cursor: pointer;
+}
+
+.automation-target-toolbar .automation-form-branch-slot:not(.branch-picker-disabled):hover {
+	background-color: var(--vscode-toolbar-hoverBackground);
+	color: var(--vscode-foreground);
+}
+
+.automation-target-toolbar .automation-form-branch-slot:focus-visible {
+	outline: var(--vscode-strokeThickness) solid var(--vscode-focusBorder);
+	outline-offset: calc(-1 * var(--vscode-strokeThickness));
+}
+
+.automation-target-toolbar .automation-form-branch-slot.branch-picker-disabled,
+.automation-target-toolbar .automation-form-branch-slot.branch-picker-disabled > .codicon {
+	cursor: default;
+	color: var(--vscode-descriptionForeground);
+}
+
+.automation-target-toolbar .automation-form-branch-name {
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.automation-form-prompt-host .chat-secondary-toolbar .automation-form-harness-chip {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	height: 16px;
+	padding: 3px 6px;
+	font-size: 11px;
+	color: var(--vscode-icon-foreground);
+	background: transparent;
+	border: none;
+	opacity: 0.6;
+	cursor: default;
+}
+
+.automation-form-prompt-host .automation-form-harness-chip > .codicon {
+	font-size: 12px;
+	flex-shrink: 0;
+}
+
+.automation-form-prompt-host .automation-form-harness-label {
+	font-size: 11px;
+}
+
+/* Missing-branch state (no folder / no git repo / detached / empty): use
+ * description-foreground + italic so it visually reads as "informational
+ * placeholder, not a real ref name". */
+.automation-target-toolbar .automation-form-branch-slot.branch-picker-missing,
+.automation-target-toolbar .automation-form-branch-slot.branch-picker-missing > .codicon {
+	color: var(--vscode-descriptionForeground);
+}
+
+.automation-target-toolbar .automation-form-branch-slot.branch-picker-missing .automation-form-branch-name {
+	font-style: italic;
+}
+
+.hc-black .automation-target-toolbar .automation-form-branch-slot:focus-visible,
+.hc-light .automation-target-toolbar .automation-form-branch-slot:focus-visible {
+	outline-color: var(--vscode-contrastActiveBorder);
+}