feat(developer): add hybrid iframe integration for developer tools
Replace placeholder pages with ToolEmbed component that embeds LangGraph, LangFlow, and Langfuse in iframes when configured, or shows "Not Configured" placeholders when URLs are empty. Add ServiceUrlsContext for passing service URLs through Dioxus context. Add docker-compose services for local development: LangFlow, LangGraph (trial), Langfuse with full dependency stack (Postgres, ClickHouse, Redis, MinIO). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 4.6
parent
d9401d4be5
commit
a24ea984b1
@@ -2591,6 +2591,58 @@ h6 {
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
/* ===== Tool Embed (iframe integration) ===== */
|
||||
.tool-embed {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
height: calc(100vh - 60px);
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.tool-embed-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 20px;
|
||||
background-color: var(--bg-card);
|
||||
border-bottom: 1px solid var(--border-primary);
|
||||
}
|
||||
|
||||
.tool-embed-title {
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text-heading);
|
||||
}
|
||||
|
||||
.tool-embed-popout-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 14px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--accent);
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--accent);
|
||||
border-radius: 6px;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.tool-embed-popout-btn:hover {
|
||||
background-color: var(--accent);
|
||||
color: var(--bg-body);
|
||||
}
|
||||
|
||||
.tool-embed-iframe {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* ===== Analytics Stats Bar ===== */
|
||||
.analytics-stats-bar {
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user