Merge branch 'KIN-120-frontend_dev'

This commit is contained in:
Gros Frumos 2026-03-18 14:30:36 +02:00
commit 12fed3e31f
5 changed files with 333 additions and 560 deletions

View file

@ -97,6 +97,8 @@
}, },
"settings": { "settings": {
"title": "Settings", "title": "Settings",
"navigate_hint": "Each project's settings are available in its own Settings tab.",
"open_settings": "Open Settings",
"obsidian_vault_path": "Obsidian Vault Path", "obsidian_vault_path": "Obsidian Vault Path",
"test_command": "Test Command", "test_command": "Test Command",
"test_command_hint": "Test run command, executed via shell in the project directory.", "test_command_hint": "Test run command, executed via shell in the project directory.",
@ -206,7 +208,14 @@
"loading_phases": "Loading phases...", "loading_phases": "Loading phases...",
"revise_modal_title": "Revise phase", "revise_modal_title": "Revise phase",
"reject_modal_title": "Reject phase", "reject_modal_title": "Reject phase",
"add_link_title": "Add link" "add_link_title": "Add link",
"settings_tab": "Settings",
"settings_agent_section": "Agent Execution",
"settings_deploy_section": "Deploy",
"settings_integrations_section": "Integrations",
"settings_execution_mode": "Execution mode",
"settings_autocommit": "Autocommit",
"settings_autocommit_hint": "— git commit after pipeline"
}, },
"escalation": { "escalation": {
"watchdog_blocked": "Watchdog: task {task_id} blocked — {reason}", "watchdog_blocked": "Watchdog: task {task_id} blocked — {reason}",

View file

@ -97,6 +97,8 @@
}, },
"settings": { "settings": {
"title": "Настройки", "title": "Настройки",
"navigate_hint": "Настройки каждого проекта доступны в его собственной вкладке «Настройки».",
"open_settings": "Открыть настройки",
"obsidian_vault_path": "Путь к Obsidian Vault", "obsidian_vault_path": "Путь к Obsidian Vault",
"test_command": "Команда тестирования", "test_command": "Команда тестирования",
"test_command_hint": "Команда запуска тестов, выполняется через shell в директории проекта.", "test_command_hint": "Команда запуска тестов, выполняется через shell в директории проекта.",
@ -206,7 +208,14 @@
"loading_phases": "Загрузка фаз...", "loading_phases": "Загрузка фаз...",
"revise_modal_title": "Доработать фазу", "revise_modal_title": "Доработать фазу",
"reject_modal_title": "Отклонить фазу", "reject_modal_title": "Отклонить фазу",
"add_link_title": "Добавить связь" "add_link_title": "Добавить связь",
"settings_tab": "Настройки",
"settings_agent_section": "Запуск агентов",
"settings_deploy_section": "Деплой",
"settings_integrations_section": "Интеграции",
"settings_execution_mode": "Режим выполнения",
"settings_autocommit": "Автокоммит",
"settings_autocommit_hint": "— git commit после pipeline"
}, },
"escalation": { "escalation": {
"watchdog_blocked": "Watchdog: задача {task_id} заблокирована — {reason}", "watchdog_blocked": "Watchdog: задача {task_id} заблокирована — {reason}",

View file

@ -2,7 +2,7 @@
import { ref, onMounted, onUnmounted, computed, watch } from 'vue' import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router' import { useRoute, useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { api, ApiError, type ProjectDetail, type AuditResult, type Phase, type Task, type ProjectEnvironment, type DeployResult, type ProjectLink } from '../api' import { api, ApiError, type ProjectDetail, type AuditResult, type Phase, type Task, type ProjectEnvironment, type DeployResult, type ProjectLink, type ObsidianSyncResult } from '../api'
import Badge from '../components/Badge.vue' import Badge from '../components/Badge.vue'
import Modal from '../components/Modal.vue' import Modal from '../components/Modal.vue'
@ -14,7 +14,7 @@ const { t } = useI18n()
const project = ref<ProjectDetail | null>(null) const project = ref<ProjectDetail | null>(null)
const loading = ref(true) const loading = ref(true)
const error = ref('') const error = ref('')
const activeTab = ref<'tasks' | 'phases' | 'decisions' | 'modules' | 'kanban' | 'environments' | 'links'>('tasks') const activeTab = ref<'tasks' | 'phases' | 'decisions' | 'modules' | 'kanban' | 'environments' | 'links' | 'settings'>('tasks')
// Phases // Phases
const phases = ref<Phase[]>([]) const phases = ref<Phase[]>([])
@ -276,6 +276,99 @@ async function toggleWorktrees() {
} }
} }
// Settings form
const settingsForm = ref({
execution_mode: 'review',
autocommit_enabled: false,
auto_test_enabled: false,
worktrees_enabled: false,
test_command: '',
deploy_host: '',
deploy_path: '',
deploy_runtime: '',
deploy_restart_cmd: '',
deploy_command: '',
obsidian_vault_path: '',
ssh_host: '',
ssh_user: '',
ssh_key_path: '',
ssh_proxy_jump: '',
})
const settingsSaving = ref(false)
const settingsSaveStatus = ref('')
const syncingObsidian = ref(false)
const obsidianSyncResult = ref<ObsidianSyncResult | null>(null)
function loadSettingsForm() {
if (!project.value) return
settingsForm.value = {
execution_mode: project.value.execution_mode ?? 'review',
autocommit_enabled: !!(project.value.autocommit_enabled),
auto_test_enabled: !!(project.value.auto_test_enabled),
worktrees_enabled: !!(project.value.worktrees_enabled),
test_command: project.value.test_command ?? '',
deploy_host: project.value.deploy_host ?? '',
deploy_path: project.value.deploy_path ?? '',
deploy_runtime: project.value.deploy_runtime ?? '',
deploy_restart_cmd: project.value.deploy_restart_cmd ?? '',
deploy_command: project.value.deploy_command ?? '',
obsidian_vault_path: project.value.obsidian_vault_path ?? '',
ssh_host: project.value.ssh_host ?? '',
ssh_user: project.value.ssh_user ?? '',
ssh_key_path: project.value.ssh_key_path ?? '',
ssh_proxy_jump: project.value.ssh_proxy_jump ?? '',
}
}
async function saveSettings() {
settingsSaving.value = true
settingsSaveStatus.value = ''
try {
const updated = await api.patchProject(props.id, {
execution_mode: settingsForm.value.execution_mode,
autocommit_enabled: settingsForm.value.autocommit_enabled,
auto_test_enabled: settingsForm.value.auto_test_enabled,
worktrees_enabled: settingsForm.value.worktrees_enabled,
test_command: settingsForm.value.test_command,
deploy_host: settingsForm.value.deploy_host,
deploy_path: settingsForm.value.deploy_path,
deploy_runtime: settingsForm.value.deploy_runtime,
deploy_restart_cmd: settingsForm.value.deploy_restart_cmd,
deploy_command: settingsForm.value.deploy_command,
obsidian_vault_path: settingsForm.value.obsidian_vault_path,
ssh_host: settingsForm.value.ssh_host,
ssh_user: settingsForm.value.ssh_user,
ssh_key_path: settingsForm.value.ssh_key_path,
ssh_proxy_jump: settingsForm.value.ssh_proxy_jump,
})
if (project.value) {
project.value = { ...project.value, ...updated }
loadMode()
loadAutocommit()
loadAutoTest()
loadWorktrees()
}
settingsSaveStatus.value = t('common.saved')
} catch (e: any) {
settingsSaveStatus.value = `${t('common.error')}: ${e.message}`
} finally {
settingsSaving.value = false
}
}
async function syncObsidianVault() {
syncingObsidian.value = true
obsidianSyncResult.value = null
try {
await api.patchProject(props.id, { obsidian_vault_path: settingsForm.value.obsidian_vault_path })
obsidianSyncResult.value = await api.syncObsidian(props.id)
} catch (e: any) {
settingsSaveStatus.value = `${t('common.error')}: ${e.message}`
} finally {
syncingObsidian.value = false
}
}
// Audit // Audit
const auditLoading = ref(false) const auditLoading = ref(false)
const auditResult = ref<AuditResult | null>(null) const auditResult = ref<AuditResult | null>(null)
@ -504,6 +597,7 @@ async function load() {
loadAutocommit() loadAutocommit()
loadAutoTest() loadAutoTest()
loadWorktrees() loadWorktrees()
loadSettingsForm()
} catch (e: any) { } catch (e: any) {
error.value = e.message error.value = e.message
} finally { } finally {
@ -534,6 +628,9 @@ onMounted(async () => {
const all = await api.projects() const all = await api.projects()
allProjects.value = all.map(p => ({ id: p.id, name: p.name })) allProjects.value = all.map(p => ({ id: p.id, name: p.name }))
} catch {} } catch {}
if (route.query.tab === 'settings') {
activeTab.value = 'settings'
}
}) })
onUnmounted(() => { onUnmounted(() => {
@ -874,13 +971,13 @@ async function addDecision() {
<!-- Tabs --> <!-- Tabs -->
<div class="flex gap-1 mb-4 border-b border-gray-800 flex-wrap"> <div class="flex gap-1 mb-4 border-b border-gray-800 flex-wrap">
<button v-for="tab in (['tasks', 'phases', 'decisions', 'modules', 'kanban', 'environments', 'links'] as const)" :key="tab" <button v-for="tab in (['tasks', 'phases', 'decisions', 'modules', 'kanban', 'environments', 'links', 'settings'] as const)" :key="tab"
@click="activeTab = tab" @click="activeTab = tab"
class="px-4 py-2 text-sm border-b-2 transition-colors" class="px-4 py-2 text-sm border-b-2 transition-colors"
:class="activeTab === tab :class="activeTab === tab
? 'text-gray-200 border-blue-500' ? 'text-gray-200 border-blue-500'
: 'text-gray-500 border-transparent hover:text-gray-300'"> : 'text-gray-500 border-transparent hover:text-gray-300'">
{{ tab === 'tasks' ? t('projectView.tasks_tab') : tab === 'phases' ? t('projectView.phases_tab') : tab === 'decisions' ? t('projectView.decisions_tab') : tab === 'modules' ? t('projectView.modules_tab') : tab === 'kanban' ? t('projectView.kanban_tab') : tab === 'environments' ? t('projectView.environments') : t('projectView.links_tab') }} {{ tab === 'tasks' ? t('projectView.tasks_tab') : tab === 'phases' ? t('projectView.phases_tab') : tab === 'decisions' ? t('projectView.decisions_tab') : tab === 'modules' ? t('projectView.modules_tab') : tab === 'kanban' ? t('projectView.kanban_tab') : tab === 'environments' ? t('projectView.environments') : tab === 'links' ? t('projectView.links_tab') : t('projectView.settings_tab') }}
<span class="text-xs text-gray-600 ml-1"> <span class="text-xs text-gray-600 ml-1">
{{ tab === 'tasks' ? project.tasks.length {{ tab === 'tasks' ? project.tasks.length
: tab === 'phases' ? phases.length : tab === 'phases' ? phases.length
@ -888,7 +985,8 @@ async function addDecision() {
: tab === 'modules' ? project.modules.length : tab === 'modules' ? project.modules.length
: tab === 'environments' ? environments.length : tab === 'environments' ? environments.length
: tab === 'links' ? links.length : tab === 'links' ? links.length
: project.tasks.length }} : tab === 'kanban' ? project.tasks.length
: '' }}
</span> </span>
</button> </button>
</div> </div>
@ -1444,6 +1542,138 @@ async function addDecision() {
</Modal> </Modal>
</div> </div>
<!-- Settings Tab -->
<div v-if="activeTab === 'settings'" class="space-y-6 max-w-2xl">
<!-- Agent Execution Section -->
<div>
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-3">{{ t('projectView.settings_agent_section') }}</p>
<div class="space-y-3">
<div>
<label class="block text-xs text-gray-500 mb-1">{{ t('projectView.settings_execution_mode') }}</label>
<select v-model="settingsForm.execution_mode"
class="w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-sm text-gray-300 focus:outline-none focus:border-gray-500">
<option value="review">review</option>
<option value="auto_complete">auto_complete</option>
</select>
</div>
<label class="flex items-center gap-2 cursor-pointer select-none">
<input type="checkbox" v-model="settingsForm.autocommit_enabled" class="w-4 h-4 rounded border-gray-600 bg-gray-800 accent-blue-500 cursor-pointer" />
<span class="text-sm text-gray-300">{{ t('projectView.settings_autocommit') }}</span>
<span class="text-xs text-gray-500">{{ t('projectView.settings_autocommit_hint') }}</span>
</label>
<label class="flex items-center gap-2 cursor-pointer select-none">
<input type="checkbox" v-model="settingsForm.auto_test_enabled" class="w-4 h-4 rounded border-gray-600 bg-gray-800 accent-blue-500 cursor-pointer" />
<span class="text-sm text-gray-300">{{ t('settings.auto_test') }}</span>
<span class="text-xs text-gray-500">{{ t('settings.auto_test_hint') }}</span>
</label>
<label class="flex items-center gap-2 cursor-pointer select-none">
<input type="checkbox" v-model="settingsForm.worktrees_enabled" class="w-4 h-4 rounded border-gray-600 bg-gray-800 accent-blue-500 cursor-pointer" />
<span class="text-sm text-gray-300">{{ t('settings.worktrees') }}</span>
<span class="text-xs text-gray-500">{{ t('settings.worktrees_hint') }}</span>
</label>
<div>
<label class="block text-xs text-gray-500 mb-1">{{ t('settings.test_command') }}</label>
<input v-model="settingsForm.test_command" type="text" placeholder="make test"
class="w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-sm text-gray-200 font-mono focus:outline-none focus:border-gray-500" />
<p class="text-xs text-gray-600 mt-1">{{ t('settings.test_command_hint') }}</p>
</div>
</div>
</div>
<!-- Deploy Section -->
<div class="pt-4 border-t border-gray-800">
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-3">{{ t('projectView.settings_deploy_section') }}</p>
<div class="space-y-3">
<div>
<label class="block text-xs text-gray-500 mb-1">{{ t('settings.server_host') }}</label>
<input v-model="settingsForm.deploy_host" type="text" placeholder="vdp-prod"
class="w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-sm text-gray-200 font-mono focus:outline-none focus:border-gray-500" />
</div>
<div>
<label class="block text-xs text-gray-500 mb-1">{{ t('settings.project_path_on_server') }}</label>
<input v-model="settingsForm.deploy_path" type="text" placeholder="/srv/myproject"
class="w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-sm text-gray-200 font-mono focus:outline-none focus:border-gray-500" />
</div>
<div>
<label class="block text-xs text-gray-500 mb-1">{{ t('settings.runtime') }}</label>
<select v-model="settingsForm.deploy_runtime"
class="w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-sm text-gray-300 focus:outline-none focus:border-gray-500">
<option value="">{{ t('settings.select_runtime') }}</option>
<option value="docker">docker</option>
<option value="node">node</option>
<option value="python">python</option>
<option value="static">static</option>
</select>
</div>
<div>
<label class="block text-xs text-gray-500 mb-1">{{ t('settings.restart_command') }}</label>
<input v-model="settingsForm.deploy_restart_cmd" type="text" placeholder="optional override command"
class="w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-sm text-gray-200 font-mono focus:outline-none focus:border-gray-500" />
</div>
<div>
<label class="block text-xs text-gray-500 mb-1">{{ t('settings.fallback_command') }}</label>
<input v-model="settingsForm.deploy_command" type="text" placeholder="git push origin main"
class="w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-sm text-gray-200 font-mono focus:outline-none focus:border-gray-500" />
</div>
</div>
</div>
<!-- Integrations Section -->
<div class="pt-4 border-t border-gray-800">
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-3">{{ t('projectView.settings_integrations_section') }}</p>
<div class="space-y-3">
<div>
<label class="block text-xs text-gray-500 mb-1">{{ t('settings.obsidian_vault_path') }}</label>
<div class="flex gap-2">
<input v-model="settingsForm.obsidian_vault_path" type="text" placeholder="/path/to/obsidian/vault"
class="flex-1 bg-gray-900 border border-gray-700 rounded px-3 py-2 text-sm text-gray-200 font-mono focus:outline-none focus:border-gray-500" />
<button @click="syncObsidianVault" :disabled="syncingObsidian || !settingsForm.obsidian_vault_path"
class="px-3 py-1.5 text-sm bg-indigo-900/50 text-indigo-400 border border-indigo-800 rounded hover:bg-indigo-900 disabled:opacity-50">
{{ syncingObsidian ? t('settings.syncing') : t('settings.sync_obsidian') }}
</button>
</div>
<div v-if="obsidianSyncResult" class="mt-2 p-2 bg-gray-900 rounded text-xs text-gray-300 flex gap-3">
<span>{{ obsidianSyncResult.exported_decisions }} decisions</span>
<span>{{ obsidianSyncResult.tasks_updated }} tasks</span>
</div>
</div>
<div>
<label class="block text-xs text-gray-500 mb-1">SSH Host</label>
<input v-model="settingsForm.ssh_host" type="text" placeholder="vdp-prod"
class="w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-sm text-gray-200 font-mono focus:outline-none focus:border-gray-500" />
</div>
<div>
<label class="block text-xs text-gray-500 mb-1">SSH User</label>
<input v-model="settingsForm.ssh_user" type="text" placeholder="root"
class="w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-sm text-gray-200 font-mono focus:outline-none focus:border-gray-500" />
</div>
<div>
<label class="block text-xs text-gray-500 mb-1">SSH Key Path</label>
<input v-model="settingsForm.ssh_key_path" type="text" placeholder="~/.ssh/id_rsa"
class="w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-sm text-gray-200 font-mono focus:outline-none focus:border-gray-500" />
</div>
<div>
<label class="block text-xs text-gray-500 mb-1">SSH ProxyJump</label>
<input v-model="settingsForm.ssh_proxy_jump" type="text" placeholder="jumpt"
class="w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-sm text-gray-200 font-mono focus:outline-none focus:border-gray-500" />
</div>
</div>
</div>
<!-- Save Button -->
<div class="flex items-center gap-3 pt-4 border-t border-gray-800">
<button @click="saveSettings" :disabled="settingsSaving"
class="px-4 py-2 text-sm bg-blue-900/50 text-blue-400 border border-blue-800 rounded hover:bg-blue-900 disabled:opacity-50">
{{ settingsSaving ? t('common.saving') : t('common.save') }}
</button>
<span v-if="settingsSaveStatus" class="text-xs"
:class="settingsSaveStatus.startsWith(t('common.error')) ? 'text-red-400' : 'text-green-400'">
{{ settingsSaveStatus }}
</span>
</div>
</div>
<!-- Add Task Modal --> <!-- Add Task Modal -->
<Modal v-if="showAddTask" title="Add Task" @close="closeAddTaskModal"> <Modal v-if="showAddTask" title="Add Task" @close="closeAddTaskModal">
<form @submit.prevent="addTask" class="space-y-3"> <form @submit.prevent="addTask" class="space-y-3">

View file

@ -1,445 +1,48 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from 'vue' import { ref, onMounted } from 'vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { api, type Project, type ObsidianSyncResult, type ProjectLink } from '../api' import { api, type Project } from '../api'
import Badge from '../components/Badge.vue'
const { t } = useI18n() const { t } = useI18n()
const projects = ref<Project[]>([]) const projects = ref<Project[]>([])
const vaultPaths = ref<Record<string, string>>({}) const loading = ref(true)
const deployCommands = ref<Record<string, string>>({})
const testCommands = ref<Record<string, string>>({})
const autoTestEnabled = ref<Record<string, boolean>>({})
const worktreesEnabled = ref<Record<string, boolean>>({})
const saving = ref<Record<string, boolean>>({})
const savingTest = ref<Record<string, boolean>>({})
const savingAutoTest = ref<Record<string, boolean>>({})
const savingWorktrees = ref<Record<string, boolean>>({})
const syncing = ref<Record<string, boolean>>({})
const saveStatus = ref<Record<string, string>>({})
const saveTestStatus = ref<Record<string, string>>({})
const saveAutoTestStatus = ref<Record<string, string>>({})
const saveWorktreesStatus = ref<Record<string, string>>({})
const syncResults = ref<Record<string, ObsidianSyncResult | null>>({})
const error = ref<string | null>(null) const error = ref<string | null>(null)
// Deploy config
const deployHosts = ref<Record<string, string>>({})
const deployPaths = ref<Record<string, string>>({})
const deployRuntimes = ref<Record<string, string>>({})
const deployRestartCmds = ref<Record<string, string>>({})
const savingDeployConfig = ref<Record<string, boolean>>({})
const saveDeployConfigStatus = ref<Record<string, string>>({})
// Project Links
const projectLinksMap = ref<Record<string, ProjectLink[]>>({})
const linksLoading = ref<Record<string, boolean>>({})
const showAddLinkForm = ref<Record<string, boolean>>({})
const linkForms = ref<Record<string, { to_project: string; link_type: string; description: string }>>({})
const linkSaving = ref<Record<string, boolean>>({})
const linkError = ref<Record<string, string>>({})
const allProjectList = ref<{ id: string; name: string }[]>([])
onMounted(async () => { onMounted(async () => {
try { try {
projects.value = await api.projects() projects.value = await api.projects()
allProjectList.value = projects.value.map(p => ({ id: p.id, name: p.name }))
for (const p of projects.value) {
vaultPaths.value[p.id] = p.obsidian_vault_path ?? ''
deployCommands.value[p.id] = p.deploy_command ?? ''
testCommands.value[p.id] = p.test_command ?? ''
autoTestEnabled.value[p.id] = !!(p.auto_test_enabled)
worktreesEnabled.value[p.id] = !!(p.worktrees_enabled)
deployHosts.value[p.id] = p.deploy_host ?? ''
deployPaths.value[p.id] = p.deploy_path ?? ''
deployRuntimes.value[p.id] = p.deploy_runtime ?? ''
deployRestartCmds.value[p.id] = p.deploy_restart_cmd ?? ''
linkForms.value[p.id] = { to_project: '', link_type: 'depends_on', description: '' }
projectLinksMap.value[p.id] = []
}
await Promise.all(projects.value.map(p => loadLinks(p.id)))
} catch (e: unknown) { } catch (e: unknown) {
error.value = e instanceof Error ? e.message : String(e) error.value = e instanceof Error ? e.message : String(e)
} finally {
loading.value = false
} }
}) })
async function saveDeployConfig(projectId: string) {
savingDeployConfig.value[projectId] = true
saveDeployConfigStatus.value[projectId] = ''
try {
await api.patchProject(projectId, {
deploy_host: deployHosts.value[projectId],
deploy_path: deployPaths.value[projectId],
deploy_runtime: deployRuntimes.value[projectId],
deploy_restart_cmd: deployRestartCmds.value[projectId],
deploy_command: deployCommands.value[projectId],
})
saveDeployConfigStatus.value[projectId] = t('common.saved')
} catch (e: unknown) {
saveDeployConfigStatus.value[projectId] = `${t('common.error')}: ${e instanceof Error ? e.message : String(e)}`
} finally {
savingDeployConfig.value[projectId] = false
}
}
async function saveVaultPath(projectId: string) {
saving.value[projectId] = true
saveStatus.value[projectId] = ''
try {
await api.patchProject(projectId, { obsidian_vault_path: vaultPaths.value[projectId] })
saveStatus.value[projectId] = t('common.saved')
} catch (e: unknown) {
saveStatus.value[projectId] = `${t('common.error')}: ${e instanceof Error ? e.message : String(e)}`
} finally {
saving.value[projectId] = false
}
}
async function saveTestCommand(projectId: string) {
savingTest.value[projectId] = true
saveTestStatus.value[projectId] = ''
try {
await api.patchProject(projectId, { test_command: testCommands.value[projectId] })
saveTestStatus.value[projectId] = t('common.saved')
} catch (e: unknown) {
saveTestStatus.value[projectId] = `${t('common.error')}: ${e instanceof Error ? e.message : String(e)}`
} finally {
savingTest.value[projectId] = false
}
}
async function toggleAutoTest(projectId: string) {
autoTestEnabled.value[projectId] = !autoTestEnabled.value[projectId]
savingAutoTest.value[projectId] = true
saveAutoTestStatus.value[projectId] = ''
try {
await api.patchProject(projectId, { auto_test_enabled: autoTestEnabled.value[projectId] })
saveAutoTestStatus.value[projectId] = t('common.saved')
} catch (e: unknown) {
autoTestEnabled.value[projectId] = !autoTestEnabled.value[projectId]
saveAutoTestStatus.value[projectId] = `${t('common.error')}: ${e instanceof Error ? e.message : String(e)}`
} finally {
savingAutoTest.value[projectId] = false
}
}
async function toggleWorktrees(projectId: string) {
worktreesEnabled.value[projectId] = !worktreesEnabled.value[projectId]
savingWorktrees.value[projectId] = true
saveWorktreesStatus.value[projectId] = ''
try {
await api.patchProject(projectId, { worktrees_enabled: worktreesEnabled.value[projectId] })
saveWorktreesStatus.value[projectId] = t('common.saved')
} catch (e: unknown) {
worktreesEnabled.value[projectId] = !worktreesEnabled.value[projectId]
saveWorktreesStatus.value[projectId] = `${t('common.error')}: ${e instanceof Error ? e.message : String(e)}`
} finally {
savingWorktrees.value[projectId] = false
}
}
async function runSync(projectId: string) {
syncing.value[projectId] = true
syncResults.value[projectId] = null
saveStatus.value[projectId] = ''
try {
await api.patchProject(projectId, { obsidian_vault_path: vaultPaths.value[projectId] })
syncResults.value[projectId] = await api.syncObsidian(projectId)
} catch (e: unknown) {
saveStatus.value[projectId] = `Sync error: ${e instanceof Error ? e.message : String(e)}`
} finally {
syncing.value[projectId] = false
}
}
async function loadLinks(projectId: string) {
linksLoading.value[projectId] = true
try {
projectLinksMap.value[projectId] = await api.projectLinks(projectId)
} catch (e: unknown) {
linkError.value[projectId] = e instanceof Error ? e.message : String(e)
} finally {
linksLoading.value[projectId] = false
}
}
async function addLink(projectId: string) {
const form = linkForms.value[projectId]
if (!form.to_project) { linkError.value[projectId] = t('settings.select_project_error'); return }
linkSaving.value[projectId] = true
linkError.value[projectId] = ''
try {
await api.createProjectLink({
from_project: projectId,
to_project: form.to_project,
type: form.link_type,
description: form.description || undefined,
})
showAddLinkForm.value[projectId] = false
linkForms.value[projectId] = { to_project: '', link_type: 'depends_on', description: '' }
await loadLinks(projectId)
} catch (e: unknown) {
linkError.value[projectId] = e instanceof Error ? e.message : String(e)
} finally {
linkSaving.value[projectId] = false
}
}
async function deleteLink(projectId: string, linkId: number) {
if (!confirm(t('settings.delete_link_confirm'))) return
try {
await api.deleteProjectLink(linkId)
await loadLinks(projectId)
} catch (e: unknown) {
linkError.value[projectId] = e instanceof Error ? e.message : String(e)
}
}
</script> </script>
<template> <template>
<div> <div>
<h1 class="text-xl font-semibold text-gray-100 mb-6">{{ t('settings.title') }}</h1> <h1 class="text-xl font-semibold text-gray-100 mb-2">{{ t('settings.title') }}</h1>
<p class="text-xs text-gray-500 mb-6">{{ t('settings.navigate_hint') }}</p>
<div v-if="error" class="text-red-400 mb-4">{{ error }}</div> <div v-if="loading" class="text-gray-500 text-sm">{{ t('common.loading') }}</div>
<div v-else-if="error" class="text-red-400 mb-4">{{ error }}</div>
<div v-for="project in projects" :key="project.id" class="mb-6 p-4 border border-gray-700 rounded-lg"> <div v-else class="space-y-2">
<div class="flex items-center gap-3 mb-3"> <div v-for="project in projects" :key="project.id"
class="flex items-center justify-between px-4 py-3 border border-gray-700 rounded-lg hover:border-gray-600 transition-colors">
<div class="flex items-center gap-3 min-w-0">
<span class="font-medium text-gray-100">{{ project.name }}</span> <span class="font-medium text-gray-100">{{ project.name }}</span>
<span class="text-xs text-gray-500 font-mono">{{ project.id }}</span> <span class="text-xs text-gray-500 font-mono shrink-0">{{ project.id }}</span>
<Badge :text="project.status" :color="project.status === 'active' ? 'green' : 'gray'" />
<span v-if="project.execution_mode" class="text-xs text-gray-500 shrink-0">{{ project.execution_mode }}</span>
</div> </div>
<router-link
<div class="mb-3"> :to="{ path: `/project/${project.id}`, query: { tab: 'settings' } }"
<label class="block text-xs text-gray-400 mb-1">{{ t('settings.obsidian_vault_path') }}</label> class="px-3 py-1 text-xs bg-gray-800 text-gray-300 border border-gray-700 rounded hover:bg-gray-700 no-underline shrink-0 ml-4">
<input {{ t('settings.open_settings') }}
v-model="vaultPaths[project.id]" </router-link>
type="text"
placeholder="/path/to/obsidian/vault"
class="w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-sm text-gray-200 font-mono focus:outline-none focus:border-gray-500"
/>
</div> </div>
<div class="mb-3">
<label class="block text-xs text-gray-400 mb-1">{{ t('settings.test_command') }}</label>
<input
v-model="testCommands[project.id]"
type="text"
placeholder="make test"
class="w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-sm text-gray-200 font-mono focus:outline-none focus:border-gray-500"
/>
<p class="text-xs text-gray-600 mt-1">{{ t('settings.test_command_hint') }}</p>
</div>
<div class="flex items-center gap-3 flex-wrap mb-3">
<button
@click="saveTestCommand(project.id)"
:disabled="savingTest[project.id]"
class="px-3 py-1.5 text-sm bg-gray-700 hover:bg-gray-600 text-gray-200 rounded disabled:opacity-50"
>
{{ savingTest[project.id] ? t('settings.saving_test') : t('settings.save_test') }}
</button>
<span v-if="saveTestStatus[project.id]" class="text-xs" :class="saveTestStatus[project.id].startsWith('Error') ? 'text-red-400' : 'text-green-400'">
{{ saveTestStatus[project.id] }}
</span>
</div>
<!-- Deploy Config -->
<div class="mb-2 pt-2 border-t border-gray-800">
<p class="text-xs font-semibold text-gray-400 mb-2">{{ t('settings.deploy_config') }}</p>
<div class="mb-2">
<label class="block text-xs text-gray-500 mb-1">{{ t('settings.server_host') }}</label>
<input
v-model="deployHosts[project.id]"
type="text"
placeholder="server host (e.g. vdp-prod)"
class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm text-gray-200 font-mono focus:outline-none focus:border-gray-500"
/>
</div>
<div class="mb-2">
<label class="block text-xs text-gray-500 mb-1">{{ t('settings.project_path_on_server') }}</label>
<input
v-model="deployPaths[project.id]"
type="text"
placeholder="/srv/myproject"
class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm text-gray-200 font-mono focus:outline-none focus:border-gray-500"
/>
</div>
<div class="mb-2">
<label class="block text-xs text-gray-500 mb-1">{{ t('settings.runtime') }}</label>
<select
v-model="deployRuntimes[project.id]"
class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm text-gray-300 focus:outline-none focus:border-gray-500"
>
<option value="">{{ t('settings.select_runtime') }}</option>
<option value="docker">docker</option>
<option value="node">node</option>
<option value="python">python</option>
<option value="static">static</option>
</select>
</div>
<div class="mb-2">
<label class="block text-xs text-gray-500 mb-1">{{ t('settings.restart_command') }}</label>
<input
v-model="deployRestartCmds[project.id]"
type="text"
placeholder="optional override command"
class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm text-gray-200 font-mono focus:outline-none focus:border-gray-500"
/>
</div>
<div class="mb-2">
<label class="block text-xs text-gray-500 mb-1">{{ t('settings.fallback_command') }}</label>
<input
v-model="deployCommands[project.id]"
type="text"
placeholder="git push origin main"
class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm text-gray-200 font-mono focus:outline-none focus:border-gray-500"
/>
</div>
<div class="flex items-center gap-3 flex-wrap mb-3">
<button
@click="saveDeployConfig(project.id)"
:disabled="savingDeployConfig[project.id]"
class="px-3 py-1.5 text-sm bg-teal-900/50 text-teal-400 border border-teal-800 rounded hover:bg-teal-900 disabled:opacity-50"
>
{{ savingDeployConfig[project.id] ? t('settings.saving_deploy') : t('settings.save_deploy_config') }}
</button>
<span v-if="saveDeployConfigStatus[project.id]" class="text-xs" :class="saveDeployConfigStatus[project.id].startsWith('Error') ? 'text-red-400' : 'text-green-400'">
{{ saveDeployConfigStatus[project.id] }}
</span>
</div>
</div>
<!-- Project Links -->
<div class="mb-2 pt-2 border-t border-gray-800">
<div class="flex items-center justify-between mb-2">
<p class="text-xs font-semibold text-gray-400">{{ t('settings.project_links') }}</p>
<button
@click="showAddLinkForm[project.id] = !showAddLinkForm[project.id]"
class="px-2 py-0.5 text-xs bg-gray-800 text-gray-300 border border-gray-700 rounded hover:bg-gray-700"
>
{{ t('settings.add_link') }}
</button>
</div>
<p v-if="linksLoading[project.id]" class="text-xs text-gray-500">{{ t('settings.links_loading') }}</p>
<p v-else-if="linkError[project.id]" class="text-xs text-red-400">{{ linkError[project.id] }}</p>
<div v-else-if="!projectLinksMap[project.id]?.length" class="text-xs text-gray-600">{{ t('settings.no_links') }}</div>
<div v-else class="space-y-1 mb-2">
<div v-for="link in projectLinksMap[project.id]" :key="link.id"
class="flex items-center gap-2 px-2 py-1 bg-gray-900 border border-gray-800 rounded text-xs">
<span class="text-gray-500 font-mono">{{ link.from_project }}</span>
<span class="text-gray-600"></span>
<span class="text-gray-500 font-mono">{{ link.to_project }}</span>
<span class="px-1 bg-indigo-900/30 text-indigo-400 border border-indigo-800 rounded">{{ link.type }}</span>
<span v-if="link.description" class="text-gray-600">{{ link.description }}</span>
<button @click="deleteLink(project.id, link.id)"
class="ml-auto text-red-500 hover:text-red-400 bg-transparent border-none cursor-pointer text-xs shrink-0">
</button>
</div>
</div>
<form v-if="showAddLinkForm[project.id]" @submit.prevent="addLink(project.id)" class="space-y-2 p-2 bg-gray-900 border border-gray-800 rounded">
<div>
<label class="block text-[10px] text-gray-500 mb-0.5">From (current)</label>
<input :value="project.id" disabled class="w-full bg-gray-800 border border-gray-700 rounded px-2 py-1 text-xs text-gray-500 font-mono" />
</div>
<div>
<label class="block text-[10px] text-gray-500 mb-0.5">To project</label>
<select v-model="linkForms[project.id].to_project" required
class="w-full bg-gray-800 border border-gray-700 rounded px-2 py-1 text-xs text-gray-300">
<option value="">{{ t('settings.select_project') }}</option>
<option v-for="p in allProjectList.filter(p => p.id !== project.id)" :key="p.id" :value="p.id">{{ p.id }} {{ p.name }}</option>
</select>
</div>
<div>
<label class="block text-[10px] text-gray-500 mb-0.5">Link type</label>
<select v-model="linkForms[project.id].link_type"
class="w-full bg-gray-800 border border-gray-700 rounded px-2 py-1 text-xs text-gray-300">
<option value="depends_on">depends_on</option>
<option value="triggers">triggers</option>
<option value="related_to">related_to</option>
</select>
</div>
<div>
<label class="block text-[10px] text-gray-500 mb-0.5">Description (optional)</label>
<input v-model="linkForms[project.id].description" placeholder="e.g. API used by frontend"
class="w-full bg-gray-800 border border-gray-700 rounded px-2 py-1 text-xs text-gray-200 placeholder-gray-600" />
</div>
<div class="flex gap-2">
<button type="submit" :disabled="linkSaving[project.id]"
class="px-3 py-1 text-xs bg-blue-900/50 text-blue-400 border border-blue-800 rounded hover:bg-blue-900 disabled:opacity-50">
{{ linkSaving[project.id] ? t('settings.saving_link') : t('common.add') }}
</button>
<button type="button" @click="showAddLinkForm[project.id] = false; linkError[project.id] = ''"
class="px-3 py-1 text-xs text-gray-500 hover:text-gray-300 bg-transparent border-none cursor-pointer">
{{ t('settings.cancel_link') }}
</button>
</div>
</form>
</div>
<div class="flex items-center gap-3 mb-3">
<label class="flex items-center gap-2 cursor-pointer select-none">
<input
type="checkbox"
:checked="autoTestEnabled[project.id]"
@change="toggleAutoTest(project.id)"
:disabled="savingAutoTest[project.id]"
class="w-4 h-4 rounded border-gray-600 bg-gray-800 accent-blue-500 cursor-pointer disabled:opacity-50"
/>
<span class="text-sm text-gray-300">{{ t('settings.auto_test') }}</span>
<span class="text-xs text-gray-500">{{ t('settings.auto_test_hint') }}</span>
</label>
<span v-if="saveAutoTestStatus[project.id]" class="text-xs" :class="saveAutoTestStatus[project.id].startsWith('Error') ? 'text-red-400' : 'text-green-400'">
{{ saveAutoTestStatus[project.id] }}
</span>
</div>
<div class="flex items-center gap-3 mb-3">
<label class="flex items-center gap-2 cursor-pointer select-none">
<input
type="checkbox"
:checked="worktreesEnabled[project.id]"
@change="toggleWorktrees(project.id)"
:disabled="savingWorktrees[project.id]"
class="w-4 h-4 rounded border-gray-600 bg-gray-800 accent-blue-500 cursor-pointer disabled:opacity-50"
/>
<span class="text-sm text-gray-300">{{ t('settings.worktrees') }}</span>
<span class="text-xs text-gray-500">{{ t('settings.worktrees_hint') }}</span>
</label>
<span v-if="saveWorktreesStatus[project.id]" class="text-xs" :class="saveWorktreesStatus[project.id].startsWith('Error') ? 'text-red-400' : 'text-green-400'">
{{ saveWorktreesStatus[project.id] }}
</span>
</div>
<div class="flex items-center gap-3 flex-wrap">
<button
@click="saveVaultPath(project.id)"
:disabled="saving[project.id]"
class="px-3 py-1.5 text-sm bg-gray-700 hover:bg-gray-600 text-gray-200 rounded disabled:opacity-50"
>
{{ saving[project.id] ? t('settings.saving_vault') : t('settings.save_vault') }}
</button>
<button
@click="runSync(project.id)"
:disabled="syncing[project.id] || !vaultPaths[project.id]"
class="px-3 py-1.5 text-sm bg-indigo-700 hover:bg-indigo-600 text-white rounded disabled:opacity-50"
>
{{ syncing[project.id] ? t('settings.syncing') : t('settings.sync_obsidian') }}
</button>
<span v-if="saveStatus[project.id]" class="text-xs" :class="saveStatus[project.id].startsWith('Error') ? 'text-red-400' : 'text-green-400'">
{{ saveStatus[project.id] }}
</span>
</div>
<div v-if="syncResults[project.id]" class="mt-3 p-3 bg-gray-900 rounded text-xs text-gray-300">
<div>Exported: <span class="text-green-400 font-medium">{{ syncResults[project.id]!.exported_decisions }}</span> decisions</div>
<div>Updated: <span class="text-green-400 font-medium">{{ syncResults[project.id]!.tasks_updated }}</span> tasks</div>
<div v-if="syncResults[project.id]!.errors.length > 0" class="mt-1">
<div v-for="err in syncResults[project.id]!.errors" :key="err" class="text-red-400">{{ err }}</div>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>

View file

@ -1,18 +1,20 @@
/** /**
* KIN-103: Тесты worktrees_enabled toggle в SettingsView * KIN-120: Тесты SettingsView навигатор по настройкам проектов
*
* После рефакторинга SettingsView стал навигатором:
* показывает список проектов и ссылки на /project/{id}?tab=settings.
* Детальные настройки каждого проекта переехали в ProjectView вкладка Settings.
* *
* Проверяет: * Проверяет:
* 1. Интерфейс Project содержит worktrees_enabled: number | null * 1. Загрузка и отображение списка проектов
* 2. patchProject принимает worktrees_enabled?: boolean * 2. Имя и id проекта видны
* 3. Инициализацию из числовых значений (0, 1, null) !!() * 3. Ссылки ведут на /project/{id}?tab=settings
* 4. Toggle вызывает PATCH с true/false * 4. execution_mode отображается если задан
* 5. Откат при ошибке PATCH
* 6. Checkbox disabled пока идёт сохранение
* 7. Статусные сообщения (Saved / Error)
*/ */
import { describe, it, expect, vi, beforeEach } from 'vitest' import { describe, it, expect, vi, beforeEach } from 'vitest'
import { mount, flushPromises } from '@vue/test-utils' import { mount, flushPromises } from '@vue/test-utils'
import { createRouter, createMemoryHistory } from 'vue-router'
import SettingsView from '../SettingsView.vue' import SettingsView from '../SettingsView.vue'
vi.mock('../../api', async (importOriginal) => { vi.mock('../../api', async (importOriginal) => {
@ -21,9 +23,6 @@ vi.mock('../../api', async (importOriginal) => {
...actual, ...actual,
api: { api: {
projects: vi.fn(), projects: vi.fn(),
patchProject: vi.fn(),
syncObsidian: vi.fn(),
projectLinks: vi.fn().mockResolvedValue([]),
}, },
} }
}) })
@ -37,7 +36,7 @@ const BASE_PROJECT = {
status: 'active', status: 'active',
priority: 5, priority: 5,
tech_stack: ['python'], tech_stack: ['python'],
execution_mode: null, execution_mode: null as string | null,
autocommit_enabled: null, autocommit_enabled: null,
auto_test_enabled: null, auto_test_enabled: null,
worktrees_enabled: null as number | null, worktrees_enabled: null as number | null,
@ -62,142 +61,65 @@ const BASE_PROJECT = {
description: null, description: null,
} }
function makeRouter() {
return createRouter({
history: createMemoryHistory(),
routes: [
{ path: '/settings', component: SettingsView },
{ path: '/project/:id', component: { template: '<div />' } },
],
})
}
beforeEach(() => { beforeEach(() => {
vi.clearAllMocks() vi.clearAllMocks()
vi.mocked(api.patchProject).mockResolvedValue(BASE_PROJECT as any)
}) })
async function mountSettings(overrides: Partial<typeof BASE_PROJECT> = {}) { async function mountSettings(overrides: Partial<typeof BASE_PROJECT> = {}) {
const project = { ...BASE_PROJECT, ...overrides } const project = { ...BASE_PROJECT, ...overrides }
vi.mocked(api.projects).mockResolvedValue([project as any]) vi.mocked(api.projects).mockResolvedValue([project as any])
const wrapper = mount(SettingsView) const router = makeRouter()
await router.push('/settings')
const wrapper = mount(SettingsView, { global: { plugins: [router] } })
await flushPromises() await flushPromises()
return wrapper return wrapper
} }
function findWorktreesCheckbox(wrapper: ReturnType<typeof mount>) { describe('SettingsView — навигатор', () => {
const labels = wrapper.findAll('label') it('показывает имя проекта', async () => {
const worktreesLabel = labels.find(l => l.text().includes('Worktrees')) const wrapper = await mountSettings()
const checkbox = worktreesLabel?.find('input[type="checkbox"]') expect(wrapper.text()).toContain('Test Project')
// decision #544: assertion безусловная — ложный зелёный недопустим
expect(checkbox?.exists()).toBe(true)
return checkbox!
}
// ─────────────────────────────────────────────────────────────
// 1. Инициализация из числовых значений
// ─────────────────────────────────────────────────────────────
describe('worktreesEnabled — инициализация', () => {
it('worktrees_enabled=1 → checkbox checked', async () => {
const wrapper = await mountSettings({ worktrees_enabled: 1 })
const checkbox = findWorktreesCheckbox(wrapper)
expect((checkbox.element as HTMLInputElement).checked).toBe(true)
}) })
it('worktrees_enabled=0 → checkbox unchecked', async () => { it('показывает id проекта', async () => {
const wrapper = await mountSettings({ worktrees_enabled: 0 }) const wrapper = await mountSettings()
const checkbox = findWorktreesCheckbox(wrapper) expect(wrapper.text()).toContain('proj-1')
expect((checkbox.element as HTMLInputElement).checked).toBe(false)
}) })
it('worktrees_enabled=null → checkbox unchecked', async () => { it('содержит ссылку на страницу настроек проекта', async () => {
const wrapper = await mountSettings({ worktrees_enabled: null }) const wrapper = await mountSettings()
const checkbox = findWorktreesCheckbox(wrapper) const links = wrapper.findAll('a')
expect((checkbox.element as HTMLInputElement).checked).toBe(false) expect(links.length).toBeGreaterThan(0)
}) const settingsLink = links.find(l => l.attributes('href')?.includes('proj-1'))
expect(settingsLink?.exists()).toBe(true)
expect(settingsLink?.attributes('href')).toContain('settings')
}) })
// ───────────────────────────────────────────────────────────── it('ссылка ведёт на /project/{id} с tab=settings', async () => {
// 2. Toggle → patchProject вызывается с корректным значением const wrapper = await mountSettings()
// ───────────────────────────────────────────────────────────── const link = wrapper.find('a[href*="proj-1"]')
describe('toggleWorktrees — вызов patchProject', () => { expect(link.exists()).toBe(true)
it('toggle с unchecked → patchProject({ worktrees_enabled: true })', async () => { expect(link.attributes('href')).toMatch(/\/project\/proj-1/)
const wrapper = await mountSettings({ worktrees_enabled: 0 }) expect(link.attributes('href')).toContain('settings')
await findWorktreesCheckbox(wrapper).trigger('change')
await flushPromises()
expect(vi.mocked(api.patchProject)).toHaveBeenCalledWith(
'proj-1',
expect.objectContaining({ worktrees_enabled: true }),
)
}) })
it('toggle с checked → patchProject({ worktrees_enabled: false }), не undefined (decision #524)', async () => { it('показывает execution_mode если задан', async () => {
const wrapper = await mountSettings({ worktrees_enabled: 1 }) const wrapper = await mountSettings({ execution_mode: 'auto_complete' })
await findWorktreesCheckbox(wrapper).trigger('change') expect(wrapper.text()).toContain('auto_complete')
await flushPromises()
const payload = vi.mocked(api.patchProject).mock.calls[0][1] as any
expect(payload.worktrees_enabled).toBe(false)
expect(payload.worktrees_enabled).not.toBeUndefined()
})
}) })
// ───────────────────────────────────────────────────────────── it('не показывает execution_mode если null', async () => {
// 3. Откат при ошибке PATCH const wrapper = await mountSettings({ execution_mode: null })
// ───────────────────────────────────────────────────────────── expect(wrapper.text()).not.toContain('auto_complete')
describe('toggleWorktrees — откат при ошибке PATCH', () => {
it('ошибка при включении: checkbox откатывается обратно к unchecked', async () => {
vi.mocked(api.patchProject).mockRejectedValueOnce(new Error('network error'))
const wrapper = await mountSettings({ worktrees_enabled: 0 })
await findWorktreesCheckbox(wrapper).trigger('change')
await flushPromises()
expect((findWorktreesCheckbox(wrapper).element as HTMLInputElement).checked).toBe(false)
})
it('ошибка при выключении: checkbox откатывается обратно к checked', async () => {
vi.mocked(api.patchProject).mockRejectedValueOnce(new Error('server error'))
const wrapper = await mountSettings({ worktrees_enabled: 1 })
await findWorktreesCheckbox(wrapper).trigger('change')
await flushPromises()
expect((findWorktreesCheckbox(wrapper).element as HTMLInputElement).checked).toBe(true)
})
})
// ─────────────────────────────────────────────────────────────
// 4. Disabled во время сохранения
// ─────────────────────────────────────────────────────────────
describe('toggleWorktrees — disabled во время сохранения', () => {
it('checkbox disabled пока идёт PATCH, enabled после завершения', async () => {
let resolveRequest!: (v: any) => void
vi.mocked(api.patchProject).mockImplementationOnce(
() => new Promise(resolve => { resolveRequest = resolve }),
)
const wrapper = await mountSettings({ worktrees_enabled: 0 })
const checkbox = findWorktreesCheckbox(wrapper)
await checkbox.trigger('change')
// savingWorktrees = true → checkbox должен быть disabled
expect((checkbox.element as HTMLInputElement).disabled).toBe(true)
resolveRequest(BASE_PROJECT)
await flushPromises()
expect((checkbox.element as HTMLInputElement).disabled).toBe(false)
})
})
// ─────────────────────────────────────────────────────────────
// 5. Статусные сообщения
// ─────────────────────────────────────────────────────────────
describe('toggleWorktrees — статусное сообщение', () => {
it('успех → показывает "Saved"', async () => {
const wrapper = await mountSettings({ worktrees_enabled: 0 })
await findWorktreesCheckbox(wrapper).trigger('change')
await flushPromises()
expect(wrapper.text()).toContain('Saved')
})
it('ошибка → показывает "Error: <message>"', async () => {
vi.mocked(api.patchProject).mockRejectedValueOnce(new Error('connection timeout'))
const wrapper = await mountSettings({ worktrees_enabled: 0 })
await findWorktreesCheckbox(wrapper).trigger('change')
await flushPromises()
expect(wrapper.text()).toContain('Error: connection timeout')
}) })
}) })