Skip to content

feat(ui): add BeeColony Monitor for multi-agent legion visualization #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
1688mengdie wants to merge 1 commit into from
Closed

feat(ui): add BeeColony Monitor for multi-agent legion visualization #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
102 changes: 102 additions & 0 deletions src/web-ui/src/app/layout/BeeColonyMonitor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
// BeeColonyMonitor — floating panel for bee-colony-dag MiniApp
$panel-width: 380px;
$panel-height: 560px;
$trigger-offset-bottom: 80px;
$trigger-offset-right: 20px;

.bee-monitor {
position: fixed;
z-index: 700;
pointer-events: none;
&--open { pointer-events: auto; }
}

.bee-monitor__button {
position: fixed;
bottom: $trigger-offset-bottom;
right: $trigger-offset-right;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid var(--bitfun-border-subtle);
background: var(--bitfun-bg-secondary);
color: var(--bitfun-text-secondary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.30);
transition: background 0.2s, color 0.2s, transform 0.2s;
pointer-events: auto;
z-index: 701;
&:hover {
background: var(--bitfun-element-hover);
color: var(--bitfun-accent);
transform: scale(1.08);
}
.bee-monitor--open & { opacity: 0; pointer-events: none; transform: scale(0.8); }
}

.bee-monitor__backdrop {
position: fixed;
inset: 0;
background: transparent;
z-index: 698;
}

.bee-monitor__panel {
position: fixed;
bottom: 136px;
right: $trigger-offset-right;
width: $panel-width;
height: $panel-height;
background: var(--bitfun-bg);
border: 1px solid var(--bitfun-border-subtle);
border-radius: 10px;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
display: flex;
flex-direction: column;
z-index: 699;
overflow: hidden;
transform: translateY(16px) scale(0.96);
opacity: 0;
pointer-events: none;
transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.18s ease;
&--open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
&--maximized {
top: 40px; left: 40px; right: 40px; bottom: 40px;
width: auto; height: auto;
}
}

.bee-monitor__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
border-bottom: 1px solid var(--bitfun-border-subtle);
flex-shrink: 0;
background: var(--bitfun-bg-secondary);
}
.bee-monitor__title {
font-size: 13px; font-weight: 600;
color: var(--bitfun-text);
}
.bee-monitor__header-actions { display: flex; gap: 4px; }
.bee-monitor__header-btn {
width: 28px; height: 28px; border-radius: 6px;
border: none; background: transparent;
color: var(--bitfun-text-secondary); cursor: pointer;
display: flex; align-items: center; justify-content: center;
&:hover { background: var(--bitfun-element-hover); color: var(--bitfun-text); }
&--close:hover { background: rgba(239,68,68,0.15); color: var(--bitfun-error); }
}

.bee-monitor__body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.bee-monitor__loading, .bee-monitor__error {
flex: 1; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 8px;
padding: 24px; text-align: center;
color: var(--bitfun-text-muted); font-size: 13px;
small { font-size: 11px; opacity: 0.7; }
}
147 changes: 147 additions & 0 deletions src/web-ui/src/app/layout/BeeColonyMonitor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
/**
* BeeColonyMonitor — fixed floating panel that renders the bee-colony-dag
* MiniApp DAG visualization. Always accessible via a nav button; stays
* visible alongside other content without taking a full scene tab.
*
* Pattern: FloatingMiniChat-style floating panel with MiniAppRunner inside.
*/
import React, { useState, useCallback, useEffect, useMemo } from 'react';
import { GitBranch, X, Minimize2, Maximize2 } from 'lucide-react';
import { miniAppAPI } from '@/infrastructure/api/service-api/MiniAppAPI';
import type { MiniApp } from '@/infrastructure/api/service-api/MiniAppAPI';
import { useTheme } from '@/infrastructure/theme/hooks/useTheme';
import { useCurrentWorkspace } from '@/infrastructure/contexts/WorkspaceContext';
import { createLogger } from '@/shared/utils/logger';
import MiniAppRunner from '@/app/scenes/miniapps/components/MiniAppRunner';
import { useSceneStore } from '@/app/stores/sceneStore';
import './BeeColonyMonitor.scss';

const log = createLogger('BeeColonyMonitor');

const BEE_COLONY_APP_ID = 'bee-colony-dag';

export const BeeColonyMonitor: React.FC = () => {
const { themeType } = useTheme();
const { workspacePath } = useCurrentWorkspace();
const activeTabId = useSceneStore((s) => s.activeTabId);

const [isOpen, setIsOpen] = useState(false);
const [app, setApp] = useState<MiniApp | null>(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [maximized, setMaximized] = useState(false);

// Only show in agent scene (where the DAG is relevant)
const isAgentScene = useMemo(
() => typeof activeTabId === 'string' && activeTabId.startsWith('agentic:'),
[activeTabId],
);

const loadApp = useCallback(async () => {
setLoading(true);
setError(null);
try {
const loaded = await miniAppAPI.getMiniApp(
BEE_COLONY_APP_ID,
themeType ?? 'dark',
workspacePath || undefined,
);
if (!loaded?.compiled_html?.trim()) {
setError('MiniApp not compiled');
setApp(null);
return;
}
setApp(loaded);
} catch (err) {
log.error('Failed to load bee colony MiniApp', err);
setError(String(err));
setApp(null);
} finally {
setLoading(false);
}
}, [themeType, workspacePath]);

// Load app when panel opens
useEffect(() => {
if (isOpen && !app && !loading) {
void loadApp();
}
}, [isOpen, app, loading, loadApp]);

const handleToggle = useCallback(() => {
setIsOpen((prev) => !prev);
}, []);

const handleClose = useCallback(() => {
setIsOpen(false);
}, []);

// Don't render in non-agent scenes
if (!isAgentScene) return null;

return (
<div className={['bee-monitor', isOpen && 'bee-monitor--open'].filter(Boolean).join(' ')}>
{/* Backdrop */}
{isOpen && <div className="bee-monitor__backdrop" onClick={handleClose} />}

{/* Trigger button — always visible in agent scenes */}
<button
type="button"
className="bee-monitor__button"
onClick={handleToggle}
title="蜂群架构监控"
aria-label="蜂群架构监控"
>
<GitBranch size={18} />
</button>

{/* Floating panel */}
<div
className={[
'bee-monitor__panel',
isOpen && 'bee-monitor__panel--open',
maximized && 'bee-monitor__panel--maximized',
].filter(Boolean).join(' ')}
>
{/* Header */}
<div className="bee-monitor__header">
<span className="bee-monitor__title">蜂群架构监控</span>
<div className="bee-monitor__header-actions">
<button
type="button"
className="bee-monitor__header-btn"
onClick={() => setMaximized((v) => !v)}
title={maximized ? '还原' : '最大化'}
>
{maximized ? <Minimize2 size={14} /> : <Maximize2 size={14} />}
</button>
<button
type="button"
className="bee-monitor__header-btn bee-monitor__header-btn--close"
onClick={handleClose}
title="关闭"
>
<X size={14} />
</button>
</div>
</div>

{/* Body */}
<div className="bee-monitor__body">
{loading && (
<div className="bee-monitor__loading">加载中...</div>
)}
{error && !app && (
<div className="bee-monitor__error">
<p>蜂群 MiniApp 未就绪</p>
<small>{error}. 请确保已编译部署。</small>
</div>
)}
{app && <MiniAppRunner key={app.id} app={app} />}
</div>
</div>
</div>
);
};

export default BeeColonyMonitor;
Loading
Loading