kin: KIN-UI-027-frontend_dev

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') }}
-        <span class="text-xs text-gray-600 ml-1">
-          {{ 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>
+        {{ tabLabel(tab) }}
+        <span class="text-xs text-gray-600 ml-1">{{ tabCount(tab) }}</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"
-              class="px-2 py-1 text-xs border rounded transition-colors"
-              :class="autoMode
-                ? 'bg-yellow-900/30 text-yellow-400 border-yellow-800 hover:bg-yellow-900/50'
-                : 'bg-gray-800/50 text-gray-400 border-gray-700 hover:bg-gray-800'"
-              :title="autoMode ? 'Auto mode: agents can write files' : 'Review mode: agents read-only'">
-              {{ autoMode ? '&#x1F513; Auto' : '&#x1F512; Review' }}
-            </button>
-            <button @click="toggleAutocommit"
-              class="px-2 py-1 text-xs border rounded transition-colors"
-              :class="autocommit
-                ? 'bg-green-900/30 text-green-400 border-green-800 hover:bg-green-900/50'
-                : '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' }}
-            </button>
-            <button @click="toggleAutoTest"
-              class="px-2 py-1 text-xs border rounded transition-colors"
-              :class="autoTest
-                ? 'bg-blue-900/30 text-blue-400 border-blue-800 hover:bg-blue-900/50'
-                : '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') }}
-            </button>
-            <button @click="toggleWorktrees"
-              class="px-2 py-1 text-xs border rounded transition-colors"
-              :class="worktrees
-                ? 'bg-teal-900/30 text-teal-400 border-teal-800 hover:bg-teal-900/50'
-                : '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') }}
-            </button>
+            <!-- ⚙ Mode ▾ dropdown -->
+            <div class="relative">
+              <div v-if="showModeMenu" class="fixed inset-0 z-10" @click="showModeMenu = false"></div>
+              <button
+                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'">
+                  <span>{{ autoMode ? '🔓 Auto' : '🔒 Review' }}</span>
+                  <span :class="autoMode ? 'text-yellow-400' : 'text-gray-600'" class="text-[10px]">{{ autoMode ? 'on' : 'off' }}</span>
+                </button>
+                <button
+                  data-testid="mode-toggle-autocommit"
+                  @click="toggleAutocommit"
+                  class="w-full text-left px-3 py-1.5 text-xs flex items-center justify-between hover:bg-gray-800"
+                  :title="autocommit ? 'Autocommit: on — git commit after pipeline' : 'Autocommit: off'">
+                  <span>Autocommit</span>
+                  <span :class="autocommit ? 'text-green-400' : 'text-gray-600'" class="text-[10px]">{{ autocommit ? 'on' : 'off' }}</span>
+                </button>
+                <button
+                  data-testid="mode-toggle-autotest"
+                  @click="toggleAutoTest"
+                  class="w-full text-left px-3 py-1.5 text-xs flex items-center justify-between hover:bg-gray-800"
+                  :title="autoTest ? 'Auto-test: on — запускать тесты после pipeline' : 'Auto-test: off'">
+                  <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
+                  data-testid="mode-toggle-worktrees"
+                  @click="toggleWorktrees"
+                  class="w-full text-left px-3 py-1.5 text-xs flex items-center justify-between hover:bg-gray-800"
+                  :title="worktrees ? 'Worktrees: on' : '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">