44 lines
2.2 KiB
TypeScript
44 lines
2.2 KiB
TypeScript
import { useEffect, useRef } from 'react'
|
|
import { useStore } from '../store'
|
|
|
|
const LOG_COLOUR = { info: 'text-[#7fc4f0]', success: 'text-[#5fe0a0]', warn: 'text-[#f5c563]', error: 'text-[#f68c82]' }
|
|
|
|
export function RunPanel() {
|
|
const { step, log } = useStore()
|
|
const active = !step ? -1 : step.pct >= 100 ? STEPS.length : STEPS.indexOf(step.label)
|
|
const logBox = useRef<HTMLDivElement>(null)
|
|
useEffect(() => { logBox.current?.scrollTo(0, logBox.current.scrollHeight) }, [log.length])
|
|
|
|
return (
|
|
<div className="card">
|
|
<div className="card-title">Run automation</div>
|
|
<div className="mb-2 flex gap-3 text-[13px] font-bold">
|
|
<span>{step?.label ?? 'Waiting to start'}</span>
|
|
<span className="ml-auto text-accent">{step?.pct ?? 0}%</span>
|
|
</div>
|
|
<div className="mb-4 h-2 overflow-hidden rounded-lg bg-glass-strong">
|
|
<div className="h-full transition-[width] duration-500" style={{ width: `${step?.pct ?? 0}%`, background: 'var(--progress-bg)' }} />
|
|
</div>
|
|
<ol aria-label="Steps">
|
|
{STEPS.map((s, i) => {
|
|
const c = i < active ? 'done' : i === active ? 'active' : 'pending'
|
|
return (
|
|
<li key={s} aria-current={c === 'active' ? 'step' : undefined}
|
|
className={`mb-1.5 flex items-center gap-3 rounded-[10px] px-3 py-2.5 text-[13px] font-semibold ${c === 'done' ? 'bg-ok-bg text-ok' : c === 'active' ? 'bg-warn-bg text-warn' : 'opacity-50'}`}>
|
|
<span className={`flex h-[22px] w-[22px] items-center justify-center rounded-full text-[11px] ${c === 'done' ? 'bg-ok text-white' : c === 'active' ? 'bg-warn text-white' : 'bg-glass-strong'}`}>
|
|
{c === 'done' ? '✓' : i + 1}
|
|
</span>
|
|
{s}
|
|
</li>
|
|
)
|
|
})}
|
|
</ol>
|
|
{/* OPTIONAL: checkpoint tracker goes here */}
|
|
<div ref={logBox} role="log" aria-label="Run log"
|
|
className="mt-3 max-h-[220px] overflow-y-auto rounded-xl bg-accent-dark px-3.5 py-3 font-mono text-[13px] leading-[1.85] text-[#9fb6c4]">
|
|
{log.map((l, i) => <div key={i} className={LOG_COLOUR[l.type] ?? LOG_COLOUR.info}>{l.msg}</div>)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|