release-2.4.1 (#921)

* chore(deps-dev): bump the dev-minor-updates group across 1 directory with 12 updates (#910) Bumps the dev-minor-updates group with 12 updates in the / directory: | Package | From | To | | --- | --- | --- | | [@radix-ui/react-select](https://github.com/radix-ui/primitives/tree/HEAD/packages/react/select) | `2.2.6` | `2.3.1` | | [@radix-ui/react-slider](https://github.com/radix-ui/primitives/tree/HEAD/packages/react/slider) | `1.3.6` | `1.4.1` | | [@radix-ui/react-slot](https://github.com/radix-ui/primitives/tree/HEAD/packages/react/slot) | `1.2.5` | `1.3.0` | | [@radix-ui/react-switch](https://github.com/radix-ui/primitives/tree/HEAD/packages/react/switch) | `1.2.6` | `1.3.1` | | [cytoscape](https://github.com/cytoscape/cytoscape.js) | `3.33.4` | `3.34.0` | | [electron](https://github.com/electron/electron) | `42.2.0` | `42.4.1` | | [electron-builder](https://github.com/electron-userland/electron-builder/tree/HEAD/packages/electron-builder) | `26.8.1` | `26.15.3` | | [lucide-react](https://github.com/lucide-icons/lucide/tree/HEAD/packages/lucide-react) | `1.16.0` | `1.20.0` | | [radix-ui](https://github.com/radix-ui/primitives/tree/HEAD/packages/react/radix-ui) | `1.4.3` | `1.6.0` | | [react-hook-form](https://github.com/react-hook-form/react-hook-form) | `7.76.1` | `7.79.0` | | [sharp](https://github.com/lovell/sharp) | `0.34.5` | `0.35.1` | | [typescript-eslint](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/typescript-eslint) | `8.60.0` | `8.61.1` | Updates `@radix-ui/react-select` from 2.2.6 to 2.3.1 - [Changelog](https://github.com/radix-ui/primitives/blob/main/packages/react/select/CHANGELOG.md) - [Commits](https://github.com/radix-ui/primitives/commits/HEAD/packages/react/select) Updates `@radix-ui/react-slider` from 1.3.6 to 1.4.1 - [Changelog](https://github.com/radix-ui/primitives/blob/main/packages/react/slider/CHANGELOG.md) - [Commits](https://github.com/radix-ui/primitives/commits/HEAD/packages/react/slider) Updates `@radix-ui/react-slot` from 1.2.5 to 1.3.0 - [Changelog](https://github.com/radix-ui/primitives/blob/main/packages/react/slot/CHANGELOG.md) - [Commits](https://github.com/radix-ui/primitives/commits/HEAD/packages/react/slot) Updates `@radix-ui/react-switch` from 1.2.6 to 1.3.1 - [Changelog](https://github.com/radix-ui/primitives/blob/main/packages/react/switch/CHANGELOG.md) - [Commits](https://github.com/radix-ui/primitives/commits/HEAD/packages/react/switch) Updates `cytoscape` from 3.33.4 to 3.34.0 - [Release notes](https://github.com/cytoscape/cytoscape.js/releases) - [Commits](https://github.com/cytoscape/cytoscape.js/compare/v3.33.4...v3.34.0) Updates `electron` from 42.2.0 to 42.4.1 - [Release notes](https://github.com/electron/electron/releases) - [Commits](https://github.com/electron/electron/compare/v42.2.0...v42.4.1) Updates `electron-builder` from 26.8.1 to 26.15.3 - [Release notes](https://github.com/electron-userland/electron-builder/releases) - [Changelog](https://github.com/electron-userland/electron-builder/blob/master/packages/electron-builder/CHANGELOG.md) - [Commits](https://github.com/electron-userland/electron-builder/commits/electron-builder@26.15.3/packages/electron-builder) Updates `lucide-react` from 1.16.0 to 1.20.0 - [Release notes](https://github.com/lucide-icons/lucide/releases) - [Commits](https://github.com/lucide-icons/lucide/commits/1.20.0/packages/lucide-react) Updates `radix-ui` from 1.4.3 to 1.6.0 - [Changelog](https://github.com/radix-ui/primitives/blob/main/packages/react/radix-ui/CHANGELOG.md) - [Commits](https://github.com/radix-ui/primitives/commits/HEAD/packages/react/radix-ui) Updates `react-hook-form` from 7.76.1 to 7.79.0 - [Release notes](https://github.com/react-hook-form/react-hook-form/releases) - [Changelog](https://github.com/react-hook-form/react-hook-form/blob/master/CHANGELOG.md) - [Commits](https://github.com/react-hook-form/react-hook-form/compare/v7.76.1...v7.79.0) Updates `sharp` from 0.34.5 to 0.35.1 - [Release notes](https://github.com/lovell/sharp/releases) - [Commits](https://github.com/lovell/sharp/compare/v0.34.5...v0.35.1) Updates `typescript-eslint` from 8.60.0 to 8.61.1 - [Release notes](https://github.com/typescript-eslint/typescript-eslint/releases) - [Changelog](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/typescript-eslint/CHANGELOG.md) - [Commits](https://github.com/typescript-eslint/typescript-eslint/commits/v8.61.1/packages/typescript-eslint) --- updated-dependencies: - dependency-name: "@radix-ui/react-select" dependency-version: 2.3.1 dependency-type: direct:development update-type: version-update:semver-minor dependency-group: dev-minor-updates - dependency-name: "@radix-ui/react-slider" dependency-version: 1.4.1 dependency-type: direct:development update-type: version-update:semver-minor dependency-group: dev-minor-updates - dependency-name: "@radix-ui/react-slot" dependency-version: 1.3.0 dependency-type: direct:development update-type: version-update:semver-minor dependency-group: dev-minor-updates - dependency-name: "@radix-ui/react-switch" dependency-version: 1.3.1 dependency-type: direct:development update-type: version-update:semver-minor dependency-group: dev-minor-updates - dependency-name: cytoscape dependency-version: 3.34.0 dependency-type: direct:development update-type: version-update:semver-minor dependency-group: dev-minor-updates - dependency-name: electron dependency-version: 42.4.0 dependency-type: direct:development update-type: version-update:semver-minor dependency-group: dev-minor-updates - dependency-name: electron-builder dependency-version: 26.15.3 dependency-type: direct:development update-type: version-update:semver-minor dependency-group: dev-minor-updates - dependency-name: lucide-react dependency-version: 1.18.0 dependency-type: direct:development update-type: version-update:semver-minor dependency-group: dev-minor-updates - dependency-name: radix-ui dependency-version: 1.6.0 dependency-type: direct:development update-type: version-update:semver-minor dependency-group: dev-minor-updates - dependency-name: react-hook-form dependency-version: 7.79.0 dependency-type: direct:development update-type: version-update:semver-minor dependency-group: dev-minor-updates - dependency-name: sharp dependency-version: 0.35.1 dependency-type: direct:development update-type: version-update:semver-minor dependency-group: dev-minor-updates - dependency-name: typescript-eslint dependency-version: 8.61.1 dependency-type: direct:development update-type: version-update:semver-minor dependency-group: dev-minor-updates ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump node in /docker in the docker-major-updates group (#914) Bumps the docker-major-updates group in /docker with 1 update: node. Updates `node` from 24-slim to 26-slim --- updated-dependencies: - dependency-name: node dependency-version: 26-slim dependency-type: direct:production dependency-group: docker-major-updates ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * ci(deps): bump the github-actions group with 2 updates (#915) Bumps the github-actions group with 2 updates: [actions/checkout](https://github.com/actions/checkout) and [actions/setup-node](https://github.com/actions/setup-node). Updates `actions/checkout` from 5 to 6 - [Release notes](https://github.com/actions/checkout/releases) - [Changelog](https://github.com/actions/checkout/blob/main/CHANGELOG.md) - [Commits](https://github.com/actions/checkout/compare/v5...v6) Updates `actions/setup-node` from 4 to 6 - [Release notes](https://github.com/actions/setup-node/releases) - [Commits](https://github.com/actions/setup-node/compare/v4...v6) --- updated-dependencies: - dependency-name: actions/checkout dependency-version: '6' dependency-type: direct:production update-type: version-update:semver-major dependency-group: github-actions - dependency-name: actions/setup-node dependency-version: '6' dependency-type: direct:production update-type: version-update:semver-major dependency-group: github-actions ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump the prod-minor-updates group across 1 directory with 5 updates (#916) Bumps the prod-minor-updates group with 5 updates in the / directory: | Package | From | To | | --- | --- | --- | | [axios](https://github.com/axios/axios) | `1.17.0` | `1.18.0` | | [better-sqlite3](https://github.com/WiseLibs/better-sqlite3) | `12.10.0` | `12.11.1` | | [body-parser](https://github.com/expressjs/body-parser) | `2.2.2` | `2.3.0` | | [multer](https://github.com/expressjs/multer) | `2.1.1` | `2.2.0` | | [undici](https://github.com/nodejs/undici) | `8.4.0` | `8.5.0` | Updates `axios` from 1.17.0 to 1.18.0 - [Release notes](https://github.com/axios/axios/releases) - [Changelog](https://github.com/axios/axios/blob/v1.x/CHANGELOG.md) - [Commits](https://github.com/axios/axios/compare/v1.17.0...v1.18.0) Updates `better-sqlite3` from 12.10.0 to 12.11.1 - [Release notes](https://github.com/WiseLibs/better-sqlite3/releases) - [Commits](https://github.com/WiseLibs/better-sqlite3/compare/v12.10.0...v12.11.1) Updates `body-parser` from 2.2.2 to 2.3.0 - [Release notes](https://github.com/expressjs/body-parser/releases) - [Changelog](https://github.com/expressjs/body-parser/blob/master/HISTORY.md) - [Commits](https://github.com/expressjs/body-parser/compare/v2.2.2...v2.3.0) Updates `multer` from 2.1.1 to 2.2.0 - [Release notes](https://github.com/expressjs/multer/releases) - [Changelog](https://github.com/expressjs/multer/blob/main/CHANGELOG.md) - [Commits](https://github.com/expressjs/multer/compare/v2.1.1...v2.2.0) Updates `undici` from 8.4.0 to 8.5.0 - [Release notes](https://github.com/nodejs/undici/releases) - [Commits](https://github.com/nodejs/undici/compare/v8.4.0...v8.5.0) --- updated-dependencies: - dependency-name: axios dependency-version: 1.18.0 dependency-type: direct:production update-type: version-update:semver-minor dependency-group: prod-minor-updates - dependency-name: better-sqlite3 dependency-version: 12.11.1 dependency-type: direct:production update-type: version-update:semver-minor dependency-group: prod-minor-updates - dependency-name: body-parser dependency-version: 2.3.0 dependency-type: direct:production update-type: version-update:semver-minor dependency-group: prod-minor-updates - dependency-name: multer dependency-version: 2.2.0 dependency-type: direct:production update-type: version-update:semver-minor dependency-group: prod-minor-updates - dependency-name: undici dependency-version: 8.5.0 dependency-type: direct:production update-type: version-update:semver-minor dependency-group: prod-minor-updates ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * feat: add unlink button for dual auth * fix: general bug fixes * fix: general qol/small feature additions * fix: 100mb max upload size * fix: terminal syntax not handling carriage returns or shell prompt lines properly * feat: continued general improvements * fix: terminal outputting success right after folder path * chore: update release notes * feat: continued fixes and improvements * chore: lint, format, and bump version to 2.4.1 * chore: sync Crowdin translations for 2.4.1 * fix: rebase dev branch onto main before Crowdin download * fix: use merge instead of rebase to sync main before Crowdin --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2026-07-15 21:03:47 +00:00 · 2026-06-21 15:55:41 -05:00
parent 8072b4ede9
commit d1a8dcf3c6
165 changed files with 87244 additions and 60766 deletions
@@ -6,10 +6,12 @@ import { Separator } from "@/components/separator";
 import {
  Activity,
  Database,
+  ExternalLink,
  GripHorizontal,
  GripVertical,
  KeyRound,
  LayoutDashboard,
+  Link,
  MessagesSquare,
  Network,
  Plus,
@@ -37,10 +39,21 @@ import {
  registerMetricsViewer,
  sendMetricsHeartbeat,
  getUserInfo,
+  getServiceLinks,
+  createServiceLink,
+  deleteServiceLink,
+} from "@/main-axios";
+import type {
+  RecentActivityItem,
+  SSHHostWithStatus,
+  ServiceLink,
 } from "@/main-axios";
-import type { RecentActivityItem, SSHHostWithStatus } from "@/main-axios";
 import { useTranslation } from "react-i18next";
 import { NetworkGraphCard } from "@/dashboard/cards/NetworkGraphCard";
+import {
+  useStatusColorScheme,
+  getStatusClasses,
+} from "@/hooks/use-status-color-scheme";

 function sshHostToHost(h: SSHHostWithStatus): Host {
  return {
@@ -66,7 +79,7 @@ function sshHostToHost(h: SSHHostWithStatus): Host {
    macAddress: h.macAddress,
    enableTerminal: h.enableTerminal ?? true,
    enableTunnel: h.enableTunnel ?? false,
-    enableFileManager: h.enableFileManager ?? false,
+    enableFileManager: h.enableFileManager ?? true,
    enableDocker: h.enableDocker ?? false,
    enableSsh: h.connectionType === "ssh" || !h.connectionType,
    enableRdp: h.connectionType === "rdp",
@@ -205,35 +218,48 @@ function CountersBarCard({
  hosts,
  credentialCount,
  activeTunnelCount,
+  onOpenSingletonTab,
 }: {
  hosts: Host[];
  credentialCount: number;
  activeTunnelCount: number;
+  onOpenSingletonTab: (type: TabType, pendingEvent?: string) => void;
 }) {
  const { t } = useTranslation();
  return (
    <Card className="grid grid-cols-3 divide-x divide-border overflow-hidden w-full h-full py-0 gap-0">
-      <div className="flex items-center gap-2.5 px-4 py-2.5">
+      <button
+        onClick={() => onOpenSingletonTab("host-manager")}
+        className="flex items-center gap-2.5 px-4 py-2.5 hover:bg-muted transition-colors cursor-pointer text-left"
+      >
        <Server className="size-3.5 text-muted-foreground shrink-0" />
        <span className="text-base font-bold">{hosts.length}</span>
        <span className="text-[10px] text-muted-foreground uppercase tracking-widest font-semibold">
          {t("dashboard.totalHosts")}
        </span>
-      </div>
-      <div className="flex items-center gap-2.5 px-4 py-2.5">
+      </button>
+      <button
+        onClick={() =>
+          onOpenSingletonTab("host-manager", "host-manager:show-credentials")
+        }
+        className="flex items-center gap-2.5 px-4 py-2.5 hover:bg-muted transition-colors cursor-pointer text-left"
+      >
        <KeyRound className="size-3.5 text-muted-foreground shrink-0" />
        <span className="text-base font-bold">{credentialCount}</span>
        <span className="text-[10px] text-muted-foreground uppercase tracking-widest font-semibold">
          {t("dashboard.totalCredentials")}
        </span>
-      </div>
-      <div className="flex items-center gap-2.5 px-4 py-2.5">
+      </button>
+      <button
+        onClick={() => onOpenSingletonTab("tunnel")}
+        className="flex items-center gap-2.5 px-4 py-2.5 hover:bg-muted transition-colors cursor-pointer text-left"
+      >
        <Network className="size-3.5 text-muted-foreground shrink-0" />
        <span className="text-base font-bold">{activeTunnelCount}</span>
        <span className="text-[10px] text-muted-foreground uppercase tracking-widest font-semibold">
          {t("dashboardTab.activeTunnels")}
        </span>
-      </div>
+      </button>
    </Card>
  );
 }
@@ -365,16 +391,48 @@ function QuickActionsCard({
  );
 }

+function MetricBar({ label, value }: { label: string; value: number }) {
+  const color =
+    value >= 90
+      ? "bg-red-500"
+      : value >= 70
+        ? "bg-yellow-500"
+        : "bg-accent-brand";
+  const textColor =
+    value >= 90
+      ? "text-red-400"
+      : value >= 70
+        ? "text-yellow-400"
+        : "text-accent-brand";
+  return (
+    <div className="flex flex-col gap-0.5 w-16">
+      <div className="flex items-center justify-between">
+        <span className="text-[10px] text-muted-foreground">{label}</span>
+        <span className={`text-[10px] font-bold ${textColor}`}>
+          {value.toFixed(0)}%
+        </span>
+      </div>
+      <div className="h-0.5 bg-muted w-full">
+        <div className={`h-full ${color}`} style={{ width: `${value}%` }} />
+      </div>
+    </div>
+  );
+}
+
 function HostStatusCard({
  hosts,
  hostMetrics,
  onOpenTab,
 }: {
  hosts: Host[];
-  hostMetrics: Map<string, { cpu: number | null; ram: number | null }>;
+  hostMetrics: Map<
+    string,
+    { cpu: number | null; ram: number | null; disk: number | null }
+  >;
  onOpenTab: (host: Host, type: TabType) => void;
 }) {
  const { t } = useTranslation();
+  const statusScheme = useStatusColorScheme();
  const online = hosts.filter((h) => h.online).length;
  return (
    <Card className="flex flex-col overflow-hidden w-full h-full py-0 gap-0">
@@ -399,19 +457,23 @@ function HostStatusCard({
          const metrics = hostMetrics.get(host.id);
          const cpu = metrics?.cpu ?? null;
          const ram = metrics?.ram ?? null;
-          const hasMetrics = cpu !== null || ram !== null;
+          const disk = metrics?.disk ?? null;
+          const hasMetrics = cpu !== null || ram !== null || disk !== null;
          return (
            <div
              key={i}
              onClick={() => onOpenTab(host, "host-metrics")}
-              className="flex items-center justify-between px-4 py-2.5 border-b border-border last:border-0 hover:bg-muted/50 cursor-pointer"
+              className="flex items-center justify-between px-4 py-2.5 border-b border-border last:border-0 hover:bg-muted/50 cursor-pointer group/row"
            >
              <div className="flex items-center gap-2.5">
                <span
-                  className={`size-1.5 rounded-full shrink-0 ${host.online ? "bg-accent-brand" : "bg-muted-foreground/40"}`}
+                  className={`size-1.5 rounded-full shrink-0 ${getStatusClasses(host.online, statusScheme, "dot")}`}
                />
                <div className="flex flex-col">
-                  <span className="text-xs font-semibold">{host.name}</span>
+                  <div className="flex items-center gap-1">
+                    <span className="text-xs font-semibold">{host.name}</span>
+                    <ExternalLink className="size-2.5 text-muted-foreground/0 group-hover/row:text-muted-foreground/60 transition-colors shrink-0" />
+                  </div>
                  <span className="text-[10px] text-muted-foreground font-mono">
                    {host.ip}
                  </span>
@@ -421,40 +483,13 @@ function HostStatusCard({
                {host.online && hasMetrics ? (
                  <div className="flex items-center gap-3">
                    {cpu !== null && (
-                      <div className="flex flex-col gap-0.5 w-16">
-                        <div className="flex items-center justify-between">
-                          <span className="text-[10px] text-muted-foreground">
-                            {t("dashboard.cpu")}
-                          </span>
-                          <span className="text-[10px] font-bold text-accent-brand">
-                            {cpu.toFixed(0)}%
-                          </span>
-                        </div>
-                        <div className="h-0.5 bg-muted w-full">
-                          <div
-                            className="h-full bg-accent-brand"
-                            style={{ width: `${cpu}%` }}
-                          />
-                        </div>
-                      </div>
+                      <MetricBar label={t("dashboard.cpu")} value={cpu} />
                    )}
                    {ram !== null && (
-                      <div className="flex flex-col gap-0.5 w-16">
-                        <div className="flex items-center justify-between">
-                          <span className="text-[10px] text-muted-foreground">
-                            {t("dashboard.ram")}
-                          </span>
-                          <span className="text-[10px] font-bold text-accent-brand">
-                            {ram.toFixed(0)}%
-                          </span>
-                        </div>
-                        <div className="h-0.5 bg-muted w-full">
-                          <div
-                            className="h-full bg-accent-brand"
-                            style={{ width: `${ram}%` }}
-                          />
-                        </div>
-                      </div>
+                      <MetricBar label={t("dashboard.ram")} value={ram} />
+                    )}
+                    {disk !== null && (
+                      <MetricBar label={t("dashboardTab.disk")} value={disk} />
                    )}
                  </div>
                ) : (
@@ -465,10 +500,13 @@ function HostStatusCard({
                    <span className="text-[10px] text-muted-foreground w-16 text-center">
                      —
                    </span>
+                    <span className="text-[10px] text-muted-foreground w-16 text-center">
+                      —
+                    </span>
                  </div>
                )}
                <span
-                  className={`text-[10px] px-2 py-0.5 font-semibold border ${host.online ? "border-accent-brand/40 text-accent-brand bg-accent-brand/10" : "border-border text-muted-foreground"}`}
+                  className={`text-[10px] px-2 py-0.5 font-semibold border ${getStatusClasses(host.online, statusScheme, "badge")}`}
                >
                  {host.online
                    ? t("dashboardTab.online")
@@ -495,6 +533,7 @@ function RecentActivityCard({
  onClear: () => void;
 }) {
  const { t } = useTranslation();
+  const statusScheme = useStatusColorScheme();
  const typeIcon: Record<RecentActivityItem["type"], React.ReactNode> = {
    terminal: <Terminal className="size-2.5" />,
    file_manager: <Server className="size-2.5" />,
@@ -570,7 +609,7 @@ function RecentActivityCard({
            >
              <div className="flex items-center gap-2">
                <span
-                  className={`size-1.5 rounded-full shrink-0 ${host?.online ? "bg-accent-brand" : "bg-muted-foreground/40"}`}
+                  className={`size-1.5 rounded-full shrink-0 ${getStatusClasses(host?.online ?? false, statusScheme, "dot")}`}
                />
                <div className="flex flex-col">
                  <span className="text-xs font-semibold truncate max-w-24">
@@ -593,6 +632,124 @@ function RecentActivityCard({
  );
 }

+function ServiceLinksCard({
+  links,
+  onAdd,
+  onDelete,
+}: {
+  links: ServiceLink[];
+  onAdd: (label: string, url: string) => Promise<void>;
+  onDelete: (id: number) => Promise<void>;
+}) {
+  const { t } = useTranslation();
+  const [label, setLabel] = useState("");
+  const [url, setUrl] = useState("");
+  const [urlError, setUrlError] = useState(false);
+  const [adding, setAdding] = useState(false);
+
+  const handleAdd = async () => {
+    let valid = true;
+    try {
+      const parsed = new URL(url);
+      if (parsed.protocol !== "http:" && parsed.protocol !== "https:") {
+        valid = false;
+      }
+    } catch {
+      valid = false;
+    }
+    if (!valid) {
+      setUrlError(true);
+      return;
+    }
+    setUrlError(false);
+    setAdding(true);
+    try {
+      await onAdd(label.trim(), url.trim());
+      setLabel("");
+      setUrl("");
+    } finally {
+      setAdding(false);
+    }
+  };
+
+  return (
+    <Card className="flex flex-col overflow-hidden w-full h-full py-0 gap-0">
+      <div className="flex items-center gap-2 px-4 py-2.5 border-b border-border shrink-0">
+        <Link className="size-3.5 text-muted-foreground" />
+        <span className="text-xs text-muted-foreground uppercase tracking-widest font-semibold">
+          {t("dashboardTab.serviceLinksTitle")}
+        </span>
+      </div>
+      <div className="flex flex-col overflow-auto flex-1">
+        {links.length === 0 && (
+          <div className="flex-1 flex items-center justify-center text-xs text-muted-foreground/40 py-4">
+            {t("dashboardTab.serviceLinksEmpty")}
+          </div>
+        )}
+        {links.map((link) => (
+          <div
+            key={link.id}
+            className="flex items-center justify-between px-4 py-2 border-b border-border last:border-0 group/link"
+          >
+            <a
+              href={link.url}
+              target="_blank"
+              rel="noreferrer noopener"
+              className="flex items-center gap-2 min-w-0 flex-1 hover:text-accent-brand transition-colors"
+            >
+              <ExternalLink className="size-3 text-muted-foreground shrink-0" />
+              <span className="text-xs font-semibold truncate">
+                {link.label}
+              </span>
+              <span className="text-[10px] text-muted-foreground truncate">
+                {link.url}
+              </span>
+            </a>
+            <button
+              onClick={() => onDelete(link.id)}
+              className="ml-2 opacity-0 group-hover/link:opacity-100 transition-opacity size-5 flex items-center justify-center hover:text-destructive"
+            >
+              <Trash2 className="size-3" />
+            </button>
+          </div>
+        ))}
+      </div>
+      <div className="flex items-center gap-2 px-4 py-2 border-t border-border shrink-0">
+        <input
+          type="text"
+          value={label}
+          onChange={(e) => setLabel(e.target.value)}
+          placeholder={t("dashboardTab.serviceLinksLabelPlaceholder")}
+          className="flex-1 min-w-0 text-xs bg-transparent border border-border px-2 py-1 focus:outline-none focus:border-accent-brand/60"
+        />
+        <input
+          type="text"
+          value={url}
+          onChange={(e) => {
+            setUrl(e.target.value);
+            setUrlError(false);
+          }}
+          placeholder={t("dashboardTab.serviceLinksUrlPlaceholder")}
+          className={`flex-[2] min-w-0 text-xs bg-transparent border px-2 py-1 focus:outline-none ${urlError ? "border-destructive" : "border-border focus:border-accent-brand/60"}`}
+        />
+        <Button
+          size="sm"
+          className="text-xs bg-accent-brand hover:bg-accent-brand/90 text-white h-6 px-2 shrink-0"
+          onClick={handleAdd}
+          disabled={!label.trim() || !url.trim() || adding}
+        >
+          {t("dashboardTab.serviceLinksAdd")}
+        </Button>
+      </div>
+      {urlError && (
+        <div className="px-4 pb-2 text-[10px] text-destructive shrink-0">
+          {t("dashboardTab.serviceLinksInvalidUrl")}
+        </div>
+      )}
+    </Card>
+  );
+}
+
 // ─── CardItem ─────────────────────────────────────────────────────────────────

 function CardItem({
@@ -617,6 +774,9 @@ function CardItem({
  activity,
  onClearActivity,
  isAdmin,
+  serviceLinks,
+  onAddServiceLink,
+  onDeleteServiceLink,
 }: {
  slot: CardSlot;
  editMode: boolean;
@@ -629,7 +789,10 @@ function CardItem({
  onOpenSingletonTab: (type: TabType, pendingEvent?: string) => void;
  onOpenTab: (host: Host, type: TabType) => void;
  hosts: Host[];
-  hostMetrics: Map<string, { cpu: number | null; ram: number | null }>;
+  hostMetrics: Map<
+    string,
+    { cpu: number | null; ram: number | null; disk: number | null }
+  >;
  uptimeFormatted: string;
  versionText: string;
  versionStatus: "up_to_date" | "requires_update" | "beta";
@@ -639,6 +802,9 @@ function CardItem({
  activity: RecentActivityItem[];
  onClearActivity: () => void;
  isAdmin: boolean;
+  serviceLinks: ServiceLink[];
+  onAddServiceLink: (label: string, url: string) => Promise<void>;
+  onDeleteServiceLink: (id: number) => Promise<void>;
 }) {
  const cardRef = useRef<HTMLDivElement | null>(null);

@@ -704,6 +870,7 @@ function CardItem({
            hosts={hosts}
            credentialCount={credentialCount}
            activeTunnelCount={activeTunnelCount}
+            onOpenSingletonTab={onOpenSingletonTab}
          />
        )}
        {slot.id === "quick_actions" && (
@@ -735,6 +902,13 @@ function CardItem({
            onOpenInNewTab={() => onOpenSingletonTab("network_graph")}
          />
        )}
+        {slot.id === "service_links" && (
+          <ServiceLinksCard
+            links={serviceLinks}
+            onAdd={onAddServiceLink}
+            onDelete={onDeleteServiceLink}
+          />
+        )}
      </div>
      {editMode && !isFlex && (
        <div
@@ -831,7 +1005,10 @@ type PanelColumnProps = {
  onOpenSingletonTab: (type: TabType, pendingEvent?: string) => void;
  onOpenTab: (host: Host, type: TabType) => void;
  hosts: Host[];
-  hostMetrics: Map<string, { cpu: number | null; ram: number | null }>;
+  hostMetrics: Map<
+    string,
+    { cpu: number | null; ram: number | null; disk: number | null }
+  >;
  uptimeFormatted: string;
  versionText: string;
  versionStatus: "up_to_date" | "requires_update" | "beta";
@@ -842,6 +1019,9 @@ type PanelColumnProps = {
  onClearActivity: () => void;
  cardLabels: Record<DashboardCardId, string>;
  isAdmin: boolean;
+  serviceLinks: ServiceLink[];
+  onAddServiceLink: (label: string, url: string) => Promise<void>;
+  onDeleteServiceLink: (id: number) => Promise<void>;
 };

 function PanelColumn({
@@ -869,6 +1049,9 @@ function PanelColumn({
  onClearActivity,
  cardLabels,
  isAdmin,
+  serviceLinks,
+  onAddServiceLink,
+  onDeleteServiceLink,
 }: PanelColumnProps) {
  const { t } = useTranslation();
  const sorted = [...slots].sort((a, b) => a.order - b.order);
@@ -921,6 +1104,9 @@ function PanelColumn({
            activity={activity}
            onClearActivity={onClearActivity}
            isAdmin={isAdmin}
+            serviceLinks={serviceLinks}
+            onAddServiceLink={onAddServiceLink}
+            onDeleteServiceLink={onDeleteServiceLink}
          />
        </div>
      ))}
@@ -1028,7 +1214,7 @@ export function DashboardTab({
  const [activeTunnelCount, setActiveTunnelCount] = useState(0);
  const [activity, setActivity] = useState<RecentActivityItem[]>([]);
  const [hostMetrics, setHostMetrics] = useState<
-    Map<string, { cpu: number | null; ram: number | null }>
+    Map<string, { cpu: number | null; ram: number | null; disk: number | null }>
  >(new Map());
  const viewerSessionsRef = useRef<Map<number, string>>(new Map());

@@ -1066,6 +1252,7 @@ export function DashboardTab({
            id: host.id,
            cpu: metrics.cpu?.percent ?? null,
            ram: metrics.memory?.percent ?? null,
+            disk: metrics.disk?.percent ?? null,
          };
        } catch {
          return null;
@@ -1074,9 +1261,12 @@ export function DashboardTab({
    );

    viewerSessionsRef.current = newSessions;
-    const map = new Map<string, { cpu: number | null; ram: number | null }>();
+    const map = new Map<
+      string,
+      { cpu: number | null; ram: number | null; disk: number | null }
+    >();
    for (const r of results) {
-      if (r) map.set(r.id, { cpu: r.cpu, ram: r.ram });
+      if (r) map.set(r.id, { cpu: r.cpu, ram: r.ram, disk: r.disk });
    }
    setHostMetrics(map);
  }, []);
@@ -1169,6 +1359,24 @@ export function DashboardTab({
    }
  };

+  const [serviceLinks, setServiceLinks] = useState<ServiceLink[]>([]);
+
+  useEffect(() => {
+    getServiceLinks()
+      .then(setServiceLinks)
+      .catch(() => {});
+  }, []);
+
+  const handleAddServiceLink = async (label: string, url: string) => {
+    const created = await createServiceLink(label, url);
+    setServiceLinks((prev) => [...prev, created]);
+  };
+
+  const handleDeleteServiceLink = async (id: number) => {
+    await deleteServiceLink(id);
+    setServiceLinks((prev) => prev.filter((l) => l.id !== id));
+  };
+
  const todayLabel = new Date().toLocaleDateString(i18n.language, {
    weekday: "long",
    month: "long",
@@ -1192,6 +1400,7 @@ export function DashboardTab({
    host_status: t("dashboardTab.hostStatus"),
    recent_activity: t("dashboard.recentActivity"),
    network_graph: t("dashboard.networkGraph"),
+    service_links: t("dashboard.serviceLinks"),
  };

  const onColumnDividerMouseDown = useCallback(
@@ -1264,7 +1473,9 @@ export function DashboardTab({
          ? 350
          : id === "host_status" || id === "recent_activity"
            ? null
-            : 150;
+            : id === "service_links"
+              ? 200
+              : 150;
      return [...prev, { id, panel, order: maxOrder, height: defaultHeight }];
    });
  };
@@ -1299,6 +1510,9 @@ export function DashboardTab({
    onOpenTab,
    cardLabels,
    isAdmin,
+    serviceLinks,
+    onAddServiceLink: handleAddServiceLink,
+    onDeleteServiceLink: handleDeleteServiceLink,
  };

  const isMobile = useIsMobile();
@@ -1393,6 +1607,7 @@ export function DashboardTab({
                  hosts={hosts}
                  credentialCount={credentialCount}
                  activeTunnelCount={activeTunnelCount}
+                  onOpenSingletonTab={onOpenSingletonTab}
                />
              )}
              {slot.id === "quick_actions" && (
@@ -1424,6 +1639,13 @@ export function DashboardTab({
                  onOpenInNewTab={() => onOpenSingletonTab("network_graph")}
                />
              )}
+              {slot.id === "service_links" && (
+                <ServiceLinksCard
+                  links={serviceLinks}
+                  onAdd={handleAddServiceLink}
+                  onDelete={handleDeleteServiceLink}
+                />
+              )}
            </div>
          ))}
        </div>
@@ -128,11 +128,17 @@ function buildNodeSvg(
 ): string {
  const isOnline = status === "online";
  const isOffline = status === "offline";
-  const statusColor = isOnline
-    ? "rgb(16,185,129)"
-    : isOffline
-      ? "rgb(239,68,68)"
-      : "rgb(100,116,139)";
+  const useRealColors = localStorage.getItem("statusColorScheme") === "status";
+  let statusColor: string;
+  if (isOnline) {
+    statusColor = useRealColors
+      ? "rgb(16,185,129)"
+      : resolveCssVar("--accent-brand", "rgb(16,185,129)");
+  } else if (isOffline) {
+    statusColor = useRealColors ? "rgb(239,68,68)" : "rgba(16,185,129,0.2)";
+  } else {
+    statusColor = "rgb(100,116,139)";
+  }

  const bg = resolveCssVar("--card", "#1e1e20");
  const border = resolveCssVar("--border", "#2a2a2c");