feat: Emily avatar + Hermes Remote health check in info panel

frontend/src/App.css

@@ -497,11 +497,21 @@ body {
 
 .message-header {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: wrap;
   gap: 0.5rem;
   margin-bottom: 0.5rem;
 }
 
+.emily-avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
 .agent-name {
   font-size: 0.75rem;
   color: var(--muted-foreground);
@@ -534,7 +544,10 @@ body {
 }
 
 .loading-animation {
-  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
   color: var(--muted-foreground);
   padding: 0.75rem;
   font-size: 0.875rem;
@@ -904,6 +917,14 @@ body {
   margin-bottom: 1.5rem;
 }
 
+.login-emily-avatar {
+  width: 96px;
+  height: 96px;
+  border-radius: 50%;
+  object-fit: cover;
+  margin-bottom: 0.5rem;
+}
+
 .login-card h1 {
   font-size: 2rem;
   color: #f8fafc;

frontend/src/App.js

@@ -4,15 +4,17 @@ import "./App.css";
 import { ThemeToggle } from "./components/ThemeToggle";
 import { ResizableLayout } from "./components/ResizableLayout";
 import { ReactComponent as EcoSeekLogo } from "./ecoseek-logo.svg";
+import emilyAvatar from "./emily-avatar.png";
 import { useAuth } from "./contexts/AuthContext";
-import { chatCompletion, checkHealth, BROKER_URL, CHAT_URL, IS_LOCAL_EMILY } from "./api/broker";
+import { chatCompletion, checkHealth, checkRemoteHealth, BROKER_URL, CHAT_URL, IS_LOCAL_EMILY, HERMES_REMOTE_URL } from "./api/broker";
 
 function LoginScreen({ onLogin }) {
   return (
     <div className="login-screen">
       <div className="login-card">
         <EcoSeekLogo className="login-logo" />
         <h1>EcoSeek</h1>
+        <img src={emilyAvatar} alt="Emily" className="login-emily-avatar" />
         <p className="login-subtitle">
           Meet Emily — your AI ecological research assistant
         </p>
@@ -39,6 +41,7 @@ function App() {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);
   const [isOnline, setIsOnline] = useState(false);
+  const [remoteStatus, setRemoteStatus] = useState(null);
   const [expandedReasoning, setExpandedReasoning] = useState(new Set());
   const messagesEndRef = useRef(null);
 
@@ -49,14 +52,16 @@ function App() {
     }
   }, [handleCallback]);
 
-  // Health polling
+  // Health polling (local + remote)
   useEffect(() => {
     const poll = async () => {
       const ok = await checkHealth();
       setIsOnline(ok);
+      const remote = await checkRemoteHealth();
+      setRemoteStatus(remote);
     };
     poll();
-    const id = setInterval(poll, 10000);
+    const id = setInterval(poll, 15000);
     return () => clearInterval(id);
   }, []);
 
@@ -237,7 +242,10 @@ function App() {
                   >
                     <div className="message-header">
                       {msg.type === "agent" && (
-                        <span className="agent-name">Emily</span>
+                        <>
+                          <img src={emilyAvatar} alt="Emily" className="emily-avatar" />
+                          <span className="agent-name">Emily</span>
+                        </>
                       )}
                       {msg.type === "agent" && msg.reasoning && (
                         <>
@@ -271,7 +279,10 @@ function App() {
             </div>
 
             {isLoading && (
-              <div className="loading-animation">Emily is thinking...</div>
+              <div className="loading-animation">
+                <img src={emilyAvatar} alt="Emily" className="emily-avatar" />
+                Emily is thinking...
+              </div>
             )}
 
             <form onSubmit={handleSubmit} className="input-form">
@@ -308,29 +319,59 @@ function App() {
             <div className="content">
               <div className="info-panel">
                 <div className="info-section">
-                  <h3>Connection</h3>
-                  <div className="info-row">
-                    <span className="info-label">Auth</span>
-                    <span className="info-value">{BROKER_URL}</span>
-                  </div>
+                  <h3>Emily Local</h3>
                   <div className="info-row">
-                    <span className="info-label">Chat</span>
+                    <span className="info-label">Endpoint</span>
                     <span className="info-value">{CHAT_URL}</span>
                   </div>
                   <div className="info-row">
-                    <span className="info-label">Mode</span>
-                    <span className="info-value">
-                      {IS_LOCAL_EMILY ? "Emily Local + Hermes Remote" : "Emily Remote"}
+                    <span className="info-label">Status</span>
+                    <span
+                      className={`info-value ${
+                        isOnline ? "text-success" : "text-error"
+                      }`}
+                    >
+                      {isOnline ? "Connected" : "Disconnected"}
                     </span>
                   </div>
+                </div>
+
+                <div className="info-section">
+                  <h3>Hermes Remote (reumanlab)</h3>
+                  <div className="info-row">
+                    <span className="info-label">Endpoint</span>
+                    <span className="info-value">{HERMES_REMOTE_URL}</span>
+                  </div>
                   <div className="info-row">
                     <span className="info-label">Status</span>
                     <span
                       className={`info-value ${
-                        isOnline ? "text-success" : "text-error"
+                        remoteStatus ? "text-success" : "text-error"
                       }`}
                     >
-                      {isOnline ? "Connected" : "Disconnected"}
+                      {remoteStatus ? "Connected" : "Disconnected"}
+                    </span>
+                  </div>
+                  {remoteStatus && (
+                    <div className="info-row">
+                      <span className="info-label">Platform</span>
+                      <span className="info-value">
+                        {remoteStatus.platform || "hermes-agent"}
+                      </span>
+                    </div>
+                  )}
+                </div>
+
+                <div className="info-section">
+                  <h3>Auth</h3>
+                  <div className="info-row">
+                    <span className="info-label">Broker</span>
+                    <span className="info-value">{BROKER_URL}</span>
+                  </div>
+                  <div className="info-row">
+                    <span className="info-label">Mode</span>
+                    <span className="info-value">
+                      {IS_LOCAL_EMILY ? "Emily Local + Hermes Remote" : "Emily Remote"}
                     </span>
                   </div>
                 </div>

frontend/src/api/broker.js

@@ -103,6 +103,19 @@ export async function checkHealth() {
   }
 }
 
+const HERMES_REMOTE_URL =
+  process.env.REACT_APP_HERMES_REMOTE_URL || "https://hermes.ecoseek.org";
+
+export async function checkRemoteHealth() {
+  try {
+    const res = await fetch(`${HERMES_REMOTE_URL}/health`);
+    if (!res.ok) return null;
+    return await res.json();
+  } catch {
+    return null;
+  }
+}
+
 // ── Emily persona ──────────────────────────────────────────────────────
 
 const EMILY_SYSTEM_PROMPT = `You are Emily, an expert ecological scientist and AI assistant for EcoSeek.
@@ -172,4 +185,4 @@ export async function chatCompletion(messages, model = "hermes") {
   return body;
 }
 
-export { BROKER_URL, EMILY_URL, CHAT_URL, IS_LOCAL_EMILY };
+export { BROKER_URL, EMILY_URL, CHAT_URL, IS_LOCAL_EMILY, HERMES_REMOTE_URL };