kin: auto-commit after pipeline

web/frontend/src/__tests__/execution-mode-unification.test.ts

@@ -176,13 +176,14 @@ describe('KIN-FIX-002: execution_mode унификация на "auto_complete"'
       })
       await flushPromises()
 
-      // Найти и кликнуть кнопку тоггла режима
+      // Открываем ⚙ Mode меню и кликаем по кнопке авто/ревью
-      const toggleBtn = wrapper.findAll('button').find(b =>
+      const trigger = wrapper.find('[data-testid="mode-menu-trigger"]')
-        b.text().includes('Auto') || b.text().includes('Review')
+      if (trigger.exists()) {
-      )
+        await trigger.trigger('click')
+        await flushPromises()
 
-      if (toggleBtn) {
+        const autoBtn = wrapper.find('[data-testid="mode-toggle-auto"]')
-        await toggleBtn.trigger('click')
+        await autoBtn.trigger('click')
         await flushPromises()
 
         // Проверяем, что localStorage содержит 'auto_complete', не 'auto'
@@ -547,11 +548,10 @@ describe('KIN-097: runTask синхронизирует execution_mode с тог
     })
     await flushPromises()
 
-    // Тоггл должен показывать Auto
+    // Триггер ⚙ Mode должен иметь data-mode="auto" при execution_mode=auto_complete
-    const toggleBtn = wrapper.findAll('button').find(b =>
+    const trigger = wrapper.find('[data-testid="mode-menu-trigger"]')
-      b.text().includes('Auto') || b.text().includes('Review')
+    expect(trigger.exists()).toBe(true)
-    )
+    expect(trigger.attributes('data-mode')).toBe('auto')
-    expect(toggleBtn!.text()).toContain('Auto')
 
     // DB переключается на review (например, другой клиент изменил режим)
     vi.mocked(api.project).mockResolvedValue(
@@ -561,17 +561,14 @@ describe('KIN-097: runTask синхронизирует execution_mode с тог
     // После load() тоггл должен обновиться на Review
     // Имитируем внешний load (например, после создания задачи)
     vi.mocked(api.patchProject).mockResolvedValue({ execution_mode: 'review' } as any)
-    // Триггерим reload через toggleAutocommit (который вызывает patchProject, но не load)
+    // Вместо этого напрямую проверим что при новом mount с review — data-mode="review"
-    // Вместо этого напрямую проверим что при новом mount с review — кнопка Review
     const wrapper2 = mount(ProjectView, {
       props: { id: 'KIN' },
       global: { plugins: [router] },
     })
     await flushPromises()
 
-    const toggleBtn2 = wrapper2.findAll('button').find(b =>
+    const trigger2 = wrapper2.find('[data-testid="mode-menu-trigger"]')
-      b.text().includes('Auto') || b.text().includes('Review')
+    expect(trigger2.attributes('data-mode')).toBe('review')
-    )
-    expect(toggleBtn2!.text()).toContain('Review')
   })
 })

web/frontend/src/__tests__/filter-persistence.test.ts

@@ -517,7 +517,14 @@ describe('KIN-047: TaskDetail — Approve/Reject в статусе review', () =
 // ─────────────────────────────────────────────────────────────
 
 describe('KIN-065: ProjectView — Autocommit toggle', () => {
-  it('Кнопка Autocommit присутствует в DOM', async () => {
+  async function openModeMenu(wrapper: ReturnType<typeof mount>) {
+    const trigger = wrapper.find('[data-testid="mode-menu-trigger"]')
+    await trigger.trigger('click')
+    await flushPromises()
+    return wrapper.find('[data-testid="mode-toggle-autocommit"]')
+  }
+
+  it('Кнопка Autocommit присутствует в меню ⚙ Mode', async () => {
     const router = makeRouter()
     await router.push('/project/KIN')
 
@@ -527,8 +534,8 @@ describe('KIN-065: ProjectView — Autocommit toggle', () => {
     })
     await flushPromises()
 
-    const btn = wrapper.findAll('button').find(b => b.text().includes('Autocommit'))
+    const btn = await openModeMenu(wrapper)
-    expect(btn?.exists()).toBe(true)
+    expect(btn.exists()).toBe(true)
   })
 
   it('Кнопка имеет title "Autocommit: off" когда autocommit_enabled=0', async () => {
@@ -542,8 +549,8 @@ describe('KIN-065: ProjectView — Autocommit toggle', () => {
     })
     await flushPromises()
 
-    const btn = wrapper.findAll('button').find(b => b.text().includes('Autocommit'))
+    const btn = await openModeMenu(wrapper)
-    expect(btn?.attributes('title')).toBe('Autocommit: off')
+    expect(btn.attributes('title')).toBe('Autocommit: off')
   })
 
   it('Кнопка имеет title "Autocommit: on..." когда autocommit_enabled=1', async () => {
@@ -557,8 +564,8 @@ describe('KIN-065: ProjectView — Autocommit toggle', () => {
     })
     await flushPromises()
 
-    const btn = wrapper.findAll('button').find(b => b.text().includes('Autocommit'))
+    const btn = await openModeMenu(wrapper)
-    expect(btn?.attributes('title')).toContain('Autocommit: on')
+    expect(btn.attributes('title')).toContain('Autocommit: on')
   })
 
   it('Клик по кнопке вызывает patchProject с autocommit_enabled=true (включение)', async () => {
@@ -574,8 +581,8 @@ describe('KIN-065: ProjectView — Autocommit toggle', () => {
     })
     await flushPromises()
 
-    const btn = wrapper.findAll('button').find(b => b.text().includes('Autocommit'))
+    const btn = await openModeMenu(wrapper)
-    await btn!.trigger('click')
+    await btn.trigger('click')
     await flushPromises()
 
     expect(api.patchProject).toHaveBeenCalledWith('KIN', { autocommit_enabled: true })
@@ -594,8 +601,8 @@ describe('KIN-065: ProjectView — Autocommit toggle', () => {
     })
     await flushPromises()
 
-    const btn = wrapper.findAll('button').find(b => b.text().includes('Autocommit'))
+    const btn = await openModeMenu(wrapper)
-    await btn!.trigger('click')
+    await btn.trigger('click')
     await flushPromises()
 
     expect(api.patchProject).toHaveBeenCalledWith('KIN', { autocommit_enabled: false })
@@ -616,8 +623,8 @@ describe('KIN-065: ProjectView — Autocommit toggle', () => {
     })
     await flushPromises()
 
-    const btn = wrapper.findAll('button').find(b => b.text().includes('Autocommit'))
+    const btn = await openModeMenu(wrapper)
-    await btn!.trigger('click')
+    await btn.trigger('click')
     await flushPromises()
 
     // Catch-блок установил error.value → компонент показывает сообщение об ошибке

web/frontend/src/__tests__/kin-ui-028-action-banner-vertical-pipeline.test.ts

@@ -0,0 +1,455 @@
+/**
+ * KIN-UI-028: Тесты для action-banner и vertical pipeline в TaskDetail.vue
+ *
+ * Feature 1: Action-banner при status='review' && !autoMode
+ *   - Показывается при review + execution_mode=review (autoMode=false)
+ *   - Скрывается при autoMode=true (execution_mode=auto_complete)
+ *   - Скрывается при status != review
+ *   - Кнопки Approve/Revise/Reject вызывают корректные обработчики
+ *   - Кнопка Auto mode вызывает toggleMode → api.patchTask
+ *
+ * Feature 2: Vertical timeline при pipeline_steps.length > 5
+ *   - ≤5 шагов → горизонтальный скролл (overflow-x-auto)
+ *   - >5 шагов → вертикальный timeline с chevron
+ *   - Иконки: success=true/1 → ✓ green, success=false/0 → ✗ red, null → ● blue
+ *   - Поля роли, duration_seconds, cost_usd отображаются
+ *   - Chevron переключается по клику
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import { createRouter, createMemoryHistory } from 'vue-router'
+import * as fs from 'node:fs'
+import * as path from 'node:path'
+import enJson from '../locales/en.json'
+import ruJson from '../locales/ru.json'
+import TaskDetail from '../views/TaskDetail.vue'
+
+vi.mock('../api', () => ({
+  api: {
+    taskFull: vi.fn(),
+    patchTask: vi.fn(),
+    runTask: vi.fn(),
+    approveTask: vi.fn(),
+    rejectTask: vi.fn(),
+    reviseTask: vi.fn(),
+    followupTask: vi.fn(),
+    deployProject: vi.fn(),
+    getAttachments: vi.fn(),
+    resolveAction: vi.fn(),
+  },
+}))
+
+import { api } from '../api'
+
+const localStorageMock = (() => {
+  let store: Record<string, string> = {}
+  return {
+    getItem: (k: string) => store[k] ?? null,
+    setItem: (k: string, v: string) => { store[k] = v },
+    removeItem: (k: string) => { delete store[k] },
+    clear: () => { store = {} },
+  }
+})()
+Object.defineProperty(globalThis, 'localStorage', { value: localStorageMock, configurable: true })
+
+const Stub = { template: '<div />' }
+
+function makeRouter() {
+  return createRouter({
+    history: createMemoryHistory(),
+    routes: [
+      { path: '/', component: Stub },
+      { path: '/task/:id', component: TaskDetail, props: true },
+    ],
+  })
+}
+
+function makeStep(id: number, role: string, success: boolean | number | null = true, overrides: Record<string, unknown> = {}): Record<string, unknown> {
+  return {
+    id,
+    agent_role: role,
+    success,
+    output_summary: null,
+    duration_seconds: 10,
+    tokens_used: 500,
+    cost_usd: 0.01,
+    created_at: '2026-01-01T00:00:00',
+    ...overrides,
+  }
+}
+
+function makeTask(overrides: Record<string, unknown> = {}): Record<string, unknown> {
+  return {
+    id: 'KIN-UI-028',
+    project_id: 'KIN',
+    title: 'Test Task',
+    status: 'review',
+    priority: 5,
+    assigned_role: null,
+    parent_task_id: null,
+    brief: null,
+    spec: null,
+    execution_mode: 'review',
+    blocked_reason: null,
+    dangerously_skipped: null,
+    category: null,
+    acceptance_criteria: null,
+    created_at: '2026-01-01',
+    updated_at: '2026-01-01',
+    pipeline_steps: [],
+    related_decisions: [],
+    pending_actions: [],
+    pipeline_id: null,
+    project_deploy_command: null,
+    project_deploy_runtime: null,
+    ...overrides,
+  }
+}
+
+async function mountTask(taskData: Record<string, unknown>) {
+  vi.mocked(api.taskFull).mockResolvedValue(taskData as any)
+  const router = makeRouter()
+  await router.push('/task/KIN-UI-028')
+  const wrapper = mount(TaskDetail, {
+    props: { id: 'KIN-UI-028' },
+    global: { plugins: [router] },
+  })
+  await flushPromises()
+  return wrapper
+}
+
+beforeEach(() => {
+  localStorageMock.clear()
+  vi.clearAllMocks()
+  vi.mocked(api.getAttachments).mockResolvedValue([])
+})
+
+// ============================================================================
+// Feature 1: Action-banner — i18n ключи
+// ============================================================================
+
+describe('KIN-UI-028 Feature 1: i18n ключи для banner в en.json', () => {
+  it('ключ taskDetail.review_required присутствует в en.json', () => {
+    expect((enJson.taskDetail as Record<string, unknown>).review_required).toBeDefined()
+  })
+
+  it('ключ taskDetail.banner_auto_mode присутствует в en.json', () => {
+    expect((enJson.taskDetail as Record<string, unknown>).banner_auto_mode).toBeDefined()
+  })
+})
+
+describe('KIN-UI-028 Feature 1: i18n ключи для banner в ru.json', () => {
+  it('ключ taskDetail.review_required присутствует в ru.json', () => {
+    expect((ruJson.taskDetail as Record<string, unknown>).review_required).toBeDefined()
+  })
+
+  it('ключ taskDetail.banner_auto_mode присутствует в ru.json', () => {
+    expect((ruJson.taskDetail as Record<string, unknown>).banner_auto_mode).toBeDefined()
+  })
+})
+
+// ============================================================================
+// Feature 1: Action-banner — структура шаблона
+// ============================================================================
+
+describe('KIN-UI-028 Feature 1: Action-banner в шаблоне TaskDetail.vue', () => {
+  it('banner имеет v-if с условием task.status === review && !autoMode', () => {
+    const source = fs.readFileSync(path.resolve(__dirname, '../views/TaskDetail.vue'), 'utf-8')
+    expect(source).toContain("task.status === 'review' && !autoMode")
+  })
+
+  it('banner использует ключ taskDetail.review_required', () => {
+    const source = fs.readFileSync(path.resolve(__dirname, '../views/TaskDetail.vue'), 'utf-8')
+    expect(source).toContain("taskDetail.review_required")
+  })
+
+  it('banner использует ключ taskDetail.banner_auto_mode', () => {
+    const source = fs.readFileSync(path.resolve(__dirname, '../views/TaskDetail.vue'), 'utf-8')
+    expect(source).toContain("taskDetail.banner_auto_mode")
+  })
+})
+
+// ============================================================================
+// Feature 1: Action-banner — видимость
+// ============================================================================
+
+describe('KIN-UI-028 Feature 1: Action-banner виден при status=review, autoMode=false', () => {
+  it('banner показывается при status=review и execution_mode=review', async () => {
+    const wrapper = await mountTask(makeTask({ status: 'review', execution_mode: 'review' }))
+    expect(wrapper.html()).toContain('Review required')
+  })
+
+  it('banner показывается при status=review и execution_mode=null (review-fallback)', async () => {
+    const wrapper = await mountTask(makeTask({ status: 'review', execution_mode: null }))
+    expect(wrapper.html()).toContain('Review required')
+  })
+})
+
+describe('KIN-UI-028 Feature 1: Action-banner скрыт при autoMode=true', () => {
+  it('banner отсутствует при status=review и execution_mode=auto_complete', async () => {
+    const wrapper = await mountTask(makeTask({ status: 'review', execution_mode: 'auto_complete' }))
+    expect(wrapper.html()).not.toContain('Review required')
+  })
+})
+
+describe('KIN-UI-028 Feature 1: Action-banner скрыт при status != review', () => {
+  it('banner отсутствует при status=pending', async () => {
+    const wrapper = await mountTask(makeTask({ status: 'pending', execution_mode: 'review' }))
+    expect(wrapper.html()).not.toContain('Review required')
+  })
+
+  it('banner отсутствует при status=done', async () => {
+    const wrapper = await mountTask(makeTask({ status: 'done', execution_mode: 'review' }))
+    expect(wrapper.html()).not.toContain('Review required')
+  })
+
+  it('banner отсутствует при status=in_progress', async () => {
+    const wrapper = await mountTask(makeTask({ status: 'in_progress', execution_mode: 'review' }))
+    expect(wrapper.html()).not.toContain('Review required')
+  })
+
+  it('banner отсутствует при status=blocked', async () => {
+    const wrapper = await mountTask(makeTask({ status: 'blocked', execution_mode: 'review' }))
+    expect(wrapper.html()).not.toContain('Review required')
+  })
+})
+
+// ============================================================================
+// Feature 1: Action-banner — обработчики кнопок
+// ============================================================================
+
+describe('KIN-UI-028 Feature 1: Action-banner кнопка Approve открывает Approve Modal', () => {
+  it('клик кнопки Approve в banner открывает модальное окно', async () => {
+    const wrapper = await mountTask(makeTask({ status: 'review', execution_mode: 'review' }))
+    const buttons = wrapper.findAll('button')
+    const approveBtn = buttons.find(b => b.text().includes('Approve'))
+    expect(approveBtn?.exists()).toBe(true)
+    await approveBtn!.trigger('click')
+    expect(wrapper.html()).toContain('Approve Task')
+  })
+})
+
+describe('KIN-UI-028 Feature 1: Action-banner кнопка Revise открывает Revise Modal', () => {
+  it('клик кнопки Revise в banner открывает модальное окно', async () => {
+    const wrapper = await mountTask(makeTask({ status: 'review', execution_mode: 'review' }))
+    const buttons = wrapper.findAll('button')
+    const reviseBtn = buttons.find(b => b.text().includes('Revise'))
+    expect(reviseBtn?.exists()).toBe(true)
+    await reviseBtn!.trigger('click')
+    // Modal title uses t('taskDetail.send_to_revision') = "🔄 Send for revision"
+    expect(wrapper.html()).toContain('revision')
+  })
+})
+
+describe('KIN-UI-028 Feature 1: Action-banner кнопка Reject открывает Reject Modal', () => {
+  it('клик кнопки Reject в banner открывает модальное окно', async () => {
+    const wrapper = await mountTask(makeTask({ status: 'review', execution_mode: 'review' }))
+    const buttons = wrapper.findAll('button')
+    const rejectBtn = buttons.find(b => b.text().includes('Reject'))
+    expect(rejectBtn?.exists()).toBe(true)
+    await rejectBtn!.trigger('click')
+    expect(wrapper.html()).toContain('Reject Task')
+  })
+})
+
+describe('KIN-UI-028 Feature 1: Action-banner кнопка Auto mode вызывает toggleMode', () => {
+  it('клик Auto mode в banner вызывает api.patchTask с execution_mode=auto_complete', async () => {
+    vi.mocked(api.patchTask).mockResolvedValue(makeTask({ status: 'review', execution_mode: 'auto_complete' }) as any)
+    const wrapper = await mountTask(makeTask({ status: 'review', execution_mode: 'review' }))
+    const buttons = wrapper.findAll('button')
+    const autoBtn = buttons.find(b => b.text().includes('Auto mode') || b.text().includes('auto'))
+    expect(autoBtn?.exists()).toBe(true)
+    await autoBtn!.trigger('click')
+    await flushPromises()
+    expect(vi.mocked(api.patchTask)).toHaveBeenCalledWith('KIN-UI-028', { execution_mode: 'auto_complete' })
+  })
+})
+
+// ============================================================================
+// Feature 2: Vertical pipeline — computed и структура
+// ============================================================================
+
+describe('KIN-UI-028 Feature 2: useVerticalPipeline computed в TaskDetail.vue', () => {
+  it('useVerticalPipeline определён в скрипте компонента', () => {
+    const source = fs.readFileSync(path.resolve(__dirname, '../views/TaskDetail.vue'), 'utf-8')
+    expect(source).toContain('useVerticalPipeline')
+  })
+
+  it('useVerticalPipeline использует порог > 5', () => {
+    const source = fs.readFileSync(path.resolve(__dirname, '../views/TaskDetail.vue'), 'utf-8')
+    expect(source).toContain('> 5')
+  })
+})
+
+// ============================================================================
+// Feature 2: Horizontal pipeline при ≤5 шагах
+// ============================================================================
+
+describe('KIN-UI-028 Feature 2: горизонтальный pipeline при ≤5 шагах', () => {
+  it('при 1 шаге рендерится горизонтальный overflow-x-auto', async () => {
+    const steps = [makeStep(1, 'pm', true)]
+    const wrapper = await mountTask(makeTask({ status: 'done', pipeline_steps: steps }))
+    expect(wrapper.html()).toContain('overflow-x-auto')
+  })
+
+  it('при 5 шагах рендерится горизонтальный overflow-x-auto', async () => {
+    const steps = Array.from({ length: 5 }, (_, i) => makeStep(i + 1, 'frontend_dev', true))
+    const wrapper = await mountTask(makeTask({ status: 'done', pipeline_steps: steps }))
+    expect(wrapper.html()).toContain('overflow-x-auto')
+  })
+
+  it('при 5 шагах НЕ рендерится chevron вертикального timeline', async () => {
+    const steps = Array.from({ length: 5 }, (_, i) => makeStep(i + 1, 'frontend_dev', true))
+    const wrapper = await mountTask(makeTask({ status: 'done', pipeline_steps: steps }))
+    expect(wrapper.html()).not.toContain('▼')
+  })
+})
+
+// ============================================================================
+// Feature 2: Vertical pipeline при >5 шагах
+// ============================================================================
+
+describe('KIN-UI-028 Feature 2: вертикальный timeline при >5 шагах', () => {
+  function make6Steps(successVal: boolean | number | null = true): Record<string, unknown>[] {
+    return Array.from({ length: 6 }, (_, i) => makeStep(i + 1, 'frontend_dev', successVal))
+  }
+
+  it('при 6 шагах рендерится chevron ▼ вертикального timeline', async () => {
+    const wrapper = await mountTask(makeTask({ status: 'done', pipeline_steps: make6Steps() }))
+    expect(wrapper.html()).toContain('▼')
+  })
+
+  it('при 6 шагах НЕ рендерится горизонтальный overflow-x-auto', async () => {
+    const wrapper = await mountTask(makeTask({ status: 'done', pipeline_steps: make6Steps() }))
+    expect(wrapper.html()).not.toContain('overflow-x-auto')
+  })
+
+  it('вертикальный timeline отображает имя роли агента', async () => {
+    const steps = [
+      makeStep(1, 'pm', true), makeStep(2, 'backend_dev', true), makeStep(3, 'frontend_dev', true),
+      makeStep(4, 'tester', true), makeStep(5, 'reviewer', true), makeStep(6, 'security', true),
+    ]
+    const wrapper = await mountTask(makeTask({ status: 'done', pipeline_steps: steps }))
+    expect(wrapper.html()).toContain('pm')
+    expect(wrapper.html()).toContain('backend_dev')
+    expect(wrapper.html()).toContain('security')
+  })
+
+  it('вертикальный timeline отображает duration_seconds', async () => {
+    const steps = Array.from({ length: 6 }, (_, i) => makeStep(i + 1, 'pm', true, { duration_seconds: 77 }))
+    const wrapper = await mountTask(makeTask({ status: 'done', pipeline_steps: steps }))
+    expect(wrapper.html()).toContain('77s')
+  })
+
+  it('вертикальный timeline отображает cost_usd', async () => {
+    const steps = Array.from({ length: 6 }, (_, i) => makeStep(i + 1, 'pm', true, { cost_usd: 0.042 }))
+    const wrapper = await mountTask(makeTask({ status: 'done', pipeline_steps: steps }))
+    expect(wrapper.html()).toContain('$0.042')
+  })
+})
+
+// ============================================================================
+// Feature 2: Вертикальный timeline — иконки success/fail/running
+// ============================================================================
+
+describe('KIN-UI-028 Feature 2: verticalStepIcon и verticalStepIconColor — статическая проверка', () => {
+  it('функция verticalStepIcon покрывает success === true', () => {
+    const source = fs.readFileSync(path.resolve(__dirname, '../views/TaskDetail.vue'), 'utf-8')
+    expect(source).toContain('step.success === true')
+  })
+
+  it('функция verticalStepIcon покрывает success === 1 (number)', () => {
+    const source = fs.readFileSync(path.resolve(__dirname, '../views/TaskDetail.vue'), 'utf-8')
+    expect(source).toContain('step.success === 1')
+  })
+
+  it('функция verticalStepIcon покрывает success === false', () => {
+    const source = fs.readFileSync(path.resolve(__dirname, '../views/TaskDetail.vue'), 'utf-8')
+    expect(source).toContain('step.success === false')
+  })
+
+  it('функция verticalStepIcon покрывает success === 0 (number)', () => {
+    const source = fs.readFileSync(path.resolve(__dirname, '../views/TaskDetail.vue'), 'utf-8')
+    expect(source).toContain('step.success === 0')
+  })
+
+  it('функция verticalStepIconColor возвращает text-green-400 для успеха', () => {
+    const source = fs.readFileSync(path.resolve(__dirname, '../views/TaskDetail.vue'), 'utf-8')
+    expect(source).toContain('text-green-400')
+  })
+
+  it('функция verticalStepIconColor возвращает text-red-400 для провала', () => {
+    const source = fs.readFileSync(path.resolve(__dirname, '../views/TaskDetail.vue'), 'utf-8')
+    expect(source).toContain('text-red-400')
+  })
+
+  it('функция verticalStepIconColor возвращает text-blue-400 для running/null', () => {
+    const source = fs.readFileSync(path.resolve(__dirname, '../views/TaskDetail.vue'), 'utf-8')
+    expect(source).toContain('text-blue-400')
+  })
+})
+
+describe('KIN-UI-028 Feature 2: вертикальный timeline — CSS-классы иконок в рендере', () => {
+  it('шаги с success=true рендерят text-green-400', async () => {
+    const steps = Array.from({ length: 6 }, (_, i) => makeStep(i + 1, 'pm', true))
+    const wrapper = await mountTask(makeTask({ status: 'done', pipeline_steps: steps }))
+    expect(wrapper.html()).toContain('text-green-400')
+  })
+
+  it('шаги с success=false рендерят text-red-400', async () => {
+    const steps = Array.from({ length: 6 }, (_, i) => makeStep(i + 1, 'pm', false))
+    const wrapper = await mountTask(makeTask({ status: 'done', pipeline_steps: steps }))
+    expect(wrapper.html()).toContain('text-red-400')
+  })
+
+  it('шаги с success=null рендерят text-blue-400', async () => {
+    const steps = Array.from({ length: 6 }, (_, i) => makeStep(i + 1, 'pm', null))
+    const wrapper = await mountTask(makeTask({ status: 'done', pipeline_steps: steps }))
+    expect(wrapper.html()).toContain('text-blue-400')
+  })
+})
+
+// ============================================================================
+// Feature 2: Вертикальный timeline — chevron и раскрытие шага
+// ============================================================================
+
+describe('KIN-UI-028 Feature 2: вертикальный timeline — chevron и раскрытие', () => {
+  it('шаги изначально свёрнуты — chevron ▼ присутствует', async () => {
+    const steps = Array.from({ length: 6 }, (_, i) => makeStep(i + 1, 'pm', true))
+    const wrapper = await mountTask(makeTask({ status: 'done', pipeline_steps: steps }))
+    expect(wrapper.html()).toContain('▼')
+    expect(wrapper.html()).not.toContain('▲')
+  })
+
+  it('клик по шагу раскрывает его — chevron ▲ появляется', async () => {
+    const steps = Array.from({ length: 6 }, (_, i) =>
+      makeStep(i + 1, 'pm', true, { output_summary: 'Summary output' })
+    )
+    const wrapper = await mountTask(makeTask({ status: 'done', pipeline_steps: steps }))
+
+    // Find first row containing ▼ and click it
+    const allDivs = wrapper.findAll('div')
+    const stepRow = allDivs.find(d => d.classes().includes('cursor-pointer') && d.text().includes('▼'))
+    expect(stepRow).toBeDefined()
+    await stepRow!.trigger('click')
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.html()).toContain('▲')
+  })
+
+  it('раскрытый шаг показывает содержимое output_summary', async () => {
+    const steps = Array.from({ length: 6 }, (_, i) =>
+      makeStep(i + 1, 'pm', true, { output_summary: 'UniqueOutputMarker9z' })
+    )
+    const wrapper = await mountTask(makeTask({ status: 'done', pipeline_steps: steps }))
+
+    const allDivs = wrapper.findAll('div')
+    const stepRow = allDivs.find(d => d.classes().includes('cursor-pointer') && d.text().includes('▼'))
+    expect(stepRow).toBeDefined()
+    await stepRow!.trigger('click')
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.html()).toContain('UniqueOutputMarker9z')
+  })
+})

web/frontend/src/views/ProjectView.vue

@@ -15,6 +15,8 @@ const project = ref<ProjectDetail | null>(null)
 const loading = ref(true)
 const error = ref('')
 const activeTab = ref<'tasks' | 'phases' | 'decisions' | 'modules' | 'kanban' | 'environments' | 'links' | 'settings'>('tasks')
+const showModeMenu = ref(false)
+const showMoreMenu = ref(false)
 
 // Phases
 const phases = ref<Phase[]>([])
@@ -172,6 +174,34 @@ function phaseStatusColor(s: string) {
   return m[s] || 'gray'
 }
 
+// Tab groups
+const PRIMARY_TABS = ['tasks', 'kanban', 'phases', 'decisions'] as const
+const MORE_TABS = ['modules', 'environments', 'links', 'settings'] as const
+
+function tabLabel(tab: string): string {
+  const labels: Record<string, string> = {
+    tasks: t('projectView.tasks_tab'),
+    phases: t('projectView.phases_tab'),
+    decisions: t('projectView.decisions_tab'),
+    modules: t('projectView.modules_tab'),
+    kanban: t('projectView.kanban_tab'),
+    environments: t('projectView.environments'),
+    links: t('projectView.links_tab'),
+    settings: t('projectView.settings_tab'),
+  }
+  return labels[tab] ?? tab
+}
+
+function tabCount(tab: string): string | number {
+  if (tab === 'tasks' || tab === 'kanban') return project.value!.tasks.length
+  if (tab === 'phases') return phases.value.length
+  if (tab === 'decisions') return project.value!.decisions.length
+  if (tab === 'modules') return project.value!.modules.length
+  if (tab === 'environments') return environments.value.length
+  if (tab === 'links') return links.value.length
+  return ''
+}
+
 // Filters
 const ALL_TASK_STATUSES = ['pending', 'in_progress', 'review', 'blocked', 'decomposed', 'done', 'revising', 'cancelled']
 
@@ -278,6 +308,8 @@ async function toggleWorktrees() {
   }
 }
 
+const anyModeActive = computed(() => autoMode.value || autocommit.value || autoTest.value || worktrees.value)
+
 // Settings form
 const settingsForm = ref({
   execution_mode: 'review',
@@ -1072,24 +1104,38 @@ async function addDecision() {
 
     <!-- Tabs -->
     <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', 'settings'] as const)" :key="tab"
+      <button v-for="tab in PRIMARY_TABS" :key="tab"
         @click="activeTab = tab"
         class="px-4 py-2 text-sm border-b-2 transition-colors"
         :class="activeTab === tab
           ? 'text-gray-200 border-blue-500'
           : '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') : tab === 'links' ? t('projectView.links_tab') : t('projectView.settings_tab') }}
+        {{ tabLabel(tab) }}
-        <span class="text-xs text-gray-600 ml-1">
+        <span class="text-xs text-gray-600 ml-1">{{ tabCount(tab) }}</span>
-          {{ tab === 'tasks' ? project.tasks.length
-           : tab === 'phases' ? phases.length
-           : tab === 'decisions' ? project.decisions.length
-           : tab === 'modules' ? project.modules.length
-           : tab === 'environments' ? environments.length
-           : tab === 'links' ? links.length
-           : tab === 'kanban' ? project.tasks.length
-           : '' }}
-        </span>
       </button>
+      <!-- More ▾ dropdown -->
+      <div class="relative">
+        <div v-if="showMoreMenu" class="fixed inset-0 z-10" @click="showMoreMenu = false"></div>
+        <button
+          @click="showMoreMenu = !showMoreMenu"
+          class="px-4 py-2 text-sm border-b-2 transition-colors relative z-20"
+          :class="(MORE_TABS as readonly string[]).includes(activeTab)
+            ? 'text-gray-200 border-blue-500'
+            : 'text-gray-500 border-transparent hover:text-gray-300'">
+          More ▾
+        </button>
+        <div v-if="showMoreMenu" class="absolute left-0 top-full z-20 bg-gray-900 border border-gray-700 rounded shadow-lg py-1 min-w-[10rem]">
+          <button v-for="tab in MORE_TABS" :key="tab"
+            @click="activeTab = tab; showMoreMenu = false"
+            class="w-full text-left px-3 py-1.5 text-sm transition-colors flex items-center justify-between"
+            :class="activeTab === tab
+              ? 'text-gray-200 bg-gray-800'
+              : 'text-gray-500 hover:text-gray-300 hover:bg-gray-800'">
+            {{ tabLabel(tab) }}
+            <span class="text-xs text-gray-600 ml-2">{{ tabCount(tab) }}</span>
+          </button>
+        </div>
+      </div>
     </div>
 
     <!-- Tasks Tab -->
@@ -1130,38 +1176,52 @@ async function addDecision() {
               class="px-1.5 py-0.5 text-xs text-gray-600 hover:text-red-400 rounded">✕</button>
           </div>
           <div class="flex gap-2">
-            <button @click="toggleMode"
+            <!-- ⚙ Mode ▾ dropdown -->
-              class="px-2 py-1 text-xs border rounded transition-colors"
+            <div class="relative">
-              :class="autoMode
+              <div v-if="showModeMenu" class="fixed inset-0 z-10" @click="showModeMenu = false"></div>
-                ? 'bg-yellow-900/30 text-yellow-400 border-yellow-800 hover:bg-yellow-900/50'
+              <button
-                : 'bg-gray-800/50 text-gray-400 border-gray-700 hover:bg-gray-800'"
+                data-testid="mode-menu-trigger"
+                :data-mode="autoMode ? 'auto' : 'review'"
+                @click="showModeMenu = !showModeMenu"
+                class="px-2 py-1 text-xs border rounded relative z-20"
+                :class="anyModeActive ? 'text-yellow-400 border-yellow-800 bg-yellow-900/20' : 'text-gray-400 border-gray-700 bg-gray-800/50'">
+                ⚙ Mode ▾
+              </button>
+              <div v-if="showModeMenu" class="absolute right-0 top-full mt-1 z-20 w-52 bg-gray-900 border border-gray-700 rounded shadow-lg py-1">
+                <button
+                  data-testid="mode-toggle-auto"
+                  @click="toggleMode"
+                  class="w-full text-left px-3 py-1.5 text-xs flex items-center justify-between hover:bg-gray-800"
                   :title="autoMode ? 'Auto mode: agents can write files' : 'Review mode: agents read-only'">
-              {{ autoMode ? '&#x1F513; Auto' : '&#x1F512; Review' }}
+                  <span>{{ autoMode ? '🔓 Auto' : '🔒 Review' }}</span>
+                  <span :class="autoMode ? 'text-yellow-400' : 'text-gray-600'" class="text-[10px]">{{ autoMode ? 'on' : 'off' }}</span>
                 </button>
-            <button @click="toggleAutocommit"
+                <button
-              class="px-2 py-1 text-xs border rounded transition-colors"
+                  data-testid="mode-toggle-autocommit"
-              :class="autocommit
+                  @click="toggleAutocommit"
-                ? 'bg-green-900/30 text-green-400 border-green-800 hover:bg-green-900/50'
+                  class="w-full text-left px-3 py-1.5 text-xs flex items-center justify-between hover:bg-gray-800"
-                : 'bg-gray-800/50 text-gray-400 border-gray-700 hover:bg-gray-800'"
                   :title="autocommit ? 'Autocommit: on — git commit after pipeline' : 'Autocommit: off'">
-              {{ autocommit ? '&#x2713; Autocommit' : 'Autocommit' }}
+                  <span>Autocommit</span>
+                  <span :class="autocommit ? 'text-green-400' : 'text-gray-600'" class="text-[10px]">{{ autocommit ? 'on' : 'off' }}</span>
                 </button>
-            <button @click="toggleAutoTest"
+                <button
-              class="px-2 py-1 text-xs border rounded transition-colors"
+                  data-testid="mode-toggle-autotest"
-              :class="autoTest
+                  @click="toggleAutoTest"
-                ? 'bg-blue-900/30 text-blue-400 border-blue-800 hover:bg-blue-900/50'
+                  class="w-full text-left px-3 py-1.5 text-xs flex items-center justify-between hover:bg-gray-800"
-                : 'bg-gray-800/50 text-gray-400 border-gray-700 hover:bg-gray-800'"
                   :title="autoTest ? 'Auto-test: on — запускать тесты после pipeline' : 'Auto-test: off'">
-              {{ autoTest ? '✓ ' + t('projectView.auto_test_label') : t('projectView.auto_test_label') }}
+                  <span>{{ t('projectView.auto_test_label') }}</span>
+                  <span :class="autoTest ? 'text-blue-400' : 'text-gray-600'" class="text-[10px]">{{ autoTest ? 'on' : 'off' }}</span>
                 </button>
-            <button @click="toggleWorktrees"
+                <button
-              class="px-2 py-1 text-xs border rounded transition-colors"
+                  data-testid="mode-toggle-worktrees"
-              :class="worktrees
+                  @click="toggleWorktrees"
-                ? 'bg-teal-900/30 text-teal-400 border-teal-800 hover:bg-teal-900/50'
+                  class="w-full text-left px-3 py-1.5 text-xs flex items-center justify-between hover:bg-gray-800"
-                : 'bg-gray-800/50 text-gray-400 border-gray-700 hover:bg-gray-800'"
                   :title="worktrees ? 'Worktrees: on' : 'Worktrees: off'">
-              {{ worktrees ? t('projectView.worktrees_on') : t('projectView.worktrees_off') }}
+                  <span>{{ worktrees ? t('projectView.worktrees_on') : t('projectView.worktrees_off') }}</span>
+                  <span :class="worktrees ? 'text-teal-400' : 'text-gray-600'" class="text-[10px]">{{ worktrees ? 'on' : 'off' }}</span>
                 </button>
+              </div>
+            </div>
             <button @click="runAudit" :disabled="auditLoading"
               class="px-2 py-1 text-xs bg-purple-900/30 text-purple-400 border border-purple-800 rounded hover:bg-purple-900/50 disabled:opacity-50"
               title="Check which pending tasks are already done">