From 82ad2a467f361cba1b41820eff0ee04d455ace5e Mon Sep 17 00:00:00 2001 From: Adam Shiervani Date: Fri, 7 Nov 2025 17:22:02 +0100 Subject: [PATCH] feat: enhance FailSafeModeOverlay with tooltip and log download improvements --- ui/src/components/FaileSafeModeOverlay.tsx | 98 ++++++++++++++----- .../devices.$id.settings.general.reboot.tsx | 47 ++++++--- ui/src/routes/devices.$id.tsx | 17 ++-- 3 files changed, 110 insertions(+), 52 deletions(-) diff --git a/ui/src/components/FaileSafeModeOverlay.tsx b/ui/src/components/FaileSafeModeOverlay.tsx index c0163747..774be169 100644 --- a/ui/src/components/FaileSafeModeOverlay.tsx +++ b/ui/src/components/FaileSafeModeOverlay.tsx @@ -1,9 +1,10 @@ import { useState } from "react"; import { ExclamationTriangleIcon } from "@heroicons/react/24/solid"; import { motion, AnimatePresence } from "framer-motion"; +import { LuInfo } from "react-icons/lu"; import { Button } from "@/components/Button"; -import { GridCard } from "@components/Card"; +import Card, { GridCard } from "@components/Card"; import { JsonRpcResponse, useJsonRpc } from "@/hooks/useJsonRpc"; import { useDeviceUiNavigation } from "@/hooks/useAppNavigation"; import { useVersion } from "@/hooks/useVersion"; @@ -30,19 +31,47 @@ function OverlayContent({ children }: OverlayContentProps) { ); } +interface TooltipProps { + readonly children: React.ReactNode; + readonly text: string; + readonly show: boolean; +} + +function Tooltip({ children, text, show }: TooltipProps) { + if (!show) { + return <>{children}; + } + + + return ( +
+ {children} +
+ +
+ + {text} +
+ +
+
+ ); +} + export function FailSafeModeOverlay({ reason }: FailSafeModeOverlayProps) { const { send } = useJsonRpc(); const { navigateTo } = useDeviceUiNavigation(); const { appVersion } = useVersion(); const { systemVersion } = useDeviceStore(); const [isDownloadingLogs, setIsDownloadingLogs] = useState(false); + const [hasDownloadedLogs, setHasDownloadedLogs] = useState(false); const getReasonCopy = () => { switch (reason) { case "video": return { message: - "We've detected an issue with the video capture process. Your device is still running and accessible, but video streaming is temporarily unavailable. You can reboot to attempt recovery, report the issue, or downgrade to the last stable version.", + "We've detected an issue with the video capture process. Your device is still running and accessible, but video streaming is temporarily unavailable.", }; default: return { @@ -80,13 +109,14 @@ export function FailSafeModeOverlay({ reason }: FailSafeModeOverlayProps) { document.body.removeChild(a); URL.revokeObjectURL(url); - notifications.success("Recovery logs downloaded successfully"); + notifications.success("Crash logs downloaded successfully"); + setHasDownloadedLogs(true); // Open GitHub issue const issueBody = `## Issue Description -The ${reason} process encountered an error and recovery mode was activated. +The \`${reason}\` process encountered an error and fail safe mode was activated. -**Reason:** ${reason} +**Reason:** \`${reason}\` **Timestamp:** ${new Date().toISOString()} **App Version:** ${appVersion || "Unknown"} **System Version:** ${systemVersion || "Unknown"} @@ -95,6 +125,9 @@ The ${reason} process encountered an error and recovery mode was activated. Please attach the recovery logs file that was downloaded to your computer: \`${filename}\` +> [!NOTE] +> Please omit any sensitive information from the logs. + ## Additional Context [Please describe what you were doing when this occurred]`; @@ -114,7 +147,7 @@ Please attach the recovery logs file that was downloaded to your computer: return ( Fail safe mode activated

{message}

-
-
-