frontend/src/visualizer/VisualizerApp.tsx

import { lazy, Suspense } from "react";
import { useHashRoute, navigateTo } from "../hashRouter";

const ModelApp = lazy(() => import("../model/ModelApp"));
const PlanRevisionsApp = lazy(() => import("../plan_revisions/PlanRevisionsApp"));
const TrajExtApp = lazy(() => import("../traj_ext/TrajExtApp"));
const SelectedToolsApp = lazy(() => import("../selected_tools/SelectedToolsApp"));

type TabId = "model" | "plan-revisions" | "traj-ext" | "selected-tools";

const TABS: { id: TabId; label: string; activeClass: string }[] = [
  { id: "model", label: "Model Trace", activeClass: "border-blue-500 text-blue-400" },
  { id: "plan-revisions", label: "Plan Revisions", activeClass: "border-amber-500 text-amber-400" },
  { id: "traj-ext", label: "Traj Ext", activeClass: "border-emerald-500 text-emerald-400" },
  { id: "selected-tools", label: "Selected Tools", activeClass: "border-amber-400 text-amber-300" },
];

const VALID_TABS = new Set<string>(TABS.map(t => t.id));

export default function VisualizerApp() {
  const route = useHashRoute();
  const activeTab: TabId = VALID_TABS.has(route.tab) ? (route.tab as TabId) : "model";

  return (
    <div className="h-full flex flex-col">
      {/* Visualizer tab bar */}
      <div className="flex items-center border-b border-gray-800 bg-gray-900/50 px-2 shrink-0">
        {TABS.map((tab) => (
          <button
            key={tab.id}
            onClick={() => navigateTo({ page: "viz", tab: tab.id })}
            className={`px-5 py-2 text-sm font-medium border-b-2 transition-colors ${
              activeTab === tab.id
                ? tab.activeClass
                : "border-transparent text-gray-500 hover:text-gray-300"
            }`}
          >
            {tab.label}
          </button>
        ))}
      </div>

      {/* Active visualizer */}
      <div className="flex-1 overflow-hidden">
        <Suspense
          fallback={
            <div className="flex items-center justify-center h-full text-gray-500">
              Loading...
            </div>
          }
        >
          {activeTab === "model" && (
            <div className="theme-model h-full">
              <ModelApp />
            </div>
          )}
          {activeTab === "plan-revisions" && (
            <div className="h-full">
              <PlanRevisionsApp />
            </div>
          )}
          {activeTab === "traj-ext" && (
            <div className="h-full">
              <TrajExtApp />
            </div>
          )}
          {activeTab === "selected-tools" && (
            <div className="h-full">
              <SelectedToolsApp />
            </div>
          )}
        </Suspense>
      </div>
    </div>
  );
}