Initial UI commit for 1.3

src/ui/SSH/Config Editor/ConfigCodeEditor.tsx

@@ -0,0 +1,350 @@
+import React, {useState, useEffect} from "react";
+import CodeMirror from "@uiw/react-codemirror";
+import {loadLanguage} from '@uiw/codemirror-extensions-langs';
+import {hyperLink} from '@uiw/codemirror-extensions-hyper-link';
+import {oneDark} from '@codemirror/theme-one-dark';
+import {EditorView} from '@codemirror/view';
+
+interface ConfigCodeEditorProps {
+    content: string;
+    fileName: string;
+    onContentChange: (value: string) => void;
+}
+
+export function ConfigCodeEditor({content, fileName, onContentChange}: ConfigCodeEditorProps) {
+    function getLanguageName(filename: string): string {
+        if (!filename || typeof filename !== 'string') {
+            return 'text';
+        }
+        const lastDotIndex = filename.lastIndexOf('.');
+        if (lastDotIndex === -1) {
+            return 'text';
+        }
+        const ext = filename.slice(lastDotIndex + 1).toLowerCase();
+
+        switch (ext) {
+            case 'ng':
+                return 'angular';
+            case 'apl':
+                return 'apl';
+            case 'asc':
+                return 'asciiArmor';
+            case 'ast':
+                return 'asterisk';
+            case 'bf':
+                return 'brainfuck';
+            case 'c':
+                return 'c';
+            case 'ceylon':
+                return 'ceylon';
+            case 'clj':
+                return 'clojure';
+            case 'cmake':
+                return 'cmake';
+            case 'cob':
+            case 'cbl':
+                return 'cobol';
+            case 'coffee':
+                return 'coffeescript';
+            case 'lisp':
+                return 'commonLisp';
+            case 'cpp':
+            case 'cc':
+            case 'cxx':
+                return 'cpp';
+            case 'cr':
+                return 'crystal';
+            case 'cs':
+                return 'csharp';
+            case 'css':
+                return 'css';
+            case 'cypher':
+                return 'cypher';
+            case 'd':
+                return 'd';
+            case 'dart':
+                return 'dart';
+            case 'diff':
+            case 'patch':
+                return 'diff';
+            case 'dockerfile':
+                return 'dockerfile';
+            case 'dtd':
+                return 'dtd';
+            case 'dylan':
+                return 'dylan';
+            case 'ebnf':
+                return 'ebnf';
+            case 'ecl':
+                return 'ecl';
+            case 'eiffel':
+                return 'eiffel';
+            case 'elm':
+                return 'elm';
+            case 'erl':
+                return 'erlang';
+            case 'factor':
+                return 'factor';
+            case 'fcl':
+                return 'fcl';
+            case 'fs':
+                return 'forth';
+            case 'f90':
+            case 'for':
+                return 'fortran';
+            case 's':
+                return 'gas';
+            case 'feature':
+                return 'gherkin';
+            case 'go':
+                return 'go';
+            case 'groovy':
+                return 'groovy';
+            case 'hs':
+                return 'haskell';
+            case 'hx':
+                return 'haxe';
+            case 'html':
+            case 'htm':
+                return 'html';
+            case 'http':
+                return 'http';
+            case 'idl':
+                return 'idl';
+            case 'java':
+                return 'java';
+            case 'js':
+            case 'mjs':
+            case 'cjs':
+                return 'javascript';
+            case 'jinja2':
+            case 'j2':
+                return 'jinja2';
+            case 'json':
+                return 'json';
+            case 'jsx':
+                return 'jsx';
+            case 'jl':
+                return 'julia';
+            case 'kt':
+            case 'kts':
+                return 'kotlin';
+            case 'less':
+                return 'less';
+            case 'lezer':
+                return 'lezer';
+            case 'liquid':
+                return 'liquid';
+            case 'litcoffee':
+                return 'livescript';
+            case 'lua':
+                return 'lua';
+            case 'md':
+                return 'markdown';
+            case 'nb':
+            case 'mat':
+                return 'mathematica';
+            case 'mbox':
+                return 'mbox';
+            case 'mmd':
+                return 'mermaid';
+            case 'mrc':
+                return 'mirc';
+            case 'moo':
+                return 'modelica';
+            case 'mscgen':
+                return 'mscgen';
+            case 'm':
+                return 'mumps';
+            case 'sql':
+                return 'mysql';
+            case 'nc':
+                return 'nesC';
+            case 'nginx':
+                return 'nginx';
+            case 'nix':
+                return 'nix';
+            case 'nsi':
+                return 'nsis';
+            case 'nt':
+                return 'ntriples';
+            case 'mm':
+                return 'objectiveCpp';
+            case 'octave':
+                return 'octave';
+            case 'oz':
+                return 'oz';
+            case 'pas':
+                return 'pascal';
+            case 'pl':
+            case 'pm':
+                return 'perl';
+            case 'pgsql':
+                return 'pgsql';
+            case 'php':
+                return 'php';
+            case 'pig':
+                return 'pig';
+            case 'ps1':
+                return 'powershell';
+            case 'properties':
+                return 'properties';
+            case 'proto':
+                return 'protobuf';
+            case 'pp':
+                return 'puppet';
+            case 'py':
+                return 'python';
+            case 'q':
+                return 'q';
+            case 'r':
+                return 'r';
+            case 'rb':
+                return 'ruby';
+            case 'rs':
+                return 'rust';
+            case 'sas':
+                return 'sas';
+            case 'sass':
+            case 'scss':
+                return 'sass';
+            case 'scala':
+                return 'scala';
+            case 'scm':
+                return 'scheme';
+            case 'shader':
+                return 'shader';
+            case 'sh':
+            case 'bash':
+                return 'shell';
+            case 'siv':
+                return 'sieve';
+            case 'st':
+                return 'smalltalk';
+            case 'sol':
+                return 'solidity';
+            case 'solr':
+                return 'solr';
+            case 'rq':
+                return 'sparql';
+            case 'xlsx':
+            case 'ods':
+            case 'csv':
+                return 'spreadsheet';
+            case 'nut':
+                return 'squirrel';
+            case 'tex':
+                return 'stex';
+            case 'styl':
+                return 'stylus';
+            case 'svelte':
+                return 'svelte';
+            case 'swift':
+                return 'swift';
+            case 'tcl':
+                return 'tcl';
+            case 'textile':
+                return 'textile';
+            case 'tiddlywiki':
+                return 'tiddlyWiki';
+            case 'tiki':
+                return 'tiki';
+            case 'toml':
+                return 'toml';
+            case 'troff':
+                return 'troff';
+            case 'tsx':
+                return 'tsx';
+            case 'ttcn':
+                return 'ttcn';
+            case 'ttl':
+            case 'turtle':
+                return 'turtle';
+            case 'ts':
+                return 'typescript';
+            case 'vb':
+                return 'vb';
+            case 'vbs':
+                return 'vbscript';
+            case 'vm':
+                return 'velocity';
+            case 'v':
+                return 'verilog';
+            case 'vhd':
+            case 'vhdl':
+                return 'vhdl';
+            case 'vue':
+                return 'vue';
+            case 'wat':
+                return 'wast';
+            case 'webidl':
+                return 'webIDL';
+            case 'xq':
+            case 'xquery':
+                return 'xQuery';
+            case 'xml':
+                return 'xml';
+            case 'yacas':
+                return 'yacas';
+            case 'yaml':
+            case 'yml':
+                return 'yaml';
+            case 'z80':
+                return 'z80';
+            default:
+                return 'text';
+        }
+    }
+
+    useEffect(() => {
+        document.body.style.overflowX = 'hidden';
+        return () => {
+            document.body.style.overflowX = '';
+        };
+    }, []);
+
+    return (
+        <div style={{
+            width: '100%',
+            height: '100%',
+            position: 'relative',
+            overflow: 'hidden',
+            display: 'flex',
+            flexDirection: 'column'
+        }}>
+            <div
+                style={{
+                    width: '100%',
+                    height: '100%',
+                    overflow: 'auto',
+                    flex: 1,
+                    display: 'flex',
+                    flexDirection: 'column',
+                }}
+                className="config-codemirror-scroll-wrapper"
+            >
+                <CodeMirror
+                    value={content}
+                    extensions={[
+                        loadLanguage(getLanguageName(fileName || 'untitled.txt') as any) || [],
+                        hyperLink,
+                        oneDark,
+                        EditorView.theme({
+                            '&': {
+                                backgroundColor: '#09090b !important',
+                            },
+                            '.cm-gutters': {
+                                backgroundColor: '#18181b !important',
+                            },
+                        })
+                    ]}
+                    onChange={(value: any) => onContentChange(value)}
+                    theme={undefined}
+                    height="100%"
+                    basicSetup={{lineNumbers: true}}
+                    style={{minHeight: '100%', minWidth: '100%', flex: 1}}
+                />
+            </div>
+        </div>
+    );
+}

src/ui/SSH/Config Editor/ConfigEditor.tsx

@@ -0,0 +1,608 @@
+import React, {useState, useEffect, useRef} from "react";
+import {ConfigEditorSidebar} from "@/ui/SSH/Config Editor/ConfigEditorSidebar.tsx";
+import {ConfigTabList} from "@/ui/SSH/Config Editor/ConfigTabList.tsx";
+import {ConfigHomeView} from "@/ui/SSH/Config Editor/ConfigHomeView.tsx";
+import {ConfigCodeEditor} from "@/ui/SSH/Config Editor/ConfigCodeEditor.tsx";
+import {Button} from '@/components/ui/button.tsx';
+import {ConfigTopbar} from "@/ui/SSH/Config Editor/ConfigTopbar.tsx";
+import {cn} from '@/lib/utils.ts';
+import {
+    getConfigEditorRecent,
+    getConfigEditorPinned,
+    getConfigEditorShortcuts,
+    addConfigEditorRecent,
+    removeConfigEditorRecent,
+    addConfigEditorPinned,
+    removeConfigEditorPinned,
+    addConfigEditorShortcut,
+    removeConfigEditorShortcut,
+    readSSHFile,
+    writeSSHFile,
+    getSSHStatus,
+    connectSSH
+} from '@/ui/SSH/ssh-axios.ts';
+
+interface Tab {
+    id: string | number;
+    title: string;
+    fileName: string;
+    content: string;
+    isSSH?: boolean;
+    sshSessionId?: string;
+    filePath?: string;
+    loading?: boolean;
+    error?: string;
+    success?: string;
+    dirty?: boolean;
+}
+
+interface SSHHost {
+    id: number;
+    name: string;
+    ip: string;
+    port: number;
+    username: string;
+    folder: string;
+    tags: string[];
+    pin: boolean;
+    authType: string;
+    password?: string;
+    key?: string;
+    keyPassword?: string;
+    keyType?: string;
+    enableTerminal: boolean;
+    enableTunnel: boolean;
+    enableConfigEditor: boolean;
+    defaultPath: string;
+    tunnelConnections: any[];
+    createdAt: string;
+    updatedAt: string;
+}
+
+export function ConfigEditor({onSelectView}: { onSelectView: (view: string) => void }): React.ReactElement {
+    const [tabs, setTabs] = useState<Tab[]>([]);
+    const [activeTab, setActiveTab] = useState<string | number>('home');
+    const [recent, setRecent] = useState<any[]>([]);
+    const [pinned, setPinned] = useState<any[]>([]);
+    const [shortcuts, setShortcuts] = useState<any[]>([]);
+
+    const [currentHost, setCurrentHost] = useState<SSHHost | null>(null);
+    const [isSaving, setIsSaving] = useState(false);
+
+    const sidebarRef = useRef<any>(null);
+
+    useEffect(() => {
+        if (currentHost) {
+            fetchHomeData();
+        } else {
+            setRecent([]);
+            setPinned([]);
+            setShortcuts([]);
+        }
+    }, [currentHost]);
+
+    useEffect(() => {
+        if (activeTab === 'home' && currentHost) {
+            fetchHomeData();
+        }
+    }, [activeTab, currentHost]);
+
+    useEffect(() => {
+        if (activeTab === 'home' && currentHost) {
+            const interval = setInterval(() => {
+                fetchHomeData();
+            }, 2000);
+
+            return () => clearInterval(interval);
+        }
+    }, [activeTab, currentHost]);
+
+    async function fetchHomeData() {
+        if (!currentHost) return;
+
+        try {
+            const homeDataPromise = Promise.all([
+                getConfigEditorRecent(currentHost.id),
+                getConfigEditorPinned(currentHost.id),
+                getConfigEditorShortcuts(currentHost.id),
+            ]);
+
+            const timeoutPromise = new Promise((_, reject) =>
+                setTimeout(() => reject(new Error('Fetch home data timed out')), 15000)
+            );
+
+            const [recentRes, pinnedRes, shortcutsRes] = await Promise.race([homeDataPromise, timeoutPromise]);
+
+            const recentWithPinnedStatus = (recentRes || []).map(file => ({
+                ...file,
+                type: 'file',
+                isPinned: (pinnedRes || []).some(pinnedFile =>
+                    pinnedFile.path === file.path && pinnedFile.name === file.name
+                )
+            }));
+
+            const pinnedWithType = (pinnedRes || []).map(file => ({
+                ...file,
+                type: 'file'
+            }));
+
+            setRecent(recentWithPinnedStatus);
+            setPinned(pinnedWithType);
+            setShortcuts((shortcutsRes || []).map(shortcut => ({
+                ...shortcut,
+                type: 'directory'
+            })));
+        } catch (err: any) {
+        }
+    }
+
+    const formatErrorMessage = (err: any, defaultMessage: string): string => {
+        if (typeof err === 'object' && err !== null && 'response' in err) {
+            const axiosErr = err as any;
+            if (axiosErr.response?.status === 403) {
+                return `Permission denied. ${defaultMessage}. Check the Docker logs for detailed error information.`;
+            } else if (axiosErr.response?.status === 500) {
+                const backendError = axiosErr.response?.data?.error || 'Internal server error occurred';
+                return `Server Error (500): ${backendError}. Check the Docker logs for detailed error information.`;
+            } else if (axiosErr.response?.data?.error) {
+                const backendError = axiosErr.response.data.error;
+                return `${axiosErr.response?.status ? `Error ${axiosErr.response.status}: ` : ''}${backendError}. Check the Docker logs for detailed error information.`;
+            } else {
+                return `Request failed with status code ${axiosErr.response?.status || 'unknown'}. Check the Docker logs for detailed error information.`;
+            }
+        } else if (err instanceof Error) {
+            return `${err.message}. Check the Docker logs for detailed error information.`;
+        } else {
+            return `${defaultMessage}. Check the Docker logs for detailed error information.`;
+        }
+    };
+
+    const handleOpenFile = async (file: any) => {
+        const tabId = file.path;
+
+        if (!tabs.find(t => t.id === tabId)) {
+            const currentSshSessionId = currentHost?.id.toString();
+
+            setTabs([...tabs, {
+                id: tabId,
+                title: file.name,
+                fileName: file.name,
+                content: '',
+                filePath: file.path,
+                isSSH: true,
+                sshSessionId: currentSshSessionId,
+                loading: true
+            }]);
+            try {
+                const res = await readSSHFile(currentSshSessionId, file.path);
+                setTabs(tabs => tabs.map(t => t.id === tabId ? {
+                    ...t,
+                    content: res.content,
+                    loading: false,
+                    error: undefined
+                } : t));
+                await addConfigEditorRecent({
+                    name: file.name,
+                    path: file.path,
+                    isSSH: true,
+                    sshSessionId: currentSshSessionId,
+                    hostId: currentHost?.id
+                });
+                fetchHomeData();
+            } catch (err: any) {
+                const errorMessage = formatErrorMessage(err, 'Cannot read file');
+                setTabs(tabs => tabs.map(t => t.id === tabId ? {...t, loading: false, error: errorMessage} : t));
+            }
+        }
+        setActiveTab(tabId);
+    };
+
+    const handleRemoveRecent = async (file: any) => {
+        try {
+            await removeConfigEditorRecent({
+                name: file.name,
+                path: file.path,
+                isSSH: true,
+                sshSessionId: file.sshSessionId,
+                hostId: currentHost?.id
+            });
+            fetchHomeData();
+        } catch (err) {
+        }
+    };
+
+    const handlePinFile = async (file: any) => {
+        try {
+            await addConfigEditorPinned({
+                name: file.name,
+                path: file.path,
+                isSSH: true,
+                sshSessionId: file.sshSessionId,
+                hostId: currentHost?.id
+            });
+            fetchHomeData();
+            if (sidebarRef.current && sidebarRef.current.fetchFiles) {
+                sidebarRef.current.fetchFiles();
+            }
+        } catch (err) {
+        }
+    };
+
+    const handleUnpinFile = async (file: any) => {
+        try {
+            await removeConfigEditorPinned({
+                name: file.name,
+                path: file.path,
+                isSSH: true,
+                sshSessionId: file.sshSessionId,
+                hostId: currentHost?.id
+            });
+            fetchHomeData();
+            if (sidebarRef.current && sidebarRef.current.fetchFiles) {
+                sidebarRef.current.fetchFiles();
+            }
+        } catch (err) {
+        }
+    };
+
+    const handleOpenShortcut = async (shortcut: any) => {
+        if (sidebarRef.current?.isOpeningShortcut) {
+            return;
+        }
+
+        if (sidebarRef.current && sidebarRef.current.openFolder) {
+            try {
+                sidebarRef.current.isOpeningShortcut = true;
+
+                const normalizedPath = shortcut.path.startsWith('/') ? shortcut.path : `/${shortcut.path}`;
+
+                await sidebarRef.current.openFolder(currentHost, normalizedPath);
+            } catch (err) {
+            } finally {
+                if (sidebarRef.current) {
+                    sidebarRef.current.isOpeningShortcut = false;
+                }
+            }
+        } else {
+        }
+    };
+
+    const handleAddShortcut = async (folderPath: string) => {
+        try {
+            const name = folderPath.split('/').pop() || folderPath;
+            await addConfigEditorShortcut({
+                name,
+                path: folderPath,
+                isSSH: true,
+                sshSessionId: currentHost?.id.toString(),
+                hostId: currentHost?.id
+            });
+            fetchHomeData();
+        } catch (err) {
+        }
+    };
+
+    const handleRemoveShortcut = async (shortcut: any) => {
+        try {
+            await removeConfigEditorShortcut({
+                name: shortcut.name,
+                path: shortcut.path,
+                isSSH: true,
+                sshSessionId: currentHost?.id.toString(),
+                hostId: currentHost?.id
+            });
+            fetchHomeData();
+        } catch (err) {
+        }
+    };
+
+    const closeTab = (tabId: string | number) => {
+        const idx = tabs.findIndex(t => t.id === tabId);
+        const newTabs = tabs.filter(t => t.id !== tabId);
+        setTabs(newTabs);
+        if (activeTab === tabId) {
+            if (newTabs.length > 0) setActiveTab(newTabs[Math.max(0, idx - 1)].id);
+            else setActiveTab('home');
+        }
+        if (currentHost) {
+            fetchHomeData();
+        }
+    };
+
+    const setTabContent = (tabId: string | number, content: string) => {
+        setTabs(tabs => tabs.map(t => t.id === tabId ? {
+            ...t,
+            content,
+            dirty: true,
+            error: undefined,
+            success: undefined
+        } : t));
+    };
+
+    const handleSave = async (tab: Tab) => {
+        if (isSaving) {
+            return;
+        }
+
+        setIsSaving(true);
+
+        try {
+            if (!tab.sshSessionId) {
+                throw new Error('No SSH session ID available');
+            }
+
+            if (!tab.filePath) {
+                throw new Error('No file path available');
+            }
+
+            if (!currentHost?.id) {
+                throw new Error('No current host available');
+            }
+
+            try {
+                const statusPromise = getSSHStatus(tab.sshSessionId);
+                const statusTimeoutPromise = new Promise((_, reject) =>
+                    setTimeout(() => reject(new Error('SSH status check timed out')), 10000)
+                );
+
+                const status = await Promise.race([statusPromise, statusTimeoutPromise]);
+
+                if (!status.connected) {
+                    const connectPromise = connectSSH(tab.sshSessionId, {
+                        ip: currentHost.ip,
+                        port: currentHost.port,
+                        username: currentHost.username,
+                        password: currentHost.password,
+                        sshKey: currentHost.key,
+                        keyPassword: currentHost.keyPassword
+                    });
+                    const connectTimeoutPromise = new Promise((_, reject) =>
+                        setTimeout(() => reject(new Error('SSH reconnection timed out')), 15000)
+                    );
+
+                    await Promise.race([connectPromise, connectTimeoutPromise]);
+                }
+            } catch (statusErr) {
+            }
+
+            const savePromise = writeSSHFile(tab.sshSessionId, tab.filePath, tab.content);
+            const timeoutPromise = new Promise((_, reject) =>
+                setTimeout(() => {
+                    reject(new Error('Save operation timed out'));
+                }, 30000)
+            );
+
+            const result = await Promise.race([savePromise, timeoutPromise]);
+            setTabs(tabs => tabs.map(t => t.id === tab.id ? {
+                ...t,
+                dirty: false,
+                success: 'File saved successfully'
+            } : t));
+
+            setTimeout(() => {
+                setTabs(tabs => tabs.map(t => t.id === tab.id ? {...t, success: undefined} : t));
+            }, 3000);
+
+            Promise.allSettled([
+                (async () => {
+                    try {
+                        await addConfigEditorRecent({
+                            name: tab.fileName,
+                            path: tab.filePath,
+                            isSSH: true,
+                            sshSessionId: tab.sshSessionId,
+                            hostId: currentHost.id
+                        });
+                    } catch (recentErr) {
+                    }
+                })(),
+                (async () => {
+                    try {
+                        await fetchHomeData();
+                    } catch (refreshErr) {
+                    }
+                })()
+            ]).then(() => {
+            });
+
+        } catch (err) {
+            let errorMessage = formatErrorMessage(err, 'Cannot save file');
+
+            if (errorMessage.includes('timed out') || errorMessage.includes('timeout')) {
+                errorMessage = `Save operation timed out. The file may have been saved successfully, but the operation took too long to complete. Check the Docker logs for confirmation.`;
+            }
+
+            setTabs(tabs => {
+                const updatedTabs = tabs.map(t => t.id === tab.id ? {
+                    ...t,
+                    error: `Failed to save file: ${errorMessage}`
+                } : t);
+                return updatedTabs;
+            });
+
+            setTimeout(() => {
+                setTabs(currentTabs => [...currentTabs]);
+            }, 100);
+        } finally {
+            setIsSaving(false);
+        }
+    };
+
+    const handleHostChange = (host: SSHHost | null) => {
+        setCurrentHost(host);
+        setTabs([]);
+        setActiveTab('home');
+    };
+
+    if (!currentHost) {
+        return (
+            <div style={{position: 'relative', width: '100vw', height: '100vh', overflow: 'hidden'}}>
+                <div style={{position: 'absolute', top: 0, left: 0, width: 256, height: '100vh', zIndex: 20}}>
+                    <ConfigEditorSidebar
+                        onSelectView={onSelectView}
+                        onOpenFile={handleOpenFile}
+                        tabs={tabs}
+                        ref={sidebarRef}
+                        onHostChange={handleHostChange}
+                    />
+                </div>
+                <div style={{
+                    position: 'absolute',
+                    top: 0,
+                    left: 256,
+                    right: 0,
+                    bottom: 0,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    background: '#09090b'
+                }}>
+                    <div className="text-center">
+                        <h2 className="text-xl font-semibold text-white mb-2">Connect to a Server</h2>
+                        <p className="text-muted-foreground">Select a server from the sidebar to start editing files</p>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div style={{position: 'relative', width: '100vw', height: '100vh', overflow: 'hidden'}}>
+            <div style={{position: 'absolute', top: 0, left: 0, width: 256, height: '100vh', zIndex: 20}}>
+                <ConfigEditorSidebar
+                    onSelectView={onSelectView}
+                    onOpenFile={handleOpenFile}
+                    tabs={tabs}
+                    ref={sidebarRef}
+                    onHostChange={handleHostChange}
+                />
+            </div>
+            <div style={{position: 'absolute', top: 0, left: 256, right: 0, height: 44, zIndex: 30}}>
+                <div className="flex items-center w-full bg-[#18181b] border-b border-[#222224] h-11 relative px-4"
+                     style={{height: 44}}>
+                    {/* Tab list scrollable area */}
+                    <div className="flex-1 min-w-0 h-full flex items-center">
+                        <div
+                            className="h-9 w-full bg-[#09090b] border border-[#23232a] rounded-md flex items-center overflow-x-auto scrollbar-thin scrollbar-thumb-muted-foreground/30 scrollbar-track-transparent"
+                            style={{minWidth: 0}}>
+                            <ConfigTopbar
+                                tabs={tabs.map(t => ({id: t.id, title: t.title}))}
+                                activeTab={activeTab}
+                                setActiveTab={setActiveTab}
+                                closeTab={closeTab}
+                                onHomeClick={() => {
+                                    setActiveTab('home');
+                                    if (currentHost) {
+                                        fetchHomeData();
+                                    }
+                                }}
+                            />
+                        </div>
+                    </div>
+                    {/* Save button - always visible */}
+                    <Button
+                        className={cn(
+                            'ml-4 px-4 py-1.5 border rounded-md text-sm font-medium transition-colors',
+                            'border-[#2d2d30] text-white bg-transparent hover:bg-[#23232a] active:bg-[#23232a] focus:bg-[#23232a]',
+                            activeTab === 'home' || !tabs.find(t => t.id === activeTab)?.dirty || isSaving ? 'opacity-60 cursor-not-allowed' : 'hover:border-[#2d2d30]'
+                        )}
+                        disabled={activeTab === 'home' || !tabs.find(t => t.id === activeTab)?.dirty || isSaving}
+                        onClick={() => {
+                            const tab = tabs.find(t => t.id === activeTab);
+                            if (tab && !isSaving) handleSave(tab);
+                        }}
+                        type="button"
+                        style={{height: 36, alignSelf: 'center'}}
+                    >
+                        {isSaving ? 'Saving...' : 'Save'}
+                    </Button>
+                </div>
+            </div>
+            <div style={{
+                position: 'absolute',
+                top: 44,
+                left: 256,
+                right: 0,
+                bottom: 0,
+                overflow: 'hidden',
+                zIndex: 10,
+                background: '#101014',
+                display: 'flex',
+                flexDirection: 'column'
+            }}>
+                {activeTab === 'home' ? (
+                    <ConfigHomeView
+                        recent={recent}
+                        pinned={pinned}
+                        shortcuts={shortcuts}
+                        onOpenFile={handleOpenFile}
+                        onRemoveRecent={handleRemoveRecent}
+                        onPinFile={handlePinFile}
+                        onUnpinFile={handleUnpinFile}
+                        onOpenShortcut={handleOpenShortcut}
+                        onRemoveShortcut={handleRemoveShortcut}
+                        onAddShortcut={handleAddShortcut}
+                    />
+                ) : (
+                    (() => {
+                        const tab = tabs.find(t => t.id === activeTab);
+                        if (!tab) return null;
+                        return (
+                            <div className="flex flex-col h-full" style={{flex: 1, minHeight: 0}}>
+                                {/* Error display */}
+                                {tab.error && (
+                                    <div
+                                        className="bg-red-900/20 border border-red-500/30 text-red-300 px-4 py-3 text-sm">
+                                        <div className="flex items-center justify-between">
+                                            <div className="flex items-center gap-2">
+                                                <span className="text-red-400">⚠️</span>
+                                                <span>{tab.error}</span>
+                                            </div>
+                                            <button
+                                                onClick={() => setTabs(tabs => tabs.map(t => t.id === tab.id ? {
+                                                    ...t,
+                                                    error: undefined
+                                                } : t))}
+                                                className="text-red-400 hover:text-red-300 transition-colors"
+                                            >
+                                                ✕
+                                            </button>
+                                        </div>
+                                    </div>
+                                )}
+                                {/* Success display */}
+                                {tab.success && (
+                                    <div
+                                        className="bg-green-900/20 border border-green-500/30 text-green-300 px-4 py-3 text-sm">
+                                        <div className="flex items-center justify-between">
+                                            <div className="flex items-center gap-2">
+                                                <span className="text-green-400">✓</span>
+                                                <span>{tab.success}</span>
+                                            </div>
+                                            <button
+                                                onClick={() => setTabs(tabs => tabs.map(t => t.id === tab.id ? {
+                                                    ...t,
+                                                    success: undefined
+                                                } : t))}
+                                                className="text-green-400 hover:text-green-300 transition-colors"
+                                            >
+                                                ✕
+                                            </button>
+                                        </div>
+                                    </div>
+                                )}
+                                <div className="flex-1 min-h-0">
+                                    <ConfigCodeEditor
+                                        content={tab.content}
+                                        fileName={tab.fileName}
+                                        onContentChange={content => setTabContent(tab.id, content)}
+                                    />
+                                </div>
+                            </div>
+                        );
+                    })()
+                )}
+            </div>
+        </div>
+    );
+}

src/ui/SSH/Config Editor/ConfigEditorSidebar.tsx

@@ -0,0 +1,594 @@
+import React, {useEffect, useState, useRef, forwardRef, useImperativeHandle} from 'react';
+import {
+    Sidebar,
+    SidebarContent,
+    SidebarGroup,
+    SidebarGroupContent,
+    SidebarGroupLabel, SidebarMenu, SidebarMenuItem,
+    SidebarProvider
+} from '@/components/ui/sidebar.tsx';
+import {Separator} from '@/components/ui/separator.tsx';
+import {CornerDownLeft, Folder, File, Server, ArrowUp, Pin} from 'lucide-react';
+import {ScrollArea} from '@/components/ui/scroll-area.tsx';
+import {cn} from '@/lib/utils.ts';
+import {Input} from '@/components/ui/input.tsx';
+import {Button} from '@/components/ui/button.tsx';
+import {Accordion, AccordionContent, AccordionItem, AccordionTrigger} from '@/components/ui/accordion.tsx';
+import {
+    getSSHHosts,
+    listSSHFiles,
+    connectSSH,
+    getSSHStatus,
+    getConfigEditorPinned,
+    addConfigEditorPinned,
+    removeConfigEditorPinned
+} from '@/ui/SSH/ssh-axios.ts';
+
+interface SSHHost {
+    id: number;
+    name: string;
+    ip: string;
+    port: number;
+    username: string;
+    folder: string;
+    tags: string[];
+    pin: boolean;
+    authType: string;
+    password?: string;
+    key?: string;
+    keyPassword?: string;
+    keyType?: string;
+    enableTerminal: boolean;
+    enableTunnel: boolean;
+    enableConfigEditor: boolean;
+    defaultPath: string;
+    tunnelConnections: any[];
+    createdAt: string;
+    updatedAt: string;
+}
+
+const ConfigEditorSidebar = forwardRef(function ConfigEditorSidebar(
+    {onSelectView, onOpenFile, tabs, onHostChange}: {
+        onSelectView: (view: string) => void;
+        onOpenFile: (file: any) => void;
+        tabs: any[];
+        onHostChange?: (host: SSHHost | null) => void;
+    },
+    ref
+) {
+    const [sshConnections, setSSHConnections] = useState<SSHHost[]>([]);
+    const [loadingSSH, setLoadingSSH] = useState(false);
+    const [errorSSH, setErrorSSH] = useState<string | undefined>(undefined);
+    const [view, setView] = useState<'servers' | 'files'>('servers');
+    const [activeServer, setActiveServer] = useState<SSHHost | null>(null);
+    const [currentPath, setCurrentPath] = useState('/');
+    const [files, setFiles] = useState<any[]>([]);
+    const pathInputRef = useRef<HTMLInputElement>(null);
+
+    const [search, setSearch] = useState('');
+    const [debouncedSearch, setDebouncedSearch] = useState('');
+    const [fileSearch, setFileSearch] = useState('');
+    const [debouncedFileSearch, setDebouncedFileSearch] = useState('');
+    useEffect(() => {
+        const handler = setTimeout(() => setDebouncedSearch(search), 200);
+        return () => clearTimeout(handler);
+    }, [search]);
+    useEffect(() => {
+        const handler = setTimeout(() => setDebouncedFileSearch(fileSearch), 200);
+        return () => clearTimeout(handler);
+    }, [fileSearch]);
+
+    const [sshSessionId, setSshSessionId] = useState<string | null>(null);
+    const [filesLoading, setFilesLoading] = useState(false);
+    const [filesError, setFilesError] = useState<string | null>(null);
+    const [connectingSSH, setConnectingSSH] = useState(false);
+    const [connectionCache, setConnectionCache] = useState<Record<string, {
+        sessionId: string;
+        timestamp: number
+    }>>({});
+    const [fetchingFiles, setFetchingFiles] = useState(false);
+
+    useEffect(() => {
+        fetchSSH();
+    }, []);
+
+    async function fetchSSH() {
+        setLoadingSSH(true);
+        setErrorSSH(undefined);
+        try {
+            const hosts = await getSSHHosts();
+            const configEditorHosts = hosts.filter(host => host.enableConfigEditor);
+
+            if (configEditorHosts.length > 0) {
+                const firstHost = configEditorHosts[0];
+            }
+
+            setSSHConnections(configEditorHosts);
+        } catch (err: any) {
+            setErrorSSH('Failed to load SSH connections');
+        } finally {
+            setLoadingSSH(false);
+        }
+    }
+
+    async function connectToSSH(server: SSHHost): Promise<string | null> {
+        const sessionId = server.id.toString();
+
+        const cached = connectionCache[sessionId];
+        if (cached && Date.now() - cached.timestamp < 30000) {
+            setSshSessionId(cached.sessionId);
+            return cached.sessionId;
+        }
+
+        if (connectingSSH) {
+            return null;
+        }
+
+        setConnectingSSH(true);
+
+        try {
+            if (!server.password && !server.key) {
+                setFilesError('No authentication credentials available for this SSH host');
+                return null;
+            }
+
+            const connectionConfig = {
+                ip: server.ip,
+                port: server.port,
+                username: server.username,
+                password: server.password,
+                sshKey: server.key,
+                keyPassword: server.keyPassword,
+            };
+
+            await connectSSH(sessionId, connectionConfig);
+
+            setSshSessionId(sessionId);
+
+            setConnectionCache(prev => ({
+                ...prev,
+                [sessionId]: {sessionId, timestamp: Date.now()}
+            }));
+
+            return sessionId;
+        } catch (err: any) {
+            setFilesError(err?.response?.data?.error || 'Failed to connect to SSH');
+            setSshSessionId(null);
+            return null;
+        } finally {
+            setConnectingSSH(false);
+        }
+    }
+
+    async function fetchFiles() {
+        if (fetchingFiles) {
+            return;
+        }
+
+        setFetchingFiles(true);
+        setFiles([]);
+        setFilesLoading(true);
+        setFilesError(null);
+
+        try {
+            let pinnedFiles: any[] = [];
+            try {
+                if (activeServer) {
+                    pinnedFiles = await getConfigEditorPinned(activeServer.id);
+                }
+            } catch (err) {
+            }
+
+            if (activeServer && sshSessionId) {
+                let res: any[] = [];
+
+                try {
+                    const status = await getSSHStatus(sshSessionId);
+                    if (!status.connected) {
+                        const newSessionId = await connectToSSH(activeServer);
+                        if (newSessionId) {
+                            setSshSessionId(newSessionId);
+                            res = await listSSHFiles(newSessionId, currentPath);
+                        } else {
+                            throw new Error('Failed to reconnect SSH session');
+                        }
+                    } else {
+                        res = await listSSHFiles(sshSessionId, currentPath);
+                    }
+                } catch (sessionErr) {
+                    const newSessionId = await connectToSSH(activeServer);
+                    if (newSessionId) {
+                        setSshSessionId(newSessionId);
+                        res = await listSSHFiles(newSessionId, currentPath);
+                    } else {
+                        throw sessionErr;
+                    }
+                }
+
+                const processedFiles = (res || []).map((f: any) => {
+                    const filePath = currentPath + (currentPath.endsWith('/') ? '' : '/') + f.name;
+                    const isPinned = pinnedFiles.some(pinned => pinned.path === filePath);
+                    return {
+                        ...f,
+                        path: filePath,
+                        isPinned,
+                        isSSH: true,
+                        sshSessionId: sshSessionId
+                    };
+                });
+
+                setFiles(processedFiles);
+            }
+        } catch (err: any) {
+            setFiles([]);
+            setFilesError(err?.response?.data?.error || err?.message || 'Failed to list files');
+        } finally {
+            setFilesLoading(false);
+            setFetchingFiles(false);
+        }
+    }
+
+    useEffect(() => {
+        if (view === 'files' && activeServer && sshSessionId && !connectingSSH && !fetchingFiles) {
+            const timeoutId = setTimeout(() => {
+                fetchFiles();
+            }, 100);
+            return () => clearTimeout(timeoutId);
+        }
+    }, [currentPath, view, activeServer, sshSessionId]);
+
+    async function handleSelectServer(server: SSHHost) {
+        if (connectingSSH) {
+            return;
+        }
+
+        setFetchingFiles(false);
+        setFilesLoading(false);
+        setFilesError(null);
+        setFiles([]);
+
+        setActiveServer(server);
+        setCurrentPath(server.defaultPath || '/');
+        setView('files');
+
+        const sessionId = await connectToSSH(server);
+        if (sessionId) {
+            setSshSessionId(sessionId);
+            if (onHostChange) {
+                onHostChange(server);
+            }
+        } else {
+            w
+            setView('servers');
+            setActiveServer(null);
+        }
+    }
+
+    useImperativeHandle(ref, () => ({
+        openFolder: async (server: SSHHost, path: string) => {
+            if (connectingSSH || fetchingFiles) {
+                return;
+            }
+
+            if (activeServer?.id === server.id && currentPath === path) {
+                setTimeout(() => fetchFiles(), 100);
+                return;
+            }
+
+            setFetchingFiles(false);
+            setFilesLoading(false);
+            setFilesError(null);
+            setFiles([]);
+
+            setActiveServer(server);
+            setCurrentPath(path);
+            setView('files');
+
+            if (!sshSessionId || activeServer?.id !== server.id) {
+                const sessionId = await connectToSSH(server);
+                if (sessionId) {
+                    setSshSessionId(sessionId);
+                    if (onHostChange && activeServer?.id !== server.id) {
+                        onHostChange(server);
+                    }
+                } else {
+                    setView('servers');
+                    setActiveServer(null);
+                }
+            } else {
+                if (onHostChange && activeServer?.id !== server.id) {
+                    onHostChange(server);
+                }
+            }
+        },
+        fetchFiles: () => {
+            if (activeServer && sshSessionId) {
+                fetchFiles();
+            }
+        }
+    }));
+
+    useEffect(() => {
+        if (pathInputRef.current) {
+            pathInputRef.current.scrollLeft = pathInputRef.current.scrollWidth;
+        }
+    }, [currentPath]);
+
+    const sshByFolder: Record<string, SSHHost[]> = {};
+    sshConnections.forEach(conn => {
+        const folder = conn.folder && conn.folder.trim() ? conn.folder : 'No Folder';
+        if (!sshByFolder[folder]) sshByFolder[folder] = [];
+        sshByFolder[folder].push(conn);
+    });
+
+    const sortedFolders = Object.keys(sshByFolder);
+    if (sortedFolders.includes('No Folder')) {
+        sortedFolders.splice(sortedFolders.indexOf('No Folder'), 1);
+        sortedFolders.unshift('No Folder');
+    }
+
+    const filteredSshByFolder: Record<string, SSHHost[]> = {};
+    Object.entries(sshByFolder).forEach(([folder, hosts]) => {
+        filteredSshByFolder[folder] = hosts.filter(conn => {
+            const q = debouncedSearch.trim().toLowerCase();
+            if (!q) return true;
+            return (conn.name || '').toLowerCase().includes(q) || (conn.ip || '').toLowerCase().includes(q) ||
+                (conn.username || '').toLowerCase().includes(q) || (conn.folder || '').toLowerCase().includes(q) ||
+                (conn.tags || []).join(' ').toLowerCase().includes(q);
+        });
+    });
+
+    const filteredFiles = files.filter(file => {
+        const q = debouncedFileSearch.trim().toLowerCase();
+        if (!q) return true;
+        return file.name.toLowerCase().includes(q);
+    });
+
+    return (
+        <SidebarProvider>
+            <Sidebar style={{height: '100vh', maxHeight: '100vh', overflow: 'hidden'}}>
+                <SidebarContent style={{height: '100vh', maxHeight: '100vh', overflow: 'hidden'}}>
+                    <SidebarGroup className="flex flex-col flex-grow h-full overflow-hidden">
+                        <SidebarGroupLabel className="text-lg font-bold text-white flex items-center gap-2">
+                            Termix / Config
+                        </SidebarGroupLabel>
+                        <Separator className="p-0.25 mt-1 mb-1"/>
+                        <SidebarGroupContent className="flex flex-col flex-grow min-h-0">
+                            <SidebarMenu>
+                                <SidebarMenuItem key={"Homepage"}>
+                                    <Button className="w-full mt-2 mb-2 h-8" onClick={() => onSelectView("homepage")}
+                                            variant="outline">
+                                        <CornerDownLeft/>
+                                        Return
+                                    </Button>
+                                    <Separator className="p-0.25 mt-1 mb-1"/>
+                                </SidebarMenuItem>
+                            </SidebarMenu>
+                            <div
+                                className="flex-1 w-full flex flex-col rounded-md bg-[#09090b] border border-[#434345] overflow-hidden p-0 relative min-h-0 mt-1">
+                                {view === 'servers' && (
+                                    <>
+                                        <div
+                                            className="w-full px-2 pt-2 pb-2 bg-[#09090b] z-10 border-b border-[#23232a]">
+                                            <Input
+                                                value={search}
+                                                onChange={e => setSearch(e.target.value)}
+                                                placeholder="Search hosts by name, username, IP, folder, tags..."
+                                                className="w-full h-8 text-sm bg-[#18181b] border border-[#23232a] text-white placeholder:text-muted-foreground rounded"
+                                                autoComplete="off"
+                                            />
+                                        </div>
+                                        <ScrollArea className="flex-1 w-full h-full"
+                                                    style={{height: '100%', maxHeight: '100%'}}>
+                                            <div className="flex flex-col h-full">
+                                                <div
+                                                    className="w-full flex-grow overflow-hidden p-0 m-0 relative flex flex-col min-h-0">
+                                                    <div style={{display: 'flex', justifyContent: 'center'}}>
+                                                        <Separator className="w-full h-px bg-[#434345] my-2"
+                                                                   style={{maxWidth: 213, margin: '0 auto'}}/>
+                                                    </div>
+                                                    <div className="mx-auto" style={{maxWidth: '213px', width: '100%'}}>
+                                                        <div className="flex-1 min-h-0">
+                                                            <Accordion type="multiple" className="w-full"
+                                                                       value={sortedFolders}>
+                                                                {sortedFolders.map((folder, idx) => (
+                                                                    <React.Fragment key={folder}>
+                                                                        <AccordionItem value={folder}
+                                                                                       className="mt-0 w-full !border-b-transparent">
+                                                                            <AccordionTrigger
+                                                                                className="text-base font-semibold rounded-t-none py-2 w-full">{folder}</AccordionTrigger>
+                                                                            <AccordionContent
+                                                                                className="flex flex-col gap-1 pb-2 pt-1 w-full">
+                                                                                {filteredSshByFolder[folder].map(conn => (
+                                                                                    <Button
+                                                                                        key={conn.id}
+                                                                                        variant="outline"
+                                                                                        className="w-full h-10 px-2 bg-[#18181b] border border-[#434345] hover:bg-[#2d2d30] transition-colors text-left justify-start"
+                                                                                        onClick={() => handleSelectServer(conn)}
+                                                                                    >
+                                                                                        <div
+                                                                                            className="flex items-center w-full">
+                                                                                            {conn.pin && <Pin
+                                                                                                className="w-0.5 h-0.5 text-yellow-400 mr-1 flex-shrink-0"/>}
+                                                                                            <span
+                                                                                                className="font-medium truncate">{conn.name || conn.ip}</span>
+                                                                                        </div>
+                                                                                    </Button>
+                                                                                ))}
+                                                                            </AccordionContent>
+                                                                        </AccordionItem>
+                                                                        {idx < sortedFolders.length - 1 && (
+                                                                            <div style={{
+                                                                                display: 'flex',
+                                                                                justifyContent: 'center'
+                                                                            }}>
+                                                                                <Separator
+                                                                                    className="h-px bg-[#434345] my-1"
+                                                                                    style={{width: 213}}/>
+                                                                            </div>
+                                                                        )}
+                                                                    </React.Fragment>
+                                                                ))}
+                                                            </Accordion>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </ScrollArea>
+                                    </>
+                                )}
+                                {view === 'files' && activeServer && (
+                                    <div className="flex flex-col h-full w-full" style={{maxWidth: 260}}>
+                                        <div
+                                            className="flex items-center gap-2 px-2 py-2 border-b border-[#23232a] bg-[#18181b] z-20"
+                                            style={{maxWidth: 260}}>
+                                            <Button
+                                                size="icon"
+                                                variant="outline"
+                                                className="h-8 w-8 bg-[#18181b] border border-[#23232a] rounded-md hover:bg-[#2d2d30] focus:outline-none focus:ring-2 focus:ring-ring"
+                                                onClick={() => {
+                                                    let path = currentPath;
+                                                    if (path && path !== '/' && path !== '') {
+                                                        if (path.endsWith('/')) path = path.slice(0, -1);
+                                                        const lastSlash = path.lastIndexOf('/');
+                                                        if (lastSlash > 0) {
+                                                            setCurrentPath(path.slice(0, lastSlash));
+                                                        } else {
+                                                            setCurrentPath('/');
+                                                        }
+                                                    } else {
+                                                        setView('servers');
+                                                        if (onHostChange) {
+                                                            onHostChange(null);
+                                                        }
+                                                    }
+                                                }}
+                                            >
+                                                <ArrowUp className="w-4 h-4"/>
+                                            </Button>
+                                            <Input ref={pathInputRef} value={currentPath}
+                                                   onChange={e => setCurrentPath(e.target.value)}
+                                                   className="flex-1 bg-[#18181b] border border-[#434345] text-white truncate rounded-md px-2 py-1 focus:outline-none focus:ring-2 focus:ring-ring hover:border-[#5a5a5d]"
+                                            />
+                                        </div>
+                                        <div className="px-2 py-2 border-b border-[#23232a] bg-[#18181b]">
+                                            <Input
+                                                placeholder="Search files and folders..."
+                                                className="w-full h-7 text-sm bg-[#23232a] border border-[#434345] text-white placeholder:text-muted-foreground rounded"
+                                                autoComplete="off"
+                                                value={fileSearch}
+                                                onChange={e => setFileSearch(e.target.value)}
+                                            />
+                                        </div>
+                                        <div className="flex-1 w-full h-full bg-[#09090b] border-t border-[#23232a]">
+                                            <ScrollArea className="w-full h-full bg-[#09090b]" style={{
+                                                height: '100%',
+                                                maxHeight: '100%',
+                                                paddingRight: 8,
+                                                scrollbarGutter: 'stable',
+                                                background: '#09090b'
+                                            }}>
+                                                <div className="p-2 pr-2">
+                                                    {connectingSSH || filesLoading ? (
+                                                        <div className="text-xs text-muted-foreground">Loading...</div>
+                                                    ) : filesError ? (
+                                                        <div className="text-xs text-red-500">{filesError}</div>
+                                                    ) : filteredFiles.length === 0 ? (
+                                                        <div className="text-xs text-muted-foreground">No files or
+                                                            folders found.</div>
+                                                    ) : (
+                                                        <div className="flex flex-col gap-1">
+                                                            {filteredFiles.map((item: any) => {
+                                                                const isOpen = (tabs || []).some((t: any) => t.id === item.path);
+                                                                return (
+                                                                    <div
+                                                                        key={item.path}
+                                                                        className={cn(
+                                                                            "flex items-center gap-2 px-3 py-2 bg-[#18181b] border border-[#23232a] rounded group max-w-full",
+                                                                            isOpen && "opacity-60 cursor-not-allowed pointer-events-none"
+                                                                        )}
+                                                                        style={{maxWidth: 220, marginBottom: 8}}
+                                                                    >
+                                                                        <div
+                                                                            className="flex items-center gap-2 flex-1 cursor-pointer min-w-0"
+                                                                            onClick={() => !isOpen && (item.type === 'directory' ? setCurrentPath(item.path) : onOpenFile({
+                                                                                name: item.name,
+                                                                                path: item.path,
+                                                                                isSSH: item.isSSH,
+                                                                                sshSessionId: item.sshSessionId
+                                                                            }))}
+                                                                        >
+                                                                            {item.type === 'directory' ?
+                                                                                <Folder
+                                                                                    className="w-4 h-4 text-blue-400"/> :
+                                                                                <File
+                                                                                    className="w-4 h-4 text-muted-foreground"/>}
+                                                                            <span
+                                                                                className="text-sm text-white truncate max-w-[120px]">{item.name}</span>
+                                                                        </div>
+                                                                        <div className="flex items-center gap-1">
+                                                                            {item.type === 'file' && (
+                                                                                <Button size="icon" variant="ghost"
+                                                                                        className="h-7 w-7"
+                                                                                        disabled={isOpen}
+                                                                                        onClick={async (e) => {
+                                                                                            e.stopPropagation();
+                                                                                            try {
+                                                                                                if (item.isPinned) {
+                                                                                                    await removeConfigEditorPinned({
+                                                                                                        name: item.name,
+                                                                                                        path: item.path,
+                                                                                                        hostId: activeServer?.id,
+                                                                                                        isSSH: true,
+                                                                                                        sshSessionId: activeServer?.id.toString()
+                                                                                                    });
+                                                                                                    setFiles(files.map(f =>
+                                                                                                        f.path === item.path ? {
+                                                                                                            ...f,
+                                                                                                            isPinned: false
+                                                                                                        } : f
+                                                                                                    ));
+                                                                                                } else {
+                                                                                                    await addConfigEditorPinned({
+                                                                                                        name: item.name,
+                                                                                                        path: item.path,
+                                                                                                        hostId: activeServer?.id,
+                                                                                                        isSSH: true,
+                                                                                                        sshSessionId: activeServer?.id.toString()
+                                                                                                    });
+                                                                                                    setFiles(files.map(f =>
+                                                                                                        f.path === item.path ? {
+                                                                                                            ...f,
+                                                                                                            isPinned: true
+                                                                                                        } : f
+                                                                                                    ));
+                                                                                                }
+                                                                                            } catch (err) {
+                                                                                                console.error('Failed to pin/unpin file:', err);
+                                                                                            }
+                                                                                        }}
+                                                                                >
+                                                                                    <Pin
+                                                                                        className={`w-1 h-1 ${item.isPinned ? 'text-yellow-400 fill-current' : 'text-muted-foreground'}`}/>
+                                                                                </Button>
+                                                                            )}
+                                                                        </div>
+                                                                    </div>
+                                                                );
+                                                            })}
+                                                        </div>
+                                                    )}
+                                                </div>
+                                            </ScrollArea>
+                                        </div>
+                                    </div>
+                                )}
+                            </div>
+                        </SidebarGroupContent>
+                    </SidebarGroup>
+                </SidebarContent>
+            </Sidebar>
+        </SidebarProvider>
+    );
+});
+export {ConfigEditorSidebar};

src/ui/SSH/Config Editor/ConfigFileSidebarViewer.tsx

@@ -0,0 +1,149 @@
+import React from 'react';
+import {Button} from '@/components/ui/button.tsx';
+import {Card} from '@/components/ui/card.tsx';
+import {Separator} from '@/components/ui/separator.tsx';
+import {Plus, Folder, File, Star, Trash2, Edit, Link2, Server, Pin} from 'lucide-react';
+
+interface SSHConnection {
+    id: string;
+    name: string;
+    ip: string;
+    port: number;
+    username: string;
+    isPinned?: boolean;
+}
+
+interface FileItem {
+    name: string;
+    type: 'file' | 'directory' | 'link';
+    path: string;
+    isStarred?: boolean;
+}
+
+interface ConfigFileSidebarViewerProps {
+    sshConnections: SSHConnection[];
+    onAddSSH: () => void;
+    onConnectSSH: (conn: SSHConnection) => void;
+    onEditSSH: (conn: SSHConnection) => void;
+    onDeleteSSH: (conn: SSHConnection) => void;
+    onPinSSH: (conn: SSHConnection) => void;
+    currentPath: string;
+    files: FileItem[];
+    onOpenFile: (file: FileItem) => void;
+    onOpenFolder: (folder: FileItem) => void;
+    onStarFile: (file: FileItem) => void;
+    onDeleteFile: (file: FileItem) => void;
+    isLoading?: boolean;
+    error?: string;
+    isSSHMode: boolean;
+    onSwitchToLocal: () => void;
+    onSwitchToSSH: (conn: SSHConnection) => void;
+    currentSSH?: SSHConnection;
+}
+
+export function ConfigFileSidebarViewer({
+                                            sshConnections,
+                                            onAddSSH,
+                                            onConnectSSH,
+                                            onEditSSH,
+                                            onDeleteSSH,
+                                            onPinSSH,
+                                            currentPath,
+                                            files,
+                                            onOpenFile,
+                                            onOpenFolder,
+                                            onStarFile,
+                                            onDeleteFile,
+                                            isLoading,
+                                            error,
+                                            isSSHMode,
+                                            onSwitchToLocal,
+                                            onSwitchToSSH,
+                                            currentSSH,
+                                        }: ConfigFileSidebarViewerProps) {
+    return (
+        <div className="flex flex-col h-full">
+            {/* SSH Connections */}
+            <div className="p-2 bg-[#18181b] border-b border-[#23232a]">
+                <div className="flex items-center justify-between mb-2">
+                    <span className="text-xs text-muted-foreground font-semibold">SSH Connections</span>
+                    <Button size="icon" variant="outline" onClick={onAddSSH} className="ml-2 h-7 w-7">
+                        <Plus className="w-4 h-4"/>
+                    </Button>
+                </div>
+                <div className="flex flex-col gap-1">
+                    <Button
+                        variant={!isSSHMode ? 'secondary' : 'ghost'}
+                        className="w-full justify-start text-left px-2 py-1.5 rounded"
+                        onClick={onSwitchToLocal}
+                    >
+                        <Server className="w-4 h-4 mr-2"/> Local Files
+                    </Button>
+                    {sshConnections.map((conn) => (
+                        <div key={conn.id} className="flex items-center gap-1 group">
+                            <Button
+                                variant={isSSHMode && currentSSH?.id === conn.id ? 'secondary' : 'ghost'}
+                                className="flex-1 justify-start text-left px-2 py-1.5 rounded"
+                                onClick={() => onSwitchToSSH(conn)}
+                            >
+                                <Link2 className="w-4 h-4 mr-2"/>
+                                {conn.name || conn.ip}
+                                {conn.isPinned && <Pin className="w-3 h-3 ml-1 text-yellow-400"/>}
+                            </Button>
+                            <Button size="icon" variant="ghost" className="h-7 w-7" onClick={() => onPinSSH(conn)}>
+                                <Pin
+                                    className={`w-4 h-4 ${conn.isPinned ? 'text-yellow-400' : 'text-muted-foreground'}`}/>
+                            </Button>
+                            <Button size="icon" variant="ghost" className="h-7 w-7" onClick={() => onEditSSH(conn)}>
+                                <Edit className="w-4 h-4"/>
+                            </Button>
+                            <Button size="icon" variant="ghost" className="h-7 w-7" onClick={() => onDeleteSSH(conn)}>
+                                <Trash2 className="w-4 h-4 text-red-500"/>
+                            </Button>
+                        </div>
+                    ))}
+                </div>
+            </div>
+            {/* File/Folder Viewer */}
+            <div className="flex-1 bg-[#09090b] p-2 overflow-y-auto">
+                <div className="mb-2 flex items-center gap-2">
+                    <span
+                        className="text-xs text-muted-foreground font-semibold">{isSSHMode ? 'SSH Path' : 'Local Path'}</span>
+                    <span className="text-xs text-white truncate">{currentPath}</span>
+                </div>
+                {isLoading ? (
+                    <div className="text-xs text-muted-foreground">Loading...</div>
+                ) : error ? (
+                    <div className="text-xs text-red-500">{error}</div>
+                ) : (
+                    <div className="flex flex-col gap-1">
+                        {files.map((item) => (
+                            <Card key={item.path}
+                                  className="flex items-center gap-2 px-2 py-1 bg-[#18181b] border border-[#23232a] rounded">
+                                <div className="flex items-center gap-2 flex-1 cursor-pointer"
+                                     onClick={() => item.type === 'directory' ? onOpenFolder(item) : onOpenFile(item)}>
+                                    {item.type === 'directory' ? <Folder className="w-4 h-4 text-blue-400"/> :
+                                        <File className="w-4 h-4 text-muted-foreground"/>}
+                                    <span className="text-sm text-white truncate">{item.name}</span>
+                                </div>
+                                <div className="flex items-center gap-1">
+                                    <Button size="icon" variant="ghost" className="h-7 w-7"
+                                            onClick={() => onStarFile(item)}>
+                                        <Pin
+                                            className={`w-4 h-4 ${item.isStarred ? 'text-yellow-400' : 'text-muted-foreground'}`}/>
+                                    </Button>
+                                    <Button size="icon" variant="ghost" className="h-7 w-7"
+                                            onClick={() => onDeleteFile(item)}>
+                                        <Trash2 className="w-4 h-4 text-red-500"/>
+                                    </Button>
+                                </div>
+                            </Card>
+                        ))}
+                        {files.length === 0 &&
+                            <div className="text-xs text-muted-foreground">No files or folders found.</div>}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+} 

src/ui/SSH/Config Editor/ConfigHomeView.tsx

@@ -0,0 +1,206 @@
+import React from 'react';
+import {Button} from '@/components/ui/button.tsx';
+import {Trash2, Folder, File, Plus, Pin} from 'lucide-react';
+import {Tabs, TabsList, TabsTrigger, TabsContent} from '@/components/ui/tabs.tsx';
+import {Input} from '@/components/ui/input.tsx';
+import {useState} from 'react';
+
+interface FileItem {
+    name: string;
+    path: string;
+    isPinned?: boolean;
+    type: 'file' | 'directory';
+    sshSessionId?: string;
+}
+
+interface ShortcutItem {
+    name: string;
+    path: string;
+}
+
+interface ConfigHomeViewProps {
+    recent: FileItem[];
+    pinned: FileItem[];
+    shortcuts: ShortcutItem[];
+    onOpenFile: (file: FileItem) => void;
+    onRemoveRecent: (file: FileItem) => void;
+    onPinFile: (file: FileItem) => void;
+    onUnpinFile: (file: FileItem) => void;
+    onOpenShortcut: (shortcut: ShortcutItem) => void;
+    onRemoveShortcut: (shortcut: ShortcutItem) => void;
+    onAddShortcut: (path: string) => void;
+}
+
+export function ConfigHomeView({
+                                   recent,
+                                   pinned,
+                                   shortcuts,
+                                   onOpenFile,
+                                   onRemoveRecent,
+                                   onPinFile,
+                                   onUnpinFile,
+                                   onOpenShortcut,
+                                   onRemoveShortcut,
+                                   onAddShortcut
+                               }: ConfigHomeViewProps) {
+    const [tab, setTab] = useState<'recent' | 'pinned' | 'shortcuts'>('recent');
+    const [newShortcut, setNewShortcut] = useState('');
+
+
+    const renderFileCard = (file: FileItem, onRemove: () => void, onPin?: () => void, isPinned = false) => (
+        <div key={file.path}
+             className="flex items-center gap-2 px-3 py-2 bg-[#18181b] border border-[#23232a] rounded hover:border-[#434345] transition-colors">
+            <div
+                className="flex items-center gap-2 flex-1 cursor-pointer min-w-0"
+                onClick={() => onOpenFile(file)}
+            >
+                {file.type === 'directory' ?
+                    <Folder className="w-4 h-4 text-blue-400 flex-shrink-0"/> :
+                    <File className="w-4 h-4 text-muted-foreground flex-shrink-0"/>
+                }
+                <div className="flex-1 min-w-0">
+                    <div className="text-sm font-medium text-white break-words leading-tight">
+                        {file.name}
+                    </div>
+                </div>
+            </div>
+            <div className="flex items-center gap-1 flex-shrink-0">
+                {onPin && (
+                    <Button
+                        size="sm"
+                        variant="ghost"
+                        className="h-6 px-1.5 bg-[#23232a] hover:bg-[#2d2d30] rounded-md"
+                        onClick={onPin}
+                    >
+                        <Pin
+                            className={`w-3 h-3 ${isPinned ? 'text-yellow-400 fill-current' : 'text-muted-foreground'}`}/>
+                    </Button>
+                )}
+                {onRemove && (
+                    <Button
+                        size="sm"
+                        variant="ghost"
+                        className="h-6 px-1.5 bg-[#23232a] hover:bg-[#2d2d30] rounded-md"
+                        onClick={onRemove}
+                    >
+                        <Trash2 className="w-3 h-3 text-red-500"/>
+                    </Button>
+                )}
+            </div>
+        </div>
+    );
+
+    const renderShortcutCard = (shortcut: ShortcutItem) => (
+        <div key={shortcut.path}
+             className="flex items-center gap-2 px-3 py-2 bg-[#18181b] border border-[#23232a] rounded hover:border-[#434345] transition-colors">
+            <div
+                className="flex items-center gap-2 flex-1 cursor-pointer min-w-0"
+                onClick={() => onOpenShortcut(shortcut)}
+            >
+                <Folder className="w-4 h-4 text-blue-400 flex-shrink-0"/>
+                <div className="flex-1 min-w-0">
+                    <div className="text-sm font-medium text-white break-words leading-tight">
+                        {shortcut.path}
+                    </div>
+                </div>
+            </div>
+            <div className="flex items-center gap-1 flex-shrink-0">
+                <Button
+                    size="sm"
+                    variant="ghost"
+                    className="h-6 px-1.5 bg-[#23232a] hover:bg-[#2d2d30] rounded-md"
+                    onClick={() => onRemoveShortcut(shortcut)}
+                >
+                    <Trash2 className="w-3 h-3 text-red-500"/>
+                </Button>
+            </div>
+        </div>
+    );
+
+    return (
+        <div className="p-4 flex flex-col gap-4 h-full bg-[#09090b]">
+            <Tabs value={tab} onValueChange={v => setTab(v as 'recent' | 'pinned' | 'shortcuts')} className="w-full">
+                <TabsList className="mb-4 bg-[#18181b] border border-[#23232a]">
+                    <TabsTrigger value="recent" className="data-[state=active]:bg-[#23232a]">Recent</TabsTrigger>
+                    <TabsTrigger value="pinned" className="data-[state=active]:bg-[#23232a]">Pinned</TabsTrigger>
+                    <TabsTrigger value="shortcuts" className="data-[state=active]:bg-[#23232a]">Folder
+                        Shortcuts</TabsTrigger>
+                </TabsList>
+
+                <TabsContent value="recent" className="mt-0">
+                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
+                        {recent.length === 0 ? (
+                            <div className="flex items-center justify-center py-8 col-span-full">
+                                <span className="text-sm text-muted-foreground">No recent files.</span>
+                            </div>
+                        ) : recent.map((file) =>
+                            renderFileCard(
+                                file,
+                                () => onRemoveRecent(file),
+                                () => file.isPinned ? onUnpinFile(file) : onPinFile(file),
+                                file.isPinned
+                            )
+                        )}
+                    </div>
+                </TabsContent>
+
+                <TabsContent value="pinned" className="mt-0">
+                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
+                        {pinned.length === 0 ? (
+                            <div className="flex items-center justify-center py-8 col-span-full">
+                                <span className="text-sm text-muted-foreground">No pinned files.</span>
+                            </div>
+                        ) : pinned.map((file) =>
+                            renderFileCard(
+                                file,
+                                undefined,
+                                () => onUnpinFile(file),
+                                true
+                            )
+                        )}
+                    </div>
+                </TabsContent>
+
+                <TabsContent value="shortcuts" className="mt-0">
+                    <div className="flex items-center gap-3 mb-4 p-3 bg-[#18181b] border border-[#23232a] rounded-lg">
+                        <Input
+                            placeholder="Enter folder path"
+                            value={newShortcut}
+                            onChange={e => setNewShortcut(e.target.value)}
+                            className="flex-1 bg-[#23232a] border-[#434345] text-white placeholder:text-muted-foreground"
+                            onKeyDown={(e) => {
+                                if (e.key === 'Enter' && newShortcut.trim()) {
+                                    onAddShortcut(newShortcut.trim());
+                                    setNewShortcut('');
+                                }
+                            }}
+                        />
+                        <Button
+                            size="sm"
+                            variant="outline"
+                            className="h-8 px-2 bg-[#23232a] border-[#434345] hover:bg-[#2d2d30] rounded-md"
+                            onClick={() => {
+                                if (newShortcut.trim()) {
+                                    onAddShortcut(newShortcut.trim());
+                                    setNewShortcut('');
+                                }
+                            }}
+                        >
+                            <Plus className="w-3.5 h-3.5 mr-1"/>
+                            Add
+                        </Button>
+                    </div>
+                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
+                        {shortcuts.length === 0 ? (
+                            <div className="flex items-center justify-center py-4 col-span-full">
+                                <span className="text-sm text-muted-foreground">No shortcuts.</span>
+                            </div>
+                        ) : shortcuts.map((shortcut) =>
+                            renderShortcutCard(shortcut)
+                        )}
+                    </div>
+                </TabsContent>
+            </Tabs>
+        </div>
+    );
+} 

src/ui/SSH/Config Editor/ConfigTabList.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import {Button} from '@/components/ui/button.tsx';
+import {X, Home} from 'lucide-react';
+
+interface ConfigTab {
+    id: string | number;
+    title: string;
+}
+
+interface ConfigTabListProps {
+    tabs: ConfigTab[];
+    activeTab: string | number;
+    setActiveTab: (tab: string | number) => void;
+    closeTab: (tab: string | number) => void;
+    onHomeClick: () => void;
+}
+
+export function ConfigTabList({tabs, activeTab, setActiveTab, closeTab, onHomeClick}: ConfigTabListProps) {
+    return (
+        <div className="inline-flex items-center h-full px-[0.5rem] overflow-x-auto">
+            <Button
+                onClick={onHomeClick}
+                variant="outline"
+                className={`h-7 mr-[0.5rem] rounded-md flex items-center ${activeTab === 'home' ? '!bg-[#1d1d1f] !text-white !border-[#2d2d30] !hover:bg-[#1d1d1f] !active:bg-[#1d1d1f] !focus:bg-[#1d1d1f] !hover:text-white !active:text-white !focus:text-white' : ''}`}
+            >
+                <Home className="w-4 h-4"/>
+            </Button>
+            {tabs.map((tab, index) => {
+                const isActive = tab.id === activeTab;
+                return (
+                    <div
+                        key={tab.id}
+                        className={index < tabs.length - 1 ? "mr-[0.5rem]" : ""}
+                    >
+                        <div className="inline-flex rounded-md shadow-sm" role="group">
+                            <Button
+                                onClick={() => setActiveTab(tab.id)}
+                                variant="outline"
+                                className={`h-7 rounded-r-none ${isActive ? '!bg-[#1d1d1f] !text-white !border-[#2d2d30] !hover:bg-[#1d1d1f] !active:bg-[#1d1d1f] !focus:bg-[#1d1d1f] !hover:text-white !active:text-white !focus:text-white' : ''}`}
+                            >
+                                {tab.title}
+                            </Button>
+
+                            <Button
+                                onClick={() => closeTab(tab.id)}
+                                variant="outline"
+                                className="h-7 rounded-l-none p-0 !w-9"
+                            >
+                                <X className="!w-5 !h-5" strokeWidth={2.5}/>
+                            </Button>
+                        </div>
+                    </div>
+                );
+            })}
+        </div>
+    );
+} 

src/ui/SSH/Config Editor/ConfigTopbar.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import { ConfigTabList } from "./ConfigTabList.tsx";
+
+export function ConfigTopbar(props: any): React.ReactElement {
+    return (
+        <ConfigTabList {...props} />
+    )
+}

src/ui/SSH/Manager/SSHManager.tsx

@@ -0,0 +1,90 @@
+import React, {useState} from "react";
+import {SSHManagerHostViewer} from "@/ui/SSH/Manager/SSHManagerHostViewer.tsx"
+import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs.tsx";
+import {Separator} from "@/components/ui/separator.tsx";
+import {SSHManagerHostEditor} from "@/ui/SSH/Manager/SSHManagerHostEditor.tsx";
+import {useSidebar} from "@/components/ui/sidebar.tsx";
+
+interface ConfigEditorProps {
+    onSelectView: (view: string) => void;
+}
+
+interface SSHHost {
+    id: number;
+    name: string;
+    ip: string;
+    port: number;
+    username: string;
+    folder: string;
+    tags: string[];
+    pin: boolean;
+    authType: string;
+    password?: string;
+    key?: string;
+    keyPassword?: string;
+    keyType?: string;
+    enableTerminal: boolean;
+    enableTunnel: boolean;
+    enableConfigEditor: boolean;
+    defaultPath: string;
+    tunnelConnections: any[];
+    createdAt: string;
+    updatedAt: string;
+}
+
+export function SSHManager({onSelectView}: ConfigEditorProps): React.ReactElement {
+    const [activeTab, setActiveTab] = useState("host_viewer");
+    const [editingHost, setEditingHost] = useState<SSHHost | null>(null);
+    const {state: sidebarState} = useSidebar();
+
+    const handleEditHost = (host: SSHHost) => {
+        setEditingHost(host);
+        setActiveTab("add_host");
+    };
+
+    const handleFormSubmit = () => {
+        setEditingHost(null);
+        setActiveTab("host_viewer");
+    };
+
+    const handleTabChange = (value: string) => {
+        setActiveTab(value);
+        if (value === "host_viewer") {
+            setEditingHost(null);
+        }
+    };
+
+    return (
+        <div>
+            <div className="flex w-full h-screen overflow-hidden">
+                <div
+                    className={`flex-1 bg-[#18181b] m-[8px] text-white p-4 pt-0 rounded-lg border border-[#303032] flex flex-col min-h-0 ${
+                        sidebarState === 'collapsed' ? 'ml-6' : ''
+                    }`}>
+                    <Tabs value={activeTab} onValueChange={handleTabChange}
+                          className="flex-1 flex flex-col h-full min-h-0">
+                        <TabsList className="mt-1.5">
+                            <TabsTrigger value="host_viewer">Host Viewer</TabsTrigger>
+                            <TabsTrigger value="add_host">
+                                {editingHost ? "Edit Host" : "Add Host"}
+                            </TabsTrigger>
+                        </TabsList>
+                        <TabsContent value="host_viewer" className="flex-1 flex flex-col h-full min-h-0">
+                            <Separator className="p-0.25 -mt-0.5 mb-1"/>
+                            <SSHManagerHostViewer onEditHost={handleEditHost}/>
+                        </TabsContent>
+                        <TabsContent value="add_host" className="flex-1 flex flex-col h-full min-h-0">
+                            <Separator className="p-0.25 -mt-0.5 mb-1"/>
+                            <div className="flex flex-col h-full min-h-0">
+                                <SSHManagerHostEditor
+                                    editingHost={editingHost}
+                                    onFormSubmit={handleFormSubmit}
+                                />
+                            </div>
+                        </TabsContent>
+                    </Tabs>
+                </div>
+            </div>
+        </div>
+    )
+}

src/ui/SSH/Manager/SSHManagerHostViewer.tsx

@@ -0,0 +1,730 @@
+import React, {useState, useEffect, useMemo} from "react";
+import {Card, CardContent} from "@/components/ui/card";
+import {Button} from "@/components/ui/button";
+import {Badge} from "@/components/ui/badge";
+import {ScrollArea} from "@/components/ui/scroll-area";
+import {Input} from "@/components/ui/input";
+import {Accordion, AccordionContent, AccordionItem, AccordionTrigger} from "@/components/ui/accordion";
+import {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from "@/components/ui/tooltip";
+import {getSSHHosts, deleteSSHHost, bulkImportSSHHosts} from "@/ui/SSH/ssh-axios";
+import {
+    Edit,
+    Trash2,
+    Server,
+    Folder,
+    Tag,
+    Pin,
+    Terminal,
+    Network,
+    FileEdit,
+    Search,
+    Upload,
+    Info
+} from "lucide-react";
+import {Separator} from "@/components/ui/separator.tsx";
+
+interface SSHHost {
+    id: number;
+    name: string;
+    ip: string;
+    port: number;
+    username: string;
+    folder: string;
+    tags: string[];
+    pin: boolean;
+    authType: string;
+    enableTerminal: boolean;
+    enableTunnel: boolean;
+    enableConfigEditor: boolean;
+    defaultPath: string;
+    tunnelConnections: any[];
+    createdAt: string;
+    updatedAt: string;
+}
+
+interface SSHManagerHostViewerProps {
+    onEditHost?: (host: SSHHost) => void;
+}
+
+export function SSHManagerHostViewer({onEditHost}: SSHManagerHostViewerProps) {
+    const [hosts, setHosts] = useState<SSHHost[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [searchQuery, setSearchQuery] = useState("");
+    const [importing, setImporting] = useState(false);
+
+    useEffect(() => {
+        fetchHosts();
+    }, []);
+
+    const fetchHosts = async () => {
+        try {
+            setLoading(true);
+            const data = await getSSHHosts();
+            setHosts(data);
+            setError(null);
+        } catch (err) {
+            setError('Failed to load hosts');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleDelete = async (hostId: number, hostName: string) => {
+        if (window.confirm(`Are you sure you want to delete "${hostName}"?`)) {
+            try {
+                await deleteSSHHost(hostId);
+                await fetchHosts();
+            } catch (err) {
+                alert('Failed to delete host');
+            }
+        }
+    };
+
+    const handleEdit = (host: SSHHost) => {
+        if (onEditHost) {
+            onEditHost(host);
+        }
+    };
+
+    const handleJsonImport = async (event: React.ChangeEvent<HTMLInputElement>) => {
+        const file = event.target.files?.[0];
+        if (!file) return;
+
+        try {
+            setImporting(true);
+            const text = await file.text();
+            const data = JSON.parse(text);
+
+            if (!Array.isArray(data.hosts) && !Array.isArray(data)) {
+                throw new Error('JSON must contain a "hosts" array or be an array of hosts');
+            }
+
+            const hostsArray = Array.isArray(data.hosts) ? data.hosts : data;
+
+            if (hostsArray.length === 0) {
+                throw new Error('No hosts found in JSON file');
+            }
+
+            if (hostsArray.length > 100) {
+                throw new Error('Maximum 100 hosts allowed per import');
+            }
+
+            const result = await bulkImportSSHHosts(hostsArray);
+
+            if (result.success > 0) {
+                alert(`Import completed: ${result.success} successful, ${result.failed} failed${result.errors.length > 0 ? '\n\nErrors:\n' + result.errors.join('\n') : ''}`);
+                await fetchHosts();
+            } else {
+                alert(`Import failed: ${result.errors.join('\n')}`);
+            }
+
+        } catch (err) {
+            const errorMessage = err instanceof Error ? err.message : 'Failed to import JSON file';
+            alert(`Import error: ${errorMessage}`);
+        } finally {
+            setImporting(false);
+            event.target.value = '';
+        }
+    };
+
+    const filteredAndSortedHosts = useMemo(() => {
+        let filtered = hosts;
+
+        if (searchQuery.trim()) {
+            const query = searchQuery.toLowerCase();
+            filtered = hosts.filter(host => {
+                const searchableText = [
+                    host.name || '',
+                    host.username,
+                    host.ip,
+                    host.folder || '',
+                    ...(host.tags || []),
+                    host.authType,
+                    host.defaultPath || ''
+                ].join(' ').toLowerCase();
+                return searchableText.includes(query);
+            });
+        }
+
+        return filtered.sort((a, b) => {
+            if (a.pin && !b.pin) return -1;
+            if (!a.pin && b.pin) return 1;
+
+            const aName = a.name || a.username;
+            const bName = b.name || b.username;
+            return aName.localeCompare(bName);
+        });
+    }, [hosts, searchQuery]);
+
+    const hostsByFolder = useMemo(() => {
+        const grouped: { [key: string]: SSHHost[] } = {};
+
+        filteredAndSortedHosts.forEach(host => {
+            const folder = host.folder || 'Uncategorized';
+            if (!grouped[folder]) {
+                grouped[folder] = [];
+            }
+            grouped[folder].push(host);
+        });
+
+        const sortedFolders = Object.keys(grouped).sort((a, b) => {
+            if (a === 'Uncategorized') return -1;
+            if (b === 'Uncategorized') return 1;
+            return a.localeCompare(b);
+        });
+
+        const sortedGrouped: { [key: string]: SSHHost[] } = {};
+        sortedFolders.forEach(folder => {
+            sortedGrouped[folder] = grouped[folder];
+        });
+
+        return sortedGrouped;
+    }, [filteredAndSortedHosts]);
+
+    if (loading) {
+        return (
+            <div className="flex items-center justify-center h-full">
+                <div className="text-center">
+                    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-white mx-auto mb-2"></div>
+                    <p className="text-muted-foreground">Loading hosts...</p>
+                </div>
+            </div>
+        );
+    }
+
+    if (error) {
+        return (
+            <div className="flex items-center justify-center h-full">
+                <div className="text-center">
+                    <p className="text-red-500 mb-4">{error}</p>
+                    <Button onClick={fetchHosts} variant="outline">
+                        Retry
+                    </Button>
+                </div>
+            </div>
+        );
+    }
+
+    if (hosts.length === 0) {
+        return (
+            <div className="flex items-center justify-center h-full">
+                <div className="text-center">
+                    <Server className="h-12 w-12 text-muted-foreground mx-auto mb-4"/>
+                    <h3 className="text-lg font-semibold mb-2">No SSH Hosts</h3>
+                    <p className="text-muted-foreground mb-4">
+                        You haven't added any SSH hosts yet. Click "Add Host" to get started.
+                    </p>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="flex flex-col h-full min-h-0">
+            <div className="flex items-center justify-between mb-2">
+                <div>
+                    <h2 className="text-xl font-semibold">SSH Hosts</h2>
+                    <p className="text-muted-foreground">
+                        {filteredAndSortedHosts.length} hosts
+                    </p>
+                </div>
+                <div className="flex items-center gap-2">
+                    <TooltipProvider>
+                        <Tooltip>
+                            <TooltipTrigger asChild>
+                                <Button
+                                    variant="outline"
+                                    size="sm"
+                                    className="relative"
+                                    onClick={() => document.getElementById('json-import-input')?.click()}
+                                    disabled={importing}
+                                >
+                                    {importing ? 'Importing...' : 'Import JSON'}
+                                </Button>
+                            </TooltipTrigger>
+                            <TooltipContent side="bottom"
+                                            className="max-w-sm bg-popover text-popover-foreground border border-border shadow-lg">
+                                <div className="space-y-2">
+                                    <p className="font-semibold text-sm">Import SSH Hosts from JSON</p>
+                                    <p className="text-xs text-muted-foreground">
+                                        Upload a JSON file to bulk import multiple SSH hosts (max 100).
+                                    </p>
+                                </div>
+                            </TooltipContent>
+                        </Tooltip>
+                    </TooltipProvider>
+
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => {
+                            const sampleData = {
+                                hosts: [
+                                    {
+                                        name: "Web Server - Production",
+                                        ip: "192.168.1.100",
+                                        port: 22,
+                                        username: "admin",
+                                        authType: "password",
+                                        password: "your_secure_password_here",
+                                        folder: "Production",
+                                        tags: ["web", "production", "nginx"],
+                                        pin: true,
+                                        enableTerminal: true,
+                                        enableTunnel: false,
+                                        enableConfigEditor: true,
+                                        defaultPath: "/var/www"
+                                    },
+                                    {
+                                        name: "Database Server",
+                                        ip: "192.168.1.101",
+                                        port: 22,
+                                        username: "dbadmin",
+                                        authType: "key",
+                                        key: "-----BEGIN OPENSSH PRIVATE KEY-----\nYour SSH private key content here\n-----END OPENSSH PRIVATE KEY-----",
+                                        keyPassword: "optional_key_passphrase",
+                                        keyType: "ssh-ed25519",
+                                        folder: "Production",
+                                        tags: ["database", "production", "postgresql"],
+                                        pin: false,
+                                        enableTerminal: true,
+                                        enableTunnel: true,
+                                        enableConfigEditor: false,
+                                        tunnelConnections: [
+                                            {
+                                                sourcePort: 5432,
+                                                endpointPort: 5432,
+                                                endpointHost: "Web Server - Production",
+                                                maxRetries: 3,
+                                                retryInterval: 10,
+                                                autoStart: true
+                                            }
+                                        ]
+                                    }
+                                ]
+                            };
+
+                            const blob = new Blob([JSON.stringify(sampleData, null, 2)], {type: 'application/json'});
+                            const url = URL.createObjectURL(blob);
+                            const a = document.createElement('a');
+                            a.href = url;
+                            a.download = 'sample-ssh-hosts.json';
+                            document.body.appendChild(a);
+                            a.click();
+                            document.body.removeChild(a);
+                            URL.revokeObjectURL(url);
+                        }}
+                    >
+                        Download Sample
+                    </Button>
+
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => {
+                            const infoContent = `
+JSON Import Format Guide
+
+REQUIRED FIELDS:
+• ip: Host IP address (string)
+• port: SSH port (number, 1-65535)
+• username: SSH username (string)
+• authType: "password" or "key"
+
+AUTHENTICATION FIELDS:
+• password: Required if authType is "password"
+• key: SSH private key content (string) if authType is "key"
+• keyPassword: Optional key passphrase
+• keyType: Key type (auto, ssh-rsa, ssh-ed25519, etc.)
+
+OPTIONAL FIELDS:
+• name: Display name (string)
+• folder: Organization folder (string)
+• tags: Array of tag strings
+• pin: Pin to top (boolean)
+• enableTerminal: Show in Terminal tab (boolean, default: true)
+• enableTunnel: Show in Tunnel tab (boolean, default: true)
+• enableConfigEditor: Show in Config Editor tab (boolean, default: true)
+• defaultPath: Default directory path (string)
+
+TUNNEL CONFIGURATION:
+• tunnelConnections: Array of tunnel objects
+  - sourcePort: Local port (number)
+  - endpointPort: Remote port (number)
+  - endpointHost: Target host name (string)
+  - maxRetries: Retry attempts (number, default: 3)
+  - retryInterval: Retry delay in seconds (number, default: 10)
+  - autoStart: Auto-start on launch (boolean, default: false)
+
+EXAMPLE STRUCTURE:
+{
+  "hosts": [
+    {
+      "name": "Web Server",
+      "ip": "192.168.1.100",
+      "port": 22,
+      "username": "admin",
+      "authType": "password",
+      "password": "your_password",
+      "folder": "Production",
+      "tags": ["web", "production"],
+      "pin": true,
+      "enableTerminal": true,
+      "enableTunnel": false,
+      "enableConfigEditor": true,
+      "defaultPath": "/var/www"
+    }
+  ]
+}
+
+• Maximum 100 hosts per import
+• File should contain a "hosts" array or be an array of host objects
+• All fields are copyable for easy reference
+                            `;
+
+                            const newWindow = window.open('', '_blank', 'width=600,height=800,scrollbars=yes,resizable=yes');
+                            if (newWindow) {
+                                newWindow.document.write(`
+                                    <!DOCTYPE html>
+                                    <html>
+                                    <head>
+                                        <title>SSH JSON Import Guide</title>
+                                        <style>
+                                            body { 
+                                                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
+                                                margin: 20px; 
+                                                background: #1a1a1a; 
+                                                color: #ffffff; 
+                                                line-height: 1.6;
+                                            }
+                                            pre { 
+                                                background: #2a2a2a; 
+                                                padding: 15px; 
+                                                border-radius: 5px; 
+                                                overflow-x: auto; 
+                                                border: 1px solid #404040;
+                                            }
+                                            code { 
+                                                background: #404040; 
+                                                padding: 2px 4px; 
+                                                border-radius: 3px; 
+                                                font-family: 'Consolas', 'Monaco', monospace;
+                                            }
+                                            h1 { color: #60a5fa; border-bottom: 2px solid #60a5fa; padding-bottom: 10px; }
+                                            h2 { color: #34d399; margin-top: 25px; }
+                                            .field-group { margin: 15px 0; }
+                                            .field-item { margin: 8px 0; }
+                                            .copy-btn { 
+                                                background: #3b82f6; 
+                                                color: white; 
+                                                border: none; 
+                                                padding: 5px 10px; 
+                                                border-radius: 3px; 
+                                                cursor: pointer; 
+                                                margin-left: 10px;
+                                            }
+                                            .copy-btn:hover { background: #2563eb; }
+                                        </style>
+                                    </head>
+                                    <body>
+                                        <h1>SSH JSON Import Format Guide</h1>
+                                        <p>Use this guide to create JSON files for bulk importing SSH hosts. All examples are copyable.</p>
+                                        
+                                        <h2>Required Fields</h2>
+                                        <div class="field-group">
+                                            <div class="field-item">
+                                                <code>ip</code> - Host IP address (string)
+                                                <button class="copy-btn" onclick="navigator.clipboard.writeText('ip')">Copy</button>
+                                            </div>
+                                            <div class="field-item">
+                                                <code>port</code> - SSH port (number, 1-65535)
+                                                <button class="copy-btn" onclick="navigator.clipboard.writeText('port')">Copy</button>
+                                            </div>
+                                            <div class="field-item">
+                                                <code>username</code> - SSH username (string)
+                                                <button class="copy-btn" onclick="navigator.clipboard.writeText('username')">Copy</button>
+                                            </div>
+                                            <div class="field-item">
+                                                <code>authType</code> - "password" or "key"
+                                                <button class="copy-btn" onclick="navigator.clipboard.writeText('authType')">Copy</button>
+                                            </div>
+                                        </div>
+                                        
+                                        <h2>Authentication Fields</h2>
+                                        <div class="field-group">
+                                            <div class="field-item">
+                                                <code>password</code> - Required if authType is "password"
+                                                <button class="copy-btn" onclick="navigator.clipboard.writeText('password')">Copy</button>
+                                            </div>
+                                            <div class="field-item">
+                                                <code>key</code> - SSH private key content (string) if authType is "key"
+                                                <button class="copy-btn" onclick="navigator.clipboard.writeText('key')">Copy</button>
+                                            </div>
+                                            <div class="field-item">
+                                                <code>keyPassword</code> - Optional key passphrase
+                                                <button class="copy-btn" onclick="navigator.clipboard.writeText('keyPassword')">Copy</button>
+                                            </div>
+                                            <div class="field-item">
+                                                <code>keyType</code> - Key type (auto, ssh-rsa, ssh-ed25519, etc.)
+                                                <button class="copy-btn" onclick="navigator.clipboard.writeText('keyType')">Copy</button>
+                                            </div>
+                                        </div>
+                                        
+                                        <h2>Optional Fields</h2>
+                                        <div class="field-group">
+                                            <div class="field-item">
+                                                <code>name</code> - Display name (string)
+                                                <button class="copy-btn" onclick="navigator.clipboard.writeText('name')">Copy</button>
+                                            </div>
+                                            <div class="field-item">
+                                                <code>folder</code> - Organization folder (string)
+                                                <button class="copy-btn" onclick="navigator.clipboard.writeText('folder')">Copy</button>
+                                            </div>
+                                            <div class="field-item">
+                                                <code>tags</code> - Array of tag strings
+                                                <button class="copy-btn" onclick="navigator.clipboard.writeText('tags')">Copy</button>
+                                            </div>
+                                            <div class="field-item">
+                                                <code>pin</code> - Pin to top (boolean)
+                                                <button class="copy-btn" onclick="navigator.clipboard.writeText('pin')">Copy</button>
+                                            </div>
+                                            <div class="field-item">
+                                                <code>enableTerminal</code> - Show in Terminal tab (boolean, default: true)
+                                                <button class="copy-btn" onclick="navigator.clipboard.writeText('enableTerminal')">Copy</button>
+                                            </div>
+                                            <div class="field-item">
+                                                <code>enableTunnel</code> - Show in Tunnel tab (boolean, default: true)
+                                                <button class="copy-btn" onclick="navigator.clipboard.writeText('enableTunnel')">Copy</button>
+                                            </div>
+                                            <div class="field-item">
+                                                <code>enableConfigEditor</code> - Show in Config Editor tab (boolean, default: true)
+                                                <button class="copy-btn" onclick="navigator.clipboard.writeText('enableConfigEditor')">Copy</button>
+                                            </div>
+                                            <div class="field-item">
+                                                <code>defaultPath</code> - Default directory path (string)
+                                                <button class="copy-btn" onclick="navigator.clipboard.writeText('defaultPath')">Copy</button>
+                                            </div>
+                                        </div>
+                                        
+                                        <h2>Tunnel Configuration</h2>
+                                        <div class="field-group">
+                                            <div class="field-item">
+                                                <code>tunnelConnections</code> - Array of tunnel objects
+                                                <button class="copy-btn" onclick="navigator.clipboard.writeText('tunnelConnections')">Copy</button>
+                                            </div>
+                                            <div style="margin-left: 20px;">
+                                                <div class="field-item">
+                                                    <code>sourcePort</code> - Local port (number)
+                                                    <button class="copy-btn" onclick="navigator.clipboard.writeText('sourcePort')">Copy</button>
+                                                </div>
+                                                <div class="field-item">
+                                                    <code>endpointPort</code> - Remote port (number)
+                                                    <button class="copy-btn" onclick="navigator.clipboard.writeText('endpointPort')">Copy</button>
+                                                </div>
+                                                <div class="field-item">
+                                                    <code>endpointHost</code> - Target host name (string)
+                                                    <button class="copy-btn" onclick="navigator.clipboard.writeText('endpointHost')">Copy</button>
+                                                </div>
+                                                <div class="field-item">
+                                                    <code>maxRetries</code> - Retry attempts (number, default: 3)
+                                                    <button class="copy-btn" onclick="navigator.clipboard.writeText('maxRetries')">Copy</button>
+                                                </div>
+                                                <div class="field-item">
+                                                    <code>retryInterval</code> - Retry delay in seconds (number, default: 10)
+                                                    <button class="copy-btn" onclick="navigator.clipboard.writeText('retryInterval')">Copy</button>
+                                                </div>
+                                                <div class="field-item">
+                                                    <code>autoStart</code> - Auto-start on launch (boolean, default: false)
+                                                    <button class="copy-btn" onclick="navigator.clipboard.writeText('autoStart')">Copy</button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        
+                                        <h2>Example JSON Structure</h2>
+                                        <pre><code>{
+  "hosts": [
+    {
+      "name": "Web Server",
+      "ip": "192.168.1.100",
+      "port": 22,
+      "username": "admin",
+      "authType": "password",
+      "password": "your_password",
+      "folder": "Production",
+      "tags": ["web", "production"],
+      "pin": true,
+      "enableTerminal": true,
+      "enableTunnel": false,
+      "enableConfigEditor": true,
+      "defaultPath": "/var/www"
+    }
+  ]
+}</code></pre>
+                                        
+                                        <h2>Important Notes</h2>
+                                        <ul>
+                                            <li>Maximum 100 hosts per import</li>
+                                            <li>File should contain a "hosts" array or be an array of host objects</li>
+                                            <li>All fields are copyable for easy reference</li>
+                                            <li>Use the Download Sample button to get a complete example file</li>
+                                        </ul>
+                                    </body>
+                                    </html>
+                                `);
+                                newWindow.document.close();
+                            }
+                        }}
+                    >
+                        Format Guide
+                    </Button>
+
+                    <div className="w-px h-6 bg-border mx-2" />
+
+                    <Button onClick={fetchHosts} variant="outline" size="sm">
+                        Refresh
+                    </Button>
+                </div>
+            </div>
+
+            <input
+                id="json-import-input"
+                type="file"
+                accept=".json"
+                onChange={handleJsonImport}
+                style={{display: 'none'}}
+            />
+
+            <div className="relative mb-3">
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground"/>
+                <Input
+                    placeholder="Search hosts by name, username, IP, folder, tags..."
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    className="pl-10"
+                />
+            </div>
+
+            <ScrollArea className="flex-1 min-h-0">
+                <div className="space-y-2 pb-20">
+                    {Object.entries(hostsByFolder).map(([folder, folderHosts]) => (
+                        <div key={folder} className="border rounded-md">
+                            <Accordion type="multiple" defaultValue={Object.keys(hostsByFolder)}>
+                                <AccordionItem value={folder} className="border-none">
+                                    <AccordionTrigger
+                                        className="px-2 py-1 bg-muted/20 border-b hover:no-underline rounded-t-md">
+                                        <div className="flex items-center gap-2">
+                                            <Folder className="h-4 w-4"/>
+                                            <span className="font-medium">{folder}</span>
+                                            <Badge variant="secondary" className="text-xs">
+                                                {folderHosts.length}
+                                            </Badge>
+                                        </div>
+                                    </AccordionTrigger>
+                                    <AccordionContent className="p-2">
+                                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
+                                            {folderHosts.map((host) => (
+                                                <div
+                                                    key={host.id}
+                                                    className="bg-[#222225] border border-input rounded cursor-pointer hover:shadow-md transition-shadow p-2"
+                                                    onClick={() => handleEdit(host)}
+                                                >
+                                                    <div className="flex items-start justify-between">
+                                                        <div className="flex-1 min-w-0">
+                                                            <div className="flex items-center gap-1">
+                                                                {host.pin && <Pin
+                                                                    className="h-3 w-3 text-yellow-500 flex-shrink-0"/>}
+                                                                <h3 className="font-medium truncate text-sm">
+                                                                    {host.name || `${host.username}@${host.ip}`}
+                                                                </h3>
+                                                            </div>
+                                                            <p className="text-xs text-muted-foreground truncate">
+                                                                {host.ip}:{host.port}
+                                                            </p>
+                                                            <p className="text-xs text-muted-foreground truncate">
+                                                                {host.username}
+                                                            </p>
+                                                        </div>
+                                                        <div className="flex gap-1 flex-shrink-0 ml-1">
+                                                            <Button
+                                                                size="sm"
+                                                                variant="ghost"
+                                                                onClick={(e) => {
+                                                                    e.stopPropagation();
+                                                                    handleEdit(host);
+                                                                }}
+                                                                className="h-5 w-5 p-0"
+                                                            >
+                                                                <Edit className="h-3 w-3"/>
+                                                            </Button>
+                                                            <Button
+                                                                size="sm"
+                                                                variant="ghost"
+                                                                onClick={(e) => {
+                                                                    e.stopPropagation();
+                                                                    handleDelete(host.id, host.name || `${host.username}@${host.ip}`);
+                                                                }}
+                                                                className="h-5 w-5 p-0 text-red-500 hover:text-red-700"
+                                                            >
+                                                                <Trash2 className="h-3 w-3"/>
+                                                            </Button>
+                                                        </div>
+                                                    </div>
+
+                                                    <div className="mt-2 space-y-1">
+                                                        {host.tags && host.tags.length > 0 && (
+                                                            <div className="flex flex-wrap gap-1">
+                                                                {host.tags.slice(0, 6).map((tag, index) => (
+                                                                    <Badge key={index} variant="secondary"
+                                                                           className="text-xs px-1 py-0">
+                                                                        <Tag className="h-2 w-2 mr-0.5"/>
+                                                                        {tag}
+                                                                    </Badge>
+                                                                ))}
+                                                                {host.tags.length > 6 && (
+                                                                    <Badge variant="outline"
+                                                                           className="text-xs px-1 py-0">
+                                                                        +{host.tags.length - 6}
+                                                                    </Badge>
+                                                                )}
+                                                            </div>
+                                                        )}
+
+                                                        <div className="flex flex-wrap gap-1">
+                                                            {host.enableTerminal && (
+                                                                <Badge variant="outline" className="text-xs px-1 py-0">
+                                                                    <Terminal className="h-2 w-2 mr-0.5"/>
+                                                                    Terminal
+                                                                </Badge>
+                                                            )}
+                                                            {host.enableTunnel && (
+                                                                <Badge variant="outline" className="text-xs px-1 py-0">
+                                                                    <Network className="h-2 w-2 mr-0.5"/>
+                                                                    Tunnel
+                                                                    {host.tunnelConnections && host.tunnelConnections.length > 0 && (
+                                                                        <span
+                                                                            className="ml-0.5">({host.tunnelConnections.length})</span>
+                                                                    )}
+                                                                </Badge>
+                                                            )}
+                                                            {host.enableConfigEditor && (
+                                                                <Badge variant="outline" className="text-xs px-1 py-0">
+                                                                    <FileEdit className="h-2 w-2 mr-0.5"/>
+                                                                    Config
+                                                                </Badge>
+                                                            )}
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            ))}
+                                        </div>
+                                    </AccordionContent>
+                                </AccordionItem>
+                            </Accordion>
+                        </div>
+                    ))}
+                </div>
+            </ScrollArea>
+        </div>
+    );
+}

src/ui/SSH/Terminal/Terminal.tsx

@@ -0,0 +1,784 @@
+import React, {useState, useRef, useEffect} from "react";
+import {TerminalSidebar} from "@/ui/SSH/Terminal/TerminalSidebar.tsx";
+import {TerminalComponent} from "./TerminalComponent.tsx";
+import {TerminalTopbar} from "@/ui/SSH/Terminal/TerminalTopbar.tsx";
+import {ResizablePanelGroup, ResizablePanel, ResizableHandle} from '@/components/ui/resizable.tsx';
+import * as ResizablePrimitive from "react-resizable-panels";
+import {ChevronDown, ChevronRight} from "lucide-react";
+
+interface ConfigEditorProps {
+    onSelectView: (view: string) => void;
+}
+
+type Tab = {
+    id: number;
+    title: string;
+    hostConfig: any;
+    terminalRef: React.RefObject<any>;
+};
+
+export function Terminal({onSelectView}: ConfigEditorProps): React.ReactElement {
+    const [allTabs, setAllTabs] = useState<Tab[]>([]);
+    const [currentTab, setCurrentTab] = useState<number | null>(null);
+    const [allSplitScreenTab, setAllSplitScreenTab] = useState<number[]>([]);
+    const nextTabId = useRef(1);
+
+    const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(true);
+    const [isTopbarOpen, setIsTopbarOpen] = useState<boolean>(true);
+    const SIDEBAR_WIDTH = 256;
+    const HANDLE_THICKNESS = 10;
+
+    const [panelRects, setPanelRects] = useState<Record<string, DOMRect | null>>({});
+    const panelRefs = useRef<Record<string, HTMLDivElement | null>>({});
+    const panelGroupRefs = useRef<{ [key: string]: any }>({});
+
+    const setActiveTab = (tabId: number) => {
+        setCurrentTab(tabId);
+    };
+
+    const fitVisibleTerminals = () => {
+        allTabs.forEach((terminal) => {
+            const isVisible =
+                (allSplitScreenTab.length === 0 && terminal.id === currentTab) ||
+                (allSplitScreenTab.length > 0 && (terminal.id === currentTab || allSplitScreenTab.includes(terminal.id)));
+            if (isVisible && terminal.terminalRef && terminal.terminalRef.current && typeof terminal.terminalRef.current.fit === 'function') {
+                terminal.terminalRef.current.fit();
+            }
+        });
+    };
+
+    const setSplitScreenTab = (tabId: number) => {
+        fitVisibleTerminals();
+        setAllSplitScreenTab((prev) => {
+            let next;
+            if (prev.includes(tabId)) {
+                next = prev.filter((id) => id !== tabId);
+            } else if (prev.length < 3) {
+                next = [...prev, tabId];
+            } else {
+                next = prev;
+            }
+            setTimeout(() => fitVisibleTerminals(), 0);
+            return next;
+        });
+    };
+
+    const setCloseTab = (tabId: number) => {
+        const tab = allTabs.find((t) => t.id === tabId);
+        if (tab && tab.terminalRef && tab.terminalRef.current && typeof tab.terminalRef.current.disconnect === "function") {
+            tab.terminalRef.current.disconnect();
+        }
+        setAllTabs((prev) => prev.filter((tab) => tab.id !== tabId));
+        setAllSplitScreenTab((prev) => prev.filter((id) => id !== tabId));
+        if (currentTab === tabId) {
+            const remainingTabs = allTabs.filter((tab) => tab.id !== tabId);
+            setCurrentTab(remainingTabs.length > 0 ? remainingTabs[0].id : null);
+        }
+    };
+
+    const updatePanelRects = () => {
+        setPanelRects((prev) => {
+            const next: Record<string, DOMRect | null> = {...prev};
+            Object.entries(panelRefs.current).forEach(([id, ref]) => {
+                if (ref) {
+                    next[id] = ref.getBoundingClientRect();
+                }
+            });
+            return next;
+        });
+    };
+
+    useEffect(() => {
+        const observers: ResizeObserver[] = [];
+        Object.entries(panelRefs.current).forEach(([id, ref]) => {
+            if (ref) {
+                const observer = new ResizeObserver(() => updatePanelRects());
+                observer.observe(ref);
+                observers.push(observer);
+            }
+        });
+        updatePanelRects();
+        return () => {
+            observers.forEach((observer) => observer.disconnect());
+        };
+    }, [allSplitScreenTab, currentTab, allTabs.length]);
+
+    const renderAllTerminals = () => {
+        const layoutStyles: Record<number, React.CSSProperties> = {};
+        const splitTabs = allTabs.filter((tab) => allSplitScreenTab.includes(tab.id));
+        const mainTab = allTabs.find((tab) => tab.id === currentTab);
+        const layoutTabs = [mainTab, ...splitTabs.filter((t) => t && t.id !== (mainTab && mainTab.id))].filter((t): t is Tab => !!t);
+        if (allSplitScreenTab.length === 0 && mainTab) {
+            layoutStyles[mainTab.id] = {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '100%',
+                zIndex: 20,
+                display: 'block',
+                pointerEvents: 'auto',
+            };
+        } else {
+            layoutTabs.forEach((tab) => {
+                const rect = panelRects[String(tab.id)];
+                if (rect) {
+                    const parentRect = panelRefs.current['parent']?.getBoundingClientRect();
+                    let top = rect.top, left = rect.left, width = rect.width, height = rect.height;
+                    if (parentRect) {
+                        top = rect.top - parentRect.top;
+                        left = rect.left - parentRect.left;
+                    }
+                    layoutStyles[tab.id] = {
+                        position: 'absolute',
+                        top: top + 28,
+                        left,
+                        width,
+                        height: height - 28,
+                        zIndex: 20,
+                        display: 'block',
+                        pointerEvents: 'auto',
+                    };
+                }
+            });
+        }
+        return (
+            <div ref={el => {
+                panelRefs.current['parent'] = el;
+            }} style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '100%',
+                zIndex: 1,
+                overflow: 'hidden'
+            }}>
+                {allTabs.map((tab) => {
+                    const style = layoutStyles[tab.id]
+                        ? {...layoutStyles[tab.id], overflow: 'hidden'}
+                        : {display: 'none', overflow: 'hidden'};
+                    const isVisible = !!layoutStyles[tab.id];
+                    return (
+                        <div key={tab.id} style={style} data-terminal-id={tab.id}>
+                            <TerminalComponent
+                                key={tab.id}
+                                ref={tab.terminalRef}
+                                hostConfig={tab.hostConfig}
+                                isVisible={isVisible}
+                                title={tab.title}
+                                showTitle={false}
+                                splitScreen={allSplitScreenTab.length > 0}
+                            />
+                        </div>
+                    );
+                })}
+            </div>
+        );
+    };
+
+    const renderSplitOverlays = () => {
+        const splitTabs = allTabs.filter((tab) => allSplitScreenTab.includes(tab.id));
+        const mainTab = allTabs.find((tab) => tab.id === currentTab);
+        const layoutTabs = [mainTab, ...splitTabs.filter((t) => t && t.id !== (mainTab && mainTab.id))].filter((t): t is Tab => !!t);
+        if (allSplitScreenTab.length === 0) return null;
+
+        if (layoutTabs.length === 2) {
+            const [tab1, tab2] = layoutTabs;
+            return (
+                <div style={{
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    height: '100%',
+                    zIndex: 10,
+                    pointerEvents: 'none'
+                }}>
+                    <ResizablePrimitive.PanelGroup
+                        ref={el => {
+                            panelGroupRefs.current['main'] = el;
+                        }}
+                        direction="horizontal"
+                        className="h-full w-full"
+                        id="main-horizontal"
+                    >
+                        <ResizablePanel key={tab1.id} defaultSize={50} minSize={20}
+                                        className="!overflow-hidden h-full w-full" id={`panel-${tab1.id}`} order={1}>
+                            <div ref={el => {
+                                panelRefs.current[String(tab1.id)] = el;
+                            }} style={{
+                                height: '100%',
+                                width: '100%',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                background: 'transparent',
+                                margin: 0,
+                                padding: 0,
+                                position: 'relative'
+                            }}>
+                                <div style={{
+                                    background: '#18181b',
+                                    color: '#fff',
+                                    fontSize: 13,
+                                    height: 28,
+                                    lineHeight: '28px',
+                                    padding: '0 10px',
+                                    borderBottom: '1px solid #222224',
+                                    letterSpacing: 1,
+                                    margin: 0,
+                                    pointerEvents: 'auto',
+                                    zIndex: 11,
+                                }}>{tab1.title}</div>
+                            </div>
+                        </ResizablePanel>
+                        <ResizableHandle style={{pointerEvents: 'auto', zIndex: 12}}/>
+                        <ResizablePanel key={tab2.id} defaultSize={50} minSize={20}
+                                        className="!overflow-hidden h-full w-full" id={`panel-${tab2.id}`} order={2}>
+                            <div ref={el => {
+                                panelRefs.current[String(tab2.id)] = el;
+                            }} style={{
+                                height: '100%',
+                                width: '100%',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                background: 'transparent',
+                                margin: 0,
+                                padding: 0,
+                                position: 'relative'
+                            }}>
+                                <div style={{
+                                    background: '#18181b',
+                                    color: '#fff',
+                                    fontSize: 13,
+                                    height: 28,
+                                    lineHeight: '28px',
+                                    padding: '0 10px',
+                                    borderBottom: '1px solid #222224',
+                                    letterSpacing: 1,
+                                    margin: 0,
+                                    pointerEvents: 'auto',
+                                    zIndex: 11,
+                                }}>{tab2.title}</div>
+                            </div>
+                        </ResizablePanel>
+                    </ResizablePrimitive.PanelGroup>
+                </div>
+            );
+        }
+        if (layoutTabs.length === 3) {
+            return (
+                <div style={{
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    height: '100%',
+                    zIndex: 10,
+                    pointerEvents: 'none'
+                }}>
+                    <ResizablePrimitive.PanelGroup
+                        ref={el => {
+                            panelGroupRefs.current['main'] = el;
+                        }}
+                        direction="vertical"
+                        className="h-full w-full"
+                        id="main-vertical"
+                    >
+                        <ResizablePanel defaultSize={50} minSize={20} className="!overflow-hidden h-full w-full"
+                                        id="top-panel" order={1}>
+                            <ResizablePanelGroup ref={el => {
+                                panelGroupRefs.current['top'] = el;
+                            }} direction="horizontal" className="h-full w-full" id="top-horizontal">
+                                <ResizablePanel key={layoutTabs[0].id} defaultSize={50} minSize={20}
+                                                className="!overflow-hidden h-full w-full"
+                                                id={`panel-${layoutTabs[0].id}`} order={1}>
+                                    <div ref={el => {
+                                        panelRefs.current[String(layoutTabs[0].id)] = el;
+                                    }} style={{
+                                        height: '100%',
+                                        width: '100%',
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        background: 'transparent',
+                                        margin: 0,
+                                        padding: 0,
+                                        position: 'relative'
+                                    }}>
+                                        <div style={{
+                                            background: '#18181b',
+                                            color: '#fff',
+                                            fontSize: 13,
+                                            height: 28,
+                                            lineHeight: '28px',
+                                            padding: '0 10px',
+                                            borderBottom: '1px solid #222224',
+                                            letterSpacing: 1,
+                                            margin: 0,
+                                            pointerEvents: 'auto',
+                                            zIndex: 11,
+                                        }}>{layoutTabs[0].title}</div>
+                                    </div>
+                                </ResizablePanel>
+                                <ResizableHandle style={{pointerEvents: 'auto', zIndex: 12}}/>
+                                <ResizablePanel key={layoutTabs[1].id} defaultSize={50} minSize={20}
+                                                className="!overflow-hidden h-full w-full"
+                                                id={`panel-${layoutTabs[1].id}`} order={2}>
+                                    <div ref={el => {
+                                        panelRefs.current[String(layoutTabs[1].id)] = el;
+                                    }} style={{
+                                        height: '100%',
+                                        width: '100%',
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        background: 'transparent',
+                                        margin: 0,
+                                        padding: 0,
+                                        position: 'relative'
+                                    }}>
+                                        <div style={{
+                                            background: '#18181b',
+                                            color: '#fff',
+                                            fontSize: 13,
+                                            height: 28,
+                                            lineHeight: '28px',
+                                            padding: '0 10px',
+                                            borderBottom: '1px solid #222224',
+                                            letterSpacing: 1,
+                                            margin: 0,
+                                            pointerEvents: 'auto',
+                                            zIndex: 11,
+                                        }}>{layoutTabs[1].title}</div>
+                                    </div>
+                                </ResizablePanel>
+                            </ResizablePanelGroup>
+                        </ResizablePanel>
+                        <ResizableHandle style={{pointerEvents: 'auto', zIndex: 12}}/>
+                        <ResizablePanel defaultSize={50} minSize={20} className="!overflow-hidden h-full w-full"
+                                        id="bottom-panel" order={2}>
+                            <div ref={el => {
+                                panelRefs.current[String(layoutTabs[2].id)] = el;
+                            }} style={{
+                                height: '100%',
+                                width: '100%',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                background: 'transparent',
+                                margin: 0,
+                                padding: 0,
+                                position: 'relative'
+                            }}>
+                                <div style={{
+                                    background: '#18181b',
+                                    color: '#fff',
+                                    fontSize: 13,
+                                    height: 28,
+                                    lineHeight: '28px',
+                                    padding: '0 10px',
+                                    borderBottom: '1px solid #222224',
+                                    letterSpacing: 1,
+                                    margin: 0,
+                                    pointerEvents: 'auto',
+                                    zIndex: 11,
+                                }}>{layoutTabs[2].title}</div>
+                            </div>
+                        </ResizablePanel>
+                    </ResizablePrimitive.PanelGroup>
+                </div>
+            );
+        }
+        if (layoutTabs.length === 4) {
+            return (
+                <div style={{
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    height: '100%',
+                    zIndex: 10,
+                    pointerEvents: 'none'
+                }}>
+                    <ResizablePrimitive.PanelGroup
+                        ref={el => {
+                            panelGroupRefs.current['main'] = el;
+                        }}
+                        direction="vertical"
+                        className="h-full w-full"
+                        id="main-vertical"
+                    >
+                        <ResizablePanel defaultSize={50} minSize={20} className="!overflow-hidden h-full w-full"
+                                        id="top-panel" order={1}>
+                            <ResizablePanelGroup ref={el => {
+                                panelGroupRefs.current['top'] = el;
+                            }} direction="horizontal" className="h-full w-full" id="top-horizontal">
+                                <ResizablePanel key={layoutTabs[0].id} defaultSize={50} minSize={20}
+                                                className="!overflow-hidden h-full w-full"
+                                                id={`panel-${layoutTabs[0].id}`} order={1}>
+                                    <div ref={el => {
+                                        panelRefs.current[String(layoutTabs[0].id)] = el;
+                                    }} style={{
+                                        height: '100%',
+                                        width: '100%',
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        background: 'transparent',
+                                        margin: 0,
+                                        padding: 0,
+                                        position: 'relative'
+                                    }}>
+                                        <div style={{
+                                            background: '#18181b',
+                                            color: '#fff',
+                                            fontSize: 13,
+                                            height: 28,
+                                            lineHeight: '28px',
+                                            padding: '0 10px',
+                                            borderBottom: '1px solid #222224',
+                                            letterSpacing: 1,
+                                            margin: 0,
+                                            pointerEvents: 'auto',
+                                            zIndex: 11,
+                                        }}>{layoutTabs[0].title}</div>
+                                    </div>
+                                </ResizablePanel>
+                                <ResizableHandle style={{pointerEvents: 'auto', zIndex: 12}}/>
+                                <ResizablePanel key={layoutTabs[1].id} defaultSize={50} minSize={20}
+                                                className="!overflow-hidden h-full w-full"
+                                                id={`panel-${layoutTabs[1].id}`} order={2}>
+                                    <div ref={el => {
+                                        panelRefs.current[String(layoutTabs[1].id)] = el;
+                                    }} style={{
+                                        height: '100%',
+                                        width: '100%',
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        background: 'transparent',
+                                        margin: 0,
+                                        padding: 0,
+                                        position: 'relative'
+                                    }}>
+                                        <div style={{
+                                            background: '#18181b',
+                                            color: '#fff',
+                                            fontSize: 13,
+                                            height: 28,
+                                            lineHeight: '28px',
+                                            padding: '0 10px',
+                                            borderBottom: '1px solid #222224',
+                                            letterSpacing: 1,
+                                            margin: 0,
+                                            pointerEvents: 'auto',
+                                            zIndex: 11,
+                                        }}>{layoutTabs[1].title}</div>
+                                    </div>
+                                </ResizablePanel>
+                            </ResizablePanelGroup>
+                        </ResizablePanel>
+                        <ResizableHandle style={{pointerEvents: 'auto', zIndex: 12}}/>
+                        <ResizablePanel defaultSize={50} minSize={20} className="!overflow-hidden h-full w-full"
+                                        id="bottom-panel" order={2}>
+                            <ResizablePanelGroup ref={el => {
+                                panelGroupRefs.current['bottom'] = el;
+                            }} direction="horizontal" className="h-full w-full" id="bottom-horizontal">
+                                <ResizablePanel key={layoutTabs[2].id} defaultSize={50} minSize={20}
+                                                className="!overflow-hidden h-full w-full"
+                                                id={`panel-${layoutTabs[2].id}`} order={1}>
+                                    <div ref={el => {
+                                        panelRefs.current[String(layoutTabs[2].id)] = el;
+                                    }} style={{
+                                        height: '100%',
+                                        width: '100%',
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        background: 'transparent',
+                                        margin: 0,
+                                        padding: 0,
+                                        position: 'relative'
+                                    }}>
+                                        <div style={{
+                                            background: '#18181b',
+                                            color: '#fff',
+                                            fontSize: 13,
+                                            height: 28,
+                                            lineHeight: '28px',
+                                            padding: '0 10px',
+                                            borderBottom: '1px solid #222224',
+                                            letterSpacing: 1,
+                                            margin: 0,
+                                            pointerEvents: 'auto',
+                                            zIndex: 11,
+                                        }}>{layoutTabs[2].title}</div>
+                                    </div>
+                                </ResizablePanel>
+                                <ResizableHandle style={{pointerEvents: 'auto', zIndex: 12}}/>
+                                <ResizablePanel key={layoutTabs[3].id} defaultSize={50} minSize={20}
+                                                className="!overflow-hidden h-full w-full"
+                                                id={`panel-${layoutTabs[3].id}`} order={2}>
+                                    <div ref={el => {
+                                        panelRefs.current[String(layoutTabs[3].id)] = el;
+                                    }} style={{
+                                        height: '100%',
+                                        width: '100%',
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        background: 'transparent',
+                                        margin: 0,
+                                        padding: 0,
+                                        position: 'relative'
+                                    }}>
+                                        <div style={{
+                                            background: '#18181b',
+                                            color: '#fff',
+                                            fontSize: 13,
+                                            height: 28,
+                                            lineHeight: '28px',
+                                            padding: '0 10px',
+                                            borderBottom: '1px solid #222224',
+                                            letterSpacing: 1,
+                                            margin: 0,
+                                            pointerEvents: 'auto',
+                                            zIndex: 11,
+                                        }}>{layoutTabs[3].title}</div>
+                                    </div>
+                                </ResizablePanel>
+                            </ResizablePanelGroup>
+                        </ResizablePanel>
+                    </ResizablePrimitive.PanelGroup>
+                </div>
+            );
+        }
+        return null;
+    };
+
+    const onAddHostSubmit = (data: any) => {
+        const id = nextTabId.current++;
+        const title = `${data.ip || "Host"}:${data.port || 22}`;
+        const terminalRef = React.createRef<any>();
+        const newTab: Tab = {
+            id,
+            title,
+            hostConfig: data,
+            terminalRef,
+        };
+        setAllTabs((prev) => [...prev, newTab]);
+        setCurrentTab(id);
+        setAllSplitScreenTab((prev) => prev.filter((tid) => tid !== id));
+    };
+
+    const getUniqueTabTitle = (baseTitle: string) => {
+        let title = baseTitle;
+        let count = 1;
+        const existingTitles = allTabs.map(t => t.title);
+        while (existingTitles.includes(title)) {
+            title = `${baseTitle} (${count})`;
+            count++;
+        }
+        return title;
+    };
+
+    const onHostConnect = (hostConfig: any) => {
+        const baseTitle = hostConfig.name?.trim() ? hostConfig.name : `${hostConfig.ip || "Host"}:${hostConfig.port || 22}`;
+        const title = getUniqueTabTitle(baseTitle);
+        const terminalRef = React.createRef<any>();
+        const id = nextTabId.current++;
+        const newTab: Tab = {
+            id,
+            title,
+            hostConfig,
+            terminalRef,
+        };
+        setAllTabs((prev) => [...prev, newTab]);
+        setCurrentTab(id);
+        setAllSplitScreenTab((prev) => prev.filter((tid) => tid !== id));
+    };
+
+    return (
+        <div style={{display: 'flex', width: '100vw', height: '100vh', overflow: 'hidden', position: 'relative'}}>
+            <div
+                style={{
+                    width: isSidebarOpen ? SIDEBAR_WIDTH : 0,
+                    flexShrink: 0,
+                    height: '100vh',
+                    position: 'relative',
+                    zIndex: 2,
+                    margin: 0,
+                    padding: 0,
+                    border: 'none',
+                    overflow: 'hidden',
+                    transition: 'width 240ms ease-in-out',
+                    willChange: 'width',
+                }}
+            >
+                <TerminalSidebar
+                    onSelectView={onSelectView}
+                    onHostConnect={onHostConnect}
+                    allTabs={allTabs}
+                    runCommandOnTabs={(tabIds: number[], command: string) => {
+                        allTabs.forEach(tab => {
+                            if (tabIds.includes(tab.id) && tab.terminalRef?.current?.sendInput) {
+                                tab.terminalRef.current.sendInput(command);
+                            }
+                        });
+                    }}
+                    onCloseSidebar={() => setIsSidebarOpen(false)}
+                    open={isSidebarOpen}
+                    onOpenChange={setIsSidebarOpen}
+                />
+            </div>
+
+            <div
+                className="terminal-container"
+                style={{
+                    flex: 1,
+                    height: '100vh',
+                    position: 'relative',
+                    overflow: 'hidden',
+                    margin: 0,
+                    padding: 0,
+                    paddingLeft: isSidebarOpen ? 0 : HANDLE_THICKNESS,
+                    paddingTop: isTopbarOpen ? 0 : HANDLE_THICKNESS,
+                    border: 'none',
+                    transition: 'padding-left 240ms ease-in-out, padding-top 240ms ease-in-out',
+                    willChange: 'padding',
+                }}
+            >
+                <div
+                    style={{
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        width: '100%',
+                        height: isTopbarOpen ? 46 : 0,
+                        overflow: 'hidden',
+                        zIndex: 10,
+                        transition: 'height 240ms ease-in-out',
+                        willChange: 'height',
+                    }}
+                >
+                    <TerminalTopbar
+                        allTabs={allTabs}
+                        currentTab={currentTab ?? -1}
+                        setActiveTab={setActiveTab}
+                        allSplitScreenTab={allSplitScreenTab}
+                        setSplitScreenTab={setSplitScreenTab}
+                        setCloseTab={setCloseTab}
+                        onHideTopbar={() => setIsTopbarOpen(false)}
+                    />
+                </div>
+                {!isTopbarOpen && (
+                    <div
+                        onClick={() => setIsTopbarOpen(true)}
+                        style={{
+                            position: 'absolute',
+                            top: 0,
+                            left: 0,
+                            width: '100%',
+                            height: HANDLE_THICKNESS,
+                            background: '#222224',
+                            cursor: 'pointer',
+                            zIndex: 12,
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                        }}
+                        title="Show top bar">
+                        <ChevronDown size={HANDLE_THICKNESS} />
+                    </div>
+                )}
+
+                <div
+                    style={{
+                        height: isTopbarOpen ? 'calc(100% - 46px)' : '100%',
+                        marginTop: isTopbarOpen ? 46 : 0,
+                        position: 'relative',
+                        transition: 'margin-top 240ms ease-in-out, height 240ms ease-in-out',
+                    }}
+                >
+                    {allTabs.length === 0 && (
+                        <div style={{
+                            position: 'absolute',
+                            top: '50%',
+                            left: '50%',
+                            transform: 'translate(-50%, -50%)',
+                            background: '#18181b',
+                            border: '1px solid #434345',
+                            borderRadius: '8px',
+                            padding: '24px',
+                            textAlign: 'center',
+                            color: '#f7f7f7',
+                            maxWidth: '400px',
+                            zIndex: 30
+                        }}>
+                            <div style={{fontSize: '18px', fontWeight: 'bold', marginBottom: '12px'}}>
+                                Welcome to Termix SSH
+                            </div>
+                            <div style={{fontSize: '14px', color: '#a1a1aa', lineHeight: '1.5'}}>
+                                Click on any host title in the sidebar to open a terminal connection, or use the "Add
+                                Host" button to create a new connection.
+                            </div>
+                        </div>
+                    )}
+                    {allSplitScreenTab.length > 0 && (
+                        <div style={{position: 'absolute', top: 0, right: 0, zIndex: 20, height: 28}}>
+                            <button
+                                style={{
+                                    background: '#18181b',
+                                    color: '#fff',
+                                    borderLeft: '1px solid #222224',
+                                    borderRight: '1px solid #222224',
+                                    borderTop: 'none',
+                                    borderBottom: '1px solid #222224',
+                                    borderRadius: 0,
+                                    padding: '2px 10px',
+                                    cursor: 'pointer',
+                                    fontSize: 13,
+                                    margin: 0,
+                                    height: 28,
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                }}
+                                onClick={() => {
+                                    if (allSplitScreenTab.length === 1) {
+                                        panelGroupRefs.current['main']?.setLayout([50, 50]);
+                                    } else if (allSplitScreenTab.length === 2) {
+                                        panelGroupRefs.current['main']?.setLayout([50, 50]);
+                                        panelGroupRefs.current['top']?.setLayout([50, 50]);
+                                    } else if (allSplitScreenTab.length === 3) {
+                                        panelGroupRefs.current['main']?.setLayout([50, 50]);
+                                        panelGroupRefs.current['top']?.setLayout([50, 50]);
+                                        panelGroupRefs.current['bottom']?.setLayout([50, 50]);
+                                    }
+                                }}
+                            >
+                                Reset Split Sizes
+                            </button>
+                        </div>
+                    )}
+                    {renderAllTerminals()}
+                    {renderSplitOverlays()}
+                </div>
+            </div>
+
+            {!isSidebarOpen && (
+                <div
+                    onClick={() => setIsSidebarOpen(true)}
+                    style={{
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        width: HANDLE_THICKNESS,
+                        height: '100%',
+                        background: '#222224',
+                        cursor: 'pointer',
+                        zIndex: 20,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                    }}
+                    title="Show sidebar">
+                    <ChevronRight size={HANDLE_THICKNESS} />
+                </div>
+            )}
+        </div>
+    );
+}

src/ui/SSH/Terminal/TerminalComponent.tsx

@@ -0,0 +1,329 @@
+import {useEffect, useRef, useState, useImperativeHandle, forwardRef} from 'react';
+import {useXTerm} from 'react-xtermjs';
+import {FitAddon} from '@xterm/addon-fit';
+import {ClipboardAddon} from '@xterm/addon-clipboard';
+import {Unicode11Addon} from '@xterm/addon-unicode11';
+import {WebLinksAddon} from '@xterm/addon-web-links';
+
+interface SSHTerminalProps {
+    hostConfig: any;
+    isVisible: boolean;
+    title?: string;
+    showTitle?: boolean;
+    splitScreen?: boolean;
+}
+
+export const TerminalComponent = forwardRef<any, SSHTerminalProps>(function SSHTerminal(
+    {hostConfig, isVisible, splitScreen = false},
+    ref
+) {
+    const {instance: terminal, ref: xtermRef} = useXTerm();
+    const fitAddonRef = useRef<FitAddon | null>(null);
+    const webSocketRef = useRef<WebSocket | null>(null);
+    const resizeTimeout = useRef<NodeJS.Timeout | null>(null);
+    const wasDisconnectedBySSH = useRef(false);
+    const pingIntervalRef = useRef<NodeJS.Timeout | null>(null);
+    const [visible, setVisible] = useState(false);
+
+    useImperativeHandle(ref, () => ({
+        disconnect: () => {
+            if (pingIntervalRef.current) {
+                clearInterval(pingIntervalRef.current);
+                pingIntervalRef.current = null;
+            }
+            webSocketRef.current?.close();
+        },
+        fit: () => {
+            fitAddonRef.current?.fit();
+        },
+        sendInput: (data: string) => {
+            if (webSocketRef.current?.readyState === 1) {
+                webSocketRef.current.send(JSON.stringify({type: 'input', data}));
+            }
+        }
+    }), []);
+
+    useEffect(() => {
+        window.addEventListener('resize', handleWindowResize);
+        return () => window.removeEventListener('resize', handleWindowResize);
+    }, []);
+
+    function handleWindowResize() {
+        fitAddonRef.current?.fit();
+    }
+
+    function getCookie(name: string) {
+        return document.cookie.split('; ').reduce((r, v) => {
+            const parts = v.split('=');
+            return parts[0] === name ? decodeURIComponent(parts[1]) : r;
+        }, "");
+    }
+
+    function getUseRightClickCopyPaste() {
+        return getCookie("rightClickCopyPaste") === "true"
+    }
+
+    async function writeTextToClipboard(text: string): Promise<void> {
+        try {
+            if (navigator.clipboard && navigator.clipboard.writeText) {
+                await navigator.clipboard.writeText(text);
+                return;
+            }
+        } catch (_) {
+        }
+        const textarea = document.createElement('textarea');
+        textarea.value = text;
+        textarea.style.position = 'fixed';
+        textarea.style.left = '-9999px';
+        document.body.appendChild(textarea);
+        textarea.focus();
+        textarea.select();
+        try {
+            document.execCommand('copy');
+        } finally {
+            document.body.removeChild(textarea);
+        }
+    }
+
+    async function readTextFromClipboard(): Promise<string> {
+        try {
+            if (navigator.clipboard && navigator.clipboard.readText) {
+                return await navigator.clipboard.readText();
+            }
+        } catch (_) {
+        }
+        return '';
+    }
+
+    useEffect(() => {
+        if (!terminal || !xtermRef.current || !hostConfig) return;
+
+        terminal.options = {
+            cursorBlink: true,
+            cursorStyle: 'bar',
+            scrollback: 10000,
+            fontSize: 14,
+            fontFamily: '"JetBrains Mono Nerd Font", "MesloLGS NF", "FiraCode Nerd Font", "Cascadia Code", "JetBrains Mono", Consolas, "Courier New", monospace',
+            theme: {
+                background: '#09090b',
+                foreground: '#f7f7f7',
+            },
+            allowTransparency: true,
+            convertEol: true,
+            windowsMode: false,
+            macOptionIsMeta: false,
+            macOptionClickForcesSelection: false,
+            rightClickSelectsWord: false,
+            fastScrollModifier: 'alt',
+            fastScrollSensitivity: 5,
+            allowProposedApi: true,
+        };
+
+        const fitAddon = new FitAddon();
+        const clipboardAddon = new ClipboardAddon();
+        const unicode11Addon = new Unicode11Addon();
+        const webLinksAddon = new WebLinksAddon();
+
+        fitAddonRef.current = fitAddon;
+        terminal.loadAddon(fitAddon);
+        terminal.loadAddon(clipboardAddon);
+        terminal.loadAddon(unicode11Addon);
+        terminal.loadAddon(webLinksAddon);
+        terminal.open(xtermRef.current);
+
+        const element = xtermRef.current;
+        const handleContextMenu = async (e: MouseEvent) => {
+            if (!getUseRightClickCopyPaste()) return;
+            e.preventDefault();
+            e.stopPropagation();
+            try {
+                if (terminal.hasSelection()) {
+                    const selection = terminal.getSelection();
+                    if (selection) {
+                        await writeTextToClipboard(selection);
+                        terminal.clearSelection();
+                    }
+                } else {
+                    const pasteText = await readTextFromClipboard();
+                    if (pasteText) {
+                        terminal.paste(pasteText);
+                    }
+                }
+            } catch (_) {
+            }
+        };
+        if (element) {
+            element.addEventListener('contextmenu', handleContextMenu);
+        }
+
+        const resizeObserver = new ResizeObserver(() => {
+            if (resizeTimeout.current) clearTimeout(resizeTimeout.current);
+            resizeTimeout.current = setTimeout(() => {
+                fitAddonRef.current?.fit();
+                const cols = terminal.cols;
+                const rows = terminal.rows;
+                if (webSocketRef.current?.readyState === WebSocket.OPEN) {
+                    webSocketRef.current.send(JSON.stringify({type: 'resize', data: {cols, rows}}));
+                }
+            }, 100);
+        });
+
+        resizeObserver.observe(xtermRef.current);
+        setTimeout(() => {
+            fitAddon.fit();
+            setVisible(true);
+
+            const cols = terminal.cols;
+            const rows = terminal.rows;
+            const wsUrl = window.location.hostname === 'localhost'
+                ? 'ws://localhost:8082'
+                : `${window.location.protocol === 'https:' ? 'wss' : 'ws'}://${window.location.host}/ssh/websocket/`;
+
+            const ws = new WebSocket(wsUrl);
+            webSocketRef.current = ws;
+            wasDisconnectedBySSH.current = false;
+
+            ws.addEventListener('open', () => {
+                ws.send(JSON.stringify({type: 'connectToHost', data: {cols, rows, hostConfig}}));
+                terminal.onData((data) => {
+                    ws.send(JSON.stringify({type: 'input', data}));
+                });
+
+                pingIntervalRef.current = setInterval(() => {
+                    if (ws.readyState === WebSocket.OPEN) {
+                        ws.send(JSON.stringify({type: 'ping'}));
+                    }
+                }, 30000);
+            });
+
+            ws.addEventListener('message', (event) => {
+                try {
+                    const msg = JSON.parse(event.data);
+                    if (msg.type === 'data') {
+                        terminal.write(msg.data);
+                    } else if (msg.type === 'error') {
+                        terminal.writeln(`\r\n[ERROR] ${msg.message}`);
+                    } else if (msg.type === 'connected') {
+                    } else if (msg.type === 'disconnected') {
+                        wasDisconnectedBySSH.current = true;
+                        terminal.writeln(`\r\n[${msg.message || 'Disconnected'}]`);
+                    }
+                } catch (error) {
+                    console.error('Error parsing WebSocket message:', error);
+                }
+            });
+
+            ws.addEventListener('close', () => {
+                if (!wasDisconnectedBySSH.current) {
+                    terminal.writeln('\r\n[Connection closed]');
+                }
+            });
+
+            ws.addEventListener('error', () => {
+                terminal.writeln('\r\n[Connection error]');
+            });
+        }, 300);
+
+        return () => {
+            resizeObserver.disconnect();
+            if (element) {
+                element.removeEventListener('contextmenu', handleContextMenu);
+            }
+            if (resizeTimeout.current) clearTimeout(resizeTimeout.current);
+            if (pingIntervalRef.current) {
+                clearInterval(pingIntervalRef.current);
+                pingIntervalRef.current = null;
+            }
+            webSocketRef.current?.close();
+        };
+    }, [xtermRef, terminal, hostConfig]);
+
+    useEffect(() => {
+        if (isVisible && fitAddonRef.current) {
+            fitAddonRef.current.fit();
+        }
+    }, [isVisible]);
+
+    return (
+        <div
+            ref={xtermRef}
+            style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                marginLeft: 2,
+                opacity: visible && isVisible ? 1 : 0,
+                overflow: 'hidden',
+            }}
+        />
+    );
+});
+
+const style = document.createElement('style');
+style.innerHTML = `
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
+
+/* Load NerdFonts locally */
+@font-face {
+  font-family: 'JetBrains Mono Nerd Font';
+  src: url('/fonts/JetBrainsMonoNerdFont-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'JetBrains Mono Nerd Font';
+  src: url('/fonts/JetBrainsMonoNerdFont-Bold.ttf') format('truetype');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'JetBrains Mono Nerd Font';
+  src: url('/fonts/JetBrainsMonoNerdFont-Italic.ttf') format('truetype');
+  font-weight: normal;
+  font-style: italic;
+  font-display: swap;
+}
+
+.xterm .xterm-viewport::-webkit-scrollbar {
+  width: 8px;
+  background: transparent;
+}
+.xterm .xterm-viewport::-webkit-scrollbar-thumb {
+  background: rgba(180,180,180,0.7);
+  border-radius: 4px;
+}
+.xterm .xterm-viewport::-webkit-scrollbar-thumb:hover {
+  background: rgba(120,120,120,0.9);
+}
+.xterm .xterm-viewport {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(180,180,180,0.7) transparent;
+}
+
+.xterm {
+  font-feature-settings: "liga" 1, "calt" 1;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.xterm .xterm-screen {
+  font-family: 'JetBrains Mono Nerd Font', 'MesloLGS NF', 'FiraCode Nerd Font', 'Cascadia Code', 'JetBrains Mono', Consolas, "Courier New", monospace !important;
+  font-variant-ligatures: contextual;
+}
+
+.xterm .xterm-screen .xterm-char {
+  font-feature-settings: "liga" 1, "calt" 1;
+}
+
+.xterm .xterm-screen .xterm-char[data-char-code^="\\uE"] {
+  font-family: 'JetBrains Mono Nerd Font', 'MesloLGS NF', 'FiraCode Nerd Font' !important;
+}
+`;
+document.head.appendChild(style);

src/ui/SSH/Terminal/TerminalSidebar.tsx

@@ -0,0 +1,440 @@
+import React, {useState} from 'react';
+
+import {
+    CornerDownLeft,
+    Hammer, Pin, Menu
+} from "lucide-react"
+
+import {
+    Button
+} from "@/components/ui/button.tsx"
+
+import {
+    Sidebar,
+    SidebarContent,
+    SidebarGroup,
+    SidebarGroupContent,
+    SidebarGroupLabel,
+    SidebarMenu,
+    SidebarMenuItem, SidebarProvider,
+} from "@/components/ui/sidebar.tsx"
+
+import {
+    Separator,
+} from "@/components/ui/separator.tsx"
+import {
+    Sheet,
+    SheetContent,
+    SheetHeader,
+    SheetTitle,
+    SheetTrigger
+} from "@/components/ui/sheet.tsx";
+import {
+    Accordion,
+    AccordionContent,
+    AccordionItem,
+    AccordionTrigger,
+} from "@/components/ui/accordion.tsx";
+import {ScrollArea} from "@/components/ui/scroll-area.tsx";
+import {Input} from "@/components/ui/input.tsx";
+import {getSSHHosts} from "@/ui/SSH/ssh-axios";
+import {Checkbox} from "@/components/ui/checkbox.tsx";
+
+interface SSHHost {
+    id: number;
+    name: string;
+    ip: string;
+    port: number;
+    username: string;
+    folder: string;
+    tags: string[];
+    pin: boolean;
+    authType: string;
+    password?: string;
+    key?: string;
+    keyPassword?: string;
+    keyType?: string;
+    enableTerminal: boolean;
+    enableTunnel: boolean;
+    enableConfigEditor: boolean;
+    defaultPath: string;
+    tunnelConnections: any[];
+    createdAt: string;
+    updatedAt: string;
+}
+
+export interface SidebarProps {
+    onSelectView: (view: string) => void;
+    onHostConnect: (hostConfig: any) => void;
+    allTabs: { id: number; title: string; terminalRef: React.RefObject<any> }[];
+    runCommandOnTabs: (tabIds: number[], command: string) => void;
+    onCloseSidebar?: () => void;
+    onAddHostSubmit?: (data: any) => void;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+
+export function TerminalSidebar({
+                               onSelectView,
+                               onHostConnect,
+                               allTabs,
+                               runCommandOnTabs,
+                               onCloseSidebar,
+                               open,
+                               onOpenChange
+                           }: SidebarProps): React.ReactElement {
+    const [hosts, setHosts] = useState<SSHHost[]>([]);
+    const [hostsLoading, setHostsLoading] = useState(false);
+    const [hostsError, setHostsError] = useState<string | null>(null);
+    const prevHostsRef = React.useRef<SSHHost[]>([]);
+
+    const fetchHosts = React.useCallback(async () => {
+        setHostsLoading(true);
+        setHostsError(null);
+        try {
+            const newHosts = await getSSHHosts();
+            const terminalHosts = newHosts.filter(host => host.enableTerminal);
+
+            const prevHosts = prevHostsRef.current;
+            const isSame =
+                terminalHosts.length === prevHosts.length &&
+                terminalHosts.every((h: SSHHost, i: number) => {
+                    const prev = prevHosts[i];
+                    if (!prev) return false;
+                    return (
+                        h.id === prev.id &&
+                        h.name === prev.name &&
+                        h.folder === prev.folder &&
+                        h.ip === prev.ip &&
+                        h.port === prev.port &&
+                        h.username === prev.username &&
+                        h.password === prev.password &&
+                        h.authType === prev.authType &&
+                        h.key === prev.key &&
+                        h.pin === prev.pin &&
+                        JSON.stringify(h.tags) === JSON.stringify(prev.tags)
+                    );
+                });
+            if (!isSame) {
+                setHosts(terminalHosts);
+                prevHostsRef.current = terminalHosts;
+            }
+        } catch (err: any) {
+            setHostsError('Failed to load hosts');
+        } finally {
+            setHostsLoading(false);
+        }
+    }, []);
+
+    React.useEffect(() => {
+        fetchHosts();
+        const interval = setInterval(fetchHosts, 10000);
+        return () => clearInterval(interval);
+    }, [fetchHosts]);
+
+    const [search, setSearch] = useState("");
+    const [debouncedSearch, setDebouncedSearch] = useState("");
+    React.useEffect(() => {
+        const handler = setTimeout(() => setDebouncedSearch(search), 200);
+        return () => clearTimeout(handler);
+    }, [search]);
+
+    const filteredHosts = React.useMemo(() => {
+        if (!debouncedSearch.trim()) return hosts;
+        const q = debouncedSearch.trim().toLowerCase();
+        return hosts.filter(h => {
+            const searchableText = [
+                h.name || '',
+                h.username,
+                h.ip,
+                h.folder || '',
+                ...(h.tags || []),
+                h.authType,
+                h.defaultPath || ''
+            ].join(' ').toLowerCase();
+            return searchableText.includes(q);
+        });
+    }, [hosts, debouncedSearch]);
+
+    const hostsByFolder = React.useMemo(() => {
+        const map: Record<string, SSHHost[]> = {};
+        filteredHosts.forEach(h => {
+            const folder = h.folder && h.folder.trim() ? h.folder : 'No Folder';
+            if (!map[folder]) map[folder] = [];
+            map[folder].push(h);
+        });
+        return map;
+    }, [filteredHosts]);
+
+    const sortedFolders = React.useMemo(() => {
+        const folders = Object.keys(hostsByFolder);
+        folders.sort((a, b) => {
+            if (a === 'No Folder') return -1;
+            if (b === 'No Folder') return 1;
+            return a.localeCompare(b);
+        });
+        return folders;
+    }, [hostsByFolder]);
+
+    const getSortedHosts = (arr: SSHHost[]) => {
+        const pinned = arr.filter(h => h.pin).sort((a, b) => (a.name || '').localeCompare(b.name || ''));
+        const rest = arr.filter(h => !h.pin).sort((a, b) => (a.name || '').localeCompare(b.name || ''));
+        return [...pinned, ...rest];
+    };
+
+    const [toolsSheetOpen, setToolsSheetOpen] = useState(false);
+    const [toolsCommand, setToolsCommand] = useState("");
+    const [selectedTabIds, setSelectedTabIds] = useState<number[]>([]);
+
+    const handleTabToggle = (tabId: number) => {
+        setSelectedTabIds(prev => prev.includes(tabId) ? prev.filter(id => id !== tabId) : [...prev, tabId]);
+    };
+
+    const handleRunCommand = () => {
+        if (selectedTabIds.length && toolsCommand.trim()) {
+            let cmd = toolsCommand;
+            if (!cmd.endsWith("\n")) cmd += "\n";
+            runCommandOnTabs(selectedTabIds, cmd);
+            setToolsCommand("");
+        }
+    };
+
+    function getCookie(name: string) {
+        return document.cookie.split('; ').reduce((r, v) => {
+            const parts = v.split('=');
+            return parts[0] === name ? decodeURIComponent(parts[1]) : r;
+        }, "");
+    }
+
+    const updateRightClickCopyPaste = (checked) => {
+        document.cookie = `rightClickCopyPaste=${checked}; expires=2147483647; path=/`;
+    }
+
+    return (
+        <SidebarProvider open={open} onOpenChange={onOpenChange}>
+            <Sidebar className="h-full flex flex-col overflow-hidden">
+                <SidebarContent className="flex flex-col flex-grow h-full overflow-hidden">
+                    <SidebarGroup className="flex flex-col flex-grow h-full overflow-hidden">
+                        <SidebarGroupLabel
+                            className="text-lg font-bold text-white flex items-center justify-between gap-2 w-full">
+                            <span>Termix / Terminal</span>
+                            <button
+                                type="button"
+                                onClick={() => onCloseSidebar?.()}
+                                title="Hide sidebar"
+                                style={{
+                                    height: 28,
+                                    width: 28,
+                                    display: 'inline-flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    background: 'hsl(240 5% 9%)',
+                                    color: 'hsl(240 5% 64.9%)',
+                                    border: '1px solid hsl(240 3.7% 15.9%)',
+                                    borderRadius: 6,
+                                    cursor: 'pointer',
+                                }}
+                            >
+                                <Menu className="h-4 w-4"/>
+                            </button>
+                        </SidebarGroupLabel>
+                        <Separator className="p-0.25 mt-1 mb-1"/>
+                        <SidebarGroupContent className="flex flex-col flex-grow h-full overflow-hidden">
+                            <SidebarMenu className="flex flex-col flex-grow h-full overflow-hidden">
+
+                                <SidebarMenuItem key="Homepage">
+                                    <Button
+                                        className="w-full mt-2 mb-2 h-8"
+                                        onClick={() => onSelectView("homepage")}
+                                        variant="outline"
+                                    >
+                                        <CornerDownLeft/>
+                                        Return
+                                    </Button>
+                                    <Separator className="p-0.25 mt-1 mb-1"/>
+                                </SidebarMenuItem>
+
+                                <SidebarMenuItem key="Main" className="flex flex-col flex-grow overflow-hidden">
+                                    <div
+                                        className="w-full flex-grow rounded-md bg-[#09090b] border border-[#434345] overflow-hidden p-0 m-0 relative flex flex-col min-h-0">
+                                        <div className="w-full px-2 pt-2 pb-2 bg-[#09090b] z-10">
+                                            <Input
+                                                value={search}
+                                                onChange={e => setSearch(e.target.value)}
+                                                placeholder="Search hosts by name, username, IP, folder, tags..."
+                                                className="w-full h-8 text-sm bg-background border border-border rounded"
+                                                autoComplete="off"
+                                            />
+                                        </div>
+                                        <div style={{display: 'flex', justifyContent: 'center'}}>
+                                            <Separator className="w-full h-px bg-[#434345] my-2"
+                                                       style={{maxWidth: 213, margin: '0 auto'}}/>
+                                        </div>
+                                        {hostsError && (
+                                            <div className="px-2 py-1 mt-2">
+                                                <div
+                                                    className="text-xs text-red-500 bg-red-500/10 rounded px-2 py-1 border border-red-500/20">{hostsError}</div>
+                                            </div>
+                                        )}
+                                        <div className="flex-1 min-h-0">
+                                            <ScrollArea className="w-full h-full">
+                                                <Accordion key={`host-accordion-${sortedFolders.length}`}
+                                                           type="multiple" className="w-full"
+                                                           defaultValue={sortedFolders.length > 0 ? sortedFolders : undefined}>
+                                                    {sortedFolders.map((folder, idx) => (
+                                                        <React.Fragment key={folder}>
+                                                            <AccordionItem value={folder}
+                                                                           className={idx === 0 ? "mt-0 !border-b-transparent" : "mt-2 !border-b-transparent"}>
+                                                                <AccordionTrigger
+                                                                    className="text-base font-semibold rounded-t-none px-3 py-2"
+                                                                    style={{marginTop: idx === 0 ? 0 : undefined}}>{folder}</AccordionTrigger>
+                                                                <AccordionContent
+                                                                    className="flex flex-col gap-1 px-3 pb-2 pt-1">
+                                                                    {getSortedHosts(hostsByFolder[folder]).map(host => (
+                                                                        <div key={host.id}
+                                                                             className="w-full overflow-hidden">
+                                                                            <HostMenuItem
+                                                                                host={host}
+                                                                                onHostConnect={onHostConnect}
+                                                                            />
+                                                                        </div>
+                                                                    ))}
+                                                                </AccordionContent>
+                                                            </AccordionItem>
+                                                            {idx < sortedFolders.length - 1 && (
+                                                                <div
+                                                                    style={{display: 'flex', justifyContent: 'center'}}>
+                                                                    <Separator className="h-px bg-[#434345] my-1"
+                                                                               style={{width: 213}}/>
+                                                                </div>
+                                                            )}
+                                                        </React.Fragment>
+                                                    ))}
+                                                </Accordion>
+                                            </ScrollArea>
+                                        </div>
+                                    </div>
+                                </SidebarMenuItem>
+                            </SidebarMenu>
+                        </SidebarGroupContent>
+                        <div className="bg-sidebar">
+                            <Sheet open={toolsSheetOpen} onOpenChange={setToolsSheetOpen}>
+                                <SheetTrigger asChild>
+                                    <Button
+                                        className="w-full h-8 mt-2"
+                                        variant="outline"
+                                        onClick={() => setToolsSheetOpen(true)}
+                                    >
+                                        <Hammer className="mr-2 h-4 w-4"/>
+                                        Tools
+                                    </Button>
+                                </SheetTrigger>
+                                <SheetContent side="left"
+                                              className="w-[256px] fixed top-0 left-0 h-full z-[100] flex flex-col">
+                                    <SheetHeader className="pb-0.5">
+                                        <SheetTitle>Tools</SheetTitle>
+                                    </SheetHeader>
+                                    <div className="flex-1 overflow-y-auto px-2 pt-2">
+                                        <Accordion type="single" collapsible defaultValue="multiwindow">
+                                            <AccordionItem value="multiwindow">
+                                                <AccordionTrigger className="text-base font-semibold">Run multiwindow
+                                                    commands</AccordionTrigger>
+                                                <AccordionContent>
+                                                    <textarea
+                                                        className="w-full min-h-[120px] max-h-48 rounded-md border border-input text-foreground p-2 text-sm font-mono resize-vertical focus:outline-none focus:ring-0"
+                                                        placeholder="Enter command(s) to run on selected tabs..."
+                                                        value={toolsCommand}
+                                                        onChange={e => setToolsCommand(e.target.value)}
+                                                        style={{
+                                                            fontFamily: 'monospace',
+                                                            marginBottom: 8,
+                                                            background: '#141416'
+                                                        }}
+                                                    />
+                                                    <div className="flex flex-wrap gap-2 mb-2">
+                                                        {allTabs.map(tab => (
+                                                            <Button
+                                                                key={tab.id}
+                                                                type="button"
+                                                                variant={selectedTabIds.includes(tab.id) ? "secondary" : "outline"}
+                                                                size="sm"
+                                                                className="rounded-full px-3 py-1 text-xs flex items-center gap-1"
+                                                                onClick={() => handleTabToggle(tab.id)}
+                                                            >
+                                                                {tab.title}
+                                                            </Button>
+                                                        ))}
+                                                    </div>
+                                                    <Button
+                                                        className="w-full"
+                                                        variant="outline"
+                                                        onClick={handleRunCommand}
+                                                        disabled={!toolsCommand.trim() || !selectedTabIds.length}
+                                                    >
+                                                        Run Command
+                                                    </Button>
+                                                </AccordionContent>
+                                            </AccordionItem>
+                                        </Accordion>
+
+                                        <Separator className="p-0.25"/>
+
+                                        <div className="flex items-center space-x-2 mt-5">
+                                            <Checkbox id="enable-copy-paste" onCheckedChange={updateRightClickCopyPaste}
+                                                      defaultChecked={getCookie("rightClickCopyPaste") === "true"}/>
+                                            <label
+                                                htmlFor="enable-paste"
+                                                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                            >
+                                                Enable right‑click copy/paste
+                                            </label>
+                                        </div>
+                                    </div>
+                                </SheetContent>
+                            </Sheet>
+                        </div>
+                    </SidebarGroup>
+                </SidebarContent>
+            </Sidebar>
+        </SidebarProvider>
+    );
+}
+
+const HostMenuItem = React.memo(function HostMenuItem({host, onHostConnect}: {
+    host: SSHHost;
+    onHostConnect: (hostConfig: any) => void
+}) {
+    const tags = Array.isArray(host.tags) ? host.tags : [];
+    const hasTags = tags.length > 0;
+    return (
+        <div className="relative group flex flex-col mb-1 w-full overflow-hidden">
+            <div className={`flex flex-col w-full rounded overflow-hidden border border-[#434345] bg-[#18181b] h-full`}>
+                <div className="flex w-full h-10">
+                    <div
+                        className="flex items-center h-full px-2 w-full hover:bg-muted transition-colors cursor-pointer"
+                        onClick={() => onHostConnect(host)}
+                    >
+                        <div className="flex items-center w-full">
+                            {host.pin &&
+                                <Pin className="h-4.5 mr-1 w-4.5 mt-0.5 text-yellow-500 flex-shrink-0"/>
+                            }
+                            <span className="font-medium truncate">{host.name || host.ip}</span>
+                        </div>
+                    </div>
+                </div>
+                {hasTags && (
+                    <div
+                        className="border-t border-border bg-[#18181b] flex items-center gap-1 px-2 py-2 overflow-x-auto overflow-y-hidden scrollbar-thin scrollbar-thumb-muted-foreground/30 scrollbar-track-transparent"
+                        style={{height: 30}}>
+                        {tags.map((tag: string) => (
+                            <span key={tag}
+                                  className="bg-muted-foreground/10 text-xs rounded-full px-2 py-0.5 text-muted-foreground whitespace-nowrap border border-border flex-shrink-0 hover:bg-muted transition-colors">
+                                {tag}
+                            </span>
+                        ))}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+});

src/ui/SSH/Terminal/TerminalTabList.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+import {Button} from "@/components/ui/button.tsx";
+import {X, SeparatorVertical} from "lucide-react"
+
+interface TerminalTab {
+    id: number;
+    title: string;
+}
+
+interface SSHTabListProps {
+    allTabs: TerminalTab[];
+    currentTab: number;
+    setActiveTab: (tab: number) => void;
+    allSplitScreenTab: number[];
+    setSplitScreenTab: (tab: number) => void;
+    setCloseTab: (tab: number) => void;
+}
+
+export function TerminalTabList({
+                               allTabs,
+                               currentTab,
+                               setActiveTab,
+                               allSplitScreenTab = [],
+                               setSplitScreenTab,
+                               setCloseTab,
+                           }: SSHTabListProps): React.ReactElement {
+    const isSplitScreenActive = allSplitScreenTab.length > 0;
+
+    return (
+        <div className="inline-flex items-center h-full px-[0.5rem] overflow-x-auto">
+            {allTabs.map((terminal, index) => {
+                const isActive = terminal.id === currentTab;
+                const isSplit = allSplitScreenTab.includes(terminal.id);
+                const isSplitButtonDisabled =
+                    (isActive && !isSplitScreenActive) ||
+                    (allSplitScreenTab.length >= 3 && !isSplit);
+
+                return (
+                    <div
+                        key={terminal.id}
+                        className={index < allTabs.length - 1 ? "mr-[0.5rem]" : ""}
+                    >
+                        <div className="inline-flex rounded-md shadow-sm" role="group">
+                            <Button
+                                onClick={() => setActiveTab(terminal.id)}
+                                disabled={isSplit}
+                                variant="outline"
+                                className={`rounded-r-none ${isActive ? '!bg-[#1d1d1f] !text-white !border-[#2d2d30] !hover:bg-[#1d1d1f] !active:bg-[#1d1d1f] !focus:bg-[#1d1d1f] !hover:text-white !active:text-white !focus:text-white' : ''}`}
+                            >
+                                {terminal.title}
+                            </Button>
+
+                            <Button
+                                onClick={() => setSplitScreenTab(terminal.id)}
+                                disabled={isSplitButtonDisabled || isActive}
+                                variant="outline"
+                                className="rounded-none p-0 !w-9 !h-9"
+                            >
+                                <SeparatorVertical className="!w-5 !h-5" strokeWidth={2.5}/>
+                            </Button>
+
+                            <Button
+                                onClick={() => setCloseTab(terminal.id)}
+                                disabled={(isSplitScreenActive && isActive) || isSplit}
+                                variant="outline"
+                                className="rounded-l-none p-0 !w-9 !h-9"
+                            >
+                                <X className="!w-5 !h-5" strokeWidth={2.5}/>
+                            </Button>
+                        </div>
+                    </div>
+                );
+            })}
+        </div>
+    );
+}

src/ui/SSH/Terminal/TerminalTopbar.tsx

@@ -0,0 +1,73 @@
+import {TerminalTabList} from "@/ui/SSH/Terminal/TerminalTabList.tsx";
+import React from "react";
+import {ChevronUp} from "lucide-react";
+
+interface TerminalTab {
+    id: number;
+    title: string;
+}
+
+interface SSHTopbarProps {
+    allTabs: TerminalTab[];
+    currentTab: number;
+    setActiveTab: (tab: number) => void;
+    allSplitScreenTab: number[];
+    setSplitScreenTab: (tab: number) => void;
+    setCloseTab: (tab: number) => void;
+    onHideTopbar?: () => void;
+}
+
+export function TerminalTopbar({
+                              allTabs,
+                              currentTab,
+                              setActiveTab,
+                              allSplitScreenTab,
+                              setSplitScreenTab,
+                              setCloseTab,
+                              onHideTopbar
+                          }: SSHTopbarProps): React.ReactElement {
+    return (
+        <div className="flex h-11.5 z-100" style={{
+            position: 'absolute',
+            left: 0,
+            width: '100%',
+            backgroundColor: '#18181b',
+            borderBottom: '1px solid #222224',
+            display: 'flex',
+            alignItems: 'center',
+        }}>
+            <div style={{flex: 1, minWidth: 0, height: '100%', overflowX: 'auto'}}>
+                <div style={{minWidth: 'max-content', height: '100%', paddingLeft: 8, overflowY: 'hidden'}}>
+                    <TerminalTabList
+                        allTabs={allTabs}
+                        currentTab={currentTab}
+                        setActiveTab={setActiveTab}
+                        allSplitScreenTab={allSplitScreenTab}
+                        setSplitScreenTab={setSplitScreenTab}
+                        setCloseTab={setCloseTab}
+                    />
+                </div>
+            </div>
+            <div style={{flex: '0 0 auto', paddingRight: 8, paddingLeft: 16}}>
+                <button
+                    onClick={() => onHideTopbar?.()}
+                    style={{
+                        height: 28,
+                        width: 28,
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        background: 'hsl(240 5% 9%)',
+                        color: 'hsl(240 5% 64.9%)',
+                        border: '1px solid hsl(240 3.7% 15.9%)',
+                        borderRadius: 6,
+                        cursor: 'pointer',
+                    }}
+                    title="Hide top bar"
+                >
+                    <ChevronUp size={16} strokeWidth={2}/>
+                </button>
+            </div>
+        </div>
+    )
+}

src/ui/SSH/Tunnel/SSHTunnel.tsx

@@ -0,0 +1,160 @@
+import React, {useState, useEffect, useCallback} from "react";
+import {SSHTunnelSidebar} from "@/ui/SSH/Tunnel/SSHTunnelSidebar.tsx";
+import {SSHTunnelViewer} from "@/ui/SSH/Tunnel/SSHTunnelViewer.tsx";
+import {getSSHHosts, getTunnelStatuses, connectTunnel, disconnectTunnel, cancelTunnel} from "@/ui/SSH/ssh-axios";
+
+interface ConfigEditorProps {
+    onSelectView: (view: string) => void;
+}
+
+interface TunnelConnection {
+    sourcePort: number;
+    endpointPort: number;
+    endpointHost: string;
+    maxRetries: number;
+    retryInterval: number;
+    autoStart: boolean;
+}
+
+interface SSHHost {
+    id: number;
+    name: string;
+    ip: string;
+    port: number;
+    username: string;
+    folder: string;
+    tags: string[];
+    pin: boolean;
+    authType: string;
+    password?: string;
+    key?: string;
+    keyPassword?: string;
+    keyType?: string;
+    enableTerminal: boolean;
+    enableTunnel: boolean;
+    enableConfigEditor: boolean;
+    defaultPath: string;
+    tunnelConnections: TunnelConnection[];
+    createdAt: string;
+    updatedAt: string;
+}
+
+interface TunnelStatus {
+    status: string;
+    reason?: string;
+    errorType?: string;
+    retryCount?: number;
+    maxRetries?: number;
+    nextRetryIn?: number;
+    retryExhausted?: boolean;
+}
+
+export function SSHTunnel({onSelectView}: ConfigEditorProps): React.ReactElement {
+    const [hosts, setHosts] = useState<SSHHost[]>([]);
+    const [tunnelStatuses, setTunnelStatuses] = useState<Record<string, TunnelStatus>>({});
+    const [tunnelActions, setTunnelActions] = useState<Record<string, boolean>>({});
+
+    const fetchHosts = useCallback(async () => {
+        try {
+            const hostsData = await getSSHHosts();
+            setHosts(hostsData);
+        } catch (err) {
+        }
+    }, []);
+
+    const fetchTunnelStatuses = useCallback(async () => {
+        try {
+            const statusData = await getTunnelStatuses();
+            setTunnelStatuses(statusData);
+        } catch (err) {
+        }
+    }, []);
+
+    useEffect(() => {
+        fetchHosts();
+        const interval = setInterval(fetchHosts, 10000);
+        return () => clearInterval(interval);
+    }, [fetchHosts]);
+
+    useEffect(() => {
+        fetchTunnelStatuses();
+        const interval = setInterval(fetchTunnelStatuses, 500);
+        return () => clearInterval(interval);
+    }, [fetchTunnelStatuses]);
+
+    const handleTunnelAction = async (action: 'connect' | 'disconnect' | 'cancel', host: SSHHost, tunnelIndex: number) => {
+        const tunnel = host.tunnelConnections[tunnelIndex];
+        const tunnelName = `${host.name || `${host.username}@${host.ip}`}_${tunnel.sourcePort}_${tunnel.endpointPort}`;
+
+        setTunnelActions(prev => ({...prev, [tunnelName]: true}));
+
+        try {
+            if (action === 'connect') {
+                const endpointHost = hosts.find(h =>
+                    h.name === tunnel.endpointHost ||
+                    `${h.username}@${h.ip}` === tunnel.endpointHost
+                );
+
+                if (!endpointHost) {
+                    throw new Error('Endpoint host not found');
+                }
+
+                const tunnelConfig = {
+                    name: tunnelName,
+                    hostName: host.name || `${host.username}@${host.ip}`,
+                    sourceIP: host.ip,
+                    sourceSSHPort: host.port,
+                    sourceUsername: host.username,
+                    sourcePassword: host.authType === 'password' ? host.password : undefined,
+                    sourceAuthMethod: host.authType,
+                    sourceSSHKey: host.authType === 'key' ? host.key : undefined,
+                    sourceKeyPassword: host.authType === 'key' ? host.keyPassword : undefined,
+                    sourceKeyType: host.authType === 'key' ? host.keyType : undefined,
+                    endpointIP: endpointHost.ip,
+                    endpointSSHPort: endpointHost.port,
+                    endpointUsername: endpointHost.username,
+                    endpointPassword: endpointHost.authType === 'password' ? endpointHost.password : undefined,
+                    endpointAuthMethod: endpointHost.authType,
+                    endpointSSHKey: endpointHost.authType === 'key' ? endpointHost.key : undefined,
+                    endpointKeyPassword: endpointHost.authType === 'key' ? endpointHost.keyPassword : undefined,
+                    endpointKeyType: endpointHost.authType === 'key' ? endpointHost.keyType : undefined,
+                    sourcePort: tunnel.sourcePort,
+                    endpointPort: tunnel.endpointPort,
+                    maxRetries: tunnel.maxRetries,
+                    retryInterval: tunnel.retryInterval * 1000,
+                    autoStart: tunnel.autoStart,
+                    isPinned: host.pin
+                };
+
+                await connectTunnel(tunnelConfig);
+            } else if (action === 'disconnect') {
+                await disconnectTunnel(tunnelName);
+            } else if (action === 'cancel') {
+                await cancelTunnel(tunnelName);
+            }
+
+            await fetchTunnelStatuses();
+        } catch (err) {
+        } finally {
+            setTunnelActions(prev => ({...prev, [tunnelName]: false}));
+        }
+    };
+
+    return (
+        <div className="flex h-screen w-full">
+            <div className="w-64 flex-shrink-0">
+                <SSHTunnelSidebar
+                    onSelectView={onSelectView}
+                />
+            </div>
+            <div className="flex-1 overflow-auto">
+                <SSHTunnelViewer
+                    hosts={hosts}
+                    tunnelStatuses={tunnelStatuses}
+                    tunnelActions={tunnelActions}
+                    onTunnelAction={handleTunnelAction}
+                />
+            </div>
+        </div>
+    );
+}

src/ui/SSH/Tunnel/SSHTunnelObject.tsx

@@ -0,0 +1,353 @@
+import React from "react";
+import {Button} from "@/components/ui/button.tsx";
+import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card.tsx";
+import {Separator} from "@/components/ui/separator.tsx";
+import {
+    Loader2,
+    Pin,
+    Terminal,
+    Network,
+    FileEdit,
+    Tag,
+    Play,
+    Square,
+    AlertCircle,
+    Clock,
+    Wifi,
+    WifiOff,
+    Zap,
+    X
+} from "lucide-react";
+import {Badge} from "@/components/ui/badge.tsx";
+
+const CONNECTION_STATES = {
+    DISCONNECTED: "disconnected",
+    CONNECTING: "connecting",
+    CONNECTED: "connected",
+    VERIFYING: "verifying",
+    FAILED: "failed",
+    UNSTABLE: "unstable",
+    RETRYING: "retrying",
+    WAITING: "waiting",
+    DISCONNECTING: "disconnecting"
+};
+
+interface TunnelConnection {
+    sourcePort: number;
+    endpointPort: number;
+    endpointHost: string;
+    maxRetries: number;
+    retryInterval: number;
+    autoStart: boolean;
+}
+
+interface SSHHost {
+    id: number;
+    name: string;
+    ip: string;
+    port: number;
+    username: string;
+    folder: string;
+    tags: string[];
+    pin: boolean;
+    authType: string;
+    enableTerminal: boolean;
+    enableTunnel: boolean;
+    enableConfigEditor: boolean;
+    defaultPath: string;
+    tunnelConnections: TunnelConnection[];
+    createdAt: string;
+    updatedAt: string;
+}
+
+interface TunnelStatus {
+    status: string;
+    reason?: string;
+    errorType?: string;
+    retryCount?: number;
+    maxRetries?: number;
+    nextRetryIn?: number;
+    retryExhausted?: boolean;
+}
+
+interface SSHTunnelObjectProps {
+    host: SSHHost;
+    tunnelStatuses: Record<string, TunnelStatus>;
+    tunnelActions: Record<string, boolean>;
+    onTunnelAction: (action: 'connect' | 'disconnect' | 'cancel', host: SSHHost, tunnelIndex: number) => Promise<any>;
+}
+
+export function SSHTunnelObject({
+                                    host,
+                                    tunnelStatuses,
+                                    tunnelActions,
+                                    onTunnelAction
+                                }: SSHTunnelObjectProps): React.ReactElement {
+
+    const getTunnelStatus = (tunnelIndex: number): TunnelStatus | undefined => {
+        const tunnel = host.tunnelConnections[tunnelIndex];
+        const tunnelName = `${host.name || `${host.username}@${host.ip}`}_${tunnel.sourcePort}_${tunnel.endpointPort}`;
+        return tunnelStatuses[tunnelName];
+    };
+
+    const getTunnelStatusDisplay = (status: TunnelStatus | undefined) => {
+        if (!status) return {
+            icon: <WifiOff className="h-4 w-4"/>,
+            text: 'Unknown',
+            color: 'text-muted-foreground',
+            bgColor: 'bg-muted/50',
+            borderColor: 'border-border'
+        };
+
+        const statusValue = status.status || 'DISCONNECTED';
+
+        switch (statusValue.toUpperCase()) {
+            case 'CONNECTED':
+                return {
+                    icon: <Wifi className="h-4 w-4"/>,
+                    text: 'Connected',
+                    color: 'text-green-600 dark:text-green-400',
+                    bgColor: 'bg-green-500/10 dark:bg-green-400/10',
+                    borderColor: 'border-green-500/20 dark:border-green-400/20'
+                };
+            case 'CONNECTING':
+                return {
+                    icon: <Loader2 className="h-4 w-4 animate-spin"/>,
+                    text: 'Connecting...',
+                    color: 'text-blue-600 dark:text-blue-400',
+                    bgColor: 'bg-blue-500/10 dark:bg-blue-400/10',
+                    borderColor: 'border-blue-500/20 dark:border-blue-400/20'
+                };
+            case 'DISCONNECTING':
+                return {
+                    icon: <Loader2 className="h-4 w-4 animate-spin"/>,
+                    text: 'Disconnecting...',
+                    color: 'text-orange-600 dark:text-orange-400',
+                    bgColor: 'bg-orange-500/10 dark:bg-orange-400/10',
+                    borderColor: 'border-orange-500/20 dark:border-orange-400/20'
+                };
+            case 'DISCONNECTED':
+                return {
+                    icon: <WifiOff className="h-4 w-4"/>,
+                    text: 'Disconnected',
+                    color: 'text-muted-foreground',
+                    bgColor: 'bg-muted/30',
+                    borderColor: 'border-border'
+                };
+            case 'WAITING':
+                return {
+                    icon: <Clock className="h-4 w-4"/>,
+                    color: 'text-blue-600 dark:text-blue-400',
+                    bgColor: 'bg-blue-500/10 dark:bg-blue-400/10',
+                    borderColor: 'border-blue-500/20 dark:border-blue-400/20'
+                };
+            case 'ERROR':
+            case 'FAILED':
+                return {
+                    icon: <AlertCircle className="h-4 w-4"/>,
+                    text: status.reason || 'Error',
+                    color: 'text-red-600 dark:text-red-400',
+                    bgColor: 'bg-red-500/10 dark:bg-red-400/10',
+                    borderColor: 'border-red-500/20 dark:border-red-400/20'
+                };
+            default:
+                return {
+                    icon: <WifiOff className="h-4 w-4"/>,
+                    text: statusValue,
+                    color: 'text-muted-foreground',
+                    bgColor: 'bg-muted/30',
+                    borderColor: 'border-border'
+                };
+        }
+    };
+
+    return (
+        <Card className="w-full bg-card border-border shadow-sm hover:shadow-md transition-shadow relative group p-0">
+            <div className="p-4">
+                {/* Host Header */}
+                <div className="flex items-center justify-between gap-2 mb-3">
+                    <div className="flex items-center gap-2 flex-1 min-w-0">
+                        {host.pin && <Pin className="h-4 w-4 text-yellow-500 flex-shrink-0"/>}
+                        <div className="flex-1 min-w-0">
+                            <h3 className="font-semibold text-card-foreground truncate">
+                                {host.name || `${host.username}@${host.ip}`}
+                            </h3>
+                            <p className="text-xs text-muted-foreground truncate">
+                                {host.ip}:{host.port} • {host.username}
+                            </p>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Tags */}
+                {host.tags && host.tags.length > 0 && (
+                    <div className="flex flex-wrap gap-1 mb-3">
+                        {host.tags.slice(0, 3).map((tag, index) => (
+                            <Badge key={index} variant="secondary" className="text-xs px-1 py-0">
+                                <Tag className="h-2 w-2 mr-0.5"/>
+                                {tag}
+                            </Badge>
+                        ))}
+                        {host.tags.length > 3 && (
+                            <Badge variant="outline" className="text-xs px-1 py-0">
+                                +{host.tags.length - 3}
+                            </Badge>
+                        )}
+                    </div>
+                )}
+
+                <Separator className="mb-3"/>
+
+                {/* Tunnel Connections */}
+                <div className="space-y-3">
+                    <h4 className="text-sm font-medium text-card-foreground flex items-center gap-2">
+                        <Network className="h-4 w-4"/>
+                        Tunnel Connections ({host.tunnelConnections.length})
+                    </h4>
+                    {host.tunnelConnections && host.tunnelConnections.length > 0 ? (
+                        <div className="space-y-3">
+                            {host.tunnelConnections.map((tunnel, tunnelIndex) => {
+                                const status = getTunnelStatus(tunnelIndex);
+                                const statusDisplay = getTunnelStatusDisplay(status);
+                                const tunnelName = `${host.name || `${host.username}@${host.ip}`}_${tunnel.sourcePort}_${tunnel.endpointPort}`;
+                                const isActionLoading = tunnelActions[tunnelName];
+                                const statusValue = status?.status?.toUpperCase() || 'DISCONNECTED';
+                                const isConnected = statusValue === 'CONNECTED';
+                                const isConnecting = statusValue === 'CONNECTING';
+                                const isDisconnecting = statusValue === 'DISCONNECTING';
+                                const isRetrying = statusValue === 'RETRYING';
+                                const isWaiting = statusValue === 'WAITING';
+
+                                return (
+                                    <div key={tunnelIndex}
+                                         className={`border rounded-lg p-3 ${statusDisplay.bgColor} ${statusDisplay.borderColor}`}>
+                                        {/* Tunnel Header */}
+                                        <div className="flex items-start justify-between gap-2">
+                                            <div className="flex items-start gap-2 flex-1 min-w-0">
+                                                <span className={`${statusDisplay.color} mt-0.5 flex-shrink-0`}>
+                                                    {statusDisplay.icon}
+                                                </span>
+                                                <div className="flex-1 min-w-0">
+                                                    <div className="text-sm font-medium break-words">
+                                                        Port {tunnel.sourcePort} → {tunnel.endpointHost}:{tunnel.endpointPort}
+                                                    </div>
+                                                    <div className={`text-xs ${statusDisplay.color} font-medium`}>
+                                                        {statusDisplay.text}
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div className="flex items-center gap-1 flex-shrink-0">
+                                                {tunnel.autoStart && (
+                                                    <Badge variant="outline" className="text-xs px-2 py-1">
+                                                        <Zap className="h-3 w-3 mr-1"/>
+                                                        Auto
+                                                    </Badge>
+                                                )}
+                                                {/* Action Buttons */}
+                                                {!isActionLoading && (
+                                                    <div className="flex flex-col gap-1">
+                                                        {isConnected ? (
+                                                            <>
+                                                                <Button
+                                                                    size="sm"
+                                                                    variant="outline"
+                                                                    onClick={() => onTunnelAction('disconnect', host, tunnelIndex)}
+                                                                    className="h-7 px-2 text-red-600 dark:text-red-400 border-red-500/30 dark:border-red-400/30 hover:bg-red-500/10 dark:hover:bg-red-400/10 hover:border-red-500/50 dark:hover:border-red-400/50 text-xs"
+                                                                >
+                                                                    <Square className="h-3 w-3 mr-1"/>
+                                                                    Disconnect
+                                                                </Button>
+                                                            </>
+                                                        ) : isRetrying || isWaiting ? (
+                                                            <Button
+                                                                size="sm"
+                                                                variant="outline"
+                                                                onClick={() => onTunnelAction('cancel', host, tunnelIndex)}
+                                                                className="h-7 px-2 text-orange-600 dark:text-orange-400 border-orange-500/30 dark:border-orange-400/30 hover:bg-orange-500/10 dark:hover:bg-orange-400/10 hover:border-orange-500/50 dark:hover:border-orange-400/50 text-xs"
+                                                            >
+                                                                <X className="h-3 w-3 mr-1"/>
+                                                                Cancel
+                                                            </Button>
+                                                        ) : (
+                                                            <Button
+                                                                size="sm"
+                                                                variant="outline"
+                                                                onClick={() => onTunnelAction('connect', host, tunnelIndex)}
+                                                                disabled={isConnecting || isDisconnecting}
+                                                                className="h-7 px-2 text-green-600 dark:text-green-400 border-green-500/30 dark:border-green-400/30 hover:bg-green-500/10 dark:hover:bg-green-400/10 hover:border-green-500/50 dark:hover:border-green-400/50 text-xs"
+                                                            >
+                                                                <Play className="h-3 w-3 mr-1"/>
+                                                                Connect
+                                                            </Button>
+                                                        )}
+                                                    </div>
+                                                )}
+                                                {isActionLoading && (
+                                                    <Button
+                                                        size="sm"
+                                                        variant="outline"
+                                                        disabled
+                                                        className="h-7 px-2 text-muted-foreground border-border text-xs"
+                                                    >
+                                                        <Loader2 className="h-3 w-3 mr-1 animate-spin"/>
+                                                        {isConnected ? 'Disconnecting...' : isRetrying || isWaiting ? 'Canceling...' : 'Connecting...'}
+                                                    </Button>
+                                                )}
+                                            </div>
+                                        </div>
+
+                                        {/* Error/Status Reason */}
+                                        {(statusValue === 'ERROR' || statusValue === 'FAILED') && status?.reason && (
+                                            <div
+                                                className="mt-2 text-xs text-red-600 dark:text-red-400 bg-red-500/10 dark:bg-red-400/10 rounded px-3 py-2 border border-red-500/20 dark:border-red-400/20">
+                                                <div className="font-medium mb-1">Error:</div>
+                                                {status.reason}
+                                                {status.reason && status.reason.includes('Max retries exhausted') && (
+                                                    <>
+                                                        <div
+                                                            className="mt-2 pt-2 border-t border-red-500/20 dark:border-red-400/20">
+                                                            Check your Docker logs for the error reason, join the <a
+                                                            href="https://discord.com/invite/jVQGdvHDrf" target="_blank"
+                                                            rel="noopener noreferrer"
+                                                            className="underline text-blue-600 dark:text-blue-400">Discord</a> or
+                                                            create a <a
+                                                            href="https://github.com/LukeGus/Termix/issues/new"
+                                                            target="_blank" rel="noopener noreferrer"
+                                                            className="underline text-blue-600 dark:text-blue-400">GitHub
+                                                            issue</a> for help.
+                                                        </div>
+                                                    </>
+                                                )}
+                                            </div>
+                                        )}
+
+                                        {/* Retry Info */}
+                                        {(statusValue === 'RETRYING' || statusValue === 'WAITING') && status?.retryCount && status?.maxRetries && (
+                                            <div
+                                                className="mt-2 text-xs text-yellow-700 dark:text-yellow-300 bg-yellow-500/10 dark:bg-yellow-400/10 rounded px-3 py-2 border border-yellow-500/20 dark:border-yellow-400/20">
+                                                <div className="font-medium mb-1">
+                                                    {statusValue === 'WAITING' ? 'Waiting for retry' : 'Retrying connection'}
+                                                </div>
+                                                <div>
+                                                    Attempt {status.retryCount} of {status.maxRetries}
+                                                    {status.nextRetryIn && (
+                                                        <span> • Next retry in {status.nextRetryIn} seconds</span>
+                                                    )}
+                                                </div>
+                                            </div>
+                                        )}
+                                    </div>
+                                );
+                            })}
+                        </div>
+                    ) : (
+                        <div className="text-center py-4 text-muted-foreground">
+                            <Network className="h-8 w-8 mx-auto mb-2 opacity-50"/>
+                            <p className="text-sm">No tunnel connections configured</p>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </Card>
+    );
+}

src/ui/SSH/Tunnel/SSHTunnelSidebar.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+
+import {
+    CornerDownLeft,
+    Settings
+} from "lucide-react"
+
+import {
+    Button
+} from "@/components/ui/button.tsx"
+
+import {
+    Sidebar,
+    SidebarContent,
+    SidebarGroup,
+    SidebarGroupContent,
+    SidebarGroupLabel,
+    SidebarMenu,
+    SidebarMenuItem, SidebarProvider,
+} from "@/components/ui/sidebar.tsx"
+
+import {
+    Separator,
+} from "@/components/ui/separator.tsx"
+
+interface SidebarProps {
+    onSelectView: (view: string) => void;
+}
+
+export function SSHTunnelSidebar({onSelectView}: SidebarProps): React.ReactElement {
+    return (
+        <SidebarProvider>
+            <Sidebar>
+                <SidebarContent>
+                    <SidebarGroup>
+                        <SidebarGroupLabel className="text-lg font-bold text-white flex items-center gap-2">
+                            Termix / Tunnel
+                        </SidebarGroupLabel>
+                        <Separator className="p-0.25 mt-1 mb-1"/>
+                        <SidebarGroupContent className="flex flex-col flex-grow">
+                            <SidebarMenu>
+
+                                <SidebarMenuItem key={"Homepage"}>
+                                    <Button className="w-full mt-2 mb-2 h-8" onClick={() => onSelectView("homepage")}
+                                            variant="outline">
+                                        <CornerDownLeft className="h-4 w-4 mr-2"/>
+                                        Return
+                                    </Button>
+                                    <Separator className="p-0.25 mt-1 mb-1"/>
+                                </SidebarMenuItem>
+
+                            </SidebarMenu>
+                        </SidebarGroupContent>
+                    </SidebarGroup>
+                </SidebarContent>
+            </Sidebar>
+        </SidebarProvider>
+    )
+}

src/ui/SSH/Tunnel/SSHTunnelViewer.tsx

@@ -0,0 +1,184 @@
+import React from "react";
+import {SSHTunnelObject} from "./SSHTunnelObject.tsx";
+import {Accordion, AccordionContent, AccordionItem, AccordionTrigger} from "@/components/ui/accordion.tsx";
+import {Separator} from "@/components/ui/separator.tsx";
+import {Input} from "@/components/ui/input.tsx";
+import {Search} from "lucide-react";
+
+interface TunnelConnection {
+    sourcePort: number;
+    endpointPort: number;
+    endpointHost: string;
+    maxRetries: number;
+    retryInterval: number;
+    autoStart: boolean;
+}
+
+interface SSHHost {
+    id: number;
+    name: string;
+    ip: string;
+    port: number;
+    username: string;
+    folder: string;
+    tags: string[];
+    pin: boolean;
+    authType: string;
+    enableTerminal: boolean;
+    enableTunnel: boolean;
+    enableConfigEditor: boolean;
+    defaultPath: string;
+    tunnelConnections: TunnelConnection[];
+    createdAt: string;
+    updatedAt: string;
+}
+
+interface TunnelStatus {
+    status: string;
+    reason?: string;
+    errorType?: string;
+    retryCount?: number;
+    maxRetries?: number;
+    nextRetryIn?: number;
+    retryExhausted?: boolean;
+}
+
+interface SSHTunnelViewerProps {
+    hosts: SSHHost[];
+    tunnelStatuses: Record<string, TunnelStatus>;
+    tunnelActions: Record<string, boolean>;
+    onTunnelAction: (action: 'connect' | 'disconnect' | 'cancel', host: SSHHost, tunnelIndex: number) => Promise<any>;
+}
+
+export function SSHTunnelViewer({
+                                    hosts = [],
+                                    tunnelStatuses = {},
+                                    tunnelActions = {},
+                                    onTunnelAction
+                                }: SSHTunnelViewerProps): React.ReactElement {
+    const [searchQuery, setSearchQuery] = React.useState("");
+    const [debouncedSearch, setDebouncedSearch] = React.useState("");
+
+    React.useEffect(() => {
+        const handler = setTimeout(() => setDebouncedSearch(searchQuery), 200);
+        return () => clearTimeout(handler);
+    }, [searchQuery]);
+
+    const filteredHosts = React.useMemo(() => {
+        if (!debouncedSearch.trim()) return hosts;
+
+        const query = debouncedSearch.trim().toLowerCase();
+        return hosts.filter(host => {
+            const searchableText = [
+                host.name || '',
+                host.username,
+                host.ip,
+                host.folder || '',
+                ...(host.tags || []),
+                host.authType,
+                host.defaultPath || ''
+            ].join(' ').toLowerCase();
+            return searchableText.includes(query);
+        });
+    }, [hosts, debouncedSearch]);
+
+    const tunnelHosts = React.useMemo(() => {
+        return filteredHosts.filter(host =>
+            host.enableTunnel &&
+            host.tunnelConnections &&
+            host.tunnelConnections.length > 0
+        );
+    }, [filteredHosts]);
+
+    const hostsByFolder = React.useMemo(() => {
+        const map: Record<string, SSHHost[]> = {};
+        tunnelHosts.forEach(host => {
+            const folder = host.folder && host.folder.trim() ? host.folder : 'Uncategorized';
+            if (!map[folder]) map[folder] = [];
+            map[folder].push(host);
+        });
+        return map;
+    }, [tunnelHosts]);
+
+    const sortedFolders = React.useMemo(() => {
+        const folders = Object.keys(hostsByFolder);
+        folders.sort((a, b) => {
+            if (a === 'Uncategorized') return -1;
+            if (b === 'Uncategorized') return 1;
+            return a.localeCompare(b);
+        });
+        return folders;
+    }, [hostsByFolder]);
+
+    const getSortedHosts = (arr: SSHHost[]) => {
+        const pinned = arr.filter(h => h.pin).sort((a, b) => (a.name || '').localeCompare(b.name || ''));
+        const rest = arr.filter(h => !h.pin).sort((a, b) => (a.name || '').localeCompare(b.name || ''));
+        return [...pinned, ...rest];
+    };
+
+    return (
+        <div className="w-full p-6" style={{width: 'calc(100vw - 256px)', maxWidth: 'none'}}>
+            <div className="w-full min-w-0" style={{width: '100%', maxWidth: 'none'}}>
+                <div className="mb-6">
+                    <h1 className="text-2xl font-bold text-foreground mb-2">
+                        SSH Tunnels
+                    </h1>
+                    <p className="text-muted-foreground">
+                        Manage your SSH tunnel connections
+                    </p>
+                </div>
+
+                <div className="relative mb-3">
+                    <Search
+                        className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground"/>
+                    <Input
+                        placeholder="Search hosts by name, username, IP, folder, tags..."
+                        value={searchQuery}
+                        onChange={(e) => setSearchQuery(e.target.value)}
+                        className="pl-10"
+                    />
+                </div>
+
+                {tunnelHosts.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-12 text-center">
+                        <h3 className="text-lg font-semibold text-foreground mb-2">
+                            No SSH Tunnels
+                        </h3>
+                        <p className="text-muted-foreground max-w-md">
+                            {searchQuery.trim() ?
+                                "No hosts match your search criteria." :
+                                "Create your first SSH tunnel to get started. Use the SSH Manager to add hosts with tunnel connections."
+                            }
+                        </p>
+                    </div>
+                ) : (
+                    <Accordion type="multiple" className="w-full" defaultValue={sortedFolders}>
+                        {sortedFolders.map((folder, idx) => (
+                            <AccordionItem value={folder} key={`folder-${folder}`}
+                                           className={idx === 0 ? "mt-0" : "mt-2"}>
+                                <AccordionTrigger className="text-base font-semibold rounded-t-none px-3 py-2"
+                                                  style={{marginTop: idx === 0 ? 0 : undefined}}>
+                                    {folder}
+                                </AccordionTrigger>
+                                <AccordionContent className="flex flex-col gap-1 px-3 pb-2 pt-1">
+                                    <div className="grid grid-cols-4 gap-6 w-full">
+                                        {getSortedHosts(hostsByFolder[folder]).map((host, hostIndex) => (
+                                            <div key={host.id} className="w-full">
+                                                <SSHTunnelObject
+                                                    host={host}
+                                                    tunnelStatuses={tunnelStatuses}
+                                                    tunnelActions={tunnelActions}
+                                                    onTunnelAction={onTunnelAction}
+                                                />
+                                            </div>
+                                        ))}
+                                    </div>
+                                </AccordionContent>
+                            </AccordionItem>
+                        ))}
+                    </Accordion>
+                )}
+            </div>
+        </div>
+    );
+}

src/ui/SSH/ssh-axios.ts

@@ -0,0 +1,534 @@
+import axios from 'axios';
+
+interface SSHHostData {
+    name?: string;
+    ip: string;
+    port: number;
+    username: string;
+    folder?: string;
+    tags?: string[];
+    pin?: boolean;
+    authType: 'password' | 'key';
+    password?: string;
+    key?: File | null;
+    keyPassword?: string;
+    keyType?: string;
+    enableTerminal?: boolean;
+    enableTunnel?: boolean;
+    enableConfigEditor?: boolean;
+    defaultPath?: string;
+    tunnelConnections?: any[];
+}
+
+interface SSHHost {
+    id: number;
+    name: string;
+    ip: string;
+    port: number;
+    username: string;
+    folder: string;
+    tags: string[];
+    pin: boolean;
+    authType: string;
+    password?: string;
+    key?: string;
+    keyPassword?: string;
+    keyType?: string;
+    enableTerminal: boolean;
+    enableTunnel: boolean;
+    enableConfigEditor: boolean;
+    defaultPath: string;
+    tunnelConnections: any[];
+    createdAt: string;
+    updatedAt: string;
+}
+
+interface TunnelConfig {
+    name: string;
+    hostName: string;
+    sourceIP: string;
+    sourceSSHPort: number;
+    sourceUsername: string;
+    sourcePassword?: string;
+    sourceAuthMethod: string;
+    sourceSSHKey?: string;
+    sourceKeyPassword?: string;
+    sourceKeyType?: string;
+    endpointIP: string;
+    endpointSSHPort: number;
+    endpointUsername: string;
+    endpointPassword?: string;
+    endpointAuthMethod: string;
+    endpointSSHKey?: string;
+    endpointKeyPassword?: string;
+    endpointKeyType?: string;
+    sourcePort: number;
+    endpointPort: number;
+    maxRetries: number;
+    retryInterval: number;
+    autoStart: boolean;
+    isPinned: boolean;
+}
+
+interface TunnelStatus {
+    status: string;
+    reason?: string;
+    errorType?: string;
+    retryCount?: number;
+    maxRetries?: number;
+    nextRetryIn?: number;
+    retryExhausted?: boolean;
+}
+
+interface ConfigEditorFile {
+    name: string;
+    path: string;
+    type?: 'file' | 'directory';
+    isSSH?: boolean;
+    sshSessionId?: string;
+}
+
+interface ConfigEditorShortcut {
+    name: string;
+    path: string;
+}
+
+const isLocalhost = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
+
+const sshHostApi = axios.create({
+    baseURL: isLocalhost ? 'http://localhost:8081' : '',
+    headers: {
+        'Content-Type': 'application/json',
+    },
+});
+
+const tunnelApi = axios.create({
+    baseURL: isLocalhost ? 'http://localhost:8083' : '',
+    headers: {
+        'Content-Type': 'application/json',
+    },
+});
+
+const configEditorApi = axios.create({
+    baseURL: isLocalhost ? 'http://localhost:8084' : '',
+    headers: {
+        'Content-Type': 'application/json',
+    }
+})
+
+function getCookie(name: string): string | undefined {
+    const value = `; ${document.cookie}`;
+    const parts = value.split(`; ${name}=`);
+    if (parts.length === 2) return parts.pop()?.split(';').shift();
+}
+
+sshHostApi.interceptors.request.use((config) => {
+    const token = getCookie('jwt');
+    if (token) {
+        config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+});
+
+tunnelApi.interceptors.request.use((config) => {
+    const token = getCookie('jwt');
+    if (token) {
+        config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+});
+
+configEditorApi.interceptors.request.use((config) => {
+    const token = getCookie('jwt');
+    if (token) {
+        config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+});
+
+export async function getSSHHosts(): Promise<SSHHost[]> {
+    try {
+        const response = await sshHostApi.get('/ssh/db/host');
+        return response.data;
+    } catch (error) {
+        throw error;
+    }
+}
+
+export async function createSSHHost(hostData: SSHHostData): Promise<SSHHost> {
+    try {
+        const submitData = {
+            name: hostData.name || '',
+            ip: hostData.ip,
+            port: parseInt(hostData.port.toString()) || 22,
+            username: hostData.username,
+            folder: hostData.folder || '',
+            tags: hostData.tags || [],
+            pin: hostData.pin || false,
+            authMethod: hostData.authType,
+            password: hostData.authType === 'password' ? hostData.password : '',
+            key: hostData.authType === 'key' ? hostData.key : null,
+            keyPassword: hostData.authType === 'key' ? hostData.keyPassword : '',
+            keyType: hostData.authType === 'key' ? hostData.keyType : '',
+            enableTerminal: hostData.enableTerminal !== false,
+            enableTunnel: hostData.enableTunnel !== false,
+            enableConfigEditor: hostData.enableConfigEditor !== false,
+            defaultPath: hostData.defaultPath || '/',
+            tunnelConnections: hostData.tunnelConnections || [],
+        };
+
+        if (!submitData.enableTunnel) {
+            submitData.tunnelConnections = [];
+        }
+
+        if (!submitData.enableConfigEditor) {
+            submitData.defaultPath = '';
+        }
+
+        if (hostData.authType === 'key' && hostData.key instanceof File) {
+            const formData = new FormData();
+            formData.append('key', hostData.key);
+
+            const dataWithoutFile = {...submitData};
+            delete dataWithoutFile.key;
+            formData.append('data', JSON.stringify(dataWithoutFile));
+
+            const response = await sshHostApi.post('/ssh/db/host', formData, {
+                headers: {
+                    'Content-Type': 'multipart/form-data',
+                },
+            });
+
+            return response.data;
+        } else {
+            const response = await sshHostApi.post('/ssh/db/host', submitData);
+            return response.data;
+        }
+    } catch (error) {
+        throw error;
+    }
+}
+
+export async function updateSSHHost(hostId: number, hostData: SSHHostData): Promise<SSHHost> {
+    try {
+        const submitData = {
+            name: hostData.name || '',
+            ip: hostData.ip,
+            port: parseInt(hostData.port.toString()) || 22,
+            username: hostData.username,
+            folder: hostData.folder || '',
+            tags: hostData.tags || [],
+            pin: hostData.pin || false,
+            authMethod: hostData.authType,
+            password: hostData.authType === 'password' ? hostData.password : '',
+            key: hostData.authType === 'key' ? hostData.key : null,
+            keyPassword: hostData.authType === 'key' ? hostData.keyPassword : '',
+            keyType: hostData.authType === 'key' ? hostData.keyType : '',
+            enableTerminal: hostData.enableTerminal !== false,
+            enableTunnel: hostData.enableTunnel !== false,
+            enableConfigEditor: hostData.enableConfigEditor !== false,
+            defaultPath: hostData.defaultPath || '/',
+            tunnelConnections: hostData.tunnelConnections || [],
+        };
+
+        if (!submitData.enableTunnel) {
+            submitData.tunnelConnections = [];
+        }
+        if (!submitData.enableConfigEditor) {
+            submitData.defaultPath = '';
+        }
+
+        if (hostData.authType === 'key' && hostData.key instanceof File) {
+            const formData = new FormData();
+            formData.append('key', hostData.key);
+
+            const dataWithoutFile = {...submitData};
+            delete dataWithoutFile.key;
+            formData.append('data', JSON.stringify(dataWithoutFile));
+
+            const response = await sshHostApi.put(`/ssh/db/host/${hostId}`, formData, {
+                headers: {
+                    'Content-Type': 'multipart/form-data',
+                },
+            });
+
+            return response.data;
+        } else {
+            const response = await sshHostApi.put(`/ssh/db/host/${hostId}`, submitData);
+            return response.data;
+        }
+    } catch (error) {
+        throw error;
+    }
+}
+
+export async function bulkImportSSHHosts(hosts: SSHHostData[]): Promise<{
+    message: string;
+    success: number;
+    failed: number;
+    errors: string[];
+}> {
+    try {
+        const response = await sshHostApi.post('/ssh/bulk-import', {hosts});
+        return response.data;
+    } catch (error) {
+        throw error;
+    }
+}
+
+export async function deleteSSHHost(hostId: number): Promise<any> {
+    try {
+        const response = await sshHostApi.delete(`/ssh/db/host/${hostId}`);
+        return response.data;
+    } catch (error) {
+        throw error;
+    }
+}
+
+export async function getSSHHostById(hostId: number): Promise<SSHHost> {
+    try {
+        const response = await sshHostApi.get(`/ssh/db/host/${hostId}`);
+        return response.data;
+    } catch (error) {
+        throw error;
+    }
+}
+
+export async function getTunnelStatuses(): Promise<Record<string, TunnelStatus>> {
+    try {
+        const response = await tunnelApi.get('/ssh/tunnel/status');
+        return response.data || {};
+    } catch (error) {
+        throw error;
+    }
+}
+
+export async function getTunnelStatusByName(tunnelName: string): Promise<TunnelStatus | undefined> {
+    const statuses = await getTunnelStatuses();
+    return statuses[tunnelName];
+}
+
+export async function connectTunnel(tunnelConfig: TunnelConfig): Promise<any> {
+    try {
+        const response = await tunnelApi.post('/ssh/tunnel/connect', tunnelConfig);
+        return response.data;
+    } catch (error) {
+        throw error;
+    }
+}
+
+export async function disconnectTunnel(tunnelName: string): Promise<any> {
+    try {
+        const response = await tunnelApi.post('/ssh/tunnel/disconnect', {tunnelName});
+        return response.data;
+    } catch (error) {
+        throw error;
+    }
+}
+
+export async function cancelTunnel(tunnelName: string): Promise<any> {
+    try {
+        const response = await tunnelApi.post('/ssh/tunnel/cancel', {tunnelName});
+        return response.data;
+    } catch (error) {
+        throw error;
+    }
+}
+
+export async function getConfigEditorRecent(hostId: number): Promise<ConfigEditorFile[]> {
+    try {
+        const response = await sshHostApi.get(`/ssh/config_editor/recent?hostId=${hostId}`);
+        return response.data || [];
+    } catch (error) {
+        return [];
+    }
+}
+
+export async function addConfigEditorRecent(file: {
+    name: string;
+    path: string;
+    isSSH: boolean;
+    sshSessionId?: string;
+    hostId: number
+}): Promise<any> {
+    try {
+        const response = await sshHostApi.post('/ssh/config_editor/recent', file);
+        return response.data;
+    } catch (error) {
+        throw error;
+    }
+}
+
+export async function removeConfigEditorRecent(file: {
+    name: string;
+    path: string;
+    isSSH: boolean;
+    sshSessionId?: string;
+    hostId: number
+}): Promise<any> {
+    try {
+        const response = await sshHostApi.delete('/ssh/config_editor/recent', {data: file});
+        return response.data;
+    } catch (error) {
+        throw error;
+    }
+}
+
+export async function getConfigEditorPinned(hostId: number): Promise<ConfigEditorFile[]> {
+    try {
+        const response = await sshHostApi.get(`/ssh/config_editor/pinned?hostId=${hostId}`);
+        return response.data || [];
+    } catch (error) {
+        return [];
+    }
+}
+
+export async function addConfigEditorPinned(file: {
+    name: string;
+    path: string;
+    isSSH: boolean;
+    sshSessionId?: string;
+    hostId: number
+}): Promise<any> {
+    try {
+        const response = await sshHostApi.post('/ssh/config_editor/pinned', file);
+        return response.data;
+    } catch (error) {
+        throw error;
+    }
+}
+
+export async function removeConfigEditorPinned(file: {
+    name: string;
+    path: string;
+    isSSH: boolean;
+    sshSessionId?: string;
+    hostId: number
+}): Promise<any> {
+    try {
+        const response = await sshHostApi.delete('/ssh/config_editor/pinned', {data: file});
+        return response.data;
+    } catch (error) {
+        throw error;
+    }
+}
+
+export async function getConfigEditorShortcuts(hostId: number): Promise<ConfigEditorShortcut[]> {
+    try {
+        const response = await sshHostApi.get(`/ssh/config_editor/shortcuts?hostId=${hostId}`);
+        return response.data || [];
+    } catch (error) {
+        return [];
+    }
+}
+
+export async function addConfigEditorShortcut(shortcut: {
+    name: string;
+    path: string;
+    isSSH: boolean;
+    sshSessionId?: string;
+    hostId: number
+}): Promise<any> {
+    try {
+        const response = await sshHostApi.post('/ssh/config_editor/shortcuts', shortcut);
+        return response.data;
+    } catch (error) {
+        throw error;
+    }
+}
+
+export async function removeConfigEditorShortcut(shortcut: {
+    name: string;
+    path: string;
+    isSSH: boolean;
+    sshSessionId?: string;
+    hostId: number
+}): Promise<any> {
+    try {
+        const response = await sshHostApi.delete('/ssh/config_editor/shortcuts', {data: shortcut});
+        return response.data;
+    } catch (error) {
+        throw error;
+    }
+}
+
+export async function connectSSH(sessionId: string, config: {
+    ip: string;
+    port: number;
+    username: string;
+    password?: string;
+    sshKey?: string;
+    keyPassword?: string;
+}): Promise<any> {
+    try {
+        const response = await configEditorApi.post('/ssh/config_editor/ssh/connect', {
+            sessionId,
+            ...config
+        });
+        return response.data;
+    } catch (error) {
+        throw error;
+    }
+}
+
+export async function disconnectSSH(sessionId: string): Promise<any> {
+    try {
+        const response = await configEditorApi.post('/ssh/config_editor/ssh/disconnect', {sessionId});
+        return response.data;
+    } catch (error) {
+        throw error;
+    }
+}
+
+export async function getSSHStatus(sessionId: string): Promise<{ connected: boolean }> {
+    try {
+        const response = await configEditorApi.get('/ssh/config_editor/ssh/status', {
+            params: {sessionId}
+        });
+        return response.data;
+    } catch (error) {
+        throw error;
+    }
+}
+
+export async function listSSHFiles(sessionId: string, path: string): Promise<any[]> {
+    try {
+        const response = await configEditorApi.get('/ssh/config_editor/ssh/listFiles', {
+            params: {sessionId, path}
+        });
+        return response.data || [];
+    } catch (error) {
+        throw error;
+    }
+}
+
+export async function readSSHFile(sessionId: string, path: string): Promise<{ content: string; path: string }> {
+    try {
+        const response = await configEditorApi.get('/ssh/config_editor/ssh/readFile', {
+            params: {sessionId, path}
+        });
+        return response.data;
+    } catch (error) {
+        throw error;
+    }
+}
+
+export async function writeSSHFile(sessionId: string, path: string, content: string): Promise<any> {
+    try {
+        const response = await configEditorApi.post('/ssh/config_editor/ssh/writeFile', {
+            sessionId,
+            path,
+            content
+        });
+
+        if (response.data && (response.data.message === 'File written successfully' || response.status === 200)) {
+            return response.data;
+        } else {
+            throw new Error('File write operation did not return success status');
+        }
+    } catch (error) {
+        throw error;
+    }
+}
+
+export {sshHostApi, tunnelApi, configEditorApi};