Add model offline badge and streaming safeguards

packages/ui/src/components/message-part.tsx

@@ -94,7 +94,7 @@ interface MessagePartProps {
   return (
     <Switch>
       <Match when={partType() === "text"}>
-        <Show when={!(props.part.type === "text" && props.part.synthetic) && partHasRenderableText(props.part)}>
+        <Show when={!(props.part.type === "text" && props.part.synthetic && isAssistantMessage()) && partHasRenderableText(props.part)}>
           <div class={textContainerClass()}>
             <Show
                when={isAssistantMessage()}

packages/ui/src/components/model-selector.tsx

@@ -1,11 +1,12 @@
 import { Combobox } from "@kobalte/core/combobox"
-import { createEffect, createMemo, createSignal } from "solid-js"
+import { createEffect, createMemo, createSignal, onCleanup, onMount } from "solid-js"
 import { providers, fetchProviders } from "../stores/sessions"
 import { ChevronDown } from "lucide-solid"
 import type { Model } from "../types/session"
 import { getLogger } from "../lib/logger"
 const log = getLogger("session")
 
+const OPENCODE_ZEN_OFFLINE_STORAGE_KEY = "opencode-zen-offline-models"
 
 interface ModelSelectorProps {
   instanceId: string
@@ -20,9 +21,13 @@ interface FlatModel extends Model {
   searchText: string
 }
 
+import { useQwenOAuth } from "../lib/integrations/qwen-oauth"
+
 export default function ModelSelector(props: ModelSelectorProps) {
   const instanceProviders = () => providers().get(props.instanceId) || []
   const [isOpen, setIsOpen] = createSignal(false)
+  const qwenAuth = useQwenOAuth()
+  const [offlineModels, setOfflineModels] = createSignal<Set<string>>(new Set())
   let triggerRef!: HTMLButtonElement
   let searchInputRef!: HTMLInputElement
 
@@ -32,6 +37,41 @@ export default function ModelSelector(props: ModelSelectorProps) {
     }
   })
 
+  const readOfflineModels = () => {
+    if (typeof window === "undefined") return new Set<string>()
+    try {
+      const raw = window.localStorage.getItem(OPENCODE_ZEN_OFFLINE_STORAGE_KEY)
+      const parsed = raw ? JSON.parse(raw) : []
+      return new Set(Array.isArray(parsed) ? parsed.filter((id) => typeof id === "string") : [])
+    } catch {
+      return new Set<string>()
+    }
+  }
+
+  const refreshOfflineModels = () => {
+    setOfflineModels(readOfflineModels())
+  }
+
+  onMount(() => {
+    refreshOfflineModels()
+    if (typeof window === "undefined") return
+    const handleCustom = () => refreshOfflineModels()
+    const handleStorage = (event: StorageEvent) => {
+      if (event.key === OPENCODE_ZEN_OFFLINE_STORAGE_KEY) {
+        refreshOfflineModels()
+      }
+    }
+    window.addEventListener("opencode-zen-offline-models", handleCustom as EventListener)
+    window.addEventListener("storage", handleStorage)
+    onCleanup(() => {
+      window.removeEventListener("opencode-zen-offline-models", handleCustom as EventListener)
+      window.removeEventListener("storage", handleStorage)
+    })
+  })
+
+  const isOfflineModel = (model: FlatModel) =>
+    model.providerId === "opencode-zen" && offlineModels().has(model.id)
+
   const allModels = createMemo<FlatModel[]>(() =>
     instanceProviders().flatMap((p) =>
       p.models.map((m) => ({
@@ -49,6 +89,21 @@ export default function ModelSelector(props: ModelSelectorProps) {
 
   const handleChange = async (value: FlatModel | null) => {
     if (!value) return
+
+    // Auto-trigger Qwen OAuth if needed
+    if (value.providerId === 'qwen-oauth' && !qwenAuth.isAuthenticated()) {
+      const confirmed = window.confirm("Qwen Code requires authentication. Sign in now?")
+      if (confirmed) {
+        try {
+          await qwenAuth.signIn()
+        } catch (error) {
+          log.error("Qwen authentication failed", error)
+          // Continue to set model even if auth failed, to allow user to try again later
+          // or user might have authenticatd in another tab
+        }
+      }
+    }
+
     await props.onModelChange({ providerId: value.providerId, modelId: value.id })
   }
 
@@ -83,8 +138,11 @@ export default function ModelSelector(props: ModelSelectorProps) {
             class="selector-option"
           >
             <div class="selector-option-content">
-              <Combobox.ItemLabel class="selector-option-label">
+              <Combobox.ItemLabel class="selector-option-label flex items-center gap-2">
-                {itemProps.item.rawValue.name}
+                <span class="truncate">{itemProps.item.rawValue.name}</span>
+                {isOfflineModel(itemProps.item.rawValue) && (
+                  <span class="selector-badge selector-badge-warning">Offline</span>
+                )}
               </Combobox.ItemLabel>
               <Combobox.ItemDescription class="selector-option-description">
                 {itemProps.item.rawValue.providerName} • {itemProps.item.rawValue.providerId}/
@@ -106,8 +164,11 @@ export default function ModelSelector(props: ModelSelectorProps) {
             class="selector-trigger"
           >
             <div class="selector-trigger-label selector-trigger-label--stacked">
-              <span class="selector-trigger-primary selector-trigger-primary--align-left">
+              <span class="selector-trigger-primary selector-trigger-primary--align-left flex items-center gap-2">
-                Model: {currentModelValue()?.name ?? "None"}
+                <span class="truncate">Model: {currentModelValue()?.name ?? "None"}</span>
+                {currentModelValue() && isOfflineModel(currentModelValue() as FlatModel) && (
+                  <span class="selector-badge selector-badge-warning">Offline</span>
+                )}
               </span>
               {currentModelValue() && (
                 <span class="selector-trigger-secondary">

packages/ui/src/styles/components/selector.css

@@ -152,6 +152,11 @@
   color: var(--text-inverted);
 }
 
+.selector-badge-warning {
+  background-color: var(--status-warning);
+  color: var(--text-inverted);
+}
+
 .selector-badge-version {
   @apply text-xs;
   color: var(--text-muted);