Merge branch 'main' into feat/plugin-system

# Conflicts:
#	src/App.tsx
#	src/components/app/MobileNav.tsx
#	src/components/main-content/view/MainContent.tsx
#	src/components/main-content/view/subcomponents/MainContentTabSwitcher.tsx
#	src/components/main-content/view/subcomponents/MainContentTitle.tsx
#	src/components/settings/view/SettingsMainTabs.tsx

src/components/main-content/view/subcomponents/MainContentHeader.tsx

@@ -1,7 +1,7 @@
+import type { MainContentHeaderProps } from '../../types/types';
 import MobileMenuButton from './MobileMenuButton';
 import MainContentTabSwitcher from './MainContentTabSwitcher';
 import MainContentTitle from './MainContentTitle';
-import type { MainContentHeaderProps } from '../../types/types';
 
 export default function MainContentHeader({
   activeTab,
@@ -13,9 +13,9 @@ export default function MainContentHeader({
   onMenuClick,
 }: MainContentHeaderProps) {
   return (
-    <div className="bg-background border-b border-border/60 px-3 py-1.5 sm:px-4 sm:py-2 pwa-header-safe flex-shrink-0">
+    <div className="pwa-header-safe flex-shrink-0 border-b border-border/60 bg-background px-3 py-1.5 sm:px-4 sm:py-2">
       <div className="flex items-center justify-between gap-3">
-        <div className="flex items-center gap-2 min-w-0 flex-1">
+        <div className="flex min-w-0 flex-1 items-center gap-2">
           {isMobile && <MobileMenuButton onMenuClick={onMenuClick} />}
           <MainContentTitle
             activeTab={activeTab}
@@ -25,7 +25,7 @@ export default function MainContentHeader({
           />
         </div>
 
-        <div className="flex-shrink-0 hidden sm:block">
+        <div className="hidden flex-shrink-0 sm:block">
           <MainContentTabSwitcher
             activeTab={activeTab}
             setActiveTab={setActiveTab}

src/components/main-content/view/subcomponents/MainContentStateView.tsx

@@ -1,7 +1,7 @@
 import { Folder } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import MobileMenuButton from './MobileMenuButton';
 import type { MainContentStateViewProps } from '../../types/types';
+import MobileMenuButton from './MobileMenuButton';
 
 export default function MainContentStateView({ mode, isMobile, onMenuClick }: MainContentStateViewProps) {
   const { t } = useTranslation();
@@ -9,19 +9,19 @@ export default function MainContentStateView({ mode, isMobile, onMenuClick }: Ma
   const isLoading = mode === 'loading';
 
   return (
-    <div className="h-full flex flex-col">
+    <div className="flex h-full flex-col">
       {isMobile && (
-        <div className="bg-background/80 backdrop-blur-sm border-b border-border/50 p-2 sm:p-3 pwa-header-safe flex-shrink-0">
+        <div className="pwa-header-safe flex-shrink-0 border-b border-border/50 bg-background/80 p-2 backdrop-blur-sm sm:p-3">
           <MobileMenuButton onMenuClick={onMenuClick} compact />
         </div>
       )}
 
       {isLoading ? (
-        <div className="flex-1 flex items-center justify-center">
+        <div className="flex flex-1 items-center justify-center">
           <div className="text-center text-muted-foreground">
-            <div className="w-10 h-10 mx-auto mb-4">
+            <div className="mx-auto mb-4 h-10 w-10">
               <div
-                className="w-full h-full rounded-full border-[3px] border-muted border-t-primary"
+                className="h-full w-full rounded-full border-[3px] border-muted border-t-primary"
                 style={{
                   animation: 'spin 1s linear infinite',
                   WebkitAnimation: 'spin 1s linear infinite',
@@ -29,19 +29,19 @@ export default function MainContentStateView({ mode, isMobile, onMenuClick }: Ma
                 }}
               />
             </div>
-            <h2 className="text-lg font-semibold text-foreground mb-1">{t('mainContent.loading')}</h2>
+            <h2 className="mb-1 text-lg font-semibold text-foreground">{t('mainContent.loading')}</h2>
             <p className="text-sm">{t('mainContent.settingUpWorkspace')}</p>
           </div>
         </div>
       ) : (
-        <div className="flex-1 flex items-center justify-center">
-          <div className="text-center max-w-md mx-auto px-6">
-            <div className="w-14 h-14 mx-auto mb-5 bg-muted/50 rounded-2xl flex items-center justify-center">
-              <Folder className="w-7 h-7 text-muted-foreground" />
+        <div className="flex flex-1 items-center justify-center">
+          <div className="mx-auto max-w-md px-6 text-center">
+            <div className="mx-auto mb-5 flex h-14 w-14 items-center justify-center rounded-2xl bg-muted/50">
+              <Folder className="h-7 w-7 text-muted-foreground" />
             </div>
-            <h2 className="text-xl font-semibold mb-2 text-foreground">{t('mainContent.chooseProject')}</h2>
-            <p className="text-sm text-muted-foreground mb-5 leading-relaxed">{t('mainContent.selectProjectDescription')}</p>
-            <div className="bg-primary/5 rounded-xl p-3.5 border border-primary/10">
+            <h2 className="mb-2 text-xl font-semibold text-foreground">{t('mainContent.chooseProject')}</h2>
+            <p className="mb-5 text-sm leading-relaxed text-muted-foreground">{t('mainContent.selectProjectDescription')}</p>
+            <div className="rounded-xl border border-primary/10 bg-primary/5 p-3.5">
               <p className="text-sm text-primary">
                 <strong>{t('mainContent.tip')}:</strong> {isMobile ? t('mainContent.createProjectMobile') : t('mainContent.createProjectDesktop')}
               </p>

src/components/main-content/view/subcomponents/MainContentTabSwitcher.tsx

@@ -1,15 +1,8 @@
-import {
-  MessageSquare,
-  Terminal,
-  Folder,
-  GitBranch,
-  ClipboardCheck,
-  type LucideIcon,
-} from 'lucide-react';
-import Tooltip from '../../../Tooltip';
-import type { AppTab } from '../../../../types/app';
+import { MessageSquare, Terminal, Folder, GitBranch, ClipboardCheck, type LucideIcon } from 'lucide-react';
 import type { Dispatch, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Tooltip } from '../../../../shared/view/ui';
+import type { AppTab } from '../../../../types/app';
 import { usePlugins } from '../../../../contexts/PluginsContext';
 import PluginIcon from '../../../plugins/PluginIcon';
 
@@ -73,7 +66,7 @@ export default function MainContentTabSwitcher({
   const tabs: TabDefinition[] = [...builtInTabs, ...pluginTabs];
 
   return (
-    <div className="inline-flex items-center bg-muted/60 rounded-lg p-[3px] gap-[2px]">
+    <div className="inline-flex items-center gap-[2px] rounded-lg bg-muted/60 p-[3px]">
       {tabs.map((tab) => {
         const isActive = tab.id === activeTab;
         const displayLabel = tab.kind === 'builtin' ? t(tab.labelKey) : tab.label;
@@ -82,19 +75,19 @@ export default function MainContentTabSwitcher({
           <Tooltip key={tab.id} content={displayLabel} position="bottom">
             <button
               onClick={() => setActiveTab(tab.id)}
-              className={`relative flex items-center gap-1.5 px-2.5 py-[5px] text-sm font-medium rounded-md transition-all duration-150 ${
+              className={`relative flex items-center gap-1.5 rounded-md px-2.5 py-[5px] text-sm font-medium transition-all duration-150 ${
                 isActive
                   ? 'bg-background text-foreground shadow-sm'
                   : 'text-muted-foreground hover:text-foreground'
               }`}
             >
               {tab.kind === 'builtin' ? (
-                <tab.icon className="w-3.5 h-3.5" strokeWidth={isActive ? 2.2 : 1.8} />
+                <tab.icon className="h-3.5 w-3.5" strokeWidth={isActive ? 2.2 : 1.8} />
               ) : (
                 <PluginIcon
                   pluginName={tab.pluginName}
                   iconFile={tab.iconFile}
-                  className="w-3.5 h-3.5 flex items-center justify-center [&>svg]:w-full [&>svg]:h-full"
+                  className="flex h-3.5 w-3.5 items-center justify-center [&>svg]:h-full [&>svg]:w-full"
                 />
               )}
               <span className="hidden lg:inline">{displayLabel}</span>

src/components/main-content/view/subcomponents/MainContentTitle.tsx

@@ -55,32 +55,32 @@ export default function MainContentTitle({
   const showChatNewSession = activeTab === 'chat' && !selectedSession;
 
   return (
-    <div className="min-w-0 flex items-center gap-2 flex-1 overflow-x-auto scrollbar-hide">
+    <div className="scrollbar-hide flex min-w-0 flex-1 items-center gap-2 overflow-x-auto">
       {showSessionIcon && (
-        <div className="w-5 h-5 flex-shrink-0 flex items-center justify-center">
-          <SessionProviderLogo provider={selectedSession?.__provider} className="w-4 h-4" />
+        <div className="flex h-5 w-5 flex-shrink-0 items-center justify-center">
+          <SessionProviderLogo provider={selectedSession?.__provider} className="h-4 w-4" />
         </div>
       )}
 
       <div className="min-w-0 flex-1">
         {activeTab === 'chat' && selectedSession ? (
           <div className="min-w-0">
-            <h2 className="text-sm font-semibold text-foreground whitespace-nowrap overflow-x-auto scrollbar-hide leading-tight">
+            <h2 className="scrollbar-hide overflow-x-auto whitespace-nowrap text-sm font-semibold leading-tight text-foreground">
               {getSessionTitle(selectedSession)}
             </h2>
-            <div className="text-[11px] text-muted-foreground truncate leading-tight">{selectedProject.displayName}</div>
+            <div className="truncate text-[11px] leading-tight text-muted-foreground">{selectedProject.displayName}</div>
           </div>
         ) : showChatNewSession ? (
           <div className="min-w-0">
-            <h2 className="text-base font-semibold text-foreground leading-tight">{t('mainContent.newSession')}</h2>
-            <div className="text-xs text-muted-foreground truncate leading-tight">{selectedProject.displayName}</div>
+            <h2 className="text-base font-semibold leading-tight text-foreground">{t('mainContent.newSession')}</h2>
+            <div className="truncate text-xs leading-tight text-muted-foreground">{selectedProject.displayName}</div>
           </div>
         ) : (
           <div className="min-w-0">
-            <h2 className="text-sm font-semibold text-foreground leading-tight">
+            <h2 className="text-sm font-semibold leading-tight text-foreground">
               {getTabTitle(activeTab, shouldShowTasksTab, t, pluginDisplayName)}
             </h2>
-            <div className="text-[11px] text-muted-foreground truncate leading-tight">{selectedProject.displayName}</div>
+            <div className="truncate text-[11px] leading-tight text-muted-foreground">{selectedProject.displayName}</div>
           </div>
         )}
       </div>

src/components/main-content/view/subcomponents/MobileMenuButton.tsx

@@ -15,7 +15,7 @@ export default function MobileMenuButton({ onMenuClick, compact = false }: Mobil
       className={buttonClasses}
       aria-label="Open menu"
     >
-      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
       </svg>
     </button>

src/components/main-content/view/subcomponents/TaskMasterPanel.tsx

@@ -1,206 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import TaskList from '../../../TaskList';
-import TaskDetail from '../../../TaskDetail';
-import PRDEditor from '../../../PRDEditor';
-import { useTaskMaster } from '../../../../contexts/TaskMasterContext';
-import { api } from '../../../../utils/api';
-import type { Project } from '../../../../types/app';
-import type { PrdFile, TaskMasterPanelProps, TaskMasterTask, TaskSelection } from '../../types/types';
-
-const AnyTaskList = TaskList as any;
-const AnyTaskDetail = TaskDetail as any;
-const AnyPRDEditor = PRDEditor as any;
-
-type TaskMasterContextValue = {
-  tasks?: TaskMasterTask[];
-  currentProject?: Project | null;
-  refreshTasks?: (() => void) | null;
-};
-
-type PrdListResponse = {
-  prdFiles?: PrdFile[];
-  prds?: PrdFile[];
-};
-
-const PRD_SAVED_MESSAGE = 'PRD saved successfully!';
-
-function getPrdFiles(data: PrdListResponse): PrdFile[] {
-  return data.prdFiles || data.prds || [];
-}
-
-export default function TaskMasterPanel({ isVisible }: TaskMasterPanelProps) {
-  const { tasks = [], currentProject, refreshTasks } = useTaskMaster() as TaskMasterContextValue;
-
-  const [selectedTask, setSelectedTask] = useState<TaskMasterTask | null>(null);
-  const [showTaskDetail, setShowTaskDetail] = useState(false);
-
-  const [showPRDEditor, setShowPRDEditor] = useState(false);
-  const [selectedPRD, setSelectedPRD] = useState<PrdFile | null>(null);
-  const [existingPRDs, setExistingPRDs] = useState<PrdFile[]>([]);
-  const [prdNotification, setPRDNotification] = useState<string | null>(null);
-
-  const prdNotificationTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  const showPrdNotification = useCallback((message: string) => {
-    if (prdNotificationTimeoutRef.current) {
-      clearTimeout(prdNotificationTimeoutRef.current);
-    }
-
-    setPRDNotification(message);
-    prdNotificationTimeoutRef.current = setTimeout(() => {
-      setPRDNotification(null);
-      prdNotificationTimeoutRef.current = null;
-    }, 3000);
-  }, []);
-
-  const loadExistingPrds = useCallback(async () => {
-    if (!currentProject?.name) {
-      setExistingPRDs([]);
-      return;
-    }
-
-    try {
-      const response = await api.get(`/taskmaster/prd/${encodeURIComponent(currentProject.name)}`);
-      if (!response.ok) {
-        setExistingPRDs([]);
-        return;
-      }
-
-      const data = (await response.json()) as PrdListResponse;
-      setExistingPRDs(getPrdFiles(data));
-    } catch (error) {
-      console.error('Failed to load existing PRDs:', error);
-      setExistingPRDs([]);
-    }
-  }, [currentProject?.name]);
-
-  const refreshPrds = useCallback(
-    async (showNotification = false) => {
-      await loadExistingPrds();
-
-      if (showNotification) {
-        showPrdNotification(PRD_SAVED_MESSAGE);
-      }
-    },
-    [loadExistingPrds, showPrdNotification],
-  );
-
-  useEffect(() => {
-    void loadExistingPrds();
-  }, [loadExistingPrds]);
-
-  useEffect(() => {
-    return () => {
-      if (prdNotificationTimeoutRef.current) {
-        clearTimeout(prdNotificationTimeoutRef.current);
-      }
-    };
-  }, []);
-
-  const handleTaskClick = useCallback(
-    (task: TaskSelection) => {
-      if (!task || typeof task !== 'object' || !('id' in task)) {
-        return;
-      }
-
-      if (!('title' in task) || !task.title) {
-        const fullTask = tasks.find((candidate) => String(candidate.id) === String(task.id));
-        if (fullTask) {
-          setSelectedTask(fullTask);
-          setShowTaskDetail(true);
-        }
-        return;
-      }
-
-      setSelectedTask(task as TaskMasterTask);
-      setShowTaskDetail(true);
-    },
-    [tasks],
-  );
-
-  const handleTaskDetailClose = useCallback(() => {
-    setShowTaskDetail(false);
-    setSelectedTask(null);
-  }, []);
-
-  const handleTaskStatusChange = useCallback(
-    (taskId: string | number, newStatus: string) => {
-      console.log('Update task status:', taskId, newStatus);
-      refreshTasks?.();
-    },
-    [refreshTasks],
-  );
-
-  const handleOpenPrdEditor = useCallback((prd: PrdFile | null = null) => {
-    setSelectedPRD(prd);
-    setShowPRDEditor(true);
-  }, []);
-
-  const handleClosePrdEditor = useCallback(() => {
-    setShowPRDEditor(false);
-    setSelectedPRD(null);
-  }, []);
-
-  const handlePrdSave = useCallback(async () => {
-    handleClosePrdEditor();
-    await refreshPrds(true);
-    refreshTasks?.();
-  }, [handleClosePrdEditor, refreshPrds, refreshTasks]);
-
-  return (
-    <>
-      <div className={`h-full ${isVisible ? 'block' : 'hidden'}`}>
-        <div className="h-full flex flex-col overflow-hidden">
-          <AnyTaskList
-            tasks={tasks}
-            onTaskClick={handleTaskClick}
-            showParentTasks
-            className="flex-1 overflow-y-auto p-4"
-            currentProject={currentProject}
-            onTaskCreated={refreshTasks || undefined}
-            onShowPRDEditor={handleOpenPrdEditor}
-            existingPRDs={existingPRDs}
-            onRefreshPRDs={(showNotification = false) => {
-              void refreshPrds(showNotification);
-            }}
-          />
-        </div>
-      </div>
-
-      {showTaskDetail && selectedTask && (
-        <AnyTaskDetail
-          task={selectedTask}
-          isOpen={showTaskDetail}
-          onClose={handleTaskDetailClose}
-          onStatusChange={handleTaskStatusChange}
-          onTaskClick={handleTaskClick}
-        />
-      )}
-
-      {showPRDEditor && (
-        <AnyPRDEditor
-          project={currentProject}
-          projectPath={currentProject?.fullPath || currentProject?.path}
-          onClose={handleClosePrdEditor}
-          isNewFile={!selectedPRD?.isExisting}
-          file={{
-            name: selectedPRD?.name || 'prd.txt',
-            content: selectedPRD?.content || '',
-          }}
-          onSave={handlePrdSave}
-        />
-      )}
-
-      {prdNotification && (
-        <div className="fixed bottom-4 right-4 z-50 animate-in slide-in-from-bottom-2 duration-300">
-          <div className="bg-green-600 text-white px-4 py-3 rounded-lg shadow-lg flex items-center gap-3">
-            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-            </svg>
-            <span className="font-medium">{prdNotification}</span>
-          </div>
-        </div>
-      )}
-    </>
-  );
-}