cameleer-server/ui/src/components/LayoutShell.tsx

import { Outlet, useNavigate, useLocation } from 'react-router';
import { AppShell, Sidebar, TopBar, CommandPalette, CommandPaletteProvider, GlobalFilterProvider, useCommandPalette, Dropdown, Avatar } from '@cameleer/design-system';
import { useRouteCatalog } from '../api/queries/catalog';
import { useAuthStore } from '../auth/auth-store';
import { useMemo, useCallback } from 'react';
import type { SidebarApp } from '@cameleer/design-system';

function LayoutContent() {
  const navigate = useNavigate();
  const location = useLocation();
  const { data: catalog } = useRouteCatalog();
  const { username, roles, logout } = useAuthStore();
  const { open: paletteOpen, setOpen: setPaletteOpen } = useCommandPalette();

  const sidebarApps: SidebarApp[] = useMemo(() => {
    if (!catalog) return [];
    return catalog.map((app: any) => ({
      id: app.appId,
      name: app.appId,
      health: app.health as 'live' | 'stale' | 'dead',
      exchangeCount: app.exchangeCount,
      routes: (app.routes || []).map((r: any) => ({
        id: r.routeId,
        name: r.routeId,
        exchangeCount: r.exchangeCount,
      })),
      agents: (app.agents || []).map((a: any) => ({
        id: a.id,
        name: a.name,
        status: a.status as 'live' | 'stale' | 'dead',
        tps: a.tps,
      })),
    }));
  }, [catalog]);

  const breadcrumb = useMemo(() => {
    const parts = location.pathname.split('/').filter(Boolean);
    return parts.map((part, i) => ({
      label: part,
      href: '/' + parts.slice(0, i + 1).join('/'),
    }));
  }, [location.pathname]);

  const handlePaletteSelect = useCallback((result: any) => {
    if (result.path) navigate(result.path);
    setPaletteOpen(false);
  }, [navigate, setPaletteOpen]);

  const isAdmin = roles.includes('ADMIN');

  return (
    <AppShell
      sidebar={
        <Sidebar
          apps={sidebarApps}
        />
      }
    >
      <div style={{ display: 'flex', alignItems: 'center' }}>
        <TopBar
          breadcrumb={breadcrumb}
          user={username ? { name: username } : undefined}
        />
        {username && (
          <Dropdown
            trigger={<Avatar name={username} size="sm" />}
            items={[
              { label: `Signed in as ${username}`, disabled: true },
              { divider: true, label: '' },
              { label: 'Logout', onClick: () => { logout(); navigate('/login'); } },
            ]}
          />
        )}
      </div>
      <CommandPalette
        open={paletteOpen}
        onClose={() => setPaletteOpen(false)}
        onSelect={handlePaletteSelect}
        data={[]}
      />
      <main style={{ flex: 1, overflow: 'auto', padding: '1.5rem' }}>
        <Outlet />
      </main>
    </AppShell>
  );
}

export function LayoutShell() {
  return (
    <CommandPaletteProvider>
      <GlobalFilterProvider>
        <LayoutContent />
      </GlobalFilterProvider>
    </CommandPaletteProvider>
  );
}