import { MetaProvider } from "@solidjs/meta" import { render } from "solid-js/web" import "@opencode-ai/app/index.css" import { Font } from "@opencode-ai/ui/font" import { Splash } from "@opencode-ai/ui/logo" import { Progress } from "@opencode-ai/ui/progress" import "./styles.css" import { createEffect, createMemo, createSignal, onCleanup, onMount } from "solid-js" import type { InitStep, SqliteMigrationProgress } from "../preload/types" const root = document.getElementById("root")! const lines = ["Just a moment...", "Migrating your database", "This may take a couple of minutes"] const delays = [3000, 9000] render(() => { const [step, setStep] = createSignal(null) const [line, setLine] = createSignal(0) const [percent, setPercent] = createSignal(0) const phase = createMemo(() => step()?.phase) const value = createMemo(() => { if (phase() === "done") return 100 return Math.max(25, Math.min(100, percent())) }) window.api.awaitInitialization((next) => setStep(next as InitStep)).catch(() => undefined) onMount(() => { setLine(0) setPercent(0) const timers = delays.map((ms, i) => setTimeout(() => setLine(i + 1), ms)) const listener = window.api.onSqliteMigrationProgress((progress: SqliteMigrationProgress) => { if (progress.type === "InProgress") setPercent(Math.max(0, Math.min(100, progress.value))) if (progress.type === "Done") { setPercent(100) setStep({ phase: "done" }) } }) onCleanup(() => { listener() timers.forEach(clearTimeout) }) }) createEffect(() => { if (phase() !== "done") return const timer = setTimeout(() => window.api.loadingWindowComplete(), 1000) onCleanup(() => clearTimeout(timer)) }) const status = createMemo(() => { if (phase() === "done") return "All done" if (phase() === "sqlite_waiting") return lines[line()] return "Just a moment..." }) return (

{status()} `${Math.round(value)}%`} />

) }, root)