feat(runtime): /runtimes/* HTTP surface + RuntimeStatusBar/ControlPanel UI

packages/browseros-agent/apps/agent/entrypoints/app/agent-command/AgentCommandHome.tsx

@@ -97,7 +97,7 @@ export const AgentCommandHome: FC = () => {
   // from the layout context (handles legacy /claw/agents entries that
   // haven't yet been backfilled into the harness store). The Recent
   // Agents grid below reads the richer harness payload directly.
-  const { agents: legacyAgents, status } = useAgentCommandData()
+  const { agents: legacyAgents, openClawReady } = useAgentCommandData()
   const { harnessAgents } = useHarnessAgents()
   const { adapters } = useAgentAdapters()
   const [selectedAgentId, setSelectedAgentId] = useState<string | null>(null)
@@ -146,10 +146,13 @@ export const AgentCommandHome: FC = () => {
     (agent) => agent.agentId === selectedAgentId,
   )
   const selectedAgentReady = selectedAgent
-    ? selectedAgent.source === 'agent-harness' || status?.status === 'running'
+    ? selectedAgent.source === 'agent-harness' || openClawReady
     : false
-  const selectedAgentStatus =
-    selectedAgent?.source === 'agent-harness' ? 'running' : status?.status
+  const selectedAgentStatus = selectedAgent
+    ? selectedAgent.source === 'agent-harness' || openClawReady
+      ? 'running'
+      : 'stopped'
+    : undefined
   const selectedAgentName =
     selectedAgent?.name ?? orderedAgents[0]?.name ?? 'your agent'
 

packages/browseros-agent/apps/agent/entrypoints/app/agent-command/agent-command-layout.tsx

@@ -1,31 +1,25 @@
 import type { FC } from 'react'
 import { Outlet, useOutletContext } from 'react-router'
 import { useHarnessAgents } from '@/entrypoints/app/agents/useAgents'
-import type {
-  AgentEntry,
-  OpenClawStatus,
-} from '@/entrypoints/app/agents/useOpenClaw'
-import {
-  useOpenClawAgents,
-  useOpenClawStatus,
-} from '@/entrypoints/app/agents/useOpenClaw'
+import type { AgentEntry } from '@/entrypoints/app/agents/useOpenClaw'
+import { useOpenClawAgents } from '@/entrypoints/app/agents/useOpenClaw'
+import { useRuntime } from '@/entrypoints/app/agents/useRuntime'
 
 interface AgentCommandContextValue {
   agents: AgentEntry[]
   agentsLoading: boolean
-  status: OpenClawStatus | null
-  statusLoading: boolean
+  openClawReady: boolean
+  openClawReadyLoading: boolean
 }
 
 export const AgentCommandLayout: FC = () => {
-  const { status, loading: statusLoading } = useOpenClawStatus(5000)
-  const openClawEnabled =
-    status?.status === 'running' && status.controlPlaneStatus === 'connected'
+  const { data: runtime, isLoading: runtimeLoading } = useRuntime('openclaw')
+  const openClawReady = runtime?.status.state === 'running'
   const { agents: openClawAgents, loading: openClawAgentsLoading } =
-    useOpenClawAgents(openClawEnabled)
+    useOpenClawAgents(openClawReady)
   const { agents: harnessAgents, loading: harnessAgentsLoading } =
     useHarnessAgents()
-  const visibleOpenClawAgents = openClawEnabled ? openClawAgents : []
+  const visibleOpenClawAgents = openClawReady ? openClawAgents : []
   // Dual-created OpenClaw agents appear in both `/claw/agents` (gateway
   // record) and `/agents` (harness record) under the same id. Prefer the
   // harness entry so the chat panel can route through the harness path
@@ -43,10 +37,10 @@ export const AgentCommandLayout: FC = () => {
           agents,
           agentsLoading:
             harnessAgentsLoading ||
-            statusLoading ||
-            (openClawEnabled && openClawAgentsLoading),
-          status,
-          statusLoading,
+            runtimeLoading ||
+            (openClawReady && openClawAgentsLoading),
+          openClawReady,
+          openClawReadyLoading: runtimeLoading,
         } satisfies AgentCommandContextValue
       }
     />

packages/browseros-agent/apps/agent/entrypoints/app/agents/AgentsPage.tsx

@@ -1,6 +1,7 @@
-import { Loader2 } from 'lucide-react'
+import { Loader2, Terminal as TerminalIcon } from 'lucide-react'
 import { type FC, useMemo, useState } from 'react'
 import { useNavigate } from 'react-router'
+import { Button } from '@/components/ui/button'
 import { useLlmProviders } from '@/lib/llm-providers/useLlmProviders'
 import { AgentList } from './AgentList'
 import { AgentsHeader } from './AgentsHeader'
@@ -19,26 +20,15 @@ import {
   DEFAULT_HARNESS_ADAPTER,
 } from './agents-page-types'
 import {
-  canManageOpenClawAgents,
   getAgentsLoading,
-  getControlPlaneCopyForStatus,
-  getGatewayUiState,
   getInlineError,
-  getLifecycleBanner,
-  getRecoveryDetail,
   getVisibleOpenClawAgents,
-  shouldShowControlPlaneDegraded,
   toHarnessListItem,
   toOpenClawListItem,
 } from './agents-page-utils'
-import { GatewayStatusBar } from './GatewayStatusBar'
 import { NewAgentDialog } from './NewAgentDialog'
-import {
-  ControlPlaneAlert,
-  GatewayStateCards,
-  InlineErrorAlert,
-  LifecycleAlert,
-} from './OpenClawControls'
+import { InlineErrorAlert } from './OpenClawControls'
+import { RuntimesSection } from './runtime-controls/RuntimesSection'
 import { SetupOpenClawDialog } from './SetupOpenClawDialog'
 import {
   useAgentAdapters,
@@ -48,6 +38,7 @@ import {
   useUpdateHarnessAgent,
 } from './useAgents'
 import { useOpenClawAgents, useOpenClawMutations } from './useOpenClaw'
+import { useRuntime } from './useRuntime'
 
 export const AgentsPage: FC = () => {
   const navigate = useNavigate()
@@ -58,19 +49,15 @@ export const AgentsPage: FC = () => {
     error: adaptersError,
   } = useAgentAdapters()
 
-  // The harness listing now carries the gateway lifecycle snapshot
-  // alongside the agents — one polling source for everything the
-  // agents page renders. The legacy `/claw/status` poll is dead from
-  // this surface; the chat-panel layout still uses it for now.
   const {
     harnessAgents,
-    gateway: status,
     loading: harnessAgentsLoading,
     error: harnessAgentsError,
   } = useHarnessAgents()
+  const { data: openClawRuntime } = useRuntime('openclaw')
+  const openClawRunning = openClawRuntime?.status.state === 'running'
 
-  const openClawAgentsEnabled =
-    status?.status === 'running' && status.controlPlaneStatus === 'connected'
+  const openClawAgentsEnabled = openClawRunning
   const {
     agents: openClawAgents,
     loading: openClawAgentsLoading,
@@ -83,15 +70,9 @@ export const AgentsPage: FC = () => {
     setupOpenClaw,
     createAgent: createOpenClawAgent,
     deleteAgent: deleteOpenClawAgent,
-    startOpenClaw,
-    restartOpenClaw,
-    reconnectOpenClaw,
-    actionInProgress,
     settingUp,
     creating: creatingOpenClawAgent,
     deleting: deletingOpenClawAgent,
-    reconnecting,
-    pendingGatewayAction,
   } = useOpenClawMutations()
 
   const [setupOpen, setSetupOpen] = useState(false)
@@ -153,12 +134,10 @@ export const AgentsPage: FC = () => {
     setHarnessReasoningEffort,
   })
 
-  const lifecyclePending = pendingGatewayAction !== null
-  const gatewayUiState = useMemo(() => getGatewayUiState(status), [status])
-  const openClawManageable = canManageOpenClawAgents(
-    gatewayUiState,
-    lifecyclePending,
-  )
+  // Can the user create / modify OpenClaw agents? Yes when the runtime
+  // is running. The legacy gatewayUiState/controlPlaneStatus gating is
+  // gone — runtime state is the source of truth.
+  const openClawManageable = openClawRunning
   const visibleOpenClawAgents = getVisibleOpenClawAgents(
     openClawAgentsEnabled,
     openClawAgents,
@@ -211,7 +190,7 @@ export const AgentsPage: FC = () => {
     return map
   }, [harnessAgents])
   const inlineError = getInlineError({
-    lifecyclePending,
+    lifecyclePending: false,
     pageError,
     openClawAgentsError,
     adaptersError,
@@ -232,31 +211,30 @@ export const AgentsPage: FC = () => {
     setHarnessReasoningEffort(descriptor?.defaultReasoningEffort ?? '')
   }
 
-  const { handleCreate, handleDelete, handleSetup, runWithPageErrorHandling } =
-    createAgentPageActions({
-      createProviderId,
-      createRuntime,
-      createHermesProviderId,
-      harnessModelId,
-      harnessReasoningEffort,
-      navigate,
-      newName,
-      selectableOpenClawProviders,
-      selectableHermesProviders,
-      setupProviderId,
-      createHarnessAgent: createHarnessAgent.mutateAsync,
-      createOpenClawAgent,
-      deleteHarnessAgent: deleteHarnessAgent.mutateAsync,
-      deleteOpenClawAgent,
-      setCliAuthModalOpen,
-      setCreateError,
-      setCreateOpen,
-      setDeletingAgentKey,
-      setNewName,
-      setPageError,
-      setSetupOpen,
-      setupOpenClaw,
-    })
+  const { handleCreate, handleDelete, handleSetup } = createAgentPageActions({
+    createProviderId,
+    createRuntime,
+    createHermesProviderId,
+    harnessModelId,
+    harnessReasoningEffort,
+    navigate,
+    newName,
+    selectableOpenClawProviders,
+    selectableHermesProviders,
+    setupProviderId,
+    createHarnessAgent: createHarnessAgent.mutateAsync,
+    createOpenClawAgent,
+    deleteHarnessAgent: deleteHarnessAgent.mutateAsync,
+    deleteOpenClawAgent,
+    setCliAuthModalOpen,
+    setCreateError,
+    setCreateOpen,
+    setDeletingAgentKey,
+    setNewName,
+    setPageError,
+    setSetupOpen,
+    setupOpenClaw,
+  })
 
   if (showTerminal) {
     return <AgentTerminal onBack={() => setShowTerminal(false)} />
@@ -274,84 +252,59 @@ export const AgentsPage: FC = () => {
 
   // First-paint loader: until the harness listing has resolved at
   // least once we don't know which adapters / agents to render.
-  if (harnessAgentsLoading && !status) {
+  if (harnessAgentsLoading && !openClawRuntime) {
     return (
       <div className="flex items-center justify-center py-20">
         <Loader2 className="size-6 animate-spin text-muted-foreground" />
       </div>
     )
   }
 
-  const showControlPlaneDegraded = shouldShowControlPlaneDegraded(
-    gatewayUiState,
-    lifecyclePending,
-  )
-  const lifecycleBanner = getLifecycleBanner(pendingGatewayAction)
-  const recoveryDetail = status ? getRecoveryDetail(status) : null
-  const controlPlaneCopy = getControlPlaneCopyForStatus(status)
-
-  // Bar only makes sense when the gateway is meaningfully alive AND
-  // there's at least one OpenClaw agent in the merged list. Hide it
-  // for Claude/Codex-only setups so the page stays uncluttered.
-  const showGatewayStatusBar =
-    status?.status === 'running' &&
-    (visibleOpenClawAgents.length > 0 ||
-      harnessAgents.some((agent) => agent.adapter === 'openclaw'))
+  // Setup CTA appears when the runtime is healthy but the user has not
+  // yet configured a provider (no openclaw.json on disk → runtime is
+  // running but agent CRUD will fail). For now: surface it whenever the
+  // runtime isn't ready, so a fresh user sees both Install + Configure
+  // affordances. A future server endpoint can tell us "is setup done".
+  const showSetupCta = !openClawRunning
 
   return (
     <div className="min-h-full bg-background px-6 py-8">
       <div className="fade-in slide-in-from-bottom-5 mx-auto flex w-full max-w-5xl animate-in flex-col gap-6 duration-500">
         <AgentsHeader onCreateAgent={() => setCreateOpen(true)} />
 
-        {lifecycleBanner ? <LifecycleAlert message={lifecycleBanner} /> : null}
-
         {inlineError ? (
           <InlineErrorAlert
             message={inlineError}
             onDismiss={() => setPageError(null)}
           />
         ) : null}
 
-        {status && showControlPlaneDegraded ? (
-          <ControlPlaneAlert
-            actionInProgress={actionInProgress}
-            controlPlaneBusy={gatewayUiState.controlPlaneBusy}
-            controlPlaneCopy={controlPlaneCopy}
-            reconnecting={reconnecting}
-            recoveryDetail={recoveryDetail}
-            status={status}
-            onReconnect={() => {
-              void runWithPageErrorHandling(reconnectOpenClaw)
-            }}
-            onRestart={() => {
-              void runWithPageErrorHandling(restartOpenClaw)
-            }}
-          />
-        ) : null}
-
-        <GatewayStateCards
-          actionInProgress={actionInProgress}
-          status={status}
-          onOpenSetup={() => setSetupOpen(true)}
-          onRestart={() => {
-            void runWithPageErrorHandling(restartOpenClaw)
-          }}
-          onStart={() => {
-            void runWithPageErrorHandling(startOpenClaw)
+        <RuntimesSection
+          extras={{
+            openclaw: {
+              panelExtras: showSetupCta ? (
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => setSetupOpen(true)}
+                >
+                  Configure provider…
+                </Button>
+              ) : null,
+              statusBarExtraActions: (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => setShowTerminal(true)}
+                >
+                  <TerminalIcon className="mr-1.5 h-3.5 w-3.5" />
+                  Terminal
+                </Button>
+              ),
+            },
           }}
         />
 
-        {showGatewayStatusBar ? (
-          <GatewayStatusBar
-            status={status}
-            actionInProgress={actionInProgress}
-            onOpenTerminal={() => setShowTerminal(true)}
-            onRestart={() => {
-              void runWithPageErrorHandling(restartOpenClaw)
-            }}
-          />
-        ) : null}
-
         <AgentList
           agents={agentListItems}
           activity={agentActivity}
@@ -375,7 +328,6 @@ export const AgentsPage: FC = () => {
             })
           }}
         />
-
         <SetupOpenClawDialog
           defaultProviderId={defaultProviderId}
           open={setupOpen}
@@ -387,7 +339,6 @@ export const AgentsPage: FC = () => {
           onProviderChange={setSetupProviderId}
           onSetup={() => void handleSetup()}
         />
-
         <NewAgentDialog
           adapters={adapters}
           canManageOpenClaw={openClawManageable}