show inference info

frontend/src/App.tsx

@@ -8,6 +8,7 @@ import {
   getPipelineConversationMessages,
   getGraphDefaultConfig,
   getPipelineDefaultConfig,
+  getRuntimeAuthInfo,
   getMcpToolConfig,
   listPipelineConversations,
   listMcpAvailableTools,
@@ -54,6 +55,7 @@ type McpEntry = {
 
 const DEFAULT_LLM_NAME = "qwen-plus";
 const DEFAULT_API_KEY = "";
+const LOCAL_DASHSCOPE_BASE = "http://127.0.0.1:8500/v1/apps";
 const MCP_TRANSPORT_OPTIONS: McpTransport[] = ["streamable_http", "sse", "stdio"];
 const GRAPH_ARCH_IMAGE_MODULES = import.meta.glob(
   "../assets/images/graph_arch/*.{png,jpg,jpeg,webp,gif}",
@@ -390,6 +392,15 @@ function formatDateTime(value?: string | null): string {
   return new Date(timestamp).toLocaleString();
 }
 
+function stripTrailingSlash(value: string): string {
+  return value.replace(/\/+$/, "");
+}
+
+function buildAgentChatUrlBase(): string {
+  const baseUrl = stripTrailingSlash(LOCAL_DASHSCOPE_BASE);
+  return `${baseUrl}/`;
+}
+
 function toEditable(
   config: GraphConfigReadResponse,
   draft: boolean
@@ -423,6 +434,7 @@ export default function App() {
   const [mcpToolKeys, setMcpToolKeys] = useState<string[]>([]);
   const [mcpToolsByServer, setMcpToolsByServer] = useState<Record<string, string[]>>({});
   const [mcpErrorsByServer, setMcpErrorsByServer] = useState<Record<string, string>>({});
+  const [runtimeFastApiKey, setRuntimeFastApiKey] = useState<string>("");
   const [discussionConversations, setDiscussionConversations] = useState<ConversationListItem[]>([]);
   const [selectedConversationId, setSelectedConversationId] = useState<string | null>(null);
   const [discussionMessages, setDiscussionMessages] = useState<ConversationMessageItem[]>([]);
@@ -497,6 +509,12 @@ export default function App() {
         listGraphConfigs(),
         listPipelines(),
       ]);
+      try {
+        const runtimeAuth = await getRuntimeAuthInfo();
+        setRuntimeFastApiKey(runtimeAuth.fast_api_key || "");
+      } catch {
+        setRuntimeFastApiKey("");
+      }
       setGraphs(graphResp.available_graphs || []);
       setConfigItems(configResp.items || []);
       setRunning(runsResp.items || []);
@@ -1238,20 +1256,37 @@ export default function App() {
                   ) : (
                     selectedRuns.map((run) => (
                       <div key={run.pipeline_id} className="run-card">
-                        <div>
+                        <div className="run-card-columns">
-                          <strong>pipeline_id:</strong> {run.pipeline_id}
+                          <div className="run-card-left">
-                        </div>
+                            <div>
-                        <div>
+                              <strong>pipeline_id:</strong> {run.pipeline_id}
-                          <strong>graph_id:</strong> {run.graph_id}
+                            </div>
-                        </div>
+                            <div>
-                        <div>
+                              <strong>graph_id:</strong> {run.graph_id}
-                          <strong>model:</strong> {run.llm_name}
+                            </div>
-                        </div>
+                            <div>
-                        <div>
+                              <strong>model:</strong> {run.llm_name}
-                          <strong>enabled:</strong> {String(run.enabled)}
+                            </div>
-                        </div>
+                            <div>
-                        <div>
+                              <strong>enabled:</strong> {String(run.enabled)}
-                          <strong>config_file:</strong> {run.config_file}
+                            </div>
+                            <div>
+                              <strong>config_file:</strong> {run.config_file}
+                            </div>
+                          </div>
+                          <div className="run-card-right">
+                            <div>
+                              <strong>FAST_API_KEY:</strong>{" "}
+                              <code>{runtimeFastApiKey || "(not found)"}</code>
+                            </div>
+                            <div>
+                              <strong>chat_url:</strong>{" "}
+                              <code>{buildAgentChatUrlBase()}</code>
+                            </div>
+                            <div>
+                              <strong>app_id:</strong> {run.pipeline_id}
+                            </div>
+                          </div>
                         </div>
                       </div>
                     ))

frontend/src/api/frontApis.ts

@@ -16,6 +16,7 @@ import type {
   PipelineConversationMessagesResponse,
   PipelineListResponse,
   PipelineStopResponse,
+  RuntimeAuthInfoResponse,
 } from "../types";
 
 const API_BASE_URL =
@@ -142,6 +143,10 @@ export function stopPipeline(pipelineId: string): Promise<PipelineStopResponse>
   });
 }
 
+export function getRuntimeAuthInfo(): Promise<RuntimeAuthInfoResponse> {
+  return fetchJson("/v1/runtime-auth");
+}
+
 export async function listPipelineConversations(
   pipelineId: string,
   limit = 100

frontend/src/styles.css

@@ -282,6 +282,33 @@ button:disabled {
   padding: 10px;
 }
 
+.run-card-columns {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: minmax(280px, 1fr) minmax(420px, 1.3fr);
+}
+
+.run-card-left,
+.run-card-right {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.run-card-right {
+  border-left: 1px solid #dbe2ea;
+  min-width: 0;
+  padding-left: 12px;
+}
+
+.run-card-right code {
+  display: inline-block;
+  max-width: 100%;
+  overflow-x: auto;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
 .discussion-section {
   background: #f7fbff;
   border: 1px solid #d7e6f6;

frontend/src/types.ts

@@ -116,6 +116,11 @@ export type PipelineConversationMessagesResponse = {
   count: number;
 };
 
+export type RuntimeAuthInfoResponse = {
+  fast_api_key: string;
+  source: string;
+};
+
 export type McpToolConfigResponse = {
   path: string;
   raw_content: string;