+ `;
+
+ return html;
+}
+
+/**
+ * Generuje CSS dla komponentów UI trybów Roo
+ * @returns Kod CSS dla komponentów UI trybów Roo
+ */
+export function generateRooModeStyles(): string {
+ return `
+ .roo-mode-switcher {
+ margin: 10px 0;
+ padding: 10px;
+ border-radius: 6px;
+ background-color: var(--vscode-editor-background);
+ }
+
+ .roo-mode-switcher-title {
+ font-size: 12px;
+ margin-bottom: 8px;
+ color: var(--vscode-foreground);
+ font-weight: bold;
+ }
+
+ .roo-mode-switcher-buttons {
+ display: flex;
+ gap: 8px;
+ flex-wrap: wrap;
+ }
+
+ .roo-mode-button {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 8px;
+ border-radius: 6px;
+ background-color: var(--vscode-button-secondaryBackground);
+ color: var(--vscode-button-secondaryForeground);
+ border: none;
+ cursor: pointer;
+ min-width: 70px;
+ transition: background-color 0.2s;
+ }
+
+ .roo-mode-button:hover {
+ background-color: var(--vscode-button-secondaryHoverBackground);
+ }
+
+ .roo-mode-button.active {
+ background-color: var(--vscode-button-background);
+ color: var(--vscode-button-foreground);
+ }
+
+ .roo-mode-icon {
+ margin-bottom: 4px;
+ }
+
+ .roo-mode-name {
+ font-size: 12px;
+ }
+ `;
+}
+
+/**
+ * Generuje skrypty klienckie dla obsługi komponentów UI trybów Roo
+ * @returns Kod JavaScript dla obsługi komponentów UI trybów Roo
+ */
+export function generateRooModeScripts(): string {
+ return `
+ // Inicjalizacja przełącznika trybów Roo
+ function initRooModeSwitcher() {
+ const buttons = document.querySelectorAll('.roo-mode-button');
+ buttons.forEach(button => {
+ button.addEventListener('click', () => {
+ const mode = button.dataset.mode;
+ if (mode) {
+ // Wysyłanie komunikatu do rozszerzenia VSCode
+ vscode.postMessage({
+ type: 'command',
+ command: 'rooModeSwitched',
+ mode: mode
+ });
+ }
+ });
+ });
+ }
+
+ // Aktualizacja aktywnego przycisku trybu
+ function updateActiveRooModeButton(mode) {
+ const buttons = document.querySelectorAll('.roo-mode-button');
+ buttons.forEach(button => {
+ if (button.dataset.mode === mode) {
+ button.classList.add('active');
+ } else {
+ button.classList.remove('active');
+ }
+ });
+ }
+
+ // Nasłuchiwanie na zdarzenia przełączania trybów
+ window.addEventListener('message', (event) => {
+ const message = event.data;
+ if (message.type === 'action' && message.action === 'rooModeChanged') {
+ updateActiveRooModeButton(message.data.currentMode);
+ }
+ });
+
+ // Inicjalizacja po załadowaniu strony
+ document.addEventListener('DOMContentLoaded', () => {
+ initRooModeSwitcher();
+ });
+ `;
+}
+
+/**
+ * Obsługuje wiadomości z webview dotyczące trybów Roo
+ * @param provider Dostawca rozszerzenia
+ * @param message Wiadomość z webview
+ * @returns True, jeśli wiadomość została obsłużona
+ */
+export function handleRooModeMessage(provider: ExtensionProvider, message: any): boolean {
+ if (message.type === 'command' && message.command === 'rooModeSwitched') {
+ const mode = message.mode as RooMode;
+ if (mode && Object.values(RooMode).includes(mode)) {
+ // Przełącz tryb za pomocą menedżera trybów
+ provider.rooModeManager.switchMode(mode);
+ return true;
+ }
+ }
+
+ return false;
+}
+
+/**
+ * Pobiera ikonę SVG dla trybu Roo
+ * @param iconName Nazwa ikony
+ * @returns Ikona SVG
+ */
+function getIconSvg(iconName: string): string {
+ const icons: Record