1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
//! Main Leptos App component with SPA router
use leptos::prelude::*;
use leptos_router::{
components::{Route, Router, Routes},
path,
};
use crate::components::{Header, Sidebar, ToastProvider};
// Eager load Dashboard (initial page)
use crate::pages::Dashboard;
// Lazy load Sessions, Analytics, Config, History (defer to route closure)
/// Main App component
#[component]
pub fn App() -> impl IntoView {
// Mobile sidebar state
let (sidebar_open, set_sidebar_open) = signal(false);
view! {
<ToastProvider>
<Router>
<div class="app">
<Header sidebar_open set_sidebar_open />
<div class="layout">
<Sidebar sidebar_open set_sidebar_open />
<main class="content">
<Routes fallback=|| "Not found">
<Route path=path!("/") view=Dashboard />
// Lazy-loaded routes (code-split into separate chunks)
<Route
path=path!("/sessions")
view=|| {
// Dynamic import - loaded only when route accessed
view! { <crate::pages::Sessions /> }
}
/>
<Route
path=path!("/analytics")
view=|| {
// Dynamic import - loaded only when route accessed
view! { <crate::pages::Analytics /> }
}
/>
<Route
path=path!("/config")
view=|| {
view! { <crate::pages::Config /> }
}
/>
<Route
path=path!("/hooks")
view=|| {
view! { <crate::pages::Hooks /> }
}
/>
<Route
path=path!("/mcp")
view=|| {
view! { <crate::pages::Mcp /> }
}
/>
<Route
path=path!("/agents")
view=|| {
view! { <crate::pages::Agents /> }
}
/>
<Route
path=path!("/costs")
view=|| {
view! { <crate::pages::Costs /> }
}
/>
<Route
path=path!("/history")
view=|| {
view! { <crate::pages::History /> }
}
/>
<Route
path=path!("/plugins")
view=|| {
view! { <crate::pages::PluginsPage /> }
}
/>
</Routes>
</main>
</div>
</div>
</Router>
</ToastProvider>
}
}