Skip to content

Commit 4bed5c0

Browse files
HumbleBee14HumbleBee14
committed
Refactor MCP settings and enhance dashboard UI
1 parent 4763aaf commit 4bed5c0

6 files changed

Lines changed: 738 additions & 278 deletions

File tree

‎src/vs/workbench/contrib/roopik/browser/commands/welcomeCommands.ts‎

Lines changed: 1 addition & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,8 @@
66
/**
77
* Welcome Commands
88
*
9-
* Commands for opening welcome screen and settings.
9+
* Commands for opening welcome screen.
1010
* - roopik.openWelcome: Open the welcome screen
11-
* - roopik.openSettings: Open the settings page
1211
*/
1312

1413
import { localize2 } from '../../../../../nls.js';
@@ -38,22 +37,4 @@ export function registerWelcomeCommands(): void {
3837
await editorGroupsService.activeGroup.openEditor(welcomeInput, { pinned: true });
3938
}
4039
});
41-
42-
// Open Settings (Preferences)
43-
registerAction2(class extends Action2 {
44-
constructor() {
45-
super({
46-
id: 'roopik.openSettings',
47-
title: localize2('roopik.openSettings', 'Settings'),
48-
category: localize2('roopik.category', 'Roopik'),
49-
f1: true
50-
});
51-
}
52-
53-
async run(accessor: ServicesAccessor): Promise<void> {
54-
const editorGroupsService = accessor.get(IEditorGroupsService);
55-
const settingsInput = RoopikWelcomeInput.getInstance('settings');
56-
await editorGroupsService.activeGroup.openEditor(settingsInput, { pinned: true });
57-
}
58-
});
5940
}

‎src/vs/workbench/contrib/roopik/browser/media/welcomeEditor.css‎

Lines changed: 161 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -226,8 +226,25 @@
226226
}
227227

228228
.ai-input-wrapper:focus-within {
229-
box-shadow: 0 0 25px rgba(102, 126, 234, 0.5),
230-
0 0 50px rgba(118, 75, 162, 0.25);
229+
box-shadow: 0 0 40px rgba(102, 126, 234, 0.7),
230+
0 0 80px rgba(118, 75, 162, 0.4);
231+
transform: scale(1.06);
232+
animation: popIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
233+
}
234+
235+
@keyframes popIn {
236+
0% {
237+
transform: scale(1);
238+
}
239+
40% {
240+
transform: scale(1.12);
241+
}
242+
70% {
243+
transform: scale(1.04);
244+
}
245+
100% {
246+
transform: scale(1.06);
247+
}
231248
}
232249

233250
@keyframes gradient-shift {
@@ -306,7 +323,9 @@
306323
}
307324

308325
.ai-submit-button .codicon {
309-
font-size: 16px;
326+
font-size: 18px;
327+
color: white !important;
328+
font-weight: bold;
310329
}
311330

312331
/* Responsive */
@@ -406,17 +425,60 @@
406425
margin: 0;
407426
}
408427

409-
/* Quick Start Container - Three Column Layout */
428+
/* Quick Start Container - Two Column Layout with Hover Panel */
410429
.quick-start-container {
411430
display: grid;
412-
grid-template-columns: 1fr 1fr 1fr;
431+
grid-template-columns: minmax(200px, 280px) 1fr;
413432
gap: 32px;
433+
position: relative;
414434
}
415435

416436
.quick-start-column {
417437
display: flex;
418438
flex-direction: column;
419-
gap: 8px;
439+
gap: 4px;
440+
}
441+
442+
/* Hover Panel for Recent Items */
443+
.quick-start-hover-panel {
444+
display: none;
445+
padding: 16px 20px;
446+
background-color: var(--vscode-editorWidget-background);
447+
border: 1px solid var(--vscode-widget-border);
448+
border-radius: 8px;
449+
min-height: 200px;
450+
animation: fadeIn 0.15s ease;
451+
}
452+
453+
/* Title inside hover panel */
454+
.hover-panel-title {
455+
font-size: 11px;
456+
font-weight: 700;
457+
text-transform: uppercase;
458+
letter-spacing: 0.08em;
459+
color: var(--vscode-textLink-activeForeground);
460+
margin-bottom: 12px;
461+
padding-bottom: 8px;
462+
border-bottom: 1px solid var(--vscode-widget-border);
463+
}
464+
465+
@keyframes fadeIn {
466+
from {
467+
opacity: 0;
468+
transform: translateX(-8px);
469+
}
470+
to {
471+
opacity: 1;
472+
transform: translateX(0);
473+
}
474+
}
475+
476+
/* Divider before recent items */
477+
.quick-start-divider {
478+
height: 1px;
479+
background-color: var(--vscode-widget-border);
480+
margin: 8px 0;
481+
opacity: 0.5;
420482
}
421483

422484
.quick-start-column-title {
@@ -455,6 +517,26 @@
455517
font-size: 13px;
456518
font-weight: 400;
457519
color: var(--vscode-foreground);
520+
flex: 1;
521+
}
522+
523+
/* Arrow for recent item triggers */
524+
.quick-start-action.with-arrow {
525+
justify-content: flex-start;
526+
}
527+
528+
.quick-start-action .action-arrow {
529+
font-size: 14px;
530+
color: var(--vscode-descriptionForeground);
531+
opacity: 0.6;
532+
transition: all 0.15s ease;
533+
margin-left: auto;
534+
}
535+
536+
.quick-start-action.with-arrow:hover .action-arrow {
537+
opacity: 1;
538+
transform: translateX(2px);
539+
color: var(--vscode-textLink-activeForeground);
458540
}
459541

460542
/* Recent Canvas Items */
@@ -644,7 +726,61 @@
644726

645727
.quick-start-container {
646728
grid-template-columns: 1fr;
647-
gap: 24px;
729+
gap: 16px;
730+
}
731+
732+
/* On small screens, show START items in horizontal grid */
733+
.quick-start-column {
734+
display: grid;
735+
grid-template-columns: repeat(3, 1fr);
736+
gap: 8px;
737+
}
738+
739+
/* Column title spans full width */
740+
.quick-start-column-title {
741+
grid-column: 1 / -1;
742+
}
743+
744+
/* Divider spans full width */
745+
.quick-start-divider {
746+
grid-column: 1 / -1;
747+
}
748+
749+
/* Compact action items for grid */
750+
.quick-start-action {
751+
flex-direction: column;
752+
gap: 6px;
753+
padding: 12px 8px;
754+
text-align: center;
755+
border-radius: 8px;
756+
border: 1px solid var(--vscode-widget-border);
757+
background-color: var(--vscode-editorWidget-background);
758+
}
759+
760+
.quick-start-action .codicon {
761+
font-size: 20px;
762+
}
763+
764+
.quick-start-action-label {
765+
font-size: 11px;
766+
line-height: 1.3;
767+
}
768+
769+
/* Arrow hidden in compact mode - full text is visible */
770+
.quick-start-action .action-arrow {
771+
display: none;
772+
}
773+
774+
.quick-start-action:hover {
775+
border-color: var(--vscode-focusBorder);
776+
transform: translateY(-2px);
777+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
778+
}
779+
780+
.quick-start-hover-panel {
781+
position: relative;
782+
min-height: auto;
783+
grid-column: 1 / -1;
648784
}
649785

650786
.checkbox-container {
@@ -659,7 +795,7 @@
659795
}
660796

661797
.quick-start-container {
662-
grid-template-columns: 1fr 1fr;
798+
grid-template-columns: minmax(180px, 240px) 1fr;
663799
gap: 24px;
664800
}
665801
}
@@ -679,6 +815,23 @@
679815
.hero-button-label {
680816
font-size: 12px;
681817
}
818+
819+
/* 2 columns on very small screens */
820+
.quick-start-column {
821+
grid-template-columns: repeat(2, 1fr);
822+
}
823+
824+
.quick-start-action {
825+
padding: 10px 6px;
826+
}
827+
828+
.quick-start-action .codicon {
829+
font-size: 18px;
830+
}
831+
832+
.quick-start-action-label {
833+
font-size: 10px;
834+
}
682835
}
683836

684837
/* Very small screens - ensure buttons never overflow */

‎src/vs/workbench/contrib/roopik/browser/roopik.contribution.ts‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -129,45 +129,45 @@ Registry.as<IConfigurationRegistry>(ConfigurationExtensions.Configuration).regis
129129
// ========================================
130130
// MCP Server - Core Settings (logical order)
131131
// ========================================
132-
'roopik.mcp.enabled': {
132+
'roopik.mcp.stdioMCP': {
133133
type: 'boolean',
134134
default: true,
135135
order: 10,
136-
markdownDescription: '**Enable MCP Server** - Allow AI agents (Claude, Codex, etc.) to control Roopik IDE via MCP protocol.'
136+
markdownDescription: '**Enable STDIO MCP** [Recommended] - Allow AI agents (Claude, Codex, etc.) to control Roopik IDE via the standard STDIO-based MCP protocol.'
137137
},
138-
'roopik.mcp.autoRegister': {
139-
type: 'boolean',
140-
default: true,
141-
order: 11,
142-
description: 'Automatically register Roopik with enabled AI agents on startup.'
143-
},
144-
'roopik.mcp.port': {
138+
'roopik.mcp.stdioMCPPort': {
145139
type: 'number',
146140
default: 9876,
147141
minimum: 1024,
148142
maximum: 65535,
143+
order: 11,
144+
description: 'AI agents connect to this port for STDIO-based communication.'
145+
},
146+
'roopik.mcp.autoRegister': {
147+
type: 'boolean',
148+
default: true,
149149
order: 12,
150-
description: 'MCP server port. AI agents connect to this port.'
150+
description: 'Automatically register Roopik with enabled AI agents on startup.'
151151
},
152152
'roopik.mcp.cleanupOnExit': {
153153
type: 'boolean',
154154
default: false,
155155
order: 13,
156156
description: 'Unregister from all AI agents when Roopik exits. If false, registrations persist for quick reconnection.'
157157
},
158-
'roopik.mcp.httpEnabled': {
158+
'roopik.mcp.httpMCP': {
159159
type: 'boolean',
160160
default: false,
161161
order: 14,
162-
markdownDescription: '**Enable HTTP MCP** (Advanced) - Enable HTTP-based MCP transport. Only needed for HTTP clients.'
162+
markdownDescription: '**Enable HTTP/SSE MCP** (Experimental) - Enable HTTP-based MCP transport with Server-Sent Events.'
163163
},
164-
'roopik.mcp.httpPort': {
164+
'roopik.mcp.httpMCPPort': {
165165
type: 'number',
166166
default: 3333,
167167
minimum: 1024,
168168
maximum: 65535,
169169
order: 15,
170-
description: 'HTTP MCP server port. Only used when HTTP MCP is enabled.'
170+
description: 'Only used when HTTP/SSE MCP is enabled.'
171171
},
172172

173173
// ========================================

0 commit comments

Comments
 (0)