advanced config edit

src/components/ConfigEditor.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
 import { Settings } from 'lucide-react';
 import { useConfigYaml } from '../hooks';
 import { Button, Textarea } from './ui';
@@ -13,7 +14,8 @@ import {
   DialogTrigger} from '@/components/ui/dialog';
 
 export function ConfigEditor() {
-  const { yamlContent, isLoading, error, isEndpointMissing, updateYaml, refetch } = useConfigYaml();
+  const { instanceId } = useParams<{ instanceId: string }>();
+  const { yamlContent, isLoading, error, isEndpointMissing, updateYaml, refetch } = useConfigYaml(instanceId || '');
   
   const [editedContent, setEditedContent] = useState('');
   const [hasChanges, setHasChanges] = useState(false);
@@ -96,7 +98,7 @@ export function ConfigEditor() {
             onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setEditedContent(e.target.value)}
             placeholder={isLoading ? "Loading YAML configuration..." : "No configuration found"}
             disabled={isLoading || !!isEndpointMissing}
-            className="font-mono text-sm w-full flex-1 min-h-0 resize-none"
+            className="font-mono text-sm w-full flex-1 min-h-0 resize-none whitespace-pre overflow-x-auto"
           />
           
           {hasChanges && (

src/hooks/useConfigYaml.ts

@@ -1,26 +1,27 @@
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { apiService } from '../services/api-legacy';
+import { instancesApi } from '../services/api';
 
-export const useConfigYaml = () => {
+export const useConfigYaml = (instanceId: string) => {
   const queryClient = useQueryClient();
 
   const configYamlQuery = useQuery({
-    queryKey: ['config', 'yaml'],
-    queryFn: () => apiService.getConfigYaml(),
+    queryKey: ['instance', instanceId, 'config', 'yaml'],
+    queryFn: () => instancesApi.getConfigYaml(instanceId),
     staleTime: 30000, // Consider data fresh for 30 seconds
     retry: true,
+    enabled: !!instanceId,
   });
 
   const updateConfigYamlMutation = useMutation({
-    mutationFn: (data: string) => apiService.updateConfigYaml(data),
+    mutationFn: (data: string) => instancesApi.updateConfigYaml(instanceId, data),
     onSuccess: () => {
-      // Invalidate both YAML and JSON config queries
-      queryClient.invalidateQueries({ queryKey: ['config'] });
+      // Invalidate both YAML and JSON config queries for this instance
+      queryClient.invalidateQueries({ queryKey: ['instance', instanceId, 'config'] });
     },
   });
 
   // Check if error is 404 (endpoint doesn't exist)
-  const isEndpointMissing = configYamlQuery.error && 
+  const isEndpointMissing = configYamlQuery.error &&
     configYamlQuery.error instanceof Error &&
     configYamlQuery.error.message.includes('404');
 

src/services/api/instances.ts

@@ -37,6 +37,28 @@ export const instancesApi = {
     return apiClient.patch(`/api/v1/instances/${instanceName}/config`, { updates });
   },
 
+  // Raw YAML config management (for advanced editor)
+  async getConfigYaml(instanceName: string): Promise<string> {
+    // Request YAML format via Accept header
+    const baseUrl = import.meta.env.VITE_API_BASE_URL || 'http://localhost:5055';
+    const url = `${baseUrl}/api/v1/instances/${instanceName}/config`;
+    const response = await fetch(url, {
+      headers: { 'Accept': 'application/yaml' }
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+    }
+
+    return response.text();
+  },
+
+  async updateConfigYaml(instanceName: string, yamlContent: string): Promise<{ message: string }> {
+    // Send YAML to API (API expects YAML in body)
+    const result = await apiClient.putText(`/api/v1/instances/${instanceName}/config`, yamlContent);
+    return { message: result.message || 'Config updated successfully' };
+  },
+
   // Secrets management
   async getSecrets(instanceName: string, raw = false): Promise<Record<string, unknown>> {
     const query = raw ? '?raw=true' : '';