+
+ Profile · optional +
+ +
+
+
+
+
+
+ + Leave empty to render the username itself. Up to 64 characters. +
+
+
+
+
+ {avatarPreviewUrl ? (
+ // eslint-disable-next-line @next/next/no-img-element
+ 
+ ) : (
+
+ {(displayName || username || "U").trim().charAt(0).toUpperCase() || "U"}
+
+ )}
+
+
+ {
+ const file = e.target.files?.[0] || null
+ handleAvatarChange(file)
+ if (fileInputRef.current) fileInputRef.current.value = ""
+ }}
+ />
+
+
+
+ {avatarFile && (
+
+ )}
+
+ + PNG, JPEG, WebP or GIF · up to 2 MB · pre-crop square for best results. +
+
diff --git a/AppImage/components/avatar-menu.tsx b/AppImage/components/avatar-menu.tsx
new file mode 100644
index 00000000..7efdffe5
--- /dev/null
+++ b/AppImage/components/avatar-menu.tsx
@@ -0,0 +1,281 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { User, Shield, LogOut } from "lucide-react"
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from "./ui/dropdown-menu"
+import { fetchApi, getApiUrl, getAuthToken } from "../lib/api-config"
+
+interface AuthStatus {
+ auth_enabled?: boolean
+ username?: string | null
+}
+
+interface ProfileData {
+ success: boolean
+ username?: string | null
+ display_name?: string | null
+ has_avatar?: boolean
+ avatar_mtime?: number | null
+}
+
+interface AvatarMenuProps {
+ /** Size of the avatar circle in the header trigger. */
+ size?: "md" | "lg"
+ /**
+ * Callback used by the Security menu item. The Monitor renders its
+ * Settings/Security panels inside the same dashboard route, not on
+ * a separate URL, so navigation is handled by the parent that knows
+ * how to switch tabs. Optional — when omitted the menu item is hidden.
+ */
+ onOpenSecurity?: () => void
+ /**
+ * Callback for "View profile". Same rationale: the parent decides how
+ * to route there (modal, page, tab switch). Until Fase 2 lands the
+ * caller typically passes an alert/toast that the page is coming.
+ */
+ onOpenProfile?: () => void
+}
+
+/**
+ * AvatarMenu — user/account dropdown for the header.
+ *
+ * Self-fetches the current auth status to derive the username and the
+ * initial that fills the avatar circle. Stays silent (renders nothing)
+ * when authentication is disabled on this install — no point showing
+ * an account menu for a "Sign out" that doesn't apply.
+ *
+ * Sign out clears the token from localStorage and reloads, mirroring
+ * the existing `handleLogout` in `security.tsx`. That keeps a single
+ * source of truth for the logout flow until Fase 2 introduces a
+ * proper /api/auth/logout that revokes the JWT server-side too.
+ */
+export function AvatarMenu({ size = "lg", onOpenSecurity, onOpenProfile }: AvatarMenuProps) {
+ // IMPORTANT — all hooks must run unconditionally on every render. The
+ // previous version short-circuited with `if (!auth_enabled) return null`
+ // BEFORE the avatar blob hooks, so the hook count changed between
+ // renders the moment auth status loaded → React error #310 ("rendered
+ // more hooks than during the previous render"). All `useState` and
+ // `useEffect` calls now live above any early return; the null branch
+ // is at the very end after the hooks.
+ const [status, setStatus] = useState(null)
+ const [profile, setProfile] = useState(null)
+ const [open, setOpen] = useState(false)
+ const [avatarBlobUrl, setAvatarBlobUrl] = useState(null)
+
+ // Load both auth_status (to decide whether to render at all) and the
+ // profile (to render display_name + avatar). Profile is fetched only
+ // when auth is enabled — saves one roundtrip on installs without
+ // auth where the menu won't show anyway.
+ useEffect(() => {
+ let cancelled = false
+ fetchApi("/api/auth/status")
+ .then(data => {
+ if (cancelled) return
+ setStatus(data)
+ if (data?.auth_enabled && data?.username) {
+ fetchApi("/api/auth/profile")
+ .then(p => {
+ if (!cancelled) setProfile(p)
+ })
+ .catch(() => {
+ // Profile fetch is best-effort. Falls back to username + initials.
+ })
+ }
+ })
+ .catch(() => {
+ if (!cancelled) setStatus(null)
+ })
+ // Reload status + profile when the user updates the profile from
+ // the /profile page OR completes first-time auth setup. Refreshing
+ // status is what flips the menu visible after setup (when the
+ // initial mount saw auth_enabled=false); refreshing profile is
+ // what makes a new avatar/display name appear without a full
+ // browser refresh.
+ const handler = () => {
+ fetchApi("/api/auth/status")
+ .then(s => {
+ if (cancelled) return
+ setStatus(s)
+ if (s?.auth_enabled && s?.username) {
+ fetchApi("/api/auth/profile")
+ .then(p => {
+ if (!cancelled) setProfile(p)
+ })
+ .catch(() => {})
+ }
+ })
+ .catch(() => {})
+ }
+ if (typeof window !== "undefined") {
+ window.addEventListener("proxmenux:profile-changed", handler)
+ }
+ return () => {
+ cancelled = true
+ if (typeof window !== "undefined") {
+ window.removeEventListener("proxmenux:profile-changed", handler)
+ }
+ }
+ }, [])
+
+ // Avatar fetch — the endpoint requires the Bearer header, which
+ // 
can't send, so we fetch as a blob and convert it to a
+ // local object URL for rendering. The blob URL is revoked on cleanup
+ // and on every refetch to avoid leaking memory.
+ useEffect(() => {
+ let cancelled = false
+ let currentBlobUrl: string | null = null
+ if (profile?.has_avatar) {
+ const token = getAuthToken()
+ const url = `${getApiUrl("/api/auth/profile/avatar")}?v=${profile.avatar_mtime || ""}`
+ fetch(url, { headers: token ? { Authorization: `Bearer ${token}` } : {} })
+ .then(r => (r.ok ? r.blob() : null))
+ .then(blob => {
+ if (cancelled || !blob) return
+ currentBlobUrl = URL.createObjectURL(blob)
+ setAvatarBlobUrl(currentBlobUrl)
+ })
+ .catch(() => {
+ if (!cancelled) setAvatarBlobUrl(null)
+ })
+ } else {
+ setAvatarBlobUrl(null)
+ }
+ return () => {
+ cancelled = true
+ if (currentBlobUrl) URL.revokeObjectURL(currentBlobUrl)
+ }
+ }, [profile?.has_avatar, profile?.avatar_mtime])
+
+ // ── Hooks finished. Safe to early-return now. ──
+ // Hide the avatar entirely when auth isn't enabled on this install —
+ // there's no user identity to surface and no Sign out to offer.
+ if (!status?.auth_enabled || !status?.username) return null
+
+ const username = status.username
+ const displayName = profile?.display_name || username
+ const initial = displayName.trim().charAt(0).toUpperCase() || "U"
+
+ const handleSignOut = () => {
+ try {
+ localStorage.removeItem("proxmenux-auth-token")
+ localStorage.removeItem("proxmenux-auth-setup-complete")
+ } catch {
+ // localStorage may be unavailable (private mode); fall through.
+ }
+ window.location.reload()
+ }
+
+ // Avatar size in the header trigger. The trigger has no chevron now —
+ // removing it freed enough horizontal space to bump the avatar a
+ // notch up (40 → 44 / 32 → 36) without nudging the Refresh / Theme
+ // buttons sitting to its left.
+ const avatarSize = size === "lg" ? "w-11 h-11 text-lg" : "w-9 h-9 text-sm"
+
+ return (
+ <>
+ {/* Backdrop overlay — dim only (no blur). Mounted while the
+ dropdown is open. `bg-black/40` dims the page enough to focus
+ attention on the dropdown without distorting the content
+ behind, which testers found annoying when full backdrop blur
+ was used (especially on wider desktop viewports). `z-40`
+ places it above the dashboard content but below the dropdown
+ portal (`DropdownMenuContent` lands on z-[60]) and below the
+ header (which stays on z-50 so the avatar trigger remains
+ clickable). Clicking the backdrop closes the menu — the
+ explicit `onClick` mirrors Radix's outside-click handler. */}
+ {open && (
+
@@ -681,25 +705,12 @@ export function HealthStatusModal({ open, onOpenChange, getApiUrl }: HealthStatu
+ handleAcknowledge(`category_${key}_unknown`, hours)
+ }
+ busy={dismissingKey === `category_${key}_unknown`}
+ />
)}
)}
@@ -840,3 +851,56 @@ export function HealthStatusModal({ open, onOpenChange, getApiUrl }: HealthStatu
)
}
+
+// Small split button: the visible click opens a 3-option menu so the user
+// chooses how long this specific alert stays silenced. ``-1`` is the
+// permanent sentinel — backend stores it as `suppression_hours = -1` and
+// the alert can only be brought back from Settings → Active Suppressions.
+function DismissDropdown({
+ onSelect,
+ busy,
+}: {
+ onSelect: (suppressionHours: number) => void
+ busy: boolean
+}) {
+ return (
+ {reason}
{/* Show dismiss button for UNKNOWN status at category level when dismissable */} {status === "UNKNOWN" && categoryData?.dismissable && !hasChecks && ( - +
+
+ {label}
+
+
+ )
+ }
+
+ return (
+
+
+ setPending((p) => ({ ...p, [key]: e.target.value }))
+ }
+ className={`w-20 h-7 text-xs text-right tabular-nums border ${fieldClass} ${
+ !editMode ? "disabled:opacity-100 disabled:cursor-default" : ""
+ }`}
+ />
+ {leaf.unit}
+
+
+
+
+ Health Monitor Thresholds
+
+ {!loading && (
+
+ {savedFlash && (
+
+
+ )}
+
+
+ ) : !tree ? (
+ Failed to load thresholds.
+ ) : (
+
+ {error && (
+
+ {SECTIONS.map((section) => {
+ const Icon = section.icon
+ return (
+
+
+ )}
+
+
+ )}
+
+ {/*
+ Masonry-style flow via CSS columns: cards keep their natural
+ height (CPU = 2 rows, Disk temperature = 8 rows) and the
+ browser packs them top-to-bottom into 1/2/3 columns based on
+ viewport. `break-inside-avoid` keeps each card whole.
+ Mobile ({error}
+
+
+ )
+ })}
+
+
+ {section.description && (
+
+
+ {!editMode && (
+
+ )}
+ {section.title}
++ {section.description} +
+ )} +
+ {section.rowGroups
+ ? section.rowGroups.map((group) => (
+
+
+
+ ))
+ : section.fields.map((f) => renderField(f.path, f.label))}
+
+ {group.label}
+
+ {renderField([section.id, group.subKey, "warning"], "Warning")}
+ {renderField([section.id, group.subKey, "critical"], "Critical")}
+ ProxMenux Monitor v1.2.0
+ProxMenux Monitor v1.2.2
) diff --git a/AppImage/components/lxc-terminal-modal.tsx b/AppImage/components/lxc-terminal-modal.tsx index 7c2c387f..bbfcbb96 100644 --- a/AppImage/components/lxc-terminal-modal.tsx +++ b/AppImage/components/lxc-terminal-modal.tsx @@ -19,7 +19,10 @@ import { Terminal, Trash2, X, + Copy, + Clipboard, } from "lucide-react" +import { copyTerminalSelection, pasteFromClipboard } from "@/lib/terminal-clipboard" import { DropdownMenu, DropdownMenuContent, @@ -33,6 +36,7 @@ import { Input } from "@/components/ui/input" import { Dialog as SearchDialog, DialogContent as SearchDialogContent, DialogTitle as SearchDialogTitle } from "@/components/ui/dialog" import "xterm/css/xterm.css" import { API_PORT, fetchApi } from "@/lib/api-config" +import { getTicketedWsUrl } from "@/lib/terminal-ws" interface LxcTerminalModalProps { open: boolean @@ -161,9 +165,16 @@ export function LxcTerminalModal({ useEffect(() => { if (!isOpen) return + // `cancelled` short-circuits the async init if the modal closes + // before the dynamic xterm import resolves. Without this, we'd + // construct a Terminal instance, attach it to a now-stale ref, and + // open a WebSocket that nobody listens to. Audit Tier 6 — useEffect + // con `import("xterm")` sin cancelación. + let cancelled = false + // Small delay to ensure Dialog content is rendered const initTimeout = setTimeout(() => { - if (!terminalContainerRef.current) return + if (cancelled || !terminalContainerRef.current) return initTerminal() }, 100) @@ -172,12 +183,13 @@ export function LxcTerminalModal({ import("xterm").then((mod) => mod.Terminal), import("xterm-addon-fit").then((mod) => mod.FitAddon), ]) + if (cancelled) return const fontSize = window.innerWidth < 768 ? 12 : 16 const term = new TerminalClass({ rendererType: "dom", - fontFamily: '"Courier", "Courier New", "Liberation Mono", "DejaVu Sans Mono", monospace', + fontFamily: '"MesloLGS NF", "FiraCode Nerd Font", "JetBrainsMono Nerd Font", "Hack Nerd Font", "Symbols Nerd Font", "Courier", "Courier New", "Liberation Mono", "DejaVu Sans Mono", monospace', fontSize: fontSize, lineHeight: 1, cursorBlink: true, @@ -221,9 +233,11 @@ export function LxcTerminalModal({ termRef.current = term fitAddonRef.current = fitAddon - // Connect WebSocket to host terminal + // Connect WebSocket to host terminal. We append a single-use ticket + // (`?ticket=...`) which the backend consumes on handshake — see + // lib/terminal-ws.ts and AppImage/scripts/flask_terminal_routes.py. const wsUrl = getWebSocketUrl() - const ws = new WebSocket(wsUrl) + const ws = new WebSocket(await getTicketedWsUrl(wsUrl)) wsRef.current = ws // Reset state for new connection @@ -252,11 +266,22 @@ export function LxcTerminalModal({ rows: term.rows, })) - // Auto-execute pct enter after connection is ready + // Auto-execute pct enter after connection is ready. + // The string is sent verbatim to the bash PTY, so a non-numeric + // `vmid` would land as shell input (e.g. `pct enter ; rm -rf /`). + // The prop is typed `number` but JSON / URL query injections can + // sneak strings in; validate as a defensive redundancy. Audit + // residual #lxc-terminal-vmid-injection. setTimeout(() => { - if (ws.readyState === WebSocket.OPEN) { - ws.send(`pct enter ${vmid}\r`) + if (ws.readyState !== WebSocket.OPEN) return + // Coerce + verify: must be a positive integer that round-trips + // through Number without losing fidelity. + const id = Number(vmid) + if (!Number.isInteger(id) || id <= 0 || id >= 1_000_000) { + term.writeln('\r\n\x1b[31m[ERROR] Invalid VMID — refusing to execute pct enter\x1b[0m') + return } + ws.send(`pct enter ${id}\r`) }, 300) } @@ -302,13 +327,17 @@ export function LxcTerminalModal({ if (pctEnterMatch) { const afterPctEnter = cleanBuffer.substring(cleanBuffer.indexOf(pctEnterMatch[0]) + pctEnterMatch[0].length) - // Extract the host name from the prompt BEFORE pct enter (e.g., "root@amd") - const hostPromptMatch = cleanBuffer.match(/@([a-zA-Z0-9_-]+).*pct enter/) + // Extract the host name from the prompt BEFORE pct enter (e.g., "root@amd"). + // Charset widened to accept dotted FQDNs (`proxmox.lan`) and unicode + // letters/numbers (host names like `próxmox` or non-Latin scripts). + // The previous `[a-zA-Z0-9_-]` truncated the hostname and the + // "are we inside the LXC?" comparison then misfired. + const hostPromptMatch = cleanBuffer.match(/@([\p{L}\p{N}._-]+).*pct enter/u) const hostName = hostPromptMatch ? hostPromptMatch[1] : null - + // Look for a new prompt after pct enter that ends with # or $ // This works for both bash (user@host:~#) and ash/Alpine ([user@host /]#) - const promptMatch = afterPctEnter.match(/[@\[]([a-zA-Z0-9_-]+)[^\r\n]*[#$]\s*$/) + const promptMatch = afterPctEnter.match(/[@\[]([\p{L}\p{N}._-]+)[^\r\n]*[#$]\s*$/u) if (promptMatch) { const lxcHostname = promptMatch[1] @@ -354,6 +383,7 @@ export function LxcTerminalModal({ } return () => { + cancelled = true clearTimeout(initTimeout) if (pingIntervalRef.current) { clearInterval(pingIntervalRef.current) @@ -435,6 +465,14 @@ export function LxcTerminalModal({ const sendEnter = useCallback(() => sendKey("\r"), [sendKey]) const sendCtrlC = useCallback(() => sendKey("\x03"), [sendKey]) // Ctrl+C + // Mobile clipboard helpers — see lib/terminal-clipboard.ts for the rationale. + const handleCopy = useCallback(async () => { + await copyTerminalSelection(termRef.current) + }, []) + const handlePaste = useCallback(async () => { + await pasteFromClipboard(sendKey) + }, [sendKey]) + // Search effect - debounced search with cheat.sh useEffect(() => { const searchCheatSh = async (query: string) => { @@ -634,7 +672,7 @@ export function LxcTerminalModal({
+ {/* Title row — flex-wrap so on narrow screens the badge can drop
+ under the title without dragging the icon along with it. The
+ icon stays on the same baseline as the title text on every
+ breakpoint thanks to `items-center` + leading-tight title. */}
+
+
+ LXC Update Detection
+ {enabled ? (
+
+ Active
+
+ ) : (
+
+ Disabled
+
+ )}
+
+
+ {saved && (
+
+
+ apt list --upgradable / apk list -u) and surface them on the dashboard. The
+ corresponding notification toggle in Notifications → Services appears only while detection
+ is enabled.
+
+
+
+ {lastPurged !== null && lastPurged > 0 && (
+
+
+
+
+
+ )}
+
+ {error && editMode && (
+ + {lastPurged} LXC entries removed from the registry. Re-enabling detection will repopulate them on the + next scan cycle. +
+
+
+ )}
+ {error}
+
diff --git a/AppImage/components/notification-settings.tsx b/AppImage/components/notification-settings.tsx
index c750b4bc..02816833 100644
--- a/AppImage/components/notification-settings.tsx
+++ b/AppImage/components/notification-settings.tsx
@@ -16,7 +16,8 @@ import {
AlertTriangle, Info, Settings2, Zap, Eye, EyeOff,
Trash2, ChevronDown, ChevronUp, ChevronRight, TestTube2, Mail, Webhook,
Copy, Server, Shield, ExternalLink, RefreshCw, Download, Upload,
- Cloud, Brain, Globe, MessageSquareText, Sparkles, Pencil, Save, RotateCcw, Lightbulb
+ Cloud, Brain, Globe, MessageSquareText, Sparkles, Pencil, Save, RotateCcw, Lightbulb,
+ Moon, Newspaper
} from "lucide-react"
interface ChannelConfig {
@@ -37,6 +38,13 @@ interface ChannelConfig {
from_address?: string
to_addresses?: string
subject_prefix?: string
+ // Quiet hours: skip below-CRITICAL events between [start, end) local time
+ quiet_enabled?: boolean
+ quiet_start?: string // "HH:MM"
+ quiet_end?: string // "HH:MM"
+ // Daily digest: buffer INFO events and ship one summary at digest_time
+ digest_enabled?: boolean
+ digest_time?: string // "HH:MM"
}
interface EventTypeInfo {
@@ -97,6 +105,44 @@ interface HistoryEntry {
error_message: string | null
}
+// Validation helpers for webhook/URL fields. The server still does the
+// authoritative validation (see notification_manager.validate_config). These
+// are defense-in-depth + immediate UX feedback so users notice typos / pasted
+// internal endpoints before they hit Save.
+const DISCORD_WEBHOOK_RE = /^https:\/\/(discord(app)?\.com|ptb\.discord\.com|canary\.discord\.com)\/api\/webhooks\/\d+\/[\w-]+$/
+
+function validateDiscordWebhook(url: string): { error?: string } {
+ if (!url) return {}
+ if (!DISCORD_WEBHOOK_RE.test(url.trim())) {
+ return { error: "Must be a Discord webhook URL (https://discord.com/api/webhooks//)" }
+ }
+ return {}
+}
+
+function validateGotifyUrl(url: string): { error?: string; warning?: string } {
+ if (!url) return {}
+ let parsed: URL
+ try {
+ parsed = new URL(url.trim())
+ } catch {
+ return { error: "Not a valid URL" }
+ }
+ if (parsed.protocol !== "http:" && parsed.protocol !== "https:") {
+ return { error: `Unsupported scheme "${parsed.protocol}" — only http(s) is allowed` }
+ }
+ // Block the obvious SSRF target: the local PVE API. RFC1918 ranges remain
+ // allowed since self-hosted Gotify on a LAN is a normal deployment.
+ const host = parsed.hostname.toLowerCase()
+ const port = parsed.port
+ if ((host === "localhost" || host === "127.0.0.1" || host === "::1") && (port === "8006" || port === "8007")) {
+ return { error: "Cannot point at the local PVE API (localhost:8006/8007)" }
+ }
+ if (host === "169.254.169.254") {
+ return { error: "Link-local metadata IP is not a valid Gotify endpoint" }
+ }
+ return {}
+}
+
const EVENT_CATEGORIES = [
{ key: "vm_ct", label: "VM / CT", desc: "Start, stop, crash, migration" },
{ key: "backup", label: "Backups", desc: "Backup start, complete, fail" },
@@ -111,7 +157,7 @@ const EVENT_CATEGORIES = [
{ key: "other", label: "Other", desc: "Uncategorized notifications" },
]
-const CHANNEL_TYPES = ["telegram", "gotify", "discord", "email"] as const
+const CHANNEL_TYPES = ["telegram", "gotify", "discord", "email", "apprise"] as const
const AI_PROVIDERS = [
{
@@ -216,6 +262,7 @@ const DEFAULT_CONFIG: NotificationConfig = {
gotify: { enabled: false },
discord: { enabled: false },
email: { enabled: false },
+ apprise: { enabled: false },
},
event_categories: {
vm_ct: true, backup: true, resources: true, storage: true,
@@ -229,6 +276,7 @@ const DEFAULT_CONFIG: NotificationConfig = {
gotify: { categories: {}, events: {} },
discord: { categories: {}, events: {} },
email: { categories: {}, events: {} },
+ apprise: { categories: {}, events: {} },
},
ai_enabled: false,
ai_provider: "groq",
@@ -259,6 +307,7 @@ const DEFAULT_CONFIG: NotificationConfig = {
gotify: "brief",
discord: "brief",
email: "detailed",
+ apprise: "brief",
},
hostname: "",
webhook_secret: "",
@@ -276,6 +325,11 @@ export function NotificationSettings() {
const [loading, setLoading] = useState(true)
const [saving, setSaving] = useState(false)
const [saved, setSaved] = useState(false)
+ // Save errors used to be silently swallowed — the user thought their
+ // tokens / API keys were persisted when in fact the POST had failed.
+ // Surface the failure as a banner so the user can retry. Audit residual
+ // #notification-settings-handleSave-silent-fail.
+ const [saveError, setSaveError] = useState(null)
const [testing, setTesting] = useState(null)
const [testResult, setTestResult] = useState<{ channel: string; success: boolean; message: string } | null>(null)
const [showHistory, setShowHistory] = useState(false)
@@ -300,6 +354,12 @@ export function NotificationSettings() {
error: string
}>({ status: "idle", fallback_commands: [], error: "" })
const [systemHostname, setSystemHostname] = useState("")
+ // Mirrors the dedicated toggle from Settings → LXC Update Detection.
+ // When false, the per-event toggle for `lxc_updates_available` is hidden
+ // from every channel's category list (its DB preference is preserved).
+ // Updated on mount via fetch and on the fly via a CustomEvent dispatched
+ // by (true)
// Load system hostname for display name placeholder
const loadSystemHostname = useCallback(async () => {
@@ -382,6 +442,43 @@ export function NotificationSettings() {
loadSystemHostname()
}, [loadConfig, loadStatus, loadSystemHostname])
+ // Track the LXC update-detection toggle so we can conditionally hide
+ // the `lxc_updates_available` per-event toggle inside every channel's
+ // category list. Fetched once on mount; live updates ride on a custom
+ // event dispatched by
{renderChannelCategories("telegram")}
+ {renderQuietHours("telegram")}
+ {renderDailyDigest("telegram")}
{/* Send Test */}
+
+ )
+ }
+
+ const renderDailyDigest = (chName: string) => {
+ const ch = config.channels[chName as keyof typeof config.channels] as ChannelConfig | undefined
+ const enabled = !!ch?.digest_enabled
+ const time = formatHHMM(ch?.digest_time, "09:00")
+ let nextLabel = ""
+ if (enabled) {
+ const now = new Date()
+ const cur = now.getHours() * 60 + now.getMinutes()
+ const [hh, mm] = time.split(":").map((x) => parseInt(x, 10))
+ const target = hh * 60 + mm
+ const minsAway = target > cur ? target - cur : 24 * 60 - cur + target
+ const h = Math.floor(minsAway / 60)
+ const m = minsAway % 60
+ nextLabel = `Next digest in ${h}h ${m}m (at ${time}).`
+ }
+ return (
+
+
+ {enabled && (
+ <>
+ {/* Inline label + intrinsic-width inputs. The previous
+ `grid-cols-2 + full-width inputs` rendered weirdly on
+ iOS Safari (the native time picker centered "22:00"
+ inside a 200-px box with huge empty margins). flex +
+ w-24/w-28 keeps the input tight to the HH:MM text on
+ every viewport and the touch target stays comfortable. */}
+
+
+
+
+ + During this window only CRITICAL events reach this channel. +
+
+
+
+
+ updateChannel(chName, "quiet_start", e.target.value)}
+ disabled={!editMode}
+ className="h-9 w-28 text-sm font-mono"
+ />
+
+
+
+ updateChannel(chName, "quiet_end", e.target.value)}
+ disabled={!editMode}
+ className="h-9 w-28 text-sm font-mono"
+ />
+
+ + {sameTime + ? "Set a different start and end time to activate." + : live + ? `Active right now — only CRITICAL events pass until ${end}.` + : `Inactive right now — will start at ${start}.`} +
+ + )} +
+
+ )
+ }
+
/** Reusable 10+1 category block rendered inside each channel tab. */
const renderChannelCategories = (chName: string) => {
const overrides = config.channel_overrides?.[chName] || { categories: {}, events: {} }
@@ -426,7 +680,16 @@ export function NotificationSettings() {
{EVENT_CATEGORIES.filter(cat => cat.key !== "other").map(cat => {
const isEnabled = overrides.categories[cat.key] ?? true
const isExpanded = expandedCategories.has(`${chName}.${cat.key}`)
- const eventsForGroup = evtByGroup[cat.key] || []
+ // Hide the LXC update toggle when the user has disabled the
+ // dedicated detection setting upstream. The backend still
+ // returns the event type in the catalog (so its stored
+ // preference survives), but we filter it out of every
+ // channel's UI list so the operator never sees a notification
+ // toggle whose underlying scan is paused.
+ const rawEventsForGroup = evtByGroup[cat.key] || []
+ const eventsForGroup = lxcDetectionEnabled
+ ? rawEventsForGroup
+ : rawEventsForGroup.filter(e => e.type !== "lxc_updates_available")
const enabledCount = eventsForGroup.filter(
e => (overrides.events?.[e.type] ?? e.default_enabled)
).length
@@ -621,11 +884,12 @@ export function NotificationSettings() {
const handleSave = async () => {
setSaving(true)
+ setSaveError(null)
try {
// If notifications are being disabled, clean up PVE webhook first
const wasEnabled = originalConfig.enabled
const isNowDisabled = !config.enabled
-
+
if (wasEnabled && isNowDisabled) {
try {
await fetchApi("/api/notifications/proxmox/cleanup-webhook", { method: "POST" })
@@ -633,7 +897,7 @@ export function NotificationSettings() {
// Non-fatal: webhook cleanup failed but we still save settings
}
}
-
+
const payload = flattenConfig(config)
await fetchApi("/api/notifications/settings", {
method: "POST",
@@ -647,6 +911,8 @@ export function NotificationSettings() {
loadStatus()
} catch (err) {
console.error("Failed to save notification settings:", err)
+ const msg = err instanceof Error ? err.message : "Failed to save notification settings"
+ setSaveError(msg)
} finally {
setSaving(false)
}
@@ -977,6 +1243,14 @@ export function NotificationSettings() {
Saved
)}
+ {saveError && (
+
+ Save failed: {saveError}
+
+ )}
{editMode ? (
<>
+
+ {enabled && (
+ <>
+
+
+
+
+ + All INFO events (backups OK, updates available, etc.) accumulate during the day and arrive once at this time as a single summary. CRITICAL and WARNING are never delayed. +
+
+
+ updateChannel(chName, "digest_time", e.target.value)}
+ disabled={!editMode}
+ className="h-9 w-28 text-sm font-mono"
+ />
+
+ {nextLabel}
+ + )} +
@@ -1266,6 +1551,8 @@ export function NotificationSettings() {
{renderChannelCategories("gotify")}
+ {renderQuietHours("gotify")}
+ {renderDailyDigest("gotify")}
{/* Send Test */}
:
+ {(() => {
+ const v = validateDiscordWebhook(config.channels.discord?.webhook_url || "")
+ return v.error ? {v.error}
: null + })()}
@@ -1342,6 +1633,8 @@ export function NotificationSettings() {
{renderChannelCategories("discord")}
+ {renderQuietHours("discord")}
+ {renderDailyDigest("discord")}
{/* Send Test */}
)}
+
+ {/* Apprise — issue #207. Single URL talks to ~80
+ notification services. The operator pastes one
+ `tgram://`, `discord://`, `ntfy://`, `matrix://`,
+ `pushover://` etc. URL and the AppriseChannel
+ backend handles the transport. Mirrors the same
+ Enable toggle + Test button pattern as the other
+ channels. */}
+
+
{/* Test Result */}
@@ -1542,14 +1937,23 @@ export function NotificationSettings() {
{currentInteraction.title}
+
+ {config.channels.apprise?.enabled && (
+ <>
+
+
+
+ +URL formats
+
+
+
+
+
+
+ {renderChannelCategories("apprise")}
+ {renderQuietHours("apprise")}
+ {renderDailyDigest("apprise")}
+
+ updateChannel("apprise", "url", e.target.value)}
+ disabled={!editMode}
+ />
+
+
+ {/* The examples row was overflowing on mobile because
+ every `` token is atomic — the whole line
+ would scroll horizontally on narrow viewports.
+ `break-all` on the wrapper lets the layout break
+ mid-token if the viewport is really tight; on
+ wider screens the natural commas/spaces still
+ control wrapping. */}
+
+ A single URL that Apprise routes to the right service. Examples:
+ tgram://,
+ discord://,
+ slack://,
+ ntfy://,
+ matrix://,
+ pushover://,
+ mailto://… See the
+ {" "}
+
+ full list
+ .
+
+
+
+
+
+ )}
+
diff --git a/AppImage/components/profile.tsx b/AppImage/components/profile.tsx
new file mode 100644
index 00000000..1d637f4f
--- /dev/null
+++ b/AppImage/components/profile.tsx
@@ -0,0 +1,467 @@
+"use client"
+
+import { useEffect, useRef, useState } from "react"
+import {
+ User as UserIcon,
+ Upload,
+ Trash2,
+ Loader2,
+ Check,
+ AlertCircle,
+ Shield,
+ Lock,
+ X,
+ Settings2,
+ CheckCircle2,
+} from "lucide-react"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card"
+import { Button } from "./ui/button"
+import { Input } from "./ui/input"
+import { Label } from "./ui/label"
+import { fetchApi, getApiUrl, getAuthToken } from "../lib/api-config"
+
+interface ProfileData {
+ success: boolean
+ username?: string | null
+ display_name?: string | null
+ has_avatar?: boolean
+ avatar_mtime?: number | null
+ avatar_content_type?: string | null
+ message?: string
+}
+
+interface ProfileProps {
+ /** Optional navigation hook so the page can link to Security for
+ * password / 2FA changes without redirecting through a URL. */
+ onOpenSecurity?: () => void
+}
+
+/**
+ * Profile page (Fase 2, v1.2.2).
+ *
+ * Lets the operator edit their **display name** and upload / remove
+ * their **avatar**. Username is read-only (changing it requires
+ * disabling and reconfiguring auth from Security). Password / 2FA
+ * are intentionally not editable from this page — those live in
+ * Security to keep the "account security" surface in one place.
+ *
+ * Layout: centered, two cards (Profile + Account security shortcut).
+ * Display name uses the same Edit / Save / Cancel pattern as the
+ * Health Thresholds / Notifications panels — read-only by default,
+ * the operator hits Edit to start typing.
+ */
+export function Profile({ onOpenSecurity }: ProfileProps) {
+ const [profile, setProfile] = useState(null)
+ const [loading, setLoading] = useState(true)
+ const [error, setError] = useState(null)
+
+ // Display name: read-only by default, editable after pressing Edit.
+ // Mirrors the editMode pattern used in HealthThresholds / Notifications
+ // so the operator never types into a field that isn't ready to be saved.
+ const [displayEditMode, setDisplayEditMode] = useState(false)
+ const [displayDraft, setDisplayDraft] = useState("")
+ const [savingDisplay, setSavingDisplay] = useState(false)
+ const [savedDisplay, setSavedDisplay] = useState(false)
+
+ // Avatar state.
+ const [uploadingAvatar, setUploadingAvatar] = useState(false)
+ const [avatarError, setAvatarError] = useState(null)
+ const [avatarBlobUrl, setAvatarBlobUrl] = useState(null)
+ const fileInputRef = useRef(null)
+
+ const loadProfile = async () => {
+ try {
+ const data = await fetchApi("/api/auth/profile")
+ setProfile(data)
+ setDisplayDraft(data.display_name || "")
+ } catch (e) {
+ setError(e instanceof Error ? e.message : String(e))
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ useEffect(() => {
+ loadProfile()
+ }, [])
+
+ // Avatar fetch. Same blob-URL pattern as in AvatarMenu — the endpoint
+ // requires the Bearer header, which can't send. Plain
+ // `![]()
` would render a broken image icon (the bug the user reported).
+ useEffect(() => {
+ let cancelled = false
+ let currentBlobUrl: string | null = null
+ if (profile?.has_avatar) {
+ const token = getAuthToken()
+ const url = `${getApiUrl("/api/auth/profile/avatar")}?v=${profile.avatar_mtime || ""}`
+ fetch(url, { headers: token ? { Authorization: `Bearer ${token}` } : {} })
+ .then(r => (r.ok ? r.blob() : null))
+ .then(blob => {
+ if (cancelled || !blob) return
+ currentBlobUrl = URL.createObjectURL(blob)
+ setAvatarBlobUrl(currentBlobUrl)
+ })
+ .catch(() => {
+ if (!cancelled) setAvatarBlobUrl(null)
+ })
+ } else {
+ setAvatarBlobUrl(null)
+ }
+ return () => {
+ cancelled = true
+ if (currentBlobUrl) URL.revokeObjectURL(currentBlobUrl)
+ }
+ }, [profile?.has_avatar, profile?.avatar_mtime])
+
+ const initial = (profile?.display_name || profile?.username || "U")
+ .trim()
+ .charAt(0)
+ .toUpperCase()
+
+ const hasDisplayChanges = displayDraft !== (profile?.display_name || "")
+
+ const handleEditDisplay = () => {
+ setDisplayEditMode(true)
+ setSavedDisplay(false)
+ setError(null)
+ }
+
+ const handleCancelDisplay = () => {
+ setDisplayDraft(profile?.display_name || "")
+ setDisplayEditMode(false)
+ setError(null)
+ }
+
+ const handleSaveDisplayName = async () => {
+ if (!hasDisplayChanges) {
+ setDisplayEditMode(false)
+ return
+ }
+ setSavingDisplay(true)
+ setError(null)
+ setSavedDisplay(false)
+ try {
+ const data = await fetchApi("/api/auth/profile", {
+ method: "PUT",
+ body: JSON.stringify({ display_name: displayDraft }),
+ })
+ if (!data.success) {
+ setError(data.message || "Failed to save display name")
+ return
+ }
+ setProfile(data)
+ setDisplayEditMode(false)
+ setSavedDisplay(true)
+ setTimeout(() => setSavedDisplay(false), 2500)
+ if (typeof window !== "undefined") {
+ window.dispatchEvent(new CustomEvent("proxmenux:profile-changed"))
+ }
+ } catch (e) {
+ setError(e instanceof Error ? e.message : String(e))
+ } finally {
+ setSavingDisplay(false)
+ }
+ }
+
+ const handleAvatarPick = () => fileInputRef.current?.click()
+
+ const handleAvatarFile = async (file: File) => {
+ setUploadingAvatar(true)
+ setAvatarError(null)
+ try {
+ const token = getAuthToken()
+ const headers: Record = {}
+ if (token) headers["Authorization"] = `Bearer ${token}`
+ // Raw upload (Content-Type = the image's own MIME) — simpler than
+ // multipart and the backend handles both.
+ headers["Content-Type"] = file.type
+ const r = await fetch(getApiUrl("/api/auth/profile/avatar"), {
+ method: "POST",
+ headers,
+ body: file,
+ })
+ const data: ProfileData = await r.json().catch(() => ({ success: false }))
+ if (!r.ok || !data.success) {
+ setAvatarError(data.message || `Upload failed (${r.status})`)
+ return
+ }
+ setProfile(data)
+ if (typeof window !== "undefined") {
+ window.dispatchEvent(new CustomEvent("proxmenux:profile-changed"))
+ }
+ } catch (e) {
+ setAvatarError(e instanceof Error ? e.message : String(e))
+ } finally {
+ setUploadingAvatar(false)
+ // Reset the input so picking the same file twice in a row still
+ // fires the change event.
+ if (fileInputRef.current) fileInputRef.current.value = ""
+ }
+ }
+
+ const handleAvatarDelete = async () => {
+ setUploadingAvatar(true)
+ setAvatarError(null)
+ try {
+ const token = getAuthToken()
+ const headers: Record = {}
+ if (token) headers["Authorization"] = `Bearer ${token}`
+ const r = await fetch(getApiUrl("/api/auth/profile/avatar"), {
+ method: "DELETE",
+ headers,
+ })
+ const data: ProfileData = await r.json().catch(() => ({ success: false }))
+ if (!r.ok || !data.success) {
+ setAvatarError(data.message || `Delete failed (${r.status})`)
+ return
+ }
+ setProfile(data)
+ if (typeof window !== "undefined") {
+ window.dispatchEvent(new CustomEvent("proxmenux:profile-changed"))
+ }
+ } catch (e) {
+ setAvatarError(e instanceof Error ? e.message : String(e))
+ } finally {
+ setUploadingAvatar(false)
+ }
+ }
+
+ if (loading) {
+ return (
+
- {/* Mobile Actions */}
-
+
+
+
+
+
+ )
+ }
+
+ if (error && !profile) {
+ return (
+
+
+
+
+
+
+ )
+ }
+
+ return (
+
+
+
+
+ Failed to load profile
+ {error}
+
+
+
+ {/* Edit / Save / Cancel sit in the card header — same pattern
+ as Health Thresholds and Notifications. Avatar actions
+ (upload / remove) stay independent of editMode because
+ they're explicit one-shot actions, not field edits. */}
+
+ Personal details rendered in the header avatar menu. None of this is required —
+ the username already covers identity. Display name and avatar are decorative.
+
+
+
+
+ {/* ─── Avatar section ──────────────────────────────────────
+ Big preview (160×160) so the operator can see the actual
+ image they uploaded. `object-cover` keeps the aspect
+ ratio and crops to fit the circle. */}
+
+
+
+ {/* ─── Account security shortcut ─── */}
+
+
+
+ Password, two-factor authentication and API tokens live in the Security panel.
+
+
+
+ {onOpenSecurity ? (
+
+ ) : (
+
+
+
+ )
+}
diff --git a/AppImage/components/proxmox-dashboard.tsx b/AppImage/components/proxmox-dashboard.tsx
index d309a5dc..a864ea98 100644
--- a/AppImage/components/proxmox-dashboard.tsx
+++ b/AppImage/components/proxmox-dashboard.tsx
@@ -12,11 +12,14 @@ import Hardware from "./hardware"
import { SystemLogs } from "./system-logs"
import { Settings } from "./settings"
import { Security } from "./security"
+import { Profile } from "./profile"
+import { About } from "./about"
import { OnboardingCarousel } from "./onboarding-carousel"
import { HealthStatusModal } from "./health-status-modal"
import { ReleaseNotesModal, useVersionCheck } from "./release-notes-modal"
import { getApiUrl, fetchApi } from "../lib/api-config"
import { TerminalPanel } from "./terminal-panel"
+import { AvatarMenu } from "./avatar-menu"
import {
RefreshCw,
AlertTriangle,
@@ -367,6 +370,8 @@ export function ProxmoxDashboard() {
return "Security"
case "settings":
return "Settings"
+ case "profile":
+ return "Profile"
default:
return "Navigation Menu"
}
@@ -479,44 +484,74 @@ export function ProxmoxDashboard() {
+
+
+ User Profile
+
+
+ {savedDisplay && (
+
+
+
+
+
+
+ {/* ─── Username (read-only) ─── */}
+
+
+ {avatarError && (
+
+ {avatarBlobUrl ? (
+ // eslint-disable-next-line @next/next/no-img-element
+ 
+ ) : (
+
+ {initial}
+
+ )}
+ {uploadingAvatar && (
+
+
+
+ )}
+
+ {
+ const file = e.target.files?.[0]
+ if (file) handleAvatarFile(file)
+ }}
+ />
+
+ {profile?.has_avatar && (
+
+ )}
+
+ + PNG, JPEG, WebP or GIF. Up to 2 MB. The image isn't resized — + render it square or pre-crop for best results in the header. +
+
+
+ )}
+
+
+
+
+
+ {/* ─── Display name (Edit controls live in the card header) ─── */}
+ + The login name. To change it, disable authentication and reconfigure from + Security. +
+
+
+ setDisplayDraft(e.target.value)}
+ placeholder={profile?.username || "Display name"}
+ maxLength={64}
+ disabled={!displayEditMode || savingDisplay}
+ className="mt-2 max-w-sm disabled:opacity-100 disabled:cursor-default"
+ />
+
+ + Shown above the username inside the avatar menu. Leave empty to show the + username itself. Up to 64 characters. +
+ {error && displayEditMode && ( +
+
+ )}
+
+ Account security
+
+ + Open the Security tab from the navigation. +
+ )} + e.stopPropagation()}>
+
+ {/* User account dropdown — Fase 1 (v1.2.2). Self-hides
+ when auth isn't enabled on this install. */}
+ e.stopPropagation()}>
+ setActiveTab("profile")}
+ onOpenSecurity={() => setActiveTab("security")}
+ />
+
-
-
+ {/* Issue #191: 10 tabs after adding About. The grid wraps via
+ Tabs primitives so the extra column doesn't push the
+ triggers off-screen on common laptop widths. */}
+
Settings
+
+ About
+
@@ -738,6 +782,21 @@ export function ProxmoxDashboard() {
@@ -779,13 +838,27 @@ export function ProxmoxDashboard() {
+ setActiveTab("security")}
+ />
+
+
+
+
+
@@ -844,12 +885,19 @@ const initMessage = {
>
-
- {statusIcon}
-
- {systemStatus.status === "healthy" && infoCount > 0 && (
-
-
- )}
-
-
+ {/* Mobile Actions — variant D approved in demo:
+ • Top-right: Refresh + Theme + Avatar (all with border)
+ • Bottom row (under Node line): badges left-aligned with
+ the Node text column, Uptime right-aligned in the same
+ horizontal line. No extra row for Uptime so the
+ header doesn't grow vertically. */}
+
-
- {/* Mobile Server Info */}
- e.stopPropagation()} className="-mt-1">
+
e.stopPropagation()}>
+
+ e.stopPropagation()}>
+ setActiveTab("profile")}
+ onOpenSecurity={() => setActiveTab("security")}
+ />
+
- Uptime: {systemStatus.uptime || "N/A"}
+ {/* Mobile bottom row — badges (left, aligned with the title
+ column via pl-[3.25rem] = w-16 logo + space-x-2 gap-ish)
+ and Uptime (right). The pl matches the mobile logo width
+ + the parent flex gap so the badges sit visually under
+ "Node: amd", not flush against the screen edge. */}
+
@@ -530,7 +565,10 @@ export function ProxmoxDashboard() {
>
+
+
+ {statusIcon}
+ {systemStatus.status}
+
+ {systemStatus.status === "healthy" && infoCount > 0 && (
+
+
+ )}
+
+
+ Uptime: {systemStatus.uptime || "N/A"}
+
- ").replace(/\n/g, "
"), - }} - /> + {/* + Render the interaction message as plain text. The message + comes through the WebSocket from a script running as root — + a script bug or compromised author could embed `
"), - }} - /> + {/* + Render the interaction message as plain text. The message + comes through the WebSocket from a script running as root — + a script bug or compromised author could embed `