nucleo000/agent-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add update_theme functionality with UI support

Browse Source 
Backend:
- Add PUT /api/themes/:id endpoint for updating existing themes

Store:
- Add updateTheme method to theme store

MCP:
- Add update_theme tool to modify name, description, or save current variables

UI:
- Add edit button to ThemeListItem (custom themes only)
- Add edit modal with name and description fields
- Support editing from both desktop sidebar and mobile dropdown
This commit is contained in:
josedario87
2026-02-13 05:50:13 -06:00
parent d5518cb6d1
commit 2e64dceb1e
6 changed files with 263 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/components/themes/ThemeListItem.vue
View File

@@ -11,6 +11,7 @@ const emit = defineEmits<{
delete: [id: string]
clone: [id: string]
setDefault: [id: string]
edit: [theme: Theme]
}>()
function getAccentColor(): string {
@@ -48,6 +49,18 @@ function getAccentColor(): string {
</svg>
</button>
<button
v-if="!theme.is_system"
class="action-btn"
@click="emit('edit', theme)"
title="Edit theme"
>
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
</svg>
</button>
<button
class="action-btn"
@click="emit('clone', theme.id)"

84
frontend/src/pages/ThemesPage.vue
View File

@@ -16,6 +16,10 @@ const showNewThemeModal = ref(false)
const showCloneModal = ref(false)
const cloneSourceId = ref<string | null>(null)
const cloneName = ref('')
const showEditModal = ref(false)
const editingTheme = ref<any>(null)
const editName = ref('')
const editDescription = ref('')
const fileInput = ref<HTMLInputElement | null>(null)
const currentCategoryVariables = computed(() => {
@@ -58,6 +62,26 @@ async function confirmClone() {
}
}
function handleEditTheme(theme: any) {
editingTheme.value = theme
editName.value = theme.name
editDescription.value = theme.description || ''
showEditModal.value = true
}
async function confirmEdit() {
if (editingTheme.value && editName.value.trim()) {
await store.updateTheme(editingTheme.value.id, {
name: editName.value.trim(),
description: editDescription.value.trim() || undefined
})
showEditModal.value = false
editingTheme.value = null
editName.value = ''
editDescription.value = ''
}
}
function handleSetDefault(id: string) {
store.setDefaultTheme(id)
}
@@ -171,6 +195,7 @@ onMounted(() => {
@select="(t) => { handleSelectTheme(t); mobileDropdownOpen = false }"
@clone="handleCloneTheme"
@setDefault="handleSetDefault"
@edit="handleEditTheme"
/>
</div>
<div v-if="store.userThemes.length > 0" class="dropdown-section">
@@ -184,6 +209,7 @@ onMounted(() => {
@delete="handleDeleteTheme"
@clone="handleCloneTheme"
@setDefault="handleSetDefault"
@edit="handleEditTheme"
/>
</div>
</div>
@@ -208,6 +234,7 @@ onMounted(() => {
@delete="handleDeleteTheme"
@clone="handleCloneTheme"
@setDefault="handleSetDefault"
@edit="handleEditTheme"
/>
</section>
@@ -222,6 +249,7 @@ onMounted(() => {
@delete="handleDeleteTheme"
@clone="handleCloneTheme"
@setDefault="handleSetDefault"
@edit="handleEditTheme"
/>
</section>
</div>
@@ -366,6 +394,33 @@ onMounted(() => {
</div>
</div>
</div>
<!-- Edit Modal -->
<div v-if="showEditModal" class="modal-overlay" @click="showEditModal = false">
<div class="modal" @click.stop>
<h3>Edit Theme</h3>
<div class="form-group">
<label>Name</label>
<input
v-model="editName"
type="text"
placeholder="Theme name"
/>
</div>
<div class="form-group">
<label>Description</label>
<textarea
v-model="editDescription"
placeholder="Theme description (optional)"
rows="3"
></textarea>
</div>
<div class="modal-actions">
<button class="btn-secondary" @click="showEditModal = false">Cancel</button>
<button class="btn-primary" @click="confirmEdit">Save</button>
</div>
</div>
</div>
</div>
</template>
@@ -820,6 +875,35 @@ onMounted(() => {
border-color: var(--accent);
}
.form-group {
margin-bottom: 1rem;
}
.form-group label {
display: block;
font-size: 0.8rem;
font-weight: 500;
color: var(--text-secondary);
margin-bottom: 0.375rem;
}
.modal textarea {
width: 100%;
padding: 0.75rem 1rem;
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: 8px;
color: var(--text-primary);
font-size: 0.95rem;
font-family: inherit;
resize: vertical;
}
.modal textarea:focus {
outline: none;
border-color: var(--accent);
}
.modal-actions {
display: flex;
gap: 0.75rem;

80
frontend/src/services/tools/themeTools.ts
View File

@@ -6,6 +6,7 @@ export const THEME_TOOLS = [
'get_active_theme',
'set_theme_variable',
'save_theme',
'update_theme',
'list_themes',
'switch_theme',
'set_default_theme',
@@ -212,6 +213,85 @@ export function registerThemeTools() {
}
)
// update_theme
registerTool(
'update_theme',
'Actualiza un tema existente (nombre, descripción o variables)',
{
type: 'object',
properties: {
theme: {
type: 'string',
description: 'Nombre o ID del tema a actualizar'
},
name: {
type: 'string',
description: 'Nuevo nombre para el tema (opcional)'
},
description: {
type: 'string',
description: 'Nueva descripción para el tema (opcional)'
},
saveCurrentVariables: {
type: 'boolean',
description: 'Si es true, guarda las variables actuales (con los cambios de set_theme_variable) en este tema'
}
},
required: ['theme']
},
async (args: { theme: string; name?: string; description?: string; saveCurrentVariables?: boolean }) => {
try {
const themeStore = useThemeStore()
await themeStore.fetchThemes()
// Find theme by ID or name
const theme = themeStore.themes.find(t =>
t.id === args.theme || t.name.toLowerCase() === args.theme.toLowerCase()
)
if (!theme) {
const available = themeStore.themes.map(t => t.name).join(', ')
return `Tema "${args.theme}" no encontrado.\nDisponibles: ${available}`
}
if (theme.is_system) {
return `No se puede modificar "${theme.name}" porque es un tema del sistema. Usa save_theme para crear una copia.`
}
// Build update data
const updateData: { name?: string; description?: string; variables?: any } = {}
if (args.name) {
updateData.name = args.name
}
if (args.description !== undefined) {
updateData.description = args.description
}
if (args.saveCurrentVariables) {
const variablesToSave = themeStore.previewTheme || themeStore.activeTheme?.variables
if (variablesToSave) {
updateData.variables = variablesToSave
}
}
if (Object.keys(updateData).length === 0) {
return 'No se especificaron cambios. Usa name, description o saveCurrentVariables.'
}
await themeStore.updateTheme(theme.id, updateData)
const changes = []
if (args.name) changes.push(`nombre: "${args.name}"`)
if (args.description !== undefined) changes.push('descripción actualizada')
if (args.saveCurrentVariables) changes.push('variables guardadas')
return `Tema "${theme.name}" actualizado:\n ${changes.join('\n ')}`
} catch (e: any) {
return `Error al actualizar tema: ${e.message}`
}
}
)
// list_themes
registerTool(
'list_themes',

24
frontend/src/stores/theme.ts
View File

@@ -138,6 +138,29 @@ export const useThemeStore = defineStore('theme', () => {
}
}
async function updateTheme(id: string, data: { name?: string; description?: string; variables?: ThemeVariables; metadata?: ThemeMetadata }) {
saving.value = true
try {
const res = await fetch(`${API_URL}/api/themes/${id}`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
})
const result = await res.json()
if (result.error) {
error.value = result.error
return null
}
await fetchThemes()
return result
} catch (e) {
error.value = 'Error updating theme'
throw e
} finally {
saving.value = false
}
}
async function deleteTheme(id: string) {
try {
const res = await fetch(`${API_URL}/api/themes/${id}`, { method: 'DELETE' })
@@ -281,6 +304,7 @@ export const useThemeStore = defineStore('theme', () => {
fetchThemes,
fetchDesignTokens,
saveTheme,
updateTheme,
deleteTheme,
setDefaultTheme,
cloneTheme,