Rename Tasks tab and make it visually distinct

Renames "Task Terminals" to "Tasks" in /terminals view and applies distinct
styling with primary color accent and separator from regular tabs. Also
updates the Terminals navbar icon to ComputerTerminal01Icon.

Author: knowsuchagency

src/components/layout/header.tsx

@@ -13,7 +13,7 @@ import {
 import { HugeiconsIcon } from '@hugeicons/react'
 import {
   GridViewIcon,
-  CommandLineIcon,
+  ComputerTerminal01Icon,
   Settings01Icon,
   LibraryIcon,
   GitPullRequestIcon,
@@ -31,7 +31,7 @@ interface HeaderProps {
 
 const NAV_ITEMS = [
   { to: '/tasks', icon: GridViewIcon, labelKey: 'header.tasks', matchPrefix: true },
-  { to: '/terminals', icon: CommandLineIcon, labelKey: 'header.terminals', matchPrefix: false },
+  { to: '/terminals', icon: ComputerTerminal01Icon, labelKey: 'header.terminals', matchPrefix: false },
   { to: '/repositories', icon: LibraryIcon, labelKey: 'header.repositories', matchPrefix: true },
   { to: '/review', icon: GitPullRequestIcon, labelKey: 'header.review', matchPrefix: true },
   { to: '/monitoring', icon: ChartLineData01Icon, labelKey: 'header.monitoring', matchPrefix: true },

src/i18n/locales/en/terminals.json

@@ -1,5 +1,5 @@
 {
-  "taskTerminals": "Task Terminals",
+  "taskTerminals": "Tasks",
   "newTerminal": "New Terminal",
   "allRepos": "All Repos",
   "editTab": {

src/i18n/locales/zh/terminals.json

@@ -1,5 +1,5 @@
 {
-  "taskTerminals": "任务终端",
+  "taskTerminals": "任务",
   "newTerminal": "新建终端",
   "allRepos": "全部仓库"
 }

src/routes/terminals/index.tsx

@@ -544,21 +544,23 @@ const TerminalsView = observer(function TerminalsView() {
       <div className="sticky top-0 z-10 flex shrink-0 items-center justify-between border-b border-border bg-background px-2 py-1">
         <div className="min-w-0 flex-1 overflow-x-auto">
           <div className="flex items-center">
-            {/* Task Terminals system tab - always first */}
+            {/* Tasks system tab - always first, visually distinct */}
             <button
               onClick={() => setActiveTab(ALL_TASKS_TAB_ID)}
               className={cn(
-                'relative flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs transition-colors max-sm:px-2',
+                'relative flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors max-sm:px-2',
                 activeTabId === ALL_TASKS_TAB_ID
-                  ? 'bg-background text-foreground'
-                  : 'text-muted-foreground hover:text-foreground',
-                'after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-foreground after:transition-opacity',
+                  ? 'bg-primary/10 text-primary'
+                  : 'text-muted-foreground hover:text-primary hover:bg-primary/5',
+                'after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-primary after:transition-opacity',
                 activeTabId === ALL_TASKS_TAB_ID ? 'after:opacity-100' : 'after:opacity-0'
               )}
             >
               <HugeiconsIcon icon={GridViewIcon} size={12} strokeWidth={2} />
               <span className="max-sm:hidden">{t('taskTerminals')}</span>
             </button>
+            {/* Separator between Tasks and regular tabs */}
+            <div className="mx-2 h-4 w-px bg-border" />
             <TerminalTabBar
               tabs={tabBarTabs}
               activeTabId={activeTabId ?? ''}