feat(org): add LiteLLM usage stats to organization dashboard

Replace mock token usage with real data from LiteLLM free-tier APIs
(global/activity, global/activity/model, global/spend/models). Adds
per-model breakdown table, loading/error states, usage data models
with serde tests, and i18n keys for all five languages.

Also includes: replace Ollama with LiteLLM proxy, update config,
docker-compose, and provider infrastructure.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/pages/organization/dashboard.rs

@@ -2,12 +2,14 @@ use dioxus::prelude::*;
 
 use crate::components::{MemberRow, PageHeader};
 use crate::i18n::{t, tw, Locale};
-use crate::models::{BillingUsage, MemberRole, OrgMember};
+use crate::infrastructure::litellm::get_litellm_usage;
+use crate::models::{BillingUsage, LitellmUsageStats, 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.
+/// Shows current billing usage (fetched from LiteLLM), a per-model
+/// breakdown table, a table of organization members with role
+/// management, and a button to invite new members.
 #[component]
 pub fn OrgDashboardPage() -> Element {
     let locale = use_context::<Signal<Locale>>();
@@ -20,6 +22,20 @@ pub fn OrgDashboardPage() -> Element {
 
     let members_list = members.read().clone();
 
+    // Compute date range: 1st of current month to today
+    let (start_date, end_date) = current_month_range();
+
+    // Fetch real usage stats from LiteLLM via server function.
+    // use_resource memoises and won't re-fire on parent re-renders.
+    let usage_resource = use_resource(move || {
+        let start = start_date.clone();
+        let end = end_date.clone();
+        async move { get_litellm_usage(start, end).await }
+    });
+
+    // Clone out of Signal to avoid holding the borrow across rsx!
+    let usage_snapshot = usage_resource.read().clone();
+
     // Format token counts for display
     let tokens_display = format_tokens(usage.tokens_used);
     let tokens_limit_display = format_tokens(usage.tokens_limit);
@@ -30,26 +46,39 @@ pub fn OrgDashboardPage() -> Element {
                 title: t(l, "org.title"),
                 subtitle: t(l, "org.subtitle"),
                 actions: rsx! {
-                    button { class: "btn-primary", onclick: move |_| show_invite.set(true), {t(l, "org.invite_member")} }
+                    button {
+                        class: "btn-primary",
+                        onclick: move |_| show_invite.set(true),
+                        {t(l, "org.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-value",
+                        "{usage.seats_used}/{usage.seats_total}"
+                    }
                     span { class: "org-stat-label", {t(l, "org.seats_used")} }
                 }
                 div { class: "org-stat",
                     span { class: "org-stat-value", "{tokens_display}" }
-                    span { class: "org-stat-label", {tw(l, "org.of_tokens", &[("limit", &tokens_limit_display)])} }
+                    span { class: "org-stat-label",
+                        {tw(l, "org.of_tokens", &[("limit", &tokens_limit_display)])}
+                    }
                 }
                 div { class: "org-stat",
-                    span { class: "org-stat-value", "{usage.billing_cycle_end}" }
+                    span { class: "org-stat-value",
+                        "{usage.billing_cycle_end}"
+                    }
                     span { class: "org-stat-label", {t(l, "org.cycle_ends")} }
                 }
             }
 
+            // LiteLLM usage stats section
+            {render_usage_section(l, &usage_snapshot)}
+
             // Members table
             div { class: "org-table-wrapper",
                 table { class: "org-table",
@@ -114,6 +143,144 @@ pub fn OrgDashboardPage() -> Element {
     }
 }
 
+/// Render the LiteLLM usage stats section: totals bar + per-model table.
+///
+/// Shows a loading state while the resource is pending, an error/empty
+/// message on failure, and the full breakdown on success.
+fn render_usage_section(
+    l: Locale,
+    snapshot: &Option<Result<LitellmUsageStats, ServerFnError>>,
+) -> Element {
+    match snapshot {
+        None => rsx! {
+            div { class: "org-usage-loading",
+                span { {t(l, "org.loading_usage")} }
+            }
+        },
+        Some(Err(_)) => rsx! {
+            div { class: "org-usage-unavailable",
+                span { {t(l, "org.usage_unavailable")} }
+            }
+        },
+        Some(Ok(stats)) if stats.total_tokens == 0 && stats.model_breakdown.is_empty() => {
+            rsx! {
+                div { class: "org-usage-unavailable",
+                    span { {t(l, "org.usage_unavailable")} }
+                }
+            }
+        }
+        Some(Ok(stats)) => {
+            let spend_display = format!("${:.2}", stats.total_spend);
+            let total_display = format_tokens(stats.total_tokens);
+            // Free-tier LiteLLM doesn't provide prompt/completion split
+            let has_token_split =
+                stats.total_prompt_tokens > 0 || stats.total_completion_tokens > 0;
+
+            rsx! {
+                // Usage totals bar
+                div { class: "org-stats-bar",
+                    div { class: "org-stat",
+                        span { class: "org-stat-value", "{spend_display}" }
+                        span { class: "org-stat-label",
+                            {t(l, "org.total_spend")}
+                        }
+                    }
+                    div { class: "org-stat",
+                        span { class: "org-stat-value",
+                            "{total_display}"
+                        }
+                        span { class: "org-stat-label",
+                            {t(l, "org.total_tokens")}
+                        }
+                    }
+                    // Only show prompt/completion split when available
+                    if has_token_split {
+                        div { class: "org-stat",
+                            span { class: "org-stat-value",
+                                {format_tokens(stats.total_prompt_tokens)}
+                            }
+                            span { class: "org-stat-label",
+                                {t(l, "org.prompt_tokens")}
+                            }
+                        }
+                        div { class: "org-stat",
+                            span { class: "org-stat-value",
+                                {format_tokens(stats.total_completion_tokens)}
+                            }
+                            span { class: "org-stat-label",
+                                {t(l, "org.completion_tokens")}
+                            }
+                        }
+                    }
+                }
+
+                // Per-model breakdown table
+                if !stats.model_breakdown.is_empty() {
+                    h3 { class: "org-section-title",
+                        {t(l, "org.model_usage")}
+                    }
+                    div { class: "org-table-wrapper",
+                        table { class: "org-table",
+                            thead {
+                                tr {
+                                    th { {t(l, "org.model")} }
+                                    th { {t(l, "org.tokens")} }
+                                    th { {t(l, "org.spend")} }
+                                }
+                            }
+                            tbody {
+                                for model in &stats.model_breakdown {
+                                    tr { key: "{model.model}",
+                                        td { "{model.model}" }
+                                        td {
+                                            {format_tokens(model.total_tokens)}
+                                        }
+                                        td {
+                                            {format!(
+                                                "${:.2}", model.spend
+                                            )}
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+/// Compute the date range for the current billing month.
+///
+/// Returns `(start_date, end_date)` as `YYYY-MM-DD` strings where
+/// start_date is the 1st of the current month and end_date is today.
+///
+/// On the web target this uses `js_sys::Date` to read the browser clock.
+/// On the server target (SSR) it falls back to `chrono::Utc::now()`.
+fn current_month_range() -> (String, String) {
+    #[cfg(feature = "web")]
+    {
+        // js_sys::Date accesses the browser's local clock in WASM.
+        let now = js_sys::Date::new_0();
+        let year = now.get_full_year();
+        // JS months are 0-indexed, so add 1 for calendar month
+        let month = now.get_month() + 1;
+        let day = now.get_date();
+        let start = format!("{year:04}-{month:02}-01");
+        let end = format!("{year:04}-{month:02}-{day:02}");
+        (start, end)
+    }
+    #[cfg(not(feature = "web"))]
+    {
+        use chrono::Datelike;
+        let today = chrono::Utc::now().date_naive();
+        let start = format!("{:04}-{:02}-01", today.year(), today.month());
+        let end = today.format("%Y-%m-%d").to_string();
+        (start, end)
+    }
+}
+
 /// 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;