Spaces:

GaryLeckey
/

aureon-os

Running

File size: 10,623 Bytes

f568a4f

/**

 * ShellLayout — the professional frame around every surface in the repo.

 *

 * Collapsible grouped sidebar (all platform surfaces from the nav registry),

 * top bar with breadcrumb, live platform-status indicator (GET /api/status),

 * command palette (Ctrl/Cmd-K) for jump-to-surface, and the routed page in a

 * per-route error boundary + suspense skeleton. Aureon prism identity, shadcn

 * primitives, zero new dependencies.

 */

import { Suspense, useCallback, useEffect, useState } from "react";
import { Link, Outlet, useLocation, useNavigate } from "react-router-dom";
import { Search } from "lucide-react";
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInset,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarRail,
  SidebarTrigger,
} from "@/components/ui/sidebar";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import {
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { HASH_REDIRECTS, navItemForPath, navSectionsForPlane, sectionForPath } from "./nav";
import { useIdentity } from "@/hooks/useIdentity";
import { BrandMark } from "./Brand";
import { PageSkeleton, RouteErrorBoundary } from "./Page";
import { BackendStatusBanner } from "@/components/BackendStatusBanner";
import { LiveVitals } from "@/components/LiveVitals";
import { SiteFooter } from "./SiteFooter";
import { RiskDisclaimer } from "@/components/RiskDisclaimer";
import { SupportProjectPrompt } from "@/components/SupportProjectPrompt";

type PlatformHealth = "healthy" | "degraded" | "critical" | "unknown";

function usePlatformStatus(): PlatformHealth {
  const [health, setHealth] = useState<PlatformHealth>("unknown");
  useEffect(() => {
    let cancelled = false;
    const poll = async () => {
      try {
        const r = await fetch("/api/status", { cache: "no-store" });
        if (!r.ok) throw new Error(String(r.status));
        const j = (await r.json()) as { status?: string };
        if (!cancelled) {
          const s = String(j.status || "unknown");
          setHealth(s === "healthy" || s === "degraded" || s === "critical" ? (s as PlatformHealth) : "unknown");
        }
      } catch {
        if (!cancelled) setHealth("unknown");
      }
    };
    poll();
    const t = setInterval(poll, 30_000);
    return () => {
      cancelled = true;
      clearInterval(t);
    };
  }, []);
  return health;
}

const STATUS_STYLE: Record<PlatformHealth, { dot: string; label: string }> = {
  healthy: { dot: "bg-success", label: "Healthy" },
  degraded: { dot: "bg-primary", label: "Degraded" },
  critical: { dot: "bg-destructive", label: "Critical" },
  unknown: { dot: "bg-muted-foreground", label: "No gateway" },
};

function StatusIndicator() {
  const health = usePlatformStatus();
  const s = STATUS_STYLE[health];
  return (
    <div className="flex items-center gap-2 text-xs text-muted-foreground" title="Platform status (GET /api/status)">

      <span className={`h-2 w-2 rounded-full ${s.dot} ${health === "healthy" ? "animate-pulse" : ""}`} />

      {s.label}

    </div>
  );
}

function CommandPalette() {
  // Hide the instance-control surfaces from a signed-in end user: their routes are operator-only,
  // so offering them here would only lead to a 403. Defaults to the full nav until identity resolves.
  const { identity } = useIdentity();
  const sections = navSectionsForPlane(identity.isAdmin);
  const [open, setOpen] = useState(false);
  const navigate = useNavigate();

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
        e.preventDefault();
        setOpen((v) => !v);
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  const go = useCallback(
    (path: string) => {
      setOpen(false);
      navigate(path);
    },
    [navigate],
  );

  return (
    <>

      <Button

        variant="outline"

        size="sm"

        className="h-8 gap-2 text-xs text-muted-foreground"

        onClick={() => setOpen(true)}

      >

        <Search className="h-3.5 w-3.5" />

        Jump to surface…

        <kbd className="pointer-events-none rounded border bg-muted px-1.5 font-mono text-[10px]">⌘K</kbd>

      </Button>

      <CommandDialog open={open} onOpenChange={setOpen}>

        <CommandInput placeholder="Search every surface in the platform…" />

        <CommandList>

          <CommandEmpty>No surface found.</CommandEmpty>

          {sections.map((section) => (

            <CommandGroup key={section.label} heading={section.label}>

              {section.items.map((item) => (

                <CommandItem key={item.path} value={`${section.label} ${item.label}`} onSelect={() => go(item.path)}>

                  <item.icon className="mr-2 h-4 w-4" />

                  <span>{item.label}</span>

                  <span className="ml-2 truncate text-xs text-muted-foreground">{item.description}</span>

                </CommandItem>

              ))}

            </CommandGroup>

          ))}

        </CommandList>

      </CommandDialog>

    </>
  );
}

function ShellSidebar() {
  const { identity } = useIdentity();
  const sections = navSectionsForPlane(identity.isAdmin);
  const location = useLocation();
  return (
    <Sidebar collapsible="icon">

      <SidebarHeader>

        <Link to="/" className="flex items-center gap-2 px-2 py-1.5">

          <BrandMark size={32} className="shrink-0" />

          <div className="grid leading-tight group-data-[collapsible=icon]:hidden">

            <span className="font-semibold tracking-wide">AUREON</span>

            <span className="text-[10px] text-muted-foreground">Harmonic Nexus Core</span>

          </div>

        </Link>

      </SidebarHeader>

      <SidebarContent>

        {sections.map((section) => (

          <SidebarGroup key={section.label}>

            <SidebarGroupLabel>{section.label}</SidebarGroupLabel>

            <SidebarGroupContent>

              <SidebarMenu>

                {section.items.map((item) => (

                  <SidebarMenuItem key={item.path}>

                    <SidebarMenuButton

                      asChild

                      isActive={location.pathname === item.path}

                      tooltip={item.label}

                    >

                      <Link to={item.path}>

                        <item.icon />

                        <span>{item.label}</span>

                      </Link>

                    </SidebarMenuButton>

                  </SidebarMenuItem>

                ))}

              </SidebarMenu>

            </SidebarGroupContent>

          </SidebarGroup>

        ))}

      </SidebarContent>

      <SidebarFooter>

        <div className="px-2 pb-2 group-data-[collapsible=icon]:hidden">

          <StatusIndicator />

        </div>

      </SidebarFooter>

      <SidebarRail />

    </Sidebar>
  );
}

function ShellBreadcrumb() {
  const location = useLocation();
  const item = navItemForPath(location.pathname);
  const section = sectionForPath(location.pathname);
  return (
    <Breadcrumb>

      <BreadcrumbList>

        <BreadcrumbItem className="hidden md:block">

          <BreadcrumbLink asChild>

            <Link to="/console">Aureon</Link>

          </BreadcrumbLink>

        </BreadcrumbItem>

        {section && section.label !== "Platform" && (

          <>

            <BreadcrumbSeparator className="hidden md:block" />

            <BreadcrumbItem className="hidden md:block">{section.label}</BreadcrumbItem>

          </>

        )}

        <BreadcrumbSeparator className="hidden md:block" />

        <BreadcrumbItem>

          <BreadcrumbPage>{item?.label ?? "Not found"}</BreadcrumbPage>

        </BreadcrumbItem>

      </BreadcrumbList>
    </Breadcrumb>
  );
}

/** Redirect legacy #tab deep links to shell routes (once, on first load). */
function useLegacyHashRedirect() {
  const navigate = useNavigate();
  const location = useLocation();
  useEffect(() => {
    if (location.pathname !== "/") return;
    const hash = window.location.hash.split("/")[0];
    const target = HASH_REDIRECTS[hash];
    if (target) {
      const [path, keepHash] = target.split("#");
      navigate(path || "/", { replace: true });
      window.location.hash = keepHash ? `#${keepHash}` : "";
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
}

export default function ShellLayout() {
  useLegacyHashRedirect();
  const location = useLocation();
  const item = navItemForPath(location.pathname);
  const section = sectionForPath(location.pathname);
  const isTrading = section?.label === "Trading";

  return (
    <SidebarProvider>

      <ShellSidebar />

      <SidebarInset>

        <header className="sticky top-0 z-40 flex h-14 shrink-0 items-center gap-2 border-b border-border/60 bg-background/90 px-4 backdrop-blur">

          <SidebarTrigger className="-ml-1" />

          <Separator orientation="vertical" className="mr-2 h-4" />

          <ShellBreadcrumb />

          <div className="ml-auto flex items-center gap-3">

            <LiveVitals />

            {item?.live && (

              <Badge variant="outline" className="hidden text-[10px] sm:inline-flex">

                live surface

              </Badge>

            )}

            <CommandPalette />

          </div>

        </header>

        <BackendStatusBanner />

        <main className="flex-1 overflow-auto">

          {isTrading && (

            <div className="px-4 pt-4">

              <RiskDisclaimer />

            </div>

          )}

          <RouteErrorBoundary key={location.pathname} name={item?.label ?? "This page"}>

            <Suspense fallback={<PageSkeleton />}>

              <Outlet />

            </Suspense>

          </RouteErrorBoundary>

          <SiteFooter />

        </main>

        <SupportProjectPrompt />

      </SidebarInset>

    </SidebarProvider>
  );
}