fix: truncate long command text in snippet list to prevent layout overflow (#628 ) (#630 )

- Use w-0 flex-1 pattern on text containers to enforce width constraint - Add overflow-hidden on list item containers - Add tooltip on snippet command text to show full content on hover Closes #628 Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
fix: support CSV password import and save password in keyboard-interactive auth (#629 )
2026-04-05 15:05:56 +08:00 · 2026-04-05 14:39:39 +08:00
6 changed files with 102 additions and 46 deletions
--- a/App.tsx
+++ b/App.tsx
@@ -722,6 +722,7 @@ function App({ settings }: { settings: SettingsState }) {
      // Add to queue instead of replacing - supports multiple concurrent sessions
      setKeyboardInteractiveQueue(prev => [...prev, {
        requestId: request.requestId,
+        sessionId: request.sessionId,
        name: request.name,
        instructions: request.instructions,
        prompts: request.prompts,
@@ -736,14 +737,29 @@ function App({ settings }: { settings: SettingsState }) {
  }, []);

  // Handle keyboard-interactive submit
-  const handleKeyboardInteractiveSubmit = useCallback((requestId: string, responses: string[]) => {
+  const handleKeyboardInteractiveSubmit = useCallback((requestId: string, responses: string[], savePassword?: string) => {
    const bridge = netcattyBridge.get();
    if (bridge?.respondKeyboardInteractive) {
      void bridge.respondKeyboardInteractive(requestId, responses, false);
    }
+    // Save password to host if requested
+    if (savePassword) {
+      const request = keyboardInteractiveQueue.find(r => r.requestId === requestId);
+      if (request?.sessionId) {
+        const session = sessions.find(s => s.id === request.sessionId);
+        // Only save when the prompting hostname matches the session's host,
+        // to avoid overwriting the destination host's password with a jump host's password
+        if (session?.hostId && (!request.hostname || request.hostname === session.hostname)) {
+          const host = hosts.find(h => h.id === session.hostId);
+          if (host) {
+            updateHosts(hosts.map(h => h.id === host.id ? { ...h, password: savePassword } : h));
+          }
+        }
+      }
+    }
    // Remove from queue by requestId
    setKeyboardInteractiveQueue(prev => prev.filter(r => r.requestId !== requestId));
-  }, []);
+  }, [keyboardInteractiveQueue, sessions, hosts, updateHosts]);

  // Handle keyboard-interactive cancel
  const handleKeyboardInteractiveCancel = useCallback((requestId: string) => {
--- a/application/i18n/locales/en.ts
+++ b/application/i18n/locales/en.ts
@@ -1644,10 +1644,7 @@ const en: Messages = {
  'keyboard.interactive.enterResponse': 'Enter response',
  'keyboard.interactive.submit': 'Submit',
  'keyboard.interactive.verifying': 'Verifying...',
-  'keyboard.interactive.fill': 'Fill',
-  'keyboard.interactive.fillSaved': 'Fill with saved password',
-  'keyboard.interactive.useSaved': 'Use saved',
-  'keyboard.interactive.useSavedPassword': 'Use saved password',
+  'keyboard.interactive.savePassword': 'Save password',

  // Passphrase Modal for encrypted SSH keys
  'passphrase.title': 'SSH Key Passphrase',
--- a/application/i18n/locales/zh-CN.ts
+++ b/application/i18n/locales/zh-CN.ts
@@ -1651,10 +1651,7 @@ const zhCN: Messages = {
  'keyboard.interactive.enterResponse': '输入响应',
  'keyboard.interactive.submit': '提交',
  'keyboard.interactive.verifying': '验证中...',
-  'keyboard.interactive.fill': '填入',
-  'keyboard.interactive.fillSaved': '填入已保存的密码',
-  'keyboard.interactive.useSaved': '使用已保存',
-  'keyboard.interactive.useSavedPassword': '使用已保存的密码',
+  'keyboard.interactive.savePassword': '保存密码',

  // Passphrase Modal for encrypted SSH keys
  'passphrase.title': 'SSH 密钥密码',
--- a/components/KeyboardInteractiveModal.tsx
+++ b/components/KeyboardInteractiveModal.tsx
@@ -4,7 +4,7 @@
 * This modal displays prompts from the SSH server and collects user responses.
 */
 import { Eye, EyeOff, KeyRound, Loader2 } from "lucide-react";
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { useI18n } from "../application/i18n/I18nProvider";
 import { Button } from "./ui/button";
 import {
@@ -24,6 +24,7 @@ export interface KeyboardInteractivePrompt {

 export interface KeyboardInteractiveRequest {
  requestId: string;
+  sessionId?: string;
  name: string;
  instructions: string;
  prompts: KeyboardInteractivePrompt[];
@@ -31,9 +32,18 @@ export interface KeyboardInteractiveRequest {
  savedPassword?: string | null;
 }

+const isAPasswordPrompt = (prompt: KeyboardInteractivePrompt) => {
+  if (prompt.echo) return false;
+  const lower = prompt.prompt.toLowerCase();
+  if (!lower.includes("password")) return false;
+  // Exclude OTP / one-time password / verification code prompts
+  if (lower.includes("one-time") || lower.includes("otp") || lower.includes("verification") || lower.includes("token") || lower.includes("code")) return false;
+  return true;
+};
+
 interface KeyboardInteractiveModalProps {
  request: KeyboardInteractiveRequest | null;
-  onSubmit: (requestId: string, responses: string[]) => void;
+  onSubmit: (requestId: string, responses: string[], savePassword?: string) => void;
  onCancel: (requestId: string) => void;
 }

@@ -46,15 +56,28 @@ export const KeyboardInteractiveModal: React.FC<KeyboardInteractiveModalProps> =
  const [responses, setResponses] = useState<string[]>([]);
  const [showPasswords, setShowPasswords] = useState<boolean[]>([]);
  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [savePassword, setSavePassword] = useState(false);
+
+  // Index of the first password prompt (if any)
+  const passwordPromptIndex = useMemo(() => {
+    if (!request) return -1;
+    return request.prompts.findIndex(p => isAPasswordPrompt(p));
+  }, [request]);

  // Reset state when request changes
  useEffect(() => {
    if (request) {
-      setResponses(request.prompts.map(() => ""));
+      const initial = request.prompts.map(() => "");
+      // Auto-fill saved password into the password prompt
+      if (request.savedPassword && passwordPromptIndex >= 0) {
+        initial[passwordPromptIndex] = request.savedPassword;
+      }
+      setResponses(initial);
      setShowPasswords(request.prompts.map(() => false));
      setIsSubmitting(false);
+      setSavePassword(false);
    }
-  }, [request]);
+  }, [request, passwordPromptIndex]);

  const handleResponseChange = useCallback((index: number, value: string) => {
    setResponses((prev) => {
@@ -75,8 +98,11 @@ export const KeyboardInteractiveModal: React.FC<KeyboardInteractiveModalProps> =
  const handleSubmit = useCallback(() => {
    if (!request || isSubmitting) return;
    setIsSubmitting(true);
-    onSubmit(request.requestId, responses);
-  }, [request, responses, onSubmit, isSubmitting]);
+    const passwordToSave = savePassword && passwordPromptIndex >= 0
+      ? responses[passwordPromptIndex]
+      : undefined;
+    onSubmit(request.requestId, responses, passwordToSave);
+  }, [request, responses, onSubmit, isSubmitting, savePassword, passwordPromptIndex]);

  const handleCancel = useCallback(() => {
    if (!request) return;
@@ -154,19 +180,20 @@ export const KeyboardInteractiveModal: React.FC<KeyboardInteractiveModalProps> =
                    </button>
                  )}
                </div>
-                {/* Use saved password button - shown below input, right-aligned */}
-                {isPassword && request.savedPassword && !responses[index] && (
-                  <div className="flex justify-end">
-                    <button
-                      type="button"
-                      className="flex items-center gap-1 text-xs text-primary hover:text-primary/80 disabled:opacity-50"
-                      onClick={() => handleResponseChange(index, request.savedPassword!)}
+                {/* Save password checkbox - shown only for the first password prompt */}
+                {index === passwordPromptIndex && (
+                  <label className="flex items-center gap-2 cursor-pointer select-none">
+                    <input
+                      type="checkbox"
+                      checked={savePassword}
+                      onChange={(e) => setSavePassword(e.target.checked)}
                      disabled={isSubmitting}
-                    >
-                      <KeyRound size={12} />
-                      <span>{t("keyboard.interactive.useSavedPassword")}</span>
-                    </button>
-                  </div>
+                      className="accent-primary"
+                    />
+                    <span className="text-xs text-muted-foreground">
+                      {t("keyboard.interactive.savePassword")}
+                    </span>
+                  </label>
                )}
              </div>
            );
--- a/components/SnippetsManager.tsx
+++ b/components/SnippetsManager.tsx
@@ -18,6 +18,7 @@ import { Input } from './ui/input';
 import { Label } from './ui/label';
 import { SortDropdown, SortMode } from './ui/sort-dropdown';
 import { Textarea } from './ui/textarea';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/tooltip';

 interface SnippetsManagerProps {
  snippets: Snippet[];
@@ -951,8 +952,9 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
  };

  return (
+    <TooltipProvider delayDuration={300}>
    <div className="h-full flex gap-3 relative">
-      <div className="flex-1 flex flex-col min-h-0">
+      <div className="flex-1 flex flex-col min-h-0 min-w-0 overflow-hidden">
        <header className="border-b border-border/50 bg-secondary/80 backdrop-blur">
          <div className="h-14 px-4 py-2 flex items-center gap-2">
            {/* Search box */}
@@ -1059,7 +1061,7 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
                    <ContextMenuTrigger>
                      <div
                        className={cn(
-                          "group cursor-pointer",
+                          "group cursor-pointer overflow-hidden",
                          viewMode === 'grid'
                            ? "soft-card elevate rounded-xl h-[68px] px-3 py-2"
                            : "h-14 px-3 py-2 hover:bg-secondary/60 rounded-lg transition-colors"
@@ -1079,11 +1081,11 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
                        }}
                        onClick={() => setSelectedPackage(pkg.path)}
                      >
-                        <div className="flex items-center gap-3 h-full">
+                        <div className="flex items-center gap-3 h-full min-w-0">
                          <div className="h-11 w-11 rounded-xl bg-primary/15 text-primary flex items-center justify-center flex-shrink-0">
                            <Package size={18} />
                          </div>
-                          <div className="min-w-0 flex-1">
+                          <div className="w-0 flex-1">
                            <div className="text-sm font-semibold truncate">{pkg.name}</div>
                            <div className="text-[11px] text-muted-foreground">{t('snippets.package.count', { count: pkg.count })}</div>
                          </div>
@@ -1114,7 +1116,7 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
                    <ContextMenuTrigger>
                      <div
                        className={cn(
-                          "group cursor-pointer",
+                          "group cursor-pointer overflow-hidden",
                          viewMode === 'grid'
                            ? "soft-card elevate rounded-xl h-[68px] px-3 py-2"
                            : "h-14 px-3 py-2 hover:bg-secondary/60 rounded-lg transition-colors"
@@ -1126,15 +1128,22 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
                        }}
                        onClick={() => handleEdit(snippet)}
                      >
-                        <div className="flex items-center gap-3 h-full">
+                        <div className="flex items-center gap-3 h-full min-w-0">
                          <div className="h-11 w-11 rounded-xl bg-primary/15 text-primary flex items-center justify-center flex-shrink-0">
                            <FileCode size={18} />
                          </div>
-                          <div className="min-w-0 flex-1">
+                          <div className="w-0 flex-1">
                            <div className="text-sm font-semibold truncate">{snippet.label}</div>
-                            <div className="text-[11px] text-muted-foreground font-mono leading-4 truncate">
-                              {snippet.command.replace(/\s+/g, ' ') || t('snippets.commandFallback')}
-                            </div>
+                            <Tooltip>
+                              <TooltipTrigger asChild>
+                                <div className="text-[11px] text-muted-foreground font-mono leading-4 truncate">
+                                  {snippet.command.replace(/\s+/g, ' ') || t('snippets.commandFallback')}
+                                </div>
+                              </TooltipTrigger>
+                              <TooltipContent side="bottom" className="max-w-sm break-all font-mono text-xs">
+                                {snippet.command}
+                              </TooltipContent>
+                            </Tooltip>
                          </div>
                          {snippet.shortkey && (
                            <div className="shrink-0 px-2 py-1 text-[10px] font-mono rounded border border-border bg-muted/50 text-muted-foreground">
@@ -1254,6 +1263,7 @@ const SnippetsManager: React.FC<SnippetsManagerProps> = ({
      {/* Right Panel */}
      {renderRightPanel()}
    </div>
+    </TooltipProvider>
  );
 };

--- a/domain/vaultImport.ts
+++ b/domain/vaultImport.ts
@@ -155,6 +155,7 @@ const createHost = (input: {
  label?: string;
  hostname: string;
  username?: string;
+  password?: string;
  port?: number;
  protocol?: Exclude<HostProtocol, "mosh">;
  group?: string;
@@ -167,6 +168,7 @@ const createHost = (input: {
    hostname: input.hostname.trim(),
    port: input.port ?? DEFAULT_SSH_PORT,
    username: input.username?.trim() ?? "",
+    password: input.password || undefined,
    group: normalizeGroupPath(input.group),
    tags: (input.tags ?? []).filter(Boolean),
    os: "linux",
@@ -189,6 +191,7 @@ const dedupeHosts = (hosts: Host[]): { hosts: Host[]; duplicates: number } => {
    duplicates++;
    const mergedTags = Array.from(new Set([...(existing.tags ?? []), ...(host.tags ?? [])]));
    existing.tags = mergedTags;
+    if (!existing.password && host.password) existing.password = host.password;
    if (existing.group == null && host.group != null) existing.group = host.group;
    if (existing.label === existing.hostname && host.label && host.label !== host.hostname) {
      existing.label = host.label;
@@ -333,6 +336,7 @@ const importFromCsv = (text: string): VaultImportResult => {
  const protocolIdx = findHeaderIndex(header, ["protocol", "proto", "scheme"]);
  const portIdx = findHeaderIndex(header, ["port"]);
  const usernameIdx = findHeaderIndex(header, ["username", "user", "login"]);
+  const passwordIdx = findHeaderIndex(header, ["password", "pass", "passwd"]);

  if (hostnameIdx === -1) {
    return {
@@ -378,12 +382,14 @@ const importFromCsv = (text: string): VaultImportResult => {
      "ssh";
    const port = parsePort(portIdx >= 0 ? row[portIdx] : undefined) ?? target.port;
    const username = (usernameIdx >= 0 ? row[usernameIdx] : undefined)?.trim() || target.username;
+    const password = (passwordIdx >= 0 ? row[passwordIdx] : undefined) || undefined;

    parsedHosts.push(
      createHost({
        label,
        hostname: target.hostname,
        username,
+        password,
        port,
        protocol,
        group,
@@ -993,12 +999,12 @@ export const getVaultCsvTemplate = (
  opts: VaultCsvTemplateOptions = {},
 ): string => {
  const includeExampleRows = opts.includeExampleRows !== false;
-  const header = ["Groups", "Label", "Tags", "Hostname/IP", "Protocol", "Port", "Username"];
+  const header = ["Groups", "Label", "Tags", "Hostname/IP", "Protocol", "Port", "Username", "Password"];
  const rows: string[][] = [header];
  if (includeExampleRows) {
-    rows.push(["Project/Dev", "Web Server (dev)", "dev,web", "192.168.1.10", "ssh", "22", "root"]);
-    rows.push(["Project/Prod", "Web Server (prod)", "prod,web", "server-a.example.com", "ssh", "22", "ubuntu"]);
-    rows.push(["Database", "DB", "db,mysql", "db.example.com", "ssh", "4567", "admin"]);
+    rows.push(["Project/Dev", "Web Server (dev)", "dev,web", "192.168.1.10", "ssh", "22", "root", ""]);
+    rows.push(["Project/Prod", "Web Server (prod)", "prod,web", "server-a.example.com", "ssh", "22", "ubuntu", ""]);
+    rows.push(["Database", "DB", "db,mysql", "db.example.com", "ssh", "4567", "admin", ""]);
  }

  const escapeCsv = (value: string) => {
@@ -1011,13 +1017,14 @@ export const getVaultCsvTemplate = (
 };

 const exportHostsToCsv = (hosts: Host[]): string => {
-  const header = ["Groups", "Label", "Tags", "Hostname/IP", "Protocol", "Port", "Username"];
+  const header = ["Groups", "Label", "Tags", "Hostname/IP", "Protocol", "Port", "Username", "Password"];
  const rows: string[][] = [header];

-  const escapeCsv = (value: string) => {
+  const escapeCsv = (value: string, skipFormulaGuard = false) => {
    // Prevent CSV formula injection by prefixing dangerous characters with a single quote
    // These characters can be interpreted as formulas by spreadsheet applications
-    if (/^[=+\-@\t\r]/.test(value)) {
+    // Skip for password fields to preserve credentials verbatim for round-trip
+    if (!skipFormulaGuard && /^[=+\-@\t\r]/.test(value)) {
      value = "'" + value;
    }
    if (value.includes('"')) value = value.replace(/"/g, '""');
@@ -1059,10 +1066,12 @@ const exportHostsToCsv = (hosts: Host[]): string => {
      host.protocol ?? "ssh",
      String(effectivePort),
      effectiveUsername,
+      host.password ?? "",
    ]);
  }

-  return rows.map((r) => r.map((c) => escapeCsv(c)).join(",")).join("\r\n") + "\r\n";
+  const passwordColIdx = header.indexOf("Password");
+  return rows.map((r, rowIdx) => r.map((c, i) => escapeCsv(c, rowIdx > 0 && i === passwordColIdx)).join(",")).join("\r\n") + "\r\n";
 };

 interface ExportHostsResult {