diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 1b57f26..e422c01 100644 --- a/frontend/src/App.tsx +++ b/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([]); const [mcpToolsByServer, setMcpToolsByServer] = useState>({}); const [mcpErrorsByServer, setMcpErrorsByServer] = useState>({}); + const [runtimeFastApiKey, setRuntimeFastApiKey] = useState(""); const [discussionConversations, setDiscussionConversations] = useState([]); const [selectedConversationId, setSelectedConversationId] = useState(null); const [discussionMessages, setDiscussionMessages] = useState([]); @@ -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) => (
-
- pipeline_id: {run.pipeline_id} -
-
- graph_id: {run.graph_id} -
-
- model: {run.llm_name} -
-
- enabled: {String(run.enabled)} -
-
- config_file: {run.config_file} +
+
+
+ pipeline_id: {run.pipeline_id} +
+
+ graph_id: {run.graph_id} +
+
+ model: {run.llm_name} +
+
+ enabled: {String(run.enabled)} +
+
+ config_file: {run.config_file} +
+
+
+
+ FAST_API_KEY:{" "} + {runtimeFastApiKey || "(not found)"} +
+
+ chat_url:{" "} + {buildAgentChatUrlBase()} +
+
+ app_id: {run.pipeline_id} +
+
)) diff --git a/frontend/src/api/frontApis.ts b/frontend/src/api/frontApis.ts index 548957a..a2d9d69 100644 --- a/frontend/src/api/frontApis.ts +++ b/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 }); } +export function getRuntimeAuthInfo(): Promise { + return fetchJson("/v1/runtime-auth"); +} + export async function listPipelineConversations( pipelineId: string, limit = 100 diff --git a/frontend/src/styles.css b/frontend/src/styles.css index 15fc0b0..19b0d9f 100644 --- a/frontend/src/styles.css +++ b/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; diff --git a/frontend/src/types.ts b/frontend/src/types.ts index 83b91b5..f92a234 100644 --- a/frontend/src/types.ts +++ b/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;