feat(dashboard): Modality Bridge settings page with vision/audio/video tabs + sidebar entry

src/app/(dashboard)/dashboard/settings/components/modalityBridge/ModalityBridgeComingSoonTab.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+
+interface ModalityBridgeComingSoonTabProps {
+  bodyKey: string;
+}
+
+export default function ModalityBridgeComingSoonTab({ bodyKey }: ModalityBridgeComingSoonTabProps) {
+  const t = useTranslations("settings");
+
+  return (
+    <div className="flex flex-col gap-2 rounded-card border border-dashed border-border p-6">
+      <div className="flex items-center gap-2 text-text-muted">
+        <span className="material-symbols-outlined text-[20px]" aria-hidden="true">
+          hourglass_top
+        </span>
+        <p className="text-sm">{t(bodyKey)}</p>
+      </div>
+    </div>
+  );
+}

src/app/(dashboard)/dashboard/settings/modality-bridge/page.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { Suspense, useMemo } from "react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useTranslations } from "next-intl";
+
+import ModalityBridgeComingSoonTab from "@/app/(dashboard)/dashboard/settings/components/modalityBridge/ModalityBridgeComingSoonTab";
+import ModalityBridgeVisionTab from "@/app/(dashboard)/dashboard/settings/components/modalityBridge/ModalityBridgeVisionTab";
+
+type TabId = "vision" | "audio" | "video";
+
+const TABS: ReadonlyArray<{ id: TabId; labelKey: string; fallback: string }> = [
+  { id: "vision", labelKey: "modalityBridgeVisionTab", fallback: "Vision" },
+  { id: "audio", labelKey: "modalityBridgeAudioTab", fallback: "Audio" },
+  { id: "video", labelKey: "modalityBridgeVideoTab", fallback: "Video" },
+];
+
+function ModalityBridgePageContent() {
+  const t = useTranslations("settings");
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const pathname = usePathname();
+  const translateOrFallback = (key: string, fallback: string) =>
+    typeof t.has === "function" && !t.has(key) ? fallback : t(key);
+
+  const activeTab = useMemo<TabId>(() => {
+    const requested = searchParams.get("tab") as TabId | null;
+    return requested && TABS.some((tab) => tab.id === requested) ? requested : "vision";
+  }, [searchParams]);
+
+  const handleTabChange = (tab: TabId) => {
+    const params = new URLSearchParams(searchParams.toString());
+    params.set("tab", tab);
+    router.replace(`${pathname}?${params.toString()}`, { scroll: false });
+  };
+
+  return (
+    <div className="flex flex-col gap-4">
+      <p className="text-sm text-text-muted">{t("modalityBridgeIntro")}</p>
+      <div
+        className="flex gap-1 overflow-x-auto border-b border-border"
+        role="tablist"
+        aria-label={translateOrFallback("modalityBridgeSubTabsAria", "Modality Bridge sections")}
+      >
+        {TABS.map((tab) => (
+          <button
+            key={tab.id}
+            type="button"
+            role="tab"
+            aria-selected={activeTab === tab.id}
+            aria-controls="modality-bridge-tabpanel"
+            onClick={() => handleTabChange(tab.id)}
+            className={`whitespace-nowrap border-b-2 px-4 py-2 text-sm font-medium transition-colors ${
+              activeTab === tab.id
+                ? "border-primary text-primary"
+                : "border-transparent text-text-muted hover:text-text"
+            }`}
+          >
+            {translateOrFallback(tab.labelKey, tab.fallback)}
+          </button>
+        ))}
+      </div>
+
+      <div id="modality-bridge-tabpanel" role="tabpanel">
+        {activeTab === "vision" && <ModalityBridgeVisionTab />}
+        {activeTab === "audio" && (
+          <ModalityBridgeComingSoonTab bodyKey="modalityBridgeAudioComingSoon" />
+        )}
+        {activeTab === "video" && (
+          <ModalityBridgeComingSoonTab bodyKey="modalityBridgeVideoComingSoon" />
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default function ModalityBridgePage() {
+  return (
+    <Suspense fallback={null}>
+      <ModalityBridgePageContent />
+    </Suspense>
+  );
+}

src/app/(dashboard)/dashboard/settings/page.tsx

@@ -8,6 +8,8 @@ const LEGACY_TAB_ROUTES: Record<string, string> = {
   "feature-flags": "/dashboard/settings/feature-flags",
   cache: "/dashboard/settings/cache",
   general: "/dashboard/settings/general",
+  modalityBridge: "/dashboard/settings/modality-bridge",
+  "modality-bridge": "/dashboard/settings/modality-bridge",
   resilience: "/dashboard/settings/resilience",
   routing: "/dashboard/settings/routing",
   security: "/dashboard/settings/security",

src/shared/constants/sidebarVisibility.ts

@@ -68,6 +68,7 @@ export const SIDEBAR_ICON_ACCENTS: Partial<Record<SidebarItemId, string>> = {
   "settings-general": "#64748B",
   "settings-appearance": "#D946EF",
   "settings-ai": "#A78BFA",
+  "settings-modality-bridge": "#8B5CF6",
   "settings-routing": "#06B6D4",
   "settings-resilience": "#22C55E",
   "settings-advanced": "#F97316",
@@ -201,6 +202,7 @@ const DEVELOPER_SHOWN: ReadonlySet<HideableSidebarItemId> = new Set([
   "mcp",
   "a2a",
   "settings-general",
+  "settings-modality-bridge",
   "settings-routing",
   "settings-resilience",
   "settings-sidebar",
@@ -232,6 +234,7 @@ const ADMIN_SHOWN: ReadonlySet<HideableSidebarItemId> = new Set([
   "audit-mcp",
   "audit-a2a",
   "settings-general",
+  "settings-modality-bridge",
   "settings-routing",
   "settings-resilience",
   "settings-security",

src/shared/constants/sidebarVisibility/sections.ts

@@ -668,6 +668,13 @@ const CONFIGURATION_ITEMS: readonly SidebarItemDefinition[] = [
     subtitleKey: "settingsAiSubtitle",
     icon: "auto_awesome",
   },
+  {
+    id: "settings-modality-bridge",
+    href: "/dashboard/settings/modality-bridge",
+    i18nKey: "settingsModalityBridge",
+    subtitleKey: "settingsModalityBridgeSubtitle",
+    icon: "image_search",
+  },
   {
     id: "settings-routing",
     href: "/dashboard/settings/routing",

src/shared/constants/sidebarVisibility/types.ts

@@ -93,6 +93,7 @@ export const HIDEABLE_SIDEBAR_ITEM_IDS = [
   "settings-general",
   "settings-appearance",
   "settings-ai",
+  "settings-modality-bridge",
   "settings-routing",
   "settings-resilience",
   "settings-advanced",

tests/unit/ui/modality-bridge-page.test.tsx

@@ -0,0 +1,116 @@
+// @vitest-environment jsdom
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import ModalityBridgePage from "@/app/(dashboard)/dashboard/settings/modality-bridge/page";
+import SettingsPage from "@/app/(dashboard)/dashboard/settings/page";
+import {
+  getSectionItems,
+  SIDEBAR_PRESETS,
+  SIDEBAR_SECTIONS,
+} from "@/shared/constants/sidebarVisibility";
+
+const navigation = vi.hoisted(() => ({
+  search: "",
+  replace: vi.fn(),
+  redirect: vi.fn(),
+}));
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ replace: navigation.replace }),
+  useSearchParams: () => new URLSearchParams(navigation.search),
+  usePathname: () => "/dashboard/settings/modality-bridge",
+  redirect: navigation.redirect,
+}));
+
+vi.mock("next-intl", () => ({
+  useTranslations: () => Object.assign((key: string) => key, { has: () => true }),
+}));
+
+vi.mock(
+  "@/app/(dashboard)/dashboard/settings/components/modalityBridge/ModalityBridgeVisionTab",
+  () => ({ default: () => <div data-testid="vision-tab">vision</div> })
+);
+
+const roots: Array<{ root: Root; el: HTMLDivElement }> = [];
+
+function renderPage(): HTMLDivElement {
+  const el = document.createElement("div");
+  document.body.appendChild(el);
+  const root = createRoot(el);
+  act(() => root.render(<ModalityBridgePage />));
+  roots.push({ root, el });
+  return el;
+}
+
+describe("Modality Bridge settings page", () => {
+  beforeEach(() => {
+    (globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+    navigation.search = "";
+    navigation.replace.mockReset();
+    navigation.redirect.mockReset();
+  });
+
+  afterEach(() => {
+    for (const { root, el } of roots.splice(0)) {
+      act(() => root.unmount());
+      el.remove();
+    }
+  });
+
+  it("renders the audio deep-link with all three modality tabs", () => {
+    navigation.search = "tab=audio";
+    const el = renderPage();
+    expect(el.querySelectorAll('[role="tab"]')).toHaveLength(3);
+    expect(el.textContent).toContain("modalityBridgeAudioComingSoon");
+    expect(el.querySelector('[role="tab"][aria-selected="true"]')?.textContent).toContain(
+      "modalityBridgeAudioTab"
+    );
+  });
+
+  it("defaults invalid or missing tab values to Vision", () => {
+    navigation.search = "tab=unsupported";
+    const el = renderPage();
+    expect(el.querySelector('[data-testid="vision-tab"]')).toBeTruthy();
+  });
+
+  it("updates the URL without scrolling when an operator changes tabs", () => {
+    navigation.search = "tab=vision&source=sidebar";
+    const el = renderPage();
+    const videoTab = Array.from(el.querySelectorAll('[role="tab"]')).find((button) =>
+      button.textContent?.includes("modalityBridgeVideoTab")
+    ) as HTMLButtonElement | undefined;
+    act(() => videoTab?.click());
+    expect(navigation.replace).toHaveBeenCalledWith(
+      "/dashboard/settings/modality-bridge?tab=video&source=sidebar",
+      { scroll: false }
+    );
+  });
+
+  it("redirects both legacy tab spellings to the dedicated page", async () => {
+    await SettingsPage({ searchParams: Promise.resolve({ tab: "modality-bridge" }) });
+    await SettingsPage({ searchParams: Promise.resolve({ tab: "modalityBridge" }) });
+    expect(navigation.redirect).toHaveBeenNthCalledWith(1, "/dashboard/settings/modality-bridge");
+    expect(navigation.redirect).toHaveBeenNthCalledWith(2, "/dashboard/settings/modality-bridge");
+  });
+
+  it("registers the sidebar item and exposes it in developer/admin presets", () => {
+    const section = SIDEBAR_SECTIONS.find((candidate) => candidate.id === "configuration");
+    expect(section).toBeTruthy();
+    const item = section
+      ? getSectionItems(section).find((candidate) => candidate.id === "settings-modality-bridge")
+      : undefined;
+    expect(item).toMatchObject({
+      href: "/dashboard/settings/modality-bridge",
+      i18nKey: "settingsModalityBridge",
+      subtitleKey: "settingsModalityBridgeSubtitle",
+      icon: "image_search",
+    });
+
+    for (const presetId of ["developer", "admin"] as const) {
+      const preset = SIDEBAR_PRESETS.find((candidate) => candidate.id === presetId);
+      expect(preset?.hiddenItems).not.toContain("settings-modality-bridge");
+    }
+  });
+});