Implement analytics and settings tabs with updated status labels

[JxnLexn]

This pull request introduces a consistent tabbed navigation pattern across several dashboard pages, improving user experience and code maintainability. It adds segmented/tab controls to the Analytics, Endpoint, and Settings pages, allowing users to easily switch between different sections. Additionally, it makes minor improvements to translations and label consistency.

Tabbed navigation improvements:

• Added a tabbed interface to the Analytics dashboard using a custom tab bar, enabling users to switch between Overview, Evals, Search, Utilization, and Combo Health analytics sections. Each tab conditionally renders its respective component. (src/app/(dashboard)/dashboard/analytics/page.tsx)
• Introduced segmented control navigation to the Endpoint dashboard, allowing users to switch between APIs, MCP, and A2A views, with each tab rendering its corresponding dashboard component. (src/app/(dashboard)/dashboard/endpoint/EndpointPageClient.tsx) [1] [2] [3] [4]
• Refactored the Settings dashboard to use a segmented control for navigation between General, Appearance, and Resilience tabs, each rendering the appropriate settings panel. (src/app/(dashboard)/dashboard/settings/SettingsPageClient.tsx, src/app/(dashboard)/dashboard/settings/page.tsx) [1] [2]

Translation and label consistency:

• Updated status labels in the Provider Limits component from Portuguese to English for consistency ("Crítico" → "Critical", "Alerta" → "Alert", "Saudável" → "Healthy"). (src/app/(dashboard)/dashboard/usage/components/ProviderLimits/index.tsx)
• Improved English translations for resilience settings to use more concise phrasing ("Base cooldown" → "Cooldown base", "Maximum backoff steps" → "Max backoff steps"). (src/i18n/messages/en.json) [1] [2]

[gemini-code-assist]

Code Review

This pull request introduces tabbed navigation to the Analytics, Endpoint, and Settings dashboard pages to improve interface organization. Key changes include the implementation of a tab system in the Analytics page, the addition of MCP and A2A dashboards to the Endpoint page, and the refactoring of the Settings page into a client-side component. Review feedback identifies a bug in the Endpoint page where API-specific content is rendered unconditionally across all tabs. Additionally, the feedback notes a violation of the repository's testing policy for the new Settings component, suggests using the shared SegmentedControl component for better consistency, and recommends properly registering new translation keys in the i18n files.

[gemini-code-assist]

The 'APIs' view content (the Card starting at line 1238 and subsequent elements) is currently rendered unconditionally. When the 'MCP' or 'A2A' tabs are active, their dashboards are prepended to the page instead of replacing the 'APIs' content. This breaks the expected tab behavior and clutters the interface. The API-specific content should be conditionally rendered only when activeEndpointTab === 'apis'.

[gemini-code-assist]

For better consistency across the dashboard, use the shared SegmentedControl component instead of a custom button loop. This also allows you to remove the unused cn utility import.

Suggested change

	import { UsageAnalytics, CardSkeleton } from "@/shared/components";
	import { cn } from "@/shared/utils/cn";
	import { UsageAnalytics, CardSkeleton, SegmentedControl } from "@/shared/components";

[gemini-code-assist]

Rename id to value to match the SegmentedOption interface expected by the SegmentedControl component.

Suggested change

	const ANALYTICS_TABS: Array<{ id: AnalyticsTab; label: string; icon: string }> = [
	{ id: "overview", label: "Overview", icon: "analytics" },
	{ id: "evals", label: "Evals", icon: "science" },
	{ id: "search", label: "Search", icon: "travel_explore" },
	{ id: "utilization", label: "Utilization", icon: "monitoring" },
	{ id: "combo-health", label: "Combo Health", icon: "health_and_safety" },
	];
	const ANALYTICS_TABS: Array<{ value: AnalyticsTab; label: string; icon: string }> = [
	{ value: "overview", label: "Overview", icon: "analytics" },
	{ value: "evals", label: "Evals", icon: "science" },
	{ value: "search", label: "Search", icon: "travel_explore" },
	{ value: "utilization", label: "Utilization", icon: "monitoring" },
	{ value: "combo-health", label: "Combo Health", icon: "health_and_safety" },
	];

[gemini-code-assist]

Replace the manual tab list implementation with the shared SegmentedControl component.

      <SegmentedControl
        options={ANALYTICS_TABS}
        value={activeTab}
        onChange={(value) => setActiveTab(value as AnalyticsTab)}
        aria-label="Analytics sections"
        className="w-fit"
      />

[gemini-code-assist]

This new client component introduces tabbed navigation logic but lacks corresponding tests. Additionally, the tabs are managed only via local state, which breaks browser history and bookmarking.

Consider refactoring to synchronize the active tab with the URL search parameters. Since the parent server component already provides the current tab via the initialTab prop, you can remove the local useState and useEffect and update the URL directly when the tab changes.

"use client";

import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { SegmentedControl } from "@/shared/components";
import AppearanceTab from "./components/AppearanceTab";
import ResilienceTab from "./components/ResilienceTab";
import SystemStorageTab from "./components/SystemStorageTab";

export type SettingsTab = "general" | "appearance" | "resilience";

const SETTINGS_TABS: Array<{ value: SettingsTab; label: string; icon: string }> = [
  { value: "general", label: "General", icon: "settings" },
  { value: "appearance", label: "Appearance", icon: "palette" },
  { value: "resilience", label: "Resilience", icon: "health_and_safety" },
];

type SettingsPageClientProps = {
  initialTab: SettingsTab;
};

export default function SettingsPageClient({ initialTab }: SettingsPageClientProps) {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();

  const handleTabChange = (value: string) => {
    const params = new URLSearchParams(searchParams.toString());
    params.set("tab", value);
    router.push(`${pathname}?${params.toString()}`, { scroll: false });
  };

  const activeLabel = SETTINGS_TABS.find((tab) => tab.value === initialTab)?.label || "General";

  return (
    <div className="flex flex-col gap-6">
      <SegmentedControl
        options={SETTINGS_TABS}
        value={initialTab}
        onChange={handleTabChange}
        aria-label="Settings sections"
        className="w-fit"
      />

      <div role="tabpanel" aria-label={activeLabel} className="min-w-0">
        {initialTab === "general" ? <SystemStorageTab /> : null}
        {initialTab === "appearance" ? <AppearanceTab /> : null}
        {initialTab === "resilience" ? <ResilienceTab /> : null}
      </div>
    </div>
  );
}

References

1. Rule 9: Always include tests when changing production code (src/, open-sse/, electron/, bin/). ^(link)

[gemini-code-assist]

The translation keys statCritical, statAlert, and statHealthy are not defined in the en.json translation file. While providing English fallbacks in the component fixes the immediate issue of Portuguese labels appearing, it bypasses the i18n system. These strings should be added to the translation files to ensure consistency across all supported languages.

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: c17cefd2c4

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Preserve legacy settings tab aliases in root tab mapping

The new LEGACY_TAB_ROUTES only recognizes appearance, general, and resilience, so existing links that still use query tabs like ?tab=security and ?tab=routing now silently fall back to general. I verified those links are still present (e.g. src/app/403/page.tsx and src/app/(dashboard)/dashboard/agents/page.tsx), which means users are sent to the wrong settings section after this change.

Useful? React with 👍 / 👎.

[chatgpt-codex-connector]

Render API content only when APIs endpoint tab is selected

The segmented control suggests mutually exclusive views (APIs, MCP, A2A), but only MCP/A2A are conditional; the APIs card always renders. As a result, choosing MCP or A2A does not actually switch away from the APIs view, which creates mixed/duplicated content and defeats the tab behavior introduced in this commit.

Useful? React with 👍 / 👎.

[kilo-code-bot]

WARNING: The in operator checks the prototype chain, not just own properties.

value in LEGACY_TAB_ROUTES will match inherited property names like "constructor", "toString", or "hasOwnProperty". Since value comes from user-controlled query params (?tab=constructor), LEGACY_TAB_ROUTES[value] would return a non-SettingsTab value (e.g. the Object constructor function), which TypeScript cannot catch because the return type is annotated as SettingsTab.

This would cause SegmentedControl to receive an unexpected value prop, resulting in no tab being visually selected.

Suggested change

	return value && value in LEGACY_TAB_ROUTES ? LEGACY_TAB_ROUTES[value] : "general";
	return value && Object.hasOwn(LEGACY_TAB_ROUTES, value) ? LEGACY_TAB_ROUTES[value] : "general";

[kilo-code-bot]

Code Review Summary

Status: 1 New Issue Found (9 Total) | Recommendation: Address before merge

Overview

Severity	Count
CRITICAL	0
WARNING	1
SUGGESTION	0

New Issue Details (click to expand)

WARNING

File	Line	Issue
src/app/(dashboard)/dashboard/settings/page.tsx	14	in operator checks prototype chain — ?tab=constructor would match inherited properties and return a non-SettingsTab value. Use Object.hasOwn() instead.

Previously Flagged Issues (8 existing — not re-posted)

1. EndpointPageClient.tsx:1236 — APIs view content always rendered regardless of active tab
2. EndpointPageClient.tsx:1238 — Endpoint Card should only render when APIs tab is active
3. analytics/page.tsx:6 — Use SegmentedControl import for consistency across dashboard
4. analytics/page.tsx:21 — Rename id to value to match SegmentedOption interface
5. analytics/page.tsx:58 — Replace manual tab list with SegmentedControl component
6. SettingsPageClient.tsx:47 — Tabbed navigation client component considerations
7. ProviderLimits/index.tsx:809 — Translation key fallback label consistency
8. settings/page.tsx:6 — Preserve legacy settings tab aliases for backward compatibility

Other Observations (not in diff)

Issues found in unchanged code that cannot receive inline comments:

File	Line	Issue
src/app/(dashboard)/dashboard/analytics/page.tsx	60-71	All five tab panels share a single Suspense boundary. Switching tabs will trigger the fallback skeleton for any lazy-loaded component. Consider per-tab Suspense wrappers for smoother UX.
src/app/(dashboard)/dashboard/analytics/page.tsx	28-57	Manual tab bar lacks role="tabpanel" on the panel containers, unlike SettingsPageClient.tsx:40 which correctly uses it. Inconsistent ARIA pattern across pages.

Files Reviewed (7 files)

• src/app/(dashboard)/dashboard/analytics/page.tsx — Tabbed navigation with custom tab bar
• src/app/(dashboard)/dashboard/endpoint/EndpointPageClient.tsx — SegmentedControl for APIs/MCP/A2A
• src/app/(dashboard)/dashboard/settings/SettingsPageClient.tsx — New client component with SegmentedControl
• src/app/(dashboard)/dashboard/settings/page.tsx — Server component refactored from redirect to client render
• src/app/(dashboard)/dashboard/usage/components/ProviderLimits/index.tsx — Portuguese→English label fix
• src/i18n/messages/en.json — Label phrasing updates
• tests/unit/dashboard-shell-tabs.test.ts — Source-level string matching tests

---

Fix these issues in Kilo Cloud

---

_{Reviewed by glm-5.1 · 349,904 tokens}