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
2efec74eca
commit
40afc88317
@@ -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