feat: tabbed code panel with open files

- TabBar component with file icons, close buttons, and active highlighting
- Open files tracked in state, tabs persist across file selections
- closeTab navigates to adjacent tab, falls back to structure view
- Tabs reset on project reset
- Export getFileIcon from FileTree for reuse in TabBar
- CSS additions: reduced motion, tab hover, file tree transitions

Author: yeahhe365

structure-insight/components/FileTree.tsx

@@ -135,6 +135,9 @@ const getFileIcon = (fileName: string): IconEntry => {
     return extensionMap.get(ext) ?? defaultIcon;
 };
 
+export { getFileIcon };
+export type { IconEntry };
+
 const FileTreeNode: React.FC<{ 
     node: FileNode; 
     onFileSelect: (path: string) => void; 

structure-insight/components/MainContent.tsx

@@ -4,6 +4,7 @@ import { motion, AnimatePresence } from 'framer-motion';
 import FileTree from './FileTree';
 import CodeView from './CodeView';
 import InitialPrompt from './InitialPrompt';
+import TabBar from './TabBar';
 import { useAppLogic } from '../hooks/useAppLogic';
 import ScrollSlider from './ScrollSlider';
 import StructureView from './StructureView';
@@ -140,6 +141,14 @@ const MainContent: React.FC<MainContentProps> = ({ logic, codeViewRef, leftPanel
                         )}
                         {state.mobileView === 'editor' && (
                             <motion.div key="editor" initial={{x: '0%'}} animate={{x: '0%'}} exit={{x: '100%'}} transition={{duration: 0.3, ease: 'easeInOut'}} className="absolute inset-0 h-full flex flex-col">
+                                {state.activeView === 'code' && state.processedData && (
+                                    <TabBar
+                                        openFiles={state.openFiles}
+                                        selectedFilePath={state.selectedFilePath}
+                                        onTabSelect={handlers.handleFileTreeSelect}
+                                        onCloseTab={handlers.closeTab}
+                                    />
+                                )}
                                 {state.isLoading ? (
                                     <LoadingIndicator message={state.progressMessage} />
                                 ) : state.processedData ? (
@@ -215,7 +224,15 @@ const MainContent: React.FC<MainContentProps> = ({ logic, codeViewRef, leftPanel
                     <div onMouseDown={handlers.handleMouseDownResize} className="w-1.5 h-full cursor-col-resize group z-10">
                          <div className="w-full h-full bg-light-border dark:bg-dark-border group-hover:bg-primary transition-colors duration-200" />
                     </div>
-                    <div className="flex-1 h-full overflow-hidden bg-light-bg dark:bg-dark-bg flex">
+                    <div className="flex-1 h-full overflow-hidden bg-light-bg dark:bg-dark-bg flex flex-col">
+                        {state.activeView === 'code' && state.processedData && (
+                            <TabBar
+                                openFiles={state.openFiles}
+                                selectedFilePath={state.selectedFilePath}
+                                onTabSelect={handlers.handleFileTreeSelect}
+                                onCloseTab={handlers.closeTab}
+                            />
+                        )}
                         <div className="flex-1 h-full flex flex-col min-w-0">
                             {state.isLoading ? (
                                 <LoadingIndicator message={state.progressMessage} />

structure-insight/components/TabBar.tsx

@@ -0,0 +1,48 @@
+
+import React from 'react';
+import { getFileIcon } from './FileTree';
+
+interface TabBarProps {
+    openFiles: string[];
+    selectedFilePath: string | null;
+    onTabSelect: (path: string) => void;
+    onCloseTab: (path: string) => void;
+}
+
+const TabBar: React.FC<TabBarProps> = ({ openFiles, selectedFilePath, onTabSelect, onCloseTab }) => {
+    if (openFiles.length === 0) return null;
+
+    return (
+        <div className="flex overflow-x-auto no-scrollbar border-b border-light-border dark:border-dark-border bg-light-panel dark:bg-dark-panel shrink-0">
+            {openFiles.map(path => {
+                const fileName = path.split('/').pop() || path;
+                const isActive = path === selectedFilePath;
+                const { icon, color } = getFileIcon(fileName);
+
+                return (
+                    <div
+                        key={path}
+                        onClick={() => onTabSelect(path)}
+                        className={`group flex items-center gap-1.5 px-3 py-1.5 cursor-pointer border-b-2 transition-colors shrink-0 text-xs ${
+                            isActive
+                                ? 'border-primary bg-primary/10 text-light-text dark:text-dark-text'
+                                : 'border-transparent text-light-subtle-text dark:text-dark-subtle-text hover:bg-light-hover dark:hover:bg-dark-hover'
+                        }`}
+                        title={path}
+                    >
+                        <i className={`${icon} ${color} text-[11px]`} />
+                        <span className="truncate max-w-[120px]">{fileName}</span>
+                        <button
+                            onClick={(e) => { e.stopPropagation(); onCloseTab(path); }}
+                            className="ml-1 w-4 h-4 flex items-center justify-center rounded hover:bg-light-border dark:hover:bg-dark-border text-light-subtle-text dark:text-dark-subtle-text opacity-0 group-hover:opacity-100 transition-opacity"
+                        >
+                            <i className="fa-solid fa-xmark text-[10px]" />
+                        </button>
+                    </div>
+                );
+            })}
+        </div>
+    );
+};
+
+export default React.memo(TabBar);

structure-insight/hooks/useAppLogic.ts

@@ -35,6 +35,7 @@ export const useAppLogic = (
     // --- Core Data & Selection State ---
     const [selectedFilePath, setSelectedFilePath] = React.useState<string | null>(null);
     const [activeView, setActiveView] = React.useState<'structure' | 'code'>('structure');
+    const [openFiles, setOpenFiles] = React.useState<string[]>([]);
 
     // --- Layout State ---
     const windowSize = useWindowSize();
@@ -73,6 +74,25 @@ export const useAppLogic = (
         selectedFilePath, setSelectedFilePath, setActiveView, showCharCount
     });
 
+    // --- Tab Management ---
+    const handleTabSelect = React.useCallback((path: string) => {
+        setOpenFiles(prev => prev.includes(path) ? prev : [...prev, path]);
+        handleFileTreeSelect(path);
+    }, [handleFileTreeSelect]);
+
+    const closeTab = React.useCallback((path: string) => {
+        setOpenFiles(prev => {
+            const next = prev.filter(p => p !== path);
+            if (path === selectedFilePath) {
+                const closedIdx = prev.indexOf(path);
+                const newSelected = next[Math.min(closedIdx, next.length - 1)] ?? null;
+                setSelectedFilePath(newSelected);
+                if (!newSelected) setActiveView('structure');
+            }
+            return next;
+        });
+    }, [selectedFilePath, setSelectedFilePath, setActiveView]);
+
     // --- Search Hook ---
     const {
         isSearchOpen, setIsSearchOpen, searchResults, activeResultIndex,
@@ -129,6 +149,7 @@ export const useAppLogic = (
                 setIsSettingsOpen(false);
                 clearInteractionState();
                 setSelectedFilePath(null);
+                setOpenFiles([]);
                 resetSearch();
                 setIsAiChatOpen(false);
                 setIsFileRankOpen(false);
@@ -241,14 +262,15 @@ export const useAppLogic = (
             lastProcessedFiles, mobileView, stats,
             isSearchOpen, isFileRankOpen, isShortcutsOpen, searchResults, activeResultIndex, isMobile, isAiChatOpen,
             selectedFilePath, selectedFile, activeView,
+            openFiles,
             searchQuery, searchOptions, activeMatchIndexInFile,
             recentProjects,
         },
         handlers: {
             setIsDragging, handleDrop: (e: React.DragEvent) => { setIsDragging(false); handleDrop(e, isLoading); },
             handleFileSelect, handleCopyAll, handleSave, handleReset, handleRefresh: () => handleRefresh(handleProcessing), handleCancel,
             setIsSettingsOpen, setToastMessage, setConfirmation,
-            handleDeleteFile, handleFileTreeSelect, setEditingPath, handleSaveEdit, handleToggleMarkdownPreview,
+            handleDeleteFile, handleFileTreeSelect: handleTabSelect, closeTab, setEditingPath, handleSaveEdit, handleToggleMarkdownPreview,
             handleMouseDownResize,
             handleMobileViewToggle,
             setIsSearchOpen, setIsFileRankOpen, setIsShortcutsOpen, handleSearch, handleNavigate, setIsAiChatOpen,

structure-insight/index.css

@@ -143,3 +143,45 @@ input[type="range"]::-moz-range-thumb {
     display: none !important;
   }
 }
+
+/* Tab bar horizontal scroll */
+.tab-bar-scroll {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.tab-bar-scroll::-webkit-scrollbar {
+  display: none;
+}
+
+/* Tab close button hover */
+.tab-close-btn {
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+.tab-item:hover .tab-close-btn {
+  opacity: 1;
+}
+
+/* Smooth panel resize */
+.panel-resize-handle {
+  transition: background-color 0.2s ease;
+}
+
+/* File tree item transition */
+.file-tree-item {
+  transition: background-color 0.1s ease, color 0.1s ease;
+}
+
+/* Tooltip styles */
+[title] {
+  cursor: help;
+}
+
+/* Reduced motion preference */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}