@agenthippo-ai/agenthippo 0.1.0

package/out/analytics/dashboard/webview/styles.css

@@ -0,0 +1,1009 @@
+/* -----------------------------------------------------------------------------
+ * Spotlight Dashboard Styles
+ * Modern, minimal design using VS Code theme variables
+ * ----------------------------------------------------------------------------- */
+
+/* ===========================================================================
+	Base
+	=========================================================================== */
+
+* {
+	box-sizing: border-box;
+}
+
+body {
+	margin: 0;
+	padding: 0;
+	font-family: var(--vscode-font-family);
+	font-size: var(--vscode-font-size);
+	color: var(--vscode-foreground);
+	background: var(--vscode-panel-background);
+	height: 100vh;
+	overflow-y: auto;
+	overflow-x: hidden;
+}
+
+#app {
+	display: block;
+	min-height: 100%;
+}
+
+/* ===========================================================================
+	Summary Cards Grid
+	=========================================================================== */
+
+/* Summary section: can be hidden or scrolled away */
+.summary-section {
+	background: var(--vscode-panel-background);
+	border-bottom: 1px solid var(--vscode-panel-border);
+	transition: flex 0.2s ease, opacity 0.2s ease;
+}
+.summary-section.collapsed .summary-section-header {
+	border-bottom: none;
+}
+.summary-section.collapsed #summary-cards {
+	display: none !important;
+}
+.summary-section-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 8px 12px;
+	gap: 8px;
+	border-bottom: 1px solid var(--vscode-panel-border);
+}
+.summary-section:not(.collapsed) .summary-section-header {
+	border-bottom-color: transparent;
+}
+.summary-section-title {
+	font-size: 0.8em;
+	color: var(--vscode-descriptionForeground);
+	text-transform: uppercase;
+	letter-spacing: 0.04em;
+}
+.summary-toggle-btn {
+	font-size: 0.75em;
+	padding: 2px 8px;
+}
+
+#summary-cards {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: 8px;
+	padding: 12px;
+	background: var(--vscode-panel-background);
+}
+
+.metric-card {
+	background: var(--vscode-editor-background);
+	border: 1px solid var(--vscode-panel-border);
+	border-radius: 6px;
+	padding: 12px;
+	text-align: center;
+	transition: border-color 0.15s;
+}
+
+.metric-card:hover {
+	border-color: var(--vscode-focusBorder);
+}
+
+.metric-icon {
+	font-size: 1.1em;
+	margin-bottom: 4px;
+	opacity: 0.9;
+}
+
+.metric-value {
+	font-size: 1.25em;
+	font-weight: 600;
+	color: var(--vscode-foreground);
+	margin-bottom: 2px;
+}
+
+.metric-label {
+	font-size: 0.75em;
+	color: var(--vscode-descriptionForeground);
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+}
+
+#summary-cards.loading .metric-card {
+	border-color: color-mix(in srgb, var(--vscode-panel-border) 75%, transparent);
+}
+
+.metric-card.skeleton {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 6px;
+}
+
+.skeleton-line {
+	background: linear-gradient(
+		90deg,
+		color-mix(in srgb, var(--vscode-panel-border) 70%, transparent) 25%,
+		color-mix(in srgb, var(--vscode-panel-border) 35%, transparent) 50%,
+		color-mix(in srgb, var(--vscode-panel-border) 70%, transparent) 75%
+	);
+	background-size: 200% 100%;
+	border-radius: 4px;
+	animation: skeleton-shimmer 1.2s ease-in-out infinite;
+}
+
+.skeleton-icon {
+	width: 20px;
+	height: 16px;
+}
+
+.skeleton-value {
+	width: 72%;
+	height: 20px;
+}
+
+.skeleton-label {
+	width: 55%;
+	height: 10px;
+}
+
+@keyframes skeleton-shimmer {
+	0% { background-position: 200% 0; }
+	100% { background-position: -200% 0; }
+}
+
+/* ===========================================================================
+	Gallery Section
+	=========================================================================== */
+
+#gallery {
+	overflow: visible;
+	padding: 12px;
+	min-height: 100px;
+}
+
+#gallery-content {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+/* Fleet view: single full-width dashboard (Fleet Operations UI) */
+.fleet-dashboard-full {
+	flex: 1;
+	min-height: 400px;
+	cursor: default;
+	display: flex;
+	flex-direction: column;
+}
+.fleet-dashboard-full .artifact-content {
+	flex: 1 1 auto;
+	min-height: 400px;
+	display: flex;
+	padding: 0;
+	overflow: hidden;
+}
+.fleet-dashboard-full .html-preview {
+	position: relative;
+	flex: 1 1 auto;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+}
+.fleet-dashboard-full .html-preview iframe {
+	flex: 1 1 auto;
+	width: 100%;
+	height: 100%;
+	min-height: 0;
+	border: none;
+	display: block;
+}
+
+/* State containers */
+.state-container {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	min-height: 150px;
+	color: var(--vscode-descriptionForeground);
+	text-align: center;
+	padding: 20px;
+}
+
+.spinner {
+	width: 24px;
+	height: 24px;
+	border: 2px solid var(--vscode-progressBar-background);
+	border-top-color: transparent;
+	border-radius: 50%;
+	animation: spin 1s linear infinite;
+	margin-bottom: 12px;
+}
+
+@keyframes spin {
+	to { transform: rotate(360deg); }
+}
+
+.state-icon {
+	font-size: 2em;
+	margin-bottom: 12px;
+	opacity: 0.8;
+}
+
+.state-title {
+	font-weight: 500;
+	margin-bottom: 6px;
+}
+
+.state-hint {
+	font-size: 0.85em;
+	color: var(--vscode-descriptionForeground);
+	max-width: 280px;
+	line-height: 1.4;
+}
+
+/* Quick prompt buttons */
+.quick-prompts {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 6px;
+	justify-content: center;
+	margin-top: 14px;
+}
+
+.quick-prompt {
+	background: var(--vscode-button-secondaryBackground);
+	color: var(--vscode-button-secondaryForeground);
+	border: none;
+	border-radius: 4px;
+	padding: 5px 10px;
+	font-size: 0.8em;
+	cursor: pointer;
+	transition: background 0.15s, transform 0.1s;
+}
+
+.quick-prompt:hover {
+	background: var(--vscode-button-secondaryHoverBackground);
+	transform: translateY(-1px);
+}
+
+.quick-prompt:active {
+	transform: translateY(0);
+}
+
+/* ===========================================================================
+	Artifact Cards
+	=========================================================================== */
+
+.artifact-card {
+	position: relative;
+	background: var(--vscode-editor-background);
+	border: 1px solid var(--vscode-panel-border);
+	border-radius: 8px;
+	overflow: hidden;
+	cursor: pointer;
+	transition: border-color 0.15s, box-shadow 0.15s;
+	display: flex;
+	flex-direction: column;
+}
+.artifact-card .artifact-content {
+	flex: 1 1 auto;
+	min-height: 120px;
+	display: flex;
+	flex-direction: column;
+}
+.artifact-card .artifact-content .html-preview,
+.artifact-card .artifact-content .html-preview iframe {
+	flex: 1 1 auto;
+	height: 100%;
+	min-height: 0;
+	display: block;
+}
+.artifact-card .resize-handle {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	height: 6px;
+	cursor: ns-resize;
+	z-index: 3;
+	background: transparent;
+}
+.artifact-card .resize-handle:hover,
+.artifact-card .resize-handle:active {
+	background: var(--vscode-focusBorder);
+	opacity: 0.4;
+}
+.artifact-card .resize-handle::after {
+	content: '';
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+	width: 24px;
+	height: 3px;
+	border-radius: 2px;
+	background: var(--vscode-panel-border);
+}
+.artifact-card .resize-handle:hover::after {
+	background: var(--vscode-focusBorder);
+}
+
+.artifact-card:hover {
+	border-color: var(--vscode-focusBorder);
+}
+
+.artifact-card.expanded {
+	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+}
+
+.artifact-card.layout-disabled {
+	opacity: 0.92;
+}
+
+/* Hide chart body when user chose Hide; meta + actions stay so Show still works. */
+.artifact-card.layout-disabled .artifact-content {
+	display: none;
+}
+
+.artifact-card.chart-refreshing .artifact-content {
+	opacity: 0.78;
+}
+
+.artifact-refresh-indicator {
+	position: absolute;
+	top: 8px;
+	right: 8px;
+	z-index: 2;
+	font-size: 0.72em;
+	line-height: 1;
+	padding: 4px 8px;
+	border-radius: 999px;
+	background: color-mix(in srgb, var(--vscode-editorInfo-background) 88%, transparent);
+	border: 1px solid var(--vscode-editorInfo-border);
+	color: var(--vscode-foreground);
+	pointer-events: none;
+	white-space: nowrap;
+}
+
+.artifact-refresh-indicator::before {
+	content: '';
+	display: inline-block;
+	width: 7px;
+	height: 7px;
+	margin-right: 6px;
+	border: 1px solid var(--vscode-progressBar-background);
+	border-top-color: transparent;
+	border-radius: 50%;
+	animation: spin 0.9s linear infinite;
+	vertical-align: -1px;
+}
+
+.artifact-content {
+	overflow: hidden;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: var(--vscode-editor-background);
+}
+
+.artifact-content img {
+	max-width: 100%;
+	max-height: 220px;
+	object-fit: contain;
+}
+
+.artifact-card.expanded .artifact-content img {
+	max-height: none;
+}
+
+.artifact-content iframe {
+	width: 100%;
+	height: 100%;
+	min-height: 320px;
+	border: none;
+	background: var(--vscode-editor-background);
+}
+
+.artifact-content .html-preview {
+	width: 100%;
+	min-height: 320px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: var(--vscode-editor-background);
+}
+
+.artifact-content .html-preview.ready {
+	align-items: stretch;
+	justify-content: stretch;
+}
+
+.artifact-content .html-preview-loading,
+.artifact-content .html-preview-fallback {
+	padding: 12px;
+	font-size: 0.82em;
+	color: var(--vscode-descriptionForeground);
+	text-align: center;
+	max-width: 90%;
+}
+
+.artifact-card.expanded .artifact-content iframe {
+	height: 100%;
+	min-height: 600px;
+}
+
+.artifact-content .markdown-preview {
+	padding: 12px;
+	font-size: 0.85em;
+	line-height: 1.5;
+	max-height: 180px;
+	overflow-y: auto;
+	width: 100%;
+}
+
+.artifact-content .data-preview {
+	padding: 16px;
+	text-align: center;
+	color: var(--vscode-descriptionForeground);
+}
+
+.artifact-content .data-preview code {
+	background: var(--vscode-textCodeBlock-background);
+	padding: 4px 8px;
+	border-radius: 4px;
+	font-family: var(--vscode-editor-font-family);
+}
+
+/* Artifact metadata bar */
+.artifact-meta {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 10px 12px;
+	border-top: 1px solid var(--vscode-panel-border);
+	font-size: 0.8em;
+}
+
+.artifact-name {
+	font-weight: 500;
+	color: var(--vscode-foreground);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	flex: 1;
+}
+
+.generator-badge {
+	background: var(--vscode-badge-background);
+	color: var(--vscode-badge-foreground);
+	padding: 2px 6px;
+	border-radius: 3px;
+	font-size: 0.75em;
+	font-weight: 500;
+}
+
+.source-badge {
+	background: var(--vscode-charts-purple);
+	color: white;
+	padding: 2px 6px;
+	border-radius: 3px;
+	font-size: 0.7em;
+	font-weight: 500;
+	text-transform: uppercase;
+}
+
+.layout-badge {
+	background: var(--vscode-editorInfo-background);
+	color: var(--vscode-foreground);
+	padding: 2px 6px;
+	border-radius: 3px;
+	font-size: 0.72em;
+	font-weight: 500;
+}
+
+.layout-badge.disabled {
+	background: var(--vscode-inputValidation-warningBackground);
+	color: var(--vscode-inputValidation-warningForeground);
+}
+
+.artifact-time,
+.artifact-size {
+	color: var(--vscode-descriptionForeground);
+	white-space: nowrap;
+}
+
+/* Artifact actions */
+.artifact-actions {
+	display: flex;
+	gap: 4px;
+	padding: 0 12px 10px;
+}
+
+.action-btn {
+	background: none;
+	border: none;
+	color: var(--vscode-textLink-foreground);
+	cursor: pointer;
+	font-size: 0.8em;
+	padding: 3px 8px;
+	border-radius: 4px;
+	transition: background 0.15s;
+}
+
+.action-btn:hover {
+	background: var(--vscode-button-secondaryBackground);
+}
+
+.action-btn.delete-btn:hover {
+	background: var(--vscode-inputValidation-errorBackground);
+	color: var(--vscode-errorForeground);
+}
+
+.action-btn.toggle-enabled-btn {
+	font-weight: 500;
+}
+
+/* Delete animation */
+.artifact-card.deleting {
+	opacity: 0;
+	transform: translateX(-20px);
+	transition: opacity 0.3s, transform 0.3s;
+}
+
+/* ===========================================================================
+	Gallery Toolbar
+	=========================================================================== */
+
+#gallery-toolbar {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 8px 12px;
+	border-bottom: 1px solid var(--vscode-panel-border);
+}
+
+.toolbar-title {
+	font-size: 0.85em;
+	font-weight: 500;
+	color: var(--vscode-foreground);
+}
+
+.toolbar-actions {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	flex: 1;
+	min-width: 0;
+	justify-content: flex-end;
+}
+
+.toolbar-icon-group {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	flex-shrink: 0;
+}
+
+.toolbar-actions .toolbar-select {
+	flex: 1 1 0;
+	min-width: 72px;
+}
+
+
+.toolbar-select {
+	max-width: 180px;
+	background: var(--vscode-dropdown-background);
+	color: var(--vscode-dropdown-foreground);
+	border: 1px solid var(--vscode-dropdown-border);
+	border-radius: 4px;
+	padding: 3px 6px;
+	font-size: 0.75em;
+}
+
+#view-select {
+	max-width: 160px;
+}
+
+/* Agent Team sidebar: no Spotlight view CRUD; view picker shown via panel.js when >1 team view. */
+body.spotlight-surface-team #share-view-btn,
+body.spotlight-surface-team #install-view-btn,
+body.spotlight-surface-team #share-scripts-only-menu-item,
+body.spotlight-surface-team [data-action="new-view"],
+body.spotlight-surface-team [data-action="duplicate-view"],
+body.spotlight-surface-team [data-action="rename-view"],
+body.spotlight-surface-team [data-action="delete-view"],
+body.spotlight-surface-team [data-action="edit-view-scripts"],
+body.spotlight-surface-team [data-action="share-scripts-only"],
+body.spotlight-surface-team [data-action="refresh-all-views"] {
+	display: none !important;
+}
+
+.toolbar-btn {
+	background: none;
+	border: 1px solid var(--vscode-panel-border);
+	color: var(--vscode-foreground);
+	border-radius: 4px;
+	padding: 4px 10px;
+	font-size: 0.78em;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	transition: background 0.15s, border-color 0.15s;
+}
+
+.toolbar-btn:hover {
+	background: var(--vscode-button-secondaryBackground);
+	border-color: var(--vscode-focusBorder);
+}
+
+.toolbar-btn:disabled {
+	opacity: 0.45;
+	cursor: not-allowed;
+	pointer-events: none;
+}
+
+.toolbar-btn.share-unavailable {
+	opacity: 0.75;
+}
+
+.toolbar-btn.refreshing {
+	opacity: 0.6;
+	pointer-events: none;
+}
+
+.toolbar-btn .btn-icon {
+	font-size: 1em;
+	display: inline-block;
+	line-height: 1;
+	transform-origin: 50% 50%;
+}
+
+.toolbar-btn.refreshing .btn-icon {
+	animation: spin 1s linear infinite;
+}
+
+.toolbar-btn.icon-only {
+	padding: 4px;
+	width: 28px;
+	height: 28px;
+	justify-content: center;
+}
+
+.toolbar-btn.icon-only .btn-icon {
+	font-size: 1.3em;
+	line-height: 1;
+}
+
+.toolbar-btn .menu-icon {
+	font-size: 1.1em;
+}
+
+/* Toolbar Menu Container */
+.toolbar-menu-container {
+	position: relative;
+	flex-shrink: 0;
+}
+
+.toolbar-dropdown {
+	position: absolute;
+	top: 100%;
+	left: 0;
+	z-index: 100;
+	min-width: 200px;
+	background: var(--vscode-dropdown-background);
+	border: 1px solid var(--vscode-dropdown-border);
+	border-radius: 6px;
+	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+	padding: 4px 0;
+	margin-top: 4px;
+	opacity: 0;
+	visibility: hidden;
+	transform: translateY(-4px);
+	transition: opacity 0.15s, visibility 0.15s, transform 0.15s;
+}
+
+.toolbar-dropdown.open {
+	opacity: 1;
+	visibility: visible;
+	transform: translateY(0);
+}
+
+.dropdown-item {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	width: 100%;
+	padding: 8px 12px;
+	background: none;
+	border: none;
+	color: var(--vscode-dropdown-foreground);
+	font-size: 0.82em;
+	text-align: left;
+	cursor: pointer;
+	transition: background 0.1s;
+}
+
+.dropdown-item:disabled {
+	opacity: 0.45;
+	cursor: not-allowed;
+	pointer-events: none;
+}
+
+.dropdown-item.share-unavailable {
+	opacity: 0.75;
+}
+
+.dropdown-item:hover {
+	background: var(--vscode-list-hoverBackground);
+}
+
+.dropdown-item:focus {
+	outline: none;
+	background: var(--vscode-list-focusBackground);
+}
+
+.dropdown-icon {
+	font-size: 1em;
+	width: 18px;
+	text-align: center;
+	flex-shrink: 0;
+}
+
+.dropdown-divider {
+	height: 1px;
+	background: var(--vscode-panel-border);
+	margin: 4px 8px;
+}
+
+/* ===========================================================================
+	Ask AI Section (bottom bar)
+	=========================================================================== */
+
+#ask-ai-bar {
+	padding: 12px;
+	border-top: 1px solid var(--vscode-panel-border);
+	background: var(--vscode-panel-background);
+}
+
+.ask-ai-hint {
+	font-size: 0.8em;
+	color: var(--vscode-descriptionForeground);
+	margin-bottom: 10px;
+	text-align: center;
+}
+
+#ask-ai-btn {
+	width: 100%;
+	background: var(--vscode-button-background);
+	color: var(--vscode-button-foreground);
+	border: none;
+	border-radius: 6px;
+	padding: 10px 16px;
+	cursor: pointer;
+	font-weight: 500;
+	font-size: 0.9em;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 8px;
+	transition: background 0.15s;
+}
+
+#ask-ai-btn:hover {
+	background: var(--vscode-button-hoverBackground);
+}
+
+#ask-ai-btn .icon {
+	font-size: 1.1em;
+}
+
+/* ===========================================================================
+	Generating State
+	=========================================================================== */
+
+#generating-state {
+	background: var(--vscode-editor-background);
+	border: 1px solid var(--vscode-panel-border);
+	border-radius: 8px;
+	margin: 12px;
+	padding: 16px;
+}
+
+.generating-header {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	margin-bottom: 8px;
+}
+
+.generating-title {
+	font-weight: 500;
+}
+
+.generating-hint {
+	font-size: 0.85em;
+	color: var(--vscode-descriptionForeground);
+	margin-bottom: 12px;
+}
+
+#cancel-generate-btn {
+	background: var(--vscode-button-secondaryBackground);
+	color: var(--vscode-button-secondaryForeground);
+	border: none;
+	border-radius: 4px;
+	padding: 6px 14px;
+	font-size: 0.85em;
+	cursor: pointer;
+}
+
+#cancel-generate-btn:hover {
+	background: var(--vscode-button-secondaryHoverBackground);
+}
+
+/* ===========================================================================
+	Refresh Hint
+	=========================================================================== */
+
+#refresh-hint {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: var(--vscode-editorInfo-background);
+	border: 1px solid var(--vscode-editorInfo-border);
+	border-radius: 6px;
+	padding: 8px 12px;
+	margin: 0 12px 12px;
+	font-size: 0.85em;
+}
+
+#refresh-hint span {
+	color: var(--vscode-foreground);
+}
+
+/* ===========================================================================
+	Failed State
+	=========================================================================== */
+
+#failed-state {
+	background: var(--vscode-inputValidation-errorBackground);
+	border: 1px solid var(--vscode-inputValidation-errorBorder);
+	border-radius: 8px;
+	margin: 12px;
+	padding: 16px;
+	text-align: center;
+}
+
+.error-icon {
+	font-size: 1.5em;
+	margin-bottom: 8px;
+}
+
+.error-title {
+	font-weight: 500;
+	margin-bottom: 6px;
+}
+
+.error-message {
+	font-size: 0.85em;
+	color: var(--vscode-descriptionForeground);
+	margin-bottom: 12px;
+}
+
+.fallback-hint {
+	font-size: 0.8em;
+	color: var(--vscode-descriptionForeground);
+	margin-top: 10px;
+}
+
+#retry-generate-btn {
+	background: var(--vscode-button-background);
+	color: var(--vscode-button-foreground);
+	border: none;
+	border-radius: 4px;
+	padding: 6px 14px;
+	font-size: 0.85em;
+	cursor: pointer;
+}
+
+/* ===========================================================================
+	Scrollbar styling
+	=========================================================================== */
+
+::-webkit-scrollbar {
+	width: 8px;
+	height: 8px;
+}
+
+::-webkit-scrollbar-track {
+	background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+	background: var(--vscode-scrollbarSlider-background);
+	border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+	background: var(--vscode-scrollbarSlider-hoverBackground);
+}
+
+/* ===========================================================================
+	Modal (New view name; webviews don't support window.prompt)
+	=========================================================================== */
+
+.modal-overlay {
+	position: fixed;
+	inset: 0;
+	background: rgba(0, 0, 0, 0.4);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 1000;
+}
+
+.modal-content {
+	background: var(--vscode-editor-background);
+	border: 1px solid var(--vscode-panel-border);
+	border-radius: 8px;
+	padding: 16px;
+	min-width: 280px;
+	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
+}
+
+.modal-title {
+	font-size: 1em;
+	font-weight: 600;
+	margin: 0 0 12px 0;
+	color: var(--vscode-foreground);
+}
+
+.modal-input {
+	width: 100%;
+	padding: 8px 10px;
+	margin-bottom: 14px;
+	font-family: var(--vscode-font-family);
+	font-size: var(--vscode-font-size);
+	color: var(--vscode-input-foreground);
+	background: var(--vscode-input-background);
+	border: 1px solid var(--vscode-input-border);
+	border-radius: 4px;
+	box-sizing: border-box;
+}
+
+.modal-input:focus {
+	outline: none;
+	border-color: var(--vscode-focusBorder);
+}
+
+.modal-actions {
+	display: flex;
+	justify-content: flex-end;
+	gap: 8px;
+}
+
+.modal-btn {
+	padding: 6px 14px;
+	font-size: 0.9em;
+	border-radius: 4px;
+	cursor: pointer;
+	border: none;
+}
+
+.modal-btn-primary {
+	background: var(--vscode-button-background);
+	color: var(--vscode-button-foreground);
+}
+
+.modal-btn-primary:hover {
+	background: var(--vscode-button-hoverBackground);
+}
+
+.modal-btn-secondary {
+	background: var(--vscode-button-secondaryBackground);
+	color: var(--vscode-button-secondaryForeground);
+}
+
+.modal-btn-secondary:hover {
+	background: var(--vscode-button-secondaryHoverBackground);
+}