+
+ {local.model.current()?.provider.name}
+
}
>
@@ -1411,12 +1419,25 @@ export const PromptInput: Component
+ Choose model
+
+
+
@@ -49,13 +72,26 @@ export function StatusBar(props: ParentProps) {
v{platform.version}
-
- {directoryDisplay()}
-
+
+
{props.children}
diff --git a/packages/app/src/components/welcome-screen.tsx b/packages/app/src/components/welcome-screen.tsx
new file mode 100644
index 00000000000..cc2172edd2d
--- /dev/null
+++ b/packages/app/src/components/welcome-screen.tsx
@@ -0,0 +1,240 @@
+import { createEffect, createMemo, createSignal, onCleanup, Show, For } from "solid-js"
+import { createStore, reconcile } from "solid-js/store"
+import { AsciiLogo } from "@opencode-ai/ui/logo"
+import { Button } from "@opencode-ai/ui/button"
+import { TextField } from "@opencode-ai/ui/text-field"
+import { Icon } from "@opencode-ai/ui/icon"
+import { normalizeServerUrl, serverDisplayName, useServer } from "@/context/server"
+import { usePlatform } from "@/context/platform"
+import { createOpencodeClient } from "@opencode-ai/sdk/v2/client"
+import { isHostedEnvironment, hasUrlQueryParam, getUrlQueryParam } from "@/utils/hosted"
+
+type ServerStatus = { healthy: boolean; version?: string }
+
+async function checkHealth(url: string, fetch?: typeof globalThis.fetch): Promise
+
+ )
+}
diff --git a/packages/app/src/context/global-sync.tsx b/packages/app/src/context/global-sync.tsx
index cb7bf9cf737..59704abda2b 100644
--- a/packages/app/src/context/global-sync.tsx
+++ b/packages/app/src/context/global-sync.tsx
@@ -25,9 +25,12 @@ import { Binary } from "@opencode-ai/util/binary"
import { retry } from "@opencode-ai/util/retry"
import { useGlobalSDK } from "./global-sdk"
import { ErrorPage, type InitError } from "../pages/error"
+import { WelcomeScreen } from "../components/welcome-screen"
import { batch, createContext, useContext, onMount, type ParentProps, Switch, Match } from "solid-js"
import { showToast } from "@opencode-ai/ui/toast"
import { getFilename } from "@opencode-ai/util/path"
+import { isHostedEnvironment } from "@/utils/hosted"
+import { useServer } from "./server"
type State = {
ready: boolean
@@ -66,17 +69,24 @@ type State = {
}
}
+type ConnectionState = "connecting" | "ready" | "needs_config" | "error"
+
function createGlobalSync() {
const globalSDK = useGlobalSDK()
+ const server = useServer()
const [globalStore, setGlobalStore] = createStore<{
+ connectionState: ConnectionState
ready: boolean
error?: InitError
+ attemptedUrl?: string
path: Path
project: Project[]
provider: ProviderListResponse
provider_auth: ProviderAuthResponse
}>({
+ connectionState: "connecting",
ready: false,
+ attemptedUrl: undefined,
path: { state: "", config: "", worktree: "", directory: "", home: "" },
project: [],
provider: { all: [], connected: [], default: {} },
@@ -402,16 +412,46 @@ function createGlobalSync() {
}
})
+ /**
+ * Probes the server health with a short timeout (2 seconds).
+ * Used for initial connection to provide quick feedback.
+ */
+ async function probeHealth(
+ url: string,
+ healthFn: () => Promise<{ data?: { healthy?: boolean } }>,
+ ): Promise<{ healthy: boolean }> {
+ try {
+ const controller = new AbortController()
+ const timeoutId = setTimeout(() => controller.abort(), 2000)
+
+ const result = await healthFn()
+ clearTimeout(timeoutId)
+
+ return { healthy: result.data?.healthy === true }
+ } catch {
+ return { healthy: false }
+ }
+ }
+
async function bootstrap() {
- const health = await globalSDK.client.global
- .health()
- .then((x) => x.data)
- .catch(() => undefined)
- if (!health?.healthy) {
+ setGlobalStore("connectionState", "connecting")
+ setGlobalStore("attemptedUrl", globalSDK.url)
+
+ // Use a short timeout for the health probe (2 seconds)
+ const probeResult = await probeHealth(globalSDK.url, () => globalSDK.client.global.health())
+
+ if (!probeResult.healthy) {
+ // For hosted environments, show the welcome/configuration screen
+ if (isHostedEnvironment()) {
+ setGlobalStore("connectionState", "needs_config")
+ return
+ }
+ // For non-hosted environments, show the error page
setGlobalStore(
"error",
new Error(`Could not connect to server. Is there a server running at \`${globalSDK.url}\`?`),
)
+ setGlobalStore("connectionState", "error")
return
}
@@ -452,8 +492,14 @@ function createGlobalSync() {
}),
),
])
- .then(() => setGlobalStore("ready", true))
- .catch((e) => setGlobalStore("error", e))
+ .then(() => {
+ setGlobalStore("ready", true)
+ setGlobalStore("connectionState", "ready")
+ })
+ .catch((e) => {
+ setGlobalStore("error", e)
+ setGlobalStore("connectionState", "error")
+ })
}
onMount(() => {
@@ -468,6 +514,12 @@ function createGlobalSync() {
get error() {
return globalStore.error
},
+ get connectionState() {
+ return globalStore.connectionState
+ },
+ get attemptedUrl() {
+ return globalStore.attemptedUrl
+ },
child,
bootstrap,
project: {
@@ -482,10 +534,18 @@ export function GlobalSyncProvider(props: ParentProps) {
const value = createGlobalSync()
return (
+ 0}>
+
+
+ {/* Troubleshooting Section */}
+
+
+
+
+
+
+
+
+
+ {/* Local Server Section */}
+ Welcome to Shuvcode
++ {urlOverride + ? `Could not connect to the server at ${urlOverride}` + : "Connect to a Shuvcode server to get started"} +
+
+
+
+
+
+
+
+ {/* Remote Server Section */}
+
+
+
+ Local Server
+
+
+ Start a local server by running:
+shuvcode
+ or
+npx shuvcode
+
+
+
+ {/* Saved Servers Section */}
+
+
+
+
+
+ Remote Server
++ Note: Connecting to a remote server means trusting that server with your data. +
+
+
+ Saved Servers
+
+
+ {(url) => (
+
+ )}
+
+
+
+
+ Troubleshooting
+
+
+ + Server not running: Make sure you have a Shuvcode server running locally or accessible + remotely. +
+
+ CORS blocked: The server must allow requests from{" "}
+ {location.origin}. Local servers automatically allow
+ this domain.
+
+ Mixed content: If connecting to an http:// server from this{" "}
+ https:// page, your browser may block the connection. Use https:// for remote
+ servers.
+
Version: {platform.version}
+
+
+ Connecting to server...
+
@@ -198,9 +218,25 @@ export const ErrorPage: Component = (props) => {
label="Error Details"
hideLabel
/>
-
+
-
-
-
-
-
- {(tab) => {
- const [file] = createResource(
- () => tab,
- async (tab) => {
- if (tab.startsWith("file://")) {
- return local.file.node(tab.replace("file://", ""))
- }
- return undefined
- },
- )
- return (
-
-
- {(content) => {
- const f = file()!
- const isPreviewableImage =
- content.encoding === "base64" &&
- content.mimeType?.startsWith("image/") &&
- content.mimeType !== "image/svg+xml"
- return (
-
-
-
-
-
-
- )
+ }
+ >
+
+
+
+
+
+ {(tab) => {
+ const [file] = createResource(
+ () => tab,
+ async (tab) => {
+ if (tab.startsWith("file://")) {
+ return local.file.node(tab.replace("file://", ""))
+ }
+ return undefined
+ },
+ )
+ return (
+
+
+ {(content) => {
+ const f = file()!
+ const isPreviewableImage =
+ content.encoding === "base64" &&
+ content.mimeType?.startsWith("image/") &&
+ content.mimeType !== "image/svg+xml"
+ return (
+
+
+
+
+
+
+ )
+ }}
+
+
+ )
+ }}
+
+
@@ -1220,16 +1225,8 @@ export default function Page() {
container: "px-4",
}}
diffs={diffs()}
- split={store.diffSplit}
- actions={
-
- }
+ diffStyle={layout.review.diffStyle()}
+ onDiffStyleChange={layout.review.setDiffStyle}
/>
diff --git a/packages/app/src/utils/hosted.ts b/packages/app/src/utils/hosted.ts
new file mode 100644
index 00000000000..94c4c9b9c91
--- /dev/null
+++ b/packages/app/src/utils/hosted.ts
@@ -0,0 +1,25 @@
+/**
+ * Checks if the app is running in a hosted environment (app.shuv.ai or app.opencode.ai).
+ * In hosted environments, users need to configure their server connection.
+ */
+export function isHostedEnvironment(): boolean {
+ if (typeof window === "undefined") return false
+ return location.hostname.includes("opencode.ai") || location.hostname.includes("shuv.ai")
+}
+
+/**
+ * Checks if a ?url= query parameter was provided in the URL.
+ * This indicates the user is trying to connect to a specific server.
+ */
+export function hasUrlQueryParam(): boolean {
+ if (typeof window === "undefined") return false
+ return new URLSearchParams(document.location.search).has("url")
+}
+
+/**
+ * Gets the ?url= query parameter value if present.
+ */
+export function getUrlQueryParam(): string | null {
+ if (typeof window === "undefined") return null
+ return new URLSearchParams(document.location.search).get("url")
+}
diff --git a/packages/app/test/hosted.test.ts b/packages/app/test/hosted.test.ts
new file mode 100644
index 00000000000..09d1620416e
--- /dev/null
+++ b/packages/app/test/hosted.test.ts
@@ -0,0 +1,132 @@
+import { describe, expect, test, beforeEach, afterEach } from "bun:test"
+
+// Note: These tests require the happy-dom environment set up via bunfig.toml
+
+describe("hosted.ts utilities", () => {
+ let originalHostname: string
+ let originalSearch: string
+
+ beforeEach(() => {
+ originalHostname = window.location.hostname
+ originalSearch = window.location.search
+ })
+
+ afterEach(() => {
+ // Reset location properties (happy-dom allows this)
+ Object.defineProperty(window.location, "hostname", {
+ value: originalHostname,
+ writable: true,
+ })
+ Object.defineProperty(window.location, "search", {
+ value: originalSearch,
+ writable: true,
+ })
+ })
+
+ describe("isHostedEnvironment", () => {
+ test("returns true for opencode.ai domains", async () => {
+ Object.defineProperty(window.location, "hostname", {
+ value: "app.opencode.ai",
+ writable: true,
+ })
+
+ // Dynamic import to get fresh evaluation
+ const { isHostedEnvironment } = await import("../src/utils/hosted")
+ expect(isHostedEnvironment()).toBe(true)
+ })
+
+ test("returns true for shuv.ai domains", async () => {
+ Object.defineProperty(window.location, "hostname", {
+ value: "app.shuv.ai",
+ writable: true,
+ })
+
+ const { isHostedEnvironment } = await import("../src/utils/hosted")
+ expect(isHostedEnvironment()).toBe(true)
+ })
+
+ test("returns false for localhost", async () => {
+ Object.defineProperty(window.location, "hostname", {
+ value: "localhost",
+ writable: true,
+ })
+
+ const { isHostedEnvironment } = await import("../src/utils/hosted")
+ expect(isHostedEnvironment()).toBe(false)
+ })
+
+ test("returns false for other domains", async () => {
+ Object.defineProperty(window.location, "hostname", {
+ value: "example.com",
+ writable: true,
+ })
+
+ const { isHostedEnvironment } = await import("../src/utils/hosted")
+ expect(isHostedEnvironment()).toBe(false)
+ })
+ })
+
+ describe("hasUrlQueryParam", () => {
+ test("returns true when ?url= parameter exists", async () => {
+ Object.defineProperty(window.location, "search", {
+ value: "?url=http://localhost:4096",
+ writable: true,
+ })
+
+ const { hasUrlQueryParam } = await import("../src/utils/hosted")
+ expect(hasUrlQueryParam()).toBe(true)
+ })
+
+ test("returns false when no ?url= parameter", async () => {
+ Object.defineProperty(window.location, "search", {
+ value: "",
+ writable: true,
+ })
+
+ const { hasUrlQueryParam } = await import("../src/utils/hosted")
+ expect(hasUrlQueryParam()).toBe(false)
+ })
+
+ test("returns false when other parameters exist but not ?url=", async () => {
+ Object.defineProperty(window.location, "search", {
+ value: "?foo=bar&baz=qux",
+ writable: true,
+ })
+
+ const { hasUrlQueryParam } = await import("../src/utils/hosted")
+ expect(hasUrlQueryParam()).toBe(false)
+ })
+ })
+
+ describe("getUrlQueryParam", () => {
+ test("returns the URL value when present", async () => {
+ Object.defineProperty(window.location, "search", {
+ value: "?url=http://localhost:4096",
+ writable: true,
+ })
+
+ const { getUrlQueryParam } = await import("../src/utils/hosted")
+ expect(getUrlQueryParam()).toBe("http://localhost:4096")
+ })
+
+ test("returns null when not present", async () => {
+ Object.defineProperty(window.location, "search", {
+ value: "",
+ writable: true,
+ })
+
+ const { getUrlQueryParam } = await import("../src/utils/hosted")
+ expect(getUrlQueryParam()).toBeNull()
+ })
+
+ test("handles URL-encoded values", async () => {
+ Object.defineProperty(window.location, "search", {
+ value: "?url=https%3A%2F%2Fmy-server.example.com%3A8080",
+ writable: true,
+ })
+
+ const { getUrlQueryParam } = await import("../src/utils/hosted")
+ expect(getUrlQueryParam()).toBe("https://my-server.example.com:8080")
+ })
+ })
+})
diff --git a/packages/console/app/package.json b/packages/console/app/package.json
index 2b4bb72e6aa..36c00e3ff74 100644
--- a/packages/console/app/package.json
+++ b/packages/console/app/package.json
@@ -1,6 +1,6 @@
{
"name": "@opencode-ai/console-app",
- "version": "1.0.218",
+ "version": "1.0.220",
"type": "module",
"scripts": {
"typecheck": "tsgo --noEmit",
diff --git a/packages/console/app/src/routes/workspace/[id]/billing/reload-section.tsx b/packages/console/app/src/routes/workspace/[id]/billing/reload-section.tsx
index 99b5939669a..b099e900e6b 100644
--- a/packages/console/app/src/routes/workspace/[id]/billing/reload-section.tsx
+++ b/packages/console/app/src/routes/workspace/[id]/billing/reload-section.tsx
@@ -1,5 +1,5 @@
import { json, action, useParams, createAsync, useSubmission } from "@solidjs/router"
-import { createEffect, Show } from "solid-js"
+import { createEffect, Show, createMemo } from "solid-js"
import { createStore } from "solid-js/store"
import { withActor } from "~/context/auth.withActor"
import { Billing } from "@opencode-ai/console-core/billing.js"
@@ -68,6 +68,12 @@ export function ReloadSection() {
reloadTrigger: "",
})
+ const processingFee = createMemo(() => {
+ const reloadAmount = billingInfo()?.reloadAmount
+ if (!reloadAmount) return "0.00"
+ return (((reloadAmount + 0.3) / 0.956) * 0.044 + 0.3).toFixed(2)
+ })
+
createEffect(() => {
if (!setReloadSubmission.pending && setReloadSubmission.result && !(setReloadSubmission.result as any).error) {
setStore("show", false)
@@ -104,8 +110,8 @@ export function ReloadSection() {
}
>
+
+
+
+ {store.checking ? "Checking..." : "Check for updates"}
+
+ }
+ >
+
+
+
+
Please report this error to the shuvcode team
diff --git a/packages/app/src/pages/layout.tsx b/packages/app/src/pages/layout.tsx
index 67e6b132252..86d00d1b498 100644
--- a/packages/app/src/pages/layout.tsx
+++ b/packages/app/src/pages/layout.tsx
@@ -17,6 +17,7 @@ import { Tooltip } from "@opencode-ai/ui/tooltip"
import { Collapsible } from "@opencode-ai/ui/collapsible"
import { DiffChanges } from "@opencode-ai/ui/diff-changes"
import { Spinner } from "@opencode-ai/ui/spinner"
+import { Mark } from "@opencode-ai/ui/logo"
import { getFilename } from "@opencode-ai/util/path"
import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
import { Session } from "@opencode-ai/sdk/v2/client"
@@ -37,6 +38,7 @@ import { useGlobalSDK } from "@/context/global-sdk"
import { useNotification } from "@/context/notification"
import { Binary } from "@opencode-ai/util/binary"
import { PullToRefresh } from "@/components/pull-to-refresh"
+
import { useDialog } from "@opencode-ai/ui/context/dialog"
import { useTheme, type ColorScheme } from "@opencode-ai/ui/theme"
import { DialogSelectProvider } from "@/components/dialog-select-provider"
@@ -49,6 +51,7 @@ import { applyTheme } from "@/theme/apply-theme"
import { DialogSelectServer } from "@/components/dialog-select-server"
import { useCommand, type CommandOption } from "@/context/command"
import { ConstrainDragXAxis } from "@/utils/solid-dnd"
+import { useServer } from "@/context/server"
import { Header } from "@/components/header"
export default function Layout(props: ParentProps) {
@@ -84,6 +87,7 @@ export default function Layout(props: ParentProps) {
const globalSync = useGlobalSync()
const layout = useLayout()
const platform = usePlatform()
+ const server = useServer()
const notification = useNotification()
const navigate = useNavigate()
const providers = useProviders()
@@ -473,7 +477,6 @@ export default function Layout(props: ParentProps) {
else navigate("/")
}
-
createEffect(() => {
if (!params.dir || !params.id) return
const directory = base64Decode(params.dir)
@@ -1038,9 +1041,11 @@ export default function Layout(props: ParentProps) {
Share feedback
-
+
+
@@ -941,83 +941,88 @@ export default function Page() {
v{__APP_VERSION__} ({__COMMIT_HASH__})
diff --git a/packages/app/src/pages/session.tsx b/packages/app/src/pages/session.tsx
index c45830bea07..52b2fa70807 100644
--- a/packages/app/src/pages/session.tsx
+++ b/packages/app/src/pages/session.tsx
@@ -42,7 +42,7 @@ import type { DragEvent } from "@thisbeyond/solid-dnd"
import type { JSX } from "solid-js"
import { useSync } from "@/context/sync"
import { useTerminal, type LocalPTY } from "@/context/terminal"
-import { useLayout } from "@/context/layout"
+import { useLayout, REVIEW_PANE } from "@/context/layout"
import { getDirectory, getFilename } from "@opencode-ai/util/path"
import { Terminal } from "@/components/terminal"
import { checksum } from "@opencode-ai/util/encode"
@@ -205,7 +205,6 @@ export default function Page() {
stepsExpanded: true,
mobileTabsOpen: false,
mobileTerminalFullscreen: false,
- diffSplit: false,
})
let inputRef!: HTMLDivElement
@@ -773,6 +772,7 @@ export default function Page() {
)
}
+ const hasReviewContent = createMemo(() => diffs().length > 0 || tabs().all().length > 0)
const showTabs = createMemo(() => layout.review.opened())
const tabsValue = createMemo(() => tabs().active() ?? "review")
@@ -879,7 +879,7 @@ export default function Page() {
direction="horizontal"
size={layout.session.width()}
min={320}
- max={window.innerWidth * 0.7}
+ max={window.innerWidth - REVIEW_PANE.MIN_WIDTH}
onResize={layout.session.resize}
/>
- setStore("diffSplit", (x) => !x)}
- >
- {store.diffSplit ? "Inline" : "Split"}
-
- }
- />
+
+
-
+
No files to review
+ Changes will appear here
+
- 
-
-
-
-
+
-
- )
- }}
-
+ diffs={diffs()}
+ diffStyle={layout.review.diffStyle()}
+ onDiffStyleChange={layout.review.setDiffStyle}
+ />
+
+
+
+
+
+
+ - Auto reload is enabled. We'll reload ${billingInfo()?.reloadAmount} (+$1.23 processing fee) - when balance reaches ${billingInfo()?.reloadTrigger}. + Auto reload is enabled. We'll reload ${billingInfo()?.reloadAmount} (+${processingFee()}{" "} + processing fee) when balance reaches ${billingInfo()?.reloadTrigger}.