import { release } from "node:os" import { TextAttributes, type ScrollBoxRenderable } from "@opentui/core" import { useKeyboard, useTerminalDimensions } from "@opentui/solid" import { createSignal, For, Show } from "solid-js" import { getScrollAcceleration } from "../util/scroll" import { useClipboard } from "../context/clipboard" import { InstallationVersion } from "@opencode-ai/core/installation/version" import { useExit } from "../context/exit" export function ErrorComponent(props: { error: Error; reset: () => void; mode?: "dark" | "light" }) { const term = useTerminalDimensions() const exit = useExit() const clipboard = useClipboard() const [copied, setCopied] = createSignal(false) // Safe fallback palette per mode (mirrors theme/assets/opencode.json) since the // theme context may be the thing that crashed. const isLight = props.mode === "light" const colors = isLight ? { bg: "#ffffff", element: "#f5f5f5", borderSubtle: "#d4d4d4", text: "#1a1a1a", muted: "#8a8a8a", primary: "#3b7dd8", onPrimary: "#ffffff", error: "#d1383d", success: "#3d9a57", } : { bg: "#0a0a0a", element: "#1e1e1e", borderSubtle: "#3c3c3c", text: "#eeeeee", muted: "#808080", primary: "#fab283", onPrimary: "#0a0a0a", error: "#e06c75", success: "#7fd88f", } const message = props.error.message || "An unknown error occurred." const stack = props.error.stack || "No stack trace available." const issueURL = buildIssueURL(message, stack) const copyReport = () => { void clipboard.write?.(issueURL.toString()).then(() => setCopied(true)) } const actions = [ { key: "c", label: () => (copied() ? "✓ Copied" : "Copy report"), copy: true, onUse: copyReport }, { key: "r", label: () => "Restart", onUse: props.reset }, { key: "q", label: () => "Quit", onUse: () => exit() }, ] const [selected, setSelected] = createSignal(0) const move = (delta: number) => setSelected((prev) => (prev + delta + actions.length) % actions.length) let scroll: ScrollBoxRenderable | undefined useKeyboard((evt) => { if (evt.ctrl && evt.name === "c") return exit() if (evt.name === "return") { evt.preventDefault() evt.stopPropagation() return actions[selected()].onUse() } if (evt.name === "left") { evt.preventDefault() evt.stopPropagation() return move(-1) } if (evt.name === "right") { evt.preventDefault() evt.stopPropagation() return move(1) } if (evt.name === "tab") { evt.preventDefault() evt.stopPropagation() return move(evt.shift ? -1 : 1) } // Vertical keys scroll the stack trace; buttons navigate horizontally. if (evt.name === "up") return scroll?.scrollBy(-1) if (evt.name === "down") return scroll?.scrollBy(1) if (evt.name === "pageup" && scroll) return scroll.scrollBy(-scroll.height) if (evt.name === "pagedown" && scroll) return scroll.scrollBy(scroll.height) if (evt.name === "home" && scroll) return scroll.scrollTo(0) if (evt.name === "end" && scroll) return scroll.scrollTo(scroll.scrollHeight) if (evt.name === "q") return exit() if (evt.name === "c") return copyReport() if (evt.name === "r") return props.reset() }) // Responsive thresholds. const contentWidth = () => Math.min(84, Math.max(24, term().width - 4)) const showSubtext = () => term().height >= 18 const showFooter = () => term().height >= 20 return ( {/* Headline */} opencode crashed An unexpected error stopped the session. {/* Error message panel */} {message} {/* Actions */} {(action, index) => { const isSelected = () => selected() === index() const isCopied = () => action.copy && copied() return ( setSelected(index())} onMouseUp={() => action.onUse()} backgroundColor={isCopied() ? colors.success : isSelected() ? colors.primary : colors.element} minWidth={15} alignItems="center" paddingLeft={2} paddingRight={2} > {action.label()} {action.key} ) }} {/* Stack trace */} (scroll = element)} flexGrow={1} scrollAcceleration={getScrollAcceleration()} > {stack} {/* Footer */} {copied() ? "Report copied — paste it into a new GitHub issue." : "Copy the report and open a GitHub issue to help us fix this."} opencode {InstallationVersion} ) } function buildIssueURL(message: string, stack: string) { // Field keys match the ids in .github/ISSUE_TEMPLATE/bug-report.yml so the issue // form opens pre-filled. Populating os/terminal/reproduce keeps the report past // the contributing-guidelines compliance check, which pushes for system info. const url = new URL("https://github.com/anomalyco/opencode/issues/new?template=bug-report.yml") url.searchParams.set("title", `TUI crash: ${message}`) url.searchParams.set("opencode-version", InstallationVersion) url.searchParams.set("os", describeOS()) url.searchParams.set("terminal", describeTerminal()) url.searchParams.set( "reproduce", "Reported automatically from the opencode crash screen. If you can, describe what you were doing when it crashed.", ) // Budget the stack against the fully URL-encoded length (not the raw length) so // the final link stays under GitHub's practical limit; flag truncation so a // clipped trace is obvious. searchParams.set handles encoding without throwing, // so measuring url.toString() is both correct and safe on any input. const MAX_URL_LENGTH = 6000 const marker = "\n... (truncated)" const head = `The opencode TUI crashed with an unexpected error.\n\n**Error:** ${message}\n\n**Stack trace:**\n` const setBody = (body: string) => url.searchParams.set("description", head + "```\n" + body + "\n```") setBody(stack) if (url.toString().length <= MAX_URL_LENGTH) return url // Largest raw stack prefix whose encoded URL (with the marker) still fits. let lo = 0 let hi = stack.length while (lo < hi) { const mid = Math.ceil((lo + hi) / 2) setBody(stack.slice(0, mid) + marker) if (url.toString().length <= MAX_URL_LENGTH) lo = mid else hi = mid - 1 } setBody(stack.slice(0, lo) + marker) return url } function describeOS() { const name = process.platform === "darwin" ? "macOS" : process.platform === "win32" ? "Windows" : process.platform === "linux" ? "Linux" : process.platform return `${name} ${release()} (${process.arch})` } function describeTerminal() { const program = process.env.TERM_PROGRAM || process.env.TERM || "unknown" const version = process.env.TERM_PROGRAM_VERSION ? ` ${process.env.TERM_PROGRAM_VERSION}` : "" const multiplexer = process.env.TMUX ? " in tmux" : process.env.STY ? " in screen" : "" return `${program}${version}${multiplexer}` }