chore: cleanup

packages/app/src/components/dialog-select-server.tsx

@@ -5,28 +5,13 @@ import { Dialog } from "@opencode-ai/ui/dialog"
 import { List } from "@opencode-ai/ui/list"
 import { TextField } from "@opencode-ai/ui/text-field"
 import { Button } from "@opencode-ai/ui/button"
-import { useServer } from "@/context/server"
+import { normalizeServerUrl, serverDisplayName, useServer } from "@/context/server"
 import { usePlatform } from "@/context/platform"
 import { createOpencodeClient } from "@opencode-ai/sdk/v2/client"
 import { useNavigate } from "@solidjs/router"
 
 type ServerStatus = { healthy: boolean; version?: string }
 
-function displayName(url: string) {
-  return url
-    .replace(/^https?:\/\//, "")
-    .replace(/\/+$/, "")
-    .split("/")[0]
-}
-
-function normalize(input: string) {
-  const trimmed = input.trim()
-  if (!trimmed) return
-  const withProtocol = /^https?:\/\//.test(trimmed) ? trimmed : `http://${trimmed}`
-  const cleaned = withProtocol.replace(/\/+$/, "")
-  return cleaned.replace(/^(https?:\/\/[^/]+).*/, "$1")
-}
-
 async function checkHealth(url: string, fetch?: typeof globalThis.fetch): Promise<ServerStatus> {
   const sdk = createOpencodeClient({
     baseUrl: url,
@@ -87,7 +72,7 @@ export function DialogSelectServer() {
 
   async function handleSubmit(e: SubmitEvent) {
     e.preventDefault()
-    const value = normalize(store.url)
+    const value = normalizeServerUrl(store.url)
     if (!value) return
 
     setStore("adding", true)
@@ -131,7 +116,7 @@ export function DialogSelectServer() {
                   "bg-border-weak-base": store.status[i] === undefined,
                 }}
               />
-              <span class="truncate">{displayName(i)}</span>
+              <span class="truncate">{serverDisplayName(i)}</span>
               <span class="text-text-weak">{store.status[i]?.version}</span>
             </div>
           )}

packages/app/src/components/status-bar.tsx

@@ -34,10 +34,12 @@ export function StatusBar(props: ParentProps) {
             <div
               classList={{
                 "size-1.5 rounded-full": true,
-                "bg-icon-success-base": server.healthy(),
-                "bg-icon-critical-base": !server.healthy(),
+                "bg-icon-success-base": server.healthy() === true,
+                "bg-icon-critical-base": server.healthy() === false,
+                "bg-border-weak-base": server.healthy() === undefined,
               }}
             />
+
             <span class="text-12-regular text-text-weak">{server.name}</span>
           </Button>
         </div>

packages/app/src/context/server.tsx

@@ -7,7 +7,7 @@ import { persisted } from "@/utils/persist"
 
 type StoredProject = { worktree: string; expanded: boolean }
 
-function normalize(input: string) {
+export function normalizeServerUrl(input: string) {
   const trimmed = input.trim()
   if (!trimmed) return
   const withProtocol = /^https?:\/\//.test(trimmed) ? trimmed : `http://${trimmed}`
@@ -15,7 +15,8 @@ function normalize(input: string) {
   return cleaned.replace(/^(https?:\/\/[^/]+).*/, "$1")
 }
 
-function displayName(url: string) {
+export function serverDisplayName(url: string) {
+  if (!url) return ""
   return url
     .replace(/^https?:\/\//, "")
     .replace(/\/+$/, "")
@@ -26,7 +27,7 @@ export const { use: useServer, provider: ServerProvider } = createSimpleContext(
   name: "Server",
   init: (props: { defaultUrl: string; forceUrl?: boolean }) => {
     const platform = usePlatform()
-    const fallback = () => normalize(props.defaultUrl)
+    const fallback = () => normalizeServerUrl(props.defaultUrl)
     const [forced, setForced] = createSignal(props.forceUrl ?? false)
 
     const [store, setStore, _, ready] = persisted(
@@ -39,7 +40,7 @@ export const { use: useServer, provider: ServerProvider } = createSimpleContext(
     )
 
     function setActive(input: string) {
-      const url = normalize(input)
+      const url = normalizeServerUrl(input)
       if (!url) return
       batch(() => {
         if (!store.list.includes(url)) {
@@ -50,7 +51,7 @@ export const { use: useServer, provider: ServerProvider } = createSimpleContext(
     }
 
     function remove(input: string) {
-      const url = normalize(input)
+      const url = normalizeServerUrl(input)
       if (!url) return
 
       const list = store.list.filter((x) => x !== url)
@@ -96,9 +97,9 @@ export const { use: useServer, provider: ServerProvider } = createSimpleContext(
     const isReady = createMemo(() => ready() && !!store.active)
 
     const [healthy, { refetch }] = createResource(
-      () => store.active,
+      () => store.active || undefined,
       async (url) => {
-        if (!url) return true
+        if (!url) return
 
         const sdk = createOpencodeClient({
           baseUrl: url,
@@ -110,7 +111,6 @@ export const { use: useServer, provider: ServerProvider } = createSimpleContext(
           .then((x) => x.data?.healthy === true)
           .catch(() => false)
       },
-      { initialValue: true },
     )
 
     createEffect(() => {
@@ -128,7 +128,7 @@ export const { use: useServer, provider: ServerProvider } = createSimpleContext(
         return store.active
       },
       get name() {
-        return displayName(store.active)
+        return serverDisplayName(store.active)
       },
       get list() {
         return store.list

packages/app/src/pages/home.tsx

@@ -64,8 +64,9 @@ export default function Home() {
         <div
           classList={{
             "size-2 rounded-full": true,
-            "bg-icon-success-base": server.healthy(),
-            "bg-icon-critical-base": !server.healthy(),
+            "bg-icon-success-base": server.healthy() === true,
+            "bg-icon-critical-base": server.healthy() === false,
+            "bg-border-weak-base": server.healthy() === undefined,
           }}
         />
         {server.name}

packages/ui/src/components/list.css

@@ -197,12 +197,11 @@
             }
           }
           [data-slot="list-item-active-icon"] {
-            display: inline-flex;
+            display: none;
             align-items: center;
             justify-content: center;
             flex-shrink: 0;
             aspect-ratio: 1/1;
-            display: none;
             [data-component="icon"] {
               color: var(--icon-strong-base);
             }