From ae93ef37b6d8e9b1e5c6c7b4b7f43d9286c9b1a1 Mon Sep 17 00:00:00 2001
From: goulustis <cnimaiv@gmail.com>
Date: Thu, 5 Mar 2026 15:19:10 +0800
Subject: [PATCH] update UI

---
 frontend/src/App.tsx    | 37 ++++++++++++++++++++++------
 frontend/src/styles.css | 53 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 83 insertions(+), 7 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 8848d68..5329e68 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -148,18 +148,29 @@ export default function App() {
     () => chooseDisplayItemsByPipeline(visibleConfigItems),
     [visibleConfigItems]
   );
+  const runningPipelineIdSet = useMemo(() => {
+    const ids = new Set<string>();
+    for (const run of running) {
+      if (run.enabled) {
+        ids.add(run.pipeline_id);
+      }
+    }
+    return ids;
+  }, [running]);
 
   const selectedRuns = useMemo(() => {
-    if (!editor?.pipelineId) {
+    const pipelineId = editor?.pipelineId.trim();
+    if (!pipelineId) {
       return [];
     }
     return running.filter((run) => {
-      if (run.pipeline_id !== editor.pipelineId) {
+      if (run.pipeline_id !== pipelineId) {
         return false;
       }
-      return true;
+      return run.enabled;
     });
   }, [editor, running]);
+  const isEditorRunning = selectedRuns.length > 0;
 
   async function refreshConfigs(): Promise<void> {
     const resp = await listGraphConfigs();
@@ -532,12 +543,14 @@ export default function App() {
       id: d.id,
       label: d.pipelineId || "(new agent)",
       graphId: d.graphId,
+      isRunning: d.pipelineId ? runningPipelineIdSet.has(d.pipelineId.trim()) : false,
       isDraft: true,
     })),
     ...displayConfigItems.map((item) => ({
       id: makeAgentKey(item.pipeline_id),
       label: item.pipeline_id,
       graphId: item.graph_id || item.pipeline_id,
+      isRunning: runningPipelineIdSet.has(item.pipeline_id),
       isDraft: false,
     })),
   ];
@@ -573,7 +586,12 @@ export default function App() {
                   }
                 }}
               >
-                <span>{row.label}</span>
+                <span className="agent-item-title">
+                  <span>{row.label}</span>
+                  <span className={`agent-status-pill ${row.isRunning ? "running" : "stopped"}`}>
+                    {row.isRunning ? "Running" : "Stopped"}
+                  </span>
+                </span>
                 <small>{row.graphId}</small>
               </button>
             ))}
@@ -612,10 +630,10 @@ export default function App() {
               <button onClick={saveConfig} disabled={busy || !editor}>
                 Save
               </button>
-              <button onClick={runSelected} disabled={busy || !editor}>
+              <button onClick={runSelected} disabled={busy || !editor || isEditorRunning}>
                 Run
               </button>
-              <button onClick={stopSelected} disabled={busy || !editor}>
+              <button onClick={stopSelected} disabled={busy || !editor || !isEditorRunning}>
                 Stop
               </button>
               <button onClick={deleteSelected} disabled={busy || !editor}>
@@ -720,7 +738,12 @@ export default function App() {
                 </div>
 
                 <div className="run-info">
-                  <h3>Running Instances</h3>
+                  <div className="run-info-header">
+                    <h3>Running Instances</h3>
+                    <span className={`runtime-badge ${isEditorRunning ? "running" : "stopped"}`}>
+                      Runtime: {isEditorRunning ? "Running" : "Stopped"}
+                    </span>
+                  </div>
                   {selectedRuns.length === 0 ? (
                     <p className="empty">No active runs for this agent.</p>
                   ) : (
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 5fb7677..461ba03 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -73,6 +73,33 @@ button:disabled {
   width: 100%;
 }
 
+.agent-item-title {
+  align-items: center;
+  display: flex;
+  gap: 8px;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.agent-status-pill {
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 8px;
+}
+
+.agent-status-pill.running {
+  background: #dff7e7;
+  border: 1px solid #8cd3a1;
+  color: #1a6b35;
+}
+
+.agent-status-pill.stopped {
+  background: #f2f4f7;
+  border: 1px solid #d1d8e0;
+  color: #4a5565;
+}
+
 .agent-item.selected {
   border-color: #4d7ef3;
   background: #edf3ff;
@@ -198,6 +225,32 @@ button:disabled {
   margin-top: 0;
 }
 
+.run-info-header {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.runtime-badge {
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 4px 10px;
+}
+
+.runtime-badge.running {
+  background: #dff7e7;
+  border: 1px solid #8cd3a1;
+  color: #1a6b35;
+}
+
+.runtime-badge.stopped {
+  background: #f2f4f7;
+  border: 1px solid #d1d8e0;
+  color: #4a5565;
+}
+
 .graph-arch-section {
   border: 1px solid #dbe2ea;
   border-radius: 10px;