diff --git a/src/App.vue b/src/App.vue
index 0c49075..a8eb942 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -83,7 +83,7 @@ provide('activatedView', activatedView)
 
 <template>
   <main
-    class="app-shell"
+    size-full flex flex-col select-none
     :style="{ '--window-titlebar-height': useNativeTitleBar ? '0px' : '40px' }"
   >
     <WindowHeader v-if="!useNativeTitleBar" shrink-0 />
@@ -98,8 +98,7 @@ provide('activatedView', activatedView)
 </template>
 
 <style lang="scss" scoped>
-.app-shell {
-  @apply size-full flex flex-col select-none;
+main {
   caret-color: var(--theme-text-caret);
 }
 </style>
diff --git a/src/components/LanguagePop/LanguagePop.vue b/src/components/LanguagePop/LanguagePop.vue
index cd887c4..17272dd 100644
--- a/src/components/LanguagePop/LanguagePop.vue
+++ b/src/components/LanguagePop/LanguagePop.vue
@@ -33,7 +33,10 @@ function updateOpen(open: boolean) {
 }
 
 function languageLabel(text: string) {
-  return text === 'Other' ? t('language_pop.other') : text
+  const normalized = text.trim()
+  if (normalized.toLowerCase() === 'unknown' || normalized.toLowerCase() === 'unknow')
+    return t('app.common.unknown')
+  return normalized === 'Other' ? t('language_pop.other') : normalized
 }
 </script>
 
@@ -45,6 +48,10 @@ function languageLabel(text: string) {
     <PopoverPortal v-if="anchorElement && shouldRenderContent">
       <PopoverContent
         class="language-pop"
+        z-50 w-270px rounded-6px border px-12px
+        py-10px outline-none
+        color="$ui-foreground"
+        backdrop-blur-8px backdrop-saturate-140
         :class="{ 'loading': visibleAnalyzing || !hasLanguages, 'dark-language-pop': isDarkTheme }"
         :reference="anchorElement"
         side="top"
@@ -55,44 +62,76 @@ function languageLabel(text: string) {
         @open-auto-focus.prevent
         @close-auto-focus.prevent
       >
-        <div v-if="visibleAnalyzing" class="state-panel">
-          <span class="state-loader" />
+        <div
+          v-if="visibleAnalyzing"
+          class="state-panel"
+          h-44px flex items-center justify-center gap-8px
+          text-12px color="$ui-muted-foreground"
+        >
+          <span
+            class="state-loader"
+            block size-13px shrink-0 rounded-full border-2
+          />
           <span>{{ t('language_pop.loading') }}</span>
         </div>
 
-        <div v-else-if="getAnalyzeError || !languagesGroup?.length" class="state-panel error">
+        <div
+          v-else-if="getAnalyzeError || !languagesGroup?.length"
+          class="state-panel error"
+          h-44px flex items-center justify-center gap-8px
+          text-12px color="$ui-muted-foreground"
+        >
           <span class="i-lucide:triangle-alert" />
           <span>{{ t('language_pop.failed') }}</span>
         </div>
 
         <template v-else>
-          <header class="language-pop-header">
-            <span>{{ t('language_pop.count', { count: languagesGroup.length }) }}</span>
+          <header mb-8px flex items-center justify-end>
+            <span shrink-0 text-11px color="$ui-muted-foreground">{{ t('language_pop.count', { count: languagesGroup.length }) }}</span>
           </header>
 
-          <div class="language-bar" :aria-label="t('language_pop.overall_label')">
+          <div
+            class="language-bar"
+            h-6px mb-9px rounded-full overflow-hidden flex
+            gap-1px
+            bg="$ui-hover-background"
+            :aria-label="t('language_pop.overall_label')"
+          >
             <span
               v-for="languageItem in languagesGroup"
               :key="languageItem.text"
+              block h-full
               :style="{ backgroundColor: languageItem.color ?? '#ccc', width: `${languageItem.percentage}%` }"
               :aria-label="`${languageLabel(languageItem.text)} ${languageItem.percentage}%`"
             />
           </div>
 
-          <ul class="language-list">
+          <ul
+            m-0 p-0 flex flex-col gap-7px
+            list-none
+          >
             <li
               v-for="languageItem in visibleLanguages"
               :key="languageItem.text"
+              min-w-0 flex items-center justify-between gap-10px
+              text-12px
             >
-              <div>
-                <span class="color-dot" :style="{ backgroundColor: languageItem.color ?? '#ccc' }" />
+              <div min-w-0 flex items-center gap-6px truncate>
+                <span
+                  class="color-dot"
+                  size-8px rounded-full shrink-0
+                  :style="{ backgroundColor: languageItem.color ?? '#ccc' }"
+                />
                 {{ languageLabel(languageItem.text) }}
               </div>
-              <span>
+              <span shrink-0 light:color="$gray-7" dark:color="$gray-8">
                 {{ languageItem.percentage }}%
               </span>
             </li>
-            <li v-if="hiddenLanguageCount" class="more-row">
+            <li
+              v-if="hiddenLanguageCount"
+              justify-start text-11px color="$ui-muted-foreground"
+            >
               <div>{{ t('language_pop.more', { count: hiddenLanguageCount }) }}</div>
             </li>
           </ul>
@@ -104,14 +143,10 @@ function languageLabel(text: string) {
 
 <style lang="scss">
 .language-pop {
-  @apply z-50 w-270px rounded-6px border px-12px py-10px outline-none;
-  @apply border-$ui-border color-$ui-foreground;
-  @apply backdrop-blur-8px backdrop-saturate-140;
-  background: var(--ui-popover-background);
-  box-shadow: var(--shadow-popup);
+  @apply border-$ui-border bg-$ui-popover-background shadow-$shadow-popup;
 
   &[data-state="open"] {
-    animation: language-pop-enter 120ms cubic-bezier(0.16, 1, 0.3, 1);
+    @apply animate-[language-pop-enter_120ms_cubic-bezier(0.16,1,0.3,1)];
   }
 }
 
@@ -120,60 +155,14 @@ function languageLabel(text: string) {
 }
 
 .state-panel {
-  @apply h-44px flex items-center justify-center gap-8px;
-  @apply text-12px color-$ui-muted-foreground;
-}
-
-.state-panel.error {
-  @apply color-$red-5;
-}
-
-.state-loader {
-  @apply block size-13px shrink-0 rounded-full border-2;
-  border-style: solid;
-  border-color: var(--ui-border);
-  border-top-color: var(--ui-primary);
-  animation: state-loader-spin 0.75s linear infinite;
-}
-
-.language-pop-header {
-  @apply mb-8px flex items-center justify-end;
-
-  > span {
-    @apply shrink-0 text-11px color-$ui-muted-foreground;
+  &.error {
+    @apply color-$red-5;
   }
 }
 
-.language-bar {
-  @apply h-6px mb-9px rounded-full overflow-hidden flex gap-1px bg-$ui-hover-background;
-
-  span {
-    @apply block h-full;
-  }
-}
-
-.language-list {
-  @apply m-0 p-0 flex flex-col gap-7px list-none;
-}
-
-.language-list li {
-  @apply min-w-0 flex items-center justify-between gap-10px text-12px;
-
-  div {
-    @apply min-w-0 flex items-center gap-6px truncate;
-  }
-
-  > span {
-    @apply shrink-0 light:color-$gray-7 dark:color-$gray-8;
-  }
-}
-
-.language-list .more-row {
-  @apply justify-start text-11px color-$ui-muted-foreground;
-}
-
-.color-dot {
-  @apply size-8px rounded-full shrink-0;
+.state-loader {
+  @apply border-solid border-$ui-border border-t-$ui-primary;
+  @apply animate-[state-loader-spin_0.75s_linear_infinite];
 }
 
 .language-pop.dark-language-pop {
@@ -187,12 +176,12 @@ function languageLabel(text: string) {
 }
 
 .language-pop.dark-language-pop .language-bar span {
-  opacity: 0.74;
+  @apply opacity-74;
   filter: saturate(0.72) brightness(0.92);
 }
 
 .language-pop.dark-language-pop .color-dot {
-  opacity: 0.84;
+  @apply opacity-84;
   filter: saturate(0.72) brightness(0.94);
   box-shadow: 0 0 0 1px rgb(255 255 255 / 10%);
 }
@@ -205,7 +194,7 @@ function languageLabel(text: string) {
 
 @keyframes language-pop-enter {
   from {
-    opacity: 0;
+    @apply opacity-0;
     transform: translateY(3px) scale(0.985);
   }
 }
diff --git a/src/components/RemoveProjectDialog/RemoveProjectDialog.vue b/src/components/RemoveProjectDialog/RemoveProjectDialog.vue
index 8d75f70..3bca443 100644
--- a/src/components/RemoveProjectDialog/RemoveProjectDialog.vue
+++ b/src/components/RemoveProjectDialog/RemoveProjectDialog.vue
@@ -54,7 +54,10 @@ function confirmRemove(deleteFiles = false) {
       }}
     </template>
 
-    <p v-if="!isRemove" class="warning-text">
+    <p
+      v-if="!isRemove" mt-8px mb-0 text-13px lh-18px
+      color="$red-5"
+    >
       {{ t('remove_project_dialog.dialog_desc.delete_note') }}
     </p>
 
@@ -71,9 +74,3 @@ function confirmRemove(deleteFiles = false) {
     </template>
   </UiDialog>
 </template>
-
-<style lang="scss" scoped>
-.warning-text {
-  @apply mt-8px mb-0 text-13px lh-18px color-$red-5;
-}
-</style>
diff --git a/src/components/WindowHeader.vue b/src/components/WindowHeader.vue
index 672e2a7..66172c9 100644
--- a/src/components/WindowHeader.vue
+++ b/src/components/WindowHeader.vue
@@ -19,19 +19,52 @@ function closeWindow() {
 <template>
   <header
     class="window-header"
+    h-40px w-full shrink-0 flex items-center
+    bg="$ui-page-background"
     data-tauri-drag-region
   >
-    <span class="window-title" data-tauri-drag-region>CodeNest</span>
-
-    <div class="window-controls">
-      <button class="window-control" type="button" :aria-label="t('app.window.minimize')" @click="minimizeWindow">
-        <span class="window-control-icon minimize" />
+    <span
+      relative left-30px lh-20px text-13px font-500
+      font="$font-title"
+      data-tauri-drag-region
+    >CodeNest</span>
+
+    <div class="window-controls" h-full ml-auto flex items-center>
+      <button
+        class="window-control"
+        relative h-full w-46px border-0 bg-transparent
+        p-0
+        flex items-center justify-center
+        light:color="$gray-1" dark:color="$gray-11"
+        type="button"
+        :aria-label="t('app.window.minimize')"
+        @click="minimizeWindow"
+      >
+        <span class="window-control-icon minimize" relative block size-12px />
       </button>
-      <button class="window-control" type="button" :aria-label="t('app.window.maximize')" @click="toggleMaximizeWindow">
-        <span class="window-control-icon maximize" />
+      <button
+        class="window-control"
+        relative h-full w-46px border-0 bg-transparent
+        p-0
+        flex items-center justify-center
+        light:color="$gray-1" dark:color="$gray-11"
+        type="button"
+        :aria-label="t('app.window.maximize')"
+        @click="toggleMaximizeWindow"
+      >
+        <span class="window-control-icon maximize" relative block size-12px />
       </button>
-      <button class="window-control close" type="button" :aria-label="t('app.window.close')" @click="closeWindow">
-        <span class="window-control-icon close-icon" />
+      <button
+        class="window-control close"
+        relative h-full w-46px border-0 bg-transparent
+        p-0
+        flex items-center justify-center
+        light:color="$gray-1" dark:color="$gray-11"
+        type="button"
+        :aria-label="t('app.window.close')"
+        @click="closeWindow"
+      >
+        <span class="window-control-icon close-icon" relative block size-12px />
       </button>
     </div>
   </header>
@@ -39,27 +72,15 @@ function closeWindow() {
 
 <style lang="scss" scoped>
 .window-header {
-  @apply h-40px w-full shrink-0 flex items-center;
-  @apply bg-$ui-page-background;
   -webkit-app-region: drag;
   -webkit-user-select: none;
 }
 
 .window-controls {
-  @apply h-full ml-auto flex items-center;
   -webkit-app-region: no-drag;
 }
 
-.window-title {
-  @apply relative left-30px lh-20px text-13px font-500;
-  font-family: var(--font-title);
-}
-
 .window-control {
-  @apply relative h-full w-46px border-0 bg-transparent p-0;
-  @apply flex items-center justify-center;
-  @apply color-$gray-1 dark:color-$gray-11;
-
   &:hover {
     @apply bg-$ui-hover-background;
   }
@@ -69,10 +90,6 @@ function closeWindow() {
   }
 }
 
-.window-control-icon {
-  @apply relative block size-12px;
-}
-
 .window-control-icon.minimize::before {
   content: "";
   @apply absolute left-1px right-1px top-6px h-1px bg-current;
diff --git a/src/components/ui/UiActionMenu.vue b/src/components/ui/UiActionMenu.vue
index ea35d17..9c1ba1d 100644
--- a/src/components/ui/UiActionMenu.vue
+++ b/src/components/ui/UiActionMenu.vue
@@ -498,22 +498,19 @@ function handleMenuKeydown(event: KeyboardEvent) {
 <style lang="scss">
 .ui-action-menu-content {
   @apply z-80 rounded-md border p-1 outline-none;
-  @apply border-$ui-border bg-$ui-popover-background color-$ui-foreground;
-  @apply backdrop-blur-8px backdrop-saturate-140;
+  @apply border-solid border-$ui-border bg-$ui-popover-background color-$ui-foreground;
+  @apply shadow-$shadow-popup backdrop-blur-8px backdrop-saturate-140;
+  @apply overflow-x-hidden overflow-y-auto;
   max-height: clamp(180px, 72vh, 420px);
-  overflow-x: hidden;
-  overflow-y: auto;
-  border-style: solid;
-  box-shadow: var(--shadow-popup);
 
   &[data-state="open"] {
-    animation: menu-enter 120ms cubic-bezier(0.16, 1, 0.3, 1);
+    @apply animate-[menu-enter_120ms_cubic-bezier(0.16,1,0.3,1)];
   }
 }
 
 .ui-action-submenu-content {
   &[data-state="open"] {
-    animation: submenu-enter-from-right 100ms cubic-bezier(0.16, 1, 0.3, 1);
+    @apply animate-[submenu-enter-from-right_100ms_cubic-bezier(0.16,1,0.3,1)];
   }
 
   &[data-state="open"][data-side="left"] {
@@ -530,7 +527,7 @@ function handleMenuKeydown(event: KeyboardEvent) {
   .ui-action-menu-state,
   .ui-action-menu-icon {
     @apply size-14px shrink-0 inline-flex items-center justify-center;
-    cursor: inherit;
+    @apply cursor-inherit;
   }
 
   .ui-action-menu-icon {
@@ -539,7 +536,7 @@ function handleMenuKeydown(event: KeyboardEvent) {
 
   .ui-action-menu-label {
     @apply min-w-0 truncate;
-    cursor: inherit;
+    @apply cursor-inherit;
   }
 
   .ui-action-menu-check {
@@ -548,19 +545,17 @@ function handleMenuKeydown(event: KeyboardEvent) {
 
   .ui-action-menu-trailing {
     @apply size-14px shrink-0 justify-self-end inline-flex items-center justify-center color-$ui-muted-foreground;
-    cursor: inherit;
+    @apply cursor-inherit;
   }
 
   .ui-action-menu-shortcut {
-    @apply shrink-0 justify-self-end whitespace-nowrap text-11px lh-14px color-$ui-muted-foreground;
-    font-family: var(--font-title);
-    letter-spacing: 0;
-    cursor: inherit;
+    @apply shrink-0 justify-self-end whitespace-nowrap text-11px lh-14px tracking-0 color-$ui-muted-foreground;
+    @apply font-$font-title;
+    @apply cursor-inherit;
   }
 
   &[data-highlighted] {
-    @apply color-$ui-accent-foreground;
-    background-color: var(--ui-option-hover-background);
+    @apply bg-$ui-option-hover-background color-$ui-accent-foreground;
 
     .ui-action-menu-trailing,
     .ui-action-menu-shortcut {
@@ -584,12 +579,11 @@ function handleMenuKeydown(event: KeyboardEvent) {
     }
 
     &[data-highlighted] {
-      color: var(--gray-14);
-      background-color: var(--red-5);
+      @apply bg-$red-5 color-$gray-14;
 
       .ui-action-menu-icon,
       .ui-action-menu-shortcut {
-        color: var(--gray-14);
+        @apply color-$gray-14;
       }
     }
   }
@@ -601,12 +595,12 @@ function handleMenuKeydown(event: KeyboardEvent) {
 
 .ui-action-menu-item:not([data-disabled]),
 .ui-action-menu-item:not([data-disabled]) * {
-  cursor: pointer;
+  @apply cursor-pointer;
 }
 
 .ui-action-menu-item[data-disabled],
 .ui-action-menu-item[data-disabled] * {
-  cursor: not-allowed;
+  @apply cursor-not-allowed;
 }
 
 .ui-action-menu-sub-trigger {
@@ -631,39 +625,39 @@ function handleMenuKeydown(event: KeyboardEvent) {
   }
 
   &[data-highlighted] {
-    color: var(--gray-14);
+    @apply color-$gray-14;
     background-color: color-mix(in srgb, var(--red-5) 82%, var(--red-6));
 
     .ui-action-menu-icon,
     .ui-action-menu-shortcut {
-      color: var(--gray-14);
+      @apply color-$gray-14;
     }
   }
 }
 
 .ui-action-menu-separator {
   @apply h-1px;
-  margin: 4px 8px;
+  @apply mx-8px my-4px;
   background: color-mix(in srgb, var(--ui-border), var(--ui-foreground) 3%);
 }
 
 @keyframes menu-enter {
   from {
-    opacity: 0;
+    @apply opacity-0;
     transform: translateY(-2px) scale(0.99);
   }
 }
 
 @keyframes submenu-enter-from-right {
   from {
-    opacity: 0;
+    @apply opacity-0;
     transform: translateX(-2px) scale(0.99);
   }
 }
 
 @keyframes submenu-enter-from-left {
   from {
-    opacity: 0;
+    @apply opacity-0;
     transform: translateX(2px) scale(0.99);
   }
 }
diff --git a/src/components/ui/UiCheckbox.vue b/src/components/ui/UiCheckbox.vue
index f19124f..972502f 100644
--- a/src/components/ui/UiCheckbox.vue
+++ b/src/components/ui/UiCheckbox.vue
@@ -27,18 +27,31 @@ function toggleFromField() {
 </script>
 
 <template>
-  <div class="ui-checkbox-field" :class="{ disabled }">
+  <div
+    class="ui-checkbox-field"
+    min-w-0 inline-flex items-start gap-8px cursor-pointer
+    :class="{ disabled }"
+  >
     <CheckboxRoot
       class="ui-checkbox-root"
+      mt-1px size-16px shrink-0 rounded-4px border
+      outline-none
+      inline-flex items-center justify-center
+      bg="$ui-checkbox-background"
+      transition duration-120 ease-out
+      data-disabled:cursor-not-allowed
       :model-value="modelValue"
       :disabled="disabled"
       @update:model-value="updateChecked"
     >
-      <CheckboxIndicator class="ui-checkbox-indicator">
+      <CheckboxIndicator
+        class="ui-checkbox-indicator" flex items-center justify-center text-12px
+        color="$ui-primary-foreground"
+      >
         <span class="i-lucide:check" />
       </CheckboxIndicator>
     </CheckboxRoot>
-    <span class="ui-checkbox-label" @click="toggleFromField">
+    <span class="ui-checkbox-label" min-w-0 text-12px break-anywhere @click="toggleFromField">
       <slot />
     </span>
   </div>
@@ -46,42 +59,24 @@ function toggleFromField() {
 
 <style lang="scss">
 .ui-checkbox-field {
-  @apply min-w-0 inline-flex items-start gap-8px cursor-pointer;
-
   &.disabled {
     @apply opacity-55 cursor-not-allowed;
   }
 }
 
 .ui-checkbox-root {
-  @apply mt-1px size-16px shrink-0 rounded-4px border outline-none;
-  @apply inline-flex items-center justify-center;
-  @apply border-$ui-input bg-$ui-checkbox-background;
-  @apply transition duration-120 ease-out;
-  @apply data-[disabled]:cursor-not-allowed;
-  appearance: none;
-  border-style: solid;
-  box-shadow: var(--shadow-control);
+  @apply appearance-none border-solid border-$ui-input shadow-$shadow-control;
 
   &:hover {
     border-color: color-mix(in srgb, var(--ui-input), var(--ui-foreground) 20%);
   }
 
   &:focus-visible {
-    box-shadow: var(--shadow-focus);
+    @apply shadow-$shadow-focus;
   }
 
   &[data-state="checked"] {
     @apply border-$ui-primary bg-$ui-primary;
   }
 }
-
-.ui-checkbox-indicator {
-  @apply flex items-center justify-center text-12px color-$ui-primary-foreground;
-}
-
-.ui-checkbox-label {
-  @apply min-w-0 text-12px;
-  overflow-wrap: anywhere;
-}
 </style>
diff --git a/src/components/ui/UiCombobox.vue b/src/components/ui/UiCombobox.vue
index 2930f32..8aae520 100644
--- a/src/components/ui/UiCombobox.vue
+++ b/src/components/ui/UiCombobox.vue
@@ -114,22 +114,19 @@ function handleBlur(event: FocusEvent) {
 .ui-combobox-anchor {
   @apply h-30px rounded-md border px-9px;
   @apply inline-flex items-center justify-between gap-7px;
-  @apply border-$ui-input bg-$ui-control-background color-$ui-foreground;
-  @apply transition duration-120 ease-out;
-  border-style: solid;
-  box-shadow: var(--shadow-control);
+  @apply border-solid border-$ui-input bg-$ui-control-background color-$ui-foreground;
+  @apply shadow-$shadow-control transition duration-120 ease-out;
 
   &:hover {
     border-color: color-mix(in srgb, var(--ui-input), var(--ui-foreground) 18%);
   }
 
   &:focus-within {
-    border-color: var(--ui-ring);
-    box-shadow: var(--shadow-focus);
+    @apply border-$ui-ring shadow-$shadow-focus;
   }
 
   &.invalid {
-    border-color: var(--red-5);
+    @apply border-$red-5;
   }
 }
 
@@ -138,7 +135,7 @@ function handleBlur(event: FocusEvent) {
   @apply text-11px color-$ui-foreground;
 
   &::placeholder {
-    color: var(--ui-muted-foreground);
+    @apply color-$ui-muted-foreground;
   }
 
   &:disabled {
@@ -149,7 +146,7 @@ function handleBlur(event: FocusEvent) {
 .ui-combobox-trigger {
   @apply h-full w-16px shrink-0 border-0 bg-transparent p-0;
   @apply inline-flex items-center justify-center cursor-pointer text-12px opacity-65;
-  color: var(--ui-muted-foreground);
+  @apply color-$ui-muted-foreground;
 
   &:disabled {
     @apply cursor-not-allowed;
@@ -158,13 +155,11 @@ function handleBlur(event: FocusEvent) {
 
 .ui-combobox-content {
   @apply z-50 rounded-md border p-1 outline-none;
-  @apply border-$ui-border bg-$ui-popover-background color-$ui-foreground;
-  @apply backdrop-blur-8px backdrop-saturate-140;
-  border-style: solid;
-  box-shadow: var(--shadow-popup);
+  @apply border-solid border-$ui-border bg-$ui-popover-background color-$ui-foreground;
+  @apply shadow-$shadow-popup backdrop-blur-8px backdrop-saturate-140;
 
   &[data-state="open"] {
-    animation: combobox-enter 120ms cubic-bezier(0.16, 1, 0.3, 1);
+    @apply animate-[combobox-enter_120ms_cubic-bezier(0.16,1,0.3,1)];
   }
 }
 
@@ -178,8 +173,7 @@ function handleBlur(event: FocusEvent) {
   @apply flex items-center cursor-pointer select-none text-12px;
 
   &[data-highlighted] {
-    @apply color-$ui-accent-foreground;
-    background-color: var(--ui-option-hover-background);
+    @apply bg-$ui-option-hover-background color-$ui-accent-foreground;
   }
 
   &[data-disabled] {
@@ -198,7 +192,7 @@ function handleBlur(event: FocusEvent) {
 
 @keyframes combobox-enter {
   from {
-    opacity: 0;
+    @apply opacity-0;
     transform: translateY(-3px) scale(0.985);
   }
 }
diff --git a/src/components/ui/UiDialog.vue b/src/components/ui/UiDialog.vue
index 6937434..aef29ea 100644
--- a/src/components/ui/UiDialog.vue
+++ b/src/components/ui/UiDialog.vue
@@ -39,15 +39,32 @@ const contentStyle = computed(() => ({
     @update:open="value => emit('update:open', value)"
   >
     <DialogPortal>
-      <DialogOverlay class="ui-dialog-overlay" />
-      <DialogContent class="ui-dialog-content" :style="contentStyle">
-        <DialogTitle v-if="title || $slots.title" class="ui-dialog-title">
+      <DialogOverlay
+        class="ui-dialog-overlay"
+        fixed left-0 right-0 bottom-0 z-40
+        bg="black/30" dark:bg="black/50"
+      />
+      <DialogContent
+        class="ui-dialog-content left-1/2 -translate-x-1/2 -translate-y-1/2"
+        fixed z-50 max-w="[calc(100vw-32px)]"
+        rounded-6px border p-20px outline-none
+        bg="$ui-surface-background" color="$ui-foreground"
+        :style="contentStyle"
+      >
+        <DialogTitle
+          v-if="title || $slots.title"
+          m-0 text-15px font-650 lh-20px break-anywhere
+        >
           <slot name="title">
             {{ title }}
           </slot>
         </DialogTitle>
 
-        <DialogDescription v-if="description || $slots.description" class="ui-dialog-description">
+        <DialogDescription
+          v-if="description || $slots.description"
+          mt-8px mb-0 text-13px lh-18px break-anywhere
+          light:color="$gray-5" dark:color="$gray-9"
+        >
           <slot name="description">
             {{ description }}
           </slot>
@@ -55,7 +72,12 @@ const contentStyle = computed(() => ({
 
         <slot />
 
-        <div v-if="$slots.actions" class="ui-dialog-actions" :data-layout="actionsLayout">
+        <div
+          v-if="$slots.actions"
+          class="ui-dialog-actions"
+          mt-20px flex flex-wrap gap-8px
+          :data-layout="actionsLayout"
+        >
           <slot name="actions" />
         </div>
       </DialogContent>
@@ -65,41 +87,23 @@ const contentStyle = computed(() => ({
 
 <style lang="scss" scoped>
 .ui-dialog-overlay {
-  @apply fixed left-0 right-0 bottom-0 z-40;
-  @apply bg-black/30 dark:bg-black/50;
   top: var(--window-titlebar-height, 40px);
 }
 
 .ui-dialog-content {
-  @apply fixed left-1/2 z-50 max-w-[calc(100vw-32px)];
-  @apply -translate-x-1/2 -translate-y-1/2 rounded-6px border p-20px outline-none;
-  @apply border-$ui-border bg-$ui-surface-background color-$ui-foreground;
-  border-style: solid;
-  box-shadow: var(--shadow-dialog);
+  @apply border-solid border-$ui-border shadow-$shadow-dialog;
   top: calc(var(--window-titlebar-height, 40px) + 50%);
 
   &[data-state="open"] {
-    animation: dialog-enter 140ms cubic-bezier(0.16, 1, 0.3, 1);
+    @apply animate-[dialog-enter_140ms_cubic-bezier(0.16,1,0.3,1)];
   }
 
   &[data-state="closed"] {
-    animation: dialog-exit 100ms ease-in;
+    @apply animate-[dialog-exit_100ms_ease-in];
   }
 }
 
-.ui-dialog-title {
-  @apply m-0 text-15px font-650 lh-20px;
-  overflow-wrap: anywhere;
-}
-
-.ui-dialog-description {
-  @apply mt-8px mb-0 text-13px lh-18px light:color-$gray-5 dark:color-$gray-9;
-  overflow-wrap: anywhere;
-}
-
 .ui-dialog-actions {
-  @apply mt-20px flex flex-wrap gap-8px;
-
   &[data-layout="reverse"] {
     @apply flex-row-reverse;
   }
@@ -111,14 +115,14 @@ const contentStyle = computed(() => ({
 
 @keyframes dialog-enter {
   from {
-    opacity: 0;
+    @apply opacity-0;
     transform: translate(-50%, calc(-50% + 6px)) scale(0.985);
   }
 }
 
 @keyframes dialog-exit {
   to {
-    opacity: 0;
+    @apply opacity-0;
     transform: translate(-50%, calc(-50% + 4px)) scale(0.985);
   }
 }
diff --git a/src/components/ui/UiScrollArea.vue b/src/components/ui/UiScrollArea.vue
index d348c44..d6ecda9 100644
--- a/src/components/ui/UiScrollArea.vue
+++ b/src/components/ui/UiScrollArea.vue
@@ -17,35 +17,42 @@ withDefaults(defineProps<{
 </script>
 
 <template>
-  <ScrollAreaRoot class="ui-scroll-root" :type="type">
-    <ScrollAreaViewport class="ui-scroll-viewport">
+  <ScrollAreaRoot class="ui-scroll-root" min-h-0 min-w-0 overflow-hidden :type="type">
+    <ScrollAreaViewport class="ui-scroll-viewport" size-full min-h-0 min-w-0>
       <slot />
     </ScrollAreaViewport>
 
-    <ScrollAreaScrollbar class="ui-scrollbar" orientation="vertical">
-      <ScrollAreaThumb class="ui-scroll-thumb" />
+    <ScrollAreaScrollbar
+      class="ui-scrollbar" z-10 flex touch-none select-none
+      p-1px bg-transparent transition-colors orientation="vertical"
+    >
+      <ScrollAreaThumb
+        class="ui-scroll-thumb" relative flex-1 rounded-full light:bg="$gray-9/45"
+        dark:bg="$gray-6/50"
+      />
     </ScrollAreaScrollbar>
-    <ScrollAreaScrollbar v-if="horizontal" class="ui-scrollbar horizontal" orientation="horizontal">
-      <ScrollAreaThumb class="ui-scroll-thumb" />
+    <ScrollAreaScrollbar
+      v-if="horizontal"
+      class="ui-scrollbar horizontal"
+      z-10 flex touch-none select-none p-1px
+      bg-transparent transition-colors
+      orientation="horizontal"
+    >
+      <ScrollAreaThumb
+        class="ui-scroll-thumb" relative flex-1 rounded-full light:bg="$gray-9/45"
+        dark:bg="$gray-6/50"
+      />
     </ScrollAreaScrollbar>
-    <ScrollAreaCorner v-if="horizontal" class="ui-scroll-corner" />
+    <ScrollAreaCorner v-if="horizontal" bg-transparent />
   </ScrollAreaRoot>
 </template>
 
 <style lang="scss">
-.ui-scroll-root {
-  @apply min-h-0 min-w-0 overflow-hidden;
-}
-
 .ui-scroll-viewport {
-  @apply size-full min-h-0 min-w-0;
   scrollbar-gutter: stable;
 }
 
 .ui-scrollbar {
-  @apply z-10 flex touch-none select-none p-1px;
-  @apply bg-transparent transition-colors;
-
   &[data-orientation="vertical"] {
     @apply w-6px;
   }
@@ -56,15 +63,8 @@ withDefaults(defineProps<{
 }
 
 .ui-scroll-thumb {
-  @apply relative flex-1 rounded-full;
-  @apply light:bg-$gray-9/45 dark:bg-$gray-6/50;
-
   &:hover {
     @apply light:bg-$gray-7/60 dark:bg-$gray-7/65;
   }
 }
-
-.ui-scroll-corner {
-  @apply bg-transparent;
-}
 </style>
diff --git a/src/components/ui/UiSegmentedControl.vue b/src/components/ui/UiSegmentedControl.vue
index aeb8b2c..aa8bf7b 100644
--- a/src/components/ui/UiSegmentedControl.vue
+++ b/src/components/ui/UiSegmentedControl.vue
@@ -35,11 +35,22 @@ function updateValue(value: unknown) {
     :model-value="modelValue"
     @update:model-value="updateValue"
   >
-    <div class="ui-segmented-control" :aria-label="ariaLabel">
+    <div
+      class="ui-segmented-control"
+      h-27px rounded-5px p-2px flex items-center
+      dark:bg="$ui-control-background"
+      light:bg="[color-mix(in_srgb,var(--ui-switch-background)_46%,var(--ui-surface-background))]"
+      :aria-label="ariaLabel"
+    >
       <ToggleGroupItem
         v-for="option in options"
         :key="option.value"
         class="ui-segmented-button"
+        h-24px border-0 rounded-4px px-8px bg-transparent
+        inline-flex items-center justify-center gap-5px whitespace-nowrap
+        text-12px cursor-pointer outline-none
+        light:color="$gray-5" dark:color="$gray-9"
+        transition duration-120 ease-out
         :class="{ active: modelValue === option.value }"
         :value="option.value"
         :title="option.tooltip"
@@ -54,18 +65,7 @@ function updateValue(value: unknown) {
 </template>
 
 <style lang="scss">
-.ui-segmented-control {
-  @apply h-27px rounded-5px p-2px flex items-center;
-  @apply dark:bg-$ui-control-background;
-  @apply light:[background:color-mix(in_srgb,var(--ui-switch-background)_46%,var(--ui-surface-background))];
-}
-
 .ui-segmented-button {
-  @apply h-24px border-0 rounded-4px px-8px bg-transparent;
-  @apply inline-flex items-center justify-center gap-5px whitespace-nowrap;
-  @apply text-12px cursor-pointer outline-none light:color-$gray-5 dark:color-$gray-9;
-  @apply transition duration-120 ease-out;
-
   &:hover:not(.active):not(:disabled) {
     @apply color-$ui-foreground;
     background-color: color-mix(in srgb, var(--ui-hover-background), var(--ui-foreground) 5%);
@@ -76,7 +76,7 @@ function updateValue(value: unknown) {
   }
 
   &:focus-visible {
-    box-shadow: var(--shadow-focus);
+    @apply shadow-$shadow-focus;
   }
 
   &:disabled {
diff --git a/src/components/ui/UiSelect.vue b/src/components/ui/UiSelect.vue
index 078e746..28c6346 100644
--- a/src/components/ui/UiSelect.vue
+++ b/src/components/ui/UiSelect.vue
@@ -68,7 +68,7 @@ function handleBlur(event: FocusEvent) {
         <span class="ui-select-label">
           {{ selectedOption?.label || placeholder }}
         </span>
-        <span v-if="selectedOption?.count !== undefined" class="ui-select-count-badge">
+        <span v-if="selectedOption?.count !== undefined" class="ui-select-count-badge" ml-6px>
           {{ selectedOption.count }}
         </span>
       </SelectValue>
@@ -115,11 +115,8 @@ function handleBlur(event: FocusEvent) {
   @apply h-30px rounded-md border px-9px;
   @apply inline-flex items-center justify-between gap-7px;
   @apply text-12px cursor-pointer outline-none;
-  @apply border-$ui-input bg-$ui-control-background color-$ui-foreground;
-  @apply transition duration-120 ease-out;
-  appearance: none;
-  border-style: solid;
-  box-shadow: var(--shadow-control);
+  @apply appearance-none border-solid border-$ui-input bg-$ui-control-background color-$ui-foreground;
+  @apply shadow-$shadow-control transition duration-120 ease-out;
 
   &:hover {
     border-color: color-mix(in srgb, var(--ui-input), var(--ui-foreground) 18%);
@@ -127,8 +124,7 @@ function handleBlur(event: FocusEvent) {
 
   &[data-state="open"],
   &:focus-visible {
-    border-color: var(--ui-ring);
-    box-shadow: var(--shadow-focus);
+    @apply border-$ui-ring shadow-$shadow-focus;
   }
 
   &[data-disabled] {
@@ -142,18 +138,16 @@ function handleBlur(event: FocusEvent) {
 
 .ui-select-icon {
   @apply shrink-0 flex items-center text-12px opacity-65;
-  color: var(--ui-muted-foreground);
+  @apply color-$ui-muted-foreground;
 }
 
 .ui-select-content {
   @apply z-50 rounded-md border p-1 outline-none;
-  @apply border-$ui-border bg-$ui-popover-background color-$ui-foreground;
-  @apply backdrop-blur-8px backdrop-saturate-140;
-  border-style: solid;
-  box-shadow: var(--shadow-popup);
+  @apply border-solid border-$ui-border bg-$ui-popover-background color-$ui-foreground;
+  @apply shadow-$shadow-popup backdrop-blur-8px backdrop-saturate-140;
 
   &[data-state="open"] {
-    animation: select-enter 120ms cubic-bezier(0.16, 1, 0.3, 1);
+    @apply animate-[select-enter_120ms_cubic-bezier(0.16,1,0.3,1)];
   }
 }
 
@@ -167,8 +161,7 @@ function handleBlur(event: FocusEvent) {
   @apply flex items-center cursor-pointer select-none text-12px;
 
   &[data-highlighted] {
-    @apply color-$ui-accent-foreground;
-    background-color: var(--ui-option-hover-background);
+    @apply bg-$ui-option-hover-background color-$ui-accent-foreground;
   }
 
   &[data-disabled] {
@@ -190,15 +183,12 @@ function handleBlur(event: FocusEvent) {
 }
 
 .ui-select-count-badge {
-  @apply shrink-0 size-18px rounded-full px-0;
-  @apply inline-flex items-center justify-center;
-  @apply text-11px font-650;
-  @apply bg-$ui-hover-background color-$ui-muted-foreground;
+  @apply shrink-0 text-11px font-650 color-$ui-muted-foreground;
 }
 
 @keyframes select-enter {
   from {
-    opacity: 0;
+    @apply opacity-0;
     transform: translateY(-3px) scale(0.985);
   }
 }
diff --git a/src/components/ui/UiSwitch.vue b/src/components/ui/UiSwitch.vue
index 321d907..eb89247 100644
--- a/src/components/ui/UiSwitch.vue
+++ b/src/components/ui/UiSwitch.vue
@@ -171,19 +171,15 @@ function handleClickCapture(event: MouseEvent) {
 .ui-switch {
   @apply h-20px w-36px shrink-0 rounded-full border p-2px outline-none;
   @apply inline-flex items-center cursor-pointer;
-  @apply border-$ui-input;
+  @apply appearance-none border-solid border-$ui-input bg-$ui-switch-background shadow-$shadow-control;
   @apply transition duration-120 ease-out;
-  appearance: none;
-  background-color: var(--ui-switch-background);
-  border-style: solid;
-  box-shadow: var(--shadow-control);
 
   &:hover {
     border-color: color-mix(in srgb, var(--ui-input), var(--ui-foreground) 20%);
   }
 
   &:focus-visible {
-    box-shadow: var(--shadow-focus);
+    @apply shadow-$shadow-focus;
   }
 
   &[data-state="checked"] {
@@ -196,13 +192,12 @@ function handleClickCapture(event: MouseEvent) {
 }
 
 .ui-switch-thumb {
-  @apply size-14px rounded-full bg-white;
+  @apply size-14px translate-x-0 rounded-full bg-white;
   touch-action: pan-y;
   border: 1px solid color-mix(in srgb, var(--ui-border), transparent 35%);
   box-shadow:
     0 1px 2px rgb(0 0 0 / 22%),
     0 1px 1px rgb(0 0 0 / 14%);
-  transform: translateX(0);
   transition:
     background-color 120ms ease,
     border-color 120ms ease,
@@ -210,16 +205,14 @@ function handleClickCapture(event: MouseEvent) {
 }
 
 .ui-switch.dragging .ui-switch-thumb {
-  cursor: grabbing;
+  @apply cursor-grabbing;
   transition:
     background-color 120ms ease,
     border-color 120ms ease;
 }
 
 .ui-switch[data-state="checked"] .ui-switch-thumb {
-  @apply bg-$ui-primary-foreground;
-  border-color: transparent;
-  transform: translateX(16px);
+  @apply translate-x-16px border-transparent bg-$ui-primary-foreground;
 }
 
 .ui-switch.drag-preview-checked {
@@ -227,13 +220,12 @@ function handleClickCapture(event: MouseEvent) {
 }
 
 .ui-switch.drag-preview-checked .ui-switch-thumb {
-  @apply bg-$ui-primary-foreground;
-  border-color: transparent;
+  @apply border-transparent bg-$ui-primary-foreground;
 }
 
 .ui-switch.drag-preview-unchecked {
   @apply border-$ui-input;
-  background-color: var(--ui-switch-background);
+  @apply bg-$ui-switch-background;
 }
 
 .ui-switch.drag-preview-unchecked .ui-switch-thumb {
@@ -242,6 +234,6 @@ function handleClickCapture(event: MouseEvent) {
 }
 
 .ui-switch:disabled .ui-switch-thumb {
-  cursor: not-allowed;
+  @apply cursor-not-allowed;
 }
 </style>
diff --git a/src/components/ui/UiToaster.vue b/src/components/ui/UiToaster.vue
index 616f174..1a525f8 100644
--- a/src/components/ui/UiToaster.vue
+++ b/src/components/ui/UiToaster.vue
@@ -108,24 +108,21 @@ function toastIcon(tone: UiToastTone) {
 
 <style lang="scss">
 .ui-toast-layer {
-  @apply fixed w-360px max-w-[calc(100vw-32px)];
+  @apply fixed z-1000 w-360px max-w-[calc(100vw-32px)];
   right: calc(env(safe-area-inset-right, 0px) + 16px);
   bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
-  z-index: 1000;
-  pointer-events: none;
+  @apply pointer-events-none;
 }
 
 .ui-toast-viewport {
   @apply m-0 flex w-full list-none flex-col-reverse gap-8px p-0 outline-none;
-  pointer-events: auto;
+  @apply pointer-events-auto;
 }
 
 .ui-toast {
   @apply relative grid min-h-54px grid-cols-[22px_minmax(0,1fr)_22px] items-start gap-10px rounded-8px border px-13px py-12px;
-  @apply color-$ui-foreground;
-  overflow: hidden;
+  @apply overflow-hidden border-solid color-$ui-foreground;
   border-color: color-mix(in srgb, var(--ui-border) 82%, transparent);
-  border-style: solid;
   background:
     linear-gradient(180deg, rgb(255 255 255 / 8%), transparent 46%),
     color-mix(in srgb, var(--ui-surface-background) 94%, var(--blue-12));
@@ -143,11 +140,11 @@ function toastIcon(tone: UiToastTone) {
   }
 
   &[data-state="open"] {
-    animation: toast-enter 210ms cubic-bezier(0.18, 0.92, 0.22, 1);
+    @apply animate-[toast-enter_210ms_cubic-bezier(0.18,0.92,0.22,1)];
   }
 
   &[data-state="closed"] {
-    animation: toast-exit 140ms cubic-bezier(0.4, 0, 1, 1);
+    @apply animate-[toast-exit_140ms_cubic-bezier(0.4,0,1,1)];
   }
 
   &[data-swipe="move"] {
@@ -155,28 +152,28 @@ function toastIcon(tone: UiToastTone) {
   }
 
   &[data-swipe="cancel"] {
-    transform: translateX(0);
-    transition: transform 120ms ease-out;
+    @apply translate-x-0;
+    @apply transition-transform duration-120 ease-out;
   }
 
   &[data-swipe="end"] {
-    animation: toast-swipe-out 120ms ease-out;
+    @apply animate-[toast-swipe-out_120ms_ease-out];
   }
 
   &.success {
-    @apply [--toast-tone:var(--green-4)] [--toast-tone-soft:color-mix(in_srgb,var(--green-5)_20%,transparent)];
+    @apply [--toast-tone:var(--green-4)];
   }
 
   &.warning {
-    @apply [--toast-tone:color-mix(in_srgb,var(--yellow-2)_72%,var(--orange-3))] [--toast-tone-soft:color-mix(in_srgb,var(--yellow-4)_22%,transparent)];
+    @apply [--toast-tone:color-mix(in_srgb,var(--yellow-2)_72%,var(--orange-3))];
   }
 
   &.error {
-    @apply [--toast-tone:var(--red-4)] [--toast-tone-soft:color-mix(in_srgb,var(--red-5)_20%,transparent)];
+    @apply [--toast-tone:var(--red-4)];
   }
 
   &.info {
-    @apply [--toast-tone:var(--ui-primary)] [--toast-tone-soft:color-mix(in_srgb,var(--ui-primary)_16%,transparent)];
+    @apply [--toast-tone:var(--ui-primary)];
   }
 }
 
@@ -194,19 +191,19 @@ function toastIcon(tone: UiToastTone) {
 }
 
 :root.dark .ui-toast.success {
-  @apply [--toast-tone:var(--green-10)] [--toast-tone-soft:color-mix(in_srgb,var(--green-8)_24%,transparent)];
+  @apply [--toast-tone:var(--green-10)];
 }
 
 :root.dark .ui-toast.warning {
-  @apply [--toast-tone:var(--yellow-10)] [--toast-tone-soft:color-mix(in_srgb,var(--yellow-8)_24%,transparent)];
+  @apply [--toast-tone:var(--yellow-10)];
 }
 
 :root.dark .ui-toast.error {
-  @apply [--toast-tone:var(--red-10)] [--toast-tone-soft:color-mix(in_srgb,var(--red-8)_24%,transparent)];
+  @apply [--toast-tone:var(--red-10)];
 }
 
 :root.dark .ui-toast.info {
-  @apply [--toast-tone:var(--ui-primary)] [--toast-tone-soft:color-mix(in_srgb,var(--ui-primary)_20%,transparent)];
+  @apply [--toast-tone:var(--ui-primary)];
 }
 
 .ui-toast-icon {
@@ -228,7 +225,7 @@ function toastIcon(tone: UiToastTone) {
 
 .ui-toast-title {
   @apply flex min-w-0 items-center gap-6px text-13px font-650 lh-18px tracking-0;
-  overflow-wrap: anywhere;
+  @apply break-anywhere;
 }
 
 .ui-toast-title-text {
@@ -243,7 +240,7 @@ function toastIcon(tone: UiToastTone) {
 
 .ui-toast-description {
   @apply text-12px lh-17px tracking-0 color-$ui-muted-foreground;
-  overflow-wrap: anywhere;
+  @apply break-anywhere;
 }
 
 .ui-toast-action {
@@ -261,21 +258,21 @@ function toastIcon(tone: UiToastTone) {
 
 @keyframes toast-enter {
   from {
-    opacity: 0;
+    @apply opacity-0;
     transform: translate(16px, 10px) scale(0.985);
   }
 }
 
 @keyframes toast-exit {
   to {
-    opacity: 0;
+    @apply opacity-0;
     transform: translate(14px, 8px) scale(0.985);
   }
 }
 
 @keyframes toast-swipe-out {
   to {
-    opacity: 0;
+    @apply opacity-0;
     transform: translateX(calc(var(--reka-toast-swipe-end-x) + 24px));
   }
 }
diff --git a/src/constants/projectActions.ts b/src/constants/projectActions.ts
new file mode 100644
index 0000000..90be793
--- /dev/null
+++ b/src/constants/projectActions.ts
@@ -0,0 +1,7 @@
+export const PROJECT_ACTION_KEYS = ['open', 'explorer', 'terminal', 'copy', 'more'] as const
+
+export type ProjectActionKey = typeof PROJECT_ACTION_KEYS[number]
+
+export const OPEN_WITH_ACTION_PREFIX = 'open-with:'
+export const DEFAULT_EDITOR_ACTION_PREFIX = 'default-editor:'
+export const DEFAULT_EDITOR_AUTO_ACTION = `${DEFAULT_EDITOR_ACTION_PREFIX}auto`
diff --git a/src/constants/storageKeys.ts b/src/constants/storageKeys.ts
new file mode 100644
index 0000000..03badef
--- /dev/null
+++ b/src/constants/storageKeys.ts
@@ -0,0 +1 @@
+export const HOME_LAYOUT_STORAGE_KEY = 'codenest:home-layout'
diff --git a/src/styles/main.scss b/src/styles/base.scss
similarity index 71%
rename from src/styles/main.scss
rename to src/styles/base.scss
index 692f6b4..bbbafdc 100644
--- a/src/styles/main.scss
+++ b/src/styles/base.scss
@@ -1,3 +1,4 @@
+/* Document base and native element defaults shared by the whole app. */
 body,
 html,
 #app {
@@ -7,6 +8,7 @@ html,
 }
 
 body {
+  /* Title font is reused by shell UI that needs platform-native text metrics. */
   --font-title:
     "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "PingFang TC", "Hiragino Sans GB",
     "Noto Sans CJK SC", "Noto Sans SC", system-ui, sans-serif;
@@ -14,22 +16,19 @@ body {
   font-family:
     "JetBrains Sans", "JetBrains Mono", "JetBrains Mono NL", "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC",
     "PingFang TC", "Hiragino Sans GB", "Noto Sans CJK SC", "Noto Sans SC", "Segoe UI", system-ui, sans-serif;
-  background: var(--ui-page-background);
-  color: var(--app-foreground);
+  @apply bg-$ui-page-background color-$app-foreground;
 }
 
 h1,
 h2 {
-  font-family: var(--font-title);
+  @apply font-$font-title;
 }
 
 button,
 input,
 select,
 textarea {
-  box-sizing: border-box;
-  border-style: solid;
-  appearance: none;
+  @apply box-border border-solid appearance-none;
   font: inherit;
 }
 
@@ -48,6 +47,7 @@ textarea::placeholder {
   @apply light:bg-$gray-11 dark:bg-$gray-5;
 }
 
+/* Keep motion accessible without removing transition definitions from components. */
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,
@@ -63,11 +63,12 @@ textarea::placeholder {
   color: inherit;
 }
 
+/* Some custom editor icons are monochrome masks and need an explicit foreground. */
 .ide-icon.monochrome-editor-icon,
 .ide-icon.i-custom\:cursor,
 .ide-icon.i-custom\:windsurf,
 .ide-icon.i-custom\:zed-industries,
 .ide-icon.i-custom\:sublime-text,
 .ide-icon.i-custom\:neovim {
-  color: var(--ui-foreground);
+  @apply color-$ui-foreground;
 }
diff --git a/src/styles/controls.scss b/src/styles/controls.scss
index 54f57e6..32f3297 100644
--- a/src/styles/controls.scss
+++ b/src/styles/controls.scss
@@ -1,3 +1,4 @@
+/* Temporary shared control classes used across settings and editor forms. */
 button,
 [role="button"] {
   @apply select-none;
@@ -10,8 +11,7 @@ button:not(:disabled),
 
 button:focus-visible,
 [role="button"]:focus-visible {
-  outline: none;
-  box-shadow: var(--shadow-focus);
+  @apply outline-none shadow-$shadow-focus;
 }
 
 button:disabled,
@@ -80,17 +80,14 @@ textarea:not(:disabled) {
 .path-input,
 .text-input {
   @apply h-30px min-w-0 rounded-md border px-9px outline-none;
-  @apply bg-$ui-control-background color-$ui-foreground;
+  @apply border-$ui-input bg-$ui-control-background color-$ui-foreground;
+  @apply appearance-none border-solid shadow-$shadow-control;
   @apply transition duration-120 ease-out;
-  appearance: none;
-  border-color: var(--ui-input);
-  border-style: solid;
-  box-shadow: var(--shadow-control);
 }
 
 .path-input::placeholder,
 .text-input::placeholder {
-  color: var(--ui-muted-foreground);
+  @apply color-$ui-muted-foreground;
 }
 
 .path-input:hover,
@@ -100,8 +97,7 @@ textarea:not(:disabled) {
 
 .path-input:focus,
 .text-input:focus {
-  border-color: var(--ui-ring);
-  box-shadow: var(--shadow-focus);
+  @apply border-$ui-ring shadow-$shadow-focus;
 }
 
 .path-input:disabled,
@@ -125,3 +121,50 @@ textarea:not(:disabled) {
   @apply bg-$ui-hover-background color-$ui-muted-foreground;
   @apply hover:color-$ui-foreground;
 }
+
+.status-message {
+  @apply break-anywhere;
+
+  &.empty {
+    @apply invisible;
+  }
+
+  &.neutral,
+  &.info {
+    @apply color-$ui-muted-foreground;
+  }
+
+  &.success {
+    color: color-mix(in srgb, var(--green-5) 90%, var(--ui-foreground));
+  }
+
+  &.warning {
+    color: color-mix(in srgb, var(--yellow-4) 90%, var(--ui-foreground));
+  }
+
+  &.error {
+    color: color-mix(in srgb, var(--red-5) 92%, var(--ui-foreground));
+  }
+}
+
+.dark .status-message.success {
+  color: color-mix(in srgb, var(--green-7) 86%, var(--gray-14));
+}
+
+.dark .status-message.warning {
+  color: color-mix(in srgb, var(--yellow-7) 86%, var(--gray-14));
+}
+
+.dark .status-message.error {
+  color: color-mix(in srgb, var(--red-7) 86%, var(--gray-14));
+}
+
+.is-spinning {
+  @apply animate-[spin-detect_0.8s_linear_infinite];
+}
+
+@keyframes spin-detect {
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 191bce0..6e587c9 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -1,6 +1,7 @@
 import 'uno.css'
+import './palette.scss'
 import './theme.scss'
-import './main.scss'
+import './base.scss'
 import './controls.scss'
 import './scrollbar.scss'
-import './transitionAndTransitionGroup.scss'
+import './transitions.scss'
diff --git a/src/styles/palette.scss b/src/styles/palette.scss
new file mode 100644
index 0000000..37b005e
--- /dev/null
+++ b/src/styles/palette.scss
@@ -0,0 +1,215 @@
+/* Base color palette. These tokens are design-system inventory and may be used indirectly. */
+:root {
+  /* Light palette. */
+  --gray-primary: var(--gray-1);
+  --gray-1: rgb(0 0 0);
+  --gray-2: rgb(39 40 46);
+  --gray-3: rgb(56 58 66);
+  --gray-4: rgb(73 75 87);
+  --gray-5: rgb(90 93 107);
+  --gray-6: rgb(108 112 126);
+  --gray-7: rgb(129 133 148);
+  --gray-8: rgb(168 173 189);
+  --gray-9: rgb(201 204 214);
+  --gray-10: rgb(211 213 219);
+  --gray-11: rgb(223 225 229);
+  --gray-12: rgb(235 236 240);
+  --gray-13: rgb(247 248 250);
+  --gray-14: rgb(255 255 255);
+
+  --blue-primary: var(--blue-4);
+  --blue-1: rgb(46 85 163);
+  --blue-2: rgb(49 95 189);
+  --blue-3: rgb(51 105 214);
+  --blue-4: rgb(53 116 240);
+  --blue-5: rgb(70 130 250);
+  --blue-6: rgb(88 140 243);
+  --blue-7: rgb(112 156 245);
+  --blue-8: rgb(136 173 247);
+  --blue-9: rgb(160 189 248);
+  --blue-10: rgb(194 214 252);
+  --blue-11: rgb(212 226 255);
+  --blue-12: rgb(237 243 255);
+  --blue-13: rgb(245 248 254);
+
+  --green-primary: var(--green-4);
+  --green-1: rgb(30 107 51);
+  --green-2: rgb(31 117 54);
+  --green-3: rgb(31 128 57);
+  --green-4: rgb(32 138 60);
+  --green-5: rgb(54 150 80);
+  --green-6: rgb(85 167 106);
+  --green-7: rgb(137 195 152);
+  --green-8: rgb(175 219 184);
+  --green-9: rgb(197 229 204);
+  --green-10: rgb(230 247 233);
+  --green-11: rgb(242 252 243);
+
+  --red-primary: var(--red-4);
+  --red-1: rgb(173 43 56);
+  --red-2: rgb(188 48 62);
+  --red-3: rgb(204 54 69);
+  --red-4: rgb(219 59 75);
+  --red-5: rgb(229 87 101);
+  --red-6: rgb(228 106 118);
+  --red-7: rgb(237 153 161);
+  --red-8: rgb(242 182 187);
+  --red-9: rgb(250 212 216);
+  --red-10: rgb(255 242 243);
+  --red-11: rgb(255 247 247);
+
+  --yellow-primary: var(--yellow-4);
+  --yellow-1: rgb(164 103 4);
+  --yellow-2: rgb(194 125 4);
+  --yellow-3: rgb(223 147 3);
+  --yellow-4: rgb(255 175 15);
+  --yellow-5: rgb(253 189 61);
+  --yellow-6: rgb(254 210 119);
+  --yellow-7: rgb(254 230 177);
+  --yellow-8: rgb(255 241 209);
+  --yellow-9: rgb(255 246 222);
+  --yellow-10: rgb(255 250 235);
+
+  --orange-primary: var(--orange-4);
+  --orange-1: rgb(161 73 22);
+  --orange-2: rgb(184 85 22);
+  --orange-3: rgb(206 97 23);
+  --orange-4: rgb(229 109 23);
+  --orange-5: rgb(236 143 76);
+  --orange-6: rgb(242 177 129);
+  --orange-7: rgb(249 210 182);
+  --orange-8: rgb(252 230 214);
+  --orange-9: rgb(255 244 235);
+
+  --purple-primary: var(--purple-4);
+  --purple-1: rgb(85 51 156);
+  --purple-2: rgb(100 60 184);
+  --purple-3: rgb(116 68 212);
+  --purple-4: rgb(131 77 240);
+  --purple-5: rgb(161 119 244);
+  --purple-6: rgb(191 161 248);
+  --purple-7: rgb(220 203 251);
+  --purple-8: rgb(239 229 255);
+  --purple-9: rgb(250 245 255);
+
+  --teal-primary: var(--teal-4);
+  --teal-1: rgb(9 106 110);
+  --teal-2: rgb(7 122 127);
+  --teal-3: rgb(5 139 144);
+  --teal-4: rgb(3 155 161);
+  --teal-5: rgb(63 179 184);
+  --teal-6: rgb(123 204 207);
+  --teal-7: rgb(182 228 229);
+  --teal-8: rgb(218 244 245);
+  --teal-9: rgb(242 252 252);
+}
+
+:root.dark {
+  /* Dark palette. */
+  --gray-primary: var(--gray-1);
+  --gray-1: rgb(30 31 34);
+  --gray-2: rgb(43 45 48);
+  --gray-3: rgb(57 59 64);
+  --gray-4: rgb(67 69 74);
+  --gray-5: rgb(78 81 87);
+  --gray-6: rgb(90 93 99);
+  --gray-7: rgb(111 115 122);
+  --gray-8: rgb(134 138 145);
+  --gray-9: rgb(157 160 168);
+  --gray-10: rgb(180 184 191);
+  --gray-11: rgb(206 208 214);
+  --gray-12: rgb(223 225 229);
+  --gray-13: rgb(240 241 242);
+  --gray-14: rgb(255 255 255);
+
+  --blue-primary: var(--blue-6);
+  --blue-1: rgb(37 50 77);
+  --blue-2: rgb(46 67 110);
+  --blue-3: rgb(53 83 143);
+  --blue-4: rgb(55 95 173);
+  --blue-5: rgb(54 106 207);
+  --blue-6: rgb(53 116 240);
+  --blue-7: rgb(70 127 242);
+  --blue-8: rgb(84 138 247);
+  --blue-9: rgb(107 155 250);
+  --blue-10: rgb(131 172 252);
+  --blue-11: rgb(153 187 255);
+
+  --green-primary: var(--green-6);
+  --green-1: rgb(37 54 39);
+  --green-2: rgb(55 82 57);
+  --green-3: rgb(67 105 70);
+  --green-4: rgb(78 128 82);
+  --green-5: rgb(87 150 92);
+  --green-6: rgb(95 173 101);
+  --green-7: rgb(115 189 121);
+  --green-8: rgb(137 204 142);
+  --green-9: rgb(160 219 165);
+  --green-10: rgb(185 235 189);
+  --green-11: rgb(212 250 215);
+
+  --red-primary: var(--red-6);
+  --red-1: rgb(64 41 41);
+  --red-2: rgb(94 56 56);
+  --red-3: rgb(122 67 67);
+  --red-4: rgb(156 78 78);
+  --red-5: rgb(189 87 87);
+  --red-6: rgb(219 92 92);
+  --red-7: rgb(227 119 116);
+  --red-8: rgb(235 147 141);
+  --red-9: rgb(242 177 170);
+  --red-10: rgb(247 204 198);
+  --red-11: rgb(250 227 222);
+
+  --yellow-primary: var(--yellow-7);
+  --yellow-1: rgb(61 50 35);
+  --yellow-2: rgb(94 77 51);
+  --yellow-3: rgb(130 106 65);
+  --yellow-4: rgb(158 129 74);
+  --yellow-5: rgb(186 151 82);
+  --yellow-6: rgb(214 174 88);
+  --yellow-7: rgb(242 197 92);
+  --yellow-8: rgb(245 210 115);
+  --yellow-9: rgb(247 222 139);
+  --yellow-10: rgb(252 235 164);
+  --yellow-11: rgb(255 246 189);
+
+  --orange-primary: var(--orange-6);
+  --orange-1: rgb(69 50 43);
+  --orange-2: rgb(97 68 56);
+  --orange-3: rgb(130 88 69);
+  --orange-4: rgb(163 107 78);
+  --orange-5: rgb(199 125 85);
+  --orange-6: rgb(224 136 85);
+  --orange-7: rgb(229 152 108);
+  --orange-8: rgb(240 172 129);
+  --orange-9: rgb(245 189 152);
+  --orange-10: rgb(250 206 175);
+  --orange-11: rgb(255 223 199);
+
+  --purple-primary: var(--purple-6);
+  --purple-1: rgb(47 41 54);
+  --purple-2: rgb(67 51 88);
+  --purple-3: rgb(88 61 122);
+  --purple-4: rgb(108 70 156);
+  --purple-5: rgb(129 80 190);
+  --purple-6: rgb(149 90 224);
+  --purple-7: rgb(165 113 230);
+  --purple-8: rgb(181 137 236);
+  --purple-9: rgb(196 160 243);
+  --purple-10: rgb(212 184 249);
+  --purple-11: rgb(228 206 255);
+
+  --teal-primary: var(--teal-6);
+  --teal-1: rgb(29 56 56);
+  --teal-2: rgb(30 77 74);
+  --teal-3: rgb(32 99 93);
+  --teal-4: rgb(33 120 111);
+  --teal-5: rgb(35 142 130);
+  --teal-6: rgb(36 163 148);
+  --teal-7: rgb(66 177 164);
+  --teal-8: rgb(96 192 181);
+  --teal-9: rgb(125 206 197);
+  --teal-10: rgb(155 221 214);
+  --teal-11: rgb(185 235 230);
+}
diff --git a/src/styles/scrollbar.scss b/src/styles/scrollbar.scss
index 9afc272..b040e7f 100644
--- a/src/styles/scrollbar.scss
+++ b/src/styles/scrollbar.scss
@@ -1,3 +1,4 @@
+/* Shared native scrollbar tokens and utility classes. */
 :root {
   --ui-scrollbar-size: 6px;
   --ui-scrollbar-thin-size: 4px;
@@ -14,15 +15,8 @@
 *::-webkit-scrollbar-button:decrement,
 *::-webkit-scrollbar-button:vertical,
 *::-webkit-scrollbar-button:horizontal {
-  display: none !important;
-  width: 0 !important;
-  min-width: 0 !important;
-  height: 0 !important;
-  min-height: 0 !important;
-  margin: 0 !important;
-  padding: 0 !important;
-  border: 0 !important;
-  background: transparent !important;
+  @apply m-0! h-0! min-h-0! w-0! min-w-0! border-0! bg-transparent! p-0!;
+  @apply hidden!;
 }
 
 .ui-native-scrollbar,
@@ -38,13 +32,13 @@
 .ui-native-scrollbar::-webkit-scrollbar {
   width: var(--ui-scrollbar-size);
   height: var(--ui-scrollbar-size);
-  display: block;
+  @apply block;
 }
 
 .ui-thin-scrollbar::-webkit-scrollbar {
   width: var(--ui-scrollbar-thin-size);
   height: var(--ui-scrollbar-thin-size);
-  display: block;
+  @apply block;
 }
 
 .ui-thin-scrollbar[data-reka-select-viewport],
@@ -57,12 +51,12 @@
 .ui-thin-scrollbar[data-reka-combobox-viewport]::-webkit-scrollbar {
   width: var(--ui-scrollbar-thin-size) !important;
   height: var(--ui-scrollbar-thin-size) !important;
-  display: block !important;
+  @apply block!;
 }
 
 .ui-native-scrollbar::-webkit-scrollbar-track,
 .ui-thin-scrollbar::-webkit-scrollbar-track {
-  background: transparent;
+  @apply bg-transparent;
 }
 
 .ui-native-scrollbar::-webkit-scrollbar-thumb,
@@ -70,15 +64,15 @@
   border: 1px solid transparent;
   border-radius: 999px;
   background-clip: content-box;
-  background-color: var(--ui-scrollbar-thumb);
+  @apply bg-$ui-scrollbar-thumb;
 }
 
 .ui-native-scrollbar::-webkit-scrollbar-thumb:hover,
 .ui-thin-scrollbar::-webkit-scrollbar-thumb:hover {
-  background-color: var(--ui-scrollbar-thumb-hover);
+  @apply bg-$ui-scrollbar-thumb-hover;
 }
 
 .ui-native-scrollbar::-webkit-scrollbar-corner,
 .ui-thin-scrollbar::-webkit-scrollbar-corner {
-  background: transparent;
+  @apply bg-transparent;
 }
diff --git a/src/styles/theme.scss b/src/styles/theme.scss
index beb640a..c6b863c 100644
--- a/src/styles/theme.scss
+++ b/src/styles/theme.scss
@@ -1,126 +1,20 @@
+/* Semantic UI tokens mapped from the palette. Components should prefer these variables. */
 :root {
   color-scheme: light;
 
-  --gray-primary: var(--gray-1);
-  --gray-1: rgb(0 0 0);
-  --gray-2: rgb(39 40 46);
-  --gray-3: rgb(56 58 66);
-  --gray-4: rgb(73 75 87);
-  --gray-5: rgb(90 93 107);
-  --gray-6: rgb(108 112 126);
-  --gray-7: rgb(129 133 148);
-  --gray-8: rgb(168 173 189);
-  --gray-9: rgb(201 204 214);
-  --gray-10: rgb(211 213 219);
-  --gray-11: rgb(223 225 229);
-  --gray-12: rgb(235 236 240);
-  --gray-13: rgb(247 248 250);
-  --gray-14: rgb(255 255 255);
-
-  --blue-primary: var(--blue-4);
-  --blue-1: rgb(46 85 163);
-  --blue-2: rgb(49 95 189);
-  --blue-3: rgb(51 105 214);
-  --blue-4: rgb(53 116 240);
-  --blue-5: rgb(70 130 250);
-  --blue-6: rgb(88 140 243);
-  --blue-7: rgb(112 156 245);
-  --blue-8: rgb(136 173 247);
-  --blue-9: rgb(160 189 248);
-  --blue-10: rgb(194 214 252);
-  --blue-11: rgb(212 226 255);
-  --blue-12: rgb(237 243 255);
-  --blue-13: rgb(245 248 254);
-
-  --green-primary: var(--green-4);
-  --green-1: rgb(30 107 51);
-  --green-2: rgb(31 117 54);
-  --green-3: rgb(31 128 57);
-  --green-4: rgb(32 138 60);
-  --green-5: rgb(54 150 80);
-  --green-6: rgb(85 167 106);
-  --green-7: rgb(137 195 152);
-  --green-8: rgb(175 219 184);
-  --green-9: rgb(197 229 204);
-  --green-10: rgb(230 247 233);
-  --green-11: rgb(242 252 243);
-
-  --red-primary: var(--red-4);
-  --red-1: rgb(173 43 56);
-  --red-2: rgb(188 48 62);
-  --red-3: rgb(204 54 69);
-  --red-4: rgb(219 59 75);
-  --red-5: rgb(229 87 101);
-  --red-6: rgb(228 106 118);
-  --red-7: rgb(237 153 161);
-  --red-8: rgb(242 182 187);
-  --red-9: rgb(250 212 216);
-  --red-10: rgb(255 242 243);
-  --red-11: rgb(255 247 247);
-
-  --yellow-primary: var(--yellow-4);
-  --yellow-1: rgb(164 103 4);
-  --yellow-2: rgb(194 125 4);
-  --yellow-3: rgb(223 147 3);
-  --yellow-4: rgb(255 175 15);
-  --yellow-5: rgb(253 189 61);
-  --yellow-6: rgb(254 210 119);
-  --yellow-7: rgb(254 230 177);
-  --yellow-8: rgb(255 241 209);
-  --yellow-9: rgb(255 246 222);
-  --yellow-10: rgb(255 250 235);
-
-  --orange-primary: var(--orange-4);
-  --orange-1: rgb(161 73 22);
-  --orange-2: rgb(184 85 22);
-  --orange-3: rgb(206 97 23);
-  --orange-4: rgb(229 109 23);
-  --orange-5: rgb(236 143 76);
-  --orange-6: rgb(242 177 129);
-  --orange-7: rgb(249 210 182);
-  --orange-8: rgb(252 230 214);
-  --orange-9: rgb(255 244 235);
-
-  --purple-primary: var(--purple-4);
-  --purple-1: rgb(85 51 156);
-  --purple-2: rgb(100 60 184);
-  --purple-3: rgb(116 68 212);
-  --purple-4: rgb(131 77 240);
-  --purple-5: rgb(161 119 244);
-  --purple-6: rgb(191 161 248);
-  --purple-7: rgb(220 203 251);
-  --purple-8: rgb(239 229 255);
-  --purple-9: rgb(250 245 255);
-
-  --teal-primary: var(--teal-4);
-  --teal-1: rgb(9 106 110);
-  --teal-2: rgb(7 122 127);
-  --teal-3: rgb(5 139 144);
-  --teal-4: rgb(3 155 161);
-  --teal-5: rgb(63 179 184);
-  --teal-6: rgb(123 204 207);
-  --teal-7: rgb(182 228 229);
-  --teal-8: rgb(218 244 245);
-  --teal-9: rgb(242 252 252);
-
-  --toolbar-hover: rgb(0 0 0 / 10%);
-  --toolbar-active: rgb(0 0 0 / 5%);
   --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--ui-ring), transparent 78%);
   --shadow-control: 0 1px 2px rgb(0 0 0 / 4%), 0 1px 1px rgb(0 0 0 / 3%);
   --shadow-surface: 0 1px 2px rgb(0 0 0 / 5%), 0 6px 16px rgb(31 35 40 / 5%);
   --shadow-surface-hover: 0 2px 4px rgb(0 0 0 / 6%), 0 10px 24px rgb(31 35 40 / 8%);
   --shadow-popup: 0 18px 44px rgb(31 35 40 / 16%), 0 6px 18px rgb(31 35 40 / 10%), 0 1px 2px rgb(0 0 0 / 6%);
   --shadow-dialog: 0 30px 72px rgb(31 35 40 / 22%), 0 12px 28px rgb(31 35 40 / 14%), 0 2px 6px rgb(0 0 0 / 8%);
-  --shadow-editor-tooltip: 0 10px 28px rgb(31 35 40 / 14%), 0 2px 8px rgb(0 0 0 / 8%);
   --ui-page-background: var(--gray-13);
   --ui-surface-background: var(--gray-14);
   --ui-surface-muted-background: var(--gray-13);
-  --app-background: var(--ui-page-background);
   --app-foreground: var(--gray-1);
   --theme-text-caret: var(--gray-1);
   --system-theme-color: var(--blue-5);
   --system-theme-foreground: rgb(255 255 255);
-  --ui-background: var(--ui-surface-background);
   --ui-control-background: color-mix(in srgb, var(--ui-surface-background) 72%, var(--ui-page-background));
   --ui-popover-background: color-mix(in srgb, var(--ui-surface-background) 88%, var(--blue-12));
   --ui-checkbox-background: color-mix(in srgb, var(--ui-surface-background) 52%, var(--ui-page-background));
@@ -138,136 +32,36 @@
   --ui-primary-hover: var(--gray-3);
   --ui-primary-active: var(--gray-4);
   --ui-primary-foreground: var(--gray-14);
+
+  /* Feature tokens: project source badges. */
+  --project-tag-temporary-text: var(--orange-2);
+  --project-tag-temporary-bg: color-mix(in srgb, var(--orange-5) 20%, transparent);
+  --project-tag-remote-text: var(--teal-2);
+  --project-tag-remote-bg: color-mix(in srgb, var(--teal-4) 18%, transparent);
+  --project-tag-mine-text: var(--blue-3);
+  --project-tag-mine-bg: color-mix(in srgb, var(--blue-5) 16%, transparent);
+  --project-tag-fork-text: var(--purple-2);
+  --project-tag-fork-bg: color-mix(in srgb, var(--purple-5) 18%, transparent);
+  --project-tag-clone-text: var(--yellow-2);
+  --project-tag-clone-bg: color-mix(in srgb, var(--yellow-4) 22%, transparent);
 }
 
 :root.dark {
   color-scheme: dark;
 
-  --gray-primary: var(--gray-1);
-  --gray-1: rgb(30 31 34);
-  --gray-2: rgb(43 45 48);
-  --gray-3: rgb(57 59 64);
-  --gray-4: rgb(67 69 74);
-  --gray-5: rgb(78 81 87);
-  --gray-6: rgb(90 93 99);
-  --gray-7: rgb(111 115 122);
-  --gray-8: rgb(134 138 145);
-  --gray-9: rgb(157 160 168);
-  --gray-10: rgb(180 184 191);
-  --gray-11: rgb(206 208 214);
-  --gray-12: rgb(223 225 229);
-  --gray-13: rgb(240 241 242);
-  --gray-14: rgb(255 255 255);
-
-  --blue-primary: var(--blue-6);
-  --blue-1: rgb(37 50 77);
-  --blue-2: rgb(46 67 110);
-  --blue-3: rgb(53 83 143);
-  --blue-4: rgb(55 95 173);
-  --blue-5: rgb(54 106 207);
-  --blue-6: rgb(53 116 240);
-  --blue-7: rgb(70 127 242);
-  --blue-8: rgb(84 138 247);
-  --blue-9: rgb(107 155 250);
-  --blue-10: rgb(131 172 252);
-  --blue-11: rgb(153 187 255);
-
-  --green-primary: var(--green-6);
-  --green-1: rgb(37 54 39);
-  --green-2: rgb(55 82 57);
-  --green-3: rgb(67 105 70);
-  --green-4: rgb(78 128 82);
-  --green-5: rgb(87 150 92);
-  --green-6: rgb(95 173 101);
-  --green-7: rgb(115 189 121);
-  --green-8: rgb(137 204 142);
-  --green-9: rgb(160 219 165);
-  --green-10: rgb(185 235 189);
-  --green-11: rgb(212 250 215);
-
-  --red-primary: var(--red-6);
-  --red-1: rgb(64 41 41);
-  --red-2: rgb(94 56 56);
-  --red-3: rgb(122 67 67);
-  --red-4: rgb(156 78 78);
-  --red-5: rgb(189 87 87);
-  --red-6: rgb(219 92 92);
-  --red-7: rgb(227 119 116);
-  --red-8: rgb(235 147 141);
-  --red-9: rgb(242 177 170);
-  --red-10: rgb(247 204 198);
-  --red-11: rgb(250 227 222);
-
-  --yellow-primary: var(--yellow-7);
-  --yellow-1: rgb(61 50 35);
-  --yellow-2: rgb(94 77 51);
-  --yellow-3: rgb(130 106 65);
-  --yellow-4: rgb(158 129 74);
-  --yellow-5: rgb(186 151 82);
-  --yellow-6: rgb(214 174 88);
-  --yellow-7: rgb(242 197 92);
-  --yellow-8: rgb(245 210 115);
-  --yellow-9: rgb(247 222 139);
-  --yellow-10: rgb(252 235 164);
-  --yellow-11: rgb(255 246 189);
-
-  --orange-primary: var(--orange-6);
-  --orange-1: rgb(69 50 43);
-  --orange-2: rgb(97 68 56);
-  --orange-3: rgb(130 88 69);
-  --orange-4: rgb(163 107 78);
-  --orange-5: rgb(199 125 85);
-  --orange-6: rgb(224 136 85);
-  --orange-7: rgb(229 152 108);
-  --orange-8: rgb(240 172 129);
-  --orange-9: rgb(245 189 152);
-  --orange-10: rgb(250 206 175);
-  --orange-11: rgb(255 223 199);
-
-  --purple-primary: var(--purple-6);
-  --purple-1: rgb(47 41 54);
-  --purple-2: rgb(67 51 88);
-  --purple-3: rgb(88 61 122);
-  --purple-4: rgb(108 70 156);
-  --purple-5: rgb(129 80 190);
-  --purple-6: rgb(149 90 224);
-  --purple-7: rgb(165 113 230);
-  --purple-8: rgb(181 137 236);
-  --purple-9: rgb(196 160 243);
-  --purple-10: rgb(212 184 249);
-  --purple-11: rgb(228 206 255);
-
-  --teal-primary: var(--teal-6);
-  --teal-1: rgb(29 56 56);
-  --teal-2: rgb(30 77 74);
-  --teal-3: rgb(32 99 93);
-  --teal-4: rgb(33 120 111);
-  --teal-5: rgb(35 142 130);
-  --teal-6: rgb(36 163 148);
-  --teal-7: rgb(66 177 164);
-  --teal-8: rgb(96 192 181);
-  --teal-9: rgb(125 206 197);
-  --teal-10: rgb(155 221 214);
-  --teal-11: rgb(185 235 230);
-
-  --toolbar-hover: rgb(255 255 255 / 10%);
-  --toolbar-active: rgb(255 255 255 / 5%);
   --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--ui-ring), transparent 78%);
   --shadow-control: 0 1px 2px rgb(0 0 0 / 34%), inset 0 1px 0 rgb(255 255 255 / 4%);
   --shadow-surface: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 20px rgb(0 0 0 / 18%), inset 0 1px 0 rgb(255 255 255 / 3%);
   --shadow-surface-hover: 0 2px 4px rgb(0 0 0 / 34%), 0 14px 28px rgb(0 0 0 / 24%), inset 0 1px 0 rgb(255 255 255 / 4%);
   --shadow-popup: 0 22px 56px rgb(0 0 0 / 58%), 0 8px 22px rgb(0 0 0 / 42%), inset 0 1px 0 rgb(255 255 255 / 6%);
   --shadow-dialog: 0 34px 84px rgb(0 0 0 / 66%), 0 12px 32px rgb(0 0 0 / 48%), inset 0 1px 0 rgb(255 255 255 / 6%);
-  --shadow-editor-tooltip: 0 14px 34px rgb(0 0 0 / 50%), 0 3px 12px rgb(0 0 0 / 34%);
   --ui-page-background: var(--gray-1);
   --ui-surface-background: var(--gray-2);
   --ui-surface-muted-background: var(--gray-3);
-  --app-background: var(--ui-page-background);
   --app-foreground: var(--gray-12);
   --theme-text-caret: var(--gray-14);
   --system-theme-color: var(--blue-8);
   --system-theme-foreground: rgb(255 255 255);
-  --ui-background: var(--ui-surface-background);
   --ui-control-background: color-mix(in srgb, var(--ui-surface-background), var(--gray-14) 7%);
   --ui-popover-background: color-mix(in srgb, var(--ui-surface-background), var(--gray-14) 10%);
   --ui-checkbox-background: color-mix(in srgb, var(--ui-surface-background), var(--gray-14) 4%);
@@ -285,8 +79,21 @@
   --ui-primary-hover: var(--gray-13);
   --ui-primary-active: var(--gray-12);
   --ui-primary-foreground: var(--gray-1);
+
+  /* Feature tokens: project source badges. */
+  --project-tag-temporary-text: var(--orange-8);
+  --project-tag-temporary-bg: color-mix(in srgb, var(--orange-5) 24%, transparent);
+  --project-tag-remote-text: var(--teal-8);
+  --project-tag-remote-bg: color-mix(in srgb, var(--teal-5) 22%, transparent);
+  --project-tag-mine-text: var(--blue-8);
+  --project-tag-mine-bg: color-mix(in srgb, var(--blue-5) 22%, transparent);
+  --project-tag-fork-text: var(--purple-8);
+  --project-tag-fork-bg: color-mix(in srgb, var(--purple-5) 24%, transparent);
+  --project-tag-clone-text: var(--yellow-8);
+  --project-tag-clone-bg: color-mix(in srgb, var(--yellow-5) 24%, transparent);
 }
 
+/* Theme color variants override the semantic primary tokens. */
 :root.theme-blue {
   --theme-text-caret: var(--blue-5);
   --ui-ring: var(--blue-5);
diff --git a/src/styles/transitionAndTransitionGroup.scss b/src/styles/transitionAndTransitionGroup.scss
deleted file mode 100644
index 3233625..0000000
--- a/src/styles/transitionAndTransitionGroup.scss
+++ /dev/null
@@ -1,52 +0,0 @@
-// Copy from BewlyBewly: https://github.com/BewlyBewly/BewlyBewly
-
-.page-fade-enter-active,
-.page-fade-leave-active {
-  --uno: "transition-opacity duration-300 transform-gpu";
-}
-.page-fade-enter-from,
-.page-fade-leave-to {
-  --uno: "opacity-0";
-}
-.page-fade-leave-to {
-  --uno: "hidden";
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  --uno: "transition-opacity duration-300";
-}
-.fade-enter-from,
-.fade-leave-to {
-  --uno: "opacity-0";
-}
-
-.list-enter-active,
-.list-leave-active {
-  --uno: "transition-all duration-300";
-}
-.list-enter-from,
-.list-leave-to {
-  --uno: "opacity-0 translate-y-3 transform-gpu";
-}
-.list-leave-to {
-  --uno: "hidden";
-}
-
-.modal-enter-active,
-.modal-leave-active {
-  --uno: "transition-all duration-500 transform-gpu";
-}
-.modal-enter-from,
-.modal-leave-to {
-  --uno: "opacity-0 scale-105";
-}
-
-.dropdown-enter-active,
-.dropdown-leave-active {
-  --uno: "transition-all duration-300 transform-gpu";
-}
-.dropdown-enter-from,
-.dropdown-leave-to {
-  --uno: "opacity-0 transform-gpu scale-95 -translate-y-4 filter blur-sm";
-}
diff --git a/src/styles/transitions.scss b/src/styles/transitions.scss
new file mode 100644
index 0000000..835689d
--- /dev/null
+++ b/src/styles/transitions.scss
@@ -0,0 +1,52 @@
+/* Global Vue transition hooks. */
+
+.page-fade-enter-active,
+.page-fade-leave-active {
+  @apply transition-opacity duration-300 transform-gpu;
+}
+.page-fade-enter-from,
+.page-fade-leave-to {
+  @apply opacity-0;
+}
+.page-fade-leave-to {
+  @apply hidden;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  @apply transition-opacity duration-300;
+}
+.fade-enter-from,
+.fade-leave-to {
+  @apply opacity-0;
+}
+
+.list-enter-active,
+.list-leave-active {
+  @apply transition-all duration-300;
+}
+.list-enter-from,
+.list-leave-to {
+  @apply opacity-0 translate-y-3 transform-gpu;
+}
+.list-leave-to {
+  @apply hidden;
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  @apply transition-all duration-500 transform-gpu;
+}
+.modal-enter-from,
+.modal-leave-to {
+  @apply opacity-0 scale-105;
+}
+
+.dropdown-enter-active,
+.dropdown-leave-active {
+  @apply transition-all duration-300 transform-gpu;
+}
+.dropdown-enter-from,
+.dropdown-leave-to {
+  @apply opacity-0 transform-gpu scale-95 -translate-y-4 filter blur-sm;
+}
diff --git a/src/utils/projectFormatters.ts b/src/utils/projectFormatters.ts
new file mode 100644
index 0000000..8676177
--- /dev/null
+++ b/src/utils/projectFormatters.ts
@@ -0,0 +1,45 @@
+import { LicenseEnum } from '~/constants/license'
+import { ProjectKind } from '~/constants/localProject'
+
+type Translate = (key: string) => string
+
+export function kindLabel(kind: ProjectKind, t: Translate) {
+  switch (kind) {
+    case ProjectKind.FORK:
+      return t('app.project_kind.fork')
+    case ProjectKind.CLONE:
+      return t('app.project_kind.clone')
+    case ProjectKind.MINE:
+    default:
+      return t('app.project_kind.mine')
+  }
+}
+
+export function shortLicense(license: LicenseEnum | string | null | undefined, t: Translate) {
+  if (!license || license === LicenseEnum.NONE)
+    return t('app.license.none')
+  if (license === LicenseEnum.MIT)
+    return 'MIT'
+  if (license === LicenseEnum.APACHE_2_0)
+    return 'Apache-2.0'
+  if (license === LicenseEnum.GPLV3)
+    return 'GPL-3.0'
+  if (license === LicenseEnum.GPLV2)
+    return 'GPL-2.0'
+  if (license === LicenseEnum.OTHER)
+    return t('app.license.other')
+  return String(license).replace(' License', '').replace('GNU ', '')
+}
+
+export function formatProjectLanguage(
+  language: string | null | undefined,
+  t: Translate,
+  emptyFallbackKey = 'app.common.unknown',
+) {
+  const normalized = language?.trim()
+  if (!normalized || normalized.toLowerCase() === 'unknown' || normalized.toLowerCase() === 'unknow')
+    return t(emptyFallbackKey)
+  if (normalized === 'Other')
+    return t('language_pop.other')
+  return normalized
+}
diff --git a/src/utils/projectSource.ts b/src/utils/projectSource.ts
new file mode 100644
index 0000000..0fb3799
--- /dev/null
+++ b/src/utils/projectSource.ts
@@ -0,0 +1,63 @@
+import type { LocalProject } from '~/constants/localProject'
+import { ProjectKind } from '~/constants/localProject'
+
+export const GITHUB_REPOSITORY_RE = /github\.com[/:]([^/:\s]+\/[^/\s#.]+)/
+
+export function extractGithubRepositoryName(url: string) {
+  return url.match(GITHUB_REPOSITORY_RE)?.[1]?.replace(/\.git$/, '') || ''
+}
+
+export function normalizeProjectSourceExternalUrl(url: string) {
+  const githubName = extractGithubRepositoryName(url)
+  if (githubName)
+    return `https://github.com/${githubName}`
+
+  if (/^https?:\/\//i.test(url))
+    return url
+
+  return `https://${url}`
+}
+
+export function sourceNameFromUrl(url: string) {
+  const githubName = extractGithubRepositoryName(url)
+  if (githubName)
+    return githubName
+
+  try {
+    const parsedUrl = new URL(url)
+    const pathParts = parsedUrl.pathname.split('/').filter(Boolean)
+    return pathParts.length >= 2
+      ? pathParts.slice(-2).join('/')
+      : parsedUrl.hostname
+  }
+  catch {
+    return url
+  }
+}
+
+export function isSourceProject(project: LocalProject) {
+  return project.kind === ProjectKind.FORK || project.kind === ProjectKind.CLONE
+}
+
+export function projectSourceUrl(project: LocalProject) {
+  return isSourceProject(project) ? project.fromUrl?.trim() || '' : ''
+}
+
+export function projectSourceExternalUrl(project: LocalProject) {
+  const sourceUrl = projectSourceUrl(project)
+  if (!sourceUrl)
+    return ''
+
+  return normalizeProjectSourceExternalUrl(sourceUrl)
+}
+
+export function projectSourceName(project: LocalProject) {
+  const sourceUrl = projectSourceUrl(project)
+  return isSourceProject(project)
+    ? project.fromName?.trim() || (sourceUrl ? sourceNameFromUrl(sourceUrl) : '')
+    : ''
+}
+
+export function hasProjectSource(project: LocalProject) {
+  return !!projectSourceName(project)
+}
diff --git a/src/views/HomeView/HomeView.vue b/src/views/HomeView/HomeView.vue
index 28ed12e..3e975e1 100644
--- a/src/views/HomeView/HomeView.vue
+++ b/src/views/HomeView/HomeView.vue
@@ -2,50 +2,29 @@
 import { useI18n } from 'vue-i18n'
 
 import mainLangPop from '~/components/LanguagePop/LanguagePop.vue'
-import { showPop as showLanguagePop } from '~/components/LanguagePop/LanguagePopProvider'
-import { setRemoveAnimationCallback, showRemoveDialog } from '~/components/RemoveProjectDialog'
-import { showToast } from '~/components/ui/toast'
-import UiActionMenu from '~/components/ui/UiActionMenu.vue'
-import UiScrollArea from '~/components/ui/UiScrollArea.vue'
-import UiSegmentedControl from '~/components/ui/UiSegmentedControl.vue'
-import UiSelect from '~/components/ui/UiSelect.vue'
-import { SettingPageEnum, ThemeEnum, ViewEnum } from '~/constants/appEnums'
+import { setRemoveAnimationCallback } from '~/components/RemoveProjectDialog'
+import type { ViewEnum } from '~/constants/appEnums'
 import type { CodeEditorEnum } from '~/constants/codeEditor'
-import { codeEditors, isCodeEditor, isVscodeHistoryScannerEditor } from '~/constants/codeEditor'
-import { LicenseEnum } from '~/constants/license'
-import type { LocalProject } from '~/constants/localProject'
-import { ProjectKind } from '~/constants/localProject'
-import type { ProjectScannerImportResult } from '~/services/projectScannerService'
-import { addNewProjectsFromScanner, scannerBusy } from '~/services/projectScannerService'
-import { useEditorLangGroupsStore } from '~/stores/editorLangGroupsStore'
 import { useProjectsStore } from '~/stores/projectsStore'
 import { useSettingsStore } from '~/stores/settingsStore'
-import { formatActionError } from '~/utils/error'
-import {
-  initializeNewProjectState,
-  initializeUpdateProjectState,
-} from '~/views/ProjectEditorView'
-import { activatedPage } from '~/views/SettingsView'
 
+import HomeEmptyState from './components/HomeEmptyState.vue'
+import HomeFilterBar from './components/HomeFilterBar.vue'
+import HomeHeader from './components/HomeHeader.vue'
+import ProjectGrid from './components/ProjectGrid.vue'
+import ProjectList from './components/ProjectList.vue'
 import { useDisplayPathCache } from './composables/useDisplayPathCache'
+import { useProjectActions } from './composables/useProjectActions'
 import { useProjectFilters } from './composables/useProjectFilters'
+import { useProjectKeyboardNavigation } from './composables/useProjectKeyboardNavigation'
 import { useProjectMenus } from './composables/useProjectMenus'
 import { useProjectNavigation } from './composables/useProjectNavigation'
 import { useProjectOpenState } from './composables/useProjectOpenState'
+import { useProjectRefs } from './composables/useProjectRefs'
 import { useProjectSearch } from './composables/useProjectSearch'
 import { useVirtualScroll } from './composables/useVirtualScroll'
-import {
-  DEFAULT_EDITOR_ACTION_PREFIX,
-  DEFAULT_EDITOR_AUTO_ACTION,
-  GITHUB_SOURCE_RE,
-  HOME_LAYOUT_STORAGE_KEY,
-  MIN_SYNC_BUSY_MS,
-  OPEN_WITH_ACTION_PREFIX,
-  PROJECT_ACTION_KEYS,
-  SCAN_RESULT_TOAST_THRESHOLD_MS,
-} from './constants'
-import LanguageFilterSelect from './LanguageFilterSelect.vue'
-import type { LayoutMode, ProjectActionKey, ScrollAreaRef } from './types'
+import type { LayoutMode, ScrollAreaRef } from './types'
+import { persistLayoutMode, readStoredLayoutMode } from './utils/homeLayoutStorage'
 
 defineOptions({
   name: 'Home',
@@ -53,7 +32,6 @@ defineOptions({
 
 const projectsStore = useProjectsStore()
 const settingsStore = useSettingsStore()
-const editorLangGroupsStore = useEditorLangGroupsStore()
 
 // Composables
 const pathCache = useDisplayPathCache()
@@ -70,7 +48,6 @@ const {
   sortKey,
   filteredProjects,
   activeFilterCount,
-  totalProjects,
   kindOptions,
   statusOptions,
   languageOptions,
@@ -80,15 +57,8 @@ const {
 
 const openState = useProjectOpenState()
 const {
-  markProjectOpening,
-  finishProjectOpening,
-  clearProjectOpening,
   isProjectOpening,
-  markTerminalOpening,
-  finishTerminalOpening,
-  clearTerminalOpening,
   isTerminalOpening,
-  clearProjectFromMaps: clearOpenStateFromMaps,
 } = openState
 
 const layoutMode = ref<LayoutMode>(readStoredLayoutMode())
@@ -109,18 +79,18 @@ function editorHasLaunchCommand(editor: CodeEditorEnum) {
 const projectMenus = useProjectMenus({ t, editorHasLaunchCommand })
 const {
   projectMenuItems,
-  isSourceProject,
-  projectSourceUrl,
 } = projectMenus
 
-// 手动同步的本地状态(带最短可见时长防闪烁);与服务层共享的
-// scannerBusy 合成,让启动自动扫描也能点亮同步按钮的进行中状态。
-const manualSyncing = ref(false)
-const syncing = computed(() => manualSyncing.value || scannerBusy.value)
-const copyFeedback = ref<Record<number, 'success' | 'error'>>({})
-const copyFeedbackTimers = new Map<number, number>()
-const projectItemRefs = new Map<number, HTMLElement>()
-const projectActionRefs = new Map<number, HTMLElement>()
+const projectRefs = useProjectRefs()
+const {
+  clearProjectRefs,
+  deleteProjectRefs,
+  playProjectRemoveAnimation,
+  projectActionRefs,
+  projectItemRefs,
+  setProjectActionsRef,
+  setProjectItemRef,
+} = projectRefs
 const listScrollAreaRef = ref<ScrollAreaRef | null>(null)
 const cardsScrollAreaRef = ref<ScrollAreaRef | null>(null)
 
@@ -135,754 +105,57 @@ const {
   restoreHomeScrollPosition,
 } = projectNavigation
 
-function readStoredLayoutMode(): LayoutMode {
-  try {
-    const value = window.localStorage.getItem(HOME_LAYOUT_STORAGE_KEY)
-    return value === 'grid' || value === 'list' ? value : 'list'
-  }
-  catch {
-    return 'list'
-  }
-}
-
-function persistLayoutMode(value: LayoutMode) {
-  try {
-    window.localStorage.setItem(HOME_LAYOUT_STORAGE_KEY, value)
-  }
-  catch {
-    // Ignore storage errors. The layout toggle still works for the current session.
-  }
-}
+const projectActions = useProjectActions({
+  deleteProjectRefs,
+  navigateFromHome,
+  openState,
+})
+const {
+  addProject,
+  clearCopyFeedbackTimers,
+  clearProjectFromMaps,
+  copyFeedback,
+  copyProjectPath,
+  editProject,
+  handleProjectMenuSelect,
+  openInExplorer,
+  openInTerminal,
+  openProject,
+  openProjectSource,
+  openSettings,
+  showLanguage,
+  syncing,
+  syncProjects,
+} = projectActions
 
 const layoutOptions = computed<Array<{ value: LayoutMode, label: string, icon: string }>>(() => [
   { value: 'list', label: t('app.home.layout.list'), icon: 'i-lucide:list' },
   { value: 'grid', label: t('app.home.layout.grid'), icon: 'i-lucide:layout-grid' },
 ])
 
-function addProject() {
-  initializeNewProjectState()
-  navigateFromHome(ViewEnum.ProjectEditor)
-}
-
-function editProject(project: LocalProject) {
-  initializeUpdateProjectState(project)
-  navigateFromHome(ViewEnum.ProjectEditor)
-}
-
-async function openProject(project: LocalProject) {
-  if (isProjectOpening(project))
-    return
-
-  await openProjectWithEditor(project, project.defaultOpen)
-}
-
-async function openProjectWithEditor(project: LocalProject, editor: CodeEditorEnum) {
-  if (!project.isExists || isProjectOpening(project)) {
-    return
-  }
-
-  if (project.isRemote) {
-    await openRemoteProjectWithEditor(project, editor)
-    return
-  }
-
-  const launchConfig = settingsStore.getEditorLaunchConfig(editor)
-  if (!launchConfig?.command) {
-    showMissingEditorCommandToast()
-    return
-  }
-
-  markProjectOpening(project.appendTime)
-  try {
-    await window.api.openProject(launchConfig.command, project.path, launchConfig.openInTerminal)
-    void projectsStore.markProjectOpened(project.appendTime)
-    finishProjectOpening(project.appendTime)
-  }
-  catch (error: unknown) {
-    clearProjectOpening(project.appendTime)
-    console.error('Failed to open project:', error)
-    showToast({
-      tone: 'error',
-      title: t('app.home.feedback.open_failed'),
-      description: formatActionError(error),
-    })
-  }
-}
-
-async function openRemoteProjectWithEditor(project: LocalProject, editor: CodeEditorEnum) {
-  if (!project.remoteHost || !project.remotePath)
-    return
-
-  // 远程仅支持 VS Code 系（Remote-SSH）
-  if (!isVscodeHistoryScannerEditor(editor)) {
-    showToast({
-      tone: 'error',
-      title: t('app.home.feedback.open_failed'),
-      description: t('app.home.feedback.remote_editor_unsupported'),
-    })
-    return
-  }
-
-  const launchConfig = settingsStore.getEditorLaunchConfig(editor)
-  if (!launchConfig?.command) {
-    showMissingEditorCommandToast()
-    return
-  }
-
-  markProjectOpening(project.appendTime)
-  try {
-    await window.api.openRemoteProject(project.remoteHost, project.remotePath, launchConfig.command, 'vscode')
-    void projectsStore.markProjectOpened(project.appendTime)
-    finishProjectOpening(project.appendTime)
-  }
-  catch (error: unknown) {
-    clearProjectOpening(project.appendTime)
-    console.error('Failed to open remote project:', error)
-    showToast({
-      tone: 'error',
-      title: t('app.home.feedback.open_failed'),
-      description: formatActionError(error),
-    })
-  }
-}
-
-function clearProjectFromMaps(projectId: number) {
-  projectItemRefs.delete(projectId)
-  projectActionRefs.delete(projectId)
-
-  const copyTimer = copyFeedbackTimers.get(projectId)
-  if (copyTimer) {
-    window.clearTimeout(copyTimer)
-    copyFeedbackTimers.delete(projectId)
-  }
-
-  // 委托给 composable 清理打开状态
-  clearOpenStateFromMaps(projectId)
-}
-
-function setProjectItemRef(projectId: number, element: unknown) {
-  if (element instanceof HTMLElement) {
-    projectItemRefs.set(projectId, element)
-    return
-  }
-
-  projectItemRefs.delete(projectId)
-}
-
-function setProjectActionsRef(projectId: number, element: unknown) {
-  if (element instanceof HTMLElement) {
-    projectActionRefs.set(projectId, element)
-    return
-  }
-
-  projectActionRefs.delete(projectId)
-}
-
-async function focusProject(project: LocalProject | undefined) {
-  if (!project?.isExists)
-    return
-
-  await ensureProjectRendered(project)
-
-  const element = projectItemRefs.get(project.appendTime)
-  if (!element)
-    return
-
-  element.focus({ preventScroll: true })
-  element.scrollIntoView({ block: 'nearest', inline: 'nearest' })
-}
-
-function findProjectByLinearOffset(project: LocalProject, offset: number, includeMissing = false) {
-  const projects = filteredProjects.value.filter(item => includeMissing || item.isExists)
-  const currentIndex = projects.findIndex(item => item.appendTime === project.appendTime)
-  if (currentIndex < 0)
-    return undefined
-
-  const targetIndex = Math.max(0, Math.min(projects.length - 1, currentIndex + offset))
-  return projects[targetIndex]
-}
-
-function focusProjectByLinearOffset(project: LocalProject, offset: number) {
-  focusProject(findProjectByLinearOffset(project, offset))
-}
-
-function focusProjectAtEdge(edge: 'start' | 'end') {
-  const focusableProjects = filteredProjects.value.filter(item => item.isExists)
-  focusProject(edge === 'start' ? focusableProjects[0] : focusableProjects.at(-1))
-}
-
-function openProjectContextMenuFromKeyboard(event: KeyboardEvent) {
-  const target = event.currentTarget
-  if (!(target instanceof HTMLElement))
-    return
-
-  const rect = target.getBoundingClientRect()
-  target.dispatchEvent(new MouseEvent('contextmenu', {
-    bubbles: true,
-    cancelable: true,
-    clientX: rect.left + Math.min(36, rect.width / 2),
-    clientY: rect.top + Math.min(24, rect.height / 2),
-  }))
-}
-
-function findProjectByGridDirection(project: LocalProject, direction: 'left' | 'right' | 'up' | 'down', includeMissing = false) {
-  const currentElement = projectItemRefs.get(project.appendTime)
-  if (!currentElement)
-    return findProjectByGridLinearDirection(project, direction, includeMissing)
-
-  const currentRect = currentElement.getBoundingClientRect()
-  const currentCenterX = currentRect.left + currentRect.width / 2
-  const sameRowTolerance = Math.max(8, currentRect.height / 2)
-
-  const candidates = filteredProjects.value
-    .filter(item => (includeMissing || item.isExists) && item.appendTime !== project.appendTime)
-    .map((item) => {
-      const element = projectItemRefs.get(item.appendTime)
-      return element
-        ? { project: item, rect: element.getBoundingClientRect() }
-        : null
-    })
-    .filter(item => item !== null)
-
-  if (direction === 'left' || direction === 'right') {
-    const sameRow = candidates
-      .filter(item => Math.abs(item.rect.top - currentRect.top) <= sameRowTolerance)
-      .filter(item => direction === 'left' ? item.rect.left < currentRect.left : item.rect.left > currentRect.left)
-      .sort((a, b) => direction === 'left' ? b.rect.left - a.rect.left : a.rect.left - b.rect.left)
-
-    if (sameRow[0]) {
-      return sameRow[0].project
-    }
-
-    return findProjectByLinearOffset(project, direction === 'left' ? -1 : 1, includeMissing)
-  }
-
-  const verticalCandidates = candidates
-    .filter(item => direction === 'up' ? item.rect.top < currentRect.top - 4 : item.rect.top > currentRect.top + 4)
-    .sort((a, b) => {
-      const rowDistanceA = Math.abs(a.rect.top - currentRect.top)
-      const rowDistanceB = Math.abs(b.rect.top - currentRect.top)
-      if (rowDistanceA !== rowDistanceB)
-        return rowDistanceA - rowDistanceB
-
-      const centerA = a.rect.left + a.rect.width / 2
-      const centerB = b.rect.left + b.rect.width / 2
-      return Math.abs(centerA - currentCenterX) - Math.abs(centerB - currentCenterX)
-    })
-
-  return verticalCandidates[0]?.project || findProjectByGridLinearDirection(project, direction, includeMissing)
-}
-
-function focusCardByDirection(project: LocalProject, direction: 'left' | 'right' | 'up' | 'down') {
-  focusProject(findProjectByGridDirection(project, direction))
-}
-
-function findProjectByGridLinearDirection(project: LocalProject, direction: 'left' | 'right' | 'up' | 'down', includeMissing = false) {
-  const projects = filteredProjects.value.filter(item => includeMissing || item.isExists)
-  const currentIndex = projects.findIndex(item => item.appendTime === project.appendTime)
-  if (currentIndex < 0)
-    return undefined
-
-  const columnCount = getRenderedGridColumnCount()
-  const offset = {
-    left: -1,
-    right: 1,
-    up: -columnCount,
-    down: columnCount,
-  }[direction]
-
-  const targetIndex = Math.max(0, Math.min(projects.length - 1, currentIndex + offset))
-  return projects[targetIndex]
-}
-
-function getRenderedGridColumnCount() {
-  const firstElement = projectItemRefs.values().next().value
-  if (!(firstElement instanceof HTMLElement))
-    return 1
-
-  const firstTop = firstElement.getBoundingClientRect().top
-  let columnCount = 0
-
-  for (const element of projectItemRefs.values()) {
-    if (Math.abs(element.getBoundingClientRect().top - firstTop) <= 4)
-      columnCount += 1
-  }
-
-  return Math.max(1, columnCount)
-}
-
-function isProjectActionDisabled(project: LocalProject, action: ProjectActionKey) {
-  // 远程项目没有本地文件夹,“在文件夹中显示”不可用(置灰而非隐藏,保持按钮组对齐)
-  if (project.isRemote && action === 'explorer')
-    return true
-  return !project.isExists && (action === 'open' || action === 'explorer' || action === 'terminal')
-}
-
-function firstEnabledProjectAction(project: LocalProject) {
-  return PROJECT_ACTION_KEYS.find(action => !isProjectActionDisabled(project, action)) || 'more'
-}
-
-function actionButtonTabIndex(project: LocalProject, action: ProjectActionKey) {
-  if (isProjectActionDisabled(project, action))
-    return -1
-
-  return firstEnabledProjectAction(project) === action ? 0 : -1
-}
-
-function projectActionKey(button: HTMLButtonElement) {
-  const action = button.dataset.projectAction
-  return PROJECT_ACTION_KEYS.includes(action as ProjectActionKey)
-    ? action as ProjectActionKey
-    : null
-}
-
-function toolbarActionButtons(toolbar: HTMLElement) {
-  return Array.from(toolbar.querySelectorAll<HTMLButtonElement>('[data-project-action]'))
-    .filter(button => !button.disabled && button.getClientRects().length > 0)
-}
-
-function focusToolbarButtonAtIndex(toolbar: HTMLElement, index: number) {
-  const buttons = toolbarActionButtons(toolbar)
-  if (!buttons.length)
-    return
-
-  const targetIndex = Math.max(0, Math.min(buttons.length - 1, index))
-  buttons[targetIndex]?.focus({ preventScroll: true })
-}
-
-async function focusProjectAction(project: LocalProject | undefined, preferredAction: ProjectActionKey | null, preferredIndex: number) {
-  if (!project)
-    return
-
-  await ensureProjectRendered(project)
-
-  const toolbar = projectActionRefs.get(project.appendTime)
-  if (!toolbar)
-    return
-
-  const buttons = toolbarActionButtons(toolbar)
-  if (!buttons.length)
-    return
-
-  const sameActionButton = preferredAction
-    ? buttons.find(button => projectActionKey(button) === preferredAction)
-    : undefined
-  const fallbackIndex = Math.max(0, Math.min(buttons.length - 1, preferredIndex))
-  const target = sameActionButton || buttons[fallbackIndex] || buttons[0]
-
-  target.focus({ preventScroll: true })
-  target.scrollIntoView({ block: 'nearest', inline: 'nearest' })
-}
-
-function handleProjectActionsKeydown(project: LocalProject, event: KeyboardEvent) {
-  if (event.defaultPrevented)
-    return
-
-  if (handleProjectShortcut(project, event))
-    return
-
-  const toolbar = event.currentTarget
-  if (!(toolbar instanceof HTMLElement))
-    return
-
-  const target = event.target instanceof HTMLElement
-    ? event.target.closest<HTMLButtonElement>('[data-project-action]')
-    : null
-  const buttons = toolbarActionButtons(toolbar)
-  const currentIndex = target ? buttons.indexOf(target) : -1
-  const action = target ? projectActionKey(target) : null
-
-  if (!buttons.length)
-    return
-
-  const focusHorizontalAction = (offset: number) => {
-    event.preventDefault()
-    event.stopPropagation()
-    focusToolbarButtonAtIndex(toolbar, currentIndex < 0 ? 0 : currentIndex + offset)
-  }
-
-  const focusVerticalAction = (offset: number, direction: 'up' | 'down') => {
-    event.preventDefault()
-    event.stopPropagation()
-    const targetProject = layoutMode.value === 'grid'
-      ? findProjectByGridDirection(project, direction, true)
-      : findProjectByLinearOffset(project, offset, true)
-    focusProjectAction(targetProject, action, currentIndex)
-  }
-
-  switch (event.key) {
-    case 'ArrowLeft':
-      focusHorizontalAction(-1)
-      break
-    case 'ArrowRight':
-      focusHorizontalAction(1)
-      break
-    case 'ArrowUp':
-      focusVerticalAction(-1, 'up')
-      break
-    case 'ArrowDown':
-      focusVerticalAction(1, 'down')
-      break
-    case 'Home':
-      event.preventDefault()
-      event.stopPropagation()
-      focusToolbarButtonAtIndex(toolbar, 0)
-      break
-    case 'End':
-      event.preventDefault()
-      event.stopPropagation()
-      focusToolbarButtonAtIndex(toolbar, buttons.length - 1)
-      break
-  }
-}
-
-function handleProjectShortcut(project: LocalProject, event: KeyboardEvent) {
-  const usesCommandModifier = (event.metaKey || event.ctrlKey) && !event.altKey && !event.shiftKey
-  const key = event.key.toLowerCase()
-
-  if (usesCommandModifier && key === 'i') {
-    event.preventDefault()
-    event.stopPropagation()
-    editProject(project)
-    return true
-  }
-
-  if (usesCommandModifier && key === 'c') {
-    event.preventDefault()
-    event.stopPropagation()
-    void copyProjectPath(project)
-    return true
-  }
-
-  const isRemoveKey = !event.metaKey && !event.ctrlKey && !event.altKey && !event.shiftKey
-    && (event.key === 'Delete' || event.key === 'Backspace')
-  if (isRemoveKey) {
-    event.preventDefault()
-    event.stopPropagation()
-    showRemoveDialog(project)
-    return true
-  }
-
-  return false
-}
-
-function handleProjectContainerKeydown(project: LocalProject, event: KeyboardEvent) {
-  if (event.target !== event.currentTarget)
-    return
-
-  if (handleProjectShortcut(project, event))
-    return
-
-  switch (event.key) {
-    case 'Enter':
-      event.preventDefault()
-      void openProject(project)
-      break
-    case ' ':
-      event.preventDefault()
-      void openProject(project)
-      break
-    case 'ContextMenu':
-      event.preventDefault()
-      openProjectContextMenuFromKeyboard(event)
-      break
-    case 'F10':
-      if (!event.shiftKey)
-        return
-      event.preventDefault()
-      openProjectContextMenuFromKeyboard(event)
-      break
-    case 'ArrowUp':
-      event.preventDefault()
-      if (layoutMode.value === 'grid')
-        focusCardByDirection(project, 'up')
-      else
-        focusProjectByLinearOffset(project, -1)
-      break
-    case 'ArrowDown':
-      event.preventDefault()
-      if (layoutMode.value === 'grid')
-        focusCardByDirection(project, 'down')
-      else
-        focusProjectByLinearOffset(project, 1)
-      break
-    case 'ArrowLeft':
-      if (layoutMode.value !== 'grid')
-        return
-      event.preventDefault()
-      focusCardByDirection(project, 'left')
-      break
-    case 'ArrowRight':
-      if (layoutMode.value !== 'grid')
-        return
-      event.preventDefault()
-      focusCardByDirection(project, 'right')
-      break
-    case 'Home':
-      event.preventDefault()
-      focusProjectAtEdge('start')
-      break
-    case 'End':
-      event.preventDefault()
-      focusProjectAtEdge('end')
-      break
-  }
-}
-
-async function copyProjectPath(project: LocalProject) {
-  try {
-    if (!navigator.clipboard?.writeText) {
-      throw new Error('Clipboard API is not available')
-    }
-
-    await navigator.clipboard.writeText(project.path)
-    setCopyFeedback(project.appendTime, 'success')
-  }
-  catch (error) {
-    console.error('Failed to copy project path:', error)
-    setCopyFeedback(project.appendTime, 'error')
-  }
-}
-
-function setCopyFeedback(projectId: number, status: 'success' | 'error') {
-  const activeTimer = copyFeedbackTimers.get(projectId)
-  if (activeTimer) {
-    window.clearTimeout(activeTimer)
-  }
-
-  copyFeedback.value = {
-    ...copyFeedback.value,
-    [projectId]: status,
-  }
-
-  const timer = window.setTimeout(() => {
-    const { [projectId]: _removed, ...rest } = copyFeedback.value
-    copyFeedback.value = rest
-    copyFeedbackTimers.delete(projectId)
-  }, 1400)
-
-  copyFeedbackTimers.set(projectId, timer)
-}
-
-function scanResultDescription(result: ProjectScannerImportResult, changedStatusCount: number) {
-  const parts: string[] = []
-
-  if (result.added > 0)
-    parts.push(t('app.home.feedback.scan_added', { count: result.added }))
-  if (changedStatusCount > 0)
-    parts.push(t('app.home.feedback.scan_updated', { count: changedStatusCount }))
-  if (result.failed > 0)
-    parts.push(t('app.home.feedback.scan_failed_items', { count: result.failed }))
-
-  return parts.length > 0
-    ? parts.join(t('app.common.list_separator'))
-    : t('app.home.feedback.scan_no_changes')
-}
-
-function showScanResultToast(result: ProjectScannerImportResult, changedStatusCount: number, elapsed: number) {
-  const hasVisibleResult = result.added > 0 || result.failed > 0 || changedStatusCount > 0
-  if (!hasVisibleResult && elapsed < SCAN_RESULT_TOAST_THRESHOLD_MS)
-    return
-
-  showToast({
-    tone: result.failed > 0 ? 'warning' : hasVisibleResult ? 'success' : 'info',
-    title: t('app.home.feedback.scan_completed'),
-    description: scanResultDescription(result, changedStatusCount),
-  })
-}
-
-function copyButtonTitle(project: LocalProject) {
-  const status = copyFeedback.value[project.appendTime]
-  if (status === 'success')
-    return t('app.home.actions.copied')
-  if (status === 'error')
-    return t('app.home.actions.copy_failed')
-  return t('app.home.actions.copy_path')
-}
-
-function copyButtonIcon(project: LocalProject) {
-  const status = copyFeedback.value[project.appendTime]
-  if (status === 'success')
-    return 'i-lucide:check'
-  if (status === 'error')
-    return 'i-lucide:x'
-  return 'i-lucide:copy'
-}
-
-function copyButtonClass(project: LocalProject) {
-  const status = copyFeedback.value[project.appendTime]
-  return {
-    'copy-success': status === 'success',
-    'copy-error': status === 'error',
-  }
-}
-
-function openProjectButtonTitle(project: LocalProject) {
-  return isProjectOpening(project)
-    ? t('app.home.actions.opening_project')
-    : t('app.home.actions.open_project')
-}
-
-function openProjectButtonAriaLabel(project: LocalProject) {
-  return isProjectOpening(project)
-    ? t('app.home.actions.opening_named', { name: project.name })
-    : t('app.home.actions.open_named', { name: project.name })
-}
-
-function openProjectButtonIcon(project: LocalProject) {
-  return isProjectOpening(project)
-    ? 'i-lucide:loader-circle spinning'
-    : 'i-lucide:external-link'
-}
-
-function terminalButtonTitle(project: LocalProject) {
-  return isTerminalOpening(project)
-    ? t('app.home.actions.opening_terminal')
-    : t('app.home.actions.open_terminal')
-}
-
-function terminalButtonAriaLabel(project: LocalProject) {
-  return isTerminalOpening(project)
-    ? t('app.home.actions.opening_terminal_named', { name: project.name })
-    : t('app.home.actions.open_terminal')
-}
-
-function terminalButtonIcon(project: LocalProject) {
-  return isTerminalOpening(project)
-    ? 'i-lucide:loader-circle spinning'
-    : 'i-lucide:square-terminal'
-}
-
-function projectSourceExternalUrl(project: LocalProject) {
-  const sourceUrl = projectSourceUrl(project)
-  if (!sourceUrl)
-    return ''
-
-  const githubName = sourceUrl.match(GITHUB_SOURCE_RE)?.[1]
-  if (githubName)
-    return `https://github.com/${githubName.replace(/\.git$/, '')}`
-
-  if (/^https?:\/\//i.test(sourceUrl))
-    return sourceUrl
-
-  return `https://${sourceUrl}`
-}
-
-function sourceNameFromUrl(url: string) {
-  const githubName = url.match(GITHUB_SOURCE_RE)?.[1]
-  if (githubName)
-    return githubName
-
-  try {
-    const parsedUrl = new URL(url)
-    const pathParts = parsedUrl.pathname.split('/').filter(Boolean)
-    return pathParts.length >= 2
-      ? pathParts.slice(-2).join('/')
-      : parsedUrl.hostname
-  }
-  catch {
-    return url
-  }
-}
-
-function projectSourceName(project: LocalProject) {
-  const sourceUrl = projectSourceUrl(project)
-  return isSourceProject(project)
-    ? project.fromName?.trim() || (sourceUrl ? sourceNameFromUrl(sourceUrl) : '')
-    : ''
-}
-
-function hasProjectSource(project: LocalProject) {
-  return !!projectSourceName(project)
-}
-
-function projectSourcePrefix(project: LocalProject) {
-  return project.kind === ProjectKind.FORK
-    ? t('app.home.source.forked_from')
-    : t('app.home.source.cloned_from')
+function setListScrollAreaRef(element: unknown) {
+  listScrollAreaRef.value = element as ScrollAreaRef | null
 }
 
-function projectSourceTitle(project: LocalProject) {
-  const sourceName = projectSourceName(project)
-  const sourceUrl = projectSourceUrl(project)
-  if (sourceName && sourceUrl && sourceName !== sourceUrl)
-    return `${projectSourcePrefix(project)} ${sourceName}\n${sourceUrl}`
-  return sourceName ? `${projectSourcePrefix(project)} ${sourceName}` : sourceUrl
+function setCardsScrollAreaRef(element: unknown) {
+  cardsScrollAreaRef.value = element as ScrollAreaRef | null
 }
 
-function openProjectSource(project: LocalProject) {
-  const sourceUrl = projectSourceExternalUrl(project)
-  if (sourceUrl)
-    window.api.openExternal(sourceUrl)
-}
-
-async function toggleProjectPinned(project: LocalProject) {
-  await projectsStore.toggleProjectPinned(project.appendTime)
-}
-
-async function toggleProjectArchived(project: LocalProject) {
-  await projectsStore.toggleProjectArchived(project.appendTime)
-}
-
-async function setProjectDefaultEditor(project: LocalProject, editor: CodeEditorEnum) {
-  await projectsStore.setProjectDefaultOpen(project.appendTime, editor)
-}
-
-async function setProjectDefaultEditorAutomatically(project: LocalProject) {
-  const editor = editorLangGroupsStore.getEditorByLanguage(project.mainLang, project.defaultOpen) ?? project.defaultOpen
-  await setProjectDefaultEditor(project, editor)
-}
-
-function handleProjectMenuSelect(project: LocalProject, action: string) {
-  if (action.startsWith(OPEN_WITH_ACTION_PREFIX)) {
-    const editor = action.slice(OPEN_WITH_ACTION_PREFIX.length)
-    if (isCodeEditor(editor))
-      void openProjectWithEditor(project, editor)
-    return
-  }
-
-  if (action === DEFAULT_EDITOR_AUTO_ACTION) {
-    void setProjectDefaultEditorAutomatically(project)
-    return
-  }
-
-  if (action.startsWith(DEFAULT_EDITOR_ACTION_PREFIX)) {
-    const editor = action.slice(DEFAULT_EDITOR_ACTION_PREFIX.length)
-    if (isCodeEditor(editor))
-      void setProjectDefaultEditor(project, editor)
-    return
-  }
-
-  switch (action) {
-    case 'pin':
-      void toggleProjectPinned(project)
-      break
-    case 'archive':
-      void toggleProjectArchived(project)
-      break
-    case 'source':
-      openProjectSource(project)
-      break
-    case 'open':
-      void openProject(project)
-      break
-    case 'explorer':
-      openInExplorer(project)
-      break
-    case 'terminal':
-      void openInTerminal(project)
-      break
-    case 'copy':
-      void copyProjectPath(project)
-      break
-    case 'edit':
-      editProject(project)
-      break
-    case 'remove':
-      showRemoveDialog(project)
-      break
-  }
-}
+const keyboardNavigation = useProjectKeyboardNavigation({
+  filteredProjects,
+  layoutMode,
+  refs: { projectActionRefs, projectItemRefs },
+  ensureProjectRendered,
+  openProject,
+  editProject,
+  copyProjectPath,
+})
+const {
+  actionButtonTabIndex,
+  handleProjectActionsKeydown,
+  handleProjectContainerKeydown,
+  isProjectActionDisabled,
+} = keyboardNavigation
 
 onActivated(() => {
   restoreHomeScrollPosition()
@@ -896,102 +169,14 @@ onMounted(() => {
 onBeforeUnmount(() => {
   window.removeEventListener('project-removed', handleProjectRemoved as EventListener)
   setRemoveAnimationCallback(null)
-  copyFeedbackTimers.forEach(timer => window.clearTimeout(timer))
-  copyFeedbackTimers.clear()
-  projectItemRefs.clear()
-  projectActionRefs.clear()
+  clearCopyFeedbackTimers()
+  clearProjectRefs()
 })
 
 function handleProjectRemoved(event: CustomEvent<{ projectId: number }>) {
   clearProjectFromMaps(event.detail.projectId)
 }
 
-async function playProjectRemoveAnimation(projectId: number): Promise<void> {
-  const element = projectItemRefs.get(projectId)
-  if (!element) {
-    return
-  }
-
-  const htmlElement = element as HTMLElement
-  htmlElement.style.transition = 'opacity 180ms ease-out, transform 180ms ease-out'
-  htmlElement.style.opacity = '0'
-  htmlElement.style.transform = 'translateX(-12px)'
-
-  await new Promise(resolve => setTimeout(resolve, 180))
-}
-
-function openInExplorer(project: LocalProject) {
-  window.api.openInExplorer(project.path)
-}
-
-async function openInTerminal(project: LocalProject) {
-  if (!project.isExists || isTerminalOpening(project))
-    return
-
-  markTerminalOpening(project.appendTime)
-  try {
-    if (project.isRemote && project.remoteHost && project.remotePath) {
-      await window.api.openRemoteProject(project.remoteHost, project.remotePath, '', 'terminal')
-    }
-    else {
-      await window.api.openInTerminal(project.path, settingsStore.terminalCommand)
-    }
-    finishTerminalOpening(project.appendTime)
-  }
-  catch (error) {
-    clearTerminalOpening(project.appendTime)
-    console.error('Failed to open project in terminal:', error)
-    showToast({
-      tone: 'error',
-      title: t('app.home.feedback.terminal_failed'),
-      description: formatActionError(error),
-    })
-  }
-}
-
-async function syncProjects() {
-  if (!settingsStore.scannerEnabled || syncing.value)
-    return
-
-  const startedAt = performance.now()
-  let workElapsed = 0
-  let changedStatusCount = 0
-  let scanResult: ProjectScannerImportResult | null = null
-  let scanError: unknown = null
-  manualSyncing.value = true
-  try {
-    changedStatusCount = await projectsStore.refreshProjectExistence()
-    scanResult = await addNewProjectsFromScanner()
-  }
-  catch (error) {
-    console.error('Project scanner failed:', error)
-    scanError = error
-  }
-  finally {
-    workElapsed = performance.now() - startedAt
-    if (workElapsed < MIN_SYNC_BUSY_MS) {
-      await new Promise(resolve => setTimeout(resolve, MIN_SYNC_BUSY_MS - workElapsed))
-    }
-    manualSyncing.value = false
-  }
-
-  if (scanError) {
-    showToast({
-      tone: 'error',
-      title: t('app.home.feedback.scan_failed'),
-      description: formatActionError(scanError),
-    })
-    return
-  }
-
-  if (scanResult)
-    showScanResultToast(scanResult, changedStatusCount, workElapsed)
-}
-
-function showLanguage(project: LocalProject, event: MouseEvent) {
-  showLanguagePop(project, event.currentTarget as HTMLElement)
-}
-
 watch(
   renderedProjects,
   (projects) => {
@@ -1006,89 +191,6 @@ watch(
   { immediate: true },
 )
 
-function openSettings() {
-  navigateFromHome(ViewEnum.Settings)
-}
-
-function openEditorSettings() {
-  activatedPage.value = SettingPageEnum.Ides
-  navigateFromHome(ViewEnum.Settings)
-}
-
-function showMissingEditorCommandToast() {
-  showToast({
-    tone: 'warning',
-    title: t('no_ide_path_dialog.dialog_title'),
-    description: t('no_ide_path_dialog.dialog_desc'),
-    action: {
-      label: t('no_ide_path_dialog.set'),
-      onSelect: openEditorSettings,
-    },
-  })
-}
-
-function kindLabel(kind: ProjectKind) {
-  switch (kind) {
-    case ProjectKind.FORK:
-      return t('app.project_kind.fork')
-    case ProjectKind.CLONE:
-      return t('app.project_kind.clone')
-    case ProjectKind.MINE:
-    default:
-      return t('app.project_kind.mine')
-  }
-}
-
-function kindClass(kind: ProjectKind) {
-  switch (kind) {
-    case ProjectKind.FORK:
-      return 'kind-fork'
-    case ProjectKind.CLONE:
-      return 'kind-clone'
-    case ProjectKind.MINE:
-    default:
-      return 'kind-mine'
-  }
-}
-
-function shortLicense(license?: LicenseEnum) {
-  if (!license || license === LicenseEnum.NONE)
-    return t('app.license.none')
-  if (license === LicenseEnum.MIT)
-    return 'MIT'
-  if (license === LicenseEnum.APACHE_2_0)
-    return 'Apache-2.0'
-  if (license === LicenseEnum.GPLV3)
-    return 'GPL-3.0'
-  if (license === LicenseEnum.GPLV2)
-    return 'GPL-2.0'
-  if (license === LicenseEnum.OTHER)
-    return t('app.license.other')
-  return license.replace(' License', '').replace('GNU ', '')
-}
-
-function editorIconClasses(editor?: keyof typeof codeEditors | null) {
-  if (!editor)
-    return []
-  const option = codeEditors[editor]
-  return ['ide-icon', option?.icon, { 'monochrome-editor-icon': option?.monochromeIcon }]
-}
-
-function formatTime(timestamp: number) {
-  return new Intl.DateTimeFormat(locale.value, {
-    month: 'short',
-    day: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit',
-  }).format(new Date(timestamp))
-}
-
-function formatLastOpened(project: LocalProject) {
-  return project.lastOpenedAt
-    ? formatTime(project.lastOpenedAt)
-    : t('app.home.table.never_opened')
-}
-
 function updateLayoutMode(value: string) {
   layoutMode.value = value as LayoutMode
 }
@@ -1100,1043 +202,109 @@ watch(layoutMode, () => {
 </script>
 
 <template>
-  <main class="workspace-shell" :class="{ 'theme-dark': settingsStore.resolvedTheme === ThemeEnum.Dark }">
-    <section class="workspace-topbar">
-      <div class="title-block">
-        <div class="title-row">
-          <h1>
-            {{ t('app.home.title') }}
-            <span class="count-badge">{{ totalProjects }}</span>
-          </h1>
-          <button class="icon-button title-settings" type="button" :title="t('app.settings.title')" :aria-label="t('app.settings.title')" @click="openSettings">
-            <span class="i-lucide:settings" />
-          </button>
-        </div>
-      </div>
-
-      <div class="topbar-actions">
-        <button v-if="settingsStore.scannerEnabled" class="ghost-button" type="button" :disabled="syncing" @click="syncProjects">
-          <span class="i-lucide:refresh-cw" :class="{ spinning: syncing }" />
-          {{ syncing ? t('app.home.syncing') : t('app.home.sync') }}
-        </button>
-        <button class="primary-button" type="button" @click="addProject">
-          <span class="i-lucide:plus" />
-          {{ t('app.home.add_project') }}
-        </button>
-      </div>
-    </section>
-
-    <section class="filter-bar">
-      <div class="search-box">
-        <span class="i-lucide:search" />
-        <input
-          v-model="searchValue"
-          :aria-label="t('app.home.search_placeholder')"
-          :placeholder="t('app.home.search_placeholder')"
-          spellcheck="false"
-        >
-        <button
-          v-if="searchValue"
-          class="search-clear-button"
-          type="button"
-          :title="t('app.common.clear')"
-          :aria-label="t('app.common.clear')"
-          @click="clearSearch"
-        >
-          <span class="i-lucide:x" />
-        </button>
-      </div>
-
-      <UiSelect
-        v-model="kindFilter"
-        :options="kindOptions"
-        :placeholder="t('app.home.filters.kind')"
-        :aria-label="t('app.home.filters.kind')"
-        min-width="128px"
+  <main
+    size-full overflow-hidden flex flex-col
+    bg="$ui-page-background"
+  >
+    <HomeHeader
+      :total="filteredProjects.length"
+      :syncing="syncing"
+      :scanner-enabled="settingsStore.scannerEnabled"
+      @add="addProject"
+      @sync="syncProjects"
+      @settings="openSettings"
+    />
+
+    <HomeFilterBar
+      v-model:search-value="searchValue"
+      v-model:kind-filter="kindFilter"
+      v-model:status-filter="statusFilter"
+      v-model:language-filter="languageFilter"
+      v-model:sort-key="sortKey"
+      :layout-mode="layoutMode"
+      :kind-options="kindOptions"
+      :status-options="statusOptions"
+      :language-options="languageOptions"
+      :sort-options="sortOptions"
+      :layout-options="layoutOptions"
+      :active-filter-count="activeFilterCount"
+      @update:layout-mode="updateLayoutMode"
+      @clear-search="clearSearch"
+      @clear-filters="clearFilters"
+    />
+
+    <section
+      min-h-0 mx-14px mb-14px flex-1 overflow-hidden
+      rounded-6px flex flex-col
+      bg="$ui-surface-background"
+      shadow="$shadow-surface"
+      class="project-table"
+      :aria-label="t('app.home.project_list')"
+    >
+      <HomeEmptyState v-if="filteredProjects.length === 0" />
+
+      <ProjectList
+        v-else-if="layoutMode === 'list'"
+        :projects="renderedProjects"
+        :has-more-projects="hasMoreProjects"
+        :locale="locale"
+        :display-project-path="pathCache.displayProjectPath"
+        :project-menu-items="projectMenuItems"
+        :is-project-opening="isProjectOpening"
+        :is-terminal-opening="isTerminalOpening"
+        :copy-feedback="copyFeedback"
+        :action-button-tab-index="actionButtonTabIndex"
+        :is-project-action-disabled="isProjectActionDisabled"
+        @scroll-ref="setListScrollAreaRef"
+        @sentinel-ref="setLoadMoreSentinelRef"
+        @item-ref="setProjectItemRef"
+        @actions-ref="setProjectActionsRef"
+        @open="openProject"
+        @container-keydown="handleProjectContainerKeydown"
+        @actions-keydown="handleProjectActionsKeydown"
+        @show-language="showLanguage"
+        @open-source="openProjectSource"
+        @open-explorer="openInExplorer"
+        @open-terminal="openInTerminal"
+        @copy-path="copyProjectPath"
+        @menu-select="handleProjectMenuSelect"
       />
 
-      <UiSelect
-        v-model="statusFilter"
-        :options="statusOptions"
-        :placeholder="t('app.home.filters.status')"
-        :aria-label="t('app.home.filters.status')"
-        min-width="128px"
+      <ProjectGrid
+        v-else
+        :projects="renderedProjects"
+        :has-more-projects="hasMoreProjects"
+        :display-project-path="pathCache.displayProjectPath"
+        :project-menu-items="projectMenuItems"
+        :is-project-opening="isProjectOpening"
+        :is-terminal-opening="isTerminalOpening"
+        :copy-feedback="copyFeedback"
+        :action-button-tab-index="actionButtonTabIndex"
+        :is-project-action-disabled="isProjectActionDisabled"
+        @scroll-ref="setCardsScrollAreaRef"
+        @sentinel-ref="setLoadMoreSentinelRef"
+        @item-ref="setProjectItemRef"
+        @actions-ref="setProjectActionsRef"
+        @open="openProject"
+        @container-keydown="handleProjectContainerKeydown"
+        @actions-keydown="handleProjectActionsKeydown"
+        @show-language="showLanguage"
+        @open-source="openProjectSource"
+        @open-explorer="openInExplorer"
+        @open-terminal="openInTerminal"
+        @copy-path="copyProjectPath"
+        @menu-select="handleProjectMenuSelect"
       />
-
-      <LanguageFilterSelect
-        v-model="languageFilter"
-        :options="languageOptions"
-        :placeholder="t('app.home.filters.language')"
-        :aria-label="t('app.home.filters.language')"
-        min-width="150px"
-        content-width="210px"
-      />
-
-      <UiSelect
-        v-model="sortKey"
-        :options="sortOptions"
-        :placeholder="t('app.home.filters.sort')"
-        :aria-label="t('app.home.filters.sort')"
-        min-width="122px"
-        content-width="170px"
-      />
-
-      <button v-if="activeFilterCount" class="clear-button" type="button" @click="clearFilters">
-        {{ t('app.home.clear_count', { count: activeFilterCount }) }}
-      </button>
-
-      <UiSegmentedControl
-        class="layout-switch"
-        :model-value="layoutMode"
-        :options="layoutOptions"
-        :aria-label="t('app.home.layout.label')"
-        @update:model-value="updateLayoutMode"
-      />
-    </section>
-
-    <section class="project-table" :class="`layout-${layoutMode}`" :aria-label="t('app.home.project_list')">
-      <div v-if="layoutMode === 'list'" class="project-grid table-head">
-        <span>{{ t('app.home.table.project') }}</span>
-        <span>{{ t('app.home.table.language') }}</span>
-        <span>{{ t('app.home.table.editor') }}</span>
-        <span>{{ t('app.home.table.license') }}</span>
-        <span>{{ t('app.home.table.last_opened') }}</span>
-        <span>{{ t('app.home.table.actions') }}</span>
-      </div>
-
-      <div v-if="filteredProjects.length === 0" class="empty-state">
-        <strong>{{ t('app.home.empty.title') }}</strong>
-        <span>{{ t('app.home.empty.desc') }}</span>
-      </div>
-
-      <UiScrollArea v-else-if="layoutMode === 'list'" ref="listScrollAreaRef" class="table-body">
-        <UiActionMenu
-          v-for="project in renderedProjects"
-          :key="project.appendTime"
-          mode="context"
-          :items="projectMenuItems(project)"
-          :aria-label="t('app.home.actions.more')"
-          @select="action => handleProjectMenuSelect(project, action)"
-        >
-          <div
-            :ref="el => setProjectItemRef(project.appendTime, el)"
-            class="project-grid project-row"
-            :class="{ missing: !project.isExists }"
-            role="button"
-            :tabindex="project.isExists ? 0 : -1"
-            :aria-disabled="!project.isExists"
-            :aria-label="t('app.home.actions.open_named', { name: project.name })"
-            aria-keyshortcuts="Enter Space Shift+F10 Control+I Meta+I Control+C Meta+C Delete Backspace"
-            @click="openProject(project)"
-            @keydown="handleProjectContainerKeydown(project, $event)"
-          >
-            <div class="project-main">
-              <div class="project-title-line">
-                <span class="project-title" :title="project.group ? `${project.group}/${project.name}` : project.name">
-                  <span v-if="project.isPinned" class="pinned-marker i-lucide:pin" />
-                  <span v-if="project.group" class="project-group-prefix" :title="project.group">{{ project.group }}/</span><span class="project-name" :title="project.name">{{ project.name }}</span>
-                </span>
-                <span
-                  v-if="project.kind !== ProjectKind.MINE"
-                  class="kind-badge"
-                  :class="kindClass(project.kind)"
-                >
-                  {{ kindLabel(project.kind) }}
-                </span>
-                <span v-if="project.isRemote" class="remote-badge" :title="t('app.home.remote.badge')">
-                  {{ t('app.home.remote.badge') }}
-                </span>
-                <span v-if="project.isTemporary" class="temporary-badge" :title="t('app.home.filters.temporary')">
-                  {{ t('app.home.filters.temporary') }}
-                </span>
-              </div>
-              <div class="project-path" :title="project.path">
-                {{ pathCache.displayProjectPath(project.path) }}
-              </div>
-              <button
-                v-if="projectSourceUrl(project)"
-                class="project-source source-link"
-                type="button"
-                :title="projectSourceTitle(project)"
-                :aria-label="`${t('app.home.actions.open_source')}: ${projectSourceName(project)}`"
-                @click.stop="openProjectSource(project)"
-                @keydown.stop
-              >
-                <span class="source-prefix">{{ projectSourcePrefix(project) }}</span>
-                <span class="source-name">{{ projectSourceName(project) }}</span>
-                <span class="source-link-icon i-lucide:external-link" />
-              </button>
-              <div v-else-if="hasProjectSource(project)" class="project-source" :title="projectSourceTitle(project)">
-                <span class="source-prefix">{{ projectSourcePrefix(project) }}</span>
-                <span class="source-name">{{ projectSourceName(project) }}</span>
-              </div>
-            </div>
-
-            <button class="inline-pill" type="button" :title="project.mainLang || t('app.common.unknown')" @click.stop="showLanguage(project, $event)">
-              <span class="color-dot" :style="{ background: project.mainLangColor || '#b8b8b8' }" />
-              {{ project.mainLang || t('app.common.unknown') }}
-            </button>
-            <span class="editor-cell" :title="codeEditors[project.defaultOpen]?.label || t('app.common.no_editor')">
-              <span :class="editorIconClasses(project.defaultOpen)" />
-              <span class="editor-chip-label">{{ codeEditors[project.defaultOpen]?.label || t('app.common.no_editor') }}</span>
-            </span>
-            <span
-              v-if="project.license && project.license !== LicenseEnum.NONE"
-              class="license-cell"
-            >
-              {{ shortLicense(project.license) }}
-            </span>
-            <span v-else class="license-cell muted">{{ t('app.license.none') }}</span>
-            <span class="recent-cell" :class="{ muted: !project.lastOpenedAt }">{{ formatLastOpened(project) }}</span>
-
-            <div
-              :ref="el => setProjectActionsRef(project.appendTime, el)"
-              class="row-actions"
-              role="toolbar"
-              aria-orientation="horizontal"
-              :aria-label="t('app.home.actions.project_actions', { name: project.name })"
-              @keydown="handleProjectActionsKeydown(project, $event)"
-            >
-              <button
-                class="icon-button primary-action"
-                :class="{ launching: isProjectOpening(project) }"
-                type="button"
-                data-project-action="open"
-                :title="openProjectButtonTitle(project)"
-                :aria-label="openProjectButtonAriaLabel(project)"
-                :aria-busy="isProjectOpening(project)"
-                :disabled="!project.isExists"
-                :tabindex="actionButtonTabIndex(project, 'open')"
-                @click.stop="openProject(project)"
-              >
-                <span :class="openProjectButtonIcon(project)" />
-              </button>
-              <button
-                class="icon-button"
-                type="button"
-                data-project-action="explorer"
-                :title="t('app.home.actions.open_explorer')"
-                :aria-label="t('app.home.actions.open_explorer')"
-                :disabled="isProjectActionDisabled(project, 'explorer')"
-                :tabindex="actionButtonTabIndex(project, 'explorer')"
-                @click.stop="openInExplorer(project)"
-              >
-                <span class="i-lucide:folder" />
-              </button>
-              <button
-                class="icon-button"
-                :class="{ 'action-loading': isTerminalOpening(project) }"
-                type="button"
-                data-project-action="terminal"
-                :title="terminalButtonTitle(project)"
-                :aria-label="terminalButtonAriaLabel(project)"
-                :aria-busy="isTerminalOpening(project)"
-                :disabled="!project.isExists"
-                :tabindex="actionButtonTabIndex(project, 'terminal')"
-                @click.stop="openInTerminal(project)"
-              >
-                <span :class="terminalButtonIcon(project)" />
-              </button>
-              <button
-                class="icon-button copy-action"
-                :class="copyButtonClass(project)"
-                type="button"
-                data-project-action="copy"
-                :title="copyButtonTitle(project)"
-                :aria-label="copyButtonTitle(project)"
-                :tabindex="actionButtonTabIndex(project, 'copy')"
-                @click.stop="copyProjectPath(project)"
-              >
-                <span :class="copyButtonIcon(project)" />
-              </button>
-              <UiActionMenu
-                :items="projectMenuItems(project)"
-                :aria-label="t('app.home.actions.more')"
-                @select="action => handleProjectMenuSelect(project, action)"
-              >
-                <button
-                  class="icon-button more-action"
-                  type="button"
-                  data-project-action="more"
-                  :title="t('app.home.actions.more')"
-                  :aria-label="t('app.home.actions.more')"
-                  :tabindex="actionButtonTabIndex(project, 'more')"
-                  @click.stop
-                >
-                  <span class="i-lucide:more-horizontal" />
-                </button>
-              </UiActionMenu>
-            </div>
-          </div>
-        </UiActionMenu>
-        <div
-          v-if="hasMoreProjects"
-          :ref="setLoadMoreSentinelRef"
-          class="load-more-sentinel"
-          aria-hidden="true"
-        />
-      </UiScrollArea>
-
-      <UiScrollArea v-else ref="cardsScrollAreaRef" class="cards-scroll">
-        <div class="cards-body">
-          <UiActionMenu
-            v-for="project in renderedProjects"
-            :key="project.appendTime"
-            mode="context"
-            :items="projectMenuItems(project)"
-            :aria-label="t('app.home.actions.more')"
-            @select="action => handleProjectMenuSelect(project, action)"
-          >
-            <article
-              :ref="el => setProjectItemRef(project.appendTime, el)"
-              class="project-card"
-              :class="{ missing: !project.isExists }"
-              role="button"
-              :tabindex="project.isExists ? 0 : -1"
-              :aria-disabled="!project.isExists"
-              :aria-label="t('app.home.actions.open_named', { name: project.name })"
-              aria-keyshortcuts="Enter Space Shift+F10 Control+I Meta+I Control+C Meta+C Delete Backspace"
-              @click="openProject(project)"
-              @keydown="handleProjectContainerKeydown(project, $event)"
-            >
-              <header class="card-header">
-                <div class="card-title">
-                  <strong :title="project.group ? `${project.group}/${project.name}` : project.name">
-                    <span v-if="project.isPinned" class="pinned-marker i-lucide:pin" />
-                    <span v-if="project.group" class="project-group-prefix" :title="project.group">{{ project.group }}/</span><span class="project-name" :title="project.name">{{ project.name }}</span>
-                  </strong>
-                  <span
-                    v-if="project.kind !== ProjectKind.MINE"
-                    class="kind-badge"
-                    :class="kindClass(project.kind)"
-                  >
-                    {{ kindLabel(project.kind) }}
-                  </span>
-                  <span v-if="project.isRemote" class="remote-badge" :title="t('app.home.remote.badge')">
-                    {{ t('app.home.remote.badge') }}
-                  </span>
-                  <span v-if="project.isTemporary" class="temporary-badge" :title="t('app.home.filters.temporary')">
-                    {{ t('app.home.filters.temporary') }}
-                  </span>
-                </div>
-              </header>
-
-              <div class="card-path" :title="project.path">
-                {{ pathCache.displayProjectPath(project.path) }}
-              </div>
-
-              <button
-                v-if="projectSourceUrl(project)"
-                class="project-source card-source source-link"
-                type="button"
-                :title="projectSourceTitle(project)"
-                :aria-label="`${t('app.home.actions.open_source')}: ${projectSourceName(project)}`"
-                @click.stop="openProjectSource(project)"
-                @keydown.stop
-              >
-                <span class="source-prefix">{{ projectSourcePrefix(project) }}</span>
-                <span class="source-name">{{ projectSourceName(project) }}</span>
-                <span class="source-link-icon i-lucide:external-link" />
-              </button>
-              <div v-else-if="hasProjectSource(project)" class="project-source card-source" :title="projectSourceTitle(project)">
-                <span class="source-prefix">{{ projectSourcePrefix(project) }}</span>
-                <span class="source-name">{{ projectSourceName(project) }}</span>
-              </div>
-
-              <div class="card-meta">
-                <button class="inline-pill" type="button" :title="project.mainLang || t('app.common.unknown')" @click.stop="showLanguage(project, $event)">
-                  <span class="color-dot" :style="{ background: project.mainLangColor || '#b8b8b8' }" />
-                  {{ project.mainLang || t('app.common.unknown') }}
-                </button>
-                <span
-                  v-if="project.license && project.license !== LicenseEnum.NONE"
-                  class="license-cell"
-                >
-                  {{ shortLicense(project.license) }}
-                </span>
-                <span v-else class="license-cell muted">{{ t('app.license.none') }}</span>
-              </div>
-
-              <footer class="card-footer">
-                <span class="editor-chip">
-                  <span :class="editorIconClasses(project.defaultOpen)" />
-                  <span class="editor-chip-label">{{ codeEditors[project.defaultOpen]?.label || t('app.common.no_editor') }}</span>
-                </span>
-                <div
-                  :ref="el => setProjectActionsRef(project.appendTime, el)"
-                  class="row-actions"
-                  role="toolbar"
-                  aria-orientation="horizontal"
-                  :aria-label="t('app.home.actions.project_actions', { name: project.name })"
-                  @keydown="handleProjectActionsKeydown(project, $event)"
-                >
-                  <button
-                    class="icon-button primary-action"
-                    :class="{ launching: isProjectOpening(project) }"
-                    type="button"
-                    data-project-action="open"
-                    :title="openProjectButtonTitle(project)"
-                    :aria-label="openProjectButtonAriaLabel(project)"
-                    :aria-busy="isProjectOpening(project)"
-                    :disabled="!project.isExists"
-                    :tabindex="actionButtonTabIndex(project, 'open')"
-                    @click.stop="openProject(project)"
-                  >
-                    <span :class="openProjectButtonIcon(project)" />
-                  </button>
-                  <button
-                    class="icon-button"
-                    type="button"
-                    data-project-action="explorer"
-                    :title="t('app.home.actions.open_explorer')"
-                    :aria-label="t('app.home.actions.open_explorer')"
-                    :disabled="isProjectActionDisabled(project, 'explorer')"
-                    :tabindex="actionButtonTabIndex(project, 'explorer')"
-                    @click.stop="openInExplorer(project)"
-                  >
-                    <span class="i-lucide:folder" />
-                  </button>
-                  <button
-                    class="icon-button"
-                    :class="{ 'action-loading': isTerminalOpening(project) }"
-                    type="button"
-                    data-project-action="terminal"
-                    :title="terminalButtonTitle(project)"
-                    :aria-label="terminalButtonAriaLabel(project)"
-                    :aria-busy="isTerminalOpening(project)"
-                    :disabled="!project.isExists"
-                    :tabindex="actionButtonTabIndex(project, 'terminal')"
-                    @click.stop="openInTerminal(project)"
-                  >
-                    <span :class="terminalButtonIcon(project)" />
-                  </button>
-                  <button
-                    class="icon-button copy-action"
-                    :class="copyButtonClass(project)"
-                    type="button"
-                    data-project-action="copy"
-                    :title="copyButtonTitle(project)"
-                    :aria-label="copyButtonTitle(project)"
-                    :tabindex="actionButtonTabIndex(project, 'copy')"
-                    @click.stop="copyProjectPath(project)"
-                  >
-                    <span :class="copyButtonIcon(project)" />
-                  </button>
-                  <UiActionMenu
-                    :items="projectMenuItems(project)"
-                    :aria-label="t('app.home.actions.more')"
-                    @select="action => handleProjectMenuSelect(project, action)"
-                  >
-                    <button
-                      class="icon-button more-action"
-                      type="button"
-                      data-project-action="more"
-                      :title="t('app.home.actions.more')"
-                      :aria-label="t('app.home.actions.more')"
-                      :tabindex="actionButtonTabIndex(project, 'more')"
-                      @click.stop
-                    >
-                      <span class="i-lucide:more-horizontal" />
-                    </button>
-                  </UiActionMenu>
-                </div>
-              </footer>
-            </article>
-          </UiActionMenu>
-          <div
-            v-if="hasMoreProjects"
-            :ref="setLoadMoreSentinelRef"
-            class="load-more-sentinel card-sentinel"
-            aria-hidden="true"
-          />
-        </div>
-      </UiScrollArea>
     </section>
 
     <mainLangPop />
   </main>
 </template>
 
-<style lang="scss" scoped>
-.workspace-shell {
-  @apply size-full overflow-hidden flex flex-col;
-  @apply bg-$ui-page-background;
-}
-
-.workspace-topbar {
-  @apply shrink-0 flex items-center justify-between gap-12px;
-  @apply px-14px pt-10px pb-7px;
-}
-
-.title-block {
-  @apply min-w-0 shrink-0 flex flex-col gap-1px;
-
-  h1 {
-    @apply m-0 inline-flex items-center gap-7px text-17px font-650 lh-21px;
-  }
-}
-
-.title-row {
-  @apply min-w-0 flex items-center gap-6px;
-}
-
-.topbar-actions {
-  @apply shrink-0 flex items-center gap-7px;
-}
-
-.clear-button {
-  @apply h-30px border-0 rounded-5px px-9px;
-  @apply inline-flex items-center gap-6px whitespace-nowrap;
-  @apply text-12px font-560 cursor-pointer;
-}
-
-.filter-bar {
-  @apply shrink-0 flex flex-wrap items-center gap-7px px-14px pb-7px;
-}
-
-.search-box {
-  @apply h-30px min-w-220px flex-1 rounded-md border;
-  @apply flex items-center gap-7px px-9px;
-  border-style: solid;
-  border-color: var(--ui-input);
-  @apply bg-$ui-control-background color-$ui-foreground;
-  box-shadow: var(--shadow-control);
-  transition:
-    border-color 120ms ease,
-    box-shadow 120ms ease;
-
-  &:focus-within {
-    border-color: var(--ui-ring);
-    box-shadow: var(--shadow-focus);
-  }
-
-  input {
-    @apply min-w-0 flex-1 border-0 bg-transparent outline-none;
-    @apply text-12px;
-    appearance: none;
-    border-style: solid;
-    color: var(--ui-foreground);
-
-    &::placeholder {
-      color: var(--ui-muted-foreground);
-    }
-  }
-}
-
-.search-clear-button {
-  @apply size-18px shrink-0 rounded-full border-0 p-0;
-  @apply inline-flex items-center justify-center cursor-pointer text-11px;
-  @apply bg-$ui-hover-background color-$ui-muted-foreground;
-  @apply hover:color-$ui-foreground;
-}
-
-.count-badge {
-  @apply shrink-0 size-18px rounded-full px-0;
-  @apply inline-flex items-center justify-center;
-  @apply text-11px font-650 bg-$ui-hover-background color-$ui-muted-foreground;
-}
-
-.spinning {
-  animation: spin-sync 0.8s linear infinite;
-}
-
-@keyframes spin-sync {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.clear-button {
-  @apply bg-$ui-control-background color-$ui-muted-foreground;
-  @apply hover:bg-$ui-hover-background hover:color-$ui-foreground;
-}
-
-.project-table {
-  @apply min-h-0 mx-14px mb-14px flex-1 overflow-hidden rounded-6px flex flex-col;
-  @apply bg-$ui-surface-background;
-  box-shadow: var(--shadow-surface);
-}
-
-.project-grid {
-  @apply grid items-center gap-9px;
-  grid-template-columns: minmax(220px, 1.7fr) 110px 140px 104px 122px 136px;
-}
-
-/* 加大"编辑器"(第3列)与"许可证"(第4列)之间的间距:只给许可证列加左边距,
-   表头与每一行都是 .project-grid 的直接子元素,因此自动保持对齐。 */
-.project-grid > :nth-child(4) {
-  @apply ml-8px;
-}
-
-.table-head {
-  @apply h-31px px-12px border-b text-11px uppercase tracking-0;
-  @apply light:border-$gray-12 dark:border-$gray-4;
-  @apply light:color-$gray-7 dark:color-$gray-8;
-}
-
-.table-body {
-  @apply min-h-0 flex-1;
-}
-
-.project-row {
-  @apply min-h-52px px-12px py-6px border-b cursor-pointer;
-  @apply light:border-$gray-13 dark:border-$gray-3;
-  @apply hover:bg-$ui-hover-background;
-  @apply focus-visible:outline-none;
-  transition:
-    background-color 120ms ease-out,
-    box-shadow 120ms ease-out,
-    opacity 120ms ease-out;
-
-  &:focus-visible {
-    box-shadow: inset 0 0 0 2px var(--ui-ring);
-  }
-
-  &.missing {
-    @apply cursor-default opacity-78;
-
-    .project-name {
-      @apply color-$gray-7;
-    }
-  }
-}
-
-.load-more-sentinel {
-  @apply h-1px;
-}
-
-.project-main {
-  @apply min-w-0 flex flex-col gap-3px;
-}
-
-.project-title-line {
-  @apply min-w-0 flex items-center gap-7px overflow-hidden;
-}
-
-.project-title {
-  @apply min-w-0 max-w-full flex items-center overflow-hidden;
-  flex: 0 1 auto;
-}
-
-.project-group-prefix {
-  @apply min-w-0 max-w-[45%] truncate text-12px font-600 light:color-$gray-7 dark:color-$gray-8;
-}
-
-.project-name {
-  @apply min-w-0 flex-1 truncate text-13px font-620 light:color-$gray-1 dark:color-$gray-13;
-}
-
-.temporary-badge {
-  @apply h-19px shrink-0 rounded-4px px-5px;
-  @apply inline-flex items-center text-10px font-650 lh-12px;
-  color: color-mix(in srgb, var(--yellow-2) 84%, var(--gray-1));
-  background: color-mix(in srgb, var(--yellow-4) 18%, var(--ui-surface-background));
-}
-
-.workspace-shell.theme-dark .temporary-badge {
-  color: color-mix(in srgb, var(--yellow-8) 88%, var(--gray-14));
-  background: color-mix(in srgb, var(--yellow-5) 16%, var(--ui-surface-background));
-}
-
-.remote-badge {
-  @apply h-19px shrink-0 rounded-4px px-5px;
-  @apply inline-flex items-center text-10px font-650 lh-12px;
-  color: color-mix(in srgb, var(--teal-2) 84%, var(--gray-1));
-  background: color-mix(in srgb, var(--teal-4) 18%, var(--ui-surface-background));
-}
-
-.workspace-shell.theme-dark .remote-badge {
-  color: color-mix(in srgb, var(--teal-8) 88%, var(--gray-14));
-  background: color-mix(in srgb, var(--teal-5) 16%, var(--ui-surface-background));
-}
-
-.pinned-marker {
-  @apply mr-4px shrink-0 text-11px color-$ui-primary;
-}
-
-.project-path,
-.recent-cell {
-  @apply truncate text-11px light:color-$gray-7 dark:color-$gray-8;
-}
-
-.project-source {
-  @apply min-w-0 w-fit max-w-full self-start border-0 bg-transparent p-0 text-11px;
-  @apply inline-flex items-center gap-4px text-left;
-  @apply light:color-$gray-7 dark:color-$gray-8;
-}
-
-.source-prefix {
-  @apply shrink-0;
-}
-
-.source-name {
-  @apply min-w-0 truncate;
-}
-
-.source-link {
-  @apply cursor-pointer hover:color-$ui-foreground focus-visible:outline-none;
-}
-
-.source-link:focus-visible {
-  box-shadow: var(--shadow-focus);
-}
-
-.source-link-icon {
-  @apply size-11px shrink-0 opacity-0;
-  transition: opacity 120ms ease-out;
-}
-
-.source-link:hover .source-link-icon,
-.source-link:focus-visible .source-link-icon {
-  @apply opacity-100;
-}
-
-.recent-cell.muted {
-  @apply color-$ui-muted-foreground;
-}
-
-.editor-chip {
-  @apply min-w-0 w-fit shrink-0 max-w-180px rounded-4px px-5px py-2px;
-  @apply inline-flex items-center gap-4px text-11px;
-  @apply bg-$ui-hover-background;
-
-  > span:first-child {
-    @apply shrink-0;
-  }
-}
-
-.editor-chip-label {
-  @apply min-w-0 truncate;
-}
-
-.project-row > .editor-cell > span:first-child {
-  @apply shrink-0;
-}
-
-/* 列表视图:中性元数据格(语言/许可证/编辑器)渲染为纯文本,只有"类型"保留彩色标签。
-   作用域限定在 .project-row,卡片视图的药丸不受影响。 */
-.project-row > .inline-pill,
-.project-row > .license-cell,
-.project-row > .editor-cell {
-  @apply bg-transparent px-0;
-}
-
-.project-row > .inline-pill {
-  @apply cursor-pointer;
-
-  &:hover {
-    @apply underline;
-  }
-}
-
-.inline-pill,
-.license-cell,
-.editor-cell {
-  @apply min-w-0 max-w-full h-23px rounded-4px px-7px border-0;
-  @apply inline-flex items-center gap-5px truncate text-11px;
-  @apply bg-$ui-control-background color-$ui-foreground;
-}
-
-.inline-pill {
-  @apply cursor-pointer hover:bg-$ui-hover-background;
-}
-
-.license-cell.muted {
-  @apply light:color-$gray-8 dark:color-$gray-7;
-}
-
-.color-dot {
-  @apply size-8px rounded-full shrink-0;
-}
-
-.kind-mine {
-  @apply [--kind-color:var(--blue-5)];
-  @apply [--kind-bg-light-strength:13%] [--kind-bg-dark-strength:18%];
-  @apply [--kind-text-light:var(--blue-5)] [--kind-text-dark:var(--blue-8)];
-}
-
-.kind-fork {
-  @apply [--kind-color:var(--purple-5)];
-  @apply [--kind-bg-light-strength:14%] [--kind-bg-dark-strength:20%];
-  @apply [--kind-text-light:color-mix(in_srgb,var(--purple-5)_92%,var(--gray-1))];
-  @apply [--kind-text-dark:color-mix(in_srgb,var(--purple-8)_86%,var(--gray-1))];
-}
-
-.kind-clone {
-  @apply [--kind-color:var(--yellow-5)] [--kind-bg-dark-color:var(--yellow-3)] [--kind-bg-dark-base:var(--gray-1)];
-  @apply [--kind-bg-light-strength:27%] [--kind-bg-dark-strength:30%];
-  @apply [--kind-text-light:color-mix(in_srgb,var(--yellow-2)_96%,var(--gray-1))];
-  @apply [--kind-text-dark:color-mix(in_srgb,var(--yellow-5)_95%,var(--gray-1))];
-}
-
-.kind-badge {
-  @apply h-19px shrink-0 rounded-4px px-5px;
-  @apply inline-flex items-center text-10px font-650 lh-12px;
-  @apply [background:color-mix(in_srgb,var(--kind-color)_var(--kind-bg-light-strength),var(--ui-surface-background))];
-  @apply [color:var(--kind-text-light)];
-}
-
-.workspace-shell.theme-dark .kind-badge {
-  @apply [background:color-mix(in_srgb,var(--kind-bg-dark-color,var(--kind-color))_var(--kind-bg-dark-strength),var(--kind-bg-dark-base,var(--ui-surface-background)))];
-  @apply [color:var(--kind-text-dark)];
-}
-
-.row-actions {
-  @apply shrink-0 flex items-center justify-end gap-3px;
-}
-
-.icon-button {
-  @apply size-23px border-0 rounded-4px p-0;
-  @apply inline-flex items-center justify-center cursor-pointer;
-  @apply bg-transparent color-$ui-muted-foreground;
-  @apply hover:bg-$ui-hover-background hover:color-$ui-foreground;
-
-  > span {
-    @apply size-14px;
-  }
-
-  &:disabled {
-    @apply opacity-35 cursor-not-allowed;
-  }
-
-  &.primary-action {
-    color: color-mix(in srgb, var(--ui-primary) 58%, var(--ui-muted-foreground));
-
-    &:hover,
-    &:focus-visible {
-      @apply color-$ui-primary;
-    }
-  }
-
-  &.launching {
-    color: var(--ui-primary);
-    cursor: progress;
-  }
-
-  &.action-loading {
-    @apply color-$ui-foreground;
-    cursor: progress;
-  }
-
-  &.danger {
-    @apply color-$red-5;
-  }
-
-  &.copy-success {
-    @apply color-$green-5;
-  }
-
-  &.copy-error {
-    @apply color-$red-5;
-  }
-}
-
-.icon-button.title-settings {
-  @apply size-26px rounded-5px bg-transparent;
-  @apply hover:bg-$ui-hover-background;
-}
-
-.cards-scroll {
-  @apply min-h-0 flex-1;
-}
-
-.cards-body {
-  @apply min-h-full p-12px;
-  @apply grid gap-12px content-start;
-  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
-}
-
-.card-sentinel {
-  @apply col-span-full;
-}
-
-.project-card {
-  @apply min-w-0 rounded-6px border p-12px cursor-pointer;
-  @apply flex flex-col;
-  @apply border-$ui-border bg-$ui-control-background;
-  @apply hover:bg-$ui-hover-background;
-  @apply focus-visible:outline-none;
-  box-shadow: var(--shadow-surface);
-  transition:
-    background-color 120ms ease-out,
-    border-color 120ms ease-out,
-    box-shadow 120ms ease-out,
-    opacity 120ms ease-out,
-    transform 120ms ease-out;
-
-  &:hover {
-    box-shadow: var(--shadow-surface-hover);
-    transform: translateY(-1px);
-  }
-
-  &:focus-visible {
-    box-shadow: var(--shadow-focus), var(--shadow-surface-hover);
-  }
-
-  &.missing {
-    @apply cursor-default opacity-78;
-    box-shadow: var(--shadow-surface);
-    transform: none;
-
-    .card-title strong {
-      @apply color-$gray-7;
-    }
-  }
-}
-
-.card-header,
-.card-footer,
-.card-meta {
-  @apply min-w-0 flex items-center gap-9px;
-}
-
-.card-header {
-  @apply justify-between;
-}
-
-.card-title {
-  @apply min-w-0 flex-1 flex items-center gap-7px;
-
-  strong {
-    @apply min-w-0 flex-1 inline-flex items-center truncate text-13px font-650 light:color-$gray-1 dark:color-$gray-13;
-  }
-}
-
-.card-path {
-  @apply my-9px truncate text-11px light:color-$gray-6 dark:color-$gray-8;
-}
-
-.card-source {
-  @apply -mt-4px mb-9px;
-}
-
-.card-meta {
-  @apply mt-auto flex-wrap;
-}
-
-.card-footer {
-  @apply mt-12px grid;
-  grid-template-columns: minmax(0, 1fr) max-content;
-
-  .editor-chip {
-    @apply w-fit max-w-180px shrink justify-self-start;
-  }
-
-  .row-actions {
-    @apply opacity-0 pointer-events-none;
-    transition: opacity 120ms ease;
-  }
-}
-
-.project-card:hover,
-.project-card:focus,
-.project-card:focus-within {
-  .card-footer .row-actions {
-    @apply opacity-100 pointer-events-auto;
-  }
-}
-
-.empty-state {
-  @apply h-full flex flex-col items-center justify-center gap-5px;
-  @apply light:color-$gray-6 dark:color-$gray-8;
-
-  strong {
-    @apply text-14px light:color-$gray-2 dark:color-$gray-12;
-  }
-}
-
-@media (max-width: 1020px) {
-  .project-grid {
-    grid-template-columns: minmax(220px, 1fr) 104px 140px 112px 136px;
-  }
-
-  .project-grid > :nth-child(5) {
-    display: none;
-  }
-}
-
-@media (max-width: 760px) {
-  .workspace-topbar {
-    @apply items-start;
-  }
-
-  .topbar-actions {
-    @apply flex-wrap justify-end;
-  }
-
-  .filter-bar {
-    @apply flex-wrap;
-  }
-
-  .search-box {
-    @apply flex-none w-220px min-w-220px;
-  }
-
-  .layout-switch {
-    @apply flex-none justify-center;
-  }
-
-  .clear-button {
-    @apply shrink-0;
-  }
-
-  .project-grid {
-    grid-template-columns: minmax(210px, 1fr) 136px;
-  }
-
-  .project-grid > :nth-child(2),
-  .project-grid > :nth-child(3),
-  .project-grid > :nth-child(4),
-  .project-grid > :nth-child(5) {
-    display: none;
-  }
-}
-
+<style lang="scss">
 @media (max-width: 560px) {
-  .workspace-topbar {
-    @apply gap-8px px-10px pt-8px pb-6px;
-  }
-
-  .title-block .count-badge {
-    @apply inline-flex;
-  }
-
-  .topbar-actions {
-    @apply gap-5px;
-  }
-
-  .primary-button,
-  .ghost-button,
-  .clear-button {
-    @apply px-7px;
-  }
-
   .project-table {
     @apply mx-10px mb-10px;
   }
-
-  .filter-bar {
-    @apply px-10px gap-5px;
-  }
-
-  .search-box {
-    @apply w-188px min-w-188px;
-  }
-
-  .project-grid {
-    grid-template-columns: minmax(180px, 1fr) 84px;
-  }
-
-  .row-actions .icon-button:not(.primary-action):not(.copy-action):not(.more-action) {
-    display: none;
-  }
-
-  .row-actions {
-    @apply gap-2px;
-  }
-
-  .icon-button {
-    @apply size-22px;
-  }
 }
 </style>
diff --git a/src/views/HomeView/components/HomeEmptyState.vue b/src/views/HomeView/components/HomeEmptyState.vue
new file mode 100644
index 0000000..ef4b3a5
--- /dev/null
+++ b/src/views/HomeView/components/HomeEmptyState.vue
@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <div
+    h-full flex flex-col items-center justify-center
+    gap-5px light:color="$gray-6" dark:color="$gray-8"
+  >
+    <strong text-14px light:color="$gray-2" dark:color="$gray-12">{{ t('app.home.empty.title') }}</strong>
+    <span>{{ t('app.home.empty.desc') }}</span>
+  </div>
+</template>
diff --git a/src/views/HomeView/components/HomeFilterBar.vue b/src/views/HomeView/components/HomeFilterBar.vue
new file mode 100644
index 0000000..cbdf5c3
--- /dev/null
+++ b/src/views/HomeView/components/HomeFilterBar.vue
@@ -0,0 +1,184 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+
+import UiSegmentedControl from '~/components/ui/UiSegmentedControl.vue'
+import UiSelect from '~/components/ui/UiSelect.vue'
+
+import type { LayoutMode } from '../types'
+import LanguageFilterSelect from './LanguageFilterSelect.vue'
+
+type FilterValue = string
+
+interface FilterOption<T extends string = string> {
+  value: T
+  label: string
+  color?: string
+  count?: number
+}
+
+defineProps<{
+  searchValue: string
+  kindFilter: FilterValue
+  statusFilter: FilterValue
+  languageFilter: FilterValue
+  sortKey: FilterValue
+  layoutMode: LayoutMode
+  kindOptions: FilterOption[]
+  statusOptions: FilterOption[]
+  languageOptions: FilterOption[]
+  sortOptions: FilterOption[]
+  layoutOptions: Array<{ value: LayoutMode, label: string, icon: string }>
+  activeFilterCount: number
+}>()
+
+const emit = defineEmits<{
+  'update:searchValue': [value: string]
+  'update:kindFilter': [value: string]
+  'update:statusFilter': [value: string]
+  'update:languageFilter': [value: string]
+  'update:sortKey': [value: string]
+  'update:layoutMode': [value: LayoutMode]
+  clearSearch: []
+  clearFilters: []
+}>()
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <section
+    shrink-0 flex flex-wrap items-center gap-7px
+    px-14px pb-7px
+    class="filter-bar"
+  >
+    <div
+      h-30px min-w-220px flex-1 rounded-md border
+      flex items-center gap-7px px-9px
+      bg="$ui-control-background" color="$ui-foreground"
+      class="search-box"
+    >
+      <span i-lucide:search shrink-0 />
+      <input
+        min-w-0 flex-1 appearance-none border-0 border-solid
+        bg-transparent outline-none
+        text-12px color="$ui-foreground" placeholder:color="$ui-muted-foreground"
+        :value="searchValue"
+        :aria-label="t('app.home.search_placeholder')"
+        :placeholder="t('app.home.search_placeholder')"
+        spellcheck="false"
+        @input="emit('update:searchValue', ($event.target as HTMLInputElement).value)"
+      >
+      <button
+        v-if="searchValue"
+        size-18px shrink-0 rounded-full border-0 p-0
+        inline-flex items-center justify-center cursor-pointer text-11px
+        bg="$ui-hover-background" color="$ui-muted-foreground" hover:color="$ui-foreground"
+        type="button"
+        :title="t('app.common.clear')"
+        :aria-label="t('app.common.clear')"
+        @click="emit('clearSearch')"
+      >
+        <span i-lucide:x />
+      </button>
+    </div>
+
+    <UiSelect
+      :model-value="kindFilter"
+      :options="kindOptions"
+      :placeholder="t('app.home.filters.kind')"
+      :aria-label="t('app.home.filters.kind')"
+      min-width="128px"
+      @update:model-value="emit('update:kindFilter', $event)"
+    />
+
+    <UiSelect
+      :model-value="statusFilter"
+      :options="statusOptions"
+      :placeholder="t('app.home.filters.status')"
+      :aria-label="t('app.home.filters.status')"
+      min-width="128px"
+      @update:model-value="emit('update:statusFilter', $event)"
+    />
+
+    <LanguageFilterSelect
+      :model-value="languageFilter"
+      :options="languageOptions"
+      :placeholder="t('app.home.filters.language')"
+      :aria-label="t('app.home.filters.language')"
+      min-width="150px"
+      content-width="210px"
+      @update:model-value="emit('update:languageFilter', $event)"
+    />
+
+    <UiSelect
+      :model-value="sortKey"
+      :options="sortOptions"
+      :placeholder="t('app.home.filters.sort')"
+      :aria-label="t('app.home.filters.sort')"
+      min-width="122px"
+      content-width="170px"
+      @update:model-value="emit('update:sortKey', $event)"
+    />
+
+    <button
+      v-if="activeFilterCount"
+      h-30px border-0 rounded-5px px-9px
+      inline-flex items-center gap-6px whitespace-nowrap
+      text-12px font-560 cursor-pointer
+      bg="$ui-control-background" color="$ui-muted-foreground"
+      hover:bg="$ui-hover-background" hover:color="$ui-foreground"
+      class="clear-button"
+      type="button"
+      @click="emit('clearFilters')"
+    >
+      {{ t('app.home.clear_count', { count: activeFilterCount }) }}
+    </button>
+
+    <UiSegmentedControl
+      class="layout-switch"
+      :model-value="layoutMode"
+      :options="layoutOptions"
+      :aria-label="t('app.home.layout.label')"
+      @update:model-value="emit('update:layoutMode', $event as LayoutMode)"
+    />
+  </section>
+</template>
+
+<style lang="scss" scoped>
+.search-box {
+  @apply border-$ui-input border-solid shadow-$shadow-control;
+  @apply transition duration-120 ease-out;
+
+  &:focus-within {
+    @apply border-$ui-ring shadow-$shadow-focus;
+  }
+}
+
+@media (max-width: 760px) {
+  .search-box {
+    @apply flex-none w-220px min-w-220px;
+  }
+
+  .layout-switch {
+    @apply flex-none justify-center;
+  }
+
+  .clear-button {
+    @apply shrink-0;
+  }
+}
+
+@media (max-width: 560px) {
+  .filter-bar {
+    @apply px-10px gap-5px;
+  }
+
+  .search-box {
+    @apply w-188px min-w-188px;
+  }
+
+  .clear-button {
+    @apply px-7px;
+  }
+}
+</style>
diff --git a/src/views/HomeView/components/HomeHeader.vue b/src/views/HomeView/components/HomeHeader.vue
new file mode 100644
index 0000000..5723c20
--- /dev/null
+++ b/src/views/HomeView/components/HomeHeader.vue
@@ -0,0 +1,114 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+
+defineProps<{
+  total: number
+  syncing: boolean
+  scannerEnabled: boolean
+}>()
+
+const emit = defineEmits<{
+  add: []
+  sync: []
+  settings: []
+}>()
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <section
+    shrink-0 flex items-center justify-between gap-12px
+    px-14px pt-10px pb-7px
+    class="workspace-topbar"
+  >
+    <div min-w-0 shrink-0 flex flex-col gap-1px>
+      <div min-w-0 flex items-center gap-6px>
+        <h1
+          m-0 inline-flex items-center gap-7px text-17px
+          font-650 lh-21px
+        >
+          {{ t('app.home.title') }}
+          <span
+            shrink-0 size-18px rounded-full px-0
+            inline-flex items-center justify-center
+            text-11px font-650 bg="$ui-hover-background" color="$ui-muted-foreground"
+          >{{ total }}</span>
+        </h1>
+        <button
+          size-26px rounded-5px border-0 bg-transparent p-0
+          inline-flex items-center justify-center
+          color="$ui-foreground" hover:bg="$ui-hover-background"
+          transition duration-120 ease-out
+          type="button"
+          :title="t('app.settings.title')"
+          :aria-label="t('app.settings.title')"
+          @click="emit('settings')"
+        >
+          <span i-lucide:settings size-14px />
+        </button>
+      </div>
+    </div>
+
+    <div shrink-0 flex items-center gap-7px class="topbar-actions">
+      <button
+        v-if="scannerEnabled"
+        h-28px shrink-0 max-w-full rounded-5px border-0
+        px-9px
+        inline-flex items-center justify-center gap-5px whitespace-nowrap
+        text-12px font-560
+        bg="$ui-surface-background" color="$ui-foreground"
+        hover:bg="$ui-hover-background" disabled:opacity-55 disabled:hover:bg="$ui-surface-background"
+        transition duration-120 ease-out
+        class="topbar-button"
+        type="button"
+        :disabled="syncing"
+        @click="emit('sync')"
+      >
+        <span i-lucide:refresh-cw size-14px :class="{ 'animate-spin': syncing }" />
+        {{ syncing ? t('app.home.syncing') : t('app.home.sync') }}
+      </button>
+      <button
+        h-28px shrink-0 max-w-full rounded-5px border-0
+        px-9px
+        inline-flex items-center justify-center gap-5px whitespace-nowrap
+        text-12px font-560
+        bg="$ui-primary" color="$ui-primary-foreground"
+        hover:bg="$ui-primary-hover" active:bg="$ui-primary-active" disabled:opacity-55
+        transition duration-120 ease-out
+        class="topbar-button"
+        type="button"
+        @click="emit('add')"
+      >
+        <span i-lucide:plus size-14px color="$ui-primary-foreground" />
+        {{ t('app.home.add_project') }}
+      </button>
+    </div>
+  </section>
+</template>
+
+<style lang="scss" scoped>
+@media (max-width: 760px) {
+  .workspace-topbar {
+    @apply items-start;
+  }
+
+  .topbar-actions {
+    @apply flex-wrap justify-end;
+  }
+}
+
+@media (max-width: 560px) {
+  .workspace-topbar {
+    @apply gap-8px px-10px pt-8px pb-6px;
+  }
+
+  .topbar-actions {
+    @apply gap-5px;
+  }
+
+  .topbar-button {
+    @apply px-7px;
+  }
+}
+</style>
diff --git a/src/views/HomeView/LanguageFilterSelect.vue b/src/views/HomeView/components/LanguageFilterSelect.vue
similarity index 67%
rename from src/views/HomeView/LanguageFilterSelect.vue
rename to src/views/HomeView/components/LanguageFilterSelect.vue
index 5423461..7b7c964 100644
--- a/src/views/HomeView/LanguageFilterSelect.vue
+++ b/src/views/HomeView/components/LanguageFilterSelect.vue
@@ -62,22 +62,25 @@ function colorDotStyle(color?: string) {
       :aria-label="triggerLabel"
     >
       <SelectValue :placeholder="placeholder">
-        <span class="ui-select-label language-filter-label">
+        <span class="ui-select-label" min-w-0 inline-flex items-center gap-7px>
           <span
             v-if="selectedOption?.color"
-            class="language-filter-dot"
+            size-8px shrink-0 rounded-full
             :style="colorDotStyle(selectedOption?.color)"
           />
-          <span class="language-filter-label-text">
+          <span min-w-0 truncate>
             {{ selectedOption?.label || placeholder }}
           </span>
         </span>
-        <span v-if="selectedOption?.count !== undefined" class="language-filter-count-badge">
+        <span
+          v-if="selectedOption?.count !== undefined"
+          ml-6px shrink-0 text-11px font-650 color="$ui-muted-foreground"
+        >
           {{ selectedOption.count }}
         </span>
       </SelectValue>
       <SelectIcon class="ui-select-icon">
-        <span class="i-lucide:chevron-down" />
+        <span i-lucide:chevron-down />
       </SelectIcon>
     </SelectTrigger>
 
@@ -98,18 +101,21 @@ function colorDotStyle(color?: string) {
             :value="option.value"
           >
             <SelectItemIndicator class="ui-select-check">
-              <span class="i-lucide:check" />
+              <span i-lucide:check />
             </SelectItemIndicator>
             <SelectItemText class="ui-select-item-text">
-              <span class="language-filter-option-main">
+              <span min-w-0 flex items-center gap-7px>
                 <span
-                  class="language-filter-dot"
-                  :class="{ placeholder: !option.color }"
+                  size-8px shrink-0 rounded-full
+                  :class="{ 'opacity-0': !option.color }"
                   :style="colorDotStyle(option.color)"
                 />
-                <span>{{ option.label }}</span>
+                <span min-w-0 truncate>{{ option.label }}</span>
               </span>
-              <span v-if="option.count !== undefined" class="language-filter-count-badge">
+              <span
+                v-if="option.count !== undefined"
+                shrink-0 text-11px font-650 color="$ui-muted-foreground"
+              >
                 {{ option.count }}
               </span>
             </SelectItemText>
@@ -119,36 +125,3 @@ function colorDotStyle(color?: string) {
     </SelectPortal>
   </SelectRoot>
 </template>
-
-<style lang="scss">
-.language-filter-label {
-  @apply min-w-0 inline-flex items-center gap-7px;
-}
-
-.language-filter-label-text {
-  @apply min-w-0 truncate;
-}
-
-.language-filter-dot {
-  @apply size-8px shrink-0 rounded-full;
-
-  &.placeholder {
-    @apply opacity-0;
-  }
-}
-
-.language-filter-option-main {
-  @apply min-w-0 flex items-center gap-7px;
-
-  span:last-child {
-    @apply min-w-0 truncate;
-  }
-}
-
-.language-filter-count-badge {
-  @apply shrink-0 size-18px rounded-full px-0;
-  @apply inline-flex items-center justify-center;
-  @apply text-11px font-650;
-  @apply bg-$ui-hover-background color-$ui-muted-foreground;
-}
-</style>
diff --git a/src/views/HomeView/components/ProjectCard.vue b/src/views/HomeView/components/ProjectCard.vue
new file mode 100644
index 0000000..99d0fac
--- /dev/null
+++ b/src/views/HomeView/components/ProjectCard.vue
@@ -0,0 +1,149 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+
+import type { UiActionMenuItem } from '~/components/ui/actionMenu'
+import UiActionMenu from '~/components/ui/UiActionMenu.vue'
+import type { LocalProject } from '~/constants/localProject'
+
+import type { ProjectActionKey } from '../types'
+import ProjectActions from './project/ProjectActions.vue'
+import ProjectEditorChip from './project/ProjectEditorChip.vue'
+import ProjectMeta from './project/ProjectMeta.vue'
+import ProjectSource from './project/ProjectSource.vue'
+import ProjectTitle from './project/ProjectTitle.vue'
+
+defineProps<{
+  project: LocalProject
+  displayPath: string
+  menuItems: UiActionMenuItem[]
+  isOpening: boolean
+  isTerminalOpening: boolean
+  copyFeedback?: 'success' | 'error'
+  actionButtonTabIndex: (project: LocalProject, action: ProjectActionKey) => number
+  isProjectActionDisabled: (project: LocalProject, action: ProjectActionKey) => boolean
+}>()
+
+const emit = defineEmits<{
+  itemRef: [projectId: number, element: unknown]
+  actionsRef: [projectId: number, element: unknown]
+  open: [project: LocalProject]
+  containerKeydown: [project: LocalProject, event: KeyboardEvent]
+  actionsKeydown: [project: LocalProject, event: KeyboardEvent]
+  showLanguage: [project: LocalProject, event: MouseEvent]
+  openSource: [project: LocalProject]
+  openExplorer: [project: LocalProject]
+  openTerminal: [project: LocalProject]
+  copyPath: [project: LocalProject]
+  menuSelect: [project: LocalProject, action: string]
+}>()
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <UiActionMenu
+    mode="context"
+    :items="menuItems"
+    :aria-label="t('app.home.actions.more')"
+    @select="action => emit('menuSelect', project, action)"
+  >
+    <article
+      :ref="el => emit('itemRef', project.appendTime, el)"
+      class="project-card"
+      :class="{ missing: !project.isExists }"
+      min-w-0 rounded-6px border p-12px cursor-pointer
+      flex flex-col bg="$ui-control-background"
+      hover:bg="$ui-hover-background" focus-visible:outline-none
+      role="button"
+      :tabindex="project.isExists ? 0 : -1"
+      :aria-disabled="!project.isExists"
+      :aria-label="t('app.home.actions.open_named', { name: project.name })"
+      aria-keyshortcuts="Enter Space Shift+F10 Control+I Meta+I Control+C Meta+C Delete Backspace"
+      @click="emit('open', project)"
+      @keydown="emit('containerKeydown', project, $event)"
+    >
+      <header min-w-0 flex items-center gap-9px justify-between>
+        <ProjectTitle :project="project" card />
+      </header>
+
+      <div
+        my-9px truncate text-11px light:color="$gray-6" dark:color="$gray-8"
+        :title="project.path"
+      >
+        {{ displayPath }}
+      </div>
+
+      <ProjectSource :project="project" card @open="emit('openSource', project)" />
+
+      <div
+        min-w-0 flex items-center gap-9px mt-auto
+        flex-wrap
+      >
+        <ProjectMeta :project="project" @show-language="(p, event) => emit('showLanguage', p, event)" />
+      </div>
+
+      <footer
+        min-w-0 items-center gap-9px mt-12px grid
+        class="card-footer"
+      >
+        <ProjectEditorChip :editor="project.defaultOpen" />
+        <ProjectActions
+          :project="project"
+          :menu-items="menuItems"
+          :is-opening="isOpening"
+          :is-terminal-opening="isTerminalOpening"
+          :copy-feedback="copyFeedback"
+          :action-button-tab-index="actionButtonTabIndex"
+          :is-project-action-disabled="isProjectActionDisabled"
+          @ref="(id, element) => emit('actionsRef', id, element)"
+          @open="emit('open', project)"
+          @explorer="emit('openExplorer', project)"
+          @terminal="emit('openTerminal', project)"
+          @copy="emit('copyPath', project)"
+          @menu-select="(p, action) => emit('menuSelect', p, action)"
+          @keydown="(p, event) => emit('actionsKeydown', p, event)"
+        />
+      </footer>
+    </article>
+  </UiActionMenu>
+</template>
+
+<style lang="scss" scoped>
+.project-card {
+  @apply border-$ui-border shadow-$shadow-surface;
+  @apply transition duration-120 ease-out;
+
+  &:hover {
+    @apply shadow-$shadow-surface-hover -translate-y-1px;
+  }
+
+  &:focus-visible {
+    @apply shadow-[var(--shadow-focus),var(--shadow-surface-hover)];
+  }
+
+  &.missing {
+    @apply cursor-default opacity-78 shadow-$shadow-surface transform-none;
+  }
+}
+
+.card-footer {
+  @apply grid-cols-[minmax(0,1fr)_max-content];
+
+  :deep(.editor-chip) {
+    @apply justify-self-start;
+  }
+
+  :deep(.row-actions) {
+    @apply opacity-0 pointer-events-none;
+    @apply transition-opacity duration-120 ease-out;
+  }
+}
+
+.project-card:hover,
+.project-card:focus,
+.project-card:focus-within {
+  .card-footer :deep(.row-actions) {
+    @apply opacity-100 pointer-events-auto;
+  }
+}
+</style>
diff --git a/src/views/HomeView/components/ProjectGrid.vue b/src/views/HomeView/components/ProjectGrid.vue
new file mode 100644
index 0000000..05d4a35
--- /dev/null
+++ b/src/views/HomeView/components/ProjectGrid.vue
@@ -0,0 +1,75 @@
+<script lang="ts" setup>
+import type { UiActionMenuItem } from '~/components/ui/actionMenu'
+import UiScrollArea from '~/components/ui/UiScrollArea.vue'
+import type { LocalProject } from '~/constants/localProject'
+
+import type { ProjectActionKey } from '../types'
+import ProjectCard from './ProjectCard.vue'
+
+defineProps<{
+  projects: LocalProject[]
+  hasMoreProjects: boolean
+  displayProjectPath: (path: string) => string
+  projectMenuItems: (project: LocalProject) => UiActionMenuItem[]
+  isProjectOpening: (project: LocalProject) => boolean
+  isTerminalOpening: (project: LocalProject) => boolean
+  copyFeedback: Record<number, 'success' | 'error'>
+  actionButtonTabIndex: (project: LocalProject, action: ProjectActionKey) => number
+  isProjectActionDisabled: (project: LocalProject, action: ProjectActionKey) => boolean
+}>()
+
+const emit = defineEmits<{
+  scrollRef: [element: unknown]
+  sentinelRef: [element: unknown]
+  itemRef: [projectId: number, element: unknown]
+  actionsRef: [projectId: number, element: unknown]
+  open: [project: LocalProject]
+  containerKeydown: [project: LocalProject, event: KeyboardEvent]
+  actionsKeydown: [project: LocalProject, event: KeyboardEvent]
+  showLanguage: [project: LocalProject, event: MouseEvent]
+  openSource: [project: LocalProject]
+  openExplorer: [project: LocalProject]
+  openTerminal: [project: LocalProject]
+  copyPath: [project: LocalProject]
+  menuSelect: [project: LocalProject, action: string]
+}>()
+</script>
+
+<template>
+  <UiScrollArea :ref="element => emit('scrollRef', element)" min-h-0 flex-1>
+    <div
+      min-h-full p-12px grid gap-12px content-start
+      grid-cols="[repeat(auto-fill,minmax(min(320px,100%),1fr))]"
+    >
+      <ProjectCard
+        v-for="project in projects"
+        :key="project.appendTime"
+        :project="project"
+        :display-path="displayProjectPath(project.path)"
+        :menu-items="projectMenuItems(project)"
+        :is-opening="isProjectOpening(project)"
+        :is-terminal-opening="isTerminalOpening(project)"
+        :copy-feedback="copyFeedback[project.appendTime]"
+        :action-button-tab-index="actionButtonTabIndex"
+        :is-project-action-disabled="isProjectActionDisabled"
+        @item-ref="(id, element) => emit('itemRef', id, element)"
+        @actions-ref="(id, element) => emit('actionsRef', id, element)"
+        @open="emit('open', project)"
+        @container-keydown="(p, event) => emit('containerKeydown', p, event)"
+        @actions-keydown="(p, event) => emit('actionsKeydown', p, event)"
+        @show-language="(p, event) => emit('showLanguage', p, event)"
+        @open-source="emit('openSource', project)"
+        @open-explorer="emit('openExplorer', project)"
+        @open-terminal="emit('openTerminal', project)"
+        @copy-path="emit('copyPath', project)"
+        @menu-select="(p, action) => emit('menuSelect', p, action)"
+      />
+      <div
+        v-if="hasMoreProjects"
+        :ref="element => emit('sentinelRef', element)"
+        h-1px col-span-full
+        aria-hidden="true"
+      />
+    </div>
+  </UiScrollArea>
+</template>
diff --git a/src/views/HomeView/components/ProjectList.vue b/src/views/HomeView/components/ProjectList.vue
new file mode 100644
index 0000000..e171340
--- /dev/null
+++ b/src/views/HomeView/components/ProjectList.vue
@@ -0,0 +1,131 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+
+import type { UiActionMenuItem } from '~/components/ui/actionMenu'
+import UiScrollArea from '~/components/ui/UiScrollArea.vue'
+import type { LocalProject } from '~/constants/localProject'
+
+import type { ProjectActionKey } from '../types'
+import ProjectListRow from './ProjectListRow.vue'
+
+defineProps<{
+  projects: LocalProject[]
+  hasMoreProjects: boolean
+  locale: string
+  displayProjectPath: (path: string) => string
+  projectMenuItems: (project: LocalProject) => UiActionMenuItem[]
+  isProjectOpening: (project: LocalProject) => boolean
+  isTerminalOpening: (project: LocalProject) => boolean
+  copyFeedback: Record<number, 'success' | 'error'>
+  actionButtonTabIndex: (project: LocalProject, action: ProjectActionKey) => number
+  isProjectActionDisabled: (project: LocalProject, action: ProjectActionKey) => boolean
+}>()
+
+const emit = defineEmits<{
+  scrollRef: [element: unknown]
+  sentinelRef: [element: unknown]
+  itemRef: [projectId: number, element: unknown]
+  actionsRef: [projectId: number, element: unknown]
+  open: [project: LocalProject]
+  containerKeydown: [project: LocalProject, event: KeyboardEvent]
+  actionsKeydown: [project: LocalProject, event: KeyboardEvent]
+  showLanguage: [project: LocalProject, event: MouseEvent]
+  openSource: [project: LocalProject]
+  openExplorer: [project: LocalProject]
+  openTerminal: [project: LocalProject]
+  copyPath: [project: LocalProject]
+  menuSelect: [project: LocalProject, action: string]
+}>()
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <div
+    h-31px px-12px border-b text-11px uppercase
+    grid items-center gap-9px
+    tracking-0
+    light:border="$gray-12" dark:border="$gray-4"
+    light:color="$gray-7" dark:color="$gray-8"
+    class="project-grid"
+  >
+    <span>{{ t('app.home.table.project') }}</span>
+    <span>{{ t('app.home.table.language') }}</span>
+    <span>{{ t('app.home.table.editor') }}</span>
+    <span>{{ t('app.home.table.license') }}</span>
+    <span>{{ t('app.home.table.last_opened') }}</span>
+    <span>{{ t('app.home.table.actions') }}</span>
+  </div>
+
+  <UiScrollArea :ref="element => emit('scrollRef', element)" min-h-0 flex-1>
+    <ProjectListRow
+      v-for="project in projects"
+      :key="project.appendTime"
+      :project="project"
+      :display-path="displayProjectPath(project.path)"
+      :menu-items="projectMenuItems(project)"
+      :is-opening="isProjectOpening(project)"
+      :is-terminal-opening="isTerminalOpening(project)"
+      :copy-feedback="copyFeedback[project.appendTime]"
+      :locale="locale"
+      :action-button-tab-index="actionButtonTabIndex"
+      :is-project-action-disabled="isProjectActionDisabled"
+      @item-ref="(id, element) => emit('itemRef', id, element)"
+      @actions-ref="(id, element) => emit('actionsRef', id, element)"
+      @open="emit('open', project)"
+      @container-keydown="(p, event) => emit('containerKeydown', p, event)"
+      @actions-keydown="(p, event) => emit('actionsKeydown', p, event)"
+      @show-language="(p, event) => emit('showLanguage', p, event)"
+      @open-source="emit('openSource', project)"
+      @open-explorer="emit('openExplorer', project)"
+      @open-terminal="emit('openTerminal', project)"
+      @copy-path="emit('copyPath', project)"
+      @menu-select="(p, action) => emit('menuSelect', p, action)"
+    />
+    <div
+      v-if="hasMoreProjects"
+      :ref="element => emit('sentinelRef', element)"
+      h-1px
+      aria-hidden="true"
+    />
+  </UiScrollArea>
+</template>
+
+<style lang="scss" scoped>
+.project-grid {
+  @apply grid-cols-[minmax(220px,1.7fr)_110px_140px_104px_122px_136px];
+}
+
+.project-grid > :nth-child(4) {
+  @apply ml-8px;
+}
+
+@media (max-width: 1020px) {
+  .project-grid {
+    @apply grid-cols-[minmax(220px,1fr)_104px_140px_112px_136px];
+  }
+
+  .project-grid > :nth-child(5) {
+    @apply hidden;
+  }
+}
+
+@media (max-width: 760px) {
+  .project-grid {
+    @apply grid-cols-[minmax(210px,1fr)_136px];
+  }
+
+  .project-grid > :nth-child(2),
+  .project-grid > :nth-child(3),
+  .project-grid > :nth-child(4),
+  .project-grid > :nth-child(5) {
+    @apply hidden;
+  }
+}
+
+@media (max-width: 560px) {
+  .project-grid {
+    @apply grid-cols-[minmax(180px,1fr)_84px];
+  }
+}
+</style>
diff --git a/src/views/HomeView/components/ProjectListRow.vue b/src/views/HomeView/components/ProjectListRow.vue
new file mode 100644
index 0000000..e1215c7
--- /dev/null
+++ b/src/views/HomeView/components/ProjectListRow.vue
@@ -0,0 +1,159 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+
+import type { UiActionMenuItem } from '~/components/ui/actionMenu'
+import UiActionMenu from '~/components/ui/UiActionMenu.vue'
+import type { LocalProject } from '~/constants/localProject'
+
+import type { ProjectActionKey } from '../types'
+import { formatLastOpened } from '../utils/projectFormatters'
+import ProjectActions from './project/ProjectActions.vue'
+import ProjectEditorChip from './project/ProjectEditorChip.vue'
+import ProjectMeta from './project/ProjectMeta.vue'
+import ProjectSource from './project/ProjectSource.vue'
+import ProjectTitle from './project/ProjectTitle.vue'
+
+defineProps<{
+  project: LocalProject
+  displayPath: string
+  menuItems: UiActionMenuItem[]
+  isOpening: boolean
+  isTerminalOpening: boolean
+  copyFeedback?: 'success' | 'error'
+  locale: string
+  actionButtonTabIndex: (project: LocalProject, action: ProjectActionKey) => number
+  isProjectActionDisabled: (project: LocalProject, action: ProjectActionKey) => boolean
+}>()
+
+const emit = defineEmits<{
+  itemRef: [projectId: number, element: unknown]
+  actionsRef: [projectId: number, element: unknown]
+  open: [project: LocalProject]
+  containerKeydown: [project: LocalProject, event: KeyboardEvent]
+  actionsKeydown: [project: LocalProject, event: KeyboardEvent]
+  showLanguage: [project: LocalProject, event: MouseEvent]
+  openSource: [project: LocalProject]
+  openExplorer: [project: LocalProject]
+  openTerminal: [project: LocalProject]
+  copyPath: [project: LocalProject]
+  menuSelect: [project: LocalProject, action: string]
+}>()
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <UiActionMenu
+    mode="context"
+    :items="menuItems"
+    :aria-label="t('app.home.actions.more')"
+    @select="action => emit('menuSelect', project, action)"
+  >
+    <div
+      :ref="el => emit('itemRef', project.appendTime, el)"
+      class="project-grid project-row"
+      :class="{ missing: !project.isExists }"
+      min-h-52px px-12px py-6px border-b cursor-pointer
+      grid items-center gap-9px
+      light:border="$gray-13" dark:border="$gray-3"
+      hover:bg="$ui-hover-background" focus-visible:outline-none
+      transition duration-120 ease-out
+      focus-visible:shadow="[inset_0_0_0_2px_var(--ui-ring)]"
+      role="button"
+      :tabindex="project.isExists ? 0 : -1"
+      :aria-disabled="!project.isExists"
+      :aria-label="t('app.home.actions.open_named', { name: project.name })"
+      aria-keyshortcuts="Enter Space Shift+F10 Control+I Meta+I Control+C Meta+C Delete Backspace"
+      @click="emit('open', project)"
+      @keydown="emit('containerKeydown', project, $event)"
+    >
+      <div min-w-0 flex flex-col gap-3px>
+        <ProjectTitle :project="project" />
+        <div truncate text-11px light:color="$gray-7" dark:color="$gray-8" :title="project.path">
+          {{ displayPath }}
+        </div>
+        <ProjectSource :project="project" @open="emit('openSource', project)" />
+      </div>
+
+      <ProjectMeta
+        :project="project"
+        variant="language"
+        @show-language="(p, event) => emit('showLanguage', p, event)"
+      />
+      <ProjectEditorChip :editor="project.defaultOpen" list-cell />
+      <ProjectMeta :project="project" variant="license" />
+      <span
+        truncate text-11px light:color="$gray-7" dark:color="$gray-8"
+        class="recent-cell"
+        :class="{ muted: !project.lastOpenedAt }"
+      >
+        {{ formatLastOpened(project, locale, t) }}
+      </span>
+      <ProjectActions
+        :project="project"
+        :menu-items="menuItems"
+        :is-opening="isOpening"
+        :is-terminal-opening="isTerminalOpening"
+        :copy-feedback="copyFeedback"
+        :action-button-tab-index="actionButtonTabIndex"
+        :is-project-action-disabled="isProjectActionDisabled"
+        @ref="(id, element) => emit('actionsRef', id, element)"
+        @open="emit('open', project)"
+        @explorer="emit('openExplorer', project)"
+        @terminal="emit('openTerminal', project)"
+        @copy="emit('copyPath', project)"
+        @menu-select="(p, action) => emit('menuSelect', p, action)"
+        @keydown="(p, event) => emit('actionsKeydown', p, event)"
+      />
+    </div>
+  </UiActionMenu>
+</template>
+
+<style lang="scss" scoped>
+.project-grid {
+  @apply grid-cols-[minmax(220px,1.7fr)_110px_140px_104px_122px_136px];
+}
+
+.project-grid > :nth-child(4) {
+  @apply ml-8px;
+}
+
+.project-row {
+  &.missing {
+    @apply cursor-default opacity-78;
+  }
+}
+
+.recent-cell.muted {
+  @apply color-$ui-muted-foreground;
+}
+
+@media (max-width: 1020px) {
+  .project-grid {
+    @apply grid-cols-[minmax(220px,1fr)_104px_140px_112px_136px];
+  }
+
+  .project-grid > :nth-child(5) {
+    @apply hidden;
+  }
+}
+
+@media (max-width: 760px) {
+  .project-grid {
+    @apply grid-cols-[minmax(210px,1fr)_136px];
+  }
+
+  .project-grid > :nth-child(2),
+  .project-grid > :nth-child(3),
+  .project-grid > :nth-child(4),
+  .project-grid > :nth-child(5) {
+    @apply hidden;
+  }
+}
+
+@media (max-width: 560px) {
+  .project-grid {
+    @apply grid-cols-[minmax(180px,1fr)_84px];
+  }
+}
+</style>
diff --git a/src/views/HomeView/components/project/ProjectActions.vue b/src/views/HomeView/components/project/ProjectActions.vue
new file mode 100644
index 0000000..24ef59e
--- /dev/null
+++ b/src/views/HomeView/components/project/ProjectActions.vue
@@ -0,0 +1,238 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import type { UiActionMenuItem } from '~/components/ui/actionMenu'
+import UiActionMenu from '~/components/ui/UiActionMenu.vue'
+import type { LocalProject } from '~/constants/localProject'
+
+import type { ProjectActionKey } from '../../types'
+
+const props = defineProps<{
+  project: LocalProject
+  menuItems: UiActionMenuItem[]
+  isOpening: boolean
+  isTerminalOpening: boolean
+  copyFeedback?: 'success' | 'error'
+  actionButtonTabIndex: (project: LocalProject, action: ProjectActionKey) => number
+  isProjectActionDisabled: (project: LocalProject, action: ProjectActionKey) => boolean
+}>()
+
+const emit = defineEmits<{
+  ref: [projectId: number, element: unknown]
+  open: [project: LocalProject]
+  explorer: [project: LocalProject]
+  terminal: [project: LocalProject]
+  copy: [project: LocalProject]
+  menuSelect: [project: LocalProject, action: string]
+  keydown: [project: LocalProject, event: KeyboardEvent]
+}>()
+
+const { t } = useI18n()
+
+const copyButtonTitle = computed(() => {
+  if (props.copyFeedback === 'success')
+    return t('app.home.actions.copied')
+  if (props.copyFeedback === 'error')
+    return t('app.home.actions.copy_failed')
+  return t('app.home.actions.copy_path')
+})
+
+const copyButtonIcon = computed(() => {
+  if (props.copyFeedback === 'success')
+    return 'i-lucide:check'
+  if (props.copyFeedback === 'error')
+    return 'i-lucide:x'
+  return 'i-lucide:copy'
+})
+
+const copyButtonClass = computed(() => ({
+  'copy-success': props.copyFeedback === 'success',
+  'copy-error': props.copyFeedback === 'error',
+}))
+
+const openProjectButtonTitle = computed(() =>
+  props.isOpening
+    ? t('app.home.actions.opening_project')
+    : t('app.home.actions.open_project'),
+)
+
+const openProjectButtonAriaLabel = computed(() =>
+  props.isOpening
+    ? t('app.home.actions.opening_named', { name: props.project.name })
+    : t('app.home.actions.open_named', { name: props.project.name }),
+)
+
+const openProjectButtonIcon = computed(() =>
+  props.isOpening
+    ? 'i-lucide:loader-circle animate-spin'
+    : 'i-lucide:external-link',
+)
+
+const terminalButtonTitle = computed(() =>
+  props.isTerminalOpening
+    ? t('app.home.actions.opening_terminal')
+    : t('app.home.actions.open_terminal'),
+)
+
+const terminalButtonAriaLabel = computed(() =>
+  props.isTerminalOpening
+    ? t('app.home.actions.opening_terminal_named', { name: props.project.name })
+    : t('app.home.actions.open_terminal'),
+)
+
+const terminalButtonIcon = computed(() =>
+  props.isTerminalOpening
+    ? 'i-lucide:loader-circle animate-spin'
+    : 'i-lucide:square-terminal',
+)
+</script>
+
+<template>
+  <div
+    :ref="el => emit('ref', project.appendTime, el)"
+    class="row-actions"
+    shrink-0 flex items-center justify-end gap-3px
+    role="toolbar"
+    aria-orientation="horizontal"
+    :aria-label="t('app.home.actions.project_actions', { name: project.name })"
+    @keydown="emit('keydown', project, $event)"
+  >
+    <button
+      class="action-button primary-action"
+      :class="{ launching: isOpening }"
+      size-23px border-0 rounded-4px p-0
+      inline-flex items-center justify-center cursor-pointer
+      bg-transparent color="$ui-muted-foreground"
+      hover:bg="$ui-hover-background" hover:color="$ui-foreground"
+      type="button"
+      data-project-action="open"
+      :title="openProjectButtonTitle"
+      :aria-label="openProjectButtonAriaLabel"
+      :aria-busy="isOpening"
+      :disabled="!project.isExists"
+      :tabindex="actionButtonTabIndex(project, 'open')"
+      @click.stop="emit('open', project)"
+    >
+      <span size-14px :class="openProjectButtonIcon" />
+    </button>
+    <button
+      class="action-button"
+      size-23px border-0 rounded-4px p-0
+      inline-flex items-center justify-center cursor-pointer
+      bg-transparent color="$ui-muted-foreground"
+      hover:bg="$ui-hover-background" hover:color="$ui-foreground"
+      type="button"
+      data-project-action="explorer"
+      :title="t('app.home.actions.open_explorer')"
+      :aria-label="t('app.home.actions.open_explorer')"
+      :disabled="isProjectActionDisabled(project, 'explorer')"
+      :tabindex="actionButtonTabIndex(project, 'explorer')"
+      @click.stop="emit('explorer', project)"
+    >
+      <span size-14px i-lucide:folder />
+    </button>
+    <button
+      class="action-button"
+      :class="{ 'action-loading': isTerminalOpening }"
+      size-23px border-0 rounded-4px p-0
+      inline-flex items-center justify-center cursor-pointer
+      bg-transparent color="$ui-muted-foreground"
+      hover:bg="$ui-hover-background" hover:color="$ui-foreground"
+      type="button"
+      data-project-action="terminal"
+      :title="terminalButtonTitle"
+      :aria-label="terminalButtonAriaLabel"
+      :aria-busy="isTerminalOpening"
+      :disabled="!project.isExists"
+      :tabindex="actionButtonTabIndex(project, 'terminal')"
+      @click.stop="emit('terminal', project)"
+    >
+      <span size-14px :class="terminalButtonIcon" />
+    </button>
+    <button
+      class="action-button copy-action"
+      :class="copyButtonClass"
+      size-23px border-0 rounded-4px p-0
+      inline-flex items-center justify-center cursor-pointer
+      bg-transparent color="$ui-muted-foreground"
+      hover:bg="$ui-hover-background" hover:color="$ui-foreground"
+      type="button"
+      data-project-action="copy"
+      :title="copyButtonTitle"
+      :aria-label="copyButtonTitle"
+      :tabindex="actionButtonTabIndex(project, 'copy')"
+      @click.stop="emit('copy', project)"
+    >
+      <span size-14px :class="copyButtonIcon" />
+    </button>
+    <UiActionMenu
+      :items="menuItems"
+      :aria-label="t('app.home.actions.more')"
+      @select="action => emit('menuSelect', project, action)"
+    >
+      <button
+        class="action-button more-action"
+        size-23px border-0 rounded-4px p-0
+        inline-flex items-center justify-center cursor-pointer
+        bg-transparent color="$ui-muted-foreground"
+        hover:bg="$ui-hover-background" hover:color="$ui-foreground"
+        type="button"
+        data-project-action="more"
+        :title="t('app.home.actions.more')"
+        :aria-label="t('app.home.actions.more')"
+        :tabindex="actionButtonTabIndex(project, 'more')"
+        @click.stop
+      >
+        <span size-14px i-lucide:more-horizontal />
+      </button>
+    </UiActionMenu>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.action-button {
+  &:disabled {
+    @apply opacity-35 cursor-not-allowed;
+  }
+
+  &.primary-action {
+    @apply [color:color-mix(in_srgb,var(--ui-primary)_58%,var(--ui-muted-foreground))];
+
+    &:hover,
+    &:focus-visible {
+      @apply color-$ui-primary;
+    }
+  }
+
+  &.launching {
+    @apply color-$ui-primary cursor-progress;
+  }
+
+  &.action-loading {
+    @apply color-$ui-foreground cursor-progress;
+  }
+
+  &.copy-success {
+    @apply color-$green-5;
+  }
+
+  &.copy-error {
+    @apply color-$red-5;
+  }
+}
+
+@media (max-width: 560px) {
+  .row-actions {
+    @apply gap-2px;
+  }
+
+  .action-button {
+    @apply size-22px;
+  }
+
+  .action-button:not(.primary-action):not(.copy-action):not(.more-action) {
+    @apply hidden;
+  }
+}
+</style>
diff --git a/src/views/HomeView/components/project/ProjectEditorChip.vue b/src/views/HomeView/components/project/ProjectEditorChip.vue
new file mode 100644
index 0000000..8c55400
--- /dev/null
+++ b/src/views/HomeView/components/project/ProjectEditorChip.vue
@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+
+import type { CodeEditorEnum } from '~/constants/codeEditor'
+
+import { editorIconClasses, editorLabel } from '../../utils/projectFormatters'
+
+defineProps<{
+  editor: CodeEditorEnum
+  listCell?: boolean
+}>()
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <span
+    min-w-0 max-w-full h-23px
+    inline-flex items-center gap-5px truncate text-11px
+    color="$ui-foreground"
+    :class="listCell ? 'editor-cell' : 'editor-chip'"
+    :title="editorLabel(editor, t)"
+  >
+    <span shrink-0 :class="editorIconClasses(editor)" />
+    <span min-w-0 truncate>{{ editorLabel(editor, t) }}</span>
+  </span>
+</template>
+
+<style lang="scss" scoped>
+.editor-chip {
+  @apply w-fit shrink max-w-180px;
+}
+</style>
diff --git a/src/views/HomeView/components/project/ProjectMeta.vue b/src/views/HomeView/components/project/ProjectMeta.vue
new file mode 100644
index 0000000..3adc193
--- /dev/null
+++ b/src/views/HomeView/components/project/ProjectMeta.vue
@@ -0,0 +1,59 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+
+import { LicenseEnum } from '~/constants/license'
+import type { LocalProject } from '~/constants/localProject'
+import { formatProjectLanguage, shortLicense } from '~/utils/projectFormatters'
+
+const props = withDefaults(defineProps<{
+  project: LocalProject
+  variant?: 'all' | 'language' | 'license'
+}>(), {
+  variant: 'all',
+})
+
+const emit = defineEmits<{
+  showLanguage: [project: LocalProject, event: MouseEvent]
+}>()
+
+const { t } = useI18n()
+
+const showLanguage = computed(() => props.variant !== 'license')
+const showLicense = computed(() => props.variant !== 'language')
+const languageLabel = computed(() => formatProjectLanguage(props.project.mainLang, t))
+</script>
+
+<template>
+  <button
+    v-if="showLanguage"
+    class="inline-pill"
+    min-w-0 max-w-full h-23px border-0 bg-transparent
+    px-5px
+    inline-flex items-center gap-5px truncate text-11px
+    color="$ui-foreground"
+    cursor-pointer underline decoration-transparent underline-offset-2
+    hover:decoration-current
+    type="button"
+    :title="languageLabel"
+    @click.stop="emit('showLanguage', project, $event)"
+  >
+    <span size-8px rounded-full shrink-0 :style="{ background: project.mainLangColor || '#b8b8b8' }" />
+    {{ languageLabel }}
+  </button>
+  <span
+    v-if="showLicense && project.license && project.license !== LicenseEnum.NONE"
+    class="license-pill"
+    min-w-0 max-w-full h-23px px-5px
+    inline-flex items-center gap-5px truncate text-11px
+    color="$ui-foreground"
+  >
+    {{ shortLicense(project.license, t) }}
+  </span>
+  <span
+    v-else-if="showLicense"
+    class="license-pill"
+    min-w-0 max-w-full h-23px px-5px
+    inline-flex items-center gap-5px truncate text-11px
+    light:color="$gray-8" dark:color="$gray-7"
+  >{{ t('app.license.none') }}</span>
+</template>
diff --git a/src/views/HomeView/components/project/ProjectSource.vue b/src/views/HomeView/components/project/ProjectSource.vue
new file mode 100644
index 0000000..7e397b9
--- /dev/null
+++ b/src/views/HomeView/components/project/ProjectSource.vue
@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+
+import type { LocalProject } from '~/constants/localProject'
+import {
+  hasProjectSource,
+  projectSourceName,
+  projectSourceUrl,
+} from '~/utils/projectSource'
+
+import {
+  projectSourcePrefix,
+  projectSourceTitle,
+} from '../../utils/projectSource'
+
+withDefaults(defineProps<{
+  project: LocalProject
+  card?: boolean
+}>(), {
+  card: false,
+})
+
+const emit = defineEmits<{
+  open: [project: LocalProject]
+}>()
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <button
+    v-if="projectSourceUrl(project)"
+    min-w-0 w-fit max-w-full self-start border-0
+    bg-transparent p-0 text-11px
+    inline-flex items-center gap-4px text-left
+    light:color="$gray-7" dark:color="$gray-8"
+    class="project-source source-link"
+    :class="card ? '-mt-4px mb-9px' : ''"
+    type="button"
+    :title="projectSourceTitle(project, t)"
+    :aria-label="`${t('app.home.actions.open_source')}: ${projectSourceName(project)}`"
+    @click.stop="emit('open', project)"
+    @keydown.stop
+  >
+    <span shrink-0>{{ projectSourcePrefix(project, t) }}</span>
+    <span min-w-0 truncate>{{ projectSourceName(project) }}</span>
+    <span size-11px shrink-0 opacity-0 class="source-link-icon i-lucide:external-link" />
+  </button>
+  <div
+    v-else-if="hasProjectSource(project)"
+    min-w-0 w-fit max-w-full self-start border-0
+    bg-transparent p-0 text-11px
+    inline-flex items-center gap-4px text-left
+    light:color="$gray-7" dark:color="$gray-8"
+    class="project-source"
+    :class="card ? '-mt-4px mb-9px' : ''"
+    :title="projectSourceTitle(project, t)"
+  >
+    <span shrink-0>{{ projectSourcePrefix(project, t) }}</span>
+    <span min-w-0 truncate>{{ projectSourceName(project) }}</span>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.source-link {
+  @apply cursor-pointer hover:color-$ui-foreground focus-visible:outline-none;
+
+  &:focus-visible {
+    @apply shadow-$shadow-focus;
+  }
+}
+
+.source-link-icon {
+  @apply transition-opacity duration-120 ease-out;
+}
+
+.source-link:hover .source-link-icon,
+.source-link:focus-visible .source-link-icon {
+  @apply opacity-100;
+}
+</style>
diff --git a/src/views/HomeView/components/project/ProjectTitle.vue b/src/views/HomeView/components/project/ProjectTitle.vue
new file mode 100644
index 0000000..bbacf9d
--- /dev/null
+++ b/src/views/HomeView/components/project/ProjectTitle.vue
@@ -0,0 +1,104 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+
+import type { LocalProject } from '~/constants/localProject'
+import { ProjectKind } from '~/constants/localProject'
+import { kindLabel } from '~/utils/projectFormatters'
+
+import { kindClass } from '../../utils/projectFormatters'
+
+withDefaults(defineProps<{
+  project: LocalProject
+  card?: boolean
+}>(), {
+  card: false,
+})
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <div
+    min-w-0 flex items-center gap-7px overflow-hidden
+    :class="card ? 'w-full' : ''"
+  >
+    <strong
+      v-if="card"
+      min-w-0 flex-1 inline-flex items-center truncate
+      text-13px font-650 light:color="$gray-1" dark:color="$gray-13"
+      :title="project.group ? `${project.group}/${project.name}` : project.name"
+    >
+      <span
+        v-if="project.isPinned" mr-4px shrink-0 text-11px color="$ui-primary"
+        class="i-lucide:pin"
+      />
+      <span
+        v-if="project.group" min-w-0 max-w="[45%]" truncate text-12px
+        font-600 light:color="$gray-7" dark:color="$gray-8" :title="project.group"
+      >{{ project.group }}/</span><span
+        min-w-0 flex-1 truncate text-13px font-620
+        light:color="$gray-1" dark:color="$gray-13" :title="project.name"
+      >{{ project.name }}</span>
+    </strong>
+    <span
+      v-else
+      min-w-0 max-w-full flex items-center overflow-hidden
+      grow-0 shrink basis-auto
+      :title="project.group ? `${project.group}/${project.name}` : project.name"
+    >
+      <span
+        v-if="project.isPinned" mr-4px shrink-0 text-11px color="$ui-primary"
+        class="i-lucide:pin"
+      />
+      <span
+        v-if="project.group" min-w-0 max-w="[45%]" truncate text-12px
+        font-600 light:color="$gray-7" dark:color="$gray-8" :title="project.group"
+      >{{ project.group }}/</span><span
+        min-w-0 flex-1 truncate text-13px font-620
+        light:color="$gray-1" dark:color="$gray-13" :title="project.name"
+      >{{ project.name }}</span>
+    </span>
+    <span
+      v-if="project.kind !== ProjectKind.MINE || project.isRemote || project.isTemporary"
+      shrink-0 flex items-center gap-5px
+      :class="card ? 'ml-auto justify-end' : ''"
+    >
+      <span
+        v-if="project.kind !== ProjectKind.MINE"
+        h-18px shrink-0 rounded-4px px-5px
+        inline-flex items-center text-10px font-650 lh-12px
+        :class="kindClass(project.kind)"
+      >
+        {{ kindLabel(project.kind, t) }}
+      </span>
+      <span
+        v-if="project.isRemote"
+        h-18px shrink-0 rounded-4px px-5px
+        inline-flex items-center text-10px font-650 lh-12px
+        color="$project-tag-remote-text" bg="$project-tag-remote-bg"
+        :title="t('app.home.remote.badge')"
+      >
+        {{ t('app.home.remote.badge') }}
+      </span>
+      <span
+        v-if="project.isTemporary"
+        h-18px shrink-0 rounded-4px px-5px
+        inline-flex items-center text-10px font-650 lh-12px
+        color="$project-tag-temporary-text" bg="$project-tag-temporary-bg"
+        :title="t('app.home.filters.temporary')"
+      >
+        {{ t('app.home.filters.temporary') }}
+      </span>
+    </span>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.kind-fork {
+  @apply color-$project-tag-fork-text bg-$project-tag-fork-bg;
+}
+
+.kind-clone {
+  @apply color-$project-tag-clone-text bg-$project-tag-clone-bg;
+}
+</style>
diff --git a/src/views/HomeView/composables/useProjectActions.ts b/src/views/HomeView/composables/useProjectActions.ts
new file mode 100644
index 0000000..8188f43
--- /dev/null
+++ b/src/views/HomeView/composables/useProjectActions.ts
@@ -0,0 +1,424 @@
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { showPop as showLanguagePop } from '~/components/LanguagePop/LanguagePopProvider'
+import { showRemoveDialog } from '~/components/RemoveProjectDialog'
+import { showToast } from '~/components/ui/toast'
+import { SettingPageEnum, ViewEnum } from '~/constants/appEnums'
+import type { CodeEditorEnum } from '~/constants/codeEditor'
+import { isCodeEditor, isVscodeHistoryScannerEditor } from '~/constants/codeEditor'
+import type { LocalProject } from '~/constants/localProject'
+import {
+  DEFAULT_EDITOR_ACTION_PREFIX,
+  DEFAULT_EDITOR_AUTO_ACTION,
+  OPEN_WITH_ACTION_PREFIX,
+} from '~/constants/projectActions'
+import type { ProjectScannerImportResult } from '~/services/projectScannerService'
+import { addNewProjectsFromScanner, scannerBusy } from '~/services/projectScannerService'
+import { useEditorLangGroupsStore } from '~/stores/editorLangGroupsStore'
+import { useProjectsStore } from '~/stores/projectsStore'
+import { useSettingsStore } from '~/stores/settingsStore'
+import { formatActionError } from '~/utils/error'
+import { projectSourceExternalUrl } from '~/utils/projectSource'
+import {
+  initializeNewProjectState,
+  initializeUpdateProjectState,
+} from '~/views/ProjectEditorView'
+import { activatedPage } from '~/views/SettingsView'
+
+import {
+  MIN_SYNC_BUSY_MS,
+  SCAN_RESULT_TOAST_THRESHOLD_MS,
+} from '../constants'
+
+interface ProjectActionsOpenState {
+  clearProjectOpening: (projectId: number) => void
+  clearProjectFromMaps: (projectId: number) => void
+  clearTerminalOpening: (projectId: number) => void
+  finishProjectOpening: (projectId: number) => void
+  finishTerminalOpening: (projectId: number) => void
+  isProjectOpening: (project: LocalProject) => boolean
+  isTerminalOpening: (project: LocalProject) => boolean
+  markProjectOpening: (projectId: number) => void
+  markTerminalOpening: (projectId: number) => void
+}
+
+interface UseProjectActionsOptions {
+  deleteProjectRefs: (projectId: number) => void
+  navigateFromHome: (view: ViewEnum) => void
+  openState: ProjectActionsOpenState
+}
+
+export function useProjectActions(options: UseProjectActionsOptions) {
+  const projectsStore = useProjectsStore()
+  const settingsStore = useSettingsStore()
+  const editorLangGroupsStore = useEditorLangGroupsStore()
+  const { t } = useI18n()
+
+  const manualSyncing = ref(false)
+  const syncing = computed(() => manualSyncing.value || scannerBusy.value)
+  const copyFeedback = ref<Record<number, 'success' | 'error'>>({})
+  const copyFeedbackTimers = new Map<number, number>()
+
+  const {
+    clearProjectFromMaps: clearOpenStateFromMaps,
+    clearProjectOpening,
+    clearTerminalOpening,
+    finishProjectOpening,
+    finishTerminalOpening,
+    isProjectOpening,
+    isTerminalOpening,
+    markProjectOpening,
+    markTerminalOpening,
+  } = options.openState
+
+  function addProject() {
+    initializeNewProjectState()
+    options.navigateFromHome(ViewEnum.ProjectEditor)
+  }
+
+  function editProject(project: LocalProject) {
+    initializeUpdateProjectState(project)
+    options.navigateFromHome(ViewEnum.ProjectEditor)
+  }
+
+  async function openProject(project: LocalProject) {
+    if (isProjectOpening(project))
+      return
+
+    await openProjectWithEditor(project, project.defaultOpen)
+  }
+
+  async function openProjectWithEditor(project: LocalProject, editor: CodeEditorEnum) {
+    if (!project.isExists || isProjectOpening(project))
+      return
+
+    if (project.isRemote) {
+      await openRemoteProjectWithEditor(project, editor)
+      return
+    }
+
+    const launchConfig = settingsStore.getEditorLaunchConfig(editor)
+    if (!launchConfig?.command) {
+      showMissingEditorCommandToast()
+      return
+    }
+
+    markProjectOpening(project.appendTime)
+    try {
+      await window.api.openProject(launchConfig.command, project.path, launchConfig.openInTerminal)
+      void projectsStore.markProjectOpened(project.appendTime)
+      finishProjectOpening(project.appendTime)
+    }
+    catch (error: unknown) {
+      clearProjectOpening(project.appendTime)
+      console.error('Failed to open project:', error)
+      showToast({
+        tone: 'error',
+        title: t('app.home.feedback.open_failed'),
+        description: formatActionError(error),
+      })
+    }
+  }
+
+  async function openRemoteProjectWithEditor(project: LocalProject, editor: CodeEditorEnum) {
+    if (!project.remoteHost || !project.remotePath)
+      return
+
+    if (!isVscodeHistoryScannerEditor(editor)) {
+      showToast({
+        tone: 'error',
+        title: t('app.home.feedback.open_failed'),
+        description: t('app.home.feedback.remote_editor_unsupported'),
+      })
+      return
+    }
+
+    const launchConfig = settingsStore.getEditorLaunchConfig(editor)
+    if (!launchConfig?.command) {
+      showMissingEditorCommandToast()
+      return
+    }
+
+    markProjectOpening(project.appendTime)
+    try {
+      await window.api.openRemoteProject(project.remoteHost, project.remotePath, launchConfig.command, 'vscode')
+      void projectsStore.markProjectOpened(project.appendTime)
+      finishProjectOpening(project.appendTime)
+    }
+    catch (error: unknown) {
+      clearProjectOpening(project.appendTime)
+      console.error('Failed to open remote project:', error)
+      showToast({
+        tone: 'error',
+        title: t('app.home.feedback.open_failed'),
+        description: formatActionError(error),
+      })
+    }
+  }
+
+  function clearProjectFromMaps(projectId: number) {
+    options.deleteProjectRefs(projectId)
+    clearCopyFeedback(projectId)
+    clearOpenStateFromMaps(projectId)
+  }
+
+  async function copyProjectPath(project: LocalProject) {
+    try {
+      if (!navigator.clipboard?.writeText)
+        throw new Error('Clipboard API is not available')
+
+      await navigator.clipboard.writeText(project.path)
+      setCopyFeedback(project.appendTime, 'success')
+    }
+    catch (error) {
+      console.error('Failed to copy project path:', error)
+      setCopyFeedback(project.appendTime, 'error')
+    }
+  }
+
+  function setCopyFeedback(projectId: number, status: 'success' | 'error') {
+    const activeTimer = copyFeedbackTimers.get(projectId)
+    if (activeTimer)
+      window.clearTimeout(activeTimer)
+
+    copyFeedback.value = {
+      ...copyFeedback.value,
+      [projectId]: status,
+    }
+
+    const timer = window.setTimeout(() => {
+      const { [projectId]: _removed, ...rest } = copyFeedback.value
+      copyFeedback.value = rest
+      copyFeedbackTimers.delete(projectId)
+    }, 1400)
+
+    copyFeedbackTimers.set(projectId, timer)
+  }
+
+  function clearCopyFeedback(projectId: number) {
+    const copyTimer = copyFeedbackTimers.get(projectId)
+    if (copyTimer) {
+      window.clearTimeout(copyTimer)
+      copyFeedbackTimers.delete(projectId)
+    }
+  }
+
+  function clearCopyFeedbackTimers() {
+    copyFeedbackTimers.forEach(timer => window.clearTimeout(timer))
+    copyFeedbackTimers.clear()
+  }
+
+  function scanResultDescription(result: ProjectScannerImportResult, changedStatusCount: number) {
+    const parts: string[] = []
+
+    if (result.added > 0)
+      parts.push(t('app.home.feedback.scan_added', { count: result.added }))
+    if (changedStatusCount > 0)
+      parts.push(t('app.home.feedback.scan_updated', { count: changedStatusCount }))
+    if (result.failed > 0)
+      parts.push(t('app.home.feedback.scan_failed_items', { count: result.failed }))
+
+    return parts.length > 0
+      ? parts.join(t('app.common.list_separator'))
+      : t('app.home.feedback.scan_no_changes')
+  }
+
+  function showScanResultToast(result: ProjectScannerImportResult, changedStatusCount: number, elapsed: number) {
+    const hasVisibleResult = result.added > 0 || result.failed > 0 || changedStatusCount > 0
+    if (!hasVisibleResult && elapsed < SCAN_RESULT_TOAST_THRESHOLD_MS)
+      return
+
+    showToast({
+      tone: result.failed > 0 ? 'warning' : hasVisibleResult ? 'success' : 'info',
+      title: t('app.home.feedback.scan_completed'),
+      description: scanResultDescription(result, changedStatusCount),
+    })
+  }
+
+  function openProjectSource(project: LocalProject) {
+    const sourceUrl = projectSourceExternalUrl(project)
+    if (sourceUrl)
+      window.api.openExternal(sourceUrl)
+  }
+
+  async function toggleProjectPinned(project: LocalProject) {
+    await projectsStore.toggleProjectPinned(project.appendTime)
+  }
+
+  async function toggleProjectArchived(project: LocalProject) {
+    await projectsStore.toggleProjectArchived(project.appendTime)
+  }
+
+  async function setProjectDefaultEditor(project: LocalProject, editor: CodeEditorEnum) {
+    await projectsStore.setProjectDefaultOpen(project.appendTime, editor)
+  }
+
+  async function setProjectDefaultEditorAutomatically(project: LocalProject) {
+    const editor = editorLangGroupsStore.getEditorByLanguage(project.mainLang, project.defaultOpen) ?? project.defaultOpen
+    await setProjectDefaultEditor(project, editor)
+  }
+
+  function handleProjectMenuSelect(project: LocalProject, action: string) {
+    if (action.startsWith(OPEN_WITH_ACTION_PREFIX)) {
+      const editor = action.slice(OPEN_WITH_ACTION_PREFIX.length)
+      if (isCodeEditor(editor))
+        void openProjectWithEditor(project, editor)
+      return
+    }
+
+    if (action === DEFAULT_EDITOR_AUTO_ACTION) {
+      void setProjectDefaultEditorAutomatically(project)
+      return
+    }
+
+    if (action.startsWith(DEFAULT_EDITOR_ACTION_PREFIX)) {
+      const editor = action.slice(DEFAULT_EDITOR_ACTION_PREFIX.length)
+      if (isCodeEditor(editor))
+        void setProjectDefaultEditor(project, editor)
+      return
+    }
+
+    switch (action) {
+      case 'pin':
+        void toggleProjectPinned(project)
+        break
+      case 'archive':
+        void toggleProjectArchived(project)
+        break
+      case 'source':
+      case 'open-source':
+        openProjectSource(project)
+        break
+      case 'open':
+        void openProject(project)
+        break
+      case 'explorer':
+        openInExplorer(project)
+        break
+      case 'terminal':
+        void openInTerminal(project)
+        break
+      case 'copy':
+      case 'copy-path':
+        void copyProjectPath(project)
+        break
+      case 'edit':
+        editProject(project)
+        break
+      case 'remove':
+        showRemoveDialog(project)
+        break
+    }
+  }
+
+  function openInExplorer(project: LocalProject) {
+    window.api.openInExplorer(project.path)
+  }
+
+  async function openInTerminal(project: LocalProject) {
+    if (!project.isExists || isTerminalOpening(project))
+      return
+
+    markTerminalOpening(project.appendTime)
+    try {
+      if (project.isRemote && project.remoteHost && project.remotePath) {
+        await window.api.openRemoteProject(project.remoteHost, project.remotePath, '', 'terminal')
+      }
+      else {
+        await window.api.openInTerminal(project.path, settingsStore.terminalCommand)
+      }
+      finishTerminalOpening(project.appendTime)
+    }
+    catch (error) {
+      clearTerminalOpening(project.appendTime)
+      console.error('Failed to open project in terminal:', error)
+      showToast({
+        tone: 'error',
+        title: t('app.home.feedback.terminal_failed'),
+        description: formatActionError(error),
+      })
+    }
+  }
+
+  async function syncProjects() {
+    if (!settingsStore.scannerEnabled || syncing.value)
+      return
+
+    const startedAt = performance.now()
+    let workElapsed = 0
+    let changedStatusCount = 0
+    let scanResult: ProjectScannerImportResult | null = null
+    let scanError: unknown = null
+    manualSyncing.value = true
+    try {
+      changedStatusCount = await projectsStore.refreshProjectExistence()
+      scanResult = await addNewProjectsFromScanner()
+    }
+    catch (error) {
+      console.error('Project scanner failed:', error)
+      scanError = error
+    }
+    finally {
+      workElapsed = performance.now() - startedAt
+      if (workElapsed < MIN_SYNC_BUSY_MS)
+        await new Promise(resolve => setTimeout(resolve, MIN_SYNC_BUSY_MS - workElapsed))
+      manualSyncing.value = false
+    }
+
+    if (scanError) {
+      showToast({
+        tone: 'error',
+        title: t('app.home.feedback.scan_failed'),
+        description: formatActionError(scanError),
+      })
+      return
+    }
+
+    if (scanResult)
+      showScanResultToast(scanResult, changedStatusCount, workElapsed)
+  }
+
+  function showLanguage(project: LocalProject, event: MouseEvent) {
+    showLanguagePop(project, event.currentTarget as HTMLElement)
+  }
+
+  function openSettings() {
+    options.navigateFromHome(ViewEnum.Settings)
+  }
+
+  function openEditorSettings() {
+    activatedPage.value = SettingPageEnum.Ides
+    options.navigateFromHome(ViewEnum.Settings)
+  }
+
+  function showMissingEditorCommandToast() {
+    showToast({
+      tone: 'warning',
+      title: t('no_ide_path_dialog.dialog_title'),
+      description: t('no_ide_path_dialog.dialog_desc'),
+      action: {
+        label: t('no_ide_path_dialog.set'),
+        onSelect: openEditorSettings,
+      },
+    })
+  }
+
+  return {
+    addProject,
+    clearCopyFeedbackTimers,
+    clearProjectFromMaps,
+    copyFeedback,
+    copyProjectPath,
+    editProject,
+    handleProjectMenuSelect,
+    openInExplorer,
+    openInTerminal,
+    openProject,
+    openProjectSource,
+    openSettings,
+    showLanguage,
+    syncing,
+    syncProjects,
+  }
+}
diff --git a/src/views/HomeView/composables/useProjectFilters.ts b/src/views/HomeView/composables/useProjectFilters.ts
index 35e6f3a..e089752 100644
--- a/src/views/HomeView/composables/useProjectFilters.ts
+++ b/src/views/HomeView/composables/useProjectFilters.ts
@@ -4,6 +4,7 @@ import { computed, ref } from 'vue'
 import type { LocalProject } from '~/constants/localProject'
 import { ProjectKind } from '~/constants/localProject'
 import { useProjectsStore } from '~/stores/projectsStore'
+import { formatProjectLanguage } from '~/utils/projectFormatters'
 
 type KindFilter = ProjectKind | 'all'
 type StatusFilter = 'all' | 'available' | 'missing' | 'temporary' | 'archived'
@@ -111,7 +112,7 @@ export function useProjectFilters(
     { value: 'all', label: t('app.home.filters.all_languages'), count: totalProjects.value },
     ...languages.value.map(language => ({
       value: language.text,
-      label: language.text === 'unknown' ? t('app.common.unknown') : language.text,
+      label: formatProjectLanguage(language.text, t),
       color: language.color,
       count: language.count,
     })),
diff --git a/src/views/HomeView/composables/useProjectKeyboardNavigation.ts b/src/views/HomeView/composables/useProjectKeyboardNavigation.ts
new file mode 100644
index 0000000..0313eb0
--- /dev/null
+++ b/src/views/HomeView/composables/useProjectKeyboardNavigation.ts
@@ -0,0 +1,390 @@
+import type { Ref } from 'vue'
+
+import { showRemoveDialog } from '~/components/RemoveProjectDialog'
+import type { LocalProject } from '~/constants/localProject'
+import { PROJECT_ACTION_KEYS } from '~/constants/projectActions'
+
+import type { LayoutMode, ProjectActionKey } from '../types'
+
+interface ProjectRefs {
+  projectItemRefs: Map<number, HTMLElement>
+  projectActionRefs: Map<number, HTMLElement>
+}
+
+interface ProjectKeyboardNavigationOptions {
+  filteredProjects: Ref<LocalProject[]>
+  layoutMode: Ref<LayoutMode>
+  refs: ProjectRefs
+  ensureProjectRendered: (project: LocalProject) => Promise<void>
+  openProject: (project: LocalProject) => Promise<void>
+  editProject: (project: LocalProject) => void
+  copyProjectPath: (project: LocalProject) => Promise<void>
+}
+
+export function useProjectKeyboardNavigation(options: ProjectKeyboardNavigationOptions) {
+  const {
+    filteredProjects,
+    layoutMode,
+    refs,
+    ensureProjectRendered,
+    openProject,
+    editProject,
+    copyProjectPath,
+  } = options
+
+  async function focusProject(project: LocalProject | undefined) {
+    if (!project?.isExists)
+      return
+
+    await ensureProjectRendered(project)
+
+    const element = refs.projectItemRefs.get(project.appendTime)
+    if (!element)
+      return
+
+    element.focus({ preventScroll: true })
+    element.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+  }
+
+  function findProjectByLinearOffset(project: LocalProject, offset: number, includeMissing = false) {
+    const projects = filteredProjects.value.filter(item => includeMissing || item.isExists)
+    const currentIndex = projects.findIndex(item => item.appendTime === project.appendTime)
+    if (currentIndex < 0)
+      return undefined
+
+    const targetIndex = Math.max(0, Math.min(projects.length - 1, currentIndex + offset))
+    return projects[targetIndex]
+  }
+
+  function focusProjectByLinearOffset(project: LocalProject, offset: number) {
+    focusProject(findProjectByLinearOffset(project, offset))
+  }
+
+  function focusProjectAtEdge(edge: 'start' | 'end') {
+    const focusableProjects = filteredProjects.value.filter(item => item.isExists)
+    focusProject(edge === 'start' ? focusableProjects[0] : focusableProjects.at(-1))
+  }
+
+  function openProjectContextMenuFromKeyboard(event: KeyboardEvent) {
+    const target = event.currentTarget
+    if (!(target instanceof HTMLElement))
+      return
+
+    const rect = target.getBoundingClientRect()
+    target.dispatchEvent(new MouseEvent('contextmenu', {
+      bubbles: true,
+      cancelable: true,
+      clientX: rect.left + Math.min(36, rect.width / 2),
+      clientY: rect.top + Math.min(24, rect.height / 2),
+    }))
+  }
+
+  function findProjectByGridDirection(project: LocalProject, direction: 'left' | 'right' | 'up' | 'down', includeMissing = false) {
+    const currentElement = refs.projectItemRefs.get(project.appendTime)
+    if (!currentElement)
+      return findProjectByGridLinearDirection(project, direction, includeMissing)
+
+    const currentRect = currentElement.getBoundingClientRect()
+    const currentCenterX = currentRect.left + currentRect.width / 2
+    const sameRowTolerance = Math.max(8, currentRect.height / 2)
+
+    const candidates = filteredProjects.value
+      .filter(item => (includeMissing || item.isExists) && item.appendTime !== project.appendTime)
+      .map((item) => {
+        const element = refs.projectItemRefs.get(item.appendTime)
+        return element
+          ? { project: item, rect: element.getBoundingClientRect() }
+          : null
+      })
+      .filter(item => item !== null)
+
+    if (direction === 'left' || direction === 'right') {
+      const sameRow = candidates
+        .filter(item => Math.abs(item.rect.top - currentRect.top) <= sameRowTolerance)
+        .filter(item => direction === 'left' ? item.rect.left < currentRect.left : item.rect.left > currentRect.left)
+        .sort((a, b) => direction === 'left' ? b.rect.left - a.rect.left : a.rect.left - b.rect.left)
+
+      if (sameRow[0])
+        return sameRow[0].project
+
+      return findProjectByLinearOffset(project, direction === 'left' ? -1 : 1, includeMissing)
+    }
+
+    const verticalCandidates = candidates
+      .filter(item => direction === 'up' ? item.rect.top < currentRect.top - 4 : item.rect.top > currentRect.top + 4)
+      .sort((a, b) => {
+        const rowDistanceA = Math.abs(a.rect.top - currentRect.top)
+        const rowDistanceB = Math.abs(b.rect.top - currentRect.top)
+        if (rowDistanceA !== rowDistanceB)
+          return rowDistanceA - rowDistanceB
+
+        const centerA = a.rect.left + a.rect.width / 2
+        const centerB = b.rect.left + b.rect.width / 2
+        return Math.abs(centerA - currentCenterX) - Math.abs(centerB - currentCenterX)
+      })
+
+    return verticalCandidates[0]?.project || findProjectByGridLinearDirection(project, direction, includeMissing)
+  }
+
+  function focusCardByDirection(project: LocalProject, direction: 'left' | 'right' | 'up' | 'down') {
+    focusProject(findProjectByGridDirection(project, direction))
+  }
+
+  function findProjectByGridLinearDirection(project: LocalProject, direction: 'left' | 'right' | 'up' | 'down', includeMissing = false) {
+    const projects = filteredProjects.value.filter(item => includeMissing || item.isExists)
+    const currentIndex = projects.findIndex(item => item.appendTime === project.appendTime)
+    if (currentIndex < 0)
+      return undefined
+
+    const columnCount = getRenderedGridColumnCount()
+    const offset = {
+      left: -1,
+      right: 1,
+      up: -columnCount,
+      down: columnCount,
+    }[direction]
+
+    const targetIndex = Math.max(0, Math.min(projects.length - 1, currentIndex + offset))
+    return projects[targetIndex]
+  }
+
+  function getRenderedGridColumnCount() {
+    const firstElement = refs.projectItemRefs.values().next().value
+    if (!(firstElement instanceof HTMLElement))
+      return 1
+
+    const firstTop = firstElement.getBoundingClientRect().top
+    let columnCount = 0
+
+    for (const element of refs.projectItemRefs.values()) {
+      if (Math.abs(element.getBoundingClientRect().top - firstTop) <= 4)
+        columnCount += 1
+    }
+
+    return Math.max(1, columnCount)
+  }
+
+  function isProjectActionDisabled(project: LocalProject, action: ProjectActionKey) {
+    if (project.isRemote && action === 'explorer')
+      return true
+    return !project.isExists && (action === 'open' || action === 'explorer' || action === 'terminal')
+  }
+
+  function firstEnabledProjectAction(project: LocalProject) {
+    return PROJECT_ACTION_KEYS.find(action => !isProjectActionDisabled(project, action)) || 'more'
+  }
+
+  function actionButtonTabIndex(project: LocalProject, action: ProjectActionKey) {
+    if (isProjectActionDisabled(project, action))
+      return -1
+
+    return firstEnabledProjectAction(project) === action ? 0 : -1
+  }
+
+  function projectActionKey(button: HTMLButtonElement) {
+    const action = button.dataset.projectAction
+    return PROJECT_ACTION_KEYS.includes(action as ProjectActionKey)
+      ? action as ProjectActionKey
+      : null
+  }
+
+  function toolbarActionButtons(toolbar: HTMLElement) {
+    return Array.from(toolbar.querySelectorAll<HTMLButtonElement>('[data-project-action]'))
+      .filter(button => !button.disabled && button.getClientRects().length > 0)
+  }
+
+  function focusToolbarButtonAtIndex(toolbar: HTMLElement, index: number) {
+    const buttons = toolbarActionButtons(toolbar)
+    if (!buttons.length)
+      return
+
+    const targetIndex = Math.max(0, Math.min(buttons.length - 1, index))
+    buttons[targetIndex]?.focus({ preventScroll: true })
+  }
+
+  async function focusProjectAction(project: LocalProject | undefined, preferredAction: ProjectActionKey | null, preferredIndex: number) {
+    if (!project)
+      return
+
+    await ensureProjectRendered(project)
+
+    const toolbar = refs.projectActionRefs.get(project.appendTime)
+    if (!toolbar)
+      return
+
+    const buttons = toolbarActionButtons(toolbar)
+    if (!buttons.length)
+      return
+
+    const sameActionButton = preferredAction
+      ? buttons.find(button => projectActionKey(button) === preferredAction)
+      : undefined
+    const fallbackIndex = Math.max(0, Math.min(buttons.length - 1, preferredIndex))
+    const target = sameActionButton || buttons[fallbackIndex] || buttons[0]
+
+    target.focus({ preventScroll: true })
+    target.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+  }
+
+  function handleProjectActionsKeydown(project: LocalProject, event: KeyboardEvent) {
+    if (event.defaultPrevented)
+      return
+
+    if (handleProjectShortcut(project, event))
+      return
+
+    const toolbar = event.currentTarget
+    if (!(toolbar instanceof HTMLElement))
+      return
+
+    const target = event.target instanceof HTMLElement
+      ? event.target.closest<HTMLButtonElement>('[data-project-action]')
+      : null
+    const buttons = toolbarActionButtons(toolbar)
+    const currentIndex = target ? buttons.indexOf(target) : -1
+    const action = target ? projectActionKey(target) : null
+
+    if (!buttons.length)
+      return
+
+    const focusHorizontalAction = (offset: number) => {
+      event.preventDefault()
+      event.stopPropagation()
+      focusToolbarButtonAtIndex(toolbar, currentIndex < 0 ? 0 : currentIndex + offset)
+    }
+
+    const focusVerticalAction = (offset: number, direction: 'up' | 'down') => {
+      event.preventDefault()
+      event.stopPropagation()
+      const targetProject = layoutMode.value === 'grid'
+        ? findProjectByGridDirection(project, direction, true)
+        : findProjectByLinearOffset(project, offset, true)
+      focusProjectAction(targetProject, action, currentIndex)
+    }
+
+    switch (event.key) {
+      case 'ArrowLeft':
+        focusHorizontalAction(-1)
+        break
+      case 'ArrowRight':
+        focusHorizontalAction(1)
+        break
+      case 'ArrowUp':
+        focusVerticalAction(-1, 'up')
+        break
+      case 'ArrowDown':
+        focusVerticalAction(1, 'down')
+        break
+      case 'Home':
+        event.preventDefault()
+        event.stopPropagation()
+        focusToolbarButtonAtIndex(toolbar, 0)
+        break
+      case 'End':
+        event.preventDefault()
+        event.stopPropagation()
+        focusToolbarButtonAtIndex(toolbar, buttons.length - 1)
+        break
+    }
+  }
+
+  function handleProjectShortcut(project: LocalProject, event: KeyboardEvent) {
+    const usesCommandModifier = (event.metaKey || event.ctrlKey) && !event.altKey && !event.shiftKey
+    const key = event.key.toLowerCase()
+
+    if (usesCommandModifier && key === 'i') {
+      event.preventDefault()
+      event.stopPropagation()
+      editProject(project)
+      return true
+    }
+
+    if (usesCommandModifier && key === 'c') {
+      event.preventDefault()
+      event.stopPropagation()
+      void copyProjectPath(project)
+      return true
+    }
+
+    const isRemoveKey = !event.metaKey && !event.ctrlKey && !event.altKey && !event.shiftKey
+      && (event.key === 'Delete' || event.key === 'Backspace')
+    if (isRemoveKey) {
+      event.preventDefault()
+      event.stopPropagation()
+      showRemoveDialog(project)
+      return true
+    }
+
+    return false
+  }
+
+  function handleProjectContainerKeydown(project: LocalProject, event: KeyboardEvent) {
+    if (event.target !== event.currentTarget)
+      return
+
+    if (handleProjectShortcut(project, event))
+      return
+
+    switch (event.key) {
+      case 'Enter':
+        event.preventDefault()
+        void openProject(project)
+        break
+      case ' ':
+        event.preventDefault()
+        void openProject(project)
+        break
+      case 'ContextMenu':
+        event.preventDefault()
+        openProjectContextMenuFromKeyboard(event)
+        break
+      case 'F10':
+        if (!event.shiftKey)
+          return
+        event.preventDefault()
+        openProjectContextMenuFromKeyboard(event)
+        break
+      case 'ArrowUp':
+        event.preventDefault()
+        if (layoutMode.value === 'grid')
+          focusCardByDirection(project, 'up')
+        else
+          focusProjectByLinearOffset(project, -1)
+        break
+      case 'ArrowDown':
+        event.preventDefault()
+        if (layoutMode.value === 'grid')
+          focusCardByDirection(project, 'down')
+        else
+          focusProjectByLinearOffset(project, 1)
+        break
+      case 'ArrowLeft':
+        if (layoutMode.value !== 'grid')
+          return
+        event.preventDefault()
+        focusCardByDirection(project, 'left')
+        break
+      case 'ArrowRight':
+        if (layoutMode.value !== 'grid')
+          return
+        event.preventDefault()
+        focusCardByDirection(project, 'right')
+        break
+      case 'Home':
+        event.preventDefault()
+        focusProjectAtEdge('start')
+        break
+      case 'End':
+        event.preventDefault()
+        focusProjectAtEdge('end')
+        break
+    }
+  }
+
+  return {
+    actionButtonTabIndex,
+    handleProjectActionsKeydown,
+    handleProjectContainerKeydown,
+    isProjectActionDisabled,
+  }
+}
diff --git a/src/views/HomeView/composables/useProjectMenus.ts b/src/views/HomeView/composables/useProjectMenus.ts
index 3e6198c..c4fd7fe 100644
--- a/src/views/HomeView/composables/useProjectMenus.ts
+++ b/src/views/HomeView/composables/useProjectMenus.ts
@@ -2,13 +2,15 @@ import type { UiActionMenuItem } from '~/components/ui/actionMenu'
 import type { CodeEditorEnum } from '~/constants/codeEditor'
 import { editorCommandOptions, isVscodeHistoryScannerEditor } from '~/constants/codeEditor'
 import type { LocalProject } from '~/constants/localProject'
-import { ProjectKind } from '~/constants/localProject'
-
 import {
   DEFAULT_EDITOR_ACTION_PREFIX,
   DEFAULT_EDITOR_AUTO_ACTION,
   OPEN_WITH_ACTION_PREFIX,
-} from '../constants'
+} from '~/constants/projectActions'
+import {
+  isSourceProject,
+  projectSourceUrl,
+} from '~/utils/projectSource'
 
 /**
  * 项目菜单构建
@@ -68,14 +70,6 @@ export function useProjectMenus(deps: MenuDependencies) {
     return project.isTemporary && project.isExists !== false && !project.isRemote
   }
 
-  function isSourceProject(project: LocalProject) {
-    return project.kind === ProjectKind.FORK || project.kind === ProjectKind.CLONE
-  }
-
-  function projectSourceUrl(project: LocalProject) {
-    return isSourceProject(project) ? project.fromUrl?.trim() || '' : ''
-  }
-
   function projectMenuItems(project: LocalProject): UiActionMenuItem[] {
     const canDeleteFiles = canDeleteProjectFiles(project)
     const sourceUrl = projectSourceUrl(project)
diff --git a/src/views/HomeView/composables/useProjectRefs.ts b/src/views/HomeView/composables/useProjectRefs.ts
new file mode 100644
index 0000000..0ebf3df
--- /dev/null
+++ b/src/views/HomeView/composables/useProjectRefs.ts
@@ -0,0 +1,58 @@
+import type { LocalProject } from '~/constants/localProject'
+
+export function useProjectRefs() {
+  const projectItemRefs = new Map<number, HTMLElement>()
+  const projectActionRefs = new Map<number, HTMLElement>()
+
+  function setProjectItemRef(projectId: number, element: unknown) {
+    if (element instanceof HTMLElement) {
+      projectItemRefs.set(projectId, element)
+      return
+    }
+
+    projectItemRefs.delete(projectId)
+  }
+
+  function setProjectActionsRef(projectId: number, element: unknown) {
+    if (element instanceof HTMLElement) {
+      projectActionRefs.set(projectId, element)
+      return
+    }
+
+    projectActionRefs.delete(projectId)
+  }
+
+  function deleteProjectRefs(projectId: LocalProject['appendTime']) {
+    projectItemRefs.delete(projectId)
+    projectActionRefs.delete(projectId)
+  }
+
+  function clearProjectRefs() {
+    projectItemRefs.clear()
+    projectActionRefs.clear()
+  }
+
+  async function playProjectRemoveAnimation(projectId: number): Promise<void> {
+    const element = projectItemRefs.get(projectId)
+    if (!element)
+      return
+
+    element.style.pointerEvents = 'none'
+    element.style.transformOrigin = 'center'
+    element.style.transition = 'opacity 180ms ease-out, transform 180ms ease-out'
+    element.style.opacity = '0'
+    element.style.transform = 'scale(0.985)'
+
+    await new Promise(resolve => setTimeout(resolve, 180))
+  }
+
+  return {
+    projectItemRefs,
+    projectActionRefs,
+    setProjectItemRef,
+    setProjectActionsRef,
+    deleteProjectRefs,
+    clearProjectRefs,
+    playProjectRemoveAnimation,
+  }
+}
diff --git a/src/views/HomeView/constants.ts b/src/views/HomeView/constants.ts
index cc2d5ca..4c005aa 100644
--- a/src/views/HomeView/constants.ts
+++ b/src/views/HomeView/constants.ts
@@ -4,12 +4,3 @@
 
 export const MIN_SYNC_BUSY_MS = 280
 export const SCAN_RESULT_TOAST_THRESHOLD_MS = 700
-export const HOME_LAYOUT_STORAGE_KEY = 'codenest:home-layout'
-export const GITHUB_SOURCE_RE = /github\.com[/:]([^/:\s]+\/[^/\s#.]+)/
-
-export const PROJECT_ACTION_KEYS = ['open', 'explorer', 'terminal', 'copy', 'more'] as const
-
-// Menu action prefixes
-export const OPEN_WITH_ACTION_PREFIX = 'open-with:'
-export const DEFAULT_EDITOR_ACTION_PREFIX = 'default-editor:'
-export const DEFAULT_EDITOR_AUTO_ACTION = `${DEFAULT_EDITOR_ACTION_PREFIX}auto`
diff --git a/src/views/HomeView/types.ts b/src/views/HomeView/types.ts
index 9fccdb7..7854b29 100644
--- a/src/views/HomeView/types.ts
+++ b/src/views/HomeView/types.ts
@@ -8,4 +8,4 @@ export interface ScrollAreaRef {
 
 export type LayoutMode = 'list' | 'grid'
 
-export type ProjectActionKey = 'open' | 'explorer' | 'terminal' | 'copy' | 'more'
+export type { ProjectActionKey } from '~/constants/projectActions'
diff --git a/src/views/HomeView/utils/homeLayoutStorage.ts b/src/views/HomeView/utils/homeLayoutStorage.ts
new file mode 100644
index 0000000..31df86d
--- /dev/null
+++ b/src/views/HomeView/utils/homeLayoutStorage.ts
@@ -0,0 +1,22 @@
+import { HOME_LAYOUT_STORAGE_KEY } from '~/constants/storageKeys'
+
+import type { LayoutMode } from '../types'
+
+export function readStoredLayoutMode(): LayoutMode {
+  try {
+    const value = window.localStorage.getItem(HOME_LAYOUT_STORAGE_KEY)
+    return value === 'grid' || value === 'list' ? value : 'list'
+  }
+  catch {
+    return 'list'
+  }
+}
+
+export function persistLayoutMode(value: LayoutMode) {
+  try {
+    window.localStorage.setItem(HOME_LAYOUT_STORAGE_KEY, value)
+  }
+  catch {
+    // The layout toggle still works for the current session.
+  }
+}
diff --git a/src/views/HomeView/utils/projectFormatters.ts b/src/views/HomeView/utils/projectFormatters.ts
new file mode 100644
index 0000000..3a3c7b7
--- /dev/null
+++ b/src/views/HomeView/utils/projectFormatters.ts
@@ -0,0 +1,46 @@
+import type { CodeEditorEnum } from '~/constants/codeEditor'
+import { codeEditors } from '~/constants/codeEditor'
+import type { LocalProject } from '~/constants/localProject'
+import { ProjectKind } from '~/constants/localProject'
+
+export function kindClass(kind: ProjectKind) {
+  switch (kind) {
+    case ProjectKind.FORK:
+      return 'kind-fork'
+    case ProjectKind.CLONE:
+      return 'kind-clone'
+    case ProjectKind.MINE:
+    default:
+      return ''
+  }
+}
+
+export function editorIconClasses(editor?: CodeEditorEnum | null) {
+  if (!editor)
+    return []
+  const option = codeEditors[editor]
+  return ['ide-icon', option?.icon, { 'monochrome-editor-icon': option?.monochromeIcon }]
+}
+
+export function editorLabel(editor: CodeEditorEnum, t: (key: string) => string) {
+  return codeEditors[editor]?.label || t('app.common.no_editor')
+}
+
+export function formatTime(timestamp: number, locale: string) {
+  return new Intl.DateTimeFormat(locale, {
+    month: 'short',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  }).format(new Date(timestamp))
+}
+
+export function formatLastOpened(
+  project: LocalProject,
+  locale: string,
+  t: (key: string) => string,
+) {
+  return project.lastOpenedAt
+    ? formatTime(project.lastOpenedAt, locale)
+    : t('app.home.table.never_opened')
+}
diff --git a/src/views/HomeView/utils/projectSource.ts b/src/views/HomeView/utils/projectSource.ts
new file mode 100644
index 0000000..359dbb2
--- /dev/null
+++ b/src/views/HomeView/utils/projectSource.ts
@@ -0,0 +1,21 @@
+import type { LocalProject } from '~/constants/localProject'
+import { ProjectKind } from '~/constants/localProject'
+import {
+  projectSourceName,
+  projectSourceUrl,
+} from '~/utils/projectSource'
+
+export function projectSourcePrefix(project: LocalProject, t: (key: string) => string) {
+  return project.kind === ProjectKind.FORK
+    ? t('app.home.source.forked_from')
+    : t('app.home.source.cloned_from')
+}
+
+export function projectSourceTitle(project: LocalProject, t: (key: string) => string) {
+  const sourceName = projectSourceName(project)
+  const sourceUrl = projectSourceUrl(project)
+  const prefix = projectSourcePrefix(project, t)
+  if (sourceName && sourceUrl && sourceName !== sourceUrl)
+    return `${prefix} ${sourceName}\n${sourceUrl}`
+  return sourceName ? `${prefix} ${sourceName}` : sourceUrl
+}
diff --git a/src/views/ProjectEditorView/ProjectEditorView.vue b/src/views/ProjectEditorView/ProjectEditorView.vue
index 3e828aa..1c602d7 100644
--- a/src/views/ProjectEditorView/ProjectEditorView.vue
+++ b/src/views/ProjectEditorView/ProjectEditorView.vue
@@ -1,1250 +1,121 @@
 <script lang="ts" setup>
-import { useI18n } from 'vue-i18n'
-
-import UiCombobox from '~/components/ui/UiCombobox.vue'
 import UiScrollArea from '~/components/ui/UiScrollArea.vue'
-import UiSegmentedControl from '~/components/ui/UiSegmentedControl.vue'
-import UiSelect from '~/components/ui/UiSelect.vue'
-import UiSwitch from '~/components/ui/UiSwitch.vue'
-import { ViewEnum } from '~/constants/appEnums'
-import type { CodeEditorEnum, CodeEditorOption } from '~/constants/codeEditor'
-import { codeEditorOrder, codeEditors, isVscodeHistoryScannerEditor } from '~/constants/codeEditor'
-import { LicenseEnum } from '~/constants/license'
-import type { LocalProject } from '~/constants/localProject'
-import { ProjectKind } from '~/constants/localProject'
-import { LanguageAnalyzer } from '~/services/languageAnalyzer'
-import { detectLicenseBySnippet } from '~/services/licenseDetector'
-import { useEditorLangGroupsStore } from '~/stores/editorLangGroupsStore'
-import { useProjectScannerStore } from '~/stores/projectScannerStore'
-import { useProjectsStore } from '~/stores/projectsStore'
-import { useDelayedBusy } from '~/utils/useDelayedBusy'
 
-import {
-  initializeNewProjectState,
-  isUpdateProject,
-  localProjectItem,
-} from './ProjectEditorViewProvider'
+import ProjectEditorFormPanel from './components/ProjectEditorFormPanel.vue'
+import ProjectEditorHeader from './components/ProjectEditorHeader.vue'
+import ProjectEditorSummaryPanel from './components/ProjectEditorSummaryPanel.vue'
+import { useProjectEditor } from './composables/useProjectEditor'
+import { isUpdateProject } from './ProjectEditorViewProvider'
 
 defineOptions({
   name: 'ProjectEditor',
 })
 
-type FieldKey = 'path' | 'name' | 'mainLang' | 'defaultOpen' | 'remoteHost' | 'remotePath'
-
-const PATH_SPLIT_RE = /[\\/]+/
-const GITHUB_REPO_RE = /github\.com[/:]([^/:\s]+\/[^/\s#.]+)/
-
-const activatedView = inject('activatedView') as Ref<ViewEnum>
-const projectsStore = useProjectsStore()
-const projectScannerStore = useProjectScannerStore()
-const editorLangGroupsStore = useEditorLangGroupsStore()
-const initialProjectPath = localProjectItem.value.path || ''
-const { t } = useI18n()
-
-const isRemote = computed(() => !!localProjectItem.value.isRemote)
-
-const analyzing = ref(false)
-const detectingLicense = ref(false)
-const visibleAnalyzing = useDelayedBusy(analyzing, { delay: 220, minDuration: 320 })
-const lastAnalyzedPath = ref(initialProjectPath)
-const languageMixBodyRef = ref<HTMLElement | null>(null)
-const touchedFields = reactive<Record<FieldKey, boolean>>({
-  path: false,
-  name: false,
-  mainLang: false,
-  defaultOpen: false,
-  remoteHost: false,
-  remotePath: false,
-})
-
-let languageMixHeightTimer: ReturnType<typeof window.setTimeout> | null = null
-
-const editorRows = computed<Array<[CodeEditorEnum, CodeEditorOption]>>(() =>
-  codeEditorOrder.map(editor => [editor, codeEditors[editor]]),
-)
-
-function editorGroupLabel(option: CodeEditorOption) {
-  return t(option.groupKey)
-}
-
-const editorOptions = computed(() =>
-  editorRows.value
-    // 远程项目仅支持 VS Code 系（Remote-SSH）
-    .filter(([editor]) => !isRemote.value || isVscodeHistoryScannerEditor(editor))
-    .map(([editor, option]) => ({
-      value: editor,
-      label: `${editorGroupLabel(option)} / ${option.label}`,
-    })),
-)
-
-const modeOptions = computed(() => [
-  { value: 'local', label: t('app.project_editor.mode.local') },
-  { value: 'remote', label: t('app.project_editor.mode.remote') },
-])
-
-const projectMode = computed(() => (isRemote.value ? 'remote' : 'local'))
-
-const licenseOptions = computed(() =>
-  [
-    LicenseEnum.NONE,
-    ...Object.values(LicenseEnum).filter(value => value !== LicenseEnum.NONE),
-  ].map(value => ({
-    value,
-    label: shortLicense(value),
-  })),
-)
-
-const projectKindOptions = computed(() =>
-  [ProjectKind.MINE, ProjectKind.FORK, ProjectKind.CLONE].map(kind => ({
-    value: kind,
-    label: kindLabel(kind),
-  })),
-)
-
-const languageOptions = computed(() =>
-  (localProjectItem.value.langGroup || [])
-    .filter(language => language.text !== 'Other')
-    .map(language => language.text),
-)
-
-const repositoryFolderName = computed(() => {
-  const source = isRemote.value ? localProjectItem.value.remotePath : localProjectItem.value.path
-  return source
-    ? source.split(PATH_SPLIT_RE).filter(Boolean).at(-1) || ''
-    : ''
-})
-
-// 去重/展示用的有效路径:本地为 path,远程为合成串 host:remotePath
-const effectivePath = computed(() => {
-  if (!isRemote.value)
-    return localProjectItem.value.path || ''
-  const host = localProjectItem.value.remoteHost?.trim()
-  const remotePath = localProjectItem.value.remotePath?.trim()
-  return host && remotePath ? `${host}:${remotePath}` : ''
-})
-
-const duplicatePath = computed(() =>
-  !!effectivePath.value
-  && projectsStore.checkPathExistenceInProjects(
-    effectivePath.value,
-    isUpdateProject.value && initialProjectPath ? [initialProjectPath] : [],
-  ),
-)
-
-const sourceSuggestion = computed(() => {
-  const url = localProjectItem.value.fromUrl?.trim()
-  if (!url)
-    return ''
-  return url.match(GITHUB_REPO_RE)?.[1] || ''
-})
-
-const canSave = computed(() => {
-  if (isRemote.value) {
-    return !!localProjectItem.value.remoteHost
-      && !!localProjectItem.value.remotePath
-      && !!localProjectItem.value.name
-      && !!localProjectItem.value.defaultOpen
-  }
-  return !!localProjectItem.value.path
-    && !!localProjectItem.value.name
-    && !!localProjectItem.value.mainLang
-    && !!localProjectItem.value.defaultOpen
-})
-
-const folderStatus = computed(() =>
-  duplicatePath.value ? t('app.project_editor.fields.folder_duplicate') : '',
-)
-
-const mainLanguageStatus = computed(() =>
-  visibleAnalyzing.value ? t('app.project_editor.analyzing_desc') : '',
-)
-
-const summaryItems = computed(() => [
-  { label: t('app.project_editor.summary.kind'), value: kindLabel(localProjectItem.value.kind) },
-  { label: t('app.project_editor.summary.editor'), value: localProjectItem.value.defaultOpen ? codeEditors[localProjectItem.value.defaultOpen]?.label : t('app.common.not_set') },
-  { label: t('app.project_editor.summary.license'), value: shortLicense(localProjectItem.value.license as LicenseEnum) },
-])
-
-async function browseProjectPath() {
-  const selectedPaths = await window.api.openFolderDialog()
-  if (!selectedPaths[0])
-    return
-
-  localProjectItem.value.path = selectedPaths[0]
-  touchedFields.path = true
-  await refreshDetectedProjectMetadata()
-}
-
-function handlePathBlur() {
-  markTouched('path')
-  void refreshDetectedProjectMetadata()
-}
-
-function fillProjectName() {
-  if (repositoryFolderName.value) {
-    localProjectItem.value.name = repositoryFolderName.value
-    touchedFields.name = true
-  }
-}
-
-function fillSourceName() {
-  if (sourceSuggestion.value) {
-    localProjectItem.value.fromName = sourceSuggestion.value
-  }
-}
-
-function markTouched(field: FieldKey) {
-  touchedFields[field] = true
-}
-
-function hasDetectedMetadata() {
-  return !!localProjectItem.value.mainLang && !!localProjectItem.value.defaultOpen
-}
-
-function fillDefaultEditorFromLanguage(language: string | null | undefined) {
-  if (!language || localProjectItem.value.defaultOpen)
-    return
-
-  localProjectItem.value.defaultOpen = editorLangGroupsStore.getEditorByLanguage(language)
-}
-
-function resetDetectedProjectMetadata() {
-  localProjectItem.value.mainLang = null
-  localProjectItem.value.mainLangColor = null
-  localProjectItem.value.langGroup = []
-  localProjectItem.value.defaultOpen = null
-  localProjectItem.value.license = LicenseEnum.NONE
-}
-
-async function refreshDetectedProjectMetadata() {
-  const path = localProjectItem.value.path?.trim()
-  if (!path)
-    return
-  if (path === lastAnalyzedPath.value && hasDetectedMetadata())
-    return
-
-  if (!localProjectItem.value.name) {
-    localProjectItem.value.name = repositoryFolderName.value
-  }
-
-  resetDetectedProjectMetadata()
-  lastAnalyzedPath.value = path
-
-  await Promise.all([
-    analyzeProject(path),
-    detectLicense(path),
-  ])
-}
-
-async function analyzeProject(targetPath = localProjectItem.value.path) {
-  const path = targetPath
-  if (!path)
-    return
-
-  analyzing.value = true
-  try {
-    const analyzer = new LanguageAnalyzer(path)
-    const success = await analyzer.analyze()
-    if (!success)
-      return
-    if (localProjectItem.value.path !== path)
-      return
-
-    localProjectItem.value.mainLang = analyzer.mainLang
-    localProjectItem.value.mainLangColor = analyzer.mainLangColor
-    localProjectItem.value.langGroup = analyzer.langGroup
-    fillDefaultEditorFromLanguage(analyzer.mainLang)
-  }
-  finally {
-    analyzing.value = false
-  }
-}
-
-function runAnalyzeProject() {
-  void analyzeProject()
-}
-
-async function detectLicense(targetPath = localProjectItem.value.path) {
-  const path = targetPath
-  if (!path)
-    return
-
-  detectingLicense.value = true
-  try {
-    const res = await window.api.readProjectLicense(path)
-    if (!res?.success || !res.snippet)
-      return
-    if (localProjectItem.value.path !== path)
-      return
-
-    const { license, score } = detectLicenseBySnippet(res.snippet)
-    if (license && score > 0) {
-      localProjectItem.value.license = license
-    }
-  }
-  finally {
-    detectingLicense.value = false
-  }
-}
-
-function runDetectLicense() {
-  void detectLicense()
-}
-
-function updateLanguage(language: string | null) {
-  localProjectItem.value.mainLang = language
-  const languageItem = localProjectItem.value.langGroup?.find(item => item.text === language)
-  localProjectItem.value.mainLangColor = languageItem?.color || null
-  fillDefaultEditorFromLanguage(language)
-}
-
-async function hydrateLanguageMixFromCache() {
-  const path = localProjectItem.value.path
-  if (!path || localProjectItem.value.langGroup?.length)
-    return
-
-  await projectScannerStore.loadProjectScannerData()
-  const cached = projectScannerStore.getScanCacheEntry(path)
-  if (!cached?.langGroup?.length)
-    return
-  if (localProjectItem.value.path !== path)
-    return
-
-  localProjectItem.value.langGroup = cached.langGroup
-  localProjectItem.value.mainLang = localProjectItem.value.mainLang || cached.mainLang || cached.langGroup[0]?.text || null
-  localProjectItem.value.mainLangColor = localProjectItem.value.mainLangColor || cached.mainLangColor || cached.langGroup[0]?.color
-  fillDefaultEditorFromLanguage(localProjectItem.value.mainLang)
-}
-
-function validateFields() {
-  touchedFields.name = true
-  touchedFields.defaultOpen = true
-  if (isRemote.value) {
-    touchedFields.remoteHost = true
-    touchedFields.remotePath = true
-  }
-  else {
-    touchedFields.path = true
-    touchedFields.mainLang = true
-  }
-  return canSave.value && !duplicatePath.value
-}
-
-function toProject(): LocalProject {
-  const remote = isRemote.value
-  const remoteHost = localProjectItem.value.remoteHost?.trim() || undefined
-  const remotePath = localProjectItem.value.remotePath?.trim() || undefined
-  return {
-    appendTime: localProjectItem.value.appendTime || Date.now(),
-    lastOpenedAt: localProjectItem.value.lastOpenedAt ?? undefined,
-    path: remote ? effectivePath.value : localProjectItem.value.path!,
-    name: localProjectItem.value.name!,
-    group: localProjectItem.value.group || '',
-    kind: localProjectItem.value.kind,
-    fromUrl: localProjectItem.value.fromUrl || undefined,
-    fromName: localProjectItem.value.fromName || undefined,
-    mainLang: remote ? (localProjectItem.value.mainLang || '') : localProjectItem.value.mainLang!,
-    mainLangColor: localProjectItem.value.mainLangColor || undefined,
-    langGroup: localProjectItem.value.langGroup || [],
-    defaultOpen: localProjectItem.value.defaultOpen!,
-    license: localProjectItem.value.license !== LicenseEnum.NONE
-      ? localProjectItem.value.license as LicenseEnum
-      : undefined,
-    isTemporary: !!localProjectItem.value.isTemporary,
-    isPinned: !!localProjectItem.value.isPinned,
-    isExists: true,
-    isRemote: remote || undefined,
-    remoteHost: remote ? remoteHost : undefined,
-    remotePath: remote ? remotePath : undefined,
-  }
-}
-
-async function saveProject() {
-  if (!validateFields())
-    return
-
-  const project = toProject()
-  if (isUpdateProject.value) {
-    await projectsStore.updateProject(project.appendTime, project)
-  }
-  else {
-    await projectsStore.addProject(project, true)
-  }
-  closeEditor()
-}
-
-function closeEditor() {
-  initializeNewProjectState()
-  activatedView.value = ViewEnum.Home
-}
-
-function updateProjectKind(kind: string) {
-  localProjectItem.value.kind = kind as ProjectKind
-}
-
-function setProjectMode(mode: string) {
-  const remote = mode === 'remote'
-  if (remote === !!localProjectItem.value.isRemote)
-    return
-
-  localProjectItem.value.isRemote = remote
-  if (remote) {
-    // 切到远程:清空本地路径(连带触发元数据重置),并把不支持远程的编辑器清掉
-    localProjectItem.value.path = null
-    if (localProjectItem.value.defaultOpen && !isVscodeHistoryScannerEditor(localProjectItem.value.defaultOpen)) {
-      localProjectItem.value.defaultOpen = null
-    }
-  }
-  else {
-    localProjectItem.value.remoteHost = null
-    localProjectItem.value.remotePath = null
-  }
-}
-
-function kindLabel(kind: ProjectKind) {
-  switch (kind) {
-    case ProjectKind.FORK:
-      return t('app.project_kind.fork')
-    case ProjectKind.CLONE:
-      return t('app.project_kind.clone')
-    case ProjectKind.MINE:
-    default:
-      return t('app.project_kind.mine')
-  }
-}
-
-function languageLabel(language: string | null | undefined) {
-  if (!language)
-    return t('app.project_editor.no_language')
-  return language === 'Other' ? t('language_pop.other') : language
-}
-
-function shortLicense(license?: LicenseEnum | string | null) {
-  if (!license || license === LicenseEnum.NONE)
-    return t('app.license.none')
-  if (license === LicenseEnum.MIT)
-    return 'MIT'
-  if (license === LicenseEnum.APACHE_2_0)
-    return 'Apache-2.0'
-  if (license === LicenseEnum.GPLV3)
-    return 'GPL-3.0'
-  if (license === LicenseEnum.GPLV2)
-    return 'GPL-2.0'
-  if (license === LicenseEnum.OTHER)
-    return t('app.license.other')
-  return String(license).replace(' License', '').replace('GNU ', '')
-}
-
-function fieldInvalid(field: FieldKey) {
-  return touchedFields[field] && !localProjectItem.value[field]
-}
-
-watch(
-  () => localProjectItem.value.path,
-  (path, oldPath) => {
-    if (path === oldPath)
-      return
-    if (!path) {
-      lastAnalyzedPath.value = ''
-    }
-    resetDetectedProjectMetadata()
-  },
-  { flush: 'sync' },
-)
-
-watch(
-  () => localProjectItem.value.mainLang,
-  language => updateLanguage(language),
-)
-
-onMounted(() => {
-  void hydrateLanguageMixFromCache()
-})
-
-watch(
-  () => localProjectItem.value.langGroup?.length || 0,
-  async () => {
-    const body = languageMixBodyRef.value
-    if (!body)
-      return
-
-    const startHeight = body.offsetHeight
-    body.style.height = `${startHeight}px`
-    body.style.overflow = 'hidden'
-
-    await nextTick()
-
-    const targetHeight = body.scrollHeight
-    if (startHeight === targetHeight) {
-      resetLanguageMixBodyHeight()
-      return
-    }
-
-    if (languageMixHeightTimer !== null)
-      window.clearTimeout(languageMixHeightTimer)
-
-    requestAnimationFrame(() => {
-      body.style.height = `${targetHeight}px`
-    })
-
-    languageMixHeightTimer = window.setTimeout(() => {
-      resetLanguageMixBodyHeight()
-    }, 180)
-  },
-  { flush: 'pre' },
-)
-
-onBeforeUnmount(() => {
-  if (languageMixHeightTimer !== null)
-    window.clearTimeout(languageMixHeightTimer)
-})
-
-function resetLanguageMixBodyHeight() {
-  const body = languageMixBodyRef.value
-  if (!body)
-    return
-
-  body.style.height = ''
-  body.style.overflow = ''
-  languageMixHeightTimer = null
-}
+const {
+  analyzing,
+  browseProjectPath,
+  canSave,
+  closeEditor,
+  detectingLicense,
+  duplicatePath,
+  effectivePath,
+  editorOptions,
+  fieldInvalid,
+  fillProjectName,
+  fillSourceName,
+  folderStatus,
+  handlePathBlur,
+  isRemote,
+  languageOptions,
+  licenseOptions,
+  mainLanguageStatus,
+  markTouched,
+  modeOptions,
+  projectKindOptions,
+  projectMode,
+  projectsStore,
+  repositoryFolderName,
+  runAnalyzeProject,
+  runDetectLicense,
+  saveProject,
+  setProjectMode,
+  sourceSuggestion,
+  summaryItems,
+  updateProjectKind,
+  visibleAnalyzing,
+} = useProjectEditor()
 </script>
 
 <template>
-  <main class="editor-shell">
-    <header class="editor-topbar">
-      <button class="icon-button back-button" type="button" :title="t('app.common.back')" :aria-label="t('app.common.back')" @click="closeEditor">
-        <span class="i-lucide:chevron-left" />
-      </button>
-
-      <div class="title-block">
-        <h1>{{ isUpdateProject ? t('app.project_editor.title.edit') : t('app.project_editor.title.add') }}</h1>
-      </div>
-
-      <div class="topbar-actions">
-        <button class="ghost-button" type="button" @click="closeEditor">
-          {{ t('app.common.cancel') }}
-        </button>
-        <button class="primary-button" type="button" :disabled="!canSave || duplicatePath" @click="saveProject">
-          {{ isUpdateProject ? t('app.project_editor.save_changes') : t('app.project_editor.add_project') }}
-        </button>
-      </div>
-    </header>
-
-    <UiScrollArea class="editor-body-scroll" type="always">
-      <section class="editor-body">
-        <div class="form-panel">
-          <section class="form-section">
-            <header class="section-header">
-              <strong>{{ t('app.project_editor.sections.project') }}</strong>
-            </header>
-
-            <div v-if="!isUpdateProject" class="setting-row">
-              <div class="setting-copy">
-                <strong>{{ t('app.project_editor.fields.location') }}</strong>
-              </div>
-              <UiSegmentedControl
-                class="kind-control"
-                :model-value="projectMode"
-                :options="modeOptions"
-                :aria-label="t('app.project_editor.fields.location')"
-                @update:model-value="setProjectMode"
-              />
-            </div>
-
-            <div v-if="!isRemote" class="setting-row">
-              <label class="setting-copy" for="project-path">
-                <strong>{{ t('app.project_editor.fields.folder') }}</strong>
-              </label>
-              <div class="field-stack">
-                <div class="inline-field">
-                  <input
-                    id="project-path"
-                    v-model="localProjectItem.path"
-                    class="text-input"
-                    :class="{ invalid: fieldInvalid('path') || duplicatePath }"
-                    :aria-label="t('app.project_editor.fields.folder')"
-                    :title="localProjectItem.path || ''"
-                    spellcheck="false"
-                    @blur="handlePathBlur"
-                  >
-                  <button class="icon-button" type="button" :title="t('app.common.browse_folder')" :aria-label="t('app.common.browse_folder')" @click="browseProjectPath">
-                    <span class="i-lucide:folder-open" />
-                  </button>
-                </div>
-                <p
-                  class="field-message error"
-                  :class="{ empty: !folderStatus }"
-                  :aria-hidden="!folderStatus"
-                >
-                  {{ folderStatus }}
-                </p>
-              </div>
-            </div>
-
-            <template v-else>
-              <div class="setting-row">
-                <label class="setting-copy" for="project-remote-host">
-                  <strong>{{ t('app.project_editor.fields.remote_host') }}</strong>
-                  <span>{{ t('app.project_editor.fields.remote_host_desc') }}</span>
-                </label>
-                <div class="field-stack">
-                  <div class="inline-field">
-                    <input
-                      id="project-remote-host"
-                      v-model="localProjectItem.remoteHost"
-                      class="text-input"
-                      :class="{ invalid: fieldInvalid('remoteHost') || duplicatePath }"
-                      :aria-label="t('app.project_editor.fields.remote_host')"
-                      :placeholder="t('app.project_editor.fields.remote_host_placeholder')"
-                      :title="localProjectItem.remoteHost || ''"
-                      spellcheck="false"
-                      @blur="markTouched('remoteHost')"
-                    >
-                  </div>
-                  <p
-                    class="field-message error"
-                    :class="{ empty: !folderStatus }"
-                    :aria-hidden="!folderStatus"
-                  >
-                    {{ folderStatus }}
-                  </p>
-                </div>
-              </div>
-
-              <div class="setting-row">
-                <label class="setting-copy" for="project-remote-path">
-                  <strong>{{ t('app.project_editor.fields.remote_path') }}</strong>
-                </label>
-                <div class="inline-field">
-                  <input
-                    id="project-remote-path"
-                    v-model="localProjectItem.remotePath"
-                    class="text-input compact"
-                    :class="{ invalid: fieldInvalid('remotePath') }"
-                    :aria-label="t('app.project_editor.fields.remote_path')"
-                    :placeholder="t('app.project_editor.fields.remote_path_placeholder')"
-                    :title="localProjectItem.remotePath || ''"
-                    spellcheck="false"
-                    @blur="markTouched('remotePath')"
-                  >
-                </div>
-              </div>
-            </template>
-
-            <div class="setting-row">
-              <label class="setting-copy" for="project-name">
-                <strong>{{ t('app.project_editor.fields.name') }}</strong>
-              </label>
-              <div class="inline-field">
-                <input
-                  id="project-name"
-                  v-model="localProjectItem.name"
-                  class="text-input compact"
-                  :class="{ invalid: fieldInvalid('name') }"
-                  :aria-label="t('app.project_editor.fields.name')"
-                  :title="localProjectItem.name || ''"
-                  spellcheck="false"
-                  @blur="markTouched('name')"
-                >
-                <button
-                  v-if="repositoryFolderName && localProjectItem.name !== repositoryFolderName"
-                  class="ghost-button"
-                  type="button"
-                  @click="fillProjectName"
-                >
-                  {{ t('app.project_editor.use_folder') }}
-                </button>
-              </div>
-            </div>
-
-            <div class="setting-row">
-              <div class="setting-copy">
-                <strong>{{ t('app.project_editor.fields.type') }}</strong>
-              </div>
-              <UiSegmentedControl
-                class="kind-control"
-                :model-value="localProjectItem.kind"
-                :options="projectKindOptions"
-                :aria-label="t('app.project_editor.fields.type')"
-                @update:model-value="updateProjectKind"
-              />
-            </div>
-
-            <Transition name="source-details">
-              <div v-if="localProjectItem.kind !== ProjectKind.MINE" class="setting-row stacked source-details-row">
-                <div class="source-grid">
-                  <label>
-                    <span>{{ t('app.project_editor.fields.source_url') }}</span>
-                    <input
-                      v-model="localProjectItem.fromUrl"
-                      class="text-input"
-                      spellcheck="false"
-                      :aria-label="t('app.project_editor.fields.source_url')"
-                      :title="localProjectItem.fromUrl || ''"
-                    >
-                  </label>
-                  <label>
-                    <span>{{ t('app.project_editor.fields.source_name') }}</span>
-                    <div class="inline-field">
-                      <input
-                        v-model="localProjectItem.fromName"
-                        class="text-input"
-                        spellcheck="false"
-                        :aria-label="t('app.project_editor.fields.source_name')"
-                        :title="localProjectItem.fromName || ''"
-                      >
-                      <button
-                        v-if="sourceSuggestion && localProjectItem.fromName !== sourceSuggestion"
-                        class="ghost-button"
-                        type="button"
-                        @click="fillSourceName"
-                      >
-                        {{ t('app.project_editor.use_repo') }}
-                      </button>
-                    </div>
-                  </label>
-                </div>
-              </div>
-            </Transition>
-
-            <div class="setting-row">
-              <label class="setting-copy" for="project-group">
-                <strong>{{ t('app.project_editor.fields.group') }}</strong>
-                <span>{{ t('app.project_editor.fields.group_desc') }}</span>
-              </label>
-              <div class="inline-field">
-                <input
-                  id="project-group"
-                  v-model="localProjectItem.group"
-                  class="text-input compact"
-                  list="project-groups"
-                  spellcheck="false"
-                  :aria-label="t('app.project_editor.fields.group')"
-                  :placeholder="t('app.project_editor.no_group')"
-                  :title="localProjectItem.group || ''"
-                >
-                <datalist id="project-groups">
-                  <option v-for="group in projectsStore.allGroups" :key="group" :value="group" />
-                </datalist>
-              </div>
-            </div>
-
-            <div class="setting-row">
-              <div class="setting-copy">
-                <strong>{{ t('app.project_editor.fields.temporary') }}</strong>
-                <span>{{ t('app.project_editor.fields.temporary_desc') }}</span>
-              </div>
-              <UiSwitch
-                v-model="localProjectItem.isTemporary"
-                :aria-label="t('app.project_editor.fields.temporary')"
-              />
-            </div>
-          </section>
-
-          <section class="form-section">
-            <header class="section-header">
-              <strong>{{ t('app.project_editor.sections.metadata') }}</strong>
-            </header>
-
-            <div v-if="!isRemote" class="setting-row">
-              <label class="setting-copy" for="project-language">
-                <strong>{{ t('app.project_editor.fields.main_language') }}</strong>
-                <span>{{ t('app.project_editor.fields.main_language_desc') }}</span>
-              </label>
-              <div class="field-stack">
-                <div class="inline-field">
-                  <UiCombobox
-                    v-model="localProjectItem.mainLang"
-                    :options="languageOptions"
-                    :invalid="fieldInvalid('mainLang')"
-                    :placeholder="t('app.project_editor.fields.main_language')"
-                    :aria-label="t('app.project_editor.fields.main_language')"
-                    min-width="220px"
-                    content-width="240px"
-                    @blur="markTouched('mainLang')"
-                  />
-                  <button class="ghost-button" type="button" :disabled="!localProjectItem.path || analyzing" @click="runAnalyzeProject">
-                    {{ visibleAnalyzing ? t('app.project_editor.analyzing') : t('app.project_editor.analyze') }}
-                  </button>
-                </div>
-                <p
-                  class="field-message neutral"
-                  :class="{ empty: !mainLanguageStatus }"
-                  :aria-hidden="!mainLanguageStatus"
-                >
-                  {{ mainLanguageStatus }}
-                </p>
-              </div>
-            </div>
-
-            <div class="setting-row">
-              <label class="setting-copy" for="project-editor">
-                <strong>{{ t('app.project_editor.fields.open_with') }}</strong>
-              </label>
-              <UiSelect
-                v-model="localProjectItem.defaultOpen"
-                :placeholder="t('app.project_editor.select_editor')"
-                :options="editorOptions"
-                :aria-label="t('app.project_editor.fields.open_with')"
-                :class="{ invalid: fieldInvalid('defaultOpen') }"
-                min-width="220px"
-                content-width="260px"
-                @blur="markTouched('defaultOpen')"
-              />
-            </div>
-
-            <div v-if="!isRemote" class="setting-row">
-              <label class="setting-copy" for="project-license">
-                <strong>{{ t('app.project_editor.fields.license') }}</strong>
-              </label>
-              <div class="field-stack">
-                <div class="inline-field">
-                  <UiSelect
-                    v-model="localProjectItem.license"
-                    :options="licenseOptions"
-                    :placeholder="t('app.project_editor.fields.license')"
-                    :aria-label="t('app.project_editor.fields.license')"
-                    min-width="220px"
-                    content-width="240px"
-                  />
-                  <button
-                    class="ghost-button"
-                    type="button"
-                    :disabled="!localProjectItem.path || detectingLicense"
-                    @click="runDetectLicense"
-                  >
-                    {{ t('app.common.detect') }}
-                  </button>
-                </div>
-              </div>
-            </div>
-          </section>
-        </div>
-        <aside class="summary-panel">
-          <section class="summary-card">
-            <header class="summary-header">
-              <strong :title="localProjectItem.name || t('app.project_editor.unnamed')">{{ localProjectItem.name || t('app.project_editor.unnamed') }}</strong>
-              <span>{{ languageLabel(localProjectItem.mainLang) }}</span>
-            </header>
-
-            <div class="summary-path" :title="effectivePath || ''">
-              {{ effectivePath || t('app.project_editor.no_folder') }}
-            </div>
-
-            <div class="summary-list">
-              <div v-for="item in summaryItems" :key="item.label">
-                <span>{{ item.label }}</span>
-                <strong :title="item.value">{{ item.value }}</strong>
-              </div>
-            </div>
-          </section>
-
-          <section v-if="!isRemote" class="summary-card">
-            <header class="summary-header">
-              <div class="summary-title">
-                <strong>{{ t('app.project_editor.language_mix.title') }}</strong>
-                <span>{{ t('app.project_editor.language_mix.entries', { count: localProjectItem.langGroup?.length || 0 }) }}</span>
-              </div>
-              <button
-                class="icon-button language-refresh-button"
-                type="button"
-                :title="t('app.project_editor.language_mix.refresh')"
-                :aria-label="t('app.project_editor.language_mix.refresh')"
-                :disabled="!localProjectItem.path || analyzing"
-                @click="runAnalyzeProject"
-              >
-                <span class="i-lucide:refresh-cw" :class="{ spinning: visibleAnalyzing }" />
-              </button>
-            </header>
-
-            <div ref="languageMixBodyRef" class="language-mix-body">
-              <Transition name="language-mix">
-                <div v-if="!localProjectItem.langGroup?.length" key="empty" class="empty-inline">
-                  {{ t('app.project_editor.language_mix.empty') }}
-                </div>
-                <div v-else key="list" class="language-list">
-                  <div v-for="language in localProjectItem.langGroup" :key="language.text" class="language-row">
-                    <div class="language-label">
-                      <span class="color-dot" :style="{ background: language.color || '#b8b8b8' }" />
-                      <strong>{{ languageLabel(language.text) }}</strong>
-                      <span>{{ language.percentage }}%</span>
-                    </div>
-                    <div class="language-bar">
-                      <span :style="{ width: `${Math.min(language.percentage, 100)}%`, background: language.color || '#b8b8b8' }" />
-                    </div>
-                  </div>
-                </div>
-              </Transition>
-            </div>
-          </section>
-        </aside>
+  <main size-full overflow-hidden flex flex-col bg="$ui-page-background">
+    <ProjectEditorHeader
+      :is-update="isUpdateProject"
+      :can-save="canSave"
+      :duplicate-path="duplicatePath"
+      @close="closeEditor"
+      @save="saveProject"
+    />
+
+    <UiScrollArea min-h-0 flex-1 type="always">
+      <section
+        class="editor-body"
+        min-h-full px-14px pt-4px pb-14px
+        grid items-start gap-12px
+        grid-cols="[minmax(0,1fr)_300px]"
+      >
+        <ProjectEditorFormPanel
+          :analyzing="analyzing"
+          :browse-project-path="browseProjectPath"
+          :detecting-license="detectingLicense"
+          :duplicate-path="duplicatePath"
+          :editor-options="editorOptions"
+          :field-invalid="fieldInvalid"
+          :fill-project-name="fillProjectName"
+          :fill-source-name="fillSourceName"
+          :folder-status="folderStatus"
+          :group-options="projectsStore.allGroups"
+          :handle-path-blur="handlePathBlur"
+          :is-remote="isRemote"
+          :is-update="isUpdateProject"
+          :language-options="languageOptions"
+          :license-options="licenseOptions"
+          :main-language-status="mainLanguageStatus"
+          :mark-touched="markTouched"
+          :mode-options="modeOptions"
+          :project-kind-options="projectKindOptions"
+          :project-mode="projectMode"
+          :repository-folder-name="repositoryFolderName"
+          :run-analyze-project="runAnalyzeProject"
+          :run-detect-license="runDetectLicense"
+          :set-project-mode="setProjectMode"
+          :source-suggestion="sourceSuggestion"
+          :update-project-kind="updateProjectKind"
+          :visible-analyzing="visibleAnalyzing"
+        />
+
+        <ProjectEditorSummaryPanel
+          :analyzing="analyzing"
+          :effective-path="effectivePath"
+          :is-remote="isRemote"
+          :run-analyze-project="runAnalyzeProject"
+          :summary-items="summaryItems"
+          :visible-analyzing="visibleAnalyzing"
+        />
       </section>
     </UiScrollArea>
   </main>
 </template>
 
 <style lang="scss" scoped>
-.editor-shell {
-  @apply size-full overflow-hidden flex flex-col;
-  @apply bg-$ui-page-background;
-}
-
-.editor-topbar {
-  @apply shrink-0 px-14px py-10px grid items-center gap-10px;
-  grid-template-columns: auto minmax(0, 1fr) auto;
-}
-
-.title-block {
-  @apply min-w-0 flex items-center;
-
-  h1 {
-    @apply m-0 text-17px lh-21px font-650;
-  }
-}
-
-.topbar-actions,
-.inline-field {
-  @apply flex items-center gap-7px;
-}
-
-.field-stack {
-  @apply min-w-0 flex flex-col items-end gap-5px;
-}
-
-.editor-body-scroll {
-  @apply min-h-0 flex-1;
-}
-
-.editor-body {
-  @apply min-h-full px-14px pt-4px pb-14px grid items-start gap-12px;
-  grid-template-columns: minmax(0, 1fr) 300px;
-}
-
-.form-panel,
-.summary-panel {
-  @apply min-w-0;
-  @apply flex flex-col gap-12px;
-}
-
-.form-section,
-.summary-card {
-  @apply rounded-6px overflow-hidden;
-  @apply bg-$ui-surface-background;
-  box-shadow: var(--shadow-surface);
-}
-
-.section-header,
-.summary-header {
-  @apply min-h-42px px-14px py-8px border-b flex items-center justify-between gap-12px;
-  @apply light:border-$gray-13 dark:border-$gray-3;
-
-  strong {
-    @apply min-w-0 truncate text-13px font-650;
-  }
-
-  span {
-    @apply min-w-0 truncate text-12px light:color-$gray-6 dark:color-$gray-8;
-  }
-}
-
-.setting-row {
-  @apply min-h-52px px-14px py-8px border-b grid items-center gap-14px;
-  @apply light:border-$gray-13 dark:border-$gray-3;
-  grid-template-columns: minmax(0, 1fr) max-content;
-}
-
-.toggle-row {
-  @apply min-h-52px px-14px py-8px border-b flex items-center gap-14px;
-  @apply light:border-$gray-13 dark:border-$gray-3;
-}
-
-.setting-row.stacked {
-  @apply items-stretch;
-  grid-template-columns: minmax(0, 1fr);
-}
-
-.setting-copy,
-.checkbox-copy {
-  @apply min-w-0 flex flex-col gap-3px;
-
-  strong {
-    @apply text-13px font-620;
-    overflow-wrap: anywhere;
-  }
-
-  span {
-    @apply text-12px light:color-$gray-6 dark:color-$gray-8;
-    overflow-wrap: anywhere;
-  }
-}
-
-.toggle-row {
-  @apply justify-start;
-}
-
-.text-input {
-  @apply w-420px;
-}
-
-.text-input.compact {
-  @apply w-220px;
-}
-
-.source-grid {
-  @apply min-w-0 flex-1 grid gap-8px;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-
-  label {
-    @apply min-w-0 flex flex-col gap-5px text-12px color-$ui-foreground;
-
-    span {
-      overflow-wrap: anywhere;
-    }
-  }
-
-  .text-input {
-    @apply w-full;
-  }
-}
-
-.source-details-row {
-  @apply pl-34px;
-  min-height: 0;
-  overflow: hidden;
-}
-
-.source-details-enter-active,
-.source-details-leave-active {
-  max-height: 120px;
-  min-height: 0;
-  transition:
-    max-height 140ms cubic-bezier(0.16, 1, 0.3, 1),
-    opacity 120ms ease-out,
-    border-color 140ms ease-out,
-    padding-top 140ms cubic-bezier(0.16, 1, 0.3, 1),
-    padding-bottom 140ms cubic-bezier(0.16, 1, 0.3, 1),
-    transform 140ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-.source-details-enter-from,
-.source-details-leave-to {
-  max-height: 0;
-  min-height: 0;
-  opacity: 0;
-  border-color: transparent;
-  padding-top: 0;
-  padding-bottom: 0;
-  transform: translateY(-4px);
-}
-
-.back-button {
-  @apply light:bg-transparent dark:bg-transparent;
-
-  span {
-    @apply text-16px;
-  }
-}
-
-.back-button {
-  @apply light:bg-transparent dark:bg-transparent;
-  @apply hover:bg-$ui-hover-background;
-}
-
-.summary-title {
-  @apply min-w-0 flex flex-col gap-2px;
-}
-
-.language-refresh-button {
-  @apply size-24px shrink-0;
-  @apply light:color-$gray-1 dark:color-white;
-}
-
-.spinning {
-  animation: spin-refresh 0.8s linear infinite;
-}
-
-@keyframes spin-refresh {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.summary-path {
-  @apply px-14px py-9px truncate text-12px border-b;
-  @apply light:border-$gray-13 dark:border-$gray-3;
-  @apply light:color-$gray-6 dark:color-$gray-8;
-}
-
-.summary-list {
-  @apply px-14px py-8px flex flex-col gap-7px;
-
-  div {
-    @apply flex items-center justify-between gap-10px;
-  }
-
-  span {
-    @apply text-12px light:color-$gray-6 dark:color-$gray-8;
-  }
-
-  strong {
-    @apply min-w-0 truncate text-12px font-620;
-  }
-}
-
-.language-list {
-  @apply p-14px flex flex-col gap-9px;
-}
-
-.language-mix-body {
-  @apply relative;
-  transition: height 150ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-.language-mix-enter-active,
-.language-mix-leave-active {
-  transition:
-    opacity 140ms ease-out,
-    transform 140ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-.language-mix-leave-active {
-  @apply absolute left-0 right-0 top-0 pointer-events-none;
-}
-
-.language-mix-enter-from,
-.language-mix-leave-to {
-  opacity: 0;
-  transform: translateY(4px);
-}
-
-.language-row {
-  @apply flex flex-col gap-5px;
-}
-
-.language-label {
-  @apply min-w-0 flex items-center gap-6px;
-
-  strong {
-    @apply min-w-0 flex-1 truncate text-12px font-620;
-  }
-
-  span:last-child {
-    @apply text-11px light:color-$gray-6 dark:color-$gray-8;
-  }
-}
-
-.color-dot {
-  @apply size-8px rounded-full shrink-0;
-}
-
-.language-bar {
-  @apply h-4px rounded-full overflow-hidden;
-  background: color-mix(in srgb, var(--ui-hover-background), var(--ui-foreground) 8%);
-
-  span {
-    @apply block h-full rounded-full;
-  }
-}
-
-:global(.dark) .language-bar {
-  background: var(--ui-hover-background);
-}
-
-.empty-inline,
-.field-message {
-  @apply text-12px;
-}
-
-.empty-inline {
-  @apply px-14px py-10px light:color-$gray-6 dark:color-$gray-8;
-}
-
-.field-message {
-  @apply m-0 min-h-16px max-w-420px text-right lh-16px;
-  overflow-wrap: anywhere;
-
-  &.empty {
-    visibility: hidden;
-  }
-
-  &.neutral {
-    @apply color-$ui-muted-foreground;
-  }
-
-  &.info {
-    @apply color-$ui-muted-foreground;
-  }
-
-  &.success {
-    color: color-mix(in srgb, var(--green-5) 90%, var(--ui-foreground));
-  }
-
-  &.warning {
-    color: color-mix(in srgb, var(--yellow-4) 90%, var(--ui-foreground));
-  }
-
-  &.error {
-    color: color-mix(in srgb, var(--red-5) 92%, var(--ui-foreground));
-  }
-}
-
-:global(.dark) .field-message.success {
-  color: color-mix(in srgb, var(--green-7) 86%, var(--gray-14));
-}
-
-:global(.dark) .field-message.warning {
-  color: color-mix(in srgb, var(--yellow-7) 86%, var(--gray-14));
-}
-
-:global(.dark) .field-message.error {
-  color: color-mix(in srgb, var(--red-7) 86%, var(--gray-14));
-}
-
 @media (max-width: 960px) {
   .editor-body {
-    grid-template-columns: 1fr;
-  }
-
-  .summary-panel {
-    @apply hidden;
+    @apply grid-cols-[1fr];
   }
 }
 
 @media (max-width: 680px) {
-  .editor-topbar {
-    @apply px-10px py-8px;
-    grid-template-columns: auto minmax(0, 1fr);
-  }
-
-  .topbar-actions {
-    @apply col-span-2 justify-end;
-  }
-
   .editor-body {
     @apply px-10px pb-10px;
   }
-
-  .setting-row {
-    @apply gap-7px;
-    grid-template-columns: 1fr;
-  }
-
-  .setting-copy {
-    @apply w-auto;
-  }
-
-  .inline-field {
-    @apply flex-wrap;
-  }
-
-  .text-input,
-  .text-input.compact {
-    @apply flex-1 w-auto min-w-180px;
-  }
-
-  .source-grid {
-    grid-template-columns: 1fr;
-  }
 }
 </style>
diff --git a/src/views/ProjectEditorView/components/ProjectEditorFormPanel.vue b/src/views/ProjectEditorView/components/ProjectEditorFormPanel.vue
new file mode 100644
index 0000000..e4c7f7b
--- /dev/null
+++ b/src/views/ProjectEditorView/components/ProjectEditorFormPanel.vue
@@ -0,0 +1,445 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+
+import UiCombobox from '~/components/ui/UiCombobox.vue'
+import UiSegmentedControl from '~/components/ui/UiSegmentedControl.vue'
+import UiSelect from '~/components/ui/UiSelect.vue'
+import UiSwitch from '~/components/ui/UiSwitch.vue'
+import { ProjectKind } from '~/constants/localProject'
+
+import type { ProjectEditorFieldKey } from '../composables/useProjectEditor'
+import { localProjectItem } from '../ProjectEditorViewProvider'
+
+interface SelectOption {
+  value: string
+  label: string
+}
+
+defineProps<{
+  analyzing: boolean
+  browseProjectPath: () => void
+  detectingLicense: boolean
+  duplicatePath: boolean
+  editorOptions: SelectOption[]
+  fieldInvalid: (field: ProjectEditorFieldKey) => boolean
+  fillProjectName: () => void
+  fillSourceName: () => void
+  folderStatus: string
+  groupOptions: string[]
+  handlePathBlur: () => void
+  isRemote: boolean
+  isUpdate: boolean
+  languageOptions: string[]
+  licenseOptions: SelectOption[]
+  mainLanguageStatus: string
+  markTouched: (field: ProjectEditorFieldKey) => void
+  modeOptions: SelectOption[]
+  projectKindOptions: SelectOption[]
+  projectMode: string
+  repositoryFolderName: string
+  runAnalyzeProject: () => void
+  runDetectLicense: () => void
+  setProjectMode: (mode: string) => void
+  sourceSuggestion: string
+  updateProjectKind: (kind: string) => void
+  visibleAnalyzing: boolean
+}>()
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <div min-w-0 flex flex-col gap-12px>
+    <section rounded-6px overflow-hidden bg="$ui-surface-background" shadow="$shadow-surface">
+      <header
+        min-h-42px px-14px py-8px border-b
+        flex items-center justify-between gap-12px
+        light:border="$gray-13" dark:border="$gray-3"
+      >
+        <strong min-w-0 truncate text-13px font-650>{{ t('app.project_editor.sections.project') }}</strong>
+      </header>
+
+      <div v-if="!isUpdate" class="setting-row">
+        <div class="setting-copy">
+          <strong>{{ t('app.project_editor.fields.location') }}</strong>
+        </div>
+        <UiSegmentedControl
+          class="kind-control"
+          :model-value="projectMode"
+          :options="modeOptions"
+          :aria-label="t('app.project_editor.fields.location')"
+          @update:model-value="setProjectMode"
+        />
+      </div>
+
+      <div v-if="!isRemote" class="setting-row">
+        <label class="setting-copy" for="project-path">
+          <strong>{{ t('app.project_editor.fields.folder') }}</strong>
+        </label>
+        <div min-w-0 flex flex-col items-end gap-5px>
+          <div class="inline-field">
+            <input
+              id="project-path"
+              v-model="localProjectItem.path"
+              class="text-input"
+              w-420px
+              :class="{ invalid: fieldInvalid('path') || duplicatePath }"
+              :aria-label="t('app.project_editor.fields.folder')"
+              :title="localProjectItem.path || ''"
+              spellcheck="false"
+              @blur="handlePathBlur"
+            >
+            <button
+              class="icon-button"
+              type="button"
+              :title="t('app.common.browse_folder')"
+              :aria-label="t('app.common.browse_folder')"
+              @click="browseProjectPath"
+            >
+              <span class="i-lucide:folder-open" />
+            </button>
+          </div>
+          <p
+            class="field-message status-message error"
+            :class="{ empty: !folderStatus }"
+            :aria-hidden="!folderStatus"
+          >
+            {{ folderStatus }}
+          </p>
+        </div>
+      </div>
+
+      <template v-else>
+        <div class="setting-row">
+          <label class="setting-copy" for="project-remote-host">
+            <strong>{{ t('app.project_editor.fields.remote_host') }}</strong>
+            <span>{{ t('app.project_editor.fields.remote_host_desc') }}</span>
+          </label>
+          <div min-w-0 flex flex-col items-end gap-5px>
+            <div class="inline-field">
+              <input
+                id="project-remote-host"
+                v-model="localProjectItem.remoteHost"
+                class="text-input"
+                w-420px
+                :class="{ invalid: fieldInvalid('remoteHost') }"
+                :aria-label="t('app.project_editor.fields.remote_host')"
+                :placeholder="t('app.project_editor.fields.remote_host_placeholder')"
+                :title="localProjectItem.remoteHost || ''"
+                spellcheck="false"
+                @blur="markTouched('remoteHost')"
+              >
+            </div>
+          </div>
+        </div>
+
+        <div class="setting-row">
+          <label class="setting-copy" for="project-remote-path">
+            <strong>{{ t('app.project_editor.fields.remote_path') }}</strong>
+          </label>
+          <div min-w-0 flex flex-col items-end gap-5px>
+            <div class="inline-field">
+              <input
+                id="project-remote-path"
+                v-model="localProjectItem.remotePath"
+                class="text-input compact"
+                :class="{ invalid: fieldInvalid('remotePath') || duplicatePath }"
+                :aria-label="t('app.project_editor.fields.remote_path')"
+                :placeholder="t('app.project_editor.fields.remote_path_placeholder')"
+                :title="localProjectItem.remotePath || ''"
+                spellcheck="false"
+                @blur="markTouched('remotePath')"
+              >
+            </div>
+            <p
+              class="field-message status-message error"
+              :class="{ empty: !folderStatus }"
+              :aria-hidden="!folderStatus"
+            >
+              {{ folderStatus }}
+            </p>
+          </div>
+        </div>
+      </template>
+
+      <div class="setting-row">
+        <label class="setting-copy" for="project-name">
+          <strong>{{ t('app.project_editor.fields.name') }}</strong>
+        </label>
+        <div class="inline-field">
+          <input
+            id="project-name"
+            v-model="localProjectItem.name"
+            class="text-input compact"
+            :class="{ invalid: fieldInvalid('name') }"
+            :aria-label="t('app.project_editor.fields.name')"
+            :title="localProjectItem.name || ''"
+            spellcheck="false"
+            @blur="markTouched('name')"
+          >
+          <button
+            v-if="repositoryFolderName && localProjectItem.name !== repositoryFolderName"
+            class="ghost-button"
+            type="button"
+            @click="fillProjectName"
+          >
+            {{ t('app.project_editor.use_folder') }}
+          </button>
+        </div>
+      </div>
+
+      <div class="setting-row">
+        <div class="setting-copy">
+          <strong>{{ t('app.project_editor.fields.type') }}</strong>
+        </div>
+        <UiSegmentedControl
+          class="kind-control"
+          :model-value="localProjectItem.kind"
+          :options="projectKindOptions"
+          :aria-label="t('app.project_editor.fields.type')"
+          @update:model-value="updateProjectKind"
+        />
+      </div>
+
+      <Transition name="source-details">
+        <div v-if="localProjectItem.kind !== ProjectKind.MINE" class="setting-row stacked source-details-row">
+          <div
+            class="source-grid"
+            min-w-0 flex-1 grid gap-8px grid-cols="[repeat(2,minmax(0,1fr))]"
+          >
+            <label
+              min-w-0 flex flex-col gap-5px text-12px
+              color="$ui-foreground"
+            >
+              <span break-anywhere>{{ t('app.project_editor.fields.source_url') }}</span>
+              <input
+                v-model="localProjectItem.fromUrl"
+                class="text-input"
+                w-full
+                spellcheck="false"
+                :aria-label="t('app.project_editor.fields.source_url')"
+                :title="localProjectItem.fromUrl || ''"
+              >
+            </label>
+            <label
+              min-w-0 flex flex-col gap-5px text-12px
+              color="$ui-foreground"
+            >
+              <span break-anywhere>{{ t('app.project_editor.fields.source_name') }}</span>
+              <div class="inline-field">
+                <input
+                  v-model="localProjectItem.fromName"
+                  class="text-input"
+                  w-full
+                  spellcheck="false"
+                  :aria-label="t('app.project_editor.fields.source_name')"
+                  :title="localProjectItem.fromName || ''"
+                >
+                <button
+                  v-if="sourceSuggestion && localProjectItem.fromName !== sourceSuggestion"
+                  class="ghost-button"
+                  type="button"
+                  @click="fillSourceName"
+                >
+                  {{ t('app.project_editor.use_repo') }}
+                </button>
+              </div>
+            </label>
+          </div>
+        </div>
+      </Transition>
+
+      <div class="setting-row">
+        <label class="setting-copy" for="project-group">
+          <strong>{{ t('app.project_editor.fields.group') }}</strong>
+          <span>{{ t('app.project_editor.fields.group_desc') }}</span>
+        </label>
+        <div class="inline-field">
+          <input
+            id="project-group"
+            v-model="localProjectItem.group"
+            class="text-input compact"
+            list="project-groups"
+            spellcheck="false"
+            :aria-label="t('app.project_editor.fields.group')"
+            :placeholder="t('app.project_editor.no_group')"
+            :title="localProjectItem.group || ''"
+          >
+          <datalist id="project-groups">
+            <option v-for="group in groupOptions" :key="group" :value="group" />
+          </datalist>
+        </div>
+      </div>
+
+      <div class="setting-row">
+        <div class="setting-copy">
+          <strong>{{ t('app.project_editor.fields.temporary') }}</strong>
+          <span>{{ t('app.project_editor.fields.temporary_desc') }}</span>
+        </div>
+        <UiSwitch
+          v-model="localProjectItem.isTemporary"
+          :aria-label="t('app.project_editor.fields.temporary')"
+        />
+      </div>
+    </section>
+
+    <section rounded-6px overflow-hidden bg="$ui-surface-background" shadow="$shadow-surface">
+      <header
+        min-h-42px px-14px py-8px border-b
+        flex items-center justify-between gap-12px
+        light:border="$gray-13" dark:border="$gray-3"
+      >
+        <strong min-w-0 truncate text-13px font-650>{{ t('app.project_editor.sections.metadata') }}</strong>
+      </header>
+
+      <div v-if="!isRemote" class="setting-row">
+        <label class="setting-copy" for="project-language">
+          <strong>{{ t('app.project_editor.fields.main_language') }}</strong>
+          <span>{{ t('app.project_editor.fields.main_language_desc') }}</span>
+        </label>
+        <div min-w-0 flex flex-col items-end gap-5px>
+          <div class="inline-field">
+            <UiCombobox
+              v-model="localProjectItem.mainLang"
+              :options="languageOptions"
+              :invalid="fieldInvalid('mainLang')"
+              :placeholder="t('app.project_editor.fields.main_language')"
+              :aria-label="t('app.project_editor.fields.main_language')"
+              min-width="220px"
+              content-width="240px"
+              @blur="markTouched('mainLang')"
+            />
+            <button class="ghost-button" type="button" :disabled="!localProjectItem.path || analyzing" @click="runAnalyzeProject">
+              {{ visibleAnalyzing ? t('app.project_editor.analyzing') : t('app.project_editor.analyze') }}
+            </button>
+          </div>
+          <p
+            class="field-message status-message neutral"
+            :class="{ empty: !mainLanguageStatus }"
+            :aria-hidden="!mainLanguageStatus"
+          >
+            {{ mainLanguageStatus }}
+          </p>
+        </div>
+      </div>
+
+      <div class="setting-row">
+        <label class="setting-copy" for="project-editor">
+          <strong>{{ t('app.project_editor.fields.open_with') }}</strong>
+        </label>
+        <UiSelect
+          v-model="localProjectItem.defaultOpen"
+          :placeholder="t('app.project_editor.select_editor')"
+          :options="editorOptions"
+          :aria-label="t('app.project_editor.fields.open_with')"
+          :class="{ invalid: fieldInvalid('defaultOpen') }"
+          min-width="220px"
+          content-width="260px"
+          @blur="markTouched('defaultOpen')"
+        />
+      </div>
+
+      <div v-if="!isRemote" class="setting-row">
+        <label class="setting-copy" for="project-license">
+          <strong>{{ t('app.project_editor.fields.license') }}</strong>
+        </label>
+        <div min-w-0 flex flex-col items-end gap-5px>
+          <div class="inline-field">
+            <UiSelect
+              v-model="localProjectItem.license"
+              :options="licenseOptions"
+              :placeholder="t('app.project_editor.fields.license')"
+              :aria-label="t('app.project_editor.fields.license')"
+              min-width="220px"
+              content-width="240px"
+            />
+            <button
+              class="ghost-button"
+              type="button"
+              :disabled="!localProjectItem.path || detectingLicense"
+              @click="runDetectLicense"
+            >
+              {{ t('app.common.detect') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.setting-row {
+  @apply min-h-52px px-14px py-8px border-b grid items-center gap-14px;
+  @apply light:border-$gray-13 dark:border-$gray-3;
+  @apply grid-cols-[minmax(0,1fr)_max-content];
+}
+
+.setting-row.stacked {
+  @apply items-stretch grid-cols-[minmax(0,1fr)];
+}
+
+.setting-copy {
+  @apply min-w-0 flex flex-col gap-3px;
+
+  strong {
+    @apply text-13px font-620 break-anywhere;
+  }
+
+  span {
+    @apply text-12px light:color-$gray-6 dark:color-$gray-8 break-anywhere;
+  }
+}
+
+.inline-field {
+  @apply flex items-center gap-7px;
+}
+
+.source-details-row {
+  @apply min-h-0 overflow-hidden pl-34px;
+}
+
+.source-details-enter-active,
+.source-details-leave-active {
+  @apply max-h-120px min-h-0;
+  transition:
+    max-height 140ms cubic-bezier(0.16, 1, 0.3, 1),
+    opacity 120ms ease-out,
+    border-color 140ms ease-out,
+    padding-top 140ms cubic-bezier(0.16, 1, 0.3, 1),
+    padding-bottom 140ms cubic-bezier(0.16, 1, 0.3, 1),
+    transform 140ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.source-details-enter-from,
+.source-details-leave-to {
+  @apply max-h-0 min-h-0 opacity-0 border-transparent pt-0 pb-0 -translate-y-4px;
+}
+
+.field-message {
+  @apply m-0 min-h-16px max-w-420px text-right text-12px lh-16px break-anywhere;
+}
+
+@media (max-width: 680px) {
+  .setting-row {
+    @apply gap-7px grid-cols-[1fr];
+  }
+
+  .setting-copy {
+    @apply w-auto;
+  }
+
+  .inline-field {
+    @apply flex-wrap;
+  }
+
+  .text-input,
+  .text-input.compact {
+    @apply flex-1 w-auto min-w-180px;
+  }
+
+  .source-grid {
+    @apply grid-cols-[1fr];
+  }
+}
+</style>
diff --git a/src/views/ProjectEditorView/components/ProjectEditorHeader.vue b/src/views/ProjectEditorView/components/ProjectEditorHeader.vue
new file mode 100644
index 0000000..471e083
--- /dev/null
+++ b/src/views/ProjectEditorView/components/ProjectEditorHeader.vue
@@ -0,0 +1,63 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+
+defineProps<{
+  isUpdate: boolean
+  canSave: boolean
+  duplicatePath: boolean
+}>()
+
+const emit = defineEmits<{
+  close: []
+  save: []
+}>()
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <header
+    class="editor-topbar"
+    shrink-0 px-14px py-10px
+    grid items-center gap-10px
+    grid-cols="[auto_minmax(0,1fr)_auto]"
+  >
+    <button
+      class="icon-button"
+      light:bg-transparent dark:bg-transparent hover:bg="$ui-hover-background"
+      type="button"
+      :title="t('app.common.back')"
+      :aria-label="t('app.common.back')"
+      @click="emit('close')"
+    >
+      <span class="i-lucide:chevron-left" text-16px />
+    </button>
+
+    <div min-w-0 flex items-center>
+      <h1 m-0 text-17px lh-21px font-650>
+        {{ isUpdate ? t('app.project_editor.title.edit') : t('app.project_editor.title.add') }}
+      </h1>
+    </div>
+
+    <div class="topbar-actions" flex items-center gap-7px>
+      <button class="ghost-button" type="button" @click="emit('close')">
+        {{ t('app.common.cancel') }}
+      </button>
+      <button class="primary-button" type="button" :disabled="!canSave || duplicatePath" @click="emit('save')">
+        {{ isUpdate ? t('app.project_editor.save_changes') : t('app.project_editor.add_project') }}
+      </button>
+    </div>
+  </header>
+</template>
+
+<style lang="scss" scoped>
+@media (max-width: 680px) {
+  .editor-topbar {
+    @apply grid-cols-[auto_minmax(0,1fr)] px-10px py-8px;
+  }
+
+  .topbar-actions {
+    @apply col-span-2 justify-end;
+  }
+}
+</style>
diff --git a/src/views/ProjectEditorView/components/ProjectEditorSummaryPanel.vue b/src/views/ProjectEditorView/components/ProjectEditorSummaryPanel.vue
new file mode 100644
index 0000000..1848c27
--- /dev/null
+++ b/src/views/ProjectEditorView/components/ProjectEditorSummaryPanel.vue
@@ -0,0 +1,214 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+
+import { formatProjectLanguage } from '~/utils/projectFormatters'
+
+import { localProjectItem } from '../ProjectEditorViewProvider'
+
+interface SummaryItem {
+  label: string
+  value: string
+}
+
+defineProps<{
+  analyzing: boolean
+  effectivePath: string
+  isRemote: boolean
+  runAnalyzeProject: () => void
+  summaryItems: SummaryItem[]
+  visibleAnalyzing: boolean
+}>()
+
+const { t } = useI18n()
+const languageMixBodyRef = ref<HTMLElement | null>(null)
+let languageMixHeightTimer: ReturnType<typeof window.setTimeout> | null = null
+
+function displayLanguage(language: string | null | undefined) {
+  return formatProjectLanguage(language, t, 'app.project_editor.no_language')
+}
+
+watch(
+  () => localProjectItem.value.langGroup?.length || 0,
+  async () => {
+    const body = languageMixBodyRef.value
+    if (!body)
+      return
+
+    const startHeight = body.offsetHeight
+    body.style.height = `${startHeight}px`
+    body.style.overflow = 'hidden'
+
+    await nextTick()
+
+    const targetHeight = body.scrollHeight
+    if (startHeight === targetHeight) {
+      resetLanguageMixBodyHeight()
+      return
+    }
+
+    if (languageMixHeightTimer !== null)
+      window.clearTimeout(languageMixHeightTimer)
+
+    requestAnimationFrame(() => {
+      body.style.height = `${targetHeight}px`
+    })
+
+    languageMixHeightTimer = window.setTimeout(() => {
+      resetLanguageMixBodyHeight()
+    }, 180)
+  },
+  { flush: 'pre' },
+)
+
+onBeforeUnmount(() => {
+  if (languageMixHeightTimer !== null)
+    window.clearTimeout(languageMixHeightTimer)
+})
+
+function resetLanguageMixBodyHeight() {
+  const body = languageMixBodyRef.value
+  if (!body)
+    return
+
+  body.style.height = ''
+  body.style.overflow = ''
+  languageMixHeightTimer = null
+}
+</script>
+
+<template>
+  <aside class="summary-panel" min-w-0 flex flex-col gap-12px>
+    <section rounded-6px overflow-hidden bg="$ui-surface-background" shadow="$shadow-surface">
+      <header
+        min-h-42px px-14px py-8px border-b
+        flex items-center justify-between gap-12px
+        light:border="$gray-13" dark:border="$gray-3"
+      >
+        <strong
+          min-w-0 truncate text-13px font-650
+          :title="localProjectItem.name || t('app.project_editor.unnamed')"
+        >
+          {{ localProjectItem.name || t('app.project_editor.unnamed') }}
+        </strong>
+        <span min-w-0 truncate text-12px light:color="$gray-6" dark:color="$gray-8">
+          {{ displayLanguage(localProjectItem.mainLang) }}
+        </span>
+      </header>
+
+      <div
+        px-14px py-9px truncate text-12px border-b
+        light:border="$gray-13" dark:border="$gray-3"
+        light:color="$gray-6" dark:color="$gray-8"
+        :title="effectivePath || ''"
+      >
+        {{ effectivePath || t('app.project_editor.no_folder') }}
+      </div>
+
+      <div px-14px py-8px flex flex-col gap-7px>
+        <div
+          v-for="item in summaryItems" :key="item.label" flex items-center justify-between
+          gap-10px
+        >
+          <span text-12px light:color="$gray-6" dark:color="$gray-8">{{ item.label }}</span>
+          <strong min-w-0 truncate text-12px font-620 :title="item.value">{{ item.value }}</strong>
+        </div>
+      </div>
+    </section>
+
+    <section v-if="!isRemote" rounded-6px overflow-hidden bg="$ui-surface-background" shadow="$shadow-surface">
+      <header
+        min-h-42px px-14px py-8px border-b
+        flex items-center justify-between gap-12px
+        light:border="$gray-13" dark:border="$gray-3"
+      >
+        <div min-w-0 flex flex-col gap-2px>
+          <strong min-w-0 truncate text-13px font-650>{{ t('app.project_editor.language_mix.title') }}</strong>
+          <span min-w-0 truncate text-12px light:color="$gray-6" dark:color="$gray-8">
+            {{ t('app.project_editor.language_mix.entries', { count: localProjectItem.langGroup?.length || 0 }) }}
+          </span>
+        </div>
+        <button
+          class="icon-button"
+          size-24px shrink-0
+          light:color="$gray-1" dark:color-white
+          type="button"
+          :title="t('app.project_editor.language_mix.refresh')"
+          :aria-label="t('app.project_editor.language_mix.refresh')"
+          :disabled="!localProjectItem.path || analyzing"
+          @click="runAnalyzeProject"
+        >
+          <span class="i-lucide:refresh-cw" :class="{ 'animate-spin': visibleAnalyzing }" />
+        </button>
+      </header>
+
+      <div ref="languageMixBodyRef" class="language-mix-body">
+        <Transition name="language-mix">
+          <div
+            v-if="!localProjectItem.langGroup?.length"
+            key="empty"
+            px-14px py-10px text-12px
+            light:color="$gray-6" dark:color="$gray-8"
+          >
+            {{ t('app.project_editor.language_mix.empty') }}
+          </div>
+          <div
+            v-else key="list" p-14px flex flex-col
+            gap-9px
+          >
+            <div v-for="language in localProjectItem.langGroup" :key="language.text" flex flex-col gap-5px>
+              <div min-w-0 flex items-center gap-6px>
+                <span size-8px rounded-full shrink-0 :style="{ background: language.color || '#b8b8b8' }" />
+                <strong min-w-0 flex-1 truncate text-12px font-620>{{ displayLanguage(language.text) }}</strong>
+                <span text-11px light:color="$gray-6" dark:color="$gray-8">{{ language.percentage }}%</span>
+              </div>
+              <div class="language-bar">
+                <span :style="{ width: `${Math.min(language.percentage, 100)}%`, background: language.color || '#b8b8b8' }" />
+              </div>
+            </div>
+          </div>
+        </Transition>
+      </div>
+    </section>
+  </aside>
+</template>
+
+<style lang="scss" scoped>
+.language-mix-body {
+  @apply relative transition-height duration-150 ease-out;
+}
+
+.language-mix-enter-active,
+.language-mix-leave-active {
+  transition:
+    opacity 140ms ease-out,
+    transform 140ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.language-mix-leave-active {
+  @apply absolute left-0 right-0 top-0 pointer-events-none;
+}
+
+.language-mix-enter-from,
+.language-mix-leave-to {
+  @apply opacity-0 translate-y-4px;
+}
+
+.language-bar {
+  @apply h-4px rounded-full overflow-hidden;
+  @apply [background:color-mix(in_srgb,var(--ui-hover-background),var(--ui-foreground)_8%)];
+
+  span {
+    @apply block h-full rounded-full;
+  }
+}
+
+:global(.dark) .language-bar {
+  @apply bg-$ui-hover-background;
+}
+
+@media (max-width: 960px) {
+  .summary-panel {
+    @apply hidden;
+  }
+}
+</style>
diff --git a/src/views/ProjectEditorView/composables/useProjectEditor.ts b/src/views/ProjectEditorView/composables/useProjectEditor.ts
new file mode 100644
index 0000000..2296ce1
--- /dev/null
+++ b/src/views/ProjectEditorView/composables/useProjectEditor.ts
@@ -0,0 +1,441 @@
+import { useI18n } from 'vue-i18n'
+
+import { ViewEnum } from '~/constants/appEnums'
+import type { CodeEditorEnum, CodeEditorOption } from '~/constants/codeEditor'
+import { codeEditorOrder, codeEditors, isVscodeHistoryScannerEditor } from '~/constants/codeEditor'
+import { LicenseEnum } from '~/constants/license'
+import type { LocalProject } from '~/constants/localProject'
+import { ProjectKind } from '~/constants/localProject'
+import { LanguageAnalyzer } from '~/services/languageAnalyzer'
+import { detectLicenseBySnippet } from '~/services/licenseDetector'
+import { useEditorLangGroupsStore } from '~/stores/editorLangGroupsStore'
+import { useProjectScannerStore } from '~/stores/projectScannerStore'
+import { useProjectsStore } from '~/stores/projectsStore'
+import { kindLabel, shortLicense } from '~/utils/projectFormatters'
+import { extractGithubRepositoryName } from '~/utils/projectSource'
+import { useDelayedBusy } from '~/utils/useDelayedBusy'
+
+import {
+  initializeNewProjectState,
+  isUpdateProject,
+  localProjectItem,
+} from '../ProjectEditorViewProvider'
+
+export type ProjectEditorFieldKey = 'path' | 'name' | 'mainLang' | 'defaultOpen' | 'remoteHost' | 'remotePath'
+
+const PATH_SPLIT_RE = /[\\/]+/
+
+export function useProjectEditor() {
+  const activatedView = inject('activatedView') as Ref<ViewEnum>
+  const projectsStore = useProjectsStore()
+  const projectScannerStore = useProjectScannerStore()
+  const editorLangGroupsStore = useEditorLangGroupsStore()
+  const initialProjectPath = localProjectItem.value.path || ''
+  const { t } = useI18n()
+
+  const isRemote = computed(() => !!localProjectItem.value.isRemote)
+  const analyzing = ref(false)
+  const detectingLicense = ref(false)
+  const visibleAnalyzing = useDelayedBusy(analyzing, { delay: 220, minDuration: 320 })
+  const lastAnalyzedPath = ref(initialProjectPath)
+  const touchedFields = reactive<Record<ProjectEditorFieldKey, boolean>>({
+    path: false,
+    name: false,
+    mainLang: false,
+    defaultOpen: false,
+    remoteHost: false,
+    remotePath: false,
+  })
+
+  const editorRows = computed<Array<[CodeEditorEnum, CodeEditorOption]>>(() =>
+    codeEditorOrder.map(editor => [editor, codeEditors[editor]]),
+  )
+
+  function editorGroupLabel(option: CodeEditorOption) {
+    return t(option.groupKey)
+  }
+
+  const editorOptions = computed(() =>
+    editorRows.value
+      .filter(([editor]) => !isRemote.value || isVscodeHistoryScannerEditor(editor))
+      .map(([editor, option]) => ({
+        value: editor,
+        label: `${editorGroupLabel(option)} / ${option.label}`,
+      })),
+  )
+
+  const modeOptions = computed(() => [
+    { value: 'local', label: t('app.project_editor.mode.local') },
+    { value: 'remote', label: t('app.project_editor.mode.remote') },
+  ])
+
+  const projectMode = computed(() => (isRemote.value ? 'remote' : 'local'))
+
+  const licenseOptions = computed(() =>
+    [
+      LicenseEnum.NONE,
+      ...Object.values(LicenseEnum).filter(value => value !== LicenseEnum.NONE),
+    ].map(value => ({
+      value,
+      label: shortLicense(value, t),
+    })),
+  )
+
+  const projectKindOptions = computed(() =>
+    [ProjectKind.MINE, ProjectKind.FORK, ProjectKind.CLONE].map(kind => ({
+      value: kind,
+      label: kindLabel(kind, t),
+    })),
+  )
+
+  const languageOptions = computed(() =>
+    (localProjectItem.value.langGroup || [])
+      .filter(language => language.text !== 'Other')
+      .map(language => language.text),
+  )
+
+  const repositoryFolderName = computed(() => {
+    const source = isRemote.value ? localProjectItem.value.remotePath : localProjectItem.value.path
+    return source
+      ? source.split(PATH_SPLIT_RE).filter(Boolean).at(-1) || ''
+      : ''
+  })
+
+  const effectivePath = computed(() => {
+    if (!isRemote.value)
+      return localProjectItem.value.path || ''
+    const host = localProjectItem.value.remoteHost?.trim()
+    const remotePath = localProjectItem.value.remotePath?.trim()
+    return host && remotePath ? `${host}:${remotePath}` : ''
+  })
+
+  const duplicatePath = computed(() =>
+    !!effectivePath.value
+    && projectsStore.checkPathExistenceInProjects(
+      effectivePath.value,
+      isUpdateProject.value && initialProjectPath ? [initialProjectPath] : [],
+    ),
+  )
+
+  const sourceSuggestion = computed(() => {
+    const url = localProjectItem.value.fromUrl?.trim()
+    if (!url)
+      return ''
+    return extractGithubRepositoryName(url)
+  })
+
+  const canSave = computed(() => {
+    if (isRemote.value) {
+      return !!localProjectItem.value.remoteHost
+        && !!localProjectItem.value.remotePath
+        && !!localProjectItem.value.name
+        && !!localProjectItem.value.defaultOpen
+    }
+    return !!localProjectItem.value.path
+      && !!localProjectItem.value.name
+      && !!localProjectItem.value.mainLang
+      && !!localProjectItem.value.defaultOpen
+  })
+
+  const folderStatus = computed(() =>
+    duplicatePath.value ? t('app.project_editor.fields.folder_duplicate') : '',
+  )
+
+  const mainLanguageStatus = computed(() =>
+    visibleAnalyzing.value ? t('app.project_editor.analyzing_desc') : '',
+  )
+
+  const summaryItems = computed(() => [
+    { label: t('app.project_editor.summary.kind'), value: kindLabel(localProjectItem.value.kind, t) },
+    { label: t('app.project_editor.summary.editor'), value: localProjectItem.value.defaultOpen ? codeEditors[localProjectItem.value.defaultOpen]?.label : t('app.common.not_set') },
+    { label: t('app.project_editor.summary.license'), value: shortLicense(localProjectItem.value.license as LicenseEnum, t) },
+  ])
+
+  async function browseProjectPath() {
+    const selectedPaths = await window.api.openFolderDialog()
+    if (!selectedPaths[0])
+      return
+
+    localProjectItem.value.path = selectedPaths[0]
+    touchedFields.path = true
+    await refreshDetectedProjectMetadata()
+  }
+
+  function handlePathBlur() {
+    markTouched('path')
+    void refreshDetectedProjectMetadata()
+  }
+
+  function fillProjectName() {
+    if (repositoryFolderName.value) {
+      localProjectItem.value.name = repositoryFolderName.value
+      touchedFields.name = true
+    }
+  }
+
+  function fillSourceName() {
+    if (sourceSuggestion.value)
+      localProjectItem.value.fromName = sourceSuggestion.value
+  }
+
+  function markTouched(field: ProjectEditorFieldKey) {
+    touchedFields[field] = true
+  }
+
+  function hasDetectedMetadata() {
+    return !!localProjectItem.value.mainLang && !!localProjectItem.value.defaultOpen
+  }
+
+  function fillDefaultEditorFromLanguage(language: string | null | undefined) {
+    if (!language || localProjectItem.value.defaultOpen)
+      return
+
+    localProjectItem.value.defaultOpen = editorLangGroupsStore.getEditorByLanguage(language)
+  }
+
+  function resetDetectedProjectMetadata() {
+    localProjectItem.value.mainLang = null
+    localProjectItem.value.mainLangColor = null
+    localProjectItem.value.langGroup = []
+    localProjectItem.value.defaultOpen = null
+    localProjectItem.value.license = LicenseEnum.NONE
+  }
+
+  async function refreshDetectedProjectMetadata() {
+    const path = localProjectItem.value.path?.trim()
+    if (!path)
+      return
+    if (path === lastAnalyzedPath.value && hasDetectedMetadata())
+      return
+
+    if (!localProjectItem.value.name)
+      localProjectItem.value.name = repositoryFolderName.value
+
+    resetDetectedProjectMetadata()
+    lastAnalyzedPath.value = path
+
+    await Promise.all([
+      analyzeProject(path),
+      detectLicense(path),
+    ])
+  }
+
+  async function analyzeProject(targetPath = localProjectItem.value.path) {
+    const path = targetPath
+    if (!path)
+      return
+
+    analyzing.value = true
+    try {
+      const analyzer = new LanguageAnalyzer(path)
+      const success = await analyzer.analyze()
+      if (!success)
+        return
+      if (localProjectItem.value.path !== path)
+        return
+
+      localProjectItem.value.mainLang = analyzer.mainLang
+      localProjectItem.value.mainLangColor = analyzer.mainLangColor
+      localProjectItem.value.langGroup = analyzer.langGroup
+      fillDefaultEditorFromLanguage(analyzer.mainLang)
+    }
+    finally {
+      analyzing.value = false
+    }
+  }
+
+  function runAnalyzeProject() {
+    void analyzeProject()
+  }
+
+  async function detectLicense(targetPath = localProjectItem.value.path) {
+    const path = targetPath
+    if (!path)
+      return
+
+    detectingLicense.value = true
+    try {
+      const res = await window.api.readProjectLicense(path)
+      if (!res?.success || !res.snippet)
+        return
+      if (localProjectItem.value.path !== path)
+        return
+
+      const { license, score } = detectLicenseBySnippet(res.snippet)
+      if (license && score > 0)
+        localProjectItem.value.license = license
+    }
+    finally {
+      detectingLicense.value = false
+    }
+  }
+
+  function runDetectLicense() {
+    void detectLicense()
+  }
+
+  function updateLanguage(language: string | null) {
+    localProjectItem.value.mainLang = language
+    const languageItem = localProjectItem.value.langGroup?.find(item => item.text === language)
+    localProjectItem.value.mainLangColor = languageItem?.color || null
+    fillDefaultEditorFromLanguage(language)
+  }
+
+  async function hydrateLanguageMixFromCache() {
+    const path = localProjectItem.value.path
+    if (!path || localProjectItem.value.langGroup?.length)
+      return
+
+    await projectScannerStore.loadProjectScannerData()
+    const cached = projectScannerStore.getScanCacheEntry(path)
+    if (!cached?.langGroup?.length)
+      return
+    if (localProjectItem.value.path !== path)
+      return
+
+    localProjectItem.value.langGroup = cached.langGroup
+    localProjectItem.value.mainLang = localProjectItem.value.mainLang || cached.mainLang || cached.langGroup[0]?.text || null
+    localProjectItem.value.mainLangColor = localProjectItem.value.mainLangColor || cached.mainLangColor || cached.langGroup[0]?.color
+    fillDefaultEditorFromLanguage(localProjectItem.value.mainLang)
+  }
+
+  function validateFields() {
+    touchedFields.name = true
+    touchedFields.defaultOpen = true
+    if (isRemote.value) {
+      touchedFields.remoteHost = true
+      touchedFields.remotePath = true
+    }
+    else {
+      touchedFields.path = true
+      touchedFields.mainLang = true
+    }
+    return canSave.value && !duplicatePath.value
+  }
+
+  function toProject(): LocalProject {
+    const remote = isRemote.value
+    const remoteHost = localProjectItem.value.remoteHost?.trim() || undefined
+    const remotePath = localProjectItem.value.remotePath?.trim() || undefined
+    return {
+      appendTime: localProjectItem.value.appendTime || Date.now(),
+      lastOpenedAt: localProjectItem.value.lastOpenedAt ?? undefined,
+      path: remote ? effectivePath.value : localProjectItem.value.path!,
+      name: localProjectItem.value.name!,
+      group: localProjectItem.value.group || '',
+      kind: localProjectItem.value.kind,
+      fromUrl: localProjectItem.value.fromUrl || undefined,
+      fromName: localProjectItem.value.fromName || undefined,
+      mainLang: remote ? (localProjectItem.value.mainLang || '') : localProjectItem.value.mainLang!,
+      mainLangColor: localProjectItem.value.mainLangColor || undefined,
+      langGroup: localProjectItem.value.langGroup || [],
+      defaultOpen: localProjectItem.value.defaultOpen!,
+      license: localProjectItem.value.license !== LicenseEnum.NONE
+        ? localProjectItem.value.license as LicenseEnum
+        : undefined,
+      isTemporary: !!localProjectItem.value.isTemporary,
+      isPinned: !!localProjectItem.value.isPinned,
+      isExists: true,
+      isRemote: remote || undefined,
+      remoteHost: remote ? remoteHost : undefined,
+      remotePath: remote ? remotePath : undefined,
+    }
+  }
+
+  async function saveProject() {
+    if (!validateFields())
+      return
+
+    const project = toProject()
+    if (isUpdateProject.value)
+      await projectsStore.updateProject(project.appendTime, project)
+    else
+      await projectsStore.addProject(project, true)
+    closeEditor()
+  }
+
+  function closeEditor() {
+    initializeNewProjectState()
+    activatedView.value = ViewEnum.Home
+  }
+
+  function updateProjectKind(kind: string) {
+    localProjectItem.value.kind = kind as ProjectKind
+  }
+
+  function setProjectMode(mode: string) {
+    const remote = mode === 'remote'
+    if (remote === !!localProjectItem.value.isRemote)
+      return
+
+    localProjectItem.value.isRemote = remote
+    if (remote) {
+      localProjectItem.value.path = null
+      if (localProjectItem.value.defaultOpen && !isVscodeHistoryScannerEditor(localProjectItem.value.defaultOpen))
+        localProjectItem.value.defaultOpen = null
+    }
+    else {
+      localProjectItem.value.remoteHost = null
+      localProjectItem.value.remotePath = null
+    }
+  }
+
+  function fieldInvalid(field: ProjectEditorFieldKey) {
+    return touchedFields[field] && !localProjectItem.value[field]
+  }
+
+  watch(
+    () => localProjectItem.value.path,
+    (path, oldPath) => {
+      if (path === oldPath)
+        return
+      if (!path)
+        lastAnalyzedPath.value = ''
+      resetDetectedProjectMetadata()
+    },
+    { flush: 'sync' },
+  )
+
+  watch(
+    () => localProjectItem.value.mainLang,
+    language => updateLanguage(language),
+  )
+
+  onMounted(() => {
+    void hydrateLanguageMixFromCache()
+  })
+
+  return {
+    analyzing,
+    browseProjectPath,
+    canSave,
+    closeEditor,
+    detectingLicense,
+    duplicatePath,
+    effectivePath,
+    editorOptions,
+    fieldInvalid,
+    fillProjectName,
+    fillSourceName,
+    folderStatus,
+    handlePathBlur,
+    isRemote,
+    languageOptions,
+    licenseOptions,
+    mainLanguageStatus,
+    markTouched,
+    modeOptions,
+    projectKindOptions,
+    projectMode,
+    projectsStore,
+    repositoryFolderName,
+    runAnalyzeProject,
+    runDetectLicense,
+    saveProject,
+    setProjectMode,
+    sourceSuggestion,
+    summaryItems,
+    updateProjectKind,
+    visibleAnalyzing,
+  }
+}
diff --git a/src/views/SettingsView/SettingsView.vue b/src/views/SettingsView/SettingsView.vue
index 7699939..0a29f10 100644
--- a/src/views/SettingsView/SettingsView.vue
+++ b/src/views/SettingsView/SettingsView.vue
@@ -225,22 +225,44 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <main class="settings-shell">
-    <header class="settings-topbar">
-      <button class="icon-button back-button" type="button" :title="t('app.common.back')" :aria-label="t('app.common.back')" @click="changeHomeView">
-        <span class="i-lucide:chevron-left" />
+  <main
+    class="settings-shell" size-full overflow-hidden flex flex-col
+    bg="$ui-page-background"
+  >
+    <header
+      class="settings-topbar"
+      shrink-0 px-14px py-10px
+      grid items-center gap-10px
+    >
+      <button
+        class="icon-button"
+        light:bg-transparent dark:bg-transparent hover:bg="$ui-hover-background"
+        type="button"
+        :title="t('app.common.back')"
+        :aria-label="t('app.common.back')"
+        @click="changeHomeView"
+      >
+        <span class="i-lucide:chevron-left" text-16px />
       </button>
 
-      <div class="settings-title">
-        <h1>{{ t('app.settings.title') }}</h1>
+      <div min-w-0 flex items-center>
+        <h1 m-0 text-17px lh-21px font-650>
+          {{ t('app.settings.title') }}
+        </h1>
       </div>
 
       <TabsRoot
         class="settings-tabs-root"
+        min-w-0
         :model-value="activatedPage"
         @update:model-value="updateActivatedPage"
       >
-        <TabsList class="settings-tabs" :aria-label="t('app.settings.tabs.label')">
+        <TabsList
+          class="settings-tabs"
+          min-w-0 flex items-center gap-6px overflow-x-auto
+          px-2px py-3px
+          :aria-label="t('app.settings.tabs.label')"
+        >
           <TabsTrigger
             v-for="item in menuItems"
             :key="item.value"
@@ -255,7 +277,7 @@ onUnmounted(() => {
         </TabsList>
       </TabsRoot>
 
-      <div class="settings-actions">
+      <div class="settings-actions" shrink-0 flex items-center gap-6px>
         <button
           class="icon-button json-button"
           type="button"
@@ -277,20 +299,45 @@ onUnmounted(() => {
       </div>
     </header>
 
-    <div ref="settingsContentRef" class="settings-content ui-native-scrollbar">
-      <section :ref="el => setSectionRef(SettingPageEnum.Appearance, el)" class="settings-section">
+    <div
+      ref="settingsContentRef"
+      class="settings-content ui-native-scrollbar"
+      min-h-0 min-w-0 mx-14px mb-12px pb-12px
+      flex-1 overflow-y-auto flex flex-col gap-34px
+    >
+      <section
+        :ref="el => setSectionRef(SettingPageEnum.Appearance, el)"
+        class="settings-section"
+        box-border px-30px pt-15px pb-5px scroll-mt-8px
+      >
         <AppearancePage />
       </section>
-      <section :ref="el => setSectionRef(SettingPageEnum.Ides, el)" class="settings-section">
+      <section
+        :ref="el => setSectionRef(SettingPageEnum.Ides, el)"
+        class="settings-section"
+        box-border px-30px pt-15px pb-5px scroll-mt-8px
+      >
         <IdesPage />
       </section>
-      <section :ref="el => setSectionRef(SettingPageEnum.AutoScan, el)" class="settings-section">
+      <section
+        :ref="el => setSectionRef(SettingPageEnum.AutoScan, el)"
+        class="settings-section"
+        box-border px-30px pt-15px pb-5px scroll-mt-8px
+      >
         <AutoProjectScannerPage />
       </section>
-      <section :ref="el => setSectionRef(SettingPageEnum.Data, el)" class="settings-section">
+      <section
+        :ref="el => setSectionRef(SettingPageEnum.Data, el)"
+        class="settings-section"
+        box-border px-30px pt-15px pb-5px scroll-mt-8px
+      >
         <DataPage />
       </section>
-      <section :ref="el => setSectionRef(SettingPageEnum.About, el)" class="settings-section">
+      <section
+        :ref="el => setSectionRef(SettingPageEnum.About, el)"
+        class="settings-section"
+        box-border px-30px pt-15px pb-5px scroll-mt-8px
+      >
         <AboutPage />
       </section>
     </div>
@@ -298,34 +345,15 @@ onUnmounted(() => {
 </template>
 
 <style lang="scss" scoped>
-.settings-shell {
-  @apply size-full overflow-hidden flex flex-col;
-  @apply bg-$ui-page-background;
-}
-
 .settings-topbar {
-  @apply shrink-0 px-14px py-10px grid items-center gap-10px;
   grid-template-columns: auto minmax(128px, auto) minmax(0, 1fr) auto;
 }
 
-.settings-title {
-  @apply min-w-0 flex items-center;
-
-  h1 {
-    @apply m-0 text-17px lh-21px font-650;
-  }
-}
-
-.settings-tabs-root {
-  @apply min-w-0;
-}
-
 .settings-tabs {
-  @apply min-w-0 flex items-center gap-6px overflow-x-auto px-2px py-3px;
   scrollbar-width: none;
 
   &::-webkit-scrollbar {
-    display: none;
+    @apply hidden;
   }
 }
 
@@ -348,31 +376,11 @@ onUnmounted(() => {
   }
 
   &:focus-visible {
-    box-shadow: var(--shadow-focus);
-  }
-}
-
-.settings-actions {
-  @apply shrink-0 flex items-center gap-6px;
-}
-
-.back-button {
-  @apply light:bg-transparent dark:bg-transparent;
-  @apply hover:bg-$ui-hover-background;
-
-  span {
-    @apply text-16px;
+    @apply shadow-$shadow-focus;
   }
 }
 
-.settings-content {
-  @apply min-h-0 min-w-0 mx-14px mb-12px pb-12px flex-1 overflow-y-auto;
-  @apply flex flex-col gap-34px;
-}
-
 .settings-section {
-  @apply box-border px-30px pt-15px pb-5px scroll-mt-8px;
-
   :deep(.settings-page) {
     @apply gap-12px;
   }
@@ -434,10 +442,6 @@ onUnmounted(() => {
     grid-row: 2;
   }
 
-  .settings-title span {
-    @apply hidden;
-  }
-
   .settings-tab {
     @apply min-w-70px;
   }
diff --git a/src/views/SettingsView/components/SettingsPage.vue b/src/views/SettingsView/components/SettingsPage.vue
index aa31170..62eb545 100644
--- a/src/views/SettingsView/components/SettingsPage.vue
+++ b/src/views/SettingsView/components/SettingsPage.vue
@@ -5,32 +5,18 @@ defineProps<{
 </script>
 
 <template>
-  <div class="settings-page">
-    <header class="page-header">
-      <h2>{{ title }}</h2>
+  <div class="settings-page" flex flex-col gap-10px>
+    <header
+      class="page-header" min-w-0 flex items-end justify-between
+      gap-10px
+    >
+      <h2 m-0 min-w-0 text-16px font-650 break-anywhere>
+        {{ title }}
+      </h2>
     </header>
 
-    <div class="settings-list">
+    <div flex flex-col gap-8px>
       <slot />
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.settings-page {
-  @apply flex flex-col gap-10px;
-}
-
-.page-header {
-  @apply min-w-0 flex items-end justify-between gap-10px;
-
-  h2 {
-    @apply m-0 min-w-0 text-16px font-650;
-    overflow-wrap: anywhere;
-  }
-}
-
-.settings-list {
-  @apply flex flex-col gap-8px;
-}
-</style>
diff --git a/src/views/SettingsView/components/SettingsRow.vue b/src/views/SettingsView/components/SettingsRow.vue
index 5ff2301..8f56c3f 100644
--- a/src/views/SettingsView/components/SettingsRow.vue
+++ b/src/views/SettingsView/components/SettingsRow.vue
@@ -18,19 +18,33 @@ withDefaults(defineProps<{
 </script>
 
 <template>
-  <div class="setting-row" :class="{ 'align-start': align === 'start' }">
-    <div class="setting-copy">
-      <strong>{{ title }}</strong>
-      <span v-if="description" :class="descriptionTone">
+  <div
+    class="setting-row"
+    min-h-42px min-w-0 flex items-center justify-between
+    gap-14px
+    :class="{ 'align-start': align === 'start' }"
+  >
+    <div min-w-0 flex-1 flex flex-col gap-3px>
+      <strong text-13px font-620 break-anywhere>{{ title }}</strong>
+      <span
+        v-if="description" text-12px break-anywhere
+        light:color="$gray-6" dark:color="$gray-8"
+        :class="descriptionTone"
+      >
         {{ description }}
       </span>
     </div>
 
-    <div class="setting-content">
+    <div
+      class="setting-content" min-w-0 max-w-full flex flex-col
+      items-end gap-6px
+    >
       <slot />
       <p
         v-if="reserveStatus || status || $slots.status"
-        class="setting-status"
+        class="setting-status status-message"
+        m-0 min-h-16px max-w-520px text-right text-12px
+        lh-16px
         :class="[statusTone, { empty: !status && !$slots.status }]"
         :aria-hidden="!status && !$slots.status"
       >
@@ -43,10 +57,6 @@ withDefaults(defineProps<{
 </template>
 
 <style lang="scss" scoped>
-.setting-row {
-  @apply min-h-42px min-w-0 flex items-center justify-between gap-14px;
-}
-
 .setting-row.align-start {
   @apply items-start;
 
@@ -55,67 +65,8 @@ withDefaults(defineProps<{
   }
 }
 
-.setting-copy {
-  @apply min-w-0 flex-1 flex flex-col gap-3px;
-
-  strong {
-    @apply text-13px font-620;
-    overflow-wrap: anywhere;
-  }
-
-  span {
-    @apply text-12px light:color-$gray-6 dark:color-$gray-8;
-    overflow-wrap: anywhere;
-  }
-
-  span.danger {
-    @apply color-$red-5;
-  }
-}
-
-.setting-content {
-  @apply min-w-0 max-w-full flex flex-col items-end gap-6px;
-}
-
-.setting-status {
-  @apply m-0 min-h-16px max-w-520px text-right text-12px lh-16px;
-  overflow-wrap: anywhere;
-
-  &.empty {
-    visibility: hidden;
-  }
-
-  &.neutral {
-    @apply color-$ui-muted-foreground;
-  }
-
-  &.info {
-    @apply color-$ui-muted-foreground;
-  }
-
-  &.success {
-    color: color-mix(in srgb, var(--green-5) 90%, var(--ui-foreground));
-  }
-
-  &.warning {
-    color: color-mix(in srgb, var(--yellow-4) 90%, var(--ui-foreground));
-  }
-
-  &.error {
-    color: color-mix(in srgb, var(--red-5) 92%, var(--ui-foreground));
-  }
-}
-
-:global(.dark) .setting-status.success {
-  color: color-mix(in srgb, var(--green-7) 86%, var(--gray-14));
-}
-
-:global(.dark) .setting-status.warning {
-  color: color-mix(in srgb, var(--yellow-7) 86%, var(--gray-14));
-}
-
-:global(.dark) .setting-status.error {
-  color: color-mix(in srgb, var(--red-7) 86%, var(--gray-14));
+span.danger {
+  @apply color-$red-5;
 }
 
 @media (max-width: 720px) {
diff --git a/src/views/SettingsView/pages/About.vue b/src/views/SettingsView/pages/About.vue
index af901cf..ad6c4d4 100644
--- a/src/views/SettingsView/pages/About.vue
+++ b/src/views/SettingsView/pages/About.vue
@@ -84,7 +84,7 @@ async function onCheckUpdate() {
       :status-tone="updateStatusTone"
       reserve-status
     >
-      <div class="row-actions">
+      <div shrink-0 flex items-center gap-7px>
         <button class="ghost-button" type="button" :disabled="checking" @click="onCheckUpdate">
           {{ checking ? t('app.settings.about.update.checking') : t('app.settings.about.update.check') }}
         </button>
@@ -109,9 +109,3 @@ async function onCheckUpdate() {
     </SettingsRow>
   </SettingsPage>
 </template>
-
-<style lang="scss" scoped>
-.row-actions {
-  @apply shrink-0 flex items-center gap-7px;
-}
-</style>
diff --git a/src/views/SettingsView/pages/Appearance.vue b/src/views/SettingsView/pages/Appearance.vue
index 575b00f..00c8cc8 100644
--- a/src/views/SettingsView/pages/Appearance.vue
+++ b/src/views/SettingsView/pages/Appearance.vue
@@ -125,7 +125,10 @@ function themeColorButtonStyle(themeColor: ThemeColorEnum) {
         :model-value="appThemeColor"
         @update:model-value="selectThemeColor"
       >
-        <div class="theme-color-grid" :aria-label="t('app.settings.appearance.theme_color.title')">
+        <div
+          relative shrink-0 flex items-center gap-7px
+          :aria-label="t('app.settings.appearance.theme_color.title')"
+        >
           <RadioGroupItem
             v-for="option in themeColorOptions"
             :key="option.value"
@@ -145,7 +148,7 @@ function themeColorButtonStyle(themeColor: ThemeColorEnum) {
           <input
             ref="customColorInputRef"
             :value="appCustomThemeColor"
-            class="custom-color-input"
+            absolute size-1px opacity-0 pointer-events-none
             type="color"
             tabindex="-1"
             aria-hidden="true"
@@ -168,16 +171,11 @@ function themeColorButtonStyle(themeColor: ThemeColorEnum) {
 </template>
 
 <style lang="scss" scoped>
-.theme-color-grid {
-  @apply relative shrink-0 flex items-center gap-7px;
-}
-
 .theme-color-button {
   @apply relative size-24px rounded-full border p-0 cursor-pointer outline-none;
   @apply inline-flex items-center justify-center;
   @apply transition duration-120 ease-out;
-  border-color: var(--ui-input);
-  @apply bg-$ui-control-background;
+  @apply border-$ui-input bg-$ui-control-background;
 
   .theme-color-swatch {
     @apply size-14px rounded-full;
@@ -239,8 +237,4 @@ function themeColorButtonStyle(themeColor: ThemeColorEnum) {
   @apply absolute text-10px;
   color: var(--custom-theme-foreground);
 }
-
-.custom-color-input {
-  @apply absolute size-1px opacity-0 pointer-events-none;
-}
 </style>
diff --git a/src/views/SettingsView/pages/AutoProjectScanner.vue b/src/views/SettingsView/pages/AutoProjectScanner.vue
index 0ea6965..f303e87 100644
--- a/src/views/SettingsView/pages/AutoProjectScanner.vue
+++ b/src/views/SettingsView/pages/AutoProjectScanner.vue
@@ -1,739 +1,89 @@
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n'
 
-import UiCheckbox from '~/components/ui/UiCheckbox.vue'
-import UiDialog from '~/components/ui/UiDialog.vue'
-import UiSegmentedControl from '~/components/ui/UiSegmentedControl.vue'
-import UiSelect from '~/components/ui/UiSelect.vue'
-import type { CliHistoryScannerEditor, CodeEditorEnum, VscodeHistoryScannerEditor } from '~/constants/codeEditor'
-import {
-  codeEditorOrder,
-  codeEditors,
-  isCliHistoryScannerEditor,
-  isVscodeHistoryScannerEditor,
-  projectHistoryScannerEditors,
-  scannerEditorLabels,
-} from '~/constants/codeEditor'
-import { useProjectScannerStore } from '~/stores/projectScannerStore'
-import type { CliEditorScannerConfig, RecentEditorScannerConfig } from '~/stores/settingsStore'
-import { useSettingsStore } from '~/stores/settingsStore'
-import { useDelayedBusyKeys } from '~/utils/useDelayedBusy'
+import ScannerClearHistoryDialog from './AutoProjectScanner/components/ScannerClearHistoryDialog.vue'
+import ScannerSourcesPanel from './AutoProjectScanner/components/ScannerSourcesPanel.vue'
+import ScannerStrategyPanel from './AutoProjectScanner/components/ScannerStrategyPanel.vue'
+import { useAutoProjectScanner } from './AutoProjectScanner/composables/useAutoProjectScanner'
 
-type ScannerSourceKey = VscodeHistoryScannerEditor | CliHistoryScannerEditor
-type ScannerDetectKey = 'jetbrains' | ScannerSourceKey
-
-interface VscodeScannerSourceRow {
-  key: VscodeHistoryScannerEditor
-  kind: 'vscode-history'
-  label: string
-  config: RecentEditorScannerConfig
-}
-
-interface CliScannerSourceRow {
-  key: CliHistoryScannerEditor
-  kind: 'cli-history'
-  label: string
-  config: CliEditorScannerConfig
-}
-
-type ScannerSourceRow = VscodeScannerSourceRow | CliScannerSourceRow
-
-const settings = useSettingsStore()
-const projectScannerStore = useProjectScannerStore()
 const { t } = useI18n()
-const showClearConfirm = ref(false)
-const rootRowRefs = new Map<string, HTMLElement>()
-const detectingScannerKeys = ref<Set<ScannerDetectKey>>(new Set())
-const {
-  visibleKeys: visibleDetectingScannerKeys,
-  setKeyBusy: setVisibleDetectingScannerKey,
-} = useDelayedBusyKeys<ScannerDetectKey>({ delay: 220, minDuration: 320 })
-
-const editorOptions = computed<Array<{ value: CodeEditorEnum, label: string }>>(() =>
-  codeEditorOrder.map(editor => ({
-    value: editor,
-    label: codeEditors[editor].label,
-  })),
-)
-
-const rootOpenModeOptions = computed(() => [
-  {
-    value: 'language',
-    label: t('app.settings.scanner.open_mode.language'),
-    tooltip: t('app.settings.scanner.open_mode_help.language'),
-  },
-  {
-    value: 'specified',
-    label: t('app.settings.scanner.open_mode.specified'),
-    tooltip: t('app.settings.scanner.open_mode_help.specified'),
-  },
-])
-
-const ideOpenModeOptions = computed(() => [
-  {
-    value: 'source',
-    label: t('app.settings.scanner.open_mode.source'),
-    tooltip: t('app.settings.scanner.open_mode_help.source'),
-  },
-  {
-    value: 'language',
-    label: t('app.settings.scanner.open_mode.language'),
-    tooltip: t('app.settings.scanner.open_mode_help.ide_language'),
-  },
-  {
-    value: 'specified',
-    label: t('app.settings.scanner.open_mode.specified'),
-    tooltip: t('app.settings.scanner.open_mode_help.specified'),
-  },
-])
-
-const specifiedEditorEnabled = computed(() =>
-  settings.scanner.rootOpenMode === 'specified' || settings.scanner.ideOpenMode === 'specified',
-)
-
-const scannerSourceRows = computed<ScannerSourceRow[]>(() =>
-  projectHistoryScannerEditors
-    .map((editor) => {
-      const label = scannerEditorLabels[editor] || codeEditors[editor].label
-      if (isVscodeHistoryScannerEditor(editor)) {
-        return {
-          key: editor,
-          kind: 'vscode-history',
-          label,
-          config: settings.scanner.recentEditors[editor],
-        }
-      }
-      if (isCliHistoryScannerEditor(editor)) {
-        return {
-          key: editor,
-          kind: 'cli-history',
-          label,
-          config: settings.scanner.cliEditors[editor],
-        }
-      }
-      return null
-    })
-    .filter((row): row is ScannerSourceRow => row !== null),
-)
-
-async function addProjectRoot() {
-  if (!settings.scanner.rootsEnabled)
-    return
-
-  const selectedPaths = await window.api.openFolderDialog()
-  if (!selectedPaths.length) {
-    return
-  }
-
-  const roots = Array.from(new Set([...settings.scanner.roots, ...selectedPaths])).sort()
-  settings.scanner.roots.splice(0, settings.scanner.roots.length, ...roots)
-  settings.scanner.rootsEnabled = true
-}
-
-function removeRoot(root: string) {
-  const index = settings.scanner.roots.indexOf(root)
-  if (index >= 0) {
-    settings.scanner.roots.splice(index, 1)
-  }
-}
-
-function setRootRowRef(root: string, element: unknown) {
-  if (element instanceof HTMLElement) {
-    rootRowRefs.set(root, element)
-    return
-  }
-
-  rootRowRefs.delete(root)
-}
-
-function focusRootRow(root: string | undefined, preferRemoveButton = false) {
-  if (!root)
-    return
-
-  const row = rootRowRefs.get(root)
-  if (!row)
-    return
-
-  const target = preferRemoveButton
-    ? row.querySelector<HTMLButtonElement>('[data-root-action="remove"]:not(:disabled)') || row
-    : row
-
-  target.focus({ preventScroll: true })
-  target.scrollIntoView({ block: 'nearest', inline: 'nearest' })
-}
-
-function focusRootRowByOffset(root: string, offset: number, preferRemoveButton = false) {
-  const roots = settings.scanner.roots
-  const currentIndex = roots.indexOf(root)
-  if (currentIndex < 0)
-    return
-
-  const targetIndex = Math.max(0, Math.min(roots.length - 1, currentIndex + offset))
-  focusRootRow(roots[targetIndex], preferRemoveButton)
-}
-
-function focusRootRowAtEdge(edge: 'start' | 'end', preferRemoveButton = false) {
-  focusRootRow(edge === 'start' ? settings.scanner.roots[0] : settings.scanner.roots.at(-1), preferRemoveButton)
-}
-
-async function removeFocusedRoot(root: string) {
-  const roots = settings.scanner.roots
-  const index = roots.indexOf(root)
-  if (index < 0)
-    return
-
-  const nextRoot = roots[index + 1] || roots[index - 1]
-  removeRoot(root)
-  await nextTick()
-  focusRootRow(nextRoot)
-}
-
-function handleRootRowKeydown(root: string, event: KeyboardEvent) {
-  if (!settings.scanner.rootsEnabled || event.defaultPrevented)
-    return
-
-  const preferRemoveButton = event.target instanceof HTMLElement
-    && !!event.target.closest('[data-root-action="remove"]')
 
-  switch (event.key) {
-    case 'ArrowUp':
-      event.preventDefault()
-      event.stopPropagation()
-      focusRootRowByOffset(root, -1, preferRemoveButton)
-      break
-    case 'ArrowDown':
-      event.preventDefault()
-      event.stopPropagation()
-      focusRootRowByOffset(root, 1, preferRemoveButton)
-      break
-    case 'Home':
-      event.preventDefault()
-      event.stopPropagation()
-      focusRootRowAtEdge('start', preferRemoveButton)
-      break
-    case 'End':
-      event.preventDefault()
-      event.stopPropagation()
-      focusRootRowAtEdge('end', preferRemoveButton)
-      break
-    case 'Delete':
-      event.preventDefault()
-      event.stopPropagation()
-      void removeFocusedRoot(root)
-      break
-  }
-}
-
-async function browseJetbrainsRoot() {
-  if (!settings.scanner.ideEnabled || !settings.scanner.jetbrains.enabled)
-    return
-
-  const selectedPaths = await window.api.openFolderDialog()
-  if (selectedPaths[0]) {
-    settings.scanner.jetbrains.configRootPath = selectedPaths[0]
-  }
-}
-
-function getScannerSourcePath(row: ScannerSourceRow) {
-  return row.kind === 'vscode-history'
-    ? row.config.stateDbPath
-    : row.config.historyRootPath
-}
-
-function setScannerSourcePath(row: ScannerSourceRow, value: string) {
-  if (row.kind === 'vscode-history') {
-    row.config.stateDbPath = value
-    return
-  }
-  row.config.historyRootPath = value
-}
-
-function handleScannerSourcePathInput(row: ScannerSourceRow, event: Event) {
-  const target = event.target
-  if (target instanceof HTMLInputElement)
-    setScannerSourcePath(row, target.value)
-}
-
-function getScannerSourcePlaceholder(row: ScannerSourceRow) {
-  return row.kind === 'vscode-history'
-    ? t('app.settings.scanner.recent_editor.placeholder', { editor: row.label })
-    : t('app.settings.scanner.cli_editor.placeholder', { editor: row.label })
-}
-
-async function browseScannerSource(row: ScannerSourceRow) {
-  if (!settings.scanner.ideEnabled || !row.config.enabled)
-    return
-
-  const selectedPaths = row.kind === 'vscode-history'
-    ? await window.api.openFileDialog({
-        fileTypes: [{ name: t('app.dialog.file_types.editor_history_database'), extensions: ['vscdb'] }],
-      })
-    : await window.api.openFolderDialog()
-
-  if (selectedPaths[0]) {
-    setScannerSourcePath(row, selectedPaths[0])
-  }
-}
-
-async function detectJetbrainsRoot() {
-  if (!settings.scanner.ideEnabled || !settings.scanner.jetbrains.enabled || detectingScannerKeys.value.has('jetbrains'))
-    return
-
-  detectingScannerKeys.value = new Set([...detectingScannerKeys.value, 'jetbrains'])
-  setVisibleDetectingScannerKey('jetbrains', true)
-  try {
-    const detectedPath = await window.api.detectJetBrainsConfigRootPath()
-    if (detectedPath) {
-      settings.scanner.jetbrains.configRootPath = detectedPath
-    }
-  }
-  finally {
-    const next = new Set(detectingScannerKeys.value)
-    next.delete('jetbrains')
-    detectingScannerKeys.value = next
-    setVisibleDetectingScannerKey('jetbrains', false)
-  }
-}
-
-async function detectScannerSource(row: ScannerSourceRow) {
-  if (!settings.scanner.ideEnabled || !row.config.enabled || detectingScannerKeys.value.has(row.key))
-    return
-
-  detectingScannerKeys.value = new Set([...detectingScannerKeys.value, row.key])
-  setVisibleDetectingScannerKey(row.key, true)
-  try {
-    const detectedPath = row.kind === 'vscode-history'
-      ? await window.api.detectRecentEditorStateDbPath(row.key)
-      : await window.api.detectCliHistoryRootPath(row.key)
-    if (detectedPath) {
-      setScannerSourcePath(row, detectedPath)
-    }
-  }
-  finally {
-    const next = new Set(detectingScannerKeys.value)
-    next.delete(row.key)
-    detectingScannerKeys.value = next
-    setVisibleDetectingScannerKey(row.key, false)
-  }
-}
-
-function clearScanHistory() {
-  projectScannerStore.clearProjectScannerData()
-  showClearConfirm.value = false
-}
+const {
+  addProjectRoot,
+  browseJetbrainsRoot,
+  browseScannerSource,
+  clearScanHistory,
+  detectJetbrainsRoot,
+  detectingScannerKeys,
+  detectScannerSource,
+  editorOptions,
+  getScannerSourcePath,
+  getScannerSourcePlaceholder,
+  handleRootRowKeydown,
+  handleScannerSourcePathInput,
+  ideOpenModeOptions,
+  removeRoot,
+  rootOpenModeOptions,
+  scannerSourceRows,
+  setRootRowRef,
+  showClearConfirm,
+  specifiedEditorEnabled,
+  visibleDetectingScannerKeys,
+} = useAutoProjectScanner()
 </script>
 
 <template>
-  <div class="settings-page">
-    <header class="page-header">
-      <h2>{{ t('app.settings.scanner.title') }}</h2>
+  <div relative flex flex-col gap-10px>
+    <header flex items-end justify-between gap-10px>
+      <h2 m-0 text-16px font-650 break-anywhere>
+        {{ t('app.settings.scanner.title') }}
+      </h2>
     </header>
 
-    <div class="settings-grid">
-      <section class="settings-panel">
-        <header class="panel-header">
-          <strong>{{ t('app.settings.scanner.sources.title') }}</strong>
-          <span>{{ t('app.settings.scanner.sources.desc') }}</span>
-        </header>
-
-        <div class="toggle-row">
-          <UiCheckbox v-model="settings.scanner.rootsEnabled">
-            <div class="checkbox-copy">
-              <strong>{{ t('app.settings.scanner.roots.title') }}</strong>
-              <span>{{ t('app.settings.scanner.roots.desc') }}</span>
-            </div>
-          </UiCheckbox>
-        </div>
-
-        <div class="source-child-group" :class="{ disabled: !settings.scanner.rootsEnabled }">
-          <div class="inline-actions">
-            <button class="ghost-button" type="button" :disabled="!settings.scanner.rootsEnabled" @click="addProjectRoot">
-              <span class="i-lucide:plus" />
-              {{ t('app.settings.scanner.roots.add') }}
-            </button>
-            <span class="subtle-count">{{ t('app.settings.scanner.roots.count', { count: settings.scanner.roots.length }) }}</span>
-          </div>
-
-          <div class="path-list ui-native-scrollbar" role="list">
-            <div v-if="settings.scanner.roots.length === 0" class="empty-inline">
-              {{ t('app.settings.scanner.roots.empty') }}
-            </div>
-            <div
-              v-for="root in settings.scanner.roots"
-              :key="root"
-              :ref="el => setRootRowRef(root, el)"
-              class="path-row"
-              role="listitem"
-              :tabindex="settings.scanner.rootsEnabled ? 0 : -1"
-              :aria-label="root"
-              aria-keyshortcuts="Delete"
-              @keydown="handleRootRowKeydown(root, $event)"
-            >
-              <span :title="root">{{ root }}</span>
-              <button
-                class="icon-button"
-                type="button"
-                data-root-action="remove"
-                :title="t('app.settings.scanner.roots.remove')"
-                :aria-label="t('app.settings.scanner.roots.remove')"
-                :disabled="!settings.scanner.rootsEnabled"
-                @click="removeRoot(root)"
-              >
-                <span class="i-lucide:x" />
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <div class="toggle-row">
-          <UiCheckbox v-model="settings.scanner.ideEnabled">
-            <div class="checkbox-copy">
-              <strong>{{ t('app.settings.scanner.ide.title') }}</strong>
-              <span>{{ t('app.settings.scanner.ide.desc') }}</span>
-            </div>
-          </UiCheckbox>
-        </div>
-
-        <div class="source-child-group ide-source-group" :class="{ disabled: !settings.scanner.ideEnabled }">
-          <div
-            v-for="row in scannerSourceRows"
-            :key="row.key"
-            class="source-row"
-          >
-            <UiCheckbox
-              v-model="row.config.enabled"
-              :disabled="!settings.scanner.ideEnabled"
-            >
-              {{ row.label }}
-            </UiCheckbox>
-            <input
-              :value="getScannerSourcePath(row)"
-              class="path-input"
-              spellcheck="false"
-              :aria-label="getScannerSourcePlaceholder(row)"
-              :placeholder="getScannerSourcePlaceholder(row)"
-              :disabled="!settings.scanner.ideEnabled || !row.config.enabled"
-              @input="handleScannerSourcePathInput(row, $event)"
-            >
-            <button
-              class="icon-button"
-              type="button"
-              :title="t('app.settings.scanner.auto_detect')"
-              :aria-label="t('app.settings.scanner.auto_detect')"
-              :disabled="!settings.scanner.ideEnabled || !row.config.enabled || detectingScannerKeys.has(row.key)"
-              @click="detectScannerSource(row)"
-            >
-              <span class="i-lucide:wand-sparkles" :class="{ spinning: visibleDetectingScannerKeys.has(row.key) }" />
-            </button>
-            <button
-              class="icon-button"
-              type="button"
-              :title="row.kind === 'vscode-history' ? t('app.settings.scanner.recent_editor.browse') : t('app.common.browse_folder')"
-              :aria-label="row.kind === 'vscode-history' ? t('app.settings.scanner.recent_editor.browse') : t('app.common.browse_folder')"
-              :disabled="!settings.scanner.ideEnabled || !row.config.enabled"
-              @click="browseScannerSource(row)"
-            >
-              <span class="i-lucide:folder-open" />
-            </button>
-          </div>
-
-          <div class="source-row">
-            <UiCheckbox
-              v-model="settings.scanner.jetbrains.enabled"
-              :disabled="!settings.scanner.ideEnabled"
-            >
-              JetBrains
-            </UiCheckbox>
-            <input
-              v-model="settings.scanner.jetbrains.configRootPath"
-              class="path-input"
-              spellcheck="false"
-              :aria-label="t('app.settings.scanner.jetbrains.placeholder')"
-              :placeholder="t('app.settings.scanner.jetbrains.placeholder')"
-              :disabled="!settings.scanner.ideEnabled || !settings.scanner.jetbrains.enabled"
-            >
-            <button
-              class="icon-button"
-              type="button"
-              :title="t('app.settings.scanner.auto_detect')"
-              :aria-label="t('app.settings.scanner.auto_detect')"
-              :disabled="!settings.scanner.ideEnabled || !settings.scanner.jetbrains.enabled || detectingScannerKeys.has('jetbrains')"
-              @click="detectJetbrainsRoot"
-            >
-              <span class="i-lucide:wand-sparkles" :class="{ spinning: visibleDetectingScannerKeys.has('jetbrains') }" />
-            </button>
-            <button
-              class="icon-button"
-              type="button"
-              :title="t('app.common.browse_folder')"
-              :aria-label="t('app.common.browse_folder')"
-              :disabled="!settings.scanner.ideEnabled || !settings.scanner.jetbrains.enabled"
-              @click="browseJetbrainsRoot"
-            >
-              <span class="i-lucide:folder-open" />
-            </button>
-          </div>
-        </div>
-      </section>
-
-      <section class="settings-panel">
-        <header class="panel-header">
-          <strong>{{ t('app.settings.scanner.strategy.title') }}</strong>
-          <span>{{ t('app.settings.scanner.strategy.desc') }}</span>
-        </header>
-
-        <div class="setting-row">
-          <div class="setting-copy">
-            <strong>{{ t('app.settings.scanner.root_open_mode.title') }}</strong>
-            <span>{{ t('app.settings.scanner.root_open_mode.desc') }}</span>
-          </div>
-          <UiSegmentedControl
-            v-model="settings.scanner.rootOpenMode"
-            :options="rootOpenModeOptions"
-            :aria-label="t('app.settings.scanner.root_open_mode.title')"
-          />
-        </div>
-
-        <div class="setting-row">
-          <div class="setting-copy">
-            <strong>{{ t('app.settings.scanner.ide_open_mode.title') }}</strong>
-            <span>{{ t('app.settings.scanner.ide_open_mode.desc') }}</span>
-          </div>
-          <UiSegmentedControl
-            v-model="settings.scanner.ideOpenMode"
-            :options="ideOpenModeOptions"
-            :aria-label="t('app.settings.scanner.ide_open_mode.title')"
-          />
-        </div>
-
-        <div class="setting-row">
-          <div class="setting-copy">
-            <strong>{{ t('app.settings.scanner.specified_editor.title') }}</strong>
-            <span>{{ t('app.settings.scanner.specified_editor.desc') }}</span>
-          </div>
-          <UiSelect
-            v-model="settings.scanner.editor"
-            :options="editorOptions"
-            :aria-label="t('app.settings.scanner.specified_editor.title')"
-            :disabled="!specifiedEditorEnabled"
-            min-width="160px"
-            content-width="210px"
-          />
-        </div>
-
-        <div class="setting-row">
-          <div class="setting-copy">
-            <strong>{{ t('app.settings.scanner.name_pattern.title') }}</strong>
-            <span>{{ t('app.settings.scanner.name_pattern.desc') }}</span>
-          </div>
-          <input
-            v-model="settings.scanner.namePattern"
-            class="path-input compact"
-            spellcheck="false"
-            :aria-label="t('app.settings.scanner.name_pattern.title')"
-          >
-        </div>
-
-        <div class="maintenance-box">
-          <div>
-            <strong>{{ t('app.settings.scanner.history.title') }}</strong>
-            <span>{{ t('app.settings.scanner.history.desc') }}</span>
-          </div>
-          <button class="danger-button" type="button" @click="showClearConfirm = true">
-            {{ t('app.settings.scanner.history.clear') }}
-          </button>
-        </div>
-      </section>
+    <div class="settings-grid" grid gap-25px>
+      <ScannerSourcesPanel
+        :scanner-source-rows="scannerSourceRows"
+        :detecting-scanner-keys="detectingScannerKeys"
+        :visible-detecting-scanner-keys="visibleDetectingScannerKeys"
+        :add-project-root="addProjectRoot"
+        :remove-root="removeRoot"
+        :set-root-row-ref="setRootRowRef"
+        :handle-root-row-keydown="handleRootRowKeydown"
+        :get-scanner-source-path="getScannerSourcePath"
+        :get-scanner-source-placeholder="getScannerSourcePlaceholder"
+        :handle-scanner-source-path-input="handleScannerSourcePathInput"
+        :browse-scanner-source="browseScannerSource"
+        :detect-scanner-source="detectScannerSource"
+        :browse-jetbrains-root="browseJetbrainsRoot"
+        :detect-jetbrains-root="detectJetbrainsRoot"
+      />
+
+      <ScannerStrategyPanel
+        :editor-options="editorOptions"
+        :root-open-mode-options="rootOpenModeOptions"
+        :ide-open-mode-options="ideOpenModeOptions"
+        :specified-editor-enabled="specifiedEditorEnabled"
+        :show-clear-confirm="showClearConfirm"
+        @update:show-clear-confirm="showClearConfirm = $event"
+      />
     </div>
 
-    <UiDialog
-      v-model:open="showClearConfirm"
-      :title="t('app.settings.scanner.history.dialog_title')"
-      :description="t('app.settings.scanner.history.dialog_desc')"
-      width="320px"
-      actions-layout="end"
-    >
-      <template #actions>
-        <button class="ghost-button" type="button" @click="showClearConfirm = false">
-          {{ t('app.common.cancel') }}
-        </button>
-        <button class="danger-button" type="button" @click="clearScanHistory">
-          {{ t('app.common.clear') }}
-        </button>
-      </template>
-    </UiDialog>
+    <ScannerClearHistoryDialog
+      :open="showClearConfirm"
+      @update:open="showClearConfirm = $event"
+      @clear="clearScanHistory"
+    />
   </div>
 </template>
 
 <style lang="scss" scoped>
-.settings-page {
-  @apply relative flex flex-col gap-10px;
-}
-
-.page-header {
-  @apply flex items-end justify-between gap-10px;
-
-  h2 {
-    @apply m-0 text-16px font-650;
-  }
-
-  span {
-    @apply text-12px light:color-$gray-6 dark:color-$gray-8;
-  }
-}
-
 .settings-grid {
-  @apply grid gap-25px;
   grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.8fr);
 }
 
-.settings-panel {
-  @apply min-w-0 flex flex-col gap-8px;
-}
-
-.panel-header {
-  @apply min-h-34px flex flex-col gap-3px;
-
-  strong {
-    @apply text-13px font-650;
-    overflow-wrap: anywhere;
-  }
-
-  span {
-    @apply text-12px light:color-$gray-6 dark:color-$gray-8;
-    overflow-wrap: anywhere;
-  }
-}
-
-.toggle-row,
-.setting-row,
-.maintenance-box {
-  @apply min-h-42px flex items-center justify-between gap-12px;
-}
-
-.maintenance-box {
-  @apply flex-wrap;
-
-  > div {
-    @apply flex-1;
-  }
-
-  > button {
-    @apply ml-auto;
-  }
-}
-
-.toggle-row {
-  @apply justify-start;
-}
-
-.checkbox-copy,
-.setting-copy,
-.maintenance-box div {
-  @apply min-w-0 flex flex-col gap-3px;
-
-  strong {
-    @apply text-13px font-620;
-    overflow-wrap: anywhere;
-  }
-
-  span {
-    @apply text-12px light:color-$gray-6 dark:color-$gray-8;
-    overflow-wrap: anywhere;
-  }
-}
-
-.inline-actions {
-  @apply flex items-center gap-8px;
-}
-
-.source-child-group {
-  @apply ml-24px pl-12px flex flex-col gap-7px border-l;
-  @apply border-$ui-border;
-
-  &.disabled {
-    @apply opacity-55;
-
-    .path-row span,
-    .subtle-count,
-    .empty-inline {
-      @apply color-$ui-muted-foreground;
-    }
-  }
-}
-
-.subtle-count,
-.empty-inline {
-  @apply text-12px light:color-$gray-6 dark:color-$gray-8;
-}
-
-.path-list {
-  @apply max-h-128px overflow-auto pl-1px pr-0;
-  scrollbar-gutter: auto;
-}
-
-.path-row {
-  @apply h-31px flex items-center gap-8px rounded-4px outline-none;
-
-  &:focus-visible {
-    box-shadow: inset 0 0 0 2px var(--ui-ring);
-  }
-
-  span {
-    @apply min-w-0 flex-1 truncate text-12px light:color-$gray-3 dark:color-$gray-12;
-  }
-
-  .icon-button {
-    @apply bg-transparent hover:bg-$ui-hover-background;
-  }
-}
-
-.empty-inline {
-  @apply py-9px;
-}
-
-.source-row {
-  @apply min-h-36px grid items-center gap-7px;
-  grid-template-columns: max-content minmax(160px, 1fr) 28px 28px;
-
-  @apply text-12px;
-
-  :deep(.ui-checkbox-label) {
-    @apply whitespace-nowrap;
-  }
-}
-
-.ide-source-group {
-  @apply grid items-center gap-x-7px gap-y-10px;
-  grid-template-columns: max-content minmax(160px, 1fr) 28px 28px;
-
-  .source-row {
-    display: contents;
-  }
-}
-
-.spinning {
-  animation: spin-detect 0.8s linear infinite;
-}
-
-@keyframes spin-detect {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.path-input.compact {
-  @apply w-180px;
-}
-
 @media (max-width: 900px) {
   .settings-grid {
     grid-template-columns: 1fr;
   }
-
-  .source-row,
-  .ide-source-group {
-    grid-template-columns: max-content minmax(0, 1fr) 28px 28px;
-  }
 }
 </style>
diff --git a/src/views/SettingsView/pages/AutoProjectScanner/components/ScannerClearHistoryDialog.vue b/src/views/SettingsView/pages/AutoProjectScanner/components/ScannerClearHistoryDialog.vue
new file mode 100644
index 0000000..df8bea7
--- /dev/null
+++ b/src/views/SettingsView/pages/AutoProjectScanner/components/ScannerClearHistoryDialog.vue
@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+
+import UiDialog from '~/components/ui/UiDialog.vue'
+
+defineProps<{
+  open: boolean
+}>()
+
+const emit = defineEmits<{
+  clear: []
+  'update:open': [value: boolean]
+}>()
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <UiDialog
+    :open="open"
+    :title="t('app.settings.scanner.history.dialog_title')"
+    :description="t('app.settings.scanner.history.dialog_desc')"
+    width="320px"
+    actions-layout="end"
+    @update:open="emit('update:open', $event)"
+  >
+    <template #actions>
+      <button class="ghost-button" type="button" @click="emit('update:open', false)">
+        {{ t('app.common.cancel') }}
+      </button>
+      <button class="danger-button" type="button" @click="emit('clear')">
+        {{ t('app.common.clear') }}
+      </button>
+    </template>
+  </UiDialog>
+</template>
diff --git a/src/views/SettingsView/pages/AutoProjectScanner/components/ScannerSourcesPanel.vue b/src/views/SettingsView/pages/AutoProjectScanner/components/ScannerSourcesPanel.vue
new file mode 100644
index 0000000..685f099
--- /dev/null
+++ b/src/views/SettingsView/pages/AutoProjectScanner/components/ScannerSourcesPanel.vue
@@ -0,0 +1,259 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+
+import UiCheckbox from '~/components/ui/UiCheckbox.vue'
+import { useSettingsStore } from '~/stores/settingsStore'
+
+import type { ScannerDetectKey, ScannerSourceRow } from '../composables/useAutoProjectScanner'
+
+defineProps<{
+  browseJetbrainsRoot: () => Promise<void>
+  browseScannerSource: (row: ScannerSourceRow) => Promise<void>
+  detectJetbrainsRoot: () => Promise<void>
+  detectingScannerKeys: Set<ScannerDetectKey>
+  detectScannerSource: (row: ScannerSourceRow) => Promise<void>
+  getScannerSourcePath: (row: ScannerSourceRow) => string
+  getScannerSourcePlaceholder: (row: ScannerSourceRow) => string
+  handleRootRowKeydown: (root: string, event: KeyboardEvent) => void
+  handleScannerSourcePathInput: (row: ScannerSourceRow, event: Event) => void
+  addProjectRoot: () => Promise<void>
+  removeRoot: (root: string) => void
+  scannerSourceRows: ScannerSourceRow[]
+  setRootRowRef: (root: string, element: unknown) => void
+  visibleDetectingScannerKeys: Set<ScannerDetectKey>
+}>()
+
+const { t } = useI18n()
+const settings = useSettingsStore()
+</script>
+
+<template>
+  <section min-w-0 flex flex-col gap-8px>
+    <header min-h-34px flex flex-col gap-3px>
+      <strong text-13px font-650 break-anywhere>{{ t('app.settings.scanner.sources.title') }}</strong>
+      <span text-12px break-anywhere light:color="$gray-6" dark:color="$gray-8">{{ t('app.settings.scanner.sources.desc') }}</span>
+    </header>
+
+    <div min-h-42px flex items-center justify-start gap-12px>
+      <UiCheckbox v-model="settings.scanner.rootsEnabled">
+        <div min-w-0 flex flex-col gap-3px>
+          <strong text-13px font-620 break-anywhere>{{ t('app.settings.scanner.roots.title') }}</strong>
+          <span text-12px break-anywhere light:color="$gray-6" dark:color="$gray-8">{{ t('app.settings.scanner.roots.desc') }}</span>
+        </div>
+      </UiCheckbox>
+    </div>
+
+    <div
+      class="source-child-group"
+      ml-24px pl-12px flex flex-col gap-7px
+      border-l border="$ui-border"
+      :class="{ disabled: !settings.scanner.rootsEnabled }"
+    >
+      <div flex items-center gap-8px>
+        <button class="ghost-button" type="button" :disabled="!settings.scanner.rootsEnabled" @click="addProjectRoot">
+          <span class="i-lucide:plus" />
+          {{ t('app.settings.scanner.roots.add') }}
+        </button>
+        <span class="subtle-count" text-12px break-anywhere light:color="$gray-6" dark:color="$gray-8">
+          {{ t('app.settings.scanner.roots.count', { count: settings.scanner.roots.length }) }}
+        </span>
+      </div>
+
+      <div
+        max-h-128px overflow-auto pl-1px pr-0
+        class="path-list ui-native-scrollbar"
+        role="list"
+      >
+        <div
+          v-if="settings.scanner.roots.length === 0"
+          class="empty-inline"
+          py-9px text-12px
+          light:color="$gray-6" dark:color="$gray-8"
+        >
+          {{ t('app.settings.scanner.roots.empty') }}
+        </div>
+        <div
+          v-for="root in settings.scanner.roots"
+          :key="root"
+          :ref="el => setRootRowRef(root, el)"
+          class="path-row"
+          h-31px flex items-center gap-8px rounded-4px
+          outline-none
+          role="listitem"
+          :tabindex="settings.scanner.rootsEnabled ? 0 : -1"
+          :aria-label="root"
+          aria-keyshortcuts="Delete"
+          @keydown="handleRootRowKeydown(root, $event)"
+        >
+          <span
+            min-w-0 flex-1 truncate text-12px
+            light:color="$gray-3" dark:color="$gray-12"
+            :title="root"
+          >{{ root }}</span>
+          <button
+            class="icon-button"
+            type="button"
+            data-root-action="remove"
+            :title="t('app.settings.scanner.roots.remove')"
+            :aria-label="t('app.settings.scanner.roots.remove')"
+            :disabled="!settings.scanner.rootsEnabled"
+            @click="removeRoot(root)"
+          >
+            <span class="i-lucide:x" />
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div min-h-42px flex items-center justify-start gap-12px>
+      <UiCheckbox v-model="settings.scanner.ideEnabled">
+        <div min-w-0 flex flex-col gap-3px>
+          <strong text-13px font-620 break-anywhere>{{ t('app.settings.scanner.ide.title') }}</strong>
+          <span text-12px break-anywhere light:color="$gray-6" dark:color="$gray-8">{{ t('app.settings.scanner.ide.desc') }}</span>
+        </div>
+      </UiCheckbox>
+    </div>
+
+    <div
+      class="source-child-group ide-source-group"
+      ml-24px pl-12px flex flex-col gap-7px
+      border-l border="$ui-border"
+      :class="{ disabled: !settings.scanner.ideEnabled }"
+    >
+      <div
+        v-for="row in scannerSourceRows"
+        :key="row.key"
+        class="source-row"
+        min-h-36px grid items-center gap-7px text-12px
+      >
+        <UiCheckbox
+          v-model="row.config.enabled"
+          :disabled="!settings.scanner.ideEnabled"
+        >
+          {{ row.label }}
+        </UiCheckbox>
+        <input
+          :value="getScannerSourcePath(row)"
+          class="path-input"
+          spellcheck="false"
+          :aria-label="getScannerSourcePlaceholder(row)"
+          :placeholder="getScannerSourcePlaceholder(row)"
+          :disabled="!settings.scanner.ideEnabled || !row.config.enabled"
+          @input="handleScannerSourcePathInput(row, $event)"
+        >
+        <button
+          class="icon-button"
+          type="button"
+          :title="t('app.settings.scanner.auto_detect')"
+          :aria-label="t('app.settings.scanner.auto_detect')"
+          :disabled="!settings.scanner.ideEnabled || !row.config.enabled || detectingScannerKeys.has(row.key)"
+          @click="detectScannerSource(row)"
+        >
+          <span class="i-lucide:wand-sparkles" :class="{ 'is-spinning': visibleDetectingScannerKeys.has(row.key) }" />
+        </button>
+        <button
+          class="icon-button"
+          type="button"
+          :title="row.kind === 'vscode-history' ? t('app.settings.scanner.recent_editor.browse') : t('app.common.browse_folder')"
+          :aria-label="row.kind === 'vscode-history' ? t('app.settings.scanner.recent_editor.browse') : t('app.common.browse_folder')"
+          :disabled="!settings.scanner.ideEnabled || !row.config.enabled"
+          @click="browseScannerSource(row)"
+        >
+          <span class="i-lucide:folder-open" />
+        </button>
+      </div>
+
+      <div
+        class="source-row"
+        min-h-36px grid items-center gap-7px text-12px
+      >
+        <UiCheckbox
+          v-model="settings.scanner.jetbrains.enabled"
+          :disabled="!settings.scanner.ideEnabled"
+        >
+          JetBrains
+        </UiCheckbox>
+        <input
+          v-model="settings.scanner.jetbrains.configRootPath"
+          class="path-input"
+          spellcheck="false"
+          :aria-label="t('app.settings.scanner.jetbrains.placeholder')"
+          :placeholder="t('app.settings.scanner.jetbrains.placeholder')"
+          :disabled="!settings.scanner.ideEnabled || !settings.scanner.jetbrains.enabled"
+        >
+        <button
+          class="icon-button"
+          type="button"
+          :title="t('app.settings.scanner.auto_detect')"
+          :aria-label="t('app.settings.scanner.auto_detect')"
+          :disabled="!settings.scanner.ideEnabled || !settings.scanner.jetbrains.enabled || detectingScannerKeys.has('jetbrains')"
+          @click="detectJetbrainsRoot"
+        >
+          <span class="i-lucide:wand-sparkles" :class="{ 'is-spinning': visibleDetectingScannerKeys.has('jetbrains') }" />
+        </button>
+        <button
+          class="icon-button"
+          type="button"
+          :title="t('app.common.browse_folder')"
+          :aria-label="t('app.common.browse_folder')"
+          :disabled="!settings.scanner.ideEnabled || !settings.scanner.jetbrains.enabled"
+          @click="browseJetbrainsRoot"
+        >
+          <span class="i-lucide:folder-open" />
+        </button>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style lang="scss" scoped>
+.source-child-group {
+  &.disabled {
+    @apply opacity-55;
+
+    .path-row span,
+    .subtle-count,
+    .empty-inline {
+      @apply color-$ui-muted-foreground;
+    }
+  }
+}
+
+.path-list {
+  scrollbar-gutter: auto;
+}
+
+.path-row {
+  &:focus-visible {
+    box-shadow: inset 0 0 0 2px var(--ui-ring);
+  }
+
+  .icon-button {
+    @apply bg-transparent hover:bg-$ui-hover-background;
+  }
+}
+
+.source-row {
+  grid-template-columns: max-content minmax(160px, 1fr) 28px 28px;
+
+  :deep(.ui-checkbox-label) {
+    @apply whitespace-nowrap;
+  }
+}
+
+.ide-source-group {
+  @apply grid items-center gap-x-7px gap-y-10px;
+  grid-template-columns: max-content minmax(160px, 1fr) 28px 28px;
+
+  .source-row {
+    @apply contents;
+  }
+}
+
+@media (max-width: 900px) {
+  .source-row,
+  .ide-source-group {
+    grid-template-columns: max-content minmax(0, 1fr) 28px 28px;
+  }
+}
+</style>
diff --git a/src/views/SettingsView/pages/AutoProjectScanner/components/ScannerStrategyPanel.vue b/src/views/SettingsView/pages/AutoProjectScanner/components/ScannerStrategyPanel.vue
new file mode 100644
index 0000000..00e0ce7
--- /dev/null
+++ b/src/views/SettingsView/pages/AutoProjectScanner/components/ScannerStrategyPanel.vue
@@ -0,0 +1,109 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+
+import UiSegmentedControl from '~/components/ui/UiSegmentedControl.vue'
+import UiSelect from '~/components/ui/UiSelect.vue'
+import type { CodeEditorEnum } from '~/constants/codeEditor'
+import { useSettingsStore } from '~/stores/settingsStore'
+
+interface SelectOption {
+  value: CodeEditorEnum
+  label: string
+}
+
+interface ModeOption {
+  value: string
+  label: string
+  tooltip: string
+}
+
+defineProps<{
+  editorOptions: SelectOption[]
+  ideOpenModeOptions: ModeOption[]
+  rootOpenModeOptions: ModeOption[]
+  showClearConfirm: boolean
+  specifiedEditorEnabled: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:showClearConfirm': [value: boolean]
+}>()
+
+const { t } = useI18n()
+const settings = useSettingsStore()
+</script>
+
+<template>
+  <section min-w-0 flex flex-col gap-8px>
+    <header min-h-34px flex flex-col gap-3px>
+      <strong text-13px font-650 break-anywhere>{{ t('app.settings.scanner.strategy.title') }}</strong>
+      <span text-12px break-anywhere light:color="$gray-6" dark:color="$gray-8">{{ t('app.settings.scanner.strategy.desc') }}</span>
+    </header>
+
+    <div min-h-42px flex items-center justify-between gap-12px>
+      <div min-w-0 flex flex-col gap-3px>
+        <strong text-13px font-620 break-anywhere>{{ t('app.settings.scanner.root_open_mode.title') }}</strong>
+        <span text-12px break-anywhere light:color="$gray-6" dark:color="$gray-8">{{ t('app.settings.scanner.root_open_mode.desc') }}</span>
+      </div>
+      <UiSegmentedControl
+        v-model="settings.scanner.rootOpenMode"
+        :options="rootOpenModeOptions"
+        :aria-label="t('app.settings.scanner.root_open_mode.title')"
+      />
+    </div>
+
+    <div min-h-42px flex items-center justify-between gap-12px>
+      <div min-w-0 flex flex-col gap-3px>
+        <strong text-13px font-620 break-anywhere>{{ t('app.settings.scanner.ide_open_mode.title') }}</strong>
+        <span text-12px break-anywhere light:color="$gray-6" dark:color="$gray-8">{{ t('app.settings.scanner.ide_open_mode.desc') }}</span>
+      </div>
+      <UiSegmentedControl
+        v-model="settings.scanner.ideOpenMode"
+        :options="ideOpenModeOptions"
+        :aria-label="t('app.settings.scanner.ide_open_mode.title')"
+      />
+    </div>
+
+    <div min-h-42px flex items-center justify-between gap-12px>
+      <div min-w-0 flex flex-col gap-3px>
+        <strong text-13px font-620 break-anywhere>{{ t('app.settings.scanner.specified_editor.title') }}</strong>
+        <span text-12px break-anywhere light:color="$gray-6" dark:color="$gray-8">{{ t('app.settings.scanner.specified_editor.desc') }}</span>
+      </div>
+      <UiSelect
+        v-model="settings.scanner.editor"
+        :options="editorOptions"
+        :aria-label="t('app.settings.scanner.specified_editor.title')"
+        :disabled="!specifiedEditorEnabled"
+        min-width="160px"
+        content-width="210px"
+      />
+    </div>
+
+    <div min-h-42px flex items-center justify-between gap-12px>
+      <div min-w-0 flex flex-col gap-3px>
+        <strong text-13px font-620 break-anywhere>{{ t('app.settings.scanner.name_pattern.title') }}</strong>
+        <span text-12px break-anywhere light:color="$gray-6" dark:color="$gray-8">{{ t('app.settings.scanner.name_pattern.desc') }}</span>
+      </div>
+      <input
+        v-model="settings.scanner.namePattern"
+        class="path-input"
+        w-180px
+        spellcheck="false"
+        :aria-label="t('app.settings.scanner.name_pattern.title')"
+      >
+    </div>
+
+    <div
+      min-h-42px flex flex-wrap items-center justify-between
+      gap-12px
+    >
+      <div min-w-0 flex-1 flex flex-col gap-3px>
+        <strong text-13px font-620 break-anywhere>{{ t('app.settings.scanner.history.title') }}</strong>
+        <span text-12px break-anywhere light:color="$gray-6" dark:color="$gray-8">{{ t('app.settings.scanner.history.desc') }}</span>
+      </div>
+      <button class="danger-button" ml-auto type="button" @click="emit('update:showClearConfirm', true)">
+        {{ t('app.settings.scanner.history.clear') }}
+      </button>
+    </div>
+  </section>
+</template>
diff --git a/src/views/SettingsView/pages/AutoProjectScanner/composables/useAutoProjectScanner.ts b/src/views/SettingsView/pages/AutoProjectScanner/composables/useAutoProjectScanner.ts
new file mode 100644
index 0000000..c6d3485
--- /dev/null
+++ b/src/views/SettingsView/pages/AutoProjectScanner/composables/useAutoProjectScanner.ts
@@ -0,0 +1,337 @@
+import { useI18n } from 'vue-i18n'
+
+import type { CliHistoryScannerEditor, CodeEditorEnum, VscodeHistoryScannerEditor } from '~/constants/codeEditor'
+import {
+  codeEditorOrder,
+  codeEditors,
+  isCliHistoryScannerEditor,
+  isVscodeHistoryScannerEditor,
+  projectHistoryScannerEditors,
+  scannerEditorLabels,
+} from '~/constants/codeEditor'
+import { useProjectScannerStore } from '~/stores/projectScannerStore'
+import type { CliEditorScannerConfig, RecentEditorScannerConfig } from '~/stores/settingsStore'
+import { useSettingsStore } from '~/stores/settingsStore'
+import { useDelayedBusyKeys } from '~/utils/useDelayedBusy'
+
+export type ScannerSourceKey = VscodeHistoryScannerEditor | CliHistoryScannerEditor
+export type ScannerDetectKey = 'jetbrains' | ScannerSourceKey
+
+export interface VscodeScannerSourceRow {
+  key: VscodeHistoryScannerEditor
+  kind: 'vscode-history'
+  label: string
+  config: RecentEditorScannerConfig
+}
+
+export interface CliScannerSourceRow {
+  key: CliHistoryScannerEditor
+  kind: 'cli-history'
+  label: string
+  config: CliEditorScannerConfig
+}
+
+export type ScannerSourceRow = VscodeScannerSourceRow | CliScannerSourceRow
+
+export function useAutoProjectScanner() {
+  const settings = useSettingsStore()
+  const projectScannerStore = useProjectScannerStore()
+  const { t } = useI18n()
+  const showClearConfirm = ref(false)
+  const rootRowRefs = new Map<string, HTMLElement>()
+  const detectingScannerKeys = ref<Set<ScannerDetectKey>>(new Set())
+  const {
+    visibleKeys: visibleDetectingScannerKeys,
+    setKeyBusy: setVisibleDetectingScannerKey,
+  } = useDelayedBusyKeys<ScannerDetectKey>({ delay: 220, minDuration: 320 })
+
+  const editorOptions = computed<Array<{ value: CodeEditorEnum, label: string }>>(() =>
+    codeEditorOrder.map(editor => ({
+      value: editor,
+      label: codeEditors[editor].label,
+    })),
+  )
+
+  const rootOpenModeOptions = computed(() => [
+    {
+      value: 'language',
+      label: t('app.settings.scanner.open_mode.language'),
+      tooltip: t('app.settings.scanner.open_mode_help.language'),
+    },
+    {
+      value: 'specified',
+      label: t('app.settings.scanner.open_mode.specified'),
+      tooltip: t('app.settings.scanner.open_mode_help.specified'),
+    },
+  ])
+
+  const ideOpenModeOptions = computed(() => [
+    {
+      value: 'source',
+      label: t('app.settings.scanner.open_mode.source'),
+      tooltip: t('app.settings.scanner.open_mode_help.source'),
+    },
+    {
+      value: 'language',
+      label: t('app.settings.scanner.open_mode.language'),
+      tooltip: t('app.settings.scanner.open_mode_help.ide_language'),
+    },
+    {
+      value: 'specified',
+      label: t('app.settings.scanner.open_mode.specified'),
+      tooltip: t('app.settings.scanner.open_mode_help.specified'),
+    },
+  ])
+
+  const specifiedEditorEnabled = computed(() =>
+    settings.scanner.rootOpenMode === 'specified' || settings.scanner.ideOpenMode === 'specified',
+  )
+
+  const scannerSourceRows = computed<ScannerSourceRow[]>(() =>
+    projectHistoryScannerEditors
+      .map((editor) => {
+        const label = scannerEditorLabels[editor] || codeEditors[editor].label
+        if (isVscodeHistoryScannerEditor(editor)) {
+          return {
+            key: editor,
+            kind: 'vscode-history',
+            label,
+            config: settings.scanner.recentEditors[editor],
+          }
+        }
+        if (isCliHistoryScannerEditor(editor)) {
+          return {
+            key: editor,
+            kind: 'cli-history',
+            label,
+            config: settings.scanner.cliEditors[editor],
+          }
+        }
+        return null
+      })
+      .filter((row): row is ScannerSourceRow => row !== null),
+  )
+
+  async function addProjectRoot() {
+    if (!settings.scanner.rootsEnabled)
+      return
+
+    const selectedPaths = await window.api.openFolderDialog()
+    if (!selectedPaths.length)
+      return
+
+    const roots = Array.from(new Set([...settings.scanner.roots, ...selectedPaths])).sort()
+    settings.scanner.roots.splice(0, settings.scanner.roots.length, ...roots)
+    settings.scanner.rootsEnabled = true
+  }
+
+  function removeRoot(root: string) {
+    const index = settings.scanner.roots.indexOf(root)
+    if (index >= 0)
+      settings.scanner.roots.splice(index, 1)
+  }
+
+  function setRootRowRef(root: string, element: unknown) {
+    if (element instanceof HTMLElement) {
+      rootRowRefs.set(root, element)
+      return
+    }
+
+    rootRowRefs.delete(root)
+  }
+
+  function focusRootRow(root: string | undefined, preferRemoveButton = false) {
+    if (!root)
+      return
+
+    const row = rootRowRefs.get(root)
+    if (!row)
+      return
+
+    const target = preferRemoveButton
+      ? row.querySelector<HTMLButtonElement>('[data-root-action="remove"]:not(:disabled)') || row
+      : row
+
+    target.focus({ preventScroll: true })
+    target.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+  }
+
+  function focusRootRowByOffset(root: string, offset: number, preferRemoveButton = false) {
+    const roots = settings.scanner.roots
+    const currentIndex = roots.indexOf(root)
+    if (currentIndex < 0)
+      return
+
+    const targetIndex = Math.max(0, Math.min(roots.length - 1, currentIndex + offset))
+    focusRootRow(roots[targetIndex], preferRemoveButton)
+  }
+
+  function focusRootRowAtEdge(edge: 'start' | 'end', preferRemoveButton = false) {
+    focusRootRow(edge === 'start' ? settings.scanner.roots[0] : settings.scanner.roots.at(-1), preferRemoveButton)
+  }
+
+  async function removeFocusedRoot(root: string) {
+    const roots = settings.scanner.roots
+    const index = roots.indexOf(root)
+    if (index < 0)
+      return
+
+    const nextRoot = roots[index + 1] || roots[index - 1]
+    removeRoot(root)
+    await nextTick()
+    focusRootRow(nextRoot)
+  }
+
+  function handleRootRowKeydown(root: string, event: KeyboardEvent) {
+    if (!settings.scanner.rootsEnabled || event.defaultPrevented)
+      return
+
+    const preferRemoveButton = event.target instanceof HTMLElement
+      && !!event.target.closest('[data-root-action="remove"]')
+
+    switch (event.key) {
+      case 'ArrowUp':
+        event.preventDefault()
+        event.stopPropagation()
+        focusRootRowByOffset(root, -1, preferRemoveButton)
+        break
+      case 'ArrowDown':
+        event.preventDefault()
+        event.stopPropagation()
+        focusRootRowByOffset(root, 1, preferRemoveButton)
+        break
+      case 'Home':
+        event.preventDefault()
+        event.stopPropagation()
+        focusRootRowAtEdge('start', preferRemoveButton)
+        break
+      case 'End':
+        event.preventDefault()
+        event.stopPropagation()
+        focusRootRowAtEdge('end', preferRemoveButton)
+        break
+      case 'Delete':
+        event.preventDefault()
+        event.stopPropagation()
+        void removeFocusedRoot(root)
+        break
+    }
+  }
+
+  async function browseJetbrainsRoot() {
+    if (!settings.scanner.ideEnabled || !settings.scanner.jetbrains.enabled)
+      return
+
+    const selectedPaths = await window.api.openFolderDialog()
+    if (selectedPaths[0])
+      settings.scanner.jetbrains.configRootPath = selectedPaths[0]
+  }
+
+  function getScannerSourcePath(row: ScannerSourceRow) {
+    return row.kind === 'vscode-history'
+      ? row.config.stateDbPath
+      : row.config.historyRootPath
+  }
+
+  function setScannerSourcePath(row: ScannerSourceRow, value: string) {
+    if (row.kind === 'vscode-history') {
+      row.config.stateDbPath = value
+      return
+    }
+    row.config.historyRootPath = value
+  }
+
+  function handleScannerSourcePathInput(row: ScannerSourceRow, event: Event) {
+    const target = event.target
+    if (target instanceof HTMLInputElement)
+      setScannerSourcePath(row, target.value)
+  }
+
+  function getScannerSourcePlaceholder(row: ScannerSourceRow) {
+    return row.kind === 'vscode-history'
+      ? t('app.settings.scanner.recent_editor.placeholder', { editor: row.label })
+      : t('app.settings.scanner.cli_editor.placeholder', { editor: row.label })
+  }
+
+  async function browseScannerSource(row: ScannerSourceRow) {
+    if (!settings.scanner.ideEnabled || !row.config.enabled)
+      return
+
+    const selectedPaths = row.kind === 'vscode-history'
+      ? await window.api.openFileDialog({
+          fileTypes: [{ name: t('app.dialog.file_types.editor_history_database'), extensions: ['vscdb'] }],
+        })
+      : await window.api.openFolderDialog()
+
+    if (selectedPaths[0])
+      setScannerSourcePath(row, selectedPaths[0])
+  }
+
+  async function detectJetbrainsRoot() {
+    if (!settings.scanner.ideEnabled || !settings.scanner.jetbrains.enabled || detectingScannerKeys.value.has('jetbrains'))
+      return
+
+    detectingScannerKeys.value = new Set([...detectingScannerKeys.value, 'jetbrains'])
+    setVisibleDetectingScannerKey('jetbrains', true)
+    try {
+      const detectedPath = await window.api.detectJetBrainsConfigRootPath()
+      if (detectedPath)
+        settings.scanner.jetbrains.configRootPath = detectedPath
+    }
+    finally {
+      const next = new Set(detectingScannerKeys.value)
+      next.delete('jetbrains')
+      detectingScannerKeys.value = next
+      setVisibleDetectingScannerKey('jetbrains', false)
+    }
+  }
+
+  async function detectScannerSource(row: ScannerSourceRow) {
+    if (!settings.scanner.ideEnabled || !row.config.enabled || detectingScannerKeys.value.has(row.key))
+      return
+
+    detectingScannerKeys.value = new Set([...detectingScannerKeys.value, row.key])
+    setVisibleDetectingScannerKey(row.key, true)
+    try {
+      const detectedPath = row.kind === 'vscode-history'
+        ? await window.api.detectRecentEditorStateDbPath(row.key)
+        : await window.api.detectCliHistoryRootPath(row.key)
+      if (detectedPath)
+        setScannerSourcePath(row, detectedPath)
+    }
+    finally {
+      const next = new Set(detectingScannerKeys.value)
+      next.delete(row.key)
+      detectingScannerKeys.value = next
+      setVisibleDetectingScannerKey(row.key, false)
+    }
+  }
+
+  function clearScanHistory() {
+    projectScannerStore.clearProjectScannerData()
+    showClearConfirm.value = false
+  }
+
+  return {
+    addProjectRoot,
+    browseJetbrainsRoot,
+    browseScannerSource,
+    clearScanHistory,
+    detectJetbrainsRoot,
+    detectingScannerKeys,
+    detectScannerSource,
+    editorOptions,
+    getScannerSourcePath,
+    getScannerSourcePlaceholder,
+    handleRootRowKeydown,
+    handleScannerSourcePathInput,
+    ideOpenModeOptions,
+    removeRoot,
+    rootOpenModeOptions,
+    scannerSourceRows,
+    setRootRowRef,
+    showClearConfirm,
+    specifiedEditorEnabled,
+    visibleDetectingScannerKeys,
+  }
+}
diff --git a/src/views/SettingsView/pages/Data.vue b/src/views/SettingsView/pages/Data.vue
index 771b5cf..e94c86e 100644
--- a/src/views/SettingsView/pages/Data.vue
+++ b/src/views/SettingsView/pages/Data.vue
@@ -222,7 +222,10 @@ async function pullWebDavData() {
     <SettingsRow
       :title="t('app.settings.data.projects.title')"
     >
-      <div class="row-actions">
+      <div
+        shrink-0 flex flex-wrap items-center justify-end
+        gap-7px
+      >
         <button class="ghost-button" type="button" @click="importProjects">
           <span class="i-custom:import" />
           {{ t('app.settings.data.projects.import') }}
@@ -238,50 +241,57 @@ async function pullWebDavData() {
       :title="t('app.settings.data.webdav.title')"
       align="start"
     >
-      <div class="webdav-panel">
-        <div class="webdav-fields">
-          <label class="field-control wide">
-            <span>{{ t('app.settings.data.webdav.server') }}</span>
+      <div
+        min-w-0 w-520px max-w-full flex flex-col
+        gap-10px
+      >
+        <div grid gap-9px grid-cols="[repeat(2,minmax(0,1fr))]">
+          <label min-w-0 flex flex-col gap-5px col-span-2>
+            <span text-12px color="$ui-foreground" break-anywhere>{{ t('app.settings.data.webdav.server') }}</span>
             <input
               v-model="settings.webdav.endpoint"
               class="path-input"
+              w-full
               spellcheck="false"
               :aria-label="t('app.settings.data.webdav.server')"
               :placeholder="t('app.settings.data.webdav.server_placeholder')"
             >
           </label>
-          <label class="field-control wide">
-            <span>{{ t('app.settings.data.webdav.remote_path') }}</span>
+          <label min-w-0 flex flex-col gap-5px col-span-2>
+            <span text-12px color="$ui-foreground" break-anywhere>{{ t('app.settings.data.webdav.remote_path') }}</span>
             <input
               v-model="settings.webdav.remotePath"
               class="path-input"
+              w-full
               spellcheck="false"
               :aria-label="t('app.settings.data.webdav.remote_path')"
               :placeholder="t('app.settings.data.webdav.remote_path_placeholder')"
             >
           </label>
-          <label class="field-control">
-            <span>{{ t('app.settings.data.webdav.account') }}</span>
+          <label min-w-0 flex flex-col gap-5px>
+            <span text-12px color="$ui-foreground" break-anywhere>{{ t('app.settings.data.webdav.account') }}</span>
             <input
               v-model="settings.webdav.username"
               class="path-input"
+              w-full
               spellcheck="false"
               :aria-label="t('app.settings.data.webdav.account')"
               :placeholder="t('app.settings.data.webdav.account')"
             >
           </label>
-          <label class="field-control">
-            <span>{{ t('app.settings.data.webdav.password') }}</span>
+          <label min-w-0 flex flex-col gap-5px>
+            <span text-12px color="$ui-foreground" break-anywhere>{{ t('app.settings.data.webdav.password') }}</span>
             <input
               v-model="settings.webdav.password"
               class="path-input"
+              w-full
               type="password"
               :aria-label="t('app.settings.data.webdav.password')"
               :placeholder="t('app.settings.data.webdav.password')"
             >
           </label>
         </div>
-        <div class="webdav-actions">
+        <div flex flex-wrap items-center justify-end gap-7px>
           <button
             class="ghost-button"
             type="button"
@@ -311,7 +321,8 @@ async function pullWebDavData() {
           </button>
         </div>
         <p
-          class="webdav-status"
+          class="status-message"
+          m-0 min-h-16px text-right text-12px lh-16px
           :class="[webdavStatus?.type || 'neutral', { empty: !webdavStatus }]"
           :aria-hidden="!webdavStatus"
         >
@@ -321,80 +332,3 @@ async function pullWebDavData() {
     </SettingsRow>
   </SettingsPage>
 </template>
-
-<style lang="scss" scoped>
-.row-actions {
-  @apply shrink-0 flex flex-wrap items-center justify-end gap-7px;
-}
-
-.webdav-panel {
-  @apply min-w-0 w-520px max-w-full flex flex-col gap-10px;
-}
-
-.webdav-fields {
-  @apply grid gap-9px;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-.field-control {
-  @apply min-w-0 flex flex-col gap-5px;
-
-  span {
-    @apply text-12px color-$ui-foreground;
-    overflow-wrap: anywhere;
-  }
-}
-
-.field-control.wide {
-  @apply col-span-2;
-}
-
-.path-input {
-  @apply w-full;
-}
-
-.webdav-actions {
-  @apply flex flex-wrap items-center justify-end gap-7px;
-}
-
-.webdav-status {
-  @apply m-0 min-h-16px text-right text-12px lh-16px;
-  overflow-wrap: anywhere;
-
-  &.empty {
-    visibility: hidden;
-  }
-
-  &.neutral {
-    @apply color-$ui-muted-foreground;
-  }
-
-  &.info {
-    @apply color-$ui-muted-foreground;
-  }
-
-  &.success {
-    color: color-mix(in srgb, var(--green-5) 90%, var(--ui-foreground));
-  }
-
-  &.warning {
-    color: color-mix(in srgb, var(--yellow-4) 90%, var(--ui-foreground));
-  }
-
-  &.error {
-    color: color-mix(in srgb, var(--red-5) 92%, var(--ui-foreground));
-  }
-}
-
-:global(.dark) .webdav-status.success {
-  color: color-mix(in srgb, var(--green-7) 86%, var(--gray-14));
-}
-
-:global(.dark) .webdav-status.warning {
-  color: color-mix(in srgb, var(--yellow-7) 86%, var(--gray-14));
-}
-
-:global(.dark) .webdav-status.error {
-  color: color-mix(in srgb, var(--red-7) 86%, var(--gray-14));
-}
-</style>
diff --git a/src/views/SettingsView/pages/Ides.vue b/src/views/SettingsView/pages/Ides.vue
index 2ff7e2e..c3f490a 100644
--- a/src/views/SettingsView/pages/Ides.vue
+++ b/src/views/SettingsView/pages/Ides.vue
@@ -183,30 +183,38 @@ function quoteCommand(command: string) {
 </script>
 
 <template>
-  <div class="settings-page">
-    <header class="page-header">
-      <h2>{{ t('app.settings.editors.title') }}</h2>
+  <div class="settings-page" flex flex-col gap-12px>
+    <header class="page-header" flex items-end justify-between gap-10px>
+      <h2 m-0 text-16px font-650 break-anywhere>
+        {{ t('app.settings.editors.title') }}
+      </h2>
     </header>
 
-    <div class="editor-groups">
-      <section class="editor-group">
-        <h3>{{ t('app.settings.editors.terminal_launcher') }}</h3>
+    <div flex flex-col gap-22px>
+      <section min-w-0 flex flex-col gap-8px>
+        <h3 m-0 text-13px font-650 break-anywhere>
+          {{ t('app.settings.editors.terminal_launcher') }}
+        </h3>
 
-        <div class="terminal-row">
-          <div class="editor-name">
-            <span class="i-lucide:square-terminal" />
-            <div>
-              <strong>{{ t('app.settings.editors.terminal_command') }}</strong>
-              <span :title="terminalCommandHint">
+        <div
+          class="terminal-row"
+          min-w-0 grid items-center gap-12px pl-18px
+        >
+          <div min-w-0 flex items-center gap-9px>
+            <span class="i-lucide:square-terminal" shrink-0 text-18px />
+            <div min-w-0 flex flex-col gap-2px>
+              <strong truncate text-13px font-620>{{ t('app.settings.editors.terminal_command') }}</strong>
+              <span truncate text-11px color="$ui-muted-foreground" :title="terminalCommandHint">
                 {{ terminalCommandHint }}
               </span>
             </div>
           </div>
 
-          <div class="command-input-wrap">
+          <div relative min-w-0>
             <input
               v-model="settings.terminalCommand"
               class="path-input"
+              w-full pr-30px
               spellcheck="false"
               :aria-label="t('app.settings.editors.terminal_command')"
               :placeholder="t('app.settings.editors.terminal_command_placeholder')"
@@ -229,30 +237,34 @@ function quoteCommand(command: string) {
       <section
         v-for="group in commandGroups"
         :key="group.label"
-        class="editor-group"
+        min-w-0 flex flex-col gap-8px
       >
-        <h3>{{ group.label }}</h3>
+        <h3 m-0 text-13px font-650 break-anywhere>
+          {{ group.label }}
+        </h3>
 
         <div
           v-for="option in group.options"
           :key="option.key"
           :ref="el => setEditorRowRef(option.key, el)"
           class="editor-row"
+          min-w-0 grid items-center gap-12px pl-18px
           @keydown="handleEditorRowKeydown(option, $event)"
         >
-          <div class="editor-name">
-            <span class="ide-icon" :class="[option.icon, { 'monochrome-editor-icon': option.monochromeIcon }]" />
-            <div>
-              <strong :title="option.label">{{ option.label }}</strong>
-              <span :title="editorDescription(option) || editorNames(option)">{{ editorDescription(option) || editorNames(option) }}</span>
+          <div min-w-0 flex items-center gap-9px>
+            <span class="ide-icon" shrink-0 text-18px :class="[option.icon, { 'monochrome-editor-icon': option.monochromeIcon }]" />
+            <div min-w-0 flex flex-col gap-2px>
+              <strong truncate text-13px font-620 :title="option.label">{{ option.label }}</strong>
+              <span truncate text-11px color="$ui-muted-foreground" :title="editorDescription(option) || editorNames(option)">{{ editorDescription(option) || editorNames(option) }}</span>
             </div>
           </div>
 
-          <div class="command-area">
-            <div class="command-input-wrap">
+          <div class="command-area" min-w-0 grid items-center gap-7px>
+            <div relative min-w-0>
               <input
                 v-model="settings.codeEditorsPath[option.key]"
                 class="path-input"
+                w-full pr-30px
                 data-editor-control="command"
                 spellcheck="false"
                 :aria-label="t('app.settings.editors.command_label', { editor: option.label })"
@@ -273,9 +285,11 @@ function quoteCommand(command: string) {
 
             <label
               class="terminal-toggle"
+              min-w-0 flex items-center gap-7px text-12px
+              color="$ui-muted-foreground" cursor-pointer
               :title="t('app.settings.editors.terminal_desc')"
             >
-              <span>{{ t('app.settings.editors.terminal') }}</span>
+              <span whitespace-nowrap>{{ t('app.settings.editors.terminal') }}</span>
               <UiSwitch
                 v-model="settings.codeEditorsOpenInTerminal[option.key]"
                 data-editor-control="terminal"
@@ -285,6 +299,7 @@ function quoteCommand(command: string) {
 
             <div
               class="command-actions"
+              flex items-center gap-5px
               role="toolbar"
               aria-orientation="horizontal"
               :aria-label="option.label"
@@ -299,7 +314,7 @@ function quoteCommand(command: string) {
                 :disabled="detectingKeys.has(option.key)"
                 @click="detectEditor(option)"
               >
-                <span class="i-lucide:wand-sparkles" :class="{ spinning: visibleDetectingKeys.has(option.key) }" />
+                <span class="i-lucide:wand-sparkles" :class="{ 'is-spinning': visibleDetectingKeys.has(option.key) }" />
               </button>
               <button
                 class="icon-button"
@@ -320,93 +335,15 @@ function quoteCommand(command: string) {
 </template>
 
 <style lang="scss" scoped>
-.settings-page {
-  @apply flex flex-col gap-12px;
-}
-
-.page-header {
-  @apply flex items-end justify-between gap-10px;
-
-  h2 {
-    @apply m-0 text-16px font-650;
-    overflow-wrap: anywhere;
-  }
-}
-
-.editor-groups {
-  @apply flex flex-col gap-22px;
-}
-
-.editor-group {
-  @apply min-w-0 flex flex-col gap-8px;
-
-  h3 {
-    @apply m-0 text-13px font-650;
-    overflow-wrap: anywhere;
-  }
-}
-
 .editor-row,
 .terminal-row {
-  @apply min-w-0 grid items-center gap-12px pl-18px;
   grid-template-columns: minmax(180px, 250px) minmax(0, 1fr);
 }
 
-.editor-name {
-  @apply min-w-0 flex items-center gap-9px;
-
-  > span {
-    @apply shrink-0 text-18px;
-  }
-
-  div {
-    @apply min-w-0 flex flex-col gap-2px;
-  }
-
-  strong {
-    @apply truncate text-13px font-620;
-  }
-
-  div span {
-    @apply truncate text-11px color-$ui-muted-foreground;
-  }
-}
-
 .command-area {
-  @apply min-w-0 grid items-center gap-7px;
   grid-template-columns: minmax(0, 1fr) max-content max-content;
 }
 
-.command-input-wrap {
-  @apply relative min-w-0;
-}
-
-.path-input {
-  @apply w-full pr-30px;
-}
-
-.terminal-toggle {
-  @apply min-w-0 flex items-center gap-7px text-12px color-$ui-muted-foreground cursor-pointer;
-
-  span {
-    @apply whitespace-nowrap;
-  }
-}
-
-.command-actions {
-  @apply flex items-center gap-5px;
-}
-
-.spinning {
-  animation: spin-detect 0.8s linear infinite;
-}
-
-@keyframes spin-detect {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 @media (max-width: 900px) {
   .editor-row,
   .terminal-row,
diff --git a/unocss.config.ts b/unocss.config.ts
index 13e0525..a5a8dce 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -25,21 +25,6 @@ export default defineConfig({
       },
     }),
   ],
-  shortcuts: {
-    // Typography
-    'text-h1': 'text-20px lh-24px font-semibold',
-    'text-h2': 'text-16px lh-20px font-semibold',
-    'text-default': 'text-13px lh-16px font-medium',
-    'text-default-semibold': 'text-13px lh-16px font-semibold',
-    'text-paragraph': 'text-13px lh-18px font-medium',
-    'text-medium': 'text-12px lh-16px font-medium',
-    'text-medium-semibold': 'text-12px lh-16px font-semibold',
-    // Color
-    'text-primary': 'light:color-$gray-1 dark:color-$gray-12',
-    'text-secondary': 'color-$gray-7',
-    // Layout
-    'settings-section': 'pl-30px',
-  },
   safelist: editorIconClasses,
   transformers: [
     transformerDirectives(),