feat(dash): improved frontend dashboard (#6)

Co-authored-by: Sharang Parnerkar <parnerkarsharang@gmail.com> Reviewed-on: #6
2026-02-19 11:52:41 +00:00
parent f699976f4d
commit a588be306a
46 changed files with 4960 additions and 261 deletions
--- a/src/pages/tools.rs
+++ b/src/pages/tools.rs
@@ -0,0 +1,116 @@
+use dioxus::prelude::*;
+
+use crate::components::{PageHeader, ToolCard};
+use crate::models::{McpTool, ToolCategory, ToolStatus};
+
+/// Tools page displaying a grid of MCP tool cards with toggle switches.
+///
+/// Shows all available MCP tools with their status and allows
+/// enabling/disabling them via toggle buttons.
+#[component]
+pub fn ToolsPage() -> Element {
+    let mut tools = use_signal(mock_tools);
+
+    // Toggle a tool's enabled state by its ID
+    let on_toggle = move |id: String| {
+        tools.write().iter_mut().for_each(|t| {
+            if t.id == id {
+                t.enabled = !t.enabled;
+            }
+        });
+    };
+
+    let tool_list = tools.read().clone();
+
+    rsx! {
+        section { class: "tools-page",
+            PageHeader {
+                title: "Tools".to_string(),
+                subtitle: "Manage MCP servers and tool integrations".to_string(),
+            }
+            div { class: "tools-grid",
+                for tool in tool_list {
+                    ToolCard { key: "{tool.id}", tool, on_toggle }
+                }
+            }
+        }
+    }
+}
+
+/// Returns mock MCP tools for the tools grid.
+fn mock_tools() -> Vec<McpTool> {
+    vec![
+        McpTool {
+            id: "calculator".into(),
+            name: "Calculator".into(),
+            description: "Mathematical computation and unit conversion".into(),
+            category: ToolCategory::Compute,
+            status: ToolStatus::Active,
+            enabled: true,
+            icon: "calculator".into(),
+        },
+        McpTool {
+            id: "tavily".into(),
+            name: "Tavily Search".into(),
+            description: "AI-optimized web search API for real-time information".into(),
+            category: ToolCategory::Search,
+            status: ToolStatus::Active,
+            enabled: true,
+            icon: "search".into(),
+        },
+        McpTool {
+            id: "searxng".into(),
+            name: "SearXNG".into(),
+            description: "Privacy-respecting metasearch engine".into(),
+            category: ToolCategory::Search,
+            status: ToolStatus::Active,
+            enabled: true,
+            icon: "globe".into(),
+        },
+        McpTool {
+            id: "file-reader".into(),
+            name: "File Reader".into(),
+            description: "Read and parse local files in various formats".into(),
+            category: ToolCategory::FileSystem,
+            status: ToolStatus::Active,
+            enabled: true,
+            icon: "file".into(),
+        },
+        McpTool {
+            id: "code-exec".into(),
+            name: "Code Executor".into(),
+            description: "Sandboxed code execution for Python and JavaScript".into(),
+            category: ToolCategory::Code,
+            status: ToolStatus::Inactive,
+            enabled: false,
+            icon: "terminal".into(),
+        },
+        McpTool {
+            id: "web-scraper".into(),
+            name: "Web Scraper".into(),
+            description: "Extract structured data from web pages".into(),
+            category: ToolCategory::Search,
+            status: ToolStatus::Active,
+            enabled: true,
+            icon: "download".into(),
+        },
+        McpTool {
+            id: "email".into(),
+            name: "Email Sender".into(),
+            description: "Send emails via configured SMTP server".into(),
+            category: ToolCategory::Communication,
+            status: ToolStatus::Inactive,
+            enabled: false,
+            icon: "mail".into(),
+        },
+        McpTool {
+            id: "git".into(),
+            name: "Git Operations".into(),
+            description: "Interact with Git repositories for version control".into(),
+            category: ToolCategory::Code,
+            status: ToolStatus::Active,
+            enabled: true,
+            icon: "git".into(),
+        },
+    ]
+}