Move server status and settings display into settings modal

- Remove server status and current settings from homepage for cleaner UI
- Add current configuration display to settings modal showing all settings
- Add server status component inside settings modal with health checks
- Increase modal width to accommodate additional content
- Add proper styling for settings status section with light/dark mode support
- Clean up unused CSS from App.css

This provides a cleaner homepage while keeping all configuration-related
information organized in one place within the settings modal.

Co-authored-by: openhands <openhands@all-hands.dev>

Author: openhands-agent

example/src/App.css

@@ -79,27 +79,7 @@
   font-weight: 500;
 }
 
-.settings-info {
-  background-color: #f5f5f5;
-  border-radius: 4px;
-  padding: 1rem;
-  margin-bottom: 1rem;
-}
 
-.settings-info h3 {
-  margin-top: 0;
-  margin-bottom: 0.5rem;
-  color: #333;
-}
-
-.settings-info ul {
-  margin: 0;
-  padding-left: 1.5rem;
-}
-
-.settings-info li {
-  margin: 0.25rem 0;
-}
 
 .card {
   padding: 2em;

example/src/App.tsx

@@ -12,7 +12,6 @@ import {
 
 // Import settings components
 import { SettingsModal } from './components/SettingsModal'
-import { ServerStatus } from './components/ServerStatus'
 import { useSettings } from './contexts/SettingsContext'
 
 function App() {
@@ -69,18 +68,6 @@ function App() {
           </div>
         )}
 
-        <div className="settings-info">
-          <h3>Current Settings:</h3>
-          <ul>
-            <li><strong>Agent Server URL:</strong> {settings.agentServerUrl}</li>
-            <li><strong>Model:</strong> {settings.modelName}</li>
-            <li><strong>LLM API Key:</strong> {settings.apiKey ? '***configured***' : 'not set'}</li>
-            <li><strong>Agent Server API Key:</strong> {settings.agentServerApiKey ? '***configured***' : 'not set'}</li>
-          </ul>
-        </div>
-        
-        <ServerStatus settings={settings} />
-        
         <div className="card">
           <h2>SDK Import Status</h2>
           <p className="status">{sdkStatus}</p>

example/src/components/SettingsModal.css

@@ -16,7 +16,7 @@
   border-radius: 8px;
   padding: 0;
   width: 90%;
-  max-width: 500px;
+  max-width: 600px;
   max-height: 90vh;
   overflow-y: auto;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
@@ -57,6 +57,38 @@
   color: #333;
 }
 
+.settings-status {
+  padding: 1.5rem;
+  border-bottom: 1px solid #e0e0e0;
+  background-color: #f8f9fa;
+}
+
+.current-settings {
+  margin-bottom: 1.5rem;
+}
+
+.current-settings h3 {
+  margin: 0 0 1rem 0;
+  color: #333;
+  font-size: 1.1rem;
+}
+
+.current-settings ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.current-settings li {
+  padding: 0.5rem 0;
+  border-bottom: 1px solid #e0e0e0;
+  font-size: 0.9rem;
+}
+
+.current-settings li:last-child {
+  border-bottom: none;
+}
+
 .settings-form {
   padding: 1.5rem;
 }
@@ -160,6 +192,20 @@
     color: #fff;
   }
 
+  .settings-status {
+    background-color: #2a2a2a;
+    border-bottom-color: #333;
+  }
+  
+  .current-settings h3 {
+    color: #fff;
+  }
+  
+  .current-settings li {
+    border-bottom-color: #333;
+    color: #ccc;
+  }
+  
   .close-button {
     color: #ccc;
   }

example/src/components/SettingsModal.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import './SettingsModal.css';
+import { ServerStatus } from './ServerStatus';
 
 export interface Settings {
   agentServerUrl: string;
@@ -103,6 +104,20 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({
           </button>
         </div>
 
+        <div className="settings-status">
+          <div className="current-settings">
+            <h3>Current Configuration:</h3>
+            <ul>
+              <li><strong>Agent Server URL:</strong> {initialSettings.agentServerUrl}</li>
+              <li><strong>Model:</strong> {initialSettings.modelName}</li>
+              <li><strong>LLM API Key:</strong> {initialSettings.apiKey ? '***configured***' : 'not set'}</li>
+              <li><strong>Agent Server API Key:</strong> {initialSettings.agentServerApiKey ? '***configured***' : 'not set'}</li>
+            </ul>
+          </div>
+          
+          <ServerStatus settings={initialSettings} />
+        </div>
+        
         <form onSubmit={handleSubmit} className="settings-form">
           <div className="form-group">
             <label htmlFor="agentServerUrl">Agent Server URL</label>