From d4b4ef36908a78869ae9eb2f66869184eb971eb6 Mon Sep 17 00:00:00 2001
From: goulustis <cnimaiv@gmail.com>
Date: Thu, 12 Feb 2026 11:03:04 +0800
Subject: [PATCH] add graph architecture to config page

---
 frontend/src/App.tsx    | 30 ++++++++++++++++++++++++++++++
 frontend/src/styles.css | 24 ++++++++++++++++++++++++
 2 files changed, 54 insertions(+)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index aad5069..0eaec5f 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -31,6 +31,10 @@ type EditableAgent = {
 const DEFAULT_ENTRY_POINT = "fastapi_server/server_dashscope.py";
 const DEFAULT_LLM_NAME = "qwen-plus";
 const DEFAULT_PORT = 8100;
+const GRAPH_ARCH_IMAGE_MODULES = import.meta.glob(
+  "../assets/images/graph_arch/*.{png,jpg,jpeg,webp,gif}",
+  { eager: true, import: "default" }
+) as Record<string, string>;
 const FALLBACK_PROMPTS_BY_GRAPH: Record<string, Record<string, string>> = {
   routing: {
     route_prompt: "",
@@ -60,6 +64,18 @@ function parseToolCsv(value: string): string[] {
   return out;
 }
 
+function getGraphArchImage(graphId: string): string | null {
+  const normalizedGraphId = graphId.trim().toLowerCase();
+  for (const [path, source] of Object.entries(GRAPH_ARCH_IMAGE_MODULES)) {
+    const fileName = path.split("/").pop() || "";
+    const baseName = fileName.split(".")[0]?.toLowerCase() || "";
+    if (baseName === normalizedGraphId) {
+      return source;
+    }
+  }
+  return null;
+}
+
 function toEditable(
   config: GraphConfigReadResponse,
   draft: boolean
@@ -432,6 +448,7 @@ export default function App() {
       isDraft: false,
     })),
   ];
+  const graphArchImage = editor ? getGraphArchImage(editor.graphId) : null;
 
   return (
     <div className="app">
@@ -512,6 +529,19 @@ export default function App() {
               </select>
             </label>
 
+            {graphArchImage && (
+              <div className="graph-arch-section">
+                <h3>Graph Architecture</h3>
+                <div className="graph-arch-image-container">
+                  <img
+                    src={graphArchImage}
+                    alt={`${editor.graphId} architecture diagram`}
+                    className="graph-arch-image"
+                  />
+                </div>
+              </div>
+            )}
+
             <label>
               pipeline_id
               <input
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index d0aa203..ce2ba13 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -148,6 +148,30 @@ button:disabled {
   margin-top: 0;
 }
 
+.graph-arch-section {
+  border: 1px solid #dbe2ea;
+  border-radius: 10px;
+  grid-column: 1 / -1;
+  padding: 12px;
+}
+
+.graph-arch-section h3 {
+  margin-top: 0;
+}
+
+.graph-arch-image-container {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  overflow: auto;
+}
+
+.graph-arch-image {
+  border-radius: 8px;
+  border: 1px solid #dbe2ea;
+  max-width: 100%;
+}
+
 .run-card {
   border: 1px solid #dbe2ea;
   border-radius: 8px;