Skip to content

mobile & debug info fixups #179

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
adeebshihadeh merged 1 commit into from
Dec 19, 2025
Merged

mobile & debug info fixups #179

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 45 additions & 13 deletions src/app/Flash.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ const originalConsole = { log: console.log, warn: console.warn, error: console.e
})

// Debug info component for error reporting
function DebugInfo({ error, step, selectedDevice, serial, message }) {
function DebugInfo({ error, step, selectedDevice, serial, message, onClose }) {
const [copied, setCopied] = useState(false)

const getDebugReport = () => {
Expand Down Expand Up @@ -117,14 +117,27 @@ ${consoleLogs.slice(-30).map(l => `[${l.time}] [${l.level}] ${l.message}`).join(
}

return (
<div className="mt-6 w-full max-w-xl p-4 bg-gray-100 rounded-lg text-left text-sm">
<p className="text-gray-600 mb-3">
Copy this debug info and paste it in{' '}
<a href="https://discord.comma.ai" target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline">Discord</a>
{' '}or{' '}
<a href="https://github.com/commaai/flash/issues/new" target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline">GitHub Issues</a>.
</p>
<pre className="bg-gray-900 text-gray-100 p-3 rounded text-xs overflow-auto max-h-48 font-mono debug-scrollbar">
<div className="mt-6 w-full max-w-xl mx-4 p-4 bg-gray-100 rounded-lg text-left text-sm overflow-hidden">
<div className="flex justify-between items-start mb-3 gap-2">
<p className="text-gray-600 text-sm">
Copy this debug info and paste it in{' '}
<a href="https://discord.comma.ai" target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline">Discord</a>
{' '}or{' '}
<a href="https://github.com/commaai/flash/issues/new" target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline">GitHub Issues</a>.
</p>
{onClose && (
<button
onClick={onClose}
className="text-gray-400 hover:text-gray-600 flex-shrink-0"
title="Hide debug info"
>
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
)}
</div>
<pre className="bg-gray-900 text-gray-100 p-3 rounded text-xs overflow-x-auto max-h-32 sm:max-h-48 font-mono debug-scrollbar whitespace-pre-wrap break-all">
{getDebugReport()}
</pre>
<button
Expand Down Expand Up @@ -604,6 +617,7 @@ export default function Flash() {
const [message, setMessage] = useState('')
const [progress, setProgress] = useState(-1)
const [error, setError] = useState(ErrorCode.NONE)
const [showDebugInfo, setShowDebugInfo] = useState(false)
const [connected, setConnected] = useState(false)
const [serial, setSerial] = useState(null)
const [selectedDevice, setSelectedDevice] = useState(null)
Expand Down Expand Up @@ -785,6 +799,7 @@ export default function Flash() {
<> If the problem persists, join <a href="https://discord.comma.ai" target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline font-semibold">#{discordChannel}</a> on Discord for help.</>
)


let title
if (message && !error) {
title = message + '...'
Expand All @@ -808,7 +823,7 @@ export default function Flash() {
const canGoBack = step === StepCode.CONNECTING && !connected

return (
<div id="flash" className="wizard-screen relative flex flex-col gap-8 justify-center items-center h-full">
<div id="flash" className="wizard-screen relative flex flex-col gap-8 justify-center items-center h-full pt-16 pb-12 overflow-y-auto overflow-x-hidden">
{wizardStep >= 0 && (
<Stepper
steps={wizardSteps}
Expand All @@ -829,7 +844,17 @@ export default function Flash() {
<LinearProgress value={progress * 100} barColor={bgColor} />
</div>
<span className="text-3xl font-mono font-light">{title}</span>
<span className="text-xl px-8 max-w-xl text-center">{description}{discordLink}</span>
<span className="text-xl px-8 max-w-xl text-center">
{description}{discordLink}
{error !== ErrorCode.NONE && hideRetry && !showDebugInfo && (
<button
onClick={() => setShowDebugInfo(true)}
className="block mx-auto mt-2 text-sm text-gray-500 hover:text-gray-700 underline"
>
show debug info
</button>
)}
</span>
{error !== ErrorCode.NONE && !hideRetry && (
<button
className="px-8 py-3 text-xl font-semibold rounded-full bg-[#51ff00] hover:bg-[#45e000] active:bg-[#3acc00] text-black transition-colors"
Expand All @@ -839,8 +864,15 @@ export default function Flash() {
</button>
)}
{connected && <DeviceState serial={serial} />}
{error !== ErrorCode.NONE && (
<DebugInfo error={error} step={step} selectedDevice={selectedDevice} serial={serial} message={message} />
{error !== ErrorCode.NONE && (!hideRetry || showDebugInfo) && (
<DebugInfo
error={error}
step={step}
selectedDevice={selectedDevice}
serial={serial}
message={message}
onClose={hideRetry ? () => setShowDebugInfo(false) : undefined}
/>
)}
</div>
)
Expand Down