v1.10.0 (#471)

* fix select edit host but not update view (#438) * fix: Checksum issue with chocolatey * fix: Remove homebrew old stuff * Add Korean translation (#439) Co-authored-by: 송준우 <2484@coreit.co.kr> * feat: Automate flatpak * fix: Add imagemagik to electron builder to resolve build error * fix: Build error with runtime repo flag * fix: Flatpak runtime error and install freedesktop ver warning * fix: Flatpak runtime error and install freedesktop ver warning * feat: Re-add homebrew cask and move scripts to backend * fix: No sandbox flag issue * fix: Change name for electron macos cask output * fix: Sandbox error with Linux * fix: Remove comming soon for app stores in readme * Adding Comment at the end of the public_key on the host on deploy (#440) * Add termix.rb Cask file * Update Termix to version 1.9.0 with new checksum * Update README to remove 'coming soon' notes * -Add New Interface for Credential DB -Add Credential Name as a comment into the server authorized_key file --------- Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com> * Sudo auto fill password (#441) * Add termix.rb Cask file * Update Termix to version 1.9.0 with new checksum * Update README to remove 'coming soon' notes * Feature Sudo password auto-fill; * Fix locale json shema; --------- Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com> * Added Italian Language; (#445) * Add termix.rb Cask file * Update Termix to version 1.9.0 with new checksum * Update README to remove 'coming soon' notes * Added Italian Language; --------- Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com> * Auto collapse snippet folders (#448) * Add termix.rb Cask file * Update Termix to version 1.9.0 with new checksum * Update README to remove 'coming soon' notes * feat: Add collapsable snippets (customizable in user profile) * Translations (#447) * Add termix.rb Cask file * Update Termix to version 1.9.0 with new checksum * Update README to remove 'coming soon' notes * Added Italian Language; * Fix translations; Removed duplicate keys, synchronised other languages using English as the source, translated added keys, fixed inaccurate translations. --------- Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com> * Remove PTY-level keepalive (#449) * Add termix.rb Cask file * Update Termix to version 1.9.0 with new checksum * Update README to remove 'coming soon' notes * Remove PTY-level keepalive to prevent unwanted terminal output; use SSH-level keepalive instead --------- Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com> * feat: Seperate server stats and tunnel management (improved both UI's) then started initial docker implementation * fix: finalize adding docker to db * feat: Add docker management support (local squash) * Fix RBAC role system bugs and improve UX (#446) * Fix RBAC role system bugs and improve UX - Fix user list dropdown selection in host sharing - Fix role sharing permissions to include role-based access - Fix translation template interpolation for success messages - Standardize system roles to admin and user only - Auto-assign user role to new registrations - Remove blocking confirmation dialogs in modal contexts - Add missing i18n keys for common actions - Fix button type to prevent unintended form submissions * Enhance RBAC system with UI improvements and security fixes - Move role assignment to Users tab with per-user role management - Protect system roles (admin/user) from editing and manual assignment - Simplify permission system: remove Use level, keep View and Manage - Hide Update button and Sharing tab for view-only/shared hosts - Prevent users from sharing hosts with themselves - Unify table and modal styling across admin panels - Auto-assign system roles on user registration - Add permission metadata to host interface * Add empty state message for role assignment - Display helpful message when no custom roles available - Clarify that system roles are auto-assigned - Add noCustomRolesToAssign translation in English and Chinese * fix: Prevent credential sharing errors for shared hosts - Skip credential resolution for shared hosts with credential authentication to prevent decryption errors (credentials are encrypted per-user) - Add warning alert in sharing tab when host uses credential authentication - Inform users that shared users cannot connect to credential-based hosts - Add translations for credential sharing warning (EN/ZH) This prevents authentication failures when sharing hosts configured with credential authentication while maintaining security by keeping credentials isolated per user. * feat: Improve rbac UI and fixes some bugs --------- Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com> Co-authored-by: LukeGus <bugattiguy527@gmail.com> * SOCKS5 support (#452) * Add termix.rb Cask file * Update Termix to version 1.9.0 with new checksum * Update README to remove 'coming soon' notes * SOCKS5 support Adding single and chain socks5 proxy support * fix: cleanup files --------- Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com> Co-authored-by: LukeGus <bugattiguy527@gmail.com> * Notes and Expiry fields add (#453) * Add termix.rb Cask file * Update Termix to version 1.9.0 with new checksum * Update README to remove 'coming soon' notes * Notes and Expiry add * fix: cleanup files --------- Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com> Co-authored-by: LukeGus <bugattiguy527@gmail.com> * fix: ssh host types * fix: sudo incorrect styling and remove expiration date * feat: add sudo password and add diagonal bg's * fix: snippet running on enter key * fix: base64 decoding * fix: improve server stats / rbac * fix: wrap ssh host json export in hosts array * feat: auto trim host inputs, fix file manager jump hosts, dashboard prevent duplicates, file manager terminal not size updating, improve left sidebar sorting, hide/show tags, add apperance user profile tab, add new host manager tabs. * feat: improve terminal connection speed * fix: sqlite constriant errors and support non-root user (nginx perm issue) * feat: add beta syntax highlighing to terminal * feat: update imports and improve admin settings user management * chore: update translations * chore: update translations * feat: Complete light mode implementation with semantic theme system (#450) - Add comprehensive light/dark mode CSS variables with semantic naming - Implement theme-aware scrollbars using CSS variables - Add light mode backgrounds: --bg-base, --bg-elevated, --bg-surface, etc. - Add theme-aware borders: --border-base, --border-panel, --border-subtle - Add semantic text colors: --foreground-secondary, --foreground-subtle - Convert oklch colors to hex for better compatibility - Add theme awareness to CodeMirror editors - Update dark mode colors for consistency (background, sidebar, card, muted, input) - Add Tailwind color mappings for semantic classes Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com> * fix: syntax errors * chore: updating/match themes and split admin settings * feat: add translation workflow and remove old translation.json * fix: translation workflow error * fix: translation workflow error * feat: improve translation system and update workflow * fix: wrong path for translations * fix: change translation to flat files * fix: gh rule error * chore: auto-translate to multiple languages (#458) * chore: improve organization and made a few styling changes in host manager * feat: improve terminal stability and split out the host manager * fix: add unnversiioned files * chore: migrate all to use the new theme system * fix: wrong animation line colors * fix: rbac implementation general issues (local squash) * fix: remove unneeded files * feat: add 10 new langs * chore: update gitnore * chore: auto-translate to multiple languages (#459) * fix: improve tunnel system * fix: properly split tabs, still need to fix up the host manager * chore: cleanup files (possible RC) * feat: add norwegian * chore: auto-translate to multiple languages (#461) * fix: small qol fixes and began readme update * fix: run cleanup script * feat: add docker docs button * feat: general bug fixes and readme updates * fix: translations * chore: auto-translate to multiple languages (#462) * fix: cleanup files * fix: test new translation issue and add better server-stats support * fix: fix translate error * chore: auto-translate to multiple languages (#463) * fix: fix translate mismatching text * chore: auto-translate to multiple languages (#465) * fix: fix translate mismatching text * fix: fix translate mismatching text * chore: auto-translate to multiple languages (#466) * fix: fix translate mismatching text * fix: fix translate mismatching text * fix: fix translate mismatching text * chore: auto-translate to multiple languages (#467) * fix: fix translate mismatching text * chore: auto-translate to multiple languages (#468) * feat: add to readme, a few qol changes, and improve server stats in general * chore: auto-translate to multiple languages (#469) * feat: turned disk uage into graph and fixed issue with termina console * fix: electron build error and hide icons when shared * chore: run clean * fix: general server stats issues, file manager decoding, ui qol * fix: add dashboard line breaks * fix: docker console error * fix: docker console not loading and mismatched stripped background for electron * fix: docker console not loading * chore: docker console not loading in docker * chore: translate readme to chinese * chore: match package lock to package json * chore: nginx config issue for dokcer console * chore: auto-translate to multiple languages (#470) --------- Co-authored-by: Tran Trung Kien <kientt13.7@gmail.com> Co-authored-by: junu <bigdwarf_@naver.com> Co-authored-by: 송준우 <2484@coreit.co.kr> Co-authored-by: SlimGary <trash.slim@gmail.com> Co-authored-by: Nunzio Marfè <nunzio.marfe@protonmail.com> Co-authored-by: Wesley Reid <starhound@lostsouls.org> Co-authored-by: ZacharyZcR <zacharyzcr1984@gmail.com> Co-authored-by: Denis <38875137+Medvedinca@users.noreply.github.com> Co-authored-by: Peet McKinney <68706879+PeetMcK@users.noreply.github.com>
2026-09-13 18:58:52 +00:00 · 2025-12-31 22:20:12 -06:00
parent 7139290d14
commit ad86c2040b
225 changed files with 87356 additions and 17706 deletions
@@ -0,0 +1,528 @@
+import React, { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button.tsx";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card.tsx";
+import { Badge } from "@/components/ui/badge.tsx";
+import { Separator } from "@/components/ui/separator.tsx";
+import { ScrollArea } from "@/components/ui/scroll-area.tsx";
+import {
+  Sheet,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet.tsx";
+import {
+  Key,
+  User,
+  Calendar,
+  Hash,
+  Folder,
+  Edit3,
+  Copy,
+  Shield,
+  Clock,
+  Server,
+  Eye,
+  EyeOff,
+  AlertTriangle,
+  CheckCircle,
+  FileText,
+} from "lucide-react";
+import { getCredentialDetails, getCredentialHosts } from "@/ui/main-axios.ts";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+import type {
+  Credential,
+  HostInfo,
+  CredentialViewerProps,
+} from "../../../types/index.js";
+
+const CredentialViewer: React.FC<CredentialViewerProps> = ({
+  credential,
+  onClose,
+  onEdit,
+}) => {
+  const { t } = useTranslation();
+  const [credentialDetails, setCredentialDetails] = useState<Credential | null>(
+    null,
+  );
+  const [hostsUsing, setHostsUsing] = useState<HostInfo[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [showSensitive, setShowSensitive] = useState<Record<string, boolean>>(
+    {},
+  );
+  const [activeTab, setActiveTab] = useState<"overview" | "security" | "usage">(
+    "overview",
+  );
+
+  useEffect(() => {
+    fetchCredentialDetails();
+    fetchHostsUsing();
+  }, [credential.id]);
+
+  const fetchCredentialDetails = async () => {
+    try {
+      const response = await getCredentialDetails(credential.id);
+      setCredentialDetails(response);
+    } catch {
+      toast.error(t("credentials.failedToFetchCredentialDetails"));
+    }
+  };
+
+  const fetchHostsUsing = async () => {
+    try {
+      const response = await getCredentialHosts(credential.id);
+      setHostsUsing(response);
+    } catch {
+      toast.error(t("credentials.failedToFetchHostsUsing"));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const toggleSensitiveVisibility = (field: string) => {
+    setShowSensitive((prev) => ({
+      ...prev,
+      [field]: !prev[field],
+    }));
+  };
+
+  const copyToClipboard = async (text: string, fieldName: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      toast.success(t("copiedToClipboard", { field: fieldName }));
+    } catch {
+      toast.error(t("credentials.failedToCopy"));
+    }
+  };
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleString();
+  };
+
+  const getAuthIcon = (authType: string) => {
+    return authType === "password" ? (
+      <Key className="h-5 w-5 text-foreground-subtle" />
+    ) : (
+      <Shield className="h-5 w-5 text-foreground-subtle" />
+    );
+  };
+
+  const renderSensitiveField = (
+    value: string | undefined,
+    fieldName: string,
+    label: string,
+    isMultiline = false,
+  ) => {
+    if (!value) return null;
+
+    const isVisible = showSensitive[fieldName];
+
+    return (
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <label className="text-sm font-medium text-foreground-secondary">
+            {label}
+          </label>
+          <div className="flex items-center space-x-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => toggleSensitiveVisibility(fieldName)}
+            >
+              {isVisible ? (
+                <EyeOff className="h-4 w-4" />
+              ) : (
+                <Eye className="h-4 w-4" />
+              )}
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => copyToClipboard(value, label)}
+            >
+              <Copy className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+        <div
+          className={`p-3 rounded-md bg-surface ${isMultiline ? "" : "min-h-[2.5rem]"}`}
+        >
+          {isVisible ? (
+            <pre
+              className={`text-sm ${isMultiline ? "whitespace-pre-wrap" : "whitespace-nowrap"} font-mono`}
+            >
+              {value}
+            </pre>
+          ) : (
+            <div className="text-sm text-foreground-subtle">
+              {"•".repeat(isMultiline ? 50 : 20)}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  };
+
+  if (loading || !credentialDetails) {
+    return (
+      <Sheet open={true} onOpenChange={onClose}>
+        <SheetContent className="w-[600px] max-w-[50vw]">
+          <div className="flex items-center justify-center h-64">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-foreground-subtle"></div>
+          </div>
+        </SheetContent>
+      </Sheet>
+    );
+  }
+
+  return (
+    <Sheet open={true} onOpenChange={onClose}>
+      <SheetContent className="w-[600px] max-w-[50vw] overflow-y-auto thin-scrollbar">
+        <SheetHeader className="space-y-6 pb-8">
+          <SheetTitle className="flex items-center space-x-4">
+            <div className="p-2 rounded-lg bg-surface">
+              {getAuthIcon(credentialDetails.authType)}
+            </div>
+            <div className="flex-1">
+              <div className="text-xl font-semibold">
+                {credentialDetails.name}
+              </div>
+              <div className="text-sm font-normal text-foreground-subtle mt-1">
+                {credentialDetails.description}
+              </div>
+            </div>
+            <div className="flex items-center space-x-2">
+              <Badge variant="outline" className="text-foreground-subtle">
+                {credentialDetails.authType}
+              </Badge>
+              {credentialDetails.keyType && (
+                <Badge
+                  variant="secondary"
+                  className="bg-surface text-foreground-secondary"
+                >
+                  {credentialDetails.keyType}
+                </Badge>
+              )}
+            </div>
+          </SheetTitle>
+        </SheetHeader>
+
+        <div className="space-y-10">
+          <div className="flex space-x-2 p-2 bg-surface border border-border rounded-lg">
+            <Button
+              variant={activeTab === "overview" ? "default" : "ghost"}
+              size="sm"
+              onClick={() => setActiveTab("overview")}
+              className="flex-1 h-10"
+            >
+              <FileText className="h-4 w-4 mr-2" />
+              {t("credentials.overview")}
+            </Button>
+            <Button
+              variant={activeTab === "security" ? "default" : "ghost"}
+              size="sm"
+              onClick={() => setActiveTab("security")}
+              className="flex-1 h-10"
+            >
+              <Shield className="h-4 w-4 mr-2" />
+              {t("credentials.security")}
+            </Button>
+            <Button
+              variant={activeTab === "usage" ? "default" : "ghost"}
+              size="sm"
+              onClick={() => setActiveTab("usage")}
+              className="flex-1 h-10"
+            >
+              <Server className="h-4 w-4 mr-2" />
+              {t("credentials.usage")}
+            </Button>
+          </div>
+
+          {activeTab === "overview" && (
+            <div className="grid gap-10 lg:grid-cols-2">
+              <Card className="border-border">
+                <CardHeader className="pb-8">
+                  <CardTitle className="text-lg font-semibold">
+                    {t("credentials.basicInformation")}
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-8">
+                  <div className="flex items-center space-x-5">
+                    <div className="p-2 rounded-lg bg-surface">
+                      <User className="h-4 w-4 text-foreground-subtle" />
+                    </div>
+                    <div>
+                      <div className="text-sm text-foreground-subtle">
+                        {t("common.username")}
+                      </div>
+                      <div className="font-medium text-foreground">
+                        {credentialDetails.username}
+                      </div>
+                    </div>
+                  </div>
+
+                  {credentialDetails.folder && (
+                    <div className="flex items-center space-x-4">
+                      <Folder className="h-4 w-4 text-foreground-subtle" />
+                      <div>
+                        <div className="text-sm text-foreground-subtle">
+                          {t("common.folder")}
+                        </div>
+                        <div className="font-medium">
+                          {credentialDetails.folder}
+                        </div>
+                      </div>
+                    </div>
+                  )}
+
+                  {credentialDetails.tags.length > 0 && (
+                    <div className="flex items-start space-x-4">
+                      <Hash className="h-4 w-4 text-foreground-subtle mt-1" />
+                      <div className="flex-1">
+                        <div className="text-sm text-foreground-subtle mb-3">
+                          {t("hosts.tags")}
+                        </div>
+                        <div className="flex flex-wrap gap-2">
+                          {credentialDetails.tags.map((tag, index) => (
+                            <Badge
+                              key={index}
+                              variant="outline"
+                              className="text-xs"
+                            >
+                              {tag}
+                            </Badge>
+                          ))}
+                        </div>
+                      </div>
+                    </div>
+                  )}
+
+                  <Separator />
+
+                  <div className="flex items-center space-x-4">
+                    <Calendar className="h-4 w-4 text-foreground-subtle" />
+                    <div>
+                      <div className="text-sm text-foreground-subtle">
+                        {t("credentials.created")}
+                      </div>
+                      <div className="font-medium">
+                        {formatDate(credentialDetails.createdAt)}
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="flex items-center space-x-4">
+                    <Calendar className="h-4 w-4 text-foreground-subtle" />
+                    <div>
+                      <div className="text-sm text-foreground-subtle">
+                        {t("credentials.lastModified")}
+                      </div>
+                      <div className="font-medium">
+                        {formatDate(credentialDetails.updatedAt)}
+                      </div>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+
+              <Card>
+                <CardHeader>
+                  <CardTitle className="text-lg">
+                    {t("credentials.usageStatistics")}
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-6">
+                  <div className="text-center p-6 bg-surface rounded-lg">
+                    <div className="text-3xl font-bold text-foreground-subtle">
+                      {credentialDetails.usageCount}
+                    </div>
+                    <div className="text-sm text-foreground-subtle">
+                      {t("credentials.timesUsed")}
+                    </div>
+                  </div>
+
+                  {credentialDetails.lastUsed && (
+                    <div className="flex items-center space-x-4 p-4 bg-surface rounded-lg">
+                      <Clock className="h-5 w-5 text-foreground-subtle" />
+                      <div>
+                        <div className="text-sm text-foreground-subtle">
+                          {t("credentials.lastUsed")}
+                        </div>
+                        <div className="font-medium">
+                          {formatDate(credentialDetails.lastUsed)}
+                        </div>
+                      </div>
+                    </div>
+                  )}
+
+                  <div className="flex items-center space-x-4 p-4 bg-surface rounded-lg">
+                    <Server className="h-5 w-5 text-foreground-subtle" />
+                    <div>
+                      <div className="text-sm text-foreground-subtle">
+                        {t("credentials.connectedHosts")}
+                      </div>
+                      <div className="font-medium">{hostsUsing.length}</div>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
+          )}
+
+          {activeTab === "security" && (
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-lg flex items-center space-x-2">
+                  <Shield className="h-5 w-5 text-foreground-subtle" />
+                  <span>{t("credentials.securityDetails")}</span>
+                </CardTitle>
+                <CardDescription>
+                  {t("credentials.securityDetailsDescription")}
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-6">
+                <div className="flex items-center space-x-4 p-6 bg-surface rounded-lg">
+                  <CheckCircle className="h-6 w-6 text-foreground-subtle" />
+                  <div>
+                    <div className="font-medium text-foreground">
+                      {t("credentials.credentialSecured")}
+                    </div>
+                    <div className="text-sm text-foreground-secondary">
+                      {t("credentials.credentialSecuredDescription")}
+                    </div>
+                  </div>
+                </div>
+
+                {credentialDetails.authType === "password" && (
+                  <div>
+                    <h3 className="font-semibold mb-4">
+                      {t("credentials.passwordAuthentication")}
+                    </h3>
+                    {renderSensitiveField(
+                      credentialDetails.password,
+                      "password",
+                      t("common.password"),
+                    )}
+                  </div>
+                )}
+
+                {credentialDetails.authType === "key" && (
+                  <div className="space-y-6">
+                    <h3 className="font-semibold mb-2">
+                      {t("credentials.keyAuthentication")}
+                    </h3>
+
+                    <div className="grid gap-6 md:grid-cols-2">
+                      <div>
+                        <div className="text-sm font-medium text-foreground-secondary mb-3">
+                          {t("credentials.keyType")}
+                        </div>
+                        <Badge variant="outline" className="text-sm">
+                          {credentialDetails.keyType?.toUpperCase() ||
+                            t("unknown").toUpperCase()}
+                        </Badge>
+                      </div>
+                    </div>
+
+                    {renderSensitiveField(
+                      credentialDetails.key,
+                      "key",
+                      t("credentials.privateKey"),
+                      true,
+                    )}
+
+                    {credentialDetails.keyPassword &&
+                      renderSensitiveField(
+                        credentialDetails.keyPassword,
+                        "keyPassword",
+                        t("credentials.keyPassphrase"),
+                      )}
+                  </div>
+                )}
+
+                <div className="flex items-start space-x-4 p-6 bg-surface rounded-lg">
+                  <AlertTriangle className="h-5 w-5 text-foreground-subtle mt-0.5" />
+                  <div className="text-sm">
+                    <div className="font-medium text-foreground mb-2">
+                      {t("credentials.securityReminder")}
+                    </div>
+                    <div className="text-foreground-secondary">
+                      {t("credentials.securityReminderText")}
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          )}
+
+          {activeTab === "usage" && (
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-lg flex items-center space-x-2">
+                  <Server className="h-5 w-5 text-foreground-subtle" />
+                  <span>{t("credentials.hostsUsingCredential")}</span>
+                  <Badge variant="secondary">{hostsUsing.length}</Badge>
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                {hostsUsing.length === 0 ? (
+                  <div className="text-center py-10 text-foreground-subtle">
+                    <Server className="h-12 w-12 mx-auto mb-6 text-foreground-subtle" />
+                    <p>{t("credentials.noHostsUsingCredential")}</p>
+                  </div>
+                ) : (
+                  <ScrollArea className="h-64">
+                    <div className="space-y-3">
+                      {hostsUsing.map((host) => (
+                        <div
+                          key={host.id}
+                          className="flex items-center justify-between p-4 border rounded-lg hover:bg-surface"
+                        >
+                          <div className="flex items-center space-x-3">
+                            <div className="p-2 bg-surface rounded">
+                              <Server className="h-4 w-4 text-foreground-subtle" />
+                            </div>
+                            <div>
+                              <div className="font-medium">
+                                {host.name || `${host.ip}:${host.port}`}
+                              </div>
+                              <div className="text-sm text-foreground-subtle">
+                                {host.ip}:{host.port}
+                              </div>
+                            </div>
+                          </div>
+                          <div className="text-right text-sm text-foreground-subtle">
+                            {formatDate(host.createdAt)}
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </ScrollArea>
+                )}
+              </CardContent>
+            </Card>
+          )}
+        </div>
+
+        <SheetFooter>
+          <Button variant="outline" onClick={onClose}>
+            {t("common.close")}
+          </Button>
+          <Button onClick={onEdit}>
+            <Edit3 className="h-4 w-4 mr-2" />
+            {t("credentials.editCredential")}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+};
+
+export default CredentialViewer;