feat(app): show draft server status in titlebar (#35521)

packages/app/src/pages/new-session.tsx

@@ -1,8 +1,11 @@
 import { Show, createEffect, createMemo, createResource, untrack } from "solid-js"
 import { createStore } from "solid-js/store"
+import { Portal } from "solid-js/web"
 import { useSearchParams } from "@solidjs/router"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { NewSessionDesignView } from "@/components/session"
 import { PromptInput } from "@/components/prompt-input"
+import { StatusPopoverV2 } from "@/components/status-popover"
 import { useSettingsCommand } from "@/components/settings-dialog"
 import {
   PromptProjectAddButton,
@@ -15,11 +18,13 @@ import { useSDK } from "@/context/sdk"
 import { useSync } from "@/context/sync"
 import { useServerSync } from "@/context/server-sync"
 import { useLanguage } from "@/context/language"
+import { useSettings } from "@/context/settings"
 import { createPromptInputController, createPromptProjectControls } from "@/pages/session/composer"
 import { useSessionKey } from "@/pages/session/session-layout"
 import { useComposerCommands } from "@/pages/session/use-composer-commands"
 import { NEW_SESSION_CONTENT_WIDTH } from "@/pages/session/new-session-layout"
 import { PromptWorkspaceSelector } from "@/components/prompt-workspace-selector"
+import { useTitlebarRightMount } from "@/components/titlebar"
 
 const showWorkspaceBar = import.meta.env.VITE_OPENCODE_CHANNEL !== "prod"
 
@@ -35,6 +40,7 @@ export default function NewSessionPage() {
   const serverSync = useServerSync()
   const comments = useComments()
   const language = useLanguage()
+  const settings = useSettings()
   const route = useSessionKey()
   const [searchParams, setSearchParams] = useSearchParams<{ draftId?: string; prompt?: string }>()
 
@@ -55,6 +61,7 @@ export default function NewSessionPage() {
   })
 
   const [store, setStore] = createStore<{ worktree?: string }>({})
+  const rightMount = useTitlebarRightMount()
 
   const newSessionWorktree = createMemo(() => {
     if (store.worktree) return store.worktree
@@ -92,6 +99,17 @@ export default function NewSessionPage() {
 
   return (
     <div class="relative size-full overflow-hidden flex flex-col">
+      <Show when={rightMount()}>
+        {(mount) => (
+          <Portal mount={mount()}>
+            <Show when={settings.visibility.status()}>
+              <Tooltip placement="bottom" value={language.t("status.popover.trigger")}>
+                <StatusPopoverV2 />
+              </Tooltip>
+            </Show>
+          </Portal>
+        )}
+      </Show>
       <div class="flex-1 min-h-0 flex flex-col gap-2 p-2">
         <div class="@container relative flex flex-col min-h-0 h-full flex-1">
           <div class="flex-1 min-h-0 overflow-hidden rounded-[10px]">