diff --git a/frontend/src/services/tools/handlers/canvasHandlers.ts b/frontend/src/services/tools/handlers/canvasHandlers.ts index a4e27a4..4f51b50 100644 --- a/frontend/src/services/tools/handlers/canvasHandlers.ts +++ b/frontend/src/services/tools/handlers/canvasHandlers.ts @@ -337,33 +337,33 @@ export function createCanvasHandlers(): ToolConfig[] { schema: { type: 'object', properties: { - id: { type: 'string', description: 'ID de la ventana a inspeccionar' }, - selector: { type: 'string', description: 'Selector CSS para filtrar elementos dentro de la ventana (opcional)' }, + id: { type: 'string', description: 'ID de la ventana' }, + selector: { type: 'string', description: 'Selector CSS dentro de la ventana' }, attribute: { type: 'string', enum: ['innerHTML', 'outerHTML', 'textContent', 'attributes'], - description: 'Que retornar: innerHTML (default), outerHTML, textContent, attributes' + description: 'Que retornar (default: innerHTML)' }, - limit: { type: 'number', description: 'Limitar caracteres de salida (default: 2000)' } + limit: { type: 'number', description: 'Max caracteres (default: 2000)' } }, required: ['id'] }, handler: (args: { id: string; selector?: string; attribute?: string; limit?: number }) => { const windowEl = document.querySelector(`[data-window-id="${args.id}"]`) if (!windowEl) { - return `Error: Ventana "${args.id}" no encontrada` + return `Error: window ${args.id} not found` } const content = windowEl.querySelector('.window-content') if (!content) { - return `Error: Contenido de ventana "${args.id}" no encontrado` + return `Error: no content in ${args.id}` } let target: Element | null = content if (args.selector) { target = content.querySelector(args.selector) if (!target) { - return `Error: Selector "${args.selector}" no encontrado en ventana "${args.id}"` + return `Error: no match ${args.selector} in ${args.id}` } } @@ -382,7 +382,7 @@ export function createCanvasHandlers(): ToolConfig[] { } if (result.length > limit) { - result = result.slice(0, limit) + `\n... (truncado, ${result.length - limit} chars mas)` + result = result.slice(0, limit) + `\n...(+${result.length - limit})` } return result @@ -390,19 +390,19 @@ export function createCanvasHandlers(): ToolConfig[] { }, { name: 'get_canvas', - description: 'Lee elementos del canvas usando selectores CSS. Similar a Read pero para el DOM.', + description: 'Lee elementos del canvas con selector CSS', category: 'canvas', schema: { type: 'object', properties: { - selector: { type: 'string', description: 'Selector CSS para encontrar elementos' }, + selector: { type: 'string', description: 'Selector CSS' }, attribute: { type: 'string', enum: ['innerHTML', 'outerHTML', 'textContent', 'attributes', 'style', 'classList'], description: 'Que retornar (default: innerHTML)' }, - all: { type: 'boolean', description: 'Si true, retorna todos los matches (default: false, solo el primero)' }, - limit: { type: 'number', description: 'Limitar caracteres de salida (default: 3000)' } + all: { type: 'boolean', description: 'Retorna todos los matches (default: false)' }, + limit: { type: 'number', description: 'Max caracteres (default: 3000)' } }, required: ['selector'] }, @@ -434,20 +434,20 @@ export function createCanvasHandlers(): ToolConfig[] { if (args.all) { const elements = container.querySelectorAll(args.selector) if (elements.length === 0) { - return `No se encontraron elementos con selector "${args.selector}"` + return `No match: ${args.selector}` } const values = Array.from(elements).map((el, i) => `[${i}] ${extractValue(el)}`) - result = `Encontrados ${elements.length} elementos:\n${values.join('\n---\n')}` + result = `${elements.length} elements:\n${values.join('\n---\n')}` } else { const el = container.querySelector(args.selector) if (!el) { - return `No se encontro elemento con selector "${args.selector}"` + return `No match: ${args.selector}` } result = extractValue(el) } if (result.length > limit) { - result = result.slice(0, limit) + `\n... (truncado, ${result.length - limit} chars mas)` + result = result.slice(0, limit) + `\n...(+${result.length - limit})` } return result @@ -455,20 +455,20 @@ export function createCanvasHandlers(): ToolConfig[] { }, { name: 'edit_canvas', - description: 'Edita elementos del canvas. Similar a Edit pero para el DOM. Reemplaza old_value por new_value.', + description: 'Edita elementos del canvas (old_value -> new_value)', category: 'canvas', schema: { type: 'object', properties: { - selector: { type: 'string', description: 'Selector CSS del elemento a editar' }, + selector: { type: 'string', description: 'Selector CSS' }, attribute: { type: 'string', enum: ['innerHTML', 'textContent', 'outerHTML', 'style', 'className'], description: 'Que atributo editar (default: innerHTML)' }, - old_value: { type: 'string', description: 'Valor a buscar y reemplazar (si no se pasa, reemplaza todo)' }, + old_value: { type: 'string', description: 'Si se omite, reemplaza todo' }, new_value: { type: 'string', description: 'Nuevo valor' }, - all: { type: 'boolean', description: 'Si true, edita todos los matches (default: false)' } + all: { type: 'boolean', description: 'Edita todos los matches (default: false)' } }, required: ['selector', 'new_value'] }, @@ -482,7 +482,7 @@ export function createCanvasHandlers(): ToolConfig[] { : [container.querySelector(args.selector)].filter(Boolean) as Element[] if (elements.length === 0) { - return `Error: No se encontro elemento con selector "${args.selector}"` + return `Error: no match ${args.selector}` } let editedCount = 0 @@ -513,25 +513,25 @@ export function createCanvasHandlers(): ToolConfig[] { } if (editedCount === 0) { - return `Error: old_value "${args.old_value}" no encontrado en ningun elemento` + return `Error: old_value not found` } - return `Editado ${editedCount} elemento(s) con selector "${args.selector}"` + return `OK ${editedCount} edited` } }, { name: 'canvas_css', - description: 'Inyecta CSS en el canvas. Usa id para poder actualizar o remover despues.', + description: 'Inyecta CSS en el canvas', category: 'canvas', schema: { type: 'object', properties: { - css: { type: 'string', description: 'Codigo CSS a inyectar' }, - id: { type: 'string', description: 'ID unico para el bloque de estilos (default: auto)' }, + css: { type: 'string', description: 'Codigo CSS' }, + id: { type: 'string', description: 'ID del bloque (default: auto)' }, mode: { type: 'string', enum: ['inject', 'replace', 'remove'], - description: 'inject (default), replace (reemplaza si existe), remove (elimina por id)' + description: 'inject (default), replace, remove' } }, required: ['css'] @@ -541,20 +541,20 @@ export function createCanvasHandlers(): ToolConfig[] { const styleId = args.id ? `canvas-css-${args.id}` : `canvas-css-${Date.now()}` if (mode === 'remove') { - if (!args.id) return 'Error: Se requiere id para remover' + if (!args.id) return 'Error: id required for remove' const existing = document.getElementById(`canvas-css-${args.id}`) if (existing) { existing.remove() - return `CSS "${args.id}" removido` + return `OK css:${args.id} removed` } - return `Error: CSS "${args.id}" no encontrado` + return `Error: css:${args.id} not found` } let styleEl = args.id ? document.getElementById(`canvas-css-${args.id}`) : null if (mode === 'replace' && styleEl) { styleEl.textContent = args.css - return `CSS "${args.id}" actualizado` + return `OK css:${args.id} replaced` } if (!styleEl) { @@ -564,18 +564,18 @@ export function createCanvasHandlers(): ToolConfig[] { } styleEl.textContent = args.css - return `CSS inyectado con id "${styleId.replace('canvas-css-', '')}"` + return `OK css:${styleId.replace('canvas-css-', '')}` } }, { name: 'canvas_js', - description: 'Ejecuta JavaScript en el contexto del canvas. Tiene acceso a las ventanas y el DOM.', + description: 'Ejecuta JavaScript en el contexto del canvas', category: 'canvas', schema: { type: 'object', properties: { code: { type: 'string', description: 'Codigo JavaScript a ejecutar' }, - async: { type: 'boolean', description: 'Si true, ejecuta como async y espera resultado' } + async: { type: 'boolean', description: 'Ejecutar como async (default: false)' } }, required: ['code'] }, @@ -610,26 +610,26 @@ export function createCanvasHandlers(): ToolConfig[] { }, { name: 'get_canvas_css', - description: 'Obtiene los bloques CSS inyectados en el canvas.', + description: 'Obtiene CSS inyectado', category: 'canvas', schema: { type: 'object', properties: { - id: { type: 'string', description: 'ID especifico del bloque CSS (opcional, si no se pasa lista todos)' } + id: { type: 'string', description: 'ID del bloque (si se omite, lista todos)' } }, required: [] }, handler: (args: { id?: string }) => { if (args.id) { const styleEl = document.getElementById(`canvas-css-${args.id}`) - if (!styleEl) return `Error: CSS "${args.id}" no encontrado` - return styleEl.textContent || '(vacio)' + if (!styleEl) return `Error: css:${args.id} not found` + return styleEl.textContent || '(empty)' } // Listar todos const styles = document.querySelectorAll('style[id^="canvas-css-"]') if (styles.length === 0) { - return 'No hay CSS inyectado en el canvas' + return 'No CSS injected' } const list = Array.from(styles).map(s => { @@ -638,7 +638,7 @@ export function createCanvasHandlers(): ToolConfig[] { return `- ${id}: ${preview}${(s.textContent?.length || 0) > 100 ? '...' : ''}` }).join('\n') - return `CSS inyectados (${styles.length}):\n${list}` + return `${styles.length} blocks:\n${list}` } } ] diff --git a/frontend/src/services/tools/toolDefinitions.ts b/frontend/src/services/tools/toolDefinitions.ts index 981950e..ceeb8e4 100644 --- a/frontend/src/services/tools/toolDefinitions.ts +++ b/frontend/src/services/tools/toolDefinitions.ts @@ -24,12 +24,12 @@ export const ALL_TOOL_METAS: ToolMeta[] = [ { name: 'resize_window', description: 'Cambia el tamano de una ventana', category: 'canvas' }, { name: 'close_window', description: 'Cierra una ventana del canvas', category: 'canvas' }, { name: 'list_windows', description: 'Lista todas las ventanas abiertas', category: 'canvas' }, - { name: 'inspect_window', description: 'Inspecciona el HTML de una ventana', category: 'canvas' }, + { name: 'inspect_window', description: 'Inspecciona el contenido de una ventana', category: 'canvas' }, { name: 'get_canvas', description: 'Lee elementos del canvas con selector CSS', category: 'canvas' }, { name: 'edit_canvas', description: 'Edita elementos del canvas (old_value -> new_value)', category: 'canvas' }, { name: 'canvas_css', description: 'Inyecta CSS en el canvas', category: 'canvas' }, { name: 'canvas_js', description: 'Ejecuta JavaScript en el canvas', category: 'canvas' }, - { name: 'get_canvas_css', description: 'Obtiene CSS inyectado en el canvas', category: 'canvas' }, + { name: 'get_canvas_css', description: 'Obtiene CSS inyectado', category: 'canvas' }, { name: 'save_canvas_snapshot', description: 'Guarda el estado actual del canvas como snapshot', category: 'canvas' }, { name: 'load_canvas_snapshot', description: 'Restaura un snapshot del canvas', category: 'canvas' }, { name: 'list_canvas_snapshots', description: 'Lista snapshots del canvas guardados', category: 'canvas' },