[Init] Initial commit - NetMesh terminal manager

components/sftp/SftpHostPicker.tsx

@@ -0,0 +1,361 @@
+/**
+ * SFTP Host Picker Dialog
+ */
+
+import { Monitor, Search } from 'lucide-react';
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useI18n } from '../../application/i18n/I18nProvider';
+import {
+    sftpHostEndpointsEqual,
+    sftpSourceSessionIdForHost,
+    type SftpConnectedHostEntry,
+} from '../../domain/sftpConnectedHosts';
+import { isPluginHostProtocol } from '../../domain/pluginConnection';
+import { Host } from '../../types';
+import { DistroAvatar } from '../DistroAvatar';
+import { getQuickSwitcherRowStateClass, shouldUseQuickSwitcherPointerNavigation } from '../QuickSwitcher';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/dialog';
+import { Input } from '../ui/input';
+import {
+    VariableSizeVirtualList,
+    type VariableSizeVirtualListHandle,
+} from '../ui/VariableSizeVirtualList';
+import { clampListIndex, stepListIndex } from '../ui/virtualListMath';
+
+const SFTP_PICKER_ROW_HEIGHT = 44;
+const SFTP_PICKER_HEADER_HEIGHT = 32;
+const SFTP_PICKER_EMPTY_HEIGHT = 56;
+
+interface SftpHostPickerProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    hosts: Host[];
+    connectedHosts?: SftpConnectedHostEntry[];
+    side: 'left' | 'right';
+    hostSearch: string;
+    onHostSearchChange: (search: string) => void;
+    onSelectLocal: () => void;
+    onSelectHost: (host: Host, options?: { sourceSessionId?: string }) => void;
+}
+
+const StatusDot: React.FC = () => (
+    <span className="h-1.5 w-1.5 rounded-full shrink-0 bg-emerald-500" aria-hidden />
+);
+
+function formatHostMeta(host: Host): string {
+    const endpoint = host.username ? `${host.username}@${host.hostname}` : host.hostname;
+    return host.group ? `${endpoint} · ${host.group}` : endpoint;
+}
+
+type PickerItem =
+    | { type: 'local'; id: string }
+    | { type: 'connected'; id: string; entry: SftpConnectedHostEntry }
+    | { type: 'host'; id: string; host: Host };
+
+type VisualRow =
+    | { kind: 'header'; key: string; label: string }
+    | { kind: 'item'; key: string; item: PickerItem; itemIndex: number }
+    | { kind: 'empty'; key: string; message: string };
+
+const SftpHostPickerInner: React.FC<SftpHostPickerProps> = ({
+    open,
+    onOpenChange,
+    hosts,
+    connectedHosts = [],
+    side,
+    hostSearch,
+    onHostSearchChange,
+    onSelectLocal,
+    onSelectHost,
+}) => {
+    const { t } = useI18n();
+    const inputRef = useRef<HTMLInputElement>(null);
+    const listRef = useRef<VariableSizeVirtualListHandle>(null);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [isKeyboardNavigating, setIsKeyboardNavigating] = useState(true);
+    const isKeyboardNavigatingRef = useRef(true);
+    const term = hostSearch.trim().toLowerCase();
+
+    const filteredConnectedHosts = useMemo(() => {
+        return connectedHosts.filter(({ host }) =>
+            !term ||
+            host.label.toLowerCase().includes(term) ||
+            host.hostname.toLowerCase().includes(term) ||
+            host.username.toLowerCase().includes(term),
+        );
+    }, [connectedHosts, term]);
+
+    const connectedByHostId = useMemo(() => {
+        const map = new Map<string, SftpConnectedHostEntry>();
+        for (const entry of filteredConnectedHosts) {
+            map.set(entry.host.id, entry);
+        }
+        return map;
+    }, [filteredConnectedHosts]);
+
+    const filteredHosts = useMemo(() => {
+        return hosts.filter((h) => {
+            // SFTP is an SSH-specific host capability. Plugin protocols may
+            // provide arbitrary transports and cannot be treated as SSH.
+            if (h.protocol === "serial" || isPluginHostProtocol(h.protocol)) return false;
+            // Hide a saved host only when Connected already shows the same endpoint.
+            // If the vault host was edited after connect, keep both: Live (old) + Saved (new).
+            const connected = connectedByHostId.get(h.id);
+            if (connected && sftpHostEndpointsEqual(h, connected.host)) return false;
+            return !term
+                || h.label.toLowerCase().includes(term)
+                || h.hostname.toLowerCase().includes(term);
+        }).sort((a, b) => a.label.localeCompare(b.label));
+    }, [hosts, term, connectedByHostId]);
+    const sideLabel = side === 'left' ? t('common.left') : t('common.right');
+
+    const { items, visualRows, itemIndexToVisualIndex } = useMemo(() => {
+        const nextItems: PickerItem[] = [];
+        const nextVisual: VisualRow[] = [];
+        const nextMap = new Map<number, number>();
+
+        const pushHeader = (key: string, label: string) => {
+            nextVisual.push({ kind: 'header', key, label });
+        };
+        const pushItem = (item: PickerItem) => {
+            const itemIndex = nextItems.length;
+            nextItems.push(item);
+            nextMap.set(itemIndex, nextVisual.length);
+            nextVisual.push({ kind: 'item', key: item.id, item, itemIndex });
+        };
+
+        pushHeader('header:local', t('sftp.picker.local.badge'));
+        pushItem({ type: 'local', id: 'local' });
+
+        if (filteredConnectedHosts.length > 0) {
+            pushHeader('header:connected', t('sftp.picker.connected.section'));
+            for (const entry of filteredConnectedHosts) {
+                pushItem({
+                    type: 'connected',
+                    id: `connected:${entry.sessionId}`,
+                    entry,
+                });
+            }
+        }
+
+        // Only show the Hosts section when there are saved hosts to list, or when
+        // nothing matched at all (no connected + no saved). Avoid a dangling
+        // "Hosts" header after connected-only results hide the saved inventory.
+        if (filteredHosts.length > 0) {
+            pushHeader('header:hosts', t('vault.nav.hosts'));
+            for (const host of filteredHosts) {
+                pushItem({ type: 'host', id: host.id, host });
+            }
+        } else if (filteredConnectedHosts.length === 0) {
+            pushHeader('header:hosts', t('vault.nav.hosts'));
+            nextVisual.push({
+                kind: 'empty',
+                key: 'empty:hosts',
+                message: t('sftp.picker.noMatch'),
+            });
+        }
+
+        return {
+            items: nextItems,
+            visualRows: nextVisual,
+            itemIndexToVisualIndex: nextMap,
+        };
+    }, [filteredConnectedHosts, filteredHosts, t]);
+
+    useEffect(() => {
+        if (!open) return;
+        setSelectedIndex(0);
+        isKeyboardNavigatingRef.current = true;
+        setIsKeyboardNavigating(true);
+        const focusTimer = setTimeout(() => inputRef.current?.focus(), 50);
+        return () => clearTimeout(focusTimer);
+    }, [open]);
+
+    useEffect(() => {
+        if (!open) return;
+        setSelectedIndex(0);
+        isKeyboardNavigatingRef.current = true;
+        setIsKeyboardNavigating(true);
+    }, [hostSearch, open]);
+
+    useEffect(() => {
+        if (!open) return;
+        setSelectedIndex((prev) => clampListIndex(prev, items.length));
+    }, [items.length, open]);
+
+    useEffect(() => {
+        if (!open) return;
+        const visualIndex = itemIndexToVisualIndex.get(selectedIndex);
+        if (visualIndex === undefined) return;
+        listRef.current?.scrollToIndex(visualIndex, 'auto');
+    }, [itemIndexToVisualIndex, open, selectedIndex]);
+
+    const handleSelect = useCallback((item: PickerItem) => {
+        if (item.type === 'local') {
+            onSelectLocal();
+        } else if (item.type === 'connected') {
+            // Sudo SFTP cannot reuse the terminal shell; omit the hint so connect
+            // UI (reusedConnection / spinner) matches the dedicated open path.
+            const sourceSessionId = sftpSourceSessionIdForHost(
+                item.entry.host,
+                item.entry.sessionId,
+            );
+            onSelectHost(
+                item.entry.host,
+                sourceSessionId ? { sourceSessionId } : undefined,
+            );
+        } else {
+            onSelectHost(item.host);
+        }
+        onOpenChange(false);
+    }, [onOpenChange, onSelectHost, onSelectLocal]);
+
+    // Match Quick Switcher: pointer movement only leaves keyboard-nav mode.
+    // It must not rewrite the keyboard-selected index until the user clicks.
+    const handlePointerHover = useCallback((movementX: number, movementY: number) => {
+        if (!shouldUseQuickSwitcherPointerNavigation(movementX, movementY)) return;
+        if (!isKeyboardNavigatingRef.current) return;
+        isKeyboardNavigatingRef.current = false;
+        setIsKeyboardNavigating(false);
+    }, []);
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            isKeyboardNavigatingRef.current = true;
+            setIsKeyboardNavigating(true);
+            setSelectedIndex((prev) => stepListIndex(prev, items.length, 1));
+        } else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            isKeyboardNavigatingRef.current = true;
+            setIsKeyboardNavigating(true);
+            setSelectedIndex((prev) => stepListIndex(prev, items.length, -1));
+        } else if (e.key === 'Enter' && items.length > 0) {
+            e.preventDefault();
+            const item = items[clampListIndex(selectedIndex, items.length)];
+            if (!item) return;
+            handleSelect(item);
+        }
+    };
+
+    const getRowHeight = useCallback((row: VisualRow) => {
+        if (row.kind === 'header') return SFTP_PICKER_HEADER_HEIGHT;
+        if (row.kind === 'empty') return SFTP_PICKER_EMPTY_HEIGHT;
+        return SFTP_PICKER_ROW_HEIGHT;
+    }, []);
+
+    // Cap at 360px for large inventories, but shrink to content for short lists
+    // (Local-only / few hosts) so the dialog does not leave a large blank region.
+    const listViewportHeight = useMemo(() => {
+        let total = 0;
+        for (const row of visualRows) total += getRowHeight(row);
+        return Math.min(360, Math.max(total, 1));
+    }, [getRowHeight, visualRows]);
+
+    const renderRow = useCallback((row: VisualRow) => {
+        if (row.kind === 'header') {
+            return (
+                <div className="flex h-full items-end px-4 pb-1.5">
+                    <span className="text-xs font-medium text-muted-foreground">{row.label}</span>
+                </div>
+            );
+        }
+        if (row.kind === 'empty') {
+            return (
+                <div className="px-4 py-6 text-xs text-muted-foreground text-center">
+                    {row.message}
+                </div>
+            );
+        }
+
+        const { item, itemIndex } = row;
+        const isSelected = selectedIndex === itemIndex;
+
+        if (item.type === 'local') {
+            return (
+                <div
+                    className={`flex items-center justify-between px-4 py-2.5 cursor-pointer transition-colors ${getQuickSwitcherRowStateClass(isSelected, isKeyboardNavigating)}`}
+                    onClick={() => handleSelect(item)}
+                    onMouseMove={(event) => handlePointerHover(event.movementX, event.movementY)}
+                >
+                    <div className="flex items-center gap-3 min-w-0">
+                        <div className="h-6 w-6 rounded flex items-center justify-center text-muted-foreground">
+                            <Monitor size={16} />
+                        </div>
+                        <span className="text-sm font-medium truncate">{t('sftp.picker.local.title')}</span>
+                    </div>
+                    <div className="ml-3 shrink-0 text-[11px] text-muted-foreground truncate max-w-[12rem]">
+                        {t('sftp.picker.local.desc')}
+                    </div>
+                </div>
+            );
+        }
+
+        const host = item.type === 'connected' ? item.entry.host : item.host;
+        const showStatus = item.type === 'connected';
+        return (
+            <div
+                className={`flex items-center justify-between px-4 py-2.5 cursor-pointer transition-colors ${getQuickSwitcherRowStateClass(isSelected, isKeyboardNavigating)}`}
+                onClick={() => handleSelect(item)}
+                onMouseMove={(event) => handlePointerHover(event.movementX, event.movementY)}
+            >
+                <div className="flex items-center gap-3 min-w-0">
+                    <DistroAvatar host={host} fallback={host.label.slice(0, 2).toUpperCase()} size="sm" />
+                    <div className="flex min-w-0 items-center gap-1.5">
+                        {showStatus ? <StatusDot /> : null}
+                        <span className="text-sm font-medium truncate">{host.label}</span>
+                    </div>
+                </div>
+                <div className="ml-3 shrink-0 text-[11px] text-muted-foreground truncate max-w-[12rem]">
+                    {formatHostMeta(host)}
+                </div>
+            </div>
+        );
+    }, [handlePointerHover, handleSelect, isKeyboardNavigating, selectedIndex, t]);
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="max-w-lg p-0 overflow-hidden gap-0">
+                <DialogHeader className="sr-only">
+                    <DialogTitle>{t('sftp.picker.title')}</DialogTitle>
+                    <DialogDescription>
+                        {t('sftp.picker.desc', { side: side === 'left' ? t('common.left') : t('common.right') })}
+                    </DialogDescription>
+                </DialogHeader>
+                <div className="flex items-center gap-3 px-4 py-3 pr-12 border-b border-border">
+                    <Search size={16} className="text-muted-foreground" />
+                    <Input
+                        ref={inputRef}
+                        value={hostSearch}
+                        onChange={e => onHostSearchChange(e.target.value)}
+                        onKeyDown={handleKeyDown}
+                        placeholder={t('sftp.picker.searchPlaceholder')}
+                        className="flex-1 h-8 border-0 bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 px-0 text-sm"
+                    />
+                    <span className="ml-auto mr-1 text-[11px] text-muted-foreground bg-muted px-2 py-0.5 rounded whitespace-nowrap">
+                        {sideLabel}
+                    </span>
+                </div>
+
+                <div
+                    className="max-h-[360px]"
+                    style={{ height: listViewportHeight }}
+                    data-host-picker-virtual="sftp"
+                >
+                    <VariableSizeVirtualList<VisualRow>
+                        ref={listRef}
+                        items={visualRows}
+                        getItemHeight={getRowHeight}
+                        className="h-full"
+                        overscan={8}
+                        getItemKey={(row) => row.key}
+                        renderItem={renderRow}
+                    />
+                </div>
+            </DialogContent>
+        </Dialog>
+    );
+};
+
+export const SftpHostPicker = memo(SftpHostPickerInner);
+SftpHostPicker.displayName = 'SftpHostPicker';