feat(frontend): add toast notifications, responsive layout, keyboard shortcuts, and breadcrumbs

- Add sonner Toaster + WebSocket toast bridge (TaskCompleted/Failed/EpicCompleted)
- Responsive sidebar with hamburger menu (mobile) and overlay
- Keyboard shortcuts: D(dashboard), G(DAG), A(agents), M(memory), S(settings)
- Enhanced breadcrumbs with route-aware links and epic context
- Responsive task table with stacked layout on small screens
- Shortcut hints displayed as kbd badges next to nav items

Task: fn-15-react-vite-shadcnui-react-flow-leptos.7

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: z23cc

flowctl/Cargo.lock

@@ -7,7 +7,6 @@ members = [
     "crates/flowctl-service",
     "crates/flowctl-cli",
     "crates/flowctl-daemon",
-    "crates/flowctl-web",
 ]
 
 # ── Shared package metadata (nushell convention) ──────────────────────
@@ -86,24 +85,3 @@ codegen-units = 1
 panic = "abort"
 strip = true
 
-# ── WASM release profile ─────────────────────────────────────────────
-[profile.wasm-release]
-inherits = "release"
-opt-level = "z"
-lto = "fat"
-codegen-units = 1
-
-# ── Leptos web frontend configuration ────────────────────────────────
-[[workspace.metadata.leptos]]
-name = "flowctl-web"
-bin-package = "flowctl-cli"
-lib-package = "flowctl-web"
-site-root = "target/site"
-site-pkg-dir = "pkg"
-style-file = "crates/flowctl-web/style/main.css"
-assets-dir = "crates/flowctl-web/public"
-site-addr = "127.0.0.1:17319"
-reload-port = 17320
-bin-features = ["daemon"]
-lib-features = ["hydrate"]
-lib-profile-release = "wasm-release"

flowctl/Cargo.toml

@@ -12,7 +12,7 @@ path = "src/main.rs"
 
 [features]
 default = ["daemon"]
-daemon = ["dep:flowctl-daemon", "dep:flowctl-web", "dep:tokio", "dep:leptos", "dep:leptos_axum", "dep:any_spawner", "dep:axum"]
+daemon = ["dep:flowctl-daemon", "dep:tokio", "dep:axum", "dep:tower-http"]
 
 [dependencies]
 flowctl-core = { workspace = true }
@@ -21,12 +21,8 @@ flowctl-service = { workspace = true }
 rusqlite = { workspace = true }
 flowctl-scheduler = { workspace = true }
 flowctl-daemon = { path = "../flowctl-daemon", features = ["daemon"], optional = true }
-flowctl-web = { path = "../flowctl-web", features = ["ssr"], optional = true }
-
-leptos = { version = "0.8", features = ["ssr"], optional = true }
-leptos_axum = { version = "0.8", optional = true }
-any_spawner = { version = "0.3", optional = true }
 axum = { workspace = true, optional = true }
+tower-http = { version = "0.6", features = ["fs"], optional = true }
 serde = { workspace = true }
 serde_json = { workspace = true }
 anyhow = { workspace = true }

flowctl/crates/flowctl-cli/Cargo.toml

@@ -613,65 +613,35 @@ fn main() {
                 let result = if let Some(tcp_port) = port {
                     println!("flowctl daemon starting on http://127.0.0.1:{tcp_port}");
 
-                    // Initialize the Leptos/tokio executor for SSR rendering.
-                    let _ = any_spawner::Executor::init_tokio();
-
                     // Build API router from daemon.
                     let (state, cancel) = flowctl_daemon::server::create_state(runtime, event_bus)
                         .expect("failed to create state");
                     let api_router = flowctl_daemon::server::build_router(state);
 
-                    // Serve static CSS at /pkg/flowctl-web.css
-                    let css_content = include_str!("../../flowctl-web/style/main.css");
-                    let css_content_owned = css_content.to_string();
-                    let css_handler = axum::routing::get(move || {
-                        let css = css_content_owned.clone();
-                        async move {
-                            (
-                                [(axum::http::header::CONTENT_TYPE, "text/css")],
-                                css,
-                            )
-                        }
-                    });
-
-                    // Add Leptos SSR fallback: API routes take priority,
-                    // everything else renders the Leptos app via SSR.
-                    // Wrap in HTML shell since we're not using leptos_meta.
-                    let ssr_handler = leptos_axum::render_app_to_stream(
-                        flowctl_web::app::App,
-                    );
-                    let shell_handler = move |req: axum::http::Request<axum::body::Body>| {
-                        let ssr = ssr_handler.clone();
-                        async move {
-                            let resp = ssr(req).await;
-                            let (parts, body) = resp.into_parts();
-                            let bytes = axum::body::to_bytes(body, 1024 * 1024).await.unwrap_or_default();
-                            let inner_html = String::from_utf8_lossy(&bytes);
-                            let full_html = format!(
-                                r#"<!DOCTYPE html>
-<html lang="en" class="dark">
-<head>
-<meta charset="utf-8"/>
-<meta name="viewport" content="width=device-width, initial-scale=1"/>
-<title>flowctl — AI Development Platform</title>
-<link rel="stylesheet" href="/pkg/flowctl-web.css"/>
-</head>
-<body class="bg-gray-900 text-gray-100 min-h-screen">
-{inner_html}
-</body>
-</html>"#
-                            );
-                            axum::http::Response::from_parts(
-                                parts,
-                                axum::body::Body::from(full_html),
+                    // Serve static frontend from frontend/dist/ if it exists,
+                    // with SPA fallback to index.html for non-API routes.
+                    use axum::response::IntoResponse;
+                    let dist_dir = cwd.join("frontend").join("dist");
+                    let router = if dist_dir.exists() {
+                        let index_path = dist_dir.join("index.html");
+                        let spa_fallback = axum::routing::get(move || {
+                            let path = index_path.clone();
+                            async move {
+                                match tokio::fs::read_to_string(&path).await {
+                                    Ok(html) => axum::response::Html(html).into_response(),
+                                    Err(_) => axum::http::StatusCode::NOT_FOUND.into_response(),
+                                }
+                            }
+                        });
+                        api_router
+                            .fallback_service(
+                                tower_http::services::ServeDir::new(&dist_dir)
+                                    .not_found_service(spa_fallback),
                             )
-                        }
+                    } else {
+                        api_router
                     };
 
-                    let router = api_router
-                        .route("/pkg/flowctl-web.css", css_handler)
-                        .fallback(shell_handler);
-
                     let addr = format!("127.0.0.1:{tcp_port}");
                     let listener = tokio::net::TcpListener::bind(&addr).await
                         .expect("failed to bind TCP");

flowctl/crates/flowctl-cli/src/main.rs

@@ -36,7 +36,7 @@ pub fn create_state(runtime: DaemonRuntime, event_bus: flowctl_scheduler::EventB
 }
 
 /// Build the Axum router with all daemon API routes.
-/// Public so the CLI can merge this with other routes (e.g. Leptos SSR).
+/// Public so the CLI can merge this with other routes (e.g. static file serving).
 pub fn build_router(state: AppState) -> axum::Router {
     let cors = CorsLayer::new()
         .allow_origin(Any)

flowctl/crates/flowctl-daemon/src/server.rs

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en" class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Flow Code</title>
+    <script type="module" crossorigin src="/assets/index-DaNm_tyw.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-DvONfYNF.css">
+  </head>
+  <body class="bg-bg-primary text-text-primary min-h-screen antialiased">
+    <div id="root"></div>
+  </body>
+</html>

frontend/dist/assets/index-DaNm_tyw.js

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en" class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Flow Code</title>
+  </head>
+  <body class="bg-bg-primary text-text-primary min-h-screen antialiased">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>