huskies: merge 565_story_gateway_web_ui_shell_with_project_switcher
This commit is contained in:
dave
+238
-1
@@ -9,7 +9,7 @@
|
||||
use poem::EndpointExt;
|
||||
use poem::handler;
|
||||
use poem::http::StatusCode;
|
||||
use poem::web::Data;
|
||||
use poem::web::{Data, Json};
|
||||
use poem::{Body, Request, Response};
|
||||
use reqwest::Client;
|
||||
use serde::{Deserialize, Serialize};
|
||||
@@ -545,6 +545,240 @@ pub async fn gateway_health_handler(state: Data<&Arc<GatewayState>>) -> Response
|
||||
.body(Body::from(serde_json::to_vec(&body).unwrap_or_default()))
|
||||
}
|
||||
|
||||
// ── Gateway Web UI ───────────────────────────────────────────────────
|
||||
|
||||
/// Self-contained HTML page for the gateway web UI. Fetches project list from
|
||||
/// `/api/gateway` and switches projects via `POST /api/gateway/switch`, which
|
||||
/// internally calls the `switch_project` MCP tool logic.
|
||||
const GATEWAY_UI_HTML: &str = r#"<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Huskies Gateway</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background: #0f172a;
|
||||
color: #e2e8f0;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.card {
|
||||
background: #1e293b;
|
||||
border: 1px solid #334155;
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
box-shadow: 0 4px 24px rgba(0,0,0,0.4);
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.logo { font-size: 1.75rem; }
|
||||
h1 { font-size: 1.25rem; font-weight: 600; color: #f8fafc; }
|
||||
.subtitle { font-size: 0.8rem; color: #64748b; margin-top: 0.125rem; }
|
||||
label {
|
||||
display: block;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: #94a3b8;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
select {
|
||||
width: 100%;
|
||||
padding: 0.625rem 0.875rem;
|
||||
background: #0f172a;
|
||||
border: 1px solid #334155;
|
||||
border-radius: 8px;
|
||||
color: #f1f5f9;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 0.875rem center;
|
||||
padding-right: 2.5rem;
|
||||
}
|
||||
select:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 2px rgba(99,102,241,0.25); }
|
||||
.active-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
background: rgba(99,102,241,0.15);
|
||||
border: 1px solid rgba(99,102,241,0.4);
|
||||
border-radius: 999px;
|
||||
padding: 0.25rem 0.75rem;
|
||||
font-size: 0.75rem;
|
||||
color: #a5b4fc;
|
||||
margin-top: 0.875rem;
|
||||
}
|
||||
.dot { width: 6px; height: 6px; border-radius: 50%; background: #6366f1; }
|
||||
.status { margin-top: 1rem; font-size: 0.8rem; color: #64748b; min-height: 1.25rem; }
|
||||
.status.ok { color: #4ade80; }
|
||||
.status.err { color: #f87171; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="card">
|
||||
<div class="header">
|
||||
<span class="logo">🐺</span>
|
||||
<div>
|
||||
<h1>Huskies Gateway</h1>
|
||||
<div class="subtitle">Multi-project orchestration</div>
|
||||
</div>
|
||||
</div>
|
||||
<label for="project-select">Active Project</label>
|
||||
<select id="project-select" onchange="switchProject(this.value)">
|
||||
<option disabled>Loading…</option>
|
||||
</select>
|
||||
<div id="active-label" class="active-badge" style="display:none">
|
||||
<span class="dot"></span>
|
||||
<span id="active-name"></span>
|
||||
</div>
|
||||
<div id="status" class="status"></div>
|
||||
</div>
|
||||
<script>
|
||||
async function loadState() {
|
||||
try {
|
||||
const r = await fetch('/api/gateway');
|
||||
const data = await r.json();
|
||||
const sel = document.getElementById('project-select');
|
||||
sel.innerHTML = '';
|
||||
for (const p of data.projects) {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = p.name;
|
||||
opt.textContent = p.name + ' — ' + p.url;
|
||||
if (p.name === data.active) opt.selected = true;
|
||||
sel.appendChild(opt);
|
||||
}
|
||||
document.getElementById('active-name').textContent = data.active;
|
||||
document.getElementById('active-label').style.display = 'inline-flex';
|
||||
} catch(e) {
|
||||
document.getElementById('status').textContent = 'Failed to load state: ' + e;
|
||||
document.getElementById('status').className = 'status err';
|
||||
}
|
||||
}
|
||||
async function switchProject(name) {
|
||||
const statusEl = document.getElementById('status');
|
||||
statusEl.className = 'status';
|
||||
statusEl.textContent = 'Switching…';
|
||||
try {
|
||||
const r = await fetch('/api/gateway/switch', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({project: name})
|
||||
});
|
||||
const data = await r.json();
|
||||
if (data.ok) {
|
||||
document.getElementById('active-name').textContent = name;
|
||||
statusEl.className = 'status ok';
|
||||
statusEl.textContent = 'Switched to ' + name;
|
||||
} else {
|
||||
statusEl.className = 'status err';
|
||||
statusEl.textContent = data.error || 'Switch failed';
|
||||
loadState();
|
||||
}
|
||||
} catch(e) {
|
||||
statusEl.className = 'status err';
|
||||
statusEl.textContent = 'Error: ' + e;
|
||||
loadState();
|
||||
}
|
||||
}
|
||||
loadState();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
"#;
|
||||
|
||||
/// Serve the gateway web UI HTML page at `GET /`.
|
||||
#[handler]
|
||||
pub async fn gateway_index_handler() -> Response {
|
||||
Response::builder()
|
||||
.status(StatusCode::OK)
|
||||
.header("Content-Type", "text/html; charset=utf-8")
|
||||
.body(Body::from(GATEWAY_UI_HTML))
|
||||
}
|
||||
|
||||
/// `GET /api/gateway` — returns the list of registered projects and the active project.
|
||||
#[handler]
|
||||
pub async fn gateway_api_handler(state: Data<&Arc<GatewayState>>) -> Response {
|
||||
let active = state.active_project.read().await.clone();
|
||||
let projects: Vec<Value> = state
|
||||
.config
|
||||
.projects
|
||||
.iter()
|
||||
.map(|(name, entry)| {
|
||||
json!({
|
||||
"name": name,
|
||||
"url": entry.url,
|
||||
})
|
||||
})
|
||||
.collect();
|
||||
|
||||
let body = json!({ "active": active, "projects": projects });
|
||||
Response::builder()
|
||||
.status(StatusCode::OK)
|
||||
.header("Content-Type", "application/json")
|
||||
.body(Body::from(serde_json::to_vec(&body).unwrap_or_default()))
|
||||
}
|
||||
|
||||
/// Request body for `POST /api/gateway/switch`.
|
||||
#[derive(Deserialize)]
|
||||
struct SwitchRequest {
|
||||
project: String,
|
||||
}
|
||||
|
||||
/// `POST /api/gateway/switch` — switch the active project by calling the
|
||||
/// `switch_project` MCP tool logic, then return `{"ok": true}` or `{"ok": false, "error": "..."}`.
|
||||
#[handler]
|
||||
pub async fn gateway_switch_handler(
|
||||
state: Data<&Arc<GatewayState>>,
|
||||
body: Json<SwitchRequest>,
|
||||
) -> Response {
|
||||
let params = json!({ "arguments": { "project": body.project } });
|
||||
let resp = handle_switch_project(¶ms, &state).await;
|
||||
|
||||
let (ok, error) = if resp.result.is_some() {
|
||||
(true, None)
|
||||
} else {
|
||||
let msg = resp
|
||||
.error
|
||||
.as_ref()
|
||||
.map(|e| e.message.clone())
|
||||
.unwrap_or_else(|| "unknown error".to_string());
|
||||
(false, Some(msg))
|
||||
};
|
||||
|
||||
let body_val = if ok {
|
||||
json!({ "ok": true })
|
||||
} else {
|
||||
json!({ "ok": false, "error": error })
|
||||
};
|
||||
|
||||
let status = if ok {
|
||||
StatusCode::OK
|
||||
} else {
|
||||
StatusCode::BAD_REQUEST
|
||||
};
|
||||
|
||||
Response::builder()
|
||||
.status(status)
|
||||
.header("Content-Type", "application/json")
|
||||
.body(Body::from(
|
||||
serde_json::to_vec(&body_val).unwrap_or_default(),
|
||||
))
|
||||
}
|
||||
|
||||
// ── Gateway server startup ───────────────────────────────────────────
|
||||
|
||||
/// Start the gateway HTTP server. This is the entry point when `--gateway` is used.
|
||||
@@ -588,6 +822,9 @@ pub async fn run(config_path: &Path, port: u16) -> Result<(), std::io::Error> {
|
||||
);
|
||||
|
||||
let route = poem::Route::new()
|
||||
.at("/", poem::get(gateway_index_handler))
|
||||
.at("/api/gateway", poem::get(gateway_api_handler))
|
||||
.at("/api/gateway/switch", poem::post(gateway_switch_handler))
|
||||
.at(
|
||||
"/mcp",
|
||||
poem::post(gateway_mcp_post_handler).get(gateway_mcp_get_handler),
|
||||
|
||||
Reference in New Issue
Block a user