forked from Zakaria/hermes-agent
Zakaria
85 lines
2.7 KiB
TypeScript
85 lines
2.7 KiB
TypeScript
import { type CSSProperties } from 'react'
|
|
import { useStore } from '@nanostores/react'
|
|
import { Button } from '../components/button'
|
|
import {
|
|
$logPath,
|
|
$mode,
|
|
openLogDir,
|
|
startInstall,
|
|
startUpdate,
|
|
type BootstrapStateModel
|
|
} from '../store'
|
|
import { RefreshCw, FileText } from 'lucide-react'
|
|
|
|
interface FailureProps {
|
|
bootstrap: BootstrapStateModel
|
|
}
|
|
|
|
/*
|
|
* Failure screen. Same hero treatment as Welcome/Success — the wordmark
|
|
* carries the brand, so we keep it across every terminal state.
|
|
*
|
|
* The actual error message lives below in muted text. Two clear
|
|
* affordances: Retry (primary) and Open log folder (secondary).
|
|
*/
|
|
export default function Failure({ bootstrap }: FailureProps) {
|
|
const logPath = useStore($logPath)
|
|
const mode = useStore($mode)
|
|
const isUpdate = mode === 'update'
|
|
|
|
return (
|
|
<div className="hermes-fade-in flex h-full flex-col items-center justify-center gap-6 px-12 py-10">
|
|
<div className="w-full max-w-2xl min-w-0 text-center">
|
|
<p
|
|
className="fit-text mx-auto mb-4 w-full font-['Collapse'] font-bold uppercase leading-[0.9] tracking-[0.08em] text-destructive mix-blend-plus-lighter dark:text-destructive/90"
|
|
style={
|
|
{
|
|
'--fit-text-line-height': '0.9',
|
|
'--fit-text-max': '5rem',
|
|
'--fit-text-min': '2.25rem'
|
|
} as CSSProperties
|
|
}
|
|
>
|
|
<span>
|
|
<span>{isUpdate ? 'Update didn\u2019t finish' : 'Install didn\u2019t finish'}</span>
|
|
</span>
|
|
<span aria-hidden="true">{isUpdate ? 'Update didn\u2019t finish' : 'Install didn\u2019t finish'}</span>
|
|
</p>
|
|
|
|
<p className="m-0 mx-auto max-w-xl text-center text-sm leading-normal tracking-tight text-muted-foreground">
|
|
{bootstrap.error ??
|
|
(isUpdate
|
|
? 'Something went wrong during the update.'
|
|
: 'Something went wrong during installation.')}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3">
|
|
<Button
|
|
onClick={() => void (isUpdate ? startUpdate() : startInstall())}
|
|
size="lg"
|
|
className="inline-flex items-center gap-2 px-6"
|
|
>
|
|
<RefreshCw size={16} />
|
|
{isUpdate ? 'Retry update' : 'Retry install'}
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="lg"
|
|
onClick={() => void openLogDir()}
|
|
className="inline-flex items-center gap-2"
|
|
>
|
|
<FileText size={16} />
|
|
Open log folder
|
|
</Button>
|
|
</div>
|
|
|
|
{logPath && (
|
|
<p className="max-w-lg text-center text-xs text-muted-foreground/70">
|
|
Log: <code className="font-mono">{logPath}</code>
|
|
</p>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|