feat: stream real-time progress for agent SDK install/upgrade/uninstall

Replace the spinner-only UX with live log output during agent SDK
operations, matching the existing OpenCode plugin install experience.

Backend: emit structured events (started/log/completed/failed) via
EventEmitter during npm install and binary download. npm commands now
run with piped stdio for line-by-line streaming; binary downloads
report chunked progress every 1 MB.

Frontend: subscribe to `app://agent-install` events through a new
`useAgentInstallStream` hook and render a theme-aware log terminal
below the preflight checks panel.

Also fixes the install log container in both agent settings and the
OpenCode plugins modal: auto-scroll no longer shifts the outer page,
and colours now follow the active light/dark theme.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
xintaofei
2026-04-12 21:43:54 +08:00
parent 6c69f432b9
commit a763adaf36
10 changed files with 541 additions and 118 deletions

View File

@@ -60,7 +60,10 @@ export function OpencodePluginsModal({
}, [open])
useEffect(() => {
logEndRef.current?.scrollIntoView({ behavior: "smooth" })
const container = logEndRef.current?.parentElement
if (container) {
container.scrollTop = container.scrollHeight
}
}, [stream.logs])
useEffect(() => {
@@ -240,11 +243,13 @@ export function OpencodePluginsModal({
)}
{stream.status !== "idle" && (
<div className="rounded-md border bg-black/80 text-green-400 p-3 max-h-[200px] overflow-y-auto font-mono text-[11px] leading-relaxed">
<div className="rounded-md border bg-muted/50 text-muted-foreground p-3 max-h-[200px] overflow-y-auto font-mono text-[11px] leading-relaxed">
{stream.logs.map((line, i) => (
<div
key={i}
className={line.startsWith("ERROR:") ? "text-red-400" : ""}
className={
line.startsWith("ERROR:") ? "text-destructive" : ""
}
>
{line}
</div>