crashlabs/huskies
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 26 Wiki Activity

huskies: merge 569_story_gateway_ui_cross_project_pipeline_status_view

Browse Source
This commit is contained in:
dave
2026-04-15 18:34:37 +00:00
parent ce37281333
commit 744cc9dca4
3 changed files with 288 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/api/gateway.ts
+35
View File
@@ -24,6 +24,28 @@ export interface GatewayInfo {
projects: GatewayProject[];
}
export interface PipelineItem {
story_id: string;
name: string;
stage: string;
agent?: { agent_name: string; model: string; status: string } | null;
blocked?: boolean;
retry_count?: number;
merge_failure?: string;
}
export interface ProjectPipelineStatus {
active: PipelineItem[];
backlog: { story_id: string; name: string }[];
backlog_count: number;
error?: string;
}
export interface AllProjectsPipeline {
active: string;
projects: Record<string, ProjectPipelineStatus>;
}
export interface GenerateTokenResponse {
token: string;
}
@@ -111,4 +133,17 @@ export const gatewayApi = {
method: "POST",
});
},
/// Fetch pipeline status from all registered projects.
getAllProjectsPipeline(): Promise<AllProjectsPipeline> {
return gatewayRequest<AllProjectsPipeline>("/api/gateway/pipeline");
},
/// Switch the active project.
switchProject(project: string): Promise<{ ok: boolean; error?: string }> {
return gatewayRequest<{ ok: boolean; error?: string }>(
"/api/gateway/switch",
{ method: "POST", body: JSON.stringify({ project }) },
);
},
};
frontend/src/components/GatewayPanel.tsx
+189 -8
View File
@@ -1,13 +1,21 @@
/// Gateway management panel shown when huskies runs in `--gateway` mode.
///
/// Provides:
/// - A cross-project pipeline status view showing active stories per project.
/// - Clicking a project card switches to it.
/// - An "Add Agent" button that generates a one-time join token.
/// - Instructions for running a build agent with the token.
/// - A list of connected agents with per-agent status, project assignment, and "Remove" buttons.
/// - Auto-refresh every 5 seconds so new agents and disconnections appear without a page reload.
import * as React from "react";
import { gatewayApi, type JoinedAgent, type GatewayProject } from "../api/gateway";
import {
gatewayApi,
type JoinedAgent,
type GatewayProject,
type AllProjectsPipeline,
type PipelineItem,
} from "../api/gateway";
const { useCallback, useEffect, useRef, useState } = React;
@@ -40,6 +48,127 @@ const STATUS_LABELS: Record<AgentStatus, string> = {
disconnected: "Disconnected",
};
const STAGE_COLORS: Record<string, string> = {
current: "#3fb950",
qa: "#d2a679",
merge: "#79c0ff",
done: "#6e7681",
};
const STAGE_LABELS: Record<string, string> = {
current: "In Progress",
qa: "QA",
merge: "Merging",
done: "Done",
};
/// A single story row inside a project pipeline card.
function StoryRow({ item }: { item: PipelineItem }) {
const color = STAGE_COLORS[item.stage] ?? "#8b949e";
const label = STAGE_LABELS[item.stage] ?? item.stage;
return (
<div
style={{
display: "flex",
alignItems: "center",
gap: "8px",
padding: "4px 0",
fontSize: "0.82em",
}}
>
<span
style={{
padding: "1px 6px",
borderRadius: "10px",
background: `${color}22`,
color,
border: `1px solid ${color}44`,
whiteSpace: "nowrap",
flexShrink: 0,
}}
>
{label}
</span>
<span style={{ color: "#e6edf3", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
{item.name}
</span>
</div>
);
}
/// Pipeline status card for a single project.
function ProjectPipelineCard({
name,
pipeline,
isActive,
onSwitch,
}: {
name: string;
pipeline: AllProjectsPipeline["projects"][string];
isActive: boolean;
onSwitch: (name: string) => void;
}) {
const activeItems = pipeline.active ?? [];
const backlogCount = pipeline.backlog_count ?? 0;
const hasError = Boolean(pipeline.error);
return (
<div
data-testid={`pipeline-card-${name}`}
onClick={() => onSwitch(name)}
style={{
padding: "12px 16px",
background: "#161b22",
border: `1px solid ${isActive ? "#238636" : "#30363d"}`,
borderRadius: "8px",
marginBottom: "8px",
cursor: "pointer",
}}
>
<div
style={{
display: "flex",
alignItems: "center",
gap: "8px",
marginBottom: activeItems.length > 0 ? "8px" : 0,
}}
>
<span style={{ fontWeight: 600, color: "#e6edf3" }}>{name}</span>
{isActive && (
<span
style={{
fontSize: "0.7em",
padding: "1px 6px",
borderRadius: "10px",
background: "#23863622",
color: "#3fb950",
border: "1px solid #23863644",
}}
>
active
</span>
)}
<span style={{ marginLeft: "auto", fontSize: "0.75em", color: "#6e7681" }}>
{backlogCount > 0 ? `${backlogCount} in backlog` : ""}
</span>
</div>
{hasError ? (
<div style={{ fontSize: "0.8em", color: "#f85149" }}>{pipeline.error}</div>
) : activeItems.length === 0 ? (
<div style={{ fontSize: "0.8em", color: "#6e7681" }}>No active stories</div>
) : (
<div>
{activeItems.map((item) => (
<StoryRow key={item.story_id} item={item} />
))}
</div>
)}
</div>
);
}
function TokenDisplay({ token }: { token: string }) {
const [copied, setCopied] = useState(false);
@@ -237,16 +366,18 @@ export function GatewayPanel() {
const [token, setToken] = useState<string | null>(null);
const [generating, setGenerating] = useState(false);
const [error, setError] = useState<string | null>(null);
const [pipeline, setPipeline] = useState<AllProjectsPipeline | null>(null);
// Add-project form state
const [newProjectName, setNewProjectName] = useState("");
const [newProjectUrl, setNewProjectUrl] = useState("");
const [addingProject, setAddingProject] = useState(false);
// Keep a stable ref to setAgents so the polling interval doesn't need to
// be recreated when the agents list changes.
// Keep stable refs so polling intervals don't recreate on state changes.
const setAgentsRef = useRef(setAgents);
setAgentsRef.current = setAgents;
const setPipelineRef = useRef(setPipeline);
setPipelineRef.current = setPipeline;
useEffect(() => {
// Initial load.
@@ -258,16 +389,22 @@ export function GatewayPanel() {
.getGatewayInfo()
.then((info) => setProjects(info.projects))
.catch(() => setProjects([]));
gatewayApi
.getAllProjectsPipeline()
.then(setPipeline)
.catch(() => setPipeline(null));
// Poll the agent list so the dashboard auto-updates when agents connect
// or disconnect.
// Poll so the dashboard auto-updates as agents connect/disconnect and
// stories move through pipelines.
const timer = setInterval(() => {
gatewayApi
.listAgents()
.then((updated) => setAgentsRef.current(updated))
.catch(() => {
// Swallow poll errors to avoid spamming the error banner.
});
.catch(() => {});
gatewayApi
.getAllProjectsPipeline()
.then((updated) => setPipelineRef.current(updated))
.catch(() => {});
}, POLL_INTERVAL_MS);
return () => clearInterval(timer);
@@ -328,6 +465,22 @@ export function GatewayPanel() {
}
}, [newProjectName, newProjectUrl]);
const handleSwitchProject = useCallback(async (name: string) => {
setError(null);
try {
const result = await gatewayApi.switchProject(name);
if (!result.ok) {
setError(result.error ?? "Failed to switch project");
return;
}
// Refresh pipeline to reflect new active project.
const updated = await gatewayApi.getAllProjectsPipeline();
setPipeline(updated);
} catch (e) {
setError(e instanceof Error ? e.message : String(e));
}
}, []);
const handleRemoveProject = useCallback(async (name: string) => {
if (!window.confirm(`Remove project "${name}"? This cannot be undone.`)) {
return;
@@ -359,6 +512,34 @@ export function GatewayPanel() {
Manage build agents connected to this gateway.
</p>
{/* Cross-project pipeline status */}
<section style={{ marginBottom: "32px" }}>
<h2
style={{
fontSize: "1.1em",
fontWeight: 600,
marginBottom: "12px",
borderBottom: "1px solid #21262d",
paddingBottom: "8px",
}}
>
Pipeline Status
</h2>
{pipeline ? (
Object.entries(pipeline.projects).map(([name, status]) => (
<ProjectPipelineCard
key={name}
name={name}
pipeline={status}
isActive={name === pipeline.active}
onSwitch={handleSwitchProject}
/>
))
) : (
<p style={{ color: "#6e7681" }}>Loading pipeline status…</p>
)}
</section>
{/* Add Agent */}
<section style={{ marginBottom: "32px" }}>
<h2
server/src/gateway.rs
+64
View File
@@ -1313,6 +1313,66 @@ fn toml_string(s: &str) -> String {
format!("\"{}\"", s.replace('\\', "\\\\").replace('"', "\\\""))
}
/// `GET /api/gateway/pipeline` — fetch pipeline status from all registered projects.
///
/// Returns `{ "active": "<project>", "projects": { "<name>": { "active": [...], "backlog": [...], "backlog_count": N } | { "error": "..." } } }`.
#[handler]
pub async fn gateway_all_pipeline_handler(state: Data<&Arc<GatewayState>>) -> Response {
let project_entries: Vec<(String, String)> = state
.projects
.read()
.await
.iter()
.map(|(n, e)| (n.clone(), e.url.clone()))
.collect();
let mut results: BTreeMap<String, Value> = BTreeMap::new();
for (name, url) in &project_entries {
let mcp_url = format!("{}/mcp", url.trim_end_matches('/'));
let rpc_body = json!({
"jsonrpc": "2.0",
"id": 1,
"method": "tools/call",
"params": {
"name": "get_pipeline_status",
"arguments": {}
}
});
let status = match state.client.post(&mcp_url).json(&rpc_body).send().await {
Ok(resp) => match resp.json::<Value>().await {
Ok(upstream) => {
// The tool result is a JSON string embedded in content[0].text.
if let Some(text) = upstream
.get("result")
.and_then(|r| r.get("content"))
.and_then(|c| c.get(0))
.and_then(|c| c.get("text"))
.and_then(|t| t.as_str())
{
serde_json::from_str(text)
.unwrap_or_else(|_| json!({ "error": "invalid pipeline json" }))
} else {
json!({ "error": "unexpected response shape" })
}
}
Err(e) => json!({ "error": format!("invalid response: {e}") }),
},
Err(e) => json!({ "error": format!("unreachable: {e}") }),
};
results.insert(name.clone(), status);
}
let active = state.active_project.read().await.clone();
let body = json!({ "active": active, "projects": results });
Response::builder()
.status(StatusCode::OK)
.header("Content-Type", "application/json")
.body(Body::from(serde_json::to_vec(&body).unwrap_or_default()))
}
/// `GET /api/gateway/bot-config` — return current bot.toml fields as JSON.
#[handler]
pub async fn gateway_bot_config_get_handler(state: Data<&Arc<GatewayState>>) -> Response {
@@ -1622,6 +1682,10 @@ pub async fn run(config_path: &Path, port: u16) -> Result<(), std::io::Error> {
.at("/bot-config", poem::get(gateway_bot_config_page_handler))
.at("/api/gateway", poem::get(gateway_api_handler))
.at("/api/gateway/switch", poem::post(gateway_switch_handler))
.at(
"/api/gateway/pipeline",
poem::get(gateway_all_pipeline_handler),
)
.at(
"/api/gateway/projects",
poem::post(gateway_add_project_handler),