fix: multiple bug fixes for custom cert, SSH key auth, and UI polish

- NPM custom cert: use two-step upload flow (create shell then upload files)
  so NPM correctly parses and stores the real expires_on instead of now()
- SSH key auth: remove hard-coded paramiko.DSSKey reference (removed in
  paramiko 5.0.0); use dynamic paramiko.key_classes with fallback
- SSH key auth: add PPK format detection with clear conversion guidance
- SSH key auth: make SFTP verification non-fatal (fallback to /) so
  connections without SFTP subsystem still pass the test
- Frontend: parse FastAPI default error 'detail' field (singular) in
  addition to 'details' (plural) for 500 responses
- Certificate dropdown: show expiry date with locale-aware formatting
  (e.g. '27th September 2027, 5:28 AM' in EN, '2027年9月27日 05:28' in ZH)
- Delete-domain dialog: align to top like uninstall dialog
- Toolbar buttons: use opacity-based disabled style instead of washed-out
  color change

Author: zhaojing1987

apphub/src/external/nginx_proxy_manager_api.py

@@ -3,6 +3,8 @@
 import socket
 from urllib.parse import urlparse
 
+import requests
+
 from src.core.apiHelper import APIHelper
 from src.core.config import ConfigManager
 from src.core.logger import logger
@@ -216,22 +218,69 @@ def create_custom_certificate(self, nice_name: str, certificate_pem: str, key_pe
         """
         Upload a custom (non-Let's Encrypt) SSL certificate.
 
+        NPM requires a two-step flow for custom certificates:
+        1. Create a certificate shell (provider + nice_name only)
+        2. Upload the PEM files so NPM can parse and store the real expires_on
+
         Args:
             nice_name (str): Display name for the certificate
             certificate_pem (str): PEM-encoded certificate content
             key_pem (str): PEM-encoded private key content
 
         Returns:
-            Response: Response from Nginx Proxy Manager API
+            Response: Response from Nginx Proxy Manager API (the final certificate with correct expires_on)
         """
-        return self.api.post(
+        # Step 1: Create certificate shell
+        create_resp = self.api.post(
             path="nginx/certificates",
             json={
                 "provider": "other",
                 "nice_name": nice_name,
-                "meta": {
-                    "certificate": certificate_pem,
-                    "certificate_key": key_pem,
-                },
             },
-        )
+        )
+        if create_resp.status_code not in [200, 201]:
+            return create_resp
+
+        certificate = create_resp.json()
+        cert_id = certificate.get("id")
+        if not cert_id:
+            return create_resp
+
+        # Step 2: Upload certificate files so NPM parses them and updates expires_on
+        base_url = self.api.base_url
+        url = f"{base_url}/nginx/certificates/{cert_id}/upload"
+        merged_headers = dict(self.api.headers)
+        merged_headers.pop("Content-Type", None)  # Let requests set the multipart boundary
+
+        try:
+            upload_resp = requests.post(
+                url,
+                files={
+                    "certificate": ("certificate.pem", certificate_pem, "application/x-pem-file"),
+                    "certificate_key": ("certificate_key.pem", key_pem, "application/x-pem-file"),
+                },
+                headers=merged_headers,
+                verify=self.api.verify,
+            )
+        except requests.RequestException as exc:
+            logger.error(f"Certificate file upload failed: {exc}")
+            # Return the create response as fallback; the caller can still use the cert shell
+            return create_resp
+
+        if upload_resp.status_code not in [200, 201]:
+            logger.error(
+                f"NPM upload returned {upload_resp.status_code}: {upload_resp.text[:500]}"
+            )
+            return create_resp
+
+        # Step 3: Fetch the updated certificate to get the real expires_on
+        get_resp = self.api.get(
+            path=f"nginx/certificates/{cert_id}",
+            params={"expand": "owner,proxy_hosts,dead_hosts,redirection_hosts"},
+        )
+        if get_resp.status_code == 200:
+            # Patch the response so downstream code sees a proper status code
+            get_resp.status_code = create_resp.status_code
+            return get_resp
+
+        return create_resp

apphub/src/services/host_access.py

@@ -1036,7 +1036,12 @@ def _verify_profile(self, profile: dict[str, Any]) -> dict[str, Any]:
         except CustomException:
             raise
         except Exception as exc:
-            raise CustomException(500, "SFTP Error", f"Failed to open SFTP session: {exc}")
+            logger.warning(
+                f"SFTP verification failed for {verified.get('username')}@{verified.get('host')}: "
+                f"{type(exc).__name__}: {exc}. Falling back to root directory."
+            )
+            if not str(verified.get("working_directory") or "").strip():
+                verified["working_directory"] = "/"
         finally:
             if sftp is not None:
                 sftp.close()
@@ -1208,10 +1213,32 @@ def _ensure_parent_directory_exists(self, sftp: paramiko.SFTPClient, path: str)
         self._resolve_directory_path(sftp, parent_path)
 
     def _parse_private_key(self, private_key: str, passphrase: Optional[str]) -> paramiko.PKey:
-        errors = []
-        for key_class in (paramiko.RSAKey, paramiko.Ed25519Key, paramiko.ECDSAKey, paramiko.DSSKey):
+        stripped = (private_key or "").strip()
+        if stripped.startswith("PuTTY-User-Key-File"):
+            raise CustomException(
+                400,
+                "Unsupported Key Format",
+                "PuTTY PPK keys are not supported. Use PuTTYgen to convert the key to OpenSSH format "
+                "(Conversions → Export OpenSSH key), then paste the exported content.",
+            )
+        # Use paramiko's built-in key_classes list when available (paramiko ≥5.x),
+        # otherwise fall back to a hard-coded tuple compatible with older versions.
+        try:
+            candidates = list(paramiko.key_classes) if hasattr(paramiko, "key_classes") else [
+                paramiko.RSAKey,
+                paramiko.Ed25519Key,
+                paramiko.ECDSAKey,
+            ]
+        except AttributeError:
+            candidates = [
+                paramiko.RSAKey,
+                paramiko.Ed25519Key,
+                paramiko.ECDSAKey,
+            ]
+        errors: list[str] = []
+        for key_class in candidates:
             try:
-                return key_class.from_private_key(StringIO(private_key), password=passphrase)
+                return key_class.from_private_key(StringIO(stripped), password=passphrase)
             except Exception as exc:
                 errors.append(str(exc))
         raise CustomException(400, "Invalid Private Key", "; ".join(errors[:1]) or "Unable to parse private key")

console/src/features/my-apps/my-app-access-panel.tsx

@@ -130,12 +130,53 @@ function IconEntryEmpty() {
     return <svg viewBox="0 0 24 24" width="28" height="28" fill="currentColor"><path d="M10 3h4v4h5a2 2 0 0 1 2 2v7h-2V9h-4v4H9V9H5v10h7v2H5a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h5V3zm1 1v3h2V4h-2zm7 14 3 3-1.4 1.4L17 19.8l-2.6 2.6L13 21l3-3-3-3 1.4-1.4L17 16.2l2.6-2.6L21 15l-3 3z" /></svg>
 }
 
-function formatCertificateLabel(certificate: { nice_name?: string | null; domain_names?: string[]; provider?: string | null } | null | undefined) {
+function getOrdinal(day: number): string {
+    if (day >= 11 && day <= 13) return 'th'
+    const last = day % 10
+    if (last === 1) return 'st'
+    if (last === 2) return 'nd'
+    if (last === 3) return 'rd'
+    return 'th'
+}
+
+function formatExpiryDate(isoString: string, locale: string): string {
+    const date = new Date(isoString)
+    if (isNaN(date.getTime())) return ''
+    const isZh = String(locale || '').toLowerCase().startsWith('zh')
+    if (isZh) {
+        const y = date.getFullYear()
+        const m = date.getMonth() + 1
+        const d = date.getDate()
+        const hh = String(date.getHours()).padStart(2, '0')
+        const mm = String(date.getMinutes()).padStart(2, '0')
+        return `${y}年${m}月${d}日 ${hh}:${mm}`
+    }
+    const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
+    const day = date.getDate()
+    const month = months[date.getMonth()] ?? ''
+    const year = date.getFullYear()
+    let hours = date.getHours()
+    const ampm = hours >= 12 ? 'PM' : 'AM'
+    hours = hours % 12 || 12
+    const minutes = String(date.getMinutes()).padStart(2, '0')
+    return `${day}${getOrdinal(day)} ${month} ${year}, ${hours}:${minutes} ${ampm}`
+}
+
+function formatCertificateLabel(
+    certificate: { nice_name?: string | null; domain_names?: string[]; provider?: string | null; expires_on?: string | null } | null | undefined,
+    locale?: string,
+) {
     if (!certificate) return ''
-    if (certificate.nice_name?.trim()) return certificate.nice_name.trim()
-    if (certificate.domain_names?.length) return certificate.domain_names.join(', ')
-    if (certificate.provider?.trim()) return certificate.provider.trim()
-    return ''
+    const name = certificate.nice_name?.trim() || certificate.domain_names?.join(', ') || certificate.provider?.trim() || ''
+    if (!name) return ''
+    if (certificate.expires_on) {
+        const expiryLabel = formatExpiryDate(certificate.expires_on, locale || '')
+        if (expiryLabel) {
+            const isZh = String(locale || '').toLowerCase().startsWith('zh')
+            return isZh ? `${name}（过期：${expiryLabel}）` : `${name} (Expires: ${expiryLabel})`
+        }
+    }
+    return name
 }
 
 function formatAccountLabel(key: string, t: (key: string) => string) {
@@ -189,7 +230,7 @@ function getConnectionTitle(t: (key: string, options?: Record<string, unknown>)
 }
 
 export function MyAppAccessPanel({ appId, env, isComposeApp, onUpdated, scopeRect, isDarkMode = false }: MyAppAccessPanelProps) {
-    const { t } = useTranslation('shell')
+    const { t, i18n } = useTranslation('shell')
     const palette = getSurfacePalette(isDarkMode)
     const [selectedProxyId, setSelectedProxyId] = useState<number | null>(null)
     const [selectedDomainName, setSelectedDomainName] = useState<string | null>(null)
@@ -269,7 +310,7 @@ export function MyAppAccessPanel({ appId, env, isComposeApp, onUpdated, scopeRec
         () => data?.certificates.find((certificate) => certificate.id === currentProxyHost?.certificate_id) ?? null,
         [currentProxyHost?.certificate_id, data?.certificates],
     )
-    const currentCertificateLabel = currentProxyHost?.certificate_name || formatCertificateLabel(currentCertificate)
+    const currentCertificateLabel = currentProxyHost?.certificate_name || formatCertificateLabel(currentCertificate, i18n.resolvedLanguage)
     const containerOptions = useMemo(() => {
         const seen = new Set<string>()
         return (data?.candidates ?? []).filter((candidate) => {
@@ -1465,7 +1506,7 @@ ${customCertIntermediate.trim()}`
                                                 <option value="none">{t('myAppsDetailPage.accessPanel.selectCertPlaceholder')}</option>
                                                 {availableCertificates.map((cert) => (
                                                     <option key={cert.id} value={cert.id}>
-                                                        {formatCertificateLabel(cert) || `#${cert.id}`}
+                                                        {formatCertificateLabel(cert, i18n.resolvedLanguage) || `#${cert.id}`}
                                                     </option>
                                                 ))}
                                             </select>
@@ -1676,7 +1717,15 @@ ${customCertIntermediate.trim()}`
                 scopeRect={scopeRect ?? null}
                 contentStrategy="viewport-fixed"
                 darkMode={isDarkMode}
-                sx={{ zIndex: 1510 }}
+                sx={{
+                    zIndex: 1510,
+                    '& .MuiDialog-container': {
+                        alignItems: 'flex-start',
+                        justifyContent: 'center',
+                        pt: { xs: 3, md: 3 },
+                        pb: { xs: 1.5, md: 2.5 },
+                    },
+                }}
                 paperSx={{
                     maxWidth: '480px',
                     borderRadius: 0,

console/src/features/my-apps/my-app-detail-page.tsx

@@ -772,9 +772,8 @@ export function MyAppDetailPage() {
     }) as CSSProperties, [])
     const disabledPrimaryToolbarButtonStyle = useMemo(() => ({
         ...primaryToolbarButtonStyle,
-        backgroundColor: isDarkMode ? 'rgba(23,103,209,0.2)' : '#dce9f8',
-        color: 'rgba(255,255,255,0.72)',
-    }) as CSSProperties, [primaryToolbarButtonStyle, isDarkMode])
+        opacity: 0.35,
+    }) as CSSProperties, [primaryToolbarButtonStyle])
     const closeToolbarButtonStyle = useMemo(() => ({
         width: 40,
         height: 40,

console/src/features/terminal/terminal-page.tsx

@@ -1088,8 +1088,8 @@ async function requestJson<T>(input: string, init?: RequestInit): Promise<T> {
     if (!response.ok) {
         let detail = `Request failed: ${response.status}`
         try {
-            const body = (await response.json()) as { details?: string; message?: string }
-            detail = body.details || body.message || detail
+            const body = (await response.json()) as { detail?: string; details?: string; message?: string }
+            detail = body.details || body.detail || body.message || detail
         } catch {
         }
         throw new Error(detail)