release-2.9.1 (#1557)

* fix(sso): send the PKCE verifier for GitHub login (#1534)

* fix(remote-desktop): clip cursor overflow without disabling zoom (#1535)

* test(remote-desktop): preserve sessions beyond one hour (#1536)

* fix(hosts): expose controls for overflowing editor tabs (#1537)

* fix(hosts): expose controls for overflowing editor tabs

* test(hosts): mock resize observation in admin panel tests

* fix(status): skip TCP probes while host sessions are active (#1538)

* fix(database): batch session activity persistence (#1539)

* docs(api): describe cookie and API key authentication (#1540)

* fix(snippets): repair missing note column on SQLite upgrades (#1541)

* fix(docker): retain stored SSH credential association (#1543)

* fix(file-manager): render transfer toasts without plugin hooks (#1546)

* feat(hosts): keep compact row actions inline (#1547)

* fix(auth): allow retrying unavailable second-factor interfaces (#1549)

* fix(auth): reject unresolved legacy identity provisioning (#1550)

* fix(desktop): ship the plugin SDK inside Mac App Store builds (#1551)

* fix(tmux): pass full session info to the terminal's session picker (#1552)

The tmux.sessions service reduced detected sessions to bare names, but the
picker reads session.name, so every entry rendered blank and selecting one
sent an empty name, which created a new session instead of attaching.

* fix(ssh): read force keyboard-interactive as a boolean when resolving hosts (#1553)

The column holds the text "true"/"false", and the resolver passed it
through as-is. The string "false" is truthy, so the password provider
treated every saved host as forced keyboard-interactive and left the
password out. Jump hops are built straight from the resolved host, so a
password hop whose server doesn't offer keyboard-interactive failed with
"All configured authentication methods failed".

* fix(database): batch database saves for bulk host writes (#1554)

* fix(database): yield to the event loop between database saves

Each SQLite save serializes and encrypts the whole database into new
buffers, which V8 only releases once the event loop turns. Boot
migrations and bulk host import write plugin settings per host and per
key in an awaited loop, so hundreds of full copies piled up and the
container ran out of memory.

* fix(database): save once per bulk host write instead of once per row

On SQLite every repository write force-saves the whole database. Boot
plugin data migrations, host defaults materialization and the bulk
host routes write one row per host per setting, so they serialized and
encrypted the full database hundreds of times in a row.

DatabaseSaveTrigger.batched wraps a function so force saves made while
it runs collapse into a single save when it finishes. Nested scopes fold
into the outer one, and work that outlives its scope saves normally.

* feat(hosts): add instance-wide predefined tag suggestions (#1548)

* feat(hosts): add shared predefined tag suggestions

* style(hosts): format tag catalog routes

* test(database): advance fake timers past the save yield (#1555)

* fix(i18n): complete Simplified Chinese core and plugin translations (#1542)

* fix(i18n): complete Chinese onboarding and navigation labels

* fix(i18n): translate remaining Chinese core and plugin interfaces

* fix(i18n): translate host editor tab overflow controls

* fix(i18n): use consistent Chinese fleet terminology

* fix(i18n): localize hardcoded controls and plugin views

* fix(i18n): translate built-in homepage widget catalog

* test(homepage): follow translated timezone placeholder

* fix(i18n): translate plugin-provided homepage widgets

* fix(i18n): localize feature settings section titles

* fix: 2.8 oidc accounts unable to sign in after upgrading (#1381)

* fix: plugins losing the saved ssh login when copying a host (#1391)

* fix: fleets, proxmox and automations not getting the host sudo password

* fix: host imports running a defaults pass and metrics restart per host (#1384)

* fix: high cpu from status probes and full database saves on every sample (#1300)

* fix: user data export freezing the server (#1393)

* fix: op:// secret references rejected as ssh keys on credentials (#1394)

* fix: slow file deletes from the trash lookups on every delete (#1390)

* fix: add openapi docs and error handling to host tag routes

* test: compare download stream buffers directly so it stops timing out

* chore: drop em dash from host row comment

* chore: update release notes for 2.9.1

* fix: restore space to add host tags and redesign predefined tags editor

* fix: host key silently accepted when the host is missing from the database (#1397)

* fix: clearer host login failed status label and fix its translations (#1396)

* chore: add host key and status label fixes to release notes

* fix: sso and ldap provider dialogs overflowing the screen and using mismatched toggles

* chore: increment ver

* fix(audit): store plugin entries with no acting user as a null user_id (#1556)

Plugin audit entries written outside a request used the literal "system"
as user_id. That column references users.id, so the insert was refused
(Postgres logs it as an FK violation) and the entry was silently dropped.
Write null instead and keep "system" / plugin:<id> in username.

* chore: add sso/ldap dialog and audit log fixes to release notes

* fix: tunnels and host settings missing from shared hosts on desktop

* fix: remote desktop logins missing from shared hosts on desktop

* fix: simplify host status to online/offline and keep it live without a refresh

* chore: sync Crowdin translations for 2.9.1

---------

Co-authored-by: ZacharyZcR <zacharyzcr1984@gmail.com>
This commit is contained in:
Luke GustafsonandZacharyZcR authored and GitHub committed 2026-10-04 15:11:41 -05:00
1 parent 5786eaccbb
commit 6b708106e1
912 files changed
+14220 -2200

No files matched your search

+1 -1
View File
@@ -150,7 +150,7 @@ export function AdminApiKeysSection({
<span className="text-accent-brand">*</span>
</label>
<Input
placeholder="e.g., CI Pipeline"
placeholder={t("placeholders.apiKeyName")}
value={newKeyName}
onChange={(e) => setNewKeyName(e.target.value)}
className="text-xs"
+99
View File
@@ -0,0 +1,99 @@
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { toast } from "sonner";
import { X } from "lucide-react";
import { getHostTags, saveHostTags } from "@/api/host-tags-api";
export function AdminHostTags() {
const { t } = useTranslation();
const [tags, setTags] = useState<string[]>([]);
const [input, setInput] = useState("");
const [loaded, setLoaded] = useState(false);
const [saving, setSaving] = useState(false);
useEffect(() => {
let cancelled = false;
getHostTags()
.then((list) => {
if (cancelled) return;
setTags(list);
setLoaded(true);
})
.catch(() => {
if (!cancelled) toast.error(t("admin.hostTagsError"));
});
return () => {
cancelled = true;
};
}, [t]);
async function save(next: string[]) {
const previous = tags;
setTags(next);
setSaving(true);
try {
setTags(await saveHostTags(next));
window.dispatchEvent(new Event("termix:host-tags-changed"));
} catch {
setTags(previous);
toast.error(t("admin.hostTagsError"));
} finally {
setSaving(false);
}
}
function add(raw: string) {
const tag = raw.trim();
setInput("");
if (!tag || tags.includes(tag)) return;
void save([...tags, tag]);
}
return (
<div className="flex flex-col gap-1.5">
<label htmlFor="global-host-tags" className="text-xs font-medium">
{t("admin.hostTags")}
</label>
<span className="text-[10px] text-muted-foreground">
{t("admin.hostTagsDesc")}
</span>
<div className="flex flex-wrap items-center gap-1 min-h-9 px-2 py-1 border border-border bg-background focus-within:ring-1 focus-within:ring-ring">
{tags.map((tag) => (
<span
key={tag}
className="flex items-center gap-0.5 px-1.5 py-0.5 text-[10px] bg-muted border border-border/60 text-foreground"
>
{tag}
<button
type="button"
disabled={saving}
aria-label={t("common.remove")}
onClick={() => void save(tags.filter((tg) => tg !== tag))}
className="text-muted-foreground hover:text-destructive ml-0.5"
>
<X className="size-2.5" />
</button>
</span>
))}
<input
id="global-host-tags"
className="flex-1 min-w-16 text-xs bg-transparent outline-none placeholder:text-muted-foreground/50"
placeholder={tags.length === 0 ? t("hosts.addTag") : ""}
disabled={!loaded || saving}
value={input}
onChange={(e) => setInput(e.target.value)}
onBlur={() => add(input)}
onKeyDown={(e) => {
if (e.nativeEvent.isComposing) return;
if ((e.key === " " || e.key === "Enter") && input.trim()) {
e.preventDefault();
add(input);
} else if (e.key === "Backspace" && !input && tags.length > 0) {
void save(tags.slice(0, -1));
}
}}
/>
</div>
</div>
);
}
+1 -1
View File
@@ -117,7 +117,7 @@ export function AdminSettingsPanel({
const [passwordLoginForced, setPasswordLoginForced] = useState(false);
const [allowPasswordReset, setAllowPasswordReset] = useState(true);
const [sessionTimeout, setSessionTimeout] = useState("24");
const [statusInterval, setStatusInterval] = useState("60");
const [statusInterval, setStatusInterval] = useState("30");
const [logLevel, setLogLevel] = useState("info");
const [notificationPrivateEndpoints, setNotificationPrivateEndpoints] =
useState<string[]>([]);
+4
View File
@@ -5,6 +5,7 @@ import { Input } from "@/components/input";
import { SettingRow } from "@/components/section-card";
import { Database, Lock, RefreshCw, Server, Settings } from "lucide-react";
import { AccordionSection, AdminToggle } from "./AdminSettingsShared";
import { AdminHostTags } from "./AdminHostTags";
import type { TlsStatus } from "@/api/tls-api";
type GeneralSettingsSectionProps = {
@@ -349,6 +350,9 @@ export function AdminHostDefaultsSection({
>
{t("hostDefaults.editServerDefaults")}
</Button>
<div className="border-t border-border pt-3">
<AdminHostTags />
</div>
</div>
</AccordionSection>
);
+3 -3
View File
@@ -183,7 +183,7 @@ export function CredentialEditorView({
{t("hosts.friendlyNameLabel")}
</label>
<Input
placeholder="e.g. Production SSH Key"
placeholder={t("placeholders.credentialName")}
value={credForm.name}
onChange={(e) => setCredField("name", e.target.value)}
/>
@@ -203,7 +203,7 @@ export function CredentialEditorView({
{t("hosts.descriptionLabel")}
</label>
<Input
placeholder="Optional details..."
placeholder={t("placeholders.optionalDetails")}
value={credForm.description}
onChange={(e) => setCredField("description", e.target.value)}
/>
@@ -278,7 +278,7 @@ export function CredentialEditorView({
{t("hosts.username")}
</label>
<Input
placeholder="e.g. root or deploy"
placeholder={t("placeholders.sshUsername")}
value={credForm.username}
onChange={(e) => setCredField("username", e.target.value)}
/>
+1 -1
View File
@@ -1444,7 +1444,7 @@ export function HostEditor({
{t("hosts.friendlyNameLabel")}
</label>
<Input
placeholder="e.g. Production SSH Key"
placeholder={t("placeholders.credentialName")}
value={quickCredentialName}
onChange={(e) => setQuickCredentialName(e.target.value)}
/>
+56 -6
View File
@@ -1,4 +1,5 @@
import React from "react";
import { getHostTags } from "@/api/host-tags-api";
import type { ProxyNode } from "@/types/index";
import { useTranslation } from "react-i18next";
import { Button } from "@/components/button";
@@ -47,6 +48,39 @@ export function HostEditorGeneralTab({
const { t } = useTranslation();
const syncLinked = !!useSyncStatus()?.linked;
const pluginProtocols = useHostProtocols();
const [predefinedTags, setPredefinedTags] = React.useState<string[]>([]);
React.useEffect(() => {
let cancelled = false;
const load = () => {
void getHostTags()
.then((tags) => {
if (!cancelled) setPredefinedTags(tags);
})
.catch(() => {});
};
load();
window.addEventListener("termix:host-tags-changed", load);
return () => {
cancelled = true;
window.removeEventListener("termix:host-tags-changed", load);
};
}, []);
const suggestedTags = [
...new Set([
...predefinedTags,
...hosts.flatMap((item) => item.tags ?? []),
]),
].filter(
(tag) =>
!form.tags.includes(tag) &&
tag
.toLocaleLowerCase()
.includes(form.tagInput.trim().toLocaleLowerCase()),
);
const addTag = (tag: string) => {
if (!form.tags.includes(tag)) setField("tags", [...form.tags, tag]);
setField("tagInput", "");
};
// Tracks which picker is shown, independent of whether a value is set yet
// -- switching to "parent host" mode with nothing picked shouldn't bounce
@@ -174,7 +208,7 @@ export function HostEditorGeneralTab({
{t("hosts.addressIp")}
</label>
<Input
placeholder="10.0.0.1 or example.com"
placeholder={t("placeholders.hostAddress")}
value={form.ip}
onChange={(e) => setField("ip", e.target.value)}
/>
@@ -186,7 +220,7 @@ export function HostEditorGeneralTab({
{t("hosts.friendlyName")}
</label>
<Input
placeholder="e.g. Web Server Production"
placeholder={t("placeholders.hostName")}
value={form.name}
onChange={(e) => setField("name", e.target.value)}
/>
@@ -284,13 +318,11 @@ export function HostEditorGeneralTab({
onKeyDown={(e) => {
if (
(e.key === " " || e.key === "Enter") &&
!e.nativeEvent.isComposing &&
form.tagInput.trim()
) {
e.preventDefault();
const tag = form.tagInput.trim();
if (!form.tags.includes(tag))
setField("tags", [...form.tags, tag]);
setField("tagInput", "");
addTag(form.tagInput.trim());
} else if (
e.key === "Backspace" &&
!form.tagInput &&
@@ -302,6 +334,24 @@ export function HostEditorGeneralTab({
/>
</div>
</div>
{suggestedTags.length > 0 && (
<div
className="col-span-2 flex flex-wrap gap-1 max-h-24 overflow-y-auto"
aria-label={t("admin.hostTags")}
>
{suggestedTags.map((tag) => (
<button
type="button"
key={tag}
onClick={() => addTag(tag)}
className="flex items-center gap-0.5 px-1.5 py-0.5 text-[10px] border border-dashed border-border text-muted-foreground hover:text-foreground hover:border-foreground/40 transition-colors"
>
<Plus className="size-2.5" />
{tag}
</button>
))}
</div>
)}
<div className="flex flex-col gap-1.5 col-span-2">
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
{t("hosts.privateNotes")}
+75 -7
View File
@@ -1,6 +1,19 @@
/* eslint-disable react-refresh/only-export-components */
import { useEffect, useRef, type ComponentType, type ReactNode } from "react";
import { KeyRound, Settings, Terminal } from "lucide-react";
import {
useEffect,
useRef,
useState,
type ComponentType,
type ReactNode,
} from "react";
import {
ChevronLeft,
ChevronRight,
KeyRound,
Settings,
Terminal,
} from "lucide-react";
import { useTranslation } from "react-i18next";
import { byOrderThenId, createRegistry } from "@/lib/registry";
/** Core host editor tabs. Plugins add theirs through registerHostEditorSection. */
@@ -197,6 +210,27 @@ export function TabStrip({
variant?: "primary" | "secondary";
}) {
const ref = useRef<HTMLDivElement>(null);
const { t } = useTranslation();
const [scroll, setScroll] = useState({ left: false, right: false });
useEffect(() => {
const el = ref.current;
if (!el) return;
const update = () =>
setScroll({
left: el.scrollLeft > 1,
right: el.scrollLeft + el.clientWidth < el.scrollWidth - 1,
});
const observer = new ResizeObserver(update);
observer.observe(el);
if (el.firstElementChild) observer.observe(el.firstElementChild);
el.addEventListener("scroll", update);
update();
return () => {
observer.disconnect();
el.removeEventListener("scroll", update);
};
}, [tabs]);
useEffect(() => {
const el = ref.current;
if (!el) return;
@@ -229,14 +263,48 @@ export function TabStrip({
);
};
const overflow = scroll.left || scroll.right;
return (
<div
ref={ref}
className={`overflow-x-auto scrollbar-none ${
variant === "secondary" ? "border-t border-border bg-card" : ""
}`}
className={`flex min-w-0 items-center ${variant === "secondary" ? "border-t border-border bg-card" : ""}`}
>
<div className="flex min-w-max">{tabs.map(renderTab)}</div>
{overflow && (
<button
type="button"
aria-label={t("common.scrollTabsLeft")}
title={t("common.scrollTabsLeft")}
disabled={!scroll.left}
className="shrink-0 p-1 disabled:opacity-30"
onClick={() =>
ref.current?.scrollBy({
left: -ref.current.clientWidth * 0.75,
behavior: "smooth",
})
}
>
<ChevronLeft className="size-4" />
</button>
)}
<div ref={ref} className="min-w-0 flex-1 overflow-x-auto scrollbar-none">
<div className="flex min-w-max">{tabs.map(renderTab)}</div>
</div>
{overflow && (
<button
type="button"
aria-label={t("common.scrollTabsRight")}
title={t("common.scrollTabsRight")}
disabled={!scroll.right}
className="shrink-0 p-1 disabled:opacity-30"
onClick={() =>
ref.current?.scrollBy({
left: ref.current.clientWidth * 0.75,
behavior: "smooth",
})
}
>
<ChevronRight className="size-4" />
</button>
)}
</div>
);
}
+13 -6
View File
@@ -1,7 +1,7 @@
import { getErrorMessage } from "../lib/error-message.js";
import { enabledHostProtocols, useHostProtocols } from "./host-protocols";
import { useSshAuthProviders } from "@/hooks/useSshAuthProviders";
import { useEffect, useRef, useState } from "react";
import { useEffect, useMemo, useRef, useState } from "react";
import type { HostData } from "@/types/index";
import { useTranslation } from "react-i18next";
import {
@@ -53,6 +53,8 @@ import {
import type { SSHHostWithStatus } from "@/main-axios";
import type { Host, HostFolder, TabType } from "@/types/ui-types";
import { sortHostTree, type SortKey } from "@/sidebar/host-sort";
import { withLiveStatus } from "@/sidebar/live-host-status";
import { useServerStatus } from "@/lib/ServerStatusContext";
import { useHostSidebarPreferences } from "@/sidebar/tree/hooks/useHostSidebarPreferences";
import { useArrangeLock } from "@/sidebar/use-arrange-lock";
import type {
@@ -137,9 +139,7 @@ function hostPassesFilters(
if (filters.status.length > 0) {
const ok =
(filters.status.includes("online") && host.online) ||
(filters.status.includes("offline") &&
host.status !== "reachable" &&
!host.online) ||
(filters.status.includes("offline") && host.status === "offline") ||
(filters.status.includes("pinned") && !!host.pin);
if (!ok) return false;
}
@@ -219,6 +219,13 @@ export function HostsPanel({
active?: boolean;
}) {
const { t } = useTranslation();
const { statuses, getStatus } = useServerStatus();
const liveHostTree = useMemo(
() => (hostTree ? withLiveStatus(hostTree, getStatus) : undefined),
// statuses changes identity whenever a host's status changes
// eslint-disable-next-line react-hooks/exhaustive-deps
[hostTree, statuses, getStatus],
);
const hostSwitchPlugins = usePluginHostSections().filter(
(plugin) => !!plugin.contributes?.settings?.host?.enableKey,
);
@@ -1028,10 +1035,10 @@ export function HostsPanel({
<div className="flex flex-col flex-1 min-h-0">
<SidebarTree
children={
hostTree
liveHostTree
? groupHosts(
applyFilters(
sortHostTree(hostTree, sortKey, pinnedFirst),
sortHostTree(liveHostTree, sortKey, pinnedFirst),
filterState,
hostSwitches,
),
+36
View File
@@ -0,0 +1,36 @@
import type { Host, HostFolder } from "@/types/ui-types";
import type { StatusValue } from "@/lib/server-status-store";
import { isFolder } from "./tree/visible-rows";
/**
* Copies each host's live status onto the tree so sorting, filtering and
* grouping by status read the same value as the row's dot. A host with
* status checks off gets no status.
*/
export function withLiveStatus(
folder: HostFolder,
getStatus: (hostId: number) => StatusValue,
): HostFolder {
return {
...folder,
children: folder.children.map((child) => {
if (isFolder(child)) return withLiveStatus(child, getStatus);
const host = child as Host;
const status =
host.statusCheckEnabled === false
? undefined
: getStatus(Number(host.id));
if (host.status === status) return host;
return { ...host, status, online: status === "online" };
}),
};
}
/** The flat-list version of withLiveStatus. */
export function withLiveHostStatus(
hosts: Host[],
getStatus: (hostId: number) => StatusValue,
): Host[] {
return withLiveStatus({ name: "", children: hosts }, getStatus)
.children as Host[];
}
+9 -22
View File
@@ -15,23 +15,12 @@ import { HostItem, statusCheckEnabled } from "../HostItem/HostItem";
import { isFolder, folderHasMatch, collectAllHosts } from "../visible-rows";
import { FolderActions } from "./FolderActions";
export function folderHostCount(folder: HostFolder): {
total: number;
online: number;
} {
let total = 0,
online = 0;
export function folderHostCount(folder: HostFolder): number {
let total = 0;
for (const child of folder.children) {
if (isFolder(child)) {
const c = folderHostCount(child);
total += c.total;
online += c.online;
} else {
total++;
if (child.online) online++;
}
total += isFolder(child) ? folderHostCount(child) : 1;
}
return { total, online };
return total;
}
export function FolderItem({
@@ -140,13 +129,11 @@ export function FolderItem({
onReorderHoverChange?: (edge: "before" | "after" | null) => void;
}) {
const { t } = useTranslation();
const { getStatus, initialLoadComplete } = useServerStatus();
const { total } = folderHostCount(folder);
const online = initialLoadComplete
? collectAllHosts(folder.children).filter(
(h) => statusCheckEnabled(h) && getStatus(Number(h.id)) === "online",
).length
: folderHostCount(folder).online;
const { getStatus } = useServerStatus();
const total = folderHostCount(folder);
const online = collectAllHosts(folder.children).filter(
(h) => statusCheckEnabled(h) && getStatus(Number(h.id)) === "online",
).length;
const [dragOver, setDragOver] = useState(false);
const reorderEdge = isReorderHovered ? reorderHoverEdge : null;
+84 -78
View File
@@ -59,11 +59,7 @@ import {
useStatusColorScheme,
getStatusClasses,
} from "@/hooks/use-status-color-scheme";
import {
useHostStatus,
useHostStatusReason,
useServerStatusMeta,
} from "@/lib/ServerStatusContext";
import { useHostStatus } from "@/lib/ServerStatusContext";
import {
Tooltip,
TooltipContent,
@@ -101,16 +97,16 @@ export function statusCheckEnabled(host: Host): boolean {
export function buildStatusTooltip(
host: Host,
status: "online" | "reachable" | "offline",
status: "online" | "offline" | "unknown",
t: (key: string) => string = (k) => k,
): string {
if (!statusCheckEnabled(host)) return t("hosts.status.monitoringDisabled");
const statusLabel =
status === "online"
? t("hosts.status.available")
: status === "reachable"
? t("hosts.status.reachable")
: t("hosts.status.offline");
if (!statusCheckEnabled(host)) return t("hosts.status.monitoringDisabled");
? t("hosts.status.online")
: status === "offline"
? t("hosts.status.offline")
: t("hosts.status.checking");
const protocols: string[] = [];
if (host.enableSsh) protocols.push("SSH");
for (const protocol of enabledHostProtocols(host)) {
@@ -283,22 +279,11 @@ export function HostItem({
const pluginMenuItems = hostMenuItemsFor(useHostContextMenuItems(), host);
const splitTargets = useSplitTargets();
const statusScheme = useStatusColorScheme();
const { initialLoadComplete } = useServerStatusMeta();
const statusCheckOn = statusCheckEnabled(host);
const statusLoading = !initialLoadComplete && statusCheckOn;
// Per-host subscription — status polls only re-render rows that flipped.
const liveStatus = useHostStatus(Number(host.id), statusCheckOn);
const statusReason = useHostStatusReason(Number(host.id), statusCheckOn);
// Per-host subscription, so a poll only re-renders rows that flipped.
const availability =
liveStatus === "online" ||
liveStatus === "reachable" ||
liveStatus === "offline"
? liveStatus
: host.status === "reachable"
? "reachable"
: host.online
? "online"
: "offline";
useHostStatus(Number(host.id), statusCheckOn) ?? "offline";
const statusLoading = availability === "unknown";
const isOnline = availability === "online";
const previousAvailability = useRef(availability);
const [statusLocking, setStatusLocking] = useState(false);
@@ -1096,7 +1081,10 @@ export function HostItem({
className={`flex flex-col flex-1 min-w-0 ${tokens.rowPadding} ${isCompact ? "" : "gap-[3.5px]"}`}
>
{/* Name row */}
<div data-drag-label className="flex items-center gap-1.5 min-w-0">
<div
data-drag-label
className={`flex items-center gap-1.5 min-w-0 ${isCompact ? "min-h-[19px]" : ""}`}
>
{onToggleExpand && (
<button
type="button"
@@ -1133,9 +1121,7 @@ export function HostItem({
</span>
</TooltipTrigger>
<TooltipContent side="right">
{statusReason === "host_key_changed"
? `${t("hostKey.keyChangedWarning")}: ${t("hostKey.keyChangedDescription")}`
: buildStatusTooltip(host, availability, t)}
{buildStatusTooltip(host, availability, t)}
</TooltipContent>
</Tooltip>
</TooltipProvider>
@@ -1190,6 +1176,23 @@ export function HostItem({
{host.ip}
</span>
)}
{isCompact && !selectionMode && (
<div
data-testid="host-inline-actions"
className={`flex items-center gap-[2px] min-w-0 max-w-[60%] overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&>*]:shrink-0 ${alwaysShowTray || actionsOnly || trayOpenState || hoverTrayOpen ? "" : "hidden"}`}
>
{connectionButtons}
<div
className={
alwaysShowTray || trayOpenState || hoverTrayOpen
? "flex items-center gap-[2px]"
: "hidden"
}
>
{managementButtons}
</div>
</div>
)}
{!selectionMode && (shouldUseClickTray || actionsOnly) && (
<button
title={
@@ -1239,7 +1242,8 @@ export function HostItem({
)}
{/* Connection buttons: permanent in "always"/"actionsOnly" modes, or shown once the chevron opens the tray in click mode */}
{!selectionMode &&
{!isCompact &&
!selectionMode &&
(alwaysShowTray ||
actionsOnly ||
(shouldUseClickTray && isTrayOpen)) && (
@@ -1251,61 +1255,63 @@ export function HostItem({
)}
{/* Action tray — slides open on hover (default) or via chevron in click-tray mode */}
<div className={trayVisibilityClass}>
{tokens.showResourceRow &&
isOnline &&
((host.cpu != null && host.cpu > 0) ||
(host.ram != null && host.ram > 0)) && (
<div className="flex items-center gap-[10.5px] pt-[5.25px]">
{host.cpu != null && host.cpu > 0 && (
<div className="flex items-center gap-1.5">
<Cpu className="size-2.5 shrink-0 text-muted-foreground/40" />
<div className="w-9 h-1 bg-muted-foreground/15 rounded-full overflow-hidden">
<div
className={`motion-meter h-full rounded-full ${host.cpu > 80 ? "bg-red-400" : host.cpu > 50 ? "bg-yellow-400" : "bg-accent-brand"}`}
style={{ width: `${host.cpu}%` }}
/>
{!isCompact && (
<div className={trayVisibilityClass}>
{tokens.showResourceRow &&
isOnline &&
((host.cpu != null && host.cpu > 0) ||
(host.ram != null && host.ram > 0)) && (
<div className="flex items-center gap-[10.5px] pt-[5.25px]">
{host.cpu != null && host.cpu > 0 && (
<div className="flex items-center gap-1.5">
<Cpu className="size-2.5 shrink-0 text-muted-foreground/40" />
<div className="w-9 h-1 bg-muted-foreground/15 rounded-full overflow-hidden">
<div
className={`motion-meter h-full rounded-full ${host.cpu > 80 ? "bg-red-400" : host.cpu > 50 ? "bg-yellow-400" : "bg-accent-brand"}`}
style={{ width: `${host.cpu}%` }}
/>
</div>
<span className="text-[9px] tabular-nums text-muted-foreground/50">
{host.cpu}%
</span>
</div>
<span className="text-[9px] tabular-nums text-muted-foreground/50">
{host.cpu}%
</span>
</div>
)}
{host.ram != null && host.ram > 0 && (
<div className="flex items-center gap-1.5">
<MemoryStick className="size-2.5 shrink-0 text-muted-foreground/40" />
<div className="w-9 h-1 bg-muted-foreground/15 rounded-full overflow-hidden">
<div
className={`motion-meter h-full rounded-full ${host.ram > 80 ? "bg-red-400" : host.ram > 60 ? "bg-yellow-400" : "bg-accent-brand/60"}`}
style={{ width: `${host.ram}%` }}
/>
)}
{host.ram != null && host.ram > 0 && (
<div className="flex items-center gap-1.5">
<MemoryStick className="size-2.5 shrink-0 text-muted-foreground/40" />
<div className="w-9 h-1 bg-muted-foreground/15 rounded-full overflow-hidden">
<div
className={`motion-meter h-full rounded-full ${host.ram > 80 ? "bg-red-400" : host.ram > 60 ? "bg-yellow-400" : "bg-accent-brand/60"}`}
style={{ width: `${host.ram}%` }}
/>
</div>
<span className="text-[9px] tabular-nums text-muted-foreground/50">
{host.ram}%
</span>
</div>
<span className="text-[9px] tabular-nums text-muted-foreground/50">
{host.ram}%
</span>
</div>
)}
</div>
)}
)}
</div>
)}
<div
className={`flex flex-col gap-0.5 ${alwaysShowTray || actionsOnly || shouldUseClickTray ? "" : "pt-1.5"}`}
>
{/* Connection buttons — only shown here when not already shown above */}
{!alwaysShowTray && !actionsOnly && !shouldUseClickTray && (
<div className="flex items-center flex-wrap gap-[1.75px]">
{connectionButtons}
</div>
)}
{/* Management buttons row */}
<div
className={`flex items-center gap-[1.75px] border-t border-border/30 ${alwaysShowTray || actionsOnly || shouldUseClickTray ? "pt-[5.25px]" : "pt-[3.5px] mt-[1.75px]"}`}
className={`flex flex-col gap-0.5 ${alwaysShowTray || actionsOnly || shouldUseClickTray ? "" : "pt-1.5"}`}
>
{managementButtons}
{/* Connection buttons, only shown here when not already shown above */}
{!alwaysShowTray && !actionsOnly && !shouldUseClickTray && (
<div className="flex items-center flex-wrap gap-[1.75px]">
{connectionButtons}
</div>
)}
{/* Management buttons row */}
<div
className={`flex items-center gap-[1.75px] border-t border-border/30 ${alwaysShowTray || actionsOnly || shouldUseClickTray ? "pt-[5.25px]" : "pt-[3.5px] mt-[1.75px]"}`}
>
{managementButtons}
</div>
</div>
</div>
</div>
)}
{authOverrideProtocol && (
<HostAuthOverrideModal
open
+2 -1
View File
@@ -502,7 +502,7 @@ export function SidebarTree({
function handleDeleteFolder(folder: HostFolder) {
const folderPath = folder.path ?? folder.name;
const { total } = folderHostCount(folder);
const total = folderHostCount(folder);
setConfirmDialog({
message: t("hosts.deleteFolderConfirm", {
name: folder.name,
@@ -754,6 +754,7 @@ export function SidebarTree({
const row = visibleRows[index];
if (!row) return FOLDER_ROW_HEIGHT;
if (isFolder(row.item)) return FOLDER_ROW_HEIGHT;
if (isCompactDensity) return 29;
const tagExtra = showTags && row.item.tags?.length ? TAG_ROW_EXTRA : 0;
// The resource bars only render for an online host that reported CPU/RAM.
// Reserving their height unconditionally left a gap under every offline