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

Co-authored-by: Sharang Parnerkar <parnerkarsharang@gmail.com>
Reviewed-on: #6

src/pages/chat.rs

@@ -0,0 +1,145 @@
+use dioxus::prelude::*;
+
+use crate::components::ChatBubble;
+use crate::models::{ChatMessage, ChatRole, ChatSession};
+
+/// ChatGPT-style chat interface with session list and message area.
+///
+/// Full-height layout: left panel shows session history,
+/// right panel shows messages and input bar.
+#[component]
+pub fn ChatPage() -> Element {
+    let sessions = use_signal(mock_sessions);
+    let mut active_session_id = use_signal(|| "session-1".to_string());
+    let mut input_text = use_signal(String::new);
+
+    // Clone data out of signals before entering the rsx! block to avoid
+    // holding a `Signal::read()` borrow across potential await points.
+    let sessions_list = sessions.read().clone();
+    let current_id = active_session_id.read().clone();
+    let active_session = sessions_list.iter().find(|s| s.id == current_id).cloned();
+
+    rsx! {
+        section { class: "chat-page",
+            div { class: "chat-sidebar-panel",
+                div { class: "chat-sidebar-header",
+                    h3 { "Conversations" }
+                    button { class: "btn-icon", "+" }
+                }
+                div { class: "chat-session-list",
+                    for session in &sessions_list {
+                        {
+                            let is_active = session.id == current_id;
+                            let class = if is_active {
+                                "chat-session-item chat-session-item--active"
+                            } else {
+                                "chat-session-item"
+                            };
+                            let id = session.id.clone();
+                            rsx! {
+                                button { class: "{class}", onclick: move |_| active_session_id.set(id.clone()),
+                                    div { class: "chat-session-title", "{session.title}" }
+                                    div { class: "chat-session-date", "{session.created_at}" }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            div { class: "chat-main-panel",
+                if let Some(session) = &active_session {
+                    div { class: "chat-messages",
+                        for msg in &session.messages {
+                            ChatBubble { key: "{msg.id}", message: msg.clone() }
+                        }
+                    }
+                } else {
+                    div { class: "chat-empty",
+                        p { "Select a conversation or start a new one." }
+                    }
+                }
+                div { class: "chat-input-bar",
+                    button { class: "btn-icon chat-attach-btn", "+" }
+                    input {
+                        class: "chat-input",
+                        r#type: "text",
+                        placeholder: "Type a message...",
+                        value: "{input_text}",
+                        oninput: move |evt: Event<FormData>| {
+                            input_text.set(evt.value());
+                        },
+                    }
+                    button { class: "btn-primary chat-send-btn", "Send" }
+                }
+            }
+        }
+    }
+}
+
+/// Returns mock chat sessions with sample messages.
+fn mock_sessions() -> Vec<ChatSession> {
+    vec![
+        ChatSession {
+            id: "session-1".into(),
+            title: "RAG Pipeline Setup".into(),
+            messages: vec![
+                ChatMessage {
+                    id: "msg-1".into(),
+                    role: ChatRole::User,
+                    content: "How do I set up a RAG pipeline with Ollama?".into(),
+                    attachments: vec![],
+                    timestamp: "10:30".into(),
+                },
+                ChatMessage {
+                    id: "msg-2".into(),
+                    role: ChatRole::Assistant,
+                    content: "To set up a RAG pipeline with Ollama, you'll need to: \
+                        1) Install Ollama and pull your preferred model, \
+                        2) Set up a vector database (e.g. ChromaDB), \
+                        3) Create an embedding pipeline for your documents, \
+                        4) Wire the retrieval step into your prompt chain."
+                        .into(),
+                    attachments: vec![],
+                    timestamp: "10:31".into(),
+                },
+            ],
+            created_at: "2026-02-18".into(),
+        },
+        ChatSession {
+            id: "session-2".into(),
+            title: "GDPR Compliance Check".into(),
+            messages: vec![
+                ChatMessage {
+                    id: "msg-3".into(),
+                    role: ChatRole::User,
+                    content: "What data does CERTifAI store about users?".into(),
+                    attachments: vec![],
+                    timestamp: "09:15".into(),
+                },
+                ChatMessage {
+                    id: "msg-4".into(),
+                    role: ChatRole::Assistant,
+                    content: "CERTifAI stores only the minimum data required: \
+                        email address, session tokens, and usage metrics. \
+                        All data stays on your infrastructure."
+                        .into(),
+                    attachments: vec![],
+                    timestamp: "09:16".into(),
+                },
+            ],
+            created_at: "2026-02-17".into(),
+        },
+        ChatSession {
+            id: "session-3".into(),
+            title: "MCP Server Configuration".into(),
+            messages: vec![ChatMessage {
+                id: "msg-5".into(),
+                role: ChatRole::User,
+                content: "How do I add a new MCP server?".into(),
+                attachments: vec![],
+                timestamp: "14:00".into(),
+            }],
+            created_at: "2026-02-16".into(),
+        },
+    ]
+}

src/pages/dashboard.rs

@@ -0,0 +1,67 @@
+use dioxus::prelude::*;
+
+use crate::components::{NewsCardView, PageHeader};
+use crate::models::NewsCategory;
+
+/// Dashboard page displaying an AI news feed grid with category filters.
+///
+/// Replaces the previous `OverviewPage`. Shows mock news items
+/// that will eventually be sourced from the SearXNG instance.
+#[component]
+pub fn DashboardPage() -> Element {
+    let news = use_signal(crate::components::news_card::mock_news);
+    let mut active_filter = use_signal(|| Option::<NewsCategory>::None);
+
+    // Collect filtered news items based on active category filter
+    let filtered: Vec<_> = {
+        let items = news.read();
+        let filter = active_filter.read();
+        match &*filter {
+            Some(cat) => items
+                .iter()
+                .filter(|n| n.category == *cat)
+                .cloned()
+                .collect(),
+            None => items.clone(),
+        }
+    };
+
+    // All available filter categories
+    let categories = [
+        ("All", None),
+        ("LLM", Some(NewsCategory::Llm)),
+        ("Agents", Some(NewsCategory::Agents)),
+        ("Privacy", Some(NewsCategory::Privacy)),
+        ("Infrastructure", Some(NewsCategory::Infrastructure)),
+        ("Open Source", Some(NewsCategory::OpenSource)),
+    ];
+
+    rsx! {
+        section { class: "dashboard-page",
+            PageHeader {
+                title: "Dashboard".to_string(),
+                subtitle: "AI news and updates".to_string(),
+            }
+            div { class: "dashboard-filters",
+                for (label , cat) in categories {
+                    {
+                        let is_active = *active_filter.read() == cat;
+                        let class = if is_active {
+                            "filter-tab filter-tab--active"
+                        } else {
+                            "filter-tab"
+                        };
+                        rsx! {
+                            button { class: "{class}", onclick: move |_| active_filter.set(cat.clone()), "{label}" }
+                        }
+                    }
+                }
+            }
+            div { class: "news-grid",
+                for card in filtered {
+                    NewsCardView { key: "{card.title}", card }
+                }
+            }
+        }
+    }
+}

src/pages/developer/agents.rs

@@ -0,0 +1,24 @@
+use dioxus::prelude::*;
+
+/// Agents page placeholder for the LangGraph agent builder.
+///
+/// Shows a "Coming Soon" card with a disabled launch button.
+/// Will eventually integrate with the LangGraph framework.
+#[component]
+pub fn AgentsPage() -> Element {
+    rsx! {
+        section { class: "placeholder-page",
+            div { class: "placeholder-card",
+                div { class: "placeholder-icon", "A" }
+                h2 { "Agent Builder" }
+                p { class: "placeholder-desc",
+                    "Build and manage AI agents with LangGraph. \
+                    Create multi-step reasoning pipelines, tool-using agents, \
+                    and autonomous workflows."
+                }
+                button { class: "btn-primary", disabled: true, "Launch Agent Builder" }
+                span { class: "placeholder-badge", "Coming Soon" }
+            }
+        }
+    }
+}

src/pages/developer/analytics.rs

@@ -0,0 +1,65 @@
+use dioxus::prelude::*;
+
+use crate::models::AnalyticsMetric;
+
+/// Analytics page placeholder for LangFuse integration.
+///
+/// Shows a "Coming Soon" card with a disabled launch button,
+/// plus a mock stats bar showing sample metrics.
+#[component]
+pub fn AnalyticsPage() -> Element {
+    let metrics = mock_metrics();
+
+    rsx! {
+        section { class: "placeholder-page",
+            div { class: "analytics-stats-bar",
+                for metric in &metrics {
+                    div { class: "analytics-stat",
+                        span { class: "analytics-stat-value", "{metric.value}" }
+                        span { class: "analytics-stat-label", "{metric.label}" }
+                        span { class: if metric.change_pct >= 0.0 { "analytics-stat-change analytics-stat-change--up" } else { "analytics-stat-change analytics-stat-change--down" },
+                            "{metric.change_pct:+.1}%"
+                        }
+                    }
+                }
+            }
+            div { class: "placeholder-card",
+                div { class: "placeholder-icon", "L" }
+                h2 { "Analytics & Observability" }
+                p { class: "placeholder-desc",
+                    "Monitor and analyze your AI pipelines with LangFuse. \
+                    Track token usage, latency, costs, and quality metrics \
+                    across all your deployments."
+                }
+                button { class: "btn-primary", disabled: true, "Launch LangFuse" }
+                span { class: "placeholder-badge", "Coming Soon" }
+            }
+        }
+    }
+}
+
+/// Returns mock analytics metrics for the stats bar.
+fn mock_metrics() -> Vec<AnalyticsMetric> {
+    vec![
+        AnalyticsMetric {
+            label: "Total Requests".into(),
+            value: "12,847".into(),
+            change_pct: 14.2,
+        },
+        AnalyticsMetric {
+            label: "Avg Latency".into(),
+            value: "245ms".into(),
+            change_pct: -8.5,
+        },
+        AnalyticsMetric {
+            label: "Tokens Used".into(),
+            value: "2.4M".into(),
+            change_pct: 22.1,
+        },
+        AnalyticsMetric {
+            label: "Error Rate".into(),
+            value: "0.3%".into(),
+            change_pct: -12.0,
+        },
+    ]
+}

src/pages/developer/flow.rs

@@ -0,0 +1,24 @@
+use dioxus::prelude::*;
+
+/// Flow page placeholder for the LangFlow visual workflow builder.
+///
+/// Shows a "Coming Soon" card with a disabled launch button.
+/// Will eventually integrate with LangFlow for visual flow design.
+#[component]
+pub fn FlowPage() -> Element {
+    rsx! {
+        section { class: "placeholder-page",
+            div { class: "placeholder-card",
+                div { class: "placeholder-icon", "F" }
+                h2 { "Flow Builder" }
+                p { class: "placeholder-desc",
+                    "Design visual AI workflows with LangFlow. \
+                    Drag-and-drop nodes to create data processing pipelines, \
+                    prompt chains, and integration flows."
+                }
+                button { class: "btn-primary", disabled: true, "Launch Flow Builder" }
+                span { class: "placeholder-badge", "Coming Soon" }
+            }
+        }
+    }
+}

src/pages/developer/mod.rs

@@ -0,0 +1,41 @@
+mod agents;
+mod analytics;
+mod flow;
+
+pub use agents::*;
+pub use analytics::*;
+pub use flow::*;
+
+use dioxus::prelude::*;
+
+use crate::app::Route;
+use crate::components::sub_nav::{SubNav, SubNavItem};
+
+/// Shell layout for the Developer section.
+///
+/// Renders a horizontal tab bar (Agents, Flow, Analytics) above
+/// the child route outlet. Sits inside the main `AppShell` layout.
+#[component]
+pub fn DeveloperShell() -> Element {
+    let tabs = vec![
+        SubNavItem {
+            label: "Agents",
+            route: Route::AgentsPage {},
+        },
+        SubNavItem {
+            label: "Flow",
+            route: Route::FlowPage {},
+        },
+        SubNavItem {
+            label: "Analytics",
+            route: Route::AnalyticsPage {},
+        },
+    ];
+
+    rsx! {
+        div { class: "developer-shell",
+            SubNav { items: tabs }
+            div { class: "shell-content", Outlet::<Route> {} }
+        }
+    }
+}

src/pages/impressum.rs

@@ -0,0 +1,74 @@
+use dioxus::prelude::*;
+use dioxus_free_icons::icons::bs_icons::BsShieldCheck;
+use dioxus_free_icons::Icon;
+
+use crate::Route;
+
+/// Impressum (legal notice) page required by German/EU law.
+///
+/// Displays placeholder company information. This page is publicly
+/// accessible without authentication.
+#[component]
+pub fn ImpressumPage() -> Element {
+    rsx! {
+        div { class: "legal-page",
+            nav { class: "legal-nav",
+                Link { to: Route::LandingPage {}, class: "landing-logo",
+                    span { class: "landing-logo-icon",
+                        Icon { icon: BsShieldCheck, width: 20, height: 20 }
+                    }
+                    span { "CERTifAI" }
+                }
+            }
+            main { class: "legal-content",
+                h1 { "Impressum" }
+
+                h2 { "Information according to 5 TMG" }
+                p {
+                    "CERTifAI GmbH"
+                    br {}
+                    "Musterstrasse 1"
+                    br {}
+                    "10115 Berlin"
+                    br {}
+                    "Germany"
+                }
+
+                h2 { "Represented by" }
+                p { "Managing Director: [Name]" }
+
+                h2 { "Contact" }
+                p {
+                    "Email: info@certifai.example"
+                    br {}
+                    "Phone: +49 (0) 30 1234567"
+                }
+
+                h2 { "Commercial Register" }
+                p {
+                    "Registered at: Amtsgericht Berlin-Charlottenburg"
+                    br {}
+                    "Registration number: HRB XXXXXX"
+                }
+
+                h2 { "VAT ID" }
+                p { "VAT identification number according to 27a UStG: DE XXXXXXXXX" }
+
+                h2 { "Responsible for content according to 55 Abs. 2 RStV" }
+                p {
+                    "[Name]"
+                    br {}
+                    "CERTifAI GmbH"
+                    br {}
+                    "Musterstrasse 1"
+                    br {}
+                    "10115 Berlin"
+                }
+            }
+            footer { class: "legal-footer",
+                Link { to: Route::LandingPage {}, "Back to Home" }
+                Link { to: Route::PrivacyPage {}, "Privacy Policy" }
+            }
+        }
+    }
+}

src/pages/knowledge.rs

@@ -0,0 +1,124 @@
+use dioxus::prelude::*;
+
+use crate::components::{FileRow, PageHeader};
+use crate::models::{FileKind, KnowledgeFile};
+
+/// Knowledge Base page with file explorer table and upload controls.
+///
+/// Displays uploaded documents used for RAG retrieval with their
+/// metadata, chunk counts, and management actions.
+#[component]
+pub fn KnowledgePage() -> Element {
+    let mut files = use_signal(mock_files);
+    let mut search_query = use_signal(String::new);
+
+    // Filter files by search query (case-insensitive name match)
+    let query = search_query.read().to_lowercase();
+    let filtered: Vec<_> = files
+        .read()
+        .iter()
+        .filter(|f| query.is_empty() || f.name.to_lowercase().contains(&query))
+        .cloned()
+        .collect();
+
+    // Remove a file by ID
+    let on_delete = move |id: String| {
+        files.write().retain(|f| f.id != id);
+    };
+
+    rsx! {
+        section { class: "knowledge-page",
+            PageHeader {
+                title: "Knowledge Base".to_string(),
+                subtitle: "Manage documents for RAG retrieval".to_string(),
+                actions: rsx! {
+                    button { class: "btn-primary", "Upload File" }
+                },
+            }
+            div { class: "knowledge-toolbar",
+                input {
+                    class: "form-input knowledge-search",
+                    r#type: "text",
+                    placeholder: "Search files...",
+                    value: "{search_query}",
+                    oninput: move |evt: Event<FormData>| {
+                        search_query.set(evt.value());
+                    },
+                }
+            }
+            div { class: "knowledge-table-wrapper",
+                table { class: "knowledge-table",
+                    thead {
+                        tr {
+                            th { "Name" }
+                            th { "Type" }
+                            th { "Size" }
+                            th { "Chunks" }
+                            th { "Uploaded" }
+                            th { "Actions" }
+                        }
+                    }
+                    tbody {
+                        for file in filtered {
+                            FileRow { key: "{file.id}", file, on_delete }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+/// Returns mock knowledge base files.
+fn mock_files() -> Vec<KnowledgeFile> {
+    vec![
+        KnowledgeFile {
+            id: "f1".into(),
+            name: "company-handbook.pdf".into(),
+            kind: FileKind::Pdf,
+            size_bytes: 2_450_000,
+            uploaded_at: "2026-02-15".into(),
+            chunk_count: 142,
+        },
+        KnowledgeFile {
+            id: "f2".into(),
+            name: "api-reference.md".into(),
+            kind: FileKind::Text,
+            size_bytes: 89_000,
+            uploaded_at: "2026-02-14".into(),
+            chunk_count: 34,
+        },
+        KnowledgeFile {
+            id: "f3".into(),
+            name: "sales-data-q4.csv".into(),
+            kind: FileKind::Spreadsheet,
+            size_bytes: 1_200_000,
+            uploaded_at: "2026-02-12".into(),
+            chunk_count: 67,
+        },
+        KnowledgeFile {
+            id: "f4".into(),
+            name: "deployment-guide.pdf".into(),
+            kind: FileKind::Pdf,
+            size_bytes: 540_000,
+            uploaded_at: "2026-02-10".into(),
+            chunk_count: 28,
+        },
+        KnowledgeFile {
+            id: "f5".into(),
+            name: "onboarding-checklist.md".into(),
+            kind: FileKind::Text,
+            size_bytes: 12_000,
+            uploaded_at: "2026-02-08".into(),
+            chunk_count: 8,
+        },
+        KnowledgeFile {
+            id: "f6".into(),
+            name: "architecture-diagram.png".into(),
+            kind: FileKind::Image,
+            size_bytes: 3_800_000,
+            uploaded_at: "2026-02-05".into(),
+            chunk_count: 1,
+        },
+    ]
+}

src/pages/landing.rs

@@ -0,0 +1,508 @@
+use dioxus::prelude::*;
+use dioxus_free_icons::icons::bs_icons::{
+    BsArrowRight, BsGlobe2, BsKey, BsRobot, BsServer, BsShieldCheck,
+};
+use dioxus_free_icons::icons::fa_solid_icons::FaCubes;
+use dioxus_free_icons::Icon;
+
+use crate::Route;
+
+/// Public landing page for the CERTifAI platform.
+///
+/// Displays a marketing-oriented page with hero section, feature grid,
+/// how-it-works steps, and call-to-action banners. This page is accessible
+/// without authentication.
+#[component]
+pub fn LandingPage() -> Element {
+    rsx! {
+        div { class: "landing",
+            LandingNav {}
+            HeroSection {}
+            SocialProof {}
+            FeaturesGrid {}
+            HowItWorks {}
+            CtaBanner {}
+            LandingFooter {}
+        }
+    }
+}
+
+/// Sticky top navigation bar with logo, nav links, and CTA buttons.
+#[component]
+fn LandingNav() -> Element {
+    rsx! {
+        nav { class: "landing-nav",
+            div { class: "landing-nav-inner",
+                Link { to: Route::LandingPage {}, class: "landing-logo",
+                    span { class: "landing-logo-icon",
+                        Icon { icon: BsShieldCheck, width: 24, height: 24 }
+                    }
+                    span { "CERTifAI" }
+                }
+                div { class: "landing-nav-links",
+                    a { href: "#features", "Features" }
+                    a { href: "#how-it-works", "How It Works" }
+                    a { href: "#pricing", "Pricing" }
+                }
+                div { class: "landing-nav-actions",
+                    Link {
+                        to: Route::Login {
+                            redirect_url: "/dashboard".into(),
+                        },
+                        class: "btn btn-ghost btn-sm",
+                        "Log In"
+                    }
+                    Link {
+                        to: Route::Login {
+                            redirect_url: "/dashboard".into(),
+                        },
+                        class: "btn btn-primary btn-sm",
+                        "Get Started"
+                    }
+                }
+            }
+        }
+    }
+}
+
+/// Hero section with headline, subtitle, and CTA buttons.
+#[component]
+fn HeroSection() -> Element {
+    rsx! {
+        section { class: "hero-section",
+            div { class: "hero-content",
+                div { class: "hero-badge badge badge-outline", "Privacy-First GenAI Infrastructure" }
+                h1 { class: "hero-title",
+                    "Your AI. Your Data."
+                    br {}
+                    span { class: "hero-title-accent", "Your Infrastructure." }
+                }
+                p { class: "hero-subtitle",
+                    "Self-hosted, GDPR-compliant generative AI platform for "
+                    "enterprises that refuse to compromise on data sovereignty. "
+                    "Deploy LLMs, agents, and MCP servers on your own terms."
+                }
+                div { class: "hero-actions",
+                    Link {
+                        to: Route::Login {
+                            redirect_url: "/dashboard".into(),
+                        },
+                        class: "btn btn-primary btn-lg",
+                        "Get Started"
+                        Icon { icon: BsArrowRight, width: 18, height: 18 }
+                    }
+                    a { href: "#features", class: "btn btn-outline btn-lg", "Learn More" }
+                }
+            }
+            div { class: "hero-graphic",
+                // Abstract shield/network SVG motif
+                svg {
+                    view_box: "0 0 400 400",
+                    fill: "none",
+                    width: "100%",
+                    height: "100%",
+                    // Gradient definitions
+                    defs {
+                        linearGradient {
+                            id: "grad1",
+                            x1: "0%",
+                            y1: "0%",
+                            x2: "100%",
+                            y2: "100%",
+                            stop { offset: "0%", stop_color: "#91a4d2" }
+                            stop { offset: "100%", stop_color: "#6d85c6" }
+                        }
+                        linearGradient {
+                            id: "grad2",
+                            x1: "0%",
+                            y1: "100%",
+                            x2: "100%",
+                            y2: "0%",
+                            stop { offset: "0%", stop_color: "#f97066" }
+                            stop { offset: "100%", stop_color: "#f9a066" }
+                        }
+                        radialGradient {
+                            id: "glow",
+                            cx: "50%",
+                            cy: "50%",
+                            r: "50%",
+                            stop {
+                                offset: "0%",
+                                stop_color: "rgba(145,164,210,0.3)",
+                            }
+                            stop {
+                                offset: "100%",
+                                stop_color: "rgba(145,164,210,0)",
+                            }
+                        }
+                    }
+                    // Background glow
+                    circle {
+                        cx: "200",
+                        cy: "200",
+                        r: "180",
+                        fill: "url(#glow)",
+                    }
+                    // Shield outline
+                    path {
+                        d: "M200 40 L340 110 L340 230 C340 300 270 360 200 380 \
+                            C130 360 60 300 60 230 L60 110 Z",
+                        stroke: "url(#grad1)",
+                        stroke_width: "2",
+                        fill: "none",
+                        opacity: "0.6",
+                    }
+                    // Inner shield
+                    path {
+                        d: "M200 80 L310 135 L310 225 C310 280 255 330 200 345 \
+                            C145 330 90 280 90 225 L90 135 Z",
+                        stroke: "url(#grad1)",
+                        stroke_width: "1.5",
+                        fill: "rgba(145,164,210,0.05)",
+                        opacity: "0.8",
+                    }
+                    // Network nodes
+                    circle {
+                        cx: "200",
+                        cy: "180",
+                        r: "8",
+                        fill: "url(#grad1)",
+                    }
+                    circle {
+                        cx: "150",
+                        cy: "230",
+                        r: "6",
+                        fill: "url(#grad2)",
+                    }
+                    circle {
+                        cx: "250",
+                        cy: "230",
+                        r: "6",
+                        fill: "url(#grad2)",
+                    }
+                    circle {
+                        cx: "200",
+                        cy: "280",
+                        r: "6",
+                        fill: "url(#grad1)",
+                    }
+                    circle {
+                        cx: "130",
+                        cy: "170",
+                        r: "4",
+                        fill: "#91a4d2",
+                        opacity: "0.6",
+                    }
+                    circle {
+                        cx: "270",
+                        cy: "170",
+                        r: "4",
+                        fill: "#91a4d2",
+                        opacity: "0.6",
+                    }
+                    // Network connections
+                    line {
+                        x1: "200",
+                        y1: "180",
+                        x2: "150",
+                        y2: "230",
+                        stroke: "#91a4d2",
+                        stroke_width: "1",
+                        opacity: "0.4",
+                    }
+                    line {
+                        x1: "200",
+                        y1: "180",
+                        x2: "250",
+                        y2: "230",
+                        stroke: "#91a4d2",
+                        stroke_width: "1",
+                        opacity: "0.4",
+                    }
+                    line {
+                        x1: "150",
+                        y1: "230",
+                        x2: "200",
+                        y2: "280",
+                        stroke: "#91a4d2",
+                        stroke_width: "1",
+                        opacity: "0.4",
+                    }
+                    line {
+                        x1: "250",
+                        y1: "230",
+                        x2: "200",
+                        y2: "280",
+                        stroke: "#91a4d2",
+                        stroke_width: "1",
+                        opacity: "0.4",
+                    }
+                    line {
+                        x1: "200",
+                        y1: "180",
+                        x2: "130",
+                        y2: "170",
+                        stroke: "#91a4d2",
+                        stroke_width: "1",
+                        opacity: "0.3",
+                    }
+                    line {
+                        x1: "200",
+                        y1: "180",
+                        x2: "270",
+                        y2: "170",
+                        stroke: "#91a4d2",
+                        stroke_width: "1",
+                        opacity: "0.3",
+                    }
+                    // Checkmark inside shield center
+                    path {
+                        d: "M180 200 L195 215 L225 185",
+                        stroke: "url(#grad1)",
+                        stroke_width: "3",
+                        stroke_linecap: "round",
+                        stroke_linejoin: "round",
+                        fill: "none",
+                    }
+                }
+            }
+        }
+    }
+}
+
+/// Social proof / trust indicator strip.
+#[component]
+fn SocialProof() -> Element {
+    rsx! {
+        section { class: "social-proof",
+            p { class: "social-proof-text",
+                "Built for enterprises that value "
+                span { class: "social-proof-highlight", "data sovereignty" }
+            }
+            div { class: "social-proof-stats",
+                div { class: "proof-stat",
+                    span { class: "proof-stat-value", "100%" }
+                    span { class: "proof-stat-label", "On-Premise" }
+                }
+                div { class: "proof-divider" }
+                div { class: "proof-stat",
+                    span { class: "proof-stat-value", "GDPR" }
+                    span { class: "proof-stat-label", "Compliant" }
+                }
+                div { class: "proof-divider" }
+                div { class: "proof-stat",
+                    span { class: "proof-stat-value", "EU" }
+                    span { class: "proof-stat-label", "Data Residency" }
+                }
+                div { class: "proof-divider" }
+                div { class: "proof-stat",
+                    span { class: "proof-stat-value", "Zero" }
+                    span { class: "proof-stat-label", "Third-Party Sharing" }
+                }
+            }
+        }
+    }
+}
+
+/// Feature cards grid section.
+#[component]
+fn FeaturesGrid() -> Element {
+    rsx! {
+        section { id: "features", class: "features-section",
+            h2 { class: "section-title", "Everything You Need" }
+            p { class: "section-subtitle",
+                "A complete, self-hosted GenAI stack under your full control."
+            }
+            div { class: "features-grid",
+                FeatureCard {
+                    icon: rsx! {
+                        Icon { icon: BsServer, width: 28, height: 28 }
+                    },
+                    title: "Self-Hosted Infrastructure",
+                    description: "Deploy on your own hardware or private cloud. \
+                        Full control over your AI stack with no external dependencies.",
+                }
+                FeatureCard {
+                    icon: rsx! {
+                        Icon { icon: BsShieldCheck, width: 28, height: 28 }
+                    },
+                    title: "GDPR Compliant",
+                    description: "EU data residency guaranteed. Your data never \
+                        leaves your infrastructure or gets shared with third parties.",
+                }
+                FeatureCard {
+                    icon: rsx! {
+                        Icon { icon: FaCubes, width: 28, height: 28 }
+                    },
+                    title: "LLM Management",
+                    description: "Deploy, monitor, and manage multiple language \
+                        models. Switch between models with zero downtime.",
+                }
+                FeatureCard {
+                    icon: rsx! {
+                        Icon { icon: BsRobot, width: 28, height: 28 }
+                    },
+                    title: "Agent Builder",
+                    description: "Create custom AI agents with integrated Langchain \
+                        and Langfuse for full observability and control.",
+                }
+                FeatureCard {
+                    icon: rsx! {
+                        Icon { icon: BsGlobe2, width: 28, height: 28 }
+                    },
+                    title: "MCP Server Management",
+                    description: "Manage Model Context Protocol servers to extend \
+                        your AI capabilities with external tool integrations.",
+                }
+                FeatureCard {
+                    icon: rsx! {
+                        Icon { icon: BsKey, width: 28, height: 28 }
+                    },
+                    title: "API Key Management",
+                    description: "Generate API keys, track usage per seat, and \
+                        set fine-grained permissions for every integration.",
+                }
+            }
+        }
+    }
+}
+
+/// Individual feature card.
+///
+/// # Arguments
+///
+/// * `icon` - The icon element to display
+/// * `title` - Feature title
+/// * `description` - Feature description text
+#[component]
+fn FeatureCard(icon: Element, title: &'static str, description: &'static str) -> Element {
+    rsx! {
+        div { class: "card feature-card",
+            div { class: "feature-card-icon", {icon} }
+            h3 { class: "feature-card-title", "{title}" }
+            p { class: "feature-card-desc", "{description}" }
+        }
+    }
+}
+
+/// Three-step "How It Works" section.
+#[component]
+fn HowItWorks() -> Element {
+    rsx! {
+        section { id: "how-it-works", class: "how-it-works-section",
+            h2 { class: "section-title", "Up and Running in Minutes" }
+            p { class: "section-subtitle", "Three steps to sovereign AI infrastructure." }
+            div { class: "steps-grid",
+                StepCard {
+                    number: "01",
+                    title: "Deploy",
+                    description: "Install CERTifAI on your infrastructure \
+                        with a single command. Supports Docker, Kubernetes, \
+                        and bare metal.",
+                }
+                StepCard {
+                    number: "02",
+                    title: "Configure",
+                    description: "Connect your identity provider, select \
+                        your models, and set up team permissions through \
+                        the admin dashboard.",
+                }
+                StepCard {
+                    number: "03",
+                    title: "Scale",
+                    description: "Add users, deploy more models, and \
+                        integrate with your existing tools via API keys \
+                        and MCP servers.",
+                }
+            }
+        }
+    }
+}
+
+/// Individual step card.
+///
+/// # Arguments
+///
+/// * `number` - Step number string (e.g. "01")
+/// * `title` - Step title
+/// * `description` - Step description text
+#[component]
+fn StepCard(number: &'static str, title: &'static str, description: &'static str) -> Element {
+    rsx! {
+        div { class: "step-card",
+            span { class: "step-number", "{number}" }
+            h3 { class: "step-title", "{title}" }
+            p { class: "step-desc", "{description}" }
+        }
+    }
+}
+
+/// Call-to-action banner before the footer.
+#[component]
+fn CtaBanner() -> Element {
+    rsx! {
+        section { class: "cta-banner",
+            h2 { class: "cta-title", "Ready to take control of your AI infrastructure?" }
+            p { class: "cta-subtitle",
+                "Start deploying sovereign GenAI today. No credit card required."
+            }
+            div { class: "cta-actions",
+                Link {
+                    to: Route::Login {
+                        redirect_url: "/dashboard".into(),
+                    },
+                    class: "btn btn-primary btn-lg",
+                    "Get Started Free"
+                    Icon { icon: BsArrowRight, width: 18, height: 18 }
+                }
+                Link {
+                    to: Route::Login {
+                        redirect_url: "/dashboard".into(),
+                    },
+                    class: "btn btn-outline btn-lg",
+                    "Log In"
+                }
+            }
+        }
+    }
+}
+
+/// Landing page footer with links and copyright.
+#[component]
+fn LandingFooter() -> Element {
+    rsx! {
+        footer { class: "landing-footer",
+            div { class: "landing-footer-inner",
+                div { class: "footer-brand",
+                    div { class: "landing-logo",
+                        span { class: "landing-logo-icon",
+                            Icon { icon: BsShieldCheck, width: 20, height: 20 }
+                        }
+                        span { "CERTifAI" }
+                    }
+                    p { class: "footer-tagline", "Sovereign GenAI infrastructure for enterprises." }
+                }
+                div { class: "footer-links-group",
+                    h4 { class: "footer-links-heading", "Product" }
+                    a { href: "#features", "Features" }
+                    a { href: "#how-it-works", "How It Works" }
+                    a { href: "#pricing", "Pricing" }
+                }
+                div { class: "footer-links-group",
+                    h4 { class: "footer-links-heading", "Legal" }
+                    Link { to: Route::ImpressumPage {}, "Impressum" }
+                    Link { to: Route::PrivacyPage {}, "Privacy Policy" }
+                }
+                div { class: "footer-links-group",
+                    h4 { class: "footer-links-heading", "Resources" }
+                    a { href: "#", "Documentation" }
+                    a { href: "#", "API Reference" }
+                    a { href: "#", "Support" }
+                }
+            }
+            div { class: "footer-bottom",
+                p { "2026 CERTifAI. All rights reserved." }
+            }
+        }
+    }
+}

src/pages/mod.rs

@@ -1,2 +1,21 @@
-mod overview;
-pub use overview::*;
+mod chat;
+mod dashboard;
+pub mod developer;
+mod impressum;
+mod knowledge;
+mod landing;
+pub mod organization;
+mod privacy;
+mod providers;
+mod tools;
+
+pub use chat::*;
+pub use dashboard::*;
+pub use developer::*;
+pub use impressum::*;
+pub use knowledge::*;
+pub use landing::*;
+pub use organization::*;
+pub use privacy::*;
+pub use providers::*;
+pub use tools::*;

src/pages/organization/dashboard.rs

@@ -0,0 +1,170 @@
+use dioxus::prelude::*;
+
+use crate::components::{MemberRow, PageHeader};
+use crate::models::{BillingUsage, MemberRole, OrgMember};
+
+/// Organization dashboard with billing stats, member table, and invite modal.
+///
+/// Shows current billing usage, a table of organization members
+/// with role management, and a button to invite new members.
+#[component]
+pub fn OrgDashboardPage() -> Element {
+    let members = use_signal(mock_members);
+    let usage = mock_usage();
+    let mut show_invite = use_signal(|| false);
+    let mut invite_email = use_signal(String::new);
+
+    let members_list = members.read().clone();
+
+    // Format token counts for display
+    let tokens_display = format_tokens(usage.tokens_used);
+    let tokens_limit_display = format_tokens(usage.tokens_limit);
+
+    rsx! {
+        section { class: "org-dashboard-page",
+            PageHeader {
+                title: "Organization".to_string(),
+                subtitle: "Manage members and billing".to_string(),
+                actions: rsx! {
+                    button { class: "btn-primary", onclick: move |_| show_invite.set(true), "Invite Member" }
+                },
+            }
+
+            // Stats bar
+            div { class: "org-stats-bar",
+                div { class: "org-stat",
+                    span { class: "org-stat-value", "{usage.seats_used}/{usage.seats_total}" }
+                    span { class: "org-stat-label", "Seats Used" }
+                }
+                div { class: "org-stat",
+                    span { class: "org-stat-value", "{tokens_display}" }
+                    span { class: "org-stat-label", "of {tokens_limit_display} tokens" }
+                }
+                div { class: "org-stat",
+                    span { class: "org-stat-value", "{usage.billing_cycle_end}" }
+                    span { class: "org-stat-label", "Cycle Ends" }
+                }
+            }
+
+            // Members table
+            div { class: "org-table-wrapper",
+                table { class: "org-table",
+                    thead {
+                        tr {
+                            th { "Name" }
+                            th { "Email" }
+                            th { "Role" }
+                            th { "Joined" }
+                        }
+                    }
+                    tbody {
+                        for member in members_list {
+                            MemberRow {
+                                key: "{member.id}",
+                                member,
+                                on_role_change: move |_| {},
+                            }
+                        }
+                    }
+                }
+            }
+
+            // Invite modal
+            if *show_invite.read() {
+                div {
+                    class: "modal-overlay",
+                    onclick: move |_| show_invite.set(false),
+                    div {
+                        class: "modal-content",
+                        // Prevent clicks inside modal from closing it
+                        onclick: move |evt: Event<MouseData>| evt.stop_propagation(),
+                        h3 { "Invite New Member" }
+                        div { class: "form-group",
+                            label { "Email Address" }
+                            input {
+                                class: "form-input",
+                                r#type: "email",
+                                placeholder: "colleague@company.com",
+                                value: "{invite_email}",
+                                oninput: move |evt: Event<FormData>| {
+                                    invite_email.set(evt.value());
+                                },
+                            }
+                        }
+                        div { class: "modal-actions",
+                            button {
+                                class: "btn-secondary",
+                                onclick: move |_| show_invite.set(false),
+                                "Cancel"
+                            }
+                            button {
+                                class: "btn-primary",
+                                onclick: move |_| show_invite.set(false),
+                                "Send Invite"
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+/// Formats a token count into a human-readable string (e.g. "1.2M").
+fn format_tokens(count: u64) -> String {
+    const M: u64 = 1_000_000;
+    const K: u64 = 1_000;
+
+    if count >= M {
+        format!("{:.1}M", count as f64 / M as f64)
+    } else if count >= K {
+        format!("{:.0}K", count as f64 / K as f64)
+    } else {
+        count.to_string()
+    }
+}
+
+/// Returns mock organization members.
+fn mock_members() -> Vec<OrgMember> {
+    vec![
+        OrgMember {
+            id: "m1".into(),
+            name: "Max Mustermann".into(),
+            email: "max@example.com".into(),
+            role: MemberRole::Admin,
+            joined_at: "2026-01-10".into(),
+        },
+        OrgMember {
+            id: "m2".into(),
+            name: "Erika Musterfrau".into(),
+            email: "erika@example.com".into(),
+            role: MemberRole::Member,
+            joined_at: "2026-01-15".into(),
+        },
+        OrgMember {
+            id: "m3".into(),
+            name: "Johann Schmidt".into(),
+            email: "johann@example.com".into(),
+            role: MemberRole::Member,
+            joined_at: "2026-02-01".into(),
+        },
+        OrgMember {
+            id: "m4".into(),
+            name: "Anna Weber".into(),
+            email: "anna@example.com".into(),
+            role: MemberRole::Viewer,
+            joined_at: "2026-02-10".into(),
+        },
+    ]
+}
+
+/// Returns mock billing usage data.
+fn mock_usage() -> BillingUsage {
+    BillingUsage {
+        seats_used: 4,
+        seats_total: 25,
+        tokens_used: 847_000,
+        tokens_limit: 1_000_000,
+        billing_cycle_end: "2026-03-01".into(),
+    }
+}

src/pages/organization/mod.rs

@@ -0,0 +1,35 @@
+mod dashboard;
+mod pricing;
+
+pub use dashboard::*;
+pub use pricing::*;
+
+use dioxus::prelude::*;
+
+use crate::app::Route;
+use crate::components::sub_nav::{SubNav, SubNavItem};
+
+/// Shell layout for the Organization section.
+///
+/// Renders a horizontal tab bar (Pricing, Dashboard) above
+/// the child route outlet. Sits inside the main `AppShell` layout.
+#[component]
+pub fn OrgShell() -> Element {
+    let tabs = vec![
+        SubNavItem {
+            label: "Pricing",
+            route: Route::OrgPricingPage {},
+        },
+        SubNavItem {
+            label: "Dashboard",
+            route: Route::OrgDashboardPage {},
+        },
+    ];
+
+    rsx! {
+        div { class: "org-shell",
+            SubNav { items: tabs }
+            div { class: "shell-content", Outlet::<Route> {} }
+        }
+    }
+}

src/pages/organization/pricing.rs

@@ -0,0 +1,88 @@
+use dioxus::prelude::*;
+
+use crate::app::Route;
+use crate::components::{PageHeader, PricingCard};
+use crate::models::PricingPlan;
+
+/// Organization pricing page displaying three plan tiers.
+///
+/// Clicking "Get Started" on any plan navigates to the
+/// organization dashboard.
+#[component]
+pub fn OrgPricingPage() -> Element {
+    let navigator = use_navigator();
+    let plans = mock_plans();
+
+    rsx! {
+        section { class: "pricing-page",
+            PageHeader {
+                title: "Pricing".to_string(),
+                subtitle: "Choose the plan that fits your organization".to_string(),
+            }
+            div { class: "pricing-grid",
+                for plan in plans {
+                    PricingCard {
+                        key: "{plan.id}",
+                        plan,
+                        on_select: move |_| {
+                            navigator.push(Route::OrgDashboardPage {});
+                        },
+                    }
+                }
+            }
+        }
+    }
+}
+
+/// Returns mock pricing plans.
+fn mock_plans() -> Vec<PricingPlan> {
+    vec![
+        PricingPlan {
+            id: "starter".into(),
+            name: "Starter".into(),
+            price_eur: 49,
+            features: vec![
+                "Up to 5 users".into(),
+                "1 LLM provider".into(),
+                "100K tokens/month".into(),
+                "Community support".into(),
+                "Basic analytics".into(),
+            ],
+            highlighted: false,
+            max_seats: Some(5),
+        },
+        PricingPlan {
+            id: "team".into(),
+            name: "Team".into(),
+            price_eur: 199,
+            features: vec![
+                "Up to 25 users".into(),
+                "All LLM providers".into(),
+                "1M tokens/month".into(),
+                "Priority support".into(),
+                "Advanced analytics".into(),
+                "Custom MCP tools".into(),
+                "SSO integration".into(),
+            ],
+            highlighted: true,
+            max_seats: Some(25),
+        },
+        PricingPlan {
+            id: "enterprise".into(),
+            name: "Enterprise".into(),
+            price_eur: 499,
+            features: vec![
+                "Unlimited users".into(),
+                "All LLM providers".into(),
+                "Unlimited tokens".into(),
+                "Dedicated support".into(),
+                "Full observability".into(),
+                "Custom integrations".into(),
+                "SLA guarantee".into(),
+                "On-premise deployment".into(),
+            ],
+            highlighted: false,
+            max_seats: None,
+        },
+    ]
+}

src/pages/overview.rs

@@ -1,102 +0,0 @@
-use dioxus::prelude::*;
-use dioxus_free_icons::icons::bs_icons::BsBook;
-use dioxus_free_icons::icons::fa_solid_icons::{FaChartLine, FaCubes, FaGears};
-use dioxus_free_icons::Icon;
-
-use crate::components::DashboardCard;
-use crate::Route;
-
-/// Overview dashboard page rendered inside the `AppShell` layout.
-///
-/// Displays a welcome heading and a grid of quick-access cards
-/// for the main GenAI platform tools.
-#[component]
-pub fn OverviewPage() -> Element {
-    // Check authentication status on mount via a server function.
-    let auth_check = use_resource(check_auth);
-    let navigator = use_navigator();
-
-    // Once the server responds, redirect unauthenticated users to /auth.
-    use_effect(move || {
-        if let Some(Ok(false)) = auth_check() {
-            navigator.push(NavigationTarget::<Route>::External(
-                "/auth?redirect_url=/".into(),
-            ));
-        }
-    });
-
-    match auth_check() {
-        // Still waiting for the server to respond.
-        None => rsx! {},
-        // Not authenticated -- render nothing while the redirect fires.
-        Some(Ok(false)) => rsx! {},
-        // Authenticated -- render the overview dashboard.
-        Some(Ok(true)) => rsx! {
-            section { class: "overview-page",
-                h1 { class: "overview-heading", "GenAI Dashboard" }
-                div { class: "dashboard-grid",
-                    DashboardCard {
-                        title: "Documentation".to_string(),
-                        description: "Guides & API Reference".to_string(),
-                        href: "#".to_string(),
-                        icon: rsx! {
-                            Icon { icon: BsBook, width: 28, height: 28 }
-                        },
-                    }
-                    DashboardCard {
-                        title: "Langfuse".to_string(),
-                        description: "Observability & Analytics".to_string(),
-                        href: "#".to_string(),
-                        icon: rsx! {
-                            Icon { icon: FaChartLine, width: 28, height: 28 }
-                        },
-                    }
-                    DashboardCard {
-                        title: "Langchain".to_string(),
-                        description: "Agent Framework".to_string(),
-                        href: "#".to_string(),
-                        icon: rsx! {
-                            Icon { icon: FaGears, width: 28, height: 28 }
-                        },
-                    }
-                    DashboardCard {
-                        title: "Hugging Face".to_string(),
-                        description: "Browse Models".to_string(),
-                        href: "#".to_string(),
-                        icon: rsx! {
-                            Icon { icon: FaCubes, width: 28, height: 28 }
-                        },
-                    }
-                }
-            }
-        },
-        // Server error -- surface it so it is not silently swallowed.
-        Some(Err(err)) => rsx! {
-            p { "Error: {err}" }
-        },
-    }
-}
-
-/// Check whether the current request has an active logged-in session.
-///
-/// # Returns
-///
-/// `true` if the session contains a logged-in user, `false` otherwise.
-///
-/// # Errors
-///
-/// Returns `ServerFnError` if the session cannot be extracted from the request.
-#[server]
-async fn check_auth() -> Result<bool, ServerFnError> {
-    use crate::infrastructure::{UserStateInner, LOGGED_IN_USER_SESS_KEY};
-    use tower_sessions::Session;
-
-    // Extract the tower_sessions::Session from the Axum request.
-    let session: Session = FullstackContext::extract().await?;
-    let user: Option<UserStateInner> = session
-        .get(LOGGED_IN_USER_SESS_KEY)
-        .await
-        .map_err(|e| ServerFnError::new(format!("session read failed: {e}")))?;
-
-    Ok(user.is_some())
-}

src/pages/privacy.rs

@@ -0,0 +1,106 @@
+use dioxus::prelude::*;
+use dioxus_free_icons::icons::bs_icons::BsShieldCheck;
+use dioxus_free_icons::Icon;
+
+use crate::Route;
+
+/// Privacy Policy page.
+///
+/// Displays the platform's privacy policy. Publicly accessible
+/// without authentication.
+#[component]
+pub fn PrivacyPage() -> Element {
+    rsx! {
+        div { class: "legal-page",
+            nav { class: "legal-nav",
+                Link { to: Route::LandingPage {}, class: "landing-logo",
+                    span { class: "landing-logo-icon",
+                        Icon { icon: BsShieldCheck, width: 20, height: 20 }
+                    }
+                    span { "CERTifAI" }
+                }
+            }
+            main { class: "legal-content",
+                h1 { "Privacy Policy" }
+                p { class: "legal-updated", "Last updated: February 2026" }
+
+                h2 { "1. Introduction" }
+                p {
+                    "CERTifAI GmbH (\"we\", \"our\", \"us\") is committed to "
+                    "protecting your personal data. This privacy policy explains "
+                    "how we collect, use, and safeguard your information when you "
+                    "use our platform."
+                }
+
+                h2 { "2. Data Controller" }
+                p {
+                    "CERTifAI GmbH"
+                    br {}
+                    "Musterstrasse 1, 10115 Berlin, Germany"
+                    br {}
+                    "Email: privacy@certifai.example"
+                }
+
+                h2 { "3. Data We Collect" }
+                p {
+                    "We collect only the minimum data necessary to provide "
+                    "our services:"
+                }
+                ul {
+                    li {
+                        strong { "Account data: " }
+                        "Name, email address, and organization details "
+                        "provided during registration."
+                    }
+                    li {
+                        strong { "Usage data: " }
+                        "API call logs, token counts, and feature usage "
+                        "metrics for billing and analytics."
+                    }
+                    li {
+                        strong { "Technical data: " }
+                        "IP addresses, browser type, and session identifiers "
+                        "for security and platform stability."
+                    }
+                }
+
+                h2 { "4. How We Use Your Data" }
+                ul {
+                    li { "To provide and maintain the CERTifAI platform" }
+                    li { "To manage your account and subscription" }
+                    li { "To communicate service updates and security notices" }
+                    li { "To comply with legal obligations" }
+                }
+
+                h2 { "5. Data Storage and Sovereignty" }
+                p {
+                    "CERTifAI is a self-hosted platform. All AI workloads, "
+                    "model data, and inference results remain entirely within "
+                    "your own infrastructure. We do not access, store, or "
+                    "process your AI data on our servers."
+                }
+
+                h2 { "6. Your Rights (GDPR)" }
+                p { "Under the GDPR, you have the right to:" }
+                ul {
+                    li { "Access your personal data" }
+                    li { "Rectify inaccurate data" }
+                    li { "Request erasure of your data" }
+                    li { "Restrict or object to processing" }
+                    li { "Data portability" }
+                    li { "Lodge a complaint with a supervisory authority" }
+                }
+
+                h2 { "7. Contact" }
+                p {
+                    "For privacy-related inquiries, contact us at "
+                    "privacy@certifai.example."
+                }
+            }
+            footer { class: "legal-footer",
+                Link { to: Route::LandingPage {}, "Back to Home" }
+                Link { to: Route::ImpressumPage {}, "Impressum" }
+            }
+        }
+    }
+}

src/pages/providers.rs

@@ -0,0 +1,221 @@
+use dioxus::prelude::*;
+
+use crate::components::PageHeader;
+use crate::models::{EmbeddingEntry, LlmProvider, ModelEntry, ProviderConfig};
+
+/// Providers page for configuring LLM and embedding model backends.
+///
+/// Two-column layout: left side has a configuration form, right side
+/// shows the currently active provider status.
+#[component]
+pub fn ProvidersPage() -> Element {
+    let mut selected_provider = use_signal(|| LlmProvider::Ollama);
+    let mut selected_model = use_signal(|| "llama3.1:8b".to_string());
+    let mut selected_embedding = use_signal(|| "nomic-embed-text".to_string());
+    let mut api_key = use_signal(String::new);
+    let mut saved = use_signal(|| false);
+
+    let models = mock_models();
+    let embeddings = mock_embeddings();
+
+    // Filter models/embeddings by selected provider
+    let provider_val = selected_provider.read().clone();
+    let available_models: Vec<_> = models
+        .iter()
+        .filter(|m| m.provider == provider_val)
+        .collect();
+    let available_embeddings: Vec<_> = embeddings
+        .iter()
+        .filter(|e| e.provider == provider_val)
+        .collect();
+
+    let active_config = ProviderConfig {
+        provider: provider_val.clone(),
+        selected_model: selected_model.read().clone(),
+        selected_embedding: selected_embedding.read().clone(),
+        api_key_set: !api_key.read().is_empty(),
+    };
+
+    rsx! {
+        section { class: "providers-page",
+            PageHeader {
+                title: "Providers".to_string(),
+                subtitle: "Configure your LLM and embedding backends".to_string(),
+            }
+            div { class: "providers-layout",
+                div { class: "providers-form",
+                    div { class: "form-group",
+                        label { "Provider" }
+                        select {
+                            class: "form-select",
+                            value: "{provider_val.label()}",
+                            onchange: move |evt: Event<FormData>| {
+                                let val = evt.value();
+                                let prov = match val.as_str() {
+                                    "Hugging Face" => LlmProvider::HuggingFace,
+                                    "OpenAI" => LlmProvider::OpenAi,
+                                    "Anthropic" => LlmProvider::Anthropic,
+                                    _ => LlmProvider::Ollama,
+                                };
+                                selected_provider.set(prov);
+                                saved.set(false);
+                            },
+                            option { value: "Ollama", "Ollama" }
+                            option { value: "Hugging Face", "Hugging Face" }
+                            option { value: "OpenAI", "OpenAI" }
+                            option { value: "Anthropic", "Anthropic" }
+                        }
+                    }
+                    div { class: "form-group",
+                        label { "Model" }
+                        select {
+                            class: "form-select",
+                            value: "{selected_model}",
+                            onchange: move |evt: Event<FormData>| {
+                                selected_model.set(evt.value());
+                                saved.set(false);
+                            },
+                            for m in &available_models {
+                                option { value: "{m.id}", "{m.name} ({m.context_window}k ctx)" }
+                            }
+                        }
+                    }
+                    div { class: "form-group",
+                        label { "Embedding Model" }
+                        select {
+                            class: "form-select",
+                            value: "{selected_embedding}",
+                            onchange: move |evt: Event<FormData>| {
+                                selected_embedding.set(evt.value());
+                                saved.set(false);
+                            },
+                            for e in &available_embeddings {
+                                option { value: "{e.id}", "{e.name} ({e.dimensions}d)" }
+                            }
+                        }
+                    }
+                    div { class: "form-group",
+                        label { "API Key" }
+                        input {
+                            class: "form-input",
+                            r#type: "password",
+                            placeholder: "Enter API key...",
+                            value: "{api_key}",
+                            oninput: move |evt: Event<FormData>| {
+                                api_key.set(evt.value());
+                                saved.set(false);
+                            },
+                        }
+                    }
+                    button {
+                        class: "btn-primary",
+                        onclick: move |_| saved.set(true),
+                        "Save Configuration"
+                    }
+                    if *saved.read() {
+                        p { class: "form-success", "Configuration saved." }
+                    }
+                }
+                div { class: "providers-status",
+                    h3 { "Active Configuration" }
+                    div { class: "status-card",
+                        div { class: "status-row",
+                            span { class: "status-label", "Provider" }
+                            span { class: "status-value", "{active_config.provider.label()}" }
+                        }
+                        div { class: "status-row",
+                            span { class: "status-label", "Model" }
+                            span { class: "status-value", "{active_config.selected_model}" }
+                        }
+                        div { class: "status-row",
+                            span { class: "status-label", "Embedding" }
+                            span { class: "status-value", "{active_config.selected_embedding}" }
+                        }
+                        div { class: "status-row",
+                            span { class: "status-label", "API Key" }
+                            span { class: "status-value",
+                                if active_config.api_key_set {
+                                    "Set"
+                                } else {
+                                    "Not set"
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+/// Returns mock model entries for all providers.
+fn mock_models() -> Vec<ModelEntry> {
+    vec![
+        ModelEntry {
+            id: "llama3.1:8b".into(),
+            name: "Llama 3.1 8B".into(),
+            provider: LlmProvider::Ollama,
+            context_window: 128,
+        },
+        ModelEntry {
+            id: "llama3.1:70b".into(),
+            name: "Llama 3.1 70B".into(),
+            provider: LlmProvider::Ollama,
+            context_window: 128,
+        },
+        ModelEntry {
+            id: "mistral:7b".into(),
+            name: "Mistral 7B".into(),
+            provider: LlmProvider::Ollama,
+            context_window: 32,
+        },
+        ModelEntry {
+            id: "meta-llama/Llama-3.1-8B".into(),
+            name: "Llama 3.1 8B".into(),
+            provider: LlmProvider::HuggingFace,
+            context_window: 128,
+        },
+        ModelEntry {
+            id: "gpt-4o".into(),
+            name: "GPT-4o".into(),
+            provider: LlmProvider::OpenAi,
+            context_window: 128,
+        },
+        ModelEntry {
+            id: "claude-sonnet-4-6".into(),
+            name: "Claude Sonnet 4.6".into(),
+            provider: LlmProvider::Anthropic,
+            context_window: 200,
+        },
+    ]
+}
+
+/// Returns mock embedding entries for all providers.
+fn mock_embeddings() -> Vec<EmbeddingEntry> {
+    vec![
+        EmbeddingEntry {
+            id: "nomic-embed-text".into(),
+            name: "Nomic Embed Text".into(),
+            provider: LlmProvider::Ollama,
+            dimensions: 768,
+        },
+        EmbeddingEntry {
+            id: "sentence-transformers/all-MiniLM-L6-v2".into(),
+            name: "MiniLM-L6-v2".into(),
+            provider: LlmProvider::HuggingFace,
+            dimensions: 384,
+        },
+        EmbeddingEntry {
+            id: "text-embedding-3-small".into(),
+            name: "Embedding 3 Small".into(),
+            provider: LlmProvider::OpenAi,
+            dimensions: 1536,
+        },
+        EmbeddingEntry {
+            id: "voyage-3".into(),
+            name: "Voyage 3".into(),
+            provider: LlmProvider::Anthropic,
+            dimensions: 1024,
+        },
+    ]
+}

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(),
+        },
+    ]
+}