Merge pull request 'feat: Phase 9 — Frontend React Shell' (#35 ) from feat/phase-9-frontend-react-shell into main

Reviewed-on: #35
fix: correct Dockerfile frontend build output path
2026-04-04 22:12:53 +02:00 · 2026-04-04 22:10:42 +02:00 · 2026-04-04 22:06:36 +02:00 · 2026-04-04 22:04:55 +02:00 · 2026-04-04 22:03:29 +02:00 · 2026-04-04 22:00:14 +02:00
32 changed files with 4642 additions and 0 deletions
--- a/.gitea/workflows/ci.yml
+++ b/.gitea/workflows/ci.yml
@@ -27,6 +27,12 @@ jobs:
          key: ${{ runner.os }}-maven-${{ hashFiles('**/pom.xml') }}
          restore-keys: ${{ runner.os }}-maven-
      - name: Build Frontend
        run: |
          cd ui
          npm ci
          npm run build
      - name: Build and Test (unit tests only)
        run: >-
          mvn clean verify -B
--- a/8
+++ b/8
@@ -1,10 +1,18 @@
 # syntax=docker/dockerfile:1
 FROM node:22-alpine AS frontend
 WORKDIR /ui
 COPY ui/package.json ui/package-lock.json ui/.npmrc ./
 RUN npm ci
 COPY ui/ .
 RUN npm run build
 FROM eclipse-temurin:21-jdk-alpine AS build
 WORKDIR /build
 COPY .mvn/ .mvn/
 COPY mvnw pom.xml ./
 RUN --mount=type=cache,target=/root/.m2/repository ./mvnw dependency:go-offline -B
 COPY src/ src/
 COPY --from=frontend /src/main/resources/static/ src/main/resources/static/
 RUN --mount=type=cache,target=/root/.m2/repository ./mvnw package -DskipTests -B
 FROM eclipse-temurin:21-jre-alpine
--- a/HOWTO.md
+++ b/HOWTO.md
@@ -302,6 +302,52 @@ Query params: `since`, `until` (ISO timestamps), `limit` (default 500), `stream`
 | HIGH | Unlimited | 50 | 90 days | + Debugger, Replay |
 | BUSINESS | Unlimited | Unlimited | 365 days | All features |
 ## Frontend Development
 The SaaS management UI is a React SPA in the `ui/` directory.
 ### Setup
 ```bash
 cd ui
 npm install
 ```
 ### Dev Server
 ```bash
 cd ui
 npm run dev
 ```
 The Vite dev server starts on http://localhost:5173 and proxies `/api` to `http://localhost:8080` (the Spring Boot backend). Run the backend in another terminal with `mvn spring-boot:run` or via Docker Compose.
 ### Environment Variables
 | Variable | Purpose | Default |
 |----------|---------|---------|
 | `VITE_LOGTO_ENDPOINT` | Logto OIDC endpoint | `http://localhost:3001` |
 | `VITE_LOGTO_CLIENT_ID` | Logto application client ID | (empty) |
 Create a `ui/.env.local` file for local overrides:
 ```bash
 VITE_LOGTO_ENDPOINT=http://localhost:3001
 VITE_LOGTO_CLIENT_ID=your-client-id
 ```
 ### Production Build
 ```bash
 cd ui
 npm run build
 ```
 Output goes to `src/main/resources/static/` (configured in `vite.config.ts`). The subsequent `mvn package` bundles the SPA into the JAR. In Docker builds, the Dockerfile handles this automatically via a multi-stage build.
 ### SPA Routing
 Spring Boot serves `index.html` for all non-API routes via `SpaController.java`. React Router handles client-side routing. The SPA lives at `/`, while the observability dashboard (cameleer3-server) is at `/dashboard`.
 ## Development
 ### Running Tests
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -79,6 +79,9 @@ services:
      - traefik.http.services.api.loadbalancer.server.port=8080
      - traefik.http.routers.forwardauth.rule=Path(`/auth/verify`)
      - traefik.http.services.forwardauth.loadbalancer.server.port=8080
      - traefik.http.routers.spa.rule=PathPrefix(`/`)
      - traefik.http.routers.spa.priority=1
      - traefik.http.services.spa.loadbalancer.server.port=8080
    networks:
      - cameleer
--- a/src/main/java/net/siegeln/cameleer/saas/config/SpaController.java
+++ b/src/main/java/net/siegeln/cameleer/saas/config/SpaController.java
@@ -0,0 +1,13 @@
 package net.siegeln.cameleer.saas.config;
 import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.GetMapping;
@Controller
 public class SpaController {
    @GetMapping(value = {"/", "/login", "/callback", "/environments/**", "/license"})
    public String spa() {
        return "forward:/index.html";
    }
 }
--- a/ui/.gitignore
+++ b/ui/.gitignore
@@ -0,0 +1,4 @@
 node_modules/
 dist/
 .env
 .env.local
--- a/ui/.npmrc
+++ b/ui/.npmrc
@@ -0,0 +1 @@
@cameleer:registry=https://gitea.siegeln.net/api/packages/cameleer/npm/
--- a/ui/index.html
+++ b/ui/index.html
@@ -0,0 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cameleer SaaS</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
 </html>
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
--- a/ui/package.json
+++ b/ui/package.json
@@ -0,0 +1,27 @@
 {
  "name": "cameleer-saas-ui",
  "private": true,
  "version": "0.1.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@cameleer/design-system": "0.1.31",
    "@tanstack/react-query": "^5.90.0",
    "lucide-react": "^1.7.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-router": "^7.13.0",
    "zustand": "^5.0.0"
  },
  "devDependencies": {
    "@types/react": "^19.0.0",
    "@types/react-dom": "^19.0.0",
    "@vitejs/plugin-react": "^4.4.0",
    "typescript": "^5.9.0",
    "vite": "^6.3.0"
  }
 }
--- a/ui/src/api/client.ts
+++ b/ui/src/api/client.ts
@@ -0,0 +1,46 @@
 import { useAuthStore } from '../auth/auth-store';
 const API_BASE = '/api';
 async function apiFetch<T>(path: string, options: RequestInit = {}): Promise<T> {
  const token = useAuthStore.getState().accessToken;
  const headers: Record<string, string> = {
    ...(options.headers as Record<string, string> || {}),
  };
  if (token) {
    headers['Authorization'] = `Bearer ${token}`;
  }
  if (!headers['Content-Type'] && !(options.body instanceof FormData)) {
    headers['Content-Type'] = 'application/json';
  }
  const response = await fetch(`${API_BASE}${path}`, { ...options, headers });
  if (response.status === 401) {
    useAuthStore.getState().logout();
    window.location.href = '/login';
    throw new Error('Unauthorized');
  }
  if (!response.ok) {
    const text = await response.text();
    throw new Error(`API error ${response.status}: ${text}`);
  }
  if (response.status === 204) return undefined as T;
  return response.json();
 }
 export const api = {
  get: <T>(path: string) => apiFetch<T>(path),
  post: <T>(path: string, body?: unknown) =>
    apiFetch<T>(path, {
      method: 'POST',
      body: body instanceof FormData ? body : JSON.stringify(body),
    }),
  patch: <T>(path: string, body: unknown) =>
    apiFetch<T>(path, { method: 'PATCH', body: JSON.stringify(body) }),
  put: <T>(path: string, body: FormData) =>
    apiFetch<T>(path, { method: 'PUT', body }),
  delete: <T>(path: string) => apiFetch<T>(path, { method: 'DELETE' }),
 };
--- a/ui/src/api/hooks.ts
+++ b/ui/src/api/hooks.ts
@@ -0,0 +1,185 @@
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { api } from './client';
 import type {
  TenantResponse, EnvironmentResponse, AppResponse,
  DeploymentResponse, LicenseResponse, AgentStatusResponse,
  ObservabilityStatusResponse, LogEntry,
 } from '../types/api';
 // Tenant
 export function useTenant(tenantId: string) {
  return useQuery({
    queryKey: ['tenant', tenantId],
    queryFn: () => api.get<TenantResponse>(`/tenants/${tenantId}`),
    enabled: !!tenantId,
  });
 }
 // License
 export function useLicense(tenantId: string) {
  return useQuery({
    queryKey: ['license', tenantId],
    queryFn: () => api.get<LicenseResponse>(`/tenants/${tenantId}/license`),
    enabled: !!tenantId,
  });
 }
 // Environments
 export function useEnvironments(tenantId: string) {
  return useQuery({
    queryKey: ['environments', tenantId],
    queryFn: () => api.get<EnvironmentResponse[]>(`/tenants/${tenantId}/environments`),
    enabled: !!tenantId,
  });
 }
 export function useCreateEnvironment(tenantId: string) {
  const qc = useQueryClient();
  return useMutation({
    mutationFn: (data: { slug: string; displayName: string }) =>
      api.post<EnvironmentResponse>(`/tenants/${tenantId}/environments`, data),
    onSuccess: () => qc.invalidateQueries({ queryKey: ['environments', tenantId] }),
  });
 }
 export function useUpdateEnvironment(tenantId: string, envId: string) {
  const qc = useQueryClient();
  return useMutation({
    mutationFn: (data: { displayName: string }) =>
      api.patch<EnvironmentResponse>(`/tenants/${tenantId}/environments/${envId}`, data),
    onSuccess: () => qc.invalidateQueries({ queryKey: ['environments', tenantId] }),
  });
 }
 export function useDeleteEnvironment(tenantId: string, envId: string) {
  const qc = useQueryClient();
  return useMutation({
    mutationFn: () => api.delete(`/tenants/${tenantId}/environments/${envId}`),
    onSuccess: () => qc.invalidateQueries({ queryKey: ['environments', tenantId] }),
  });
 }
 // Apps
 export function useApps(environmentId: string) {
  return useQuery({
    queryKey: ['apps', environmentId],
    queryFn: () => api.get<AppResponse[]>(`/environments/${environmentId}/apps`),
    enabled: !!environmentId,
  });
 }
 export function useApp(environmentId: string, appId: string) {
  return useQuery({
    queryKey: ['app', appId],
    queryFn: () => api.get<AppResponse>(`/environments/${environmentId}/apps/${appId}`),
    enabled: !!appId,
  });
 }
 export function useCreateApp(environmentId: string) {
  const qc = useQueryClient();
  return useMutation({
    mutationFn: (formData: FormData) =>
      api.post<AppResponse>(`/environments/${environmentId}/apps`, formData),
    onSuccess: () => qc.invalidateQueries({ queryKey: ['apps', environmentId] }),
  });
 }
 export function useDeleteApp(environmentId: string, appId: string) {
  const qc = useQueryClient();
  return useMutation({
    mutationFn: () => api.delete(`/environments/${environmentId}/apps/${appId}`),
    onSuccess: () => qc.invalidateQueries({ queryKey: ['apps', environmentId] }),
  });
 }
 export function useUpdateRouting(environmentId: string, appId: string) {
  const qc = useQueryClient();
  return useMutation({
    mutationFn: (data: { exposedPort: number | null }) =>
      api.patch<AppResponse>(`/environments/${environmentId}/apps/${appId}/routing`, data),
    onSuccess: () => qc.invalidateQueries({ queryKey: ['app', appId] }),
  });
 }
 // Deployments
 export function useDeploy(appId: string) {
  const qc = useQueryClient();
  return useMutation({
    mutationFn: () => api.post<DeploymentResponse>(`/apps/${appId}/deploy`),
    onSuccess: () => qc.invalidateQueries({ queryKey: ['deployments', appId] }),
  });
 }
 export function useDeployments(appId: string) {
  return useQuery({
    queryKey: ['deployments', appId],
    queryFn: () => api.get<DeploymentResponse[]>(`/apps/${appId}/deployments`),
    enabled: !!appId,
  });
 }
 export function useDeployment(appId: string, deploymentId: string) {
  return useQuery({
    queryKey: ['deployment', deploymentId],
    queryFn: () => api.get<DeploymentResponse>(`/apps/${appId}/deployments/${deploymentId}`),
    enabled: !!deploymentId,
    refetchInterval: (query) => {
      const status = query.state.data?.observedStatus;
      return status === 'BUILDING' || status === 'STARTING' ? 3000 : false;
    },
  });
 }
 export function useStop(appId: string) {
  const qc = useQueryClient();
  return useMutation({
    mutationFn: () => api.post<DeploymentResponse>(`/apps/${appId}/stop`),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ['deployments', appId] });
      qc.invalidateQueries({ queryKey: ['app'] });
    },
  });
 }
 export function useRestart(appId: string) {
  const qc = useQueryClient();
  return useMutation({
    mutationFn: () => api.post<DeploymentResponse>(`/apps/${appId}/restart`),
    onSuccess: () => qc.invalidateQueries({ queryKey: ['deployments', appId] }),
  });
 }
 // Observability
 export function useAgentStatus(appId: string) {
  return useQuery({
    queryKey: ['agent-status', appId],
    queryFn: () => api.get<AgentStatusResponse>(`/apps/${appId}/agent-status`),
    enabled: !!appId,
    refetchInterval: 15_000,
  });
 }
 export function useObservabilityStatus(appId: string) {
  return useQuery({
    queryKey: ['observability-status', appId],
    queryFn: () => api.get<ObservabilityStatusResponse>(`/apps/${appId}/observability-status`),
    enabled: !!appId,
    refetchInterval: 30_000,
  });
 }
 export function useLogs(appId: string, params?: { since?: string; limit?: number; stream?: string }) {
  return useQuery({
    queryKey: ['logs', appId, params],
    queryFn: () => {
      const qs = new URLSearchParams();
      if (params?.since) qs.set('since', params.since);
      if (params?.limit) qs.set('limit', String(params.limit));
      if (params?.stream) qs.set('stream', params.stream);
      const query = qs.toString();
      return api.get<LogEntry[]>(`/apps/${appId}/logs${query ? `?${query}` : ''}`);
    },
    enabled: !!appId,
  });
 }
--- a/ui/src/auth/CallbackPage.tsx
+++ b/ui/src/auth/CallbackPage.tsx
@@ -0,0 +1,49 @@
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router';
 import { useAuthStore } from './auth-store';
 import { Spinner } from '@cameleer/design-system';
 export function CallbackPage() {
  const navigate = useNavigate();
  const login = useAuthStore((s) => s.login);
  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const code = params.get('code');
    if (!code) {
      navigate('/login');
      return;
    }
    const logtoEndpoint = import.meta.env.VITE_LOGTO_ENDPOINT || 'http://localhost:3001';
    const clientId = import.meta.env.VITE_LOGTO_CLIENT_ID || '';
    const redirectUri = `${window.location.origin}/callback`;
    fetch(`${logtoEndpoint}/oidc/token`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: new URLSearchParams({
        grant_type: 'authorization_code',
        code,
        client_id: clientId,
        redirect_uri: redirectUri,
      }),
    })
      .then((r) => r.json())
      .then((data) => {
        if (data.access_token) {
          login(data.access_token, data.refresh_token || '');
          navigate('/');
        } else {
          navigate('/login');
        }
      })
      .catch(() => navigate('/login'));
  }, [login, navigate]);
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh' }}>
      <Spinner />
    </div>
  );
 }
--- a/ui/src/auth/LoginPage.tsx
+++ b/ui/src/auth/LoginPage.tsx
@@ -0,0 +1,29 @@
 import { Button } from '@cameleer/design-system';
 export function LoginPage() {
  const logtoEndpoint = import.meta.env.VITE_LOGTO_ENDPOINT || 'http://localhost:3001';
  const clientId = import.meta.env.VITE_LOGTO_CLIENT_ID || '';
  const redirectUri = `${window.location.origin}/callback`;
  const handleLogin = () => {
    const params = new URLSearchParams({
      client_id: clientId,
      redirect_uri: redirectUri,
      response_type: 'code',
      scope: 'openid profile email offline_access',
    });
    window.location.href = `${logtoEndpoint}/oidc/auth?${params}`;
  };
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh' }}>
      <div style={{ textAlign: 'center' }}>
        <h1>Cameleer SaaS</h1>
        <p style={{ marginBottom: '2rem', color: 'var(--color-text-secondary)' }}>
          Managed Apache Camel Runtime
        </p>
        <Button onClick={handleLogin}>Sign in with Logto</Button>
      </div>
    </div>
  );
 }
--- a/ui/src/auth/ProtectedRoute.tsx
+++ b/ui/src/auth/ProtectedRoute.tsx
@@ -0,0 +1,8 @@
 import { Navigate } from 'react-router';
 import { useAuthStore } from './auth-store';
 export function ProtectedRoute({ children }: { children: React.ReactNode }) {
  const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
  if (!isAuthenticated) return <Navigate to="/login" replace />;
  return <>{children}</>;
 }
--- a/ui/src/auth/auth-store.ts
+++ b/ui/src/auth/auth-store.ts
@@ -0,0 +1,61 @@
 import { create } from 'zustand';
 interface AuthState {
  accessToken: string | null;
  refreshToken: string | null;
  username: string | null;
  roles: string[];
  tenantId: string | null;
  isAuthenticated: boolean;
  login: (accessToken: string, refreshToken: string) => void;
  logout: () => void;
  loadFromStorage: () => void;
 }
 function parseJwt(token: string): Record<string, unknown> {
  try {
    const base64 = token.split('.')[1].replace(/-/g, '+').replace(/_/g, '/');
    return JSON.parse(atob(base64));
  } catch {
    return {};
  }
 }
 export const useAuthStore = create<AuthState>((set) => ({
  accessToken: null,
  refreshToken: null,
  username: null,
  roles: [],
  tenantId: null,
  isAuthenticated: false,
  login: (accessToken: string, refreshToken: string) => {
    localStorage.setItem('cameleer-access-token', accessToken);
    localStorage.setItem('cameleer-refresh-token', refreshToken);
    const claims = parseJwt(accessToken);
    const username = (claims.sub as string) || (claims.email as string) || 'user';
    const roles = (claims.roles as string[]) || [];
    const tenantId = (claims.organization_id as string) || null;
    localStorage.setItem('cameleer-username', username);
    set({ accessToken, refreshToken, username, roles, tenantId, isAuthenticated: true });
  },
  logout: () => {
    localStorage.removeItem('cameleer-access-token');
    localStorage.removeItem('cameleer-refresh-token');
    localStorage.removeItem('cameleer-username');
    set({ accessToken: null, refreshToken: null, username: null, roles: [], tenantId: null, isAuthenticated: false });
  },
  loadFromStorage: () => {
    const accessToken = localStorage.getItem('cameleer-access-token');
    const refreshToken = localStorage.getItem('cameleer-refresh-token');
    const username = localStorage.getItem('cameleer-username');
    if (accessToken) {
      const claims = parseJwt(accessToken);
      const roles = (claims.roles as string[]) || [];
      const tenantId = (claims.organization_id as string) || null;
      set({ accessToken, refreshToken, username, roles, tenantId, isAuthenticated: true });
    }
  },
 }));
--- a/ui/src/components/DeploymentStatusBadge.tsx
+++ b/ui/src/components/DeploymentStatusBadge.tsx
@@ -0,0 +1,15 @@
 import { Badge } from '@cameleer/design-system';
 // Badge color values: 'primary' | 'success' | 'warning' | 'error' | 'running' | 'auto'
 const STATUS_COLORS: Record<string, 'primary' | 'success' | 'warning' | 'error' | 'running' | 'auto'> = {
  BUILDING: 'warning',
  STARTING: 'warning',
  RUNNING: 'running',
  FAILED: 'error',
  STOPPED: 'auto',
 };
 export function DeploymentStatusBadge({ status }: { status: string }) {
  const color = STATUS_COLORS[status] ?? 'auto';
  return <Badge label={status} color={color} />;
 }
--- a/ui/src/components/EnvironmentTree.tsx
+++ b/ui/src/components/EnvironmentTree.tsx
@@ -0,0 +1,114 @@
 import { useState, useCallback } from 'react';
 import { useNavigate, useLocation } from 'react-router';
 import { SidebarTree, type SidebarTreeNode } from '@cameleer/design-system';
 import { useAuthStore } from '../auth/auth-store';
 import { useEnvironments, useApps } from '../api/hooks';
 import type { EnvironmentResponse } from '../types/api';
 /**
 * Renders one environment entry as a SidebarTreeNode.
 * This is a "render nothing, report data" component: it fetches apps for
 * the given environment and invokes `onNode` with the assembled tree node
 * whenever the data changes.
 *
 * Using a dedicated component per env is the idiomatic way to call a hook
 * for each item in a dynamic list without violating Rules of Hooks.
 */
 function EnvWithApps({
  env,
  onNode,
 }: {
  env: EnvironmentResponse;
  onNode: (node: SidebarTreeNode) => void;
 }) {
  const { data: apps } = useApps(env.id);
  const children: SidebarTreeNode[] = (apps ?? []).map((app) => ({
    id: app.id,
    label: app.displayName,
    path: `/environments/${env.id}/apps/${app.id}`,
  }));
  const node: SidebarTreeNode = {
    id: env.id,
    label: env.displayName,
    path: `/environments/${env.id}`,
    children: children.length > 0 ? children : undefined,
  };
  // Calling onNode during render is intentional here: we want the parent to
  // collect the latest node on every render. The parent guards against
  // infinite loops by doing a shallow equality check before updating state.
  onNode(node);
  return null;
 }
 export function EnvironmentTree() {
  const tenantId = useAuthStore((s) => s.tenantId);
  const { data: environments } = useEnvironments(tenantId ?? '');
  const navigate = useNavigate();
  const location = useLocation();
  const [starred, setStarred] = useState<Set<string>>(new Set());
  const [envNodes, setEnvNodes] = useState<Map<string, SidebarTreeNode>>(new Map());
  const handleToggleStar = useCallback((id: string) => {
    setStarred((prev) => {
      const next = new Set(prev);
      if (next.has(id)) {
        next.delete(id);
      } else {
        next.add(id);
      }
      return next;
    });
  }, []);
  const handleNode = useCallback((node: SidebarTreeNode) => {
    setEnvNodes((prev) => {
      const existing = prev.get(node.id);
      // Avoid infinite re-renders: only update when something meaningful changed.
      if (
        existing &&
        existing.label === node.label &&
        existing.path === node.path &&
        existing.children?.length === node.children?.length
      ) {
        return prev;
      }
      return new Map(prev).set(node.id, node);
    });
  }, []);
  const envs = environments ?? [];
  // Build the final node list, falling back to env-only nodes until apps load.
  const nodes: SidebarTreeNode[] = envs.map(
    (env) =>
      envNodes.get(env.id) ?? {
        id: env.id,
        label: env.displayName,
        path: `/environments/${env.id}`,
      },
  );
  return (
    <>
      {/* Invisible data-fetchers: one per environment */}
      {envs.map((env) => (
        <EnvWithApps key={env.id} env={env} onNode={handleNode} />
      ))}
      <SidebarTree
        nodes={nodes}
        selectedPath={location.pathname}
        isStarred={(id) => starred.has(id)}
        onToggleStar={handleToggleStar}
        onNavigate={(path) => navigate(path)}
        persistKey="env-tree"
        autoRevealPath={location.pathname}
      />
    </>
  );
 }
--- a/ui/src/components/Layout.tsx
+++ b/ui/src/components/Layout.tsx
@@ -0,0 +1,166 @@
 import { useState } from 'react';
 import { Outlet, useNavigate } from 'react-router';
 import {
  AppShell,
  Sidebar,
  TopBar,
 } from '@cameleer/design-system';
 import { useAuthStore } from '../auth/auth-store';
 import { EnvironmentTree } from './EnvironmentTree';
 // Simple SVG logo mark for the sidebar header
 function CameleerLogo() {
  return (
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
    >
      <circle cx="12" cy="12" r="10" fill="currentColor" opacity="0.15" />
      <path
        d="M7 14c0-2.5 2-4.5 4.5-4.5S16 11.5 16 14"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
      />
      <circle cx="12" cy="8" r="2" fill="currentColor" />
    </svg>
  );
 }
 // Nav icon helpers
 function DashboardIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <rect x="1" y="1" width="6" height="6" rx="1" fill="currentColor" />
      <rect x="9" y="1" width="6" height="6" rx="1" fill="currentColor" />
      <rect x="1" y="9" width="6" height="6" rx="1" fill="currentColor" />
      <rect x="9" y="9" width="6" height="6" rx="1" fill="currentColor" />
    </svg>
  );
 }
 function EnvIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path
        d="M2 4h12M2 8h12M2 12h12"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
      />
    </svg>
  );
 }
 function LicenseIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" strokeWidth="1.5" />
      <path d="M5 8h6M5 5h6M5 11h4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
    </svg>
  );
 }
 function ObsIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <circle cx="8" cy="8" r="6" stroke="currentColor" strokeWidth="1.5" />
      <path d="M4 8h8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
      <path d="M8 4v8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
    </svg>
  );
 }
 function UserIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <circle cx="8" cy="5" r="3" stroke="currentColor" strokeWidth="1.5" />
      <path
        d="M2 13c0-3 2.7-5 6-5s6 2 6 5"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
      />
    </svg>
  );
 }
 export function Layout() {
  const navigate = useNavigate();
  const username = useAuthStore((s) => s.username);
  const logout = useAuthStore((s) => s.logout);
  const [envSectionOpen, setEnvSectionOpen] = useState(true);
  const [collapsed, setCollapsed] = useState(false);
  const sidebar = (
    <Sidebar collapsed={collapsed} onCollapseToggle={() => setCollapsed((c) => !c)}>
      <Sidebar.Header
        logo={<CameleerLogo />}
        title="Cameleer SaaS"
        onClick={() => navigate('/')}
      />
      {/* Dashboard */}
      <Sidebar.Section
        icon={<DashboardIcon />}
        label="Dashboard"
        open={false}
        onToggle={() => navigate('/')}
      >
        {null}
      </Sidebar.Section>
      {/* Environments — expandable tree */}
      <Sidebar.Section
        icon={<EnvIcon />}
        label="Environments"
        open={envSectionOpen}
        onToggle={() => setEnvSectionOpen((o) => !o)}
      >
        <EnvironmentTree />
      </Sidebar.Section>
      {/* License */}
      <Sidebar.Section
        icon={<LicenseIcon />}
        label="License"
        open={false}
        onToggle={() => navigate('/license')}
      >
        {null}
      </Sidebar.Section>
      <Sidebar.Footer>
        {/* Link to the observability SPA (external) */}
        <Sidebar.FooterLink
          icon={<ObsIcon />}
          label="View Dashboard"
          onClick={() => window.open('/dashboard', '_blank', 'noopener')}
        />
        {/* User info + logout */}
        <Sidebar.FooterLink
          icon={<UserIcon />}
          label={username ?? 'Account'}
          onClick={logout}
        />
      </Sidebar.Footer>
    </Sidebar>
  );
  return (
    <AppShell sidebar={sidebar}>
      <TopBar
        breadcrumb={[]}
        user={username ? { name: username } : undefined}
        onLogout={logout}
      />
      <Outlet />
    </AppShell>
  );
 }
--- a/ui/src/components/RequirePermission.tsx
+++ b/ui/src/components/RequirePermission.tsx
@@ -0,0 +1,13 @@
 import { usePermissions } from '../hooks/usePermissions';
 interface Props {
  permission: string;
  children: React.ReactNode;
  fallback?: React.ReactNode;
 }
 export function RequirePermission({ permission, children, fallback }: Props) {
  const { has } = usePermissions();
  if (!has(permission)) return fallback ? <>{fallback}</> : null;
  return <>{children}</>;
 }
--- a/ui/src/hooks/usePermissions.ts
+++ b/ui/src/hooks/usePermissions.ts
@@ -0,0 +1,27 @@
 import { useAuthStore } from '../auth/auth-store';
 const ROLE_PERMISSIONS: Record<string, string[]> = {
  OWNER: ['tenant:manage', 'billing:manage', 'team:manage', 'apps:manage', 'apps:deploy', 'secrets:manage', 'observe:read', 'observe:debug', 'settings:manage'],
  ADMIN: ['team:manage', 'apps:manage', 'apps:deploy', 'secrets:manage', 'observe:read', 'observe:debug', 'settings:manage'],
  DEVELOPER: ['apps:deploy', 'secrets:manage', 'observe:read', 'observe:debug'],
  VIEWER: ['observe:read'],
 };
 export function usePermissions() {
  const roles = useAuthStore((s) => s.roles);
  const permissions = new Set<string>();
  for (const role of roles) {
    const perms = ROLE_PERMISSIONS[role];
    if (perms) perms.forEach((p) => permissions.add(p));
  }
  return {
    has: (permission: string) => permissions.has(permission),
    canManageApps: permissions.has('apps:manage'),
    canDeploy: permissions.has('apps:deploy'),
    canManageTenant: permissions.has('tenant:manage'),
    canViewObservability: permissions.has('observe:read'),
    roles,
  };
 }
--- a/ui/src/main.tsx
+++ b/ui/src/main.tsx
@@ -0,0 +1,32 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { BrowserRouter } from 'react-router';
 import { ThemeProvider, ToastProvider, BreadcrumbProvider } from '@cameleer/design-system';
 import '@cameleer/design-system/style.css';
 import { AppRouter } from './router';
 const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: 1,
      staleTime: 10_000,
    },
  },
 });
 ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <ThemeProvider>
      <ToastProvider>
        <BreadcrumbProvider>
          <QueryClientProvider client={queryClient}>
            <BrowserRouter>
              <AppRouter />
            </BrowserRouter>
          </QueryClientProvider>
        </BreadcrumbProvider>
      </ToastProvider>
    </ThemeProvider>
  </React.StrictMode>,
 );
--- a/ui/src/pages/AppDetailPage.tsx
+++ b/ui/src/pages/AppDetailPage.tsx
@@ -0,0 +1,737 @@
 import React, { useRef, useState } from 'react';
 import { useNavigate, useParams, Link } from 'react-router-dom';
 import {
  Badge,
  Button,
  Card,
  ConfirmDialog,
  DataTable,
  EmptyState,
  FormField,
  Input,
  LogViewer,
  Modal,
  Spinner,
  StatusDot,
  Tabs,
  useToast,
 } from '@cameleer/design-system';
 import type { Column, LogEntry as DSLogEntry } from '@cameleer/design-system';
 import { useAuthStore } from '../auth/auth-store';
 import {
  useApp,
  useDeployment,
  useDeployments,
  useDeploy,
  useStop,
  useRestart,
  useDeleteApp,
  useUpdateRouting,
  useAgentStatus,
  useObservabilityStatus,
  useLogs,
  useCreateApp,
 } from '../api/hooks';
 import { RequirePermission } from '../components/RequirePermission';
 import { DeploymentStatusBadge } from '../components/DeploymentStatusBadge';
 import { usePermissions } from '../hooks/usePermissions';
 import type { DeploymentResponse } from '../types/api';
 // ─── Types ───────────────────────────────────────────────────────────────────
 interface DeploymentRow {
  id: string;
  version: number;
  observedStatus: string;
  desiredStatus: string;
  deployedAt: string | null;
  stoppedAt: string | null;
  errorMessage: string | null;
  _raw: DeploymentResponse;
 }
 // ─── Deployment history columns ───────────────────────────────────────────────
 const deploymentColumns: Column<DeploymentRow>[] = [
  {
    key: 'version',
    header: 'Version',
    render: (_val, row) => (
      <span className="font-mono text-sm text-white">v{row.version}</span>
    ),
  },
  {
    key: 'observedStatus',
    header: 'Status',
    render: (_val, row) => <DeploymentStatusBadge status={row.observedStatus} />,
  },
  {
    key: 'desiredStatus',
    header: 'Desired',
    render: (_val, row) => (
      <Badge label={row.desiredStatus} color="primary" variant="outlined" />
    ),
  },
  {
    key: 'deployedAt',
    header: 'Deployed',
    render: (_val, row) =>
      row.deployedAt
        ? new Date(row.deployedAt).toLocaleString(undefined, {
            year: 'numeric',
            month: 'short',
            day: 'numeric',
            hour: '2-digit',
            minute: '2-digit',
          })
        : '—',
  },
  {
    key: 'stoppedAt',
    header: 'Stopped',
    render: (_val, row) =>
      row.stoppedAt
        ? new Date(row.stoppedAt).toLocaleString(undefined, {
            year: 'numeric',
            month: 'short',
            day: 'numeric',
            hour: '2-digit',
            minute: '2-digit',
          })
        : '—',
  },
  {
    key: 'errorMessage',
    header: 'Error',
    render: (_val, row) =>
      row.errorMessage ? (
        <span className="text-xs text-red-400 font-mono">{row.errorMessage}</span>
      ) : (
        '—'
      ),
  },
 ];
 // ─── Main page component ──────────────────────────────────────────────────────
 export function AppDetailPage() {
  const { envId = '', appId = '' } = useParams<{ envId: string; appId: string }>();
  const navigate = useNavigate();
  const { toast } = useToast();
  const tenantId = useAuthStore((s) => s.tenantId);
  const { canManageApps, canDeploy } = usePermissions();
  // Active tab
  const [activeTab, setActiveTab] = useState('overview');
  // App data
  const { data: app, isLoading: appLoading } = useApp(envId, appId);
  // Current deployment (auto-polls while BUILDING/STARTING)
  const { data: currentDeployment } = useDeployment(
    appId,
    app?.currentDeploymentId ?? '',
  );
  // Deployment history
  const { data: deployments = [] } = useDeployments(appId);
  // Agent and observability status
  const { data: agentStatus } = useAgentStatus(appId);
  const { data: obsStatus } = useObservabilityStatus(appId);
  // Log stream filter
  const [logStream, setLogStream] = useState<string | undefined>(undefined);
  const { data: logEntries = [] } = useLogs(appId, {
    limit: 500,
    stream: logStream,
  });
  // Mutations
  const deployMutation = useDeploy(appId);
  const stopMutation = useStop(appId);
  const restartMutation = useRestart(appId);
  const deleteMutation = useDeleteApp(envId, appId);
  const updateRoutingMutation = useUpdateRouting(envId, appId);
  const reuploadMutation = useCreateApp(envId);
  // Dialog / modal state
  const [stopConfirmOpen, setStopConfirmOpen] = useState(false);
  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
  const [routingModalOpen, setRoutingModalOpen] = useState(false);
  const [reuploadModalOpen, setReuploadModalOpen] = useState(false);
  // Routing form
  const [portInput, setPortInput] = useState('');
  // Re-upload form
  const [reuploadFile, setReuploadFile] = useState<File | null>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);
  // ─── Handlers ──────────────────────────────────────────────────────────────
  async function handleDeploy() {
    try {
      await deployMutation.mutateAsync();
      toast({ title: 'Deployment triggered', variant: 'success' });
    } catch {
      toast({ title: 'Failed to trigger deployment', variant: 'error' });
    }
  }
  async function handleStop() {
    try {
      await stopMutation.mutateAsync();
      toast({ title: 'App stopped', variant: 'success' });
      setStopConfirmOpen(false);
    } catch {
      toast({ title: 'Failed to stop app', variant: 'error' });
    }
  }
  async function handleRestart() {
    try {
      await restartMutation.mutateAsync();
      toast({ title: 'App restarting', variant: 'success' });
    } catch {
      toast({ title: 'Failed to restart app', variant: 'error' });
    }
  }
  async function handleDelete() {
    try {
      await deleteMutation.mutateAsync();
      toast({ title: 'App deleted', variant: 'success' });
      navigate(`/environments/${envId}`);
    } catch {
      toast({ title: 'Failed to delete app', variant: 'error' });
    }
  }
  async function handleUpdateRouting(e: React.FormEvent) {
    e.preventDefault();
    const port = portInput.trim() === '' ? null : parseInt(portInput, 10);
    if (port !== null && (isNaN(port) || port < 1 || port > 65535)) {
      toast({ title: 'Invalid port number', variant: 'error' });
      return;
    }
    try {
      await updateRoutingMutation.mutateAsync({ exposedPort: port });
      toast({ title: 'Routing updated', variant: 'success' });
      setRoutingModalOpen(false);
    } catch {
      toast({ title: 'Failed to update routing', variant: 'error' });
    }
  }
  function openRoutingModal() {
    setPortInput(app?.exposedPort != null ? String(app.exposedPort) : '');
    setRoutingModalOpen(true);
  }
  async function handleReupload(e: React.FormEvent) {
    e.preventDefault();
    if (!reuploadFile) return;
    const formData = new FormData();
    formData.append('jar', reuploadFile);
    if (app?.slug) formData.append('slug', app.slug);
    if (app?.displayName) formData.append('displayName', app.displayName);
    try {
      await reuploadMutation.mutateAsync(formData);
      toast({ title: 'JAR uploaded', variant: 'success' });
      setReuploadModalOpen(false);
      setReuploadFile(null);
    } catch {
      toast({ title: 'Failed to upload JAR', variant: 'error' });
    }
  }
  // ─── Derived data ───────────────────────────────────────────────────────────
  const deploymentRows: DeploymentRow[] = deployments.map((d) => ({
    id: d.id,
    version: d.version,
    observedStatus: d.observedStatus,
    desiredStatus: d.desiredStatus,
    deployedAt: d.deployedAt,
    stoppedAt: d.stoppedAt,
    errorMessage: d.errorMessage,
    _raw: d,
  }));
  // Map API LogEntry to design system LogEntry
  const dsLogEntries: DSLogEntry[] = logEntries.map((entry) => ({
    timestamp: entry.timestamp,
    level: entry.stream === 'stderr' ? ('error' as const) : ('info' as const),
    message: entry.message,
  }));
  // Agent state → StatusDot variant
  function agentDotVariant(): 'live' | 'stale' | 'dead' | 'success' | 'warning' | 'error' | 'running' {
    if (!agentStatus?.registered) return 'dead';
    switch (agentStatus.state) {
      case 'CONNECTED': return 'live';
      case 'DISCONNECTED': return 'stale';
      default: return 'stale';
    }
  }
  // ─── Loading / not-found states ────────────────────────────────────────────
  if (appLoading) {
    return (
      <div className="flex items-center justify-center h-64">
        <Spinner />
      </div>
    );
  }
  if (!app) {
    return (
      <EmptyState
        title="App not found"
        description="The requested app does not exist or you do not have access."
        action={
          <Button variant="secondary" onClick={() => navigate(`/environments/${envId}`)}>
            Back to Environment
          </Button>
        }
      />
    );
  }
  // ─── Breadcrumb ─────────────────────────────────────────────────────────────
  const breadcrumb = (
    <nav className="flex items-center gap-1.5 text-sm text-white/50 mb-6">
      <Link to="/" className="hover:text-white/80 transition-colors">Home</Link>
      <span>/</span>
      <Link to="/environments" className="hover:text-white/80 transition-colors">Environments</Link>
      <span>/</span>
      <Link to={`/environments/${envId}`} className="hover:text-white/80 transition-colors">
        {envId}
      </Link>
      <span>/</span>
      <span className="text-white/90">{app.displayName}</span>
    </nav>
  );
  // ─── Tabs ───────────────────────────────────────────────────────────────────
  const tabs = [
    { label: 'Overview', value: 'overview' },
    { label: 'Deployments', value: 'deployments' },
    { label: 'Logs', value: 'logs' },
  ];
  // ─── Render ──────────────────────────────────────────────────────────────────
  return (
    <div className="p-6 space-y-6">
      {/* Breadcrumb */}
      {breadcrumb}
      {/* Page header */}
      <div className="flex items-start justify-between">
        <div>
          <h1 className="text-2xl font-semibold text-white">{app.displayName}</h1>
          <div className="flex items-center gap-2 mt-1">
            <Badge label={app.slug} color="primary" variant="outlined" />
            {app.jarOriginalFilename && (
              <span className="text-xs text-white/50 font-mono">{app.jarOriginalFilename}</span>
            )}
          </div>
        </div>
      </div>
      {/* Tab navigation */}
      <Tabs tabs={tabs} active={activeTab} onChange={setActiveTab} />
      {/* ── Tab: Overview ── */}
      {activeTab === 'overview' && (
        <div className="space-y-4">
          {/* Status card */}
          <Card title="Current Deployment">
            {!app.currentDeploymentId ? (
              <div className="py-4 text-center text-white/50">No deployments yet</div>
            ) : !currentDeployment ? (
              <div className="py-4 text-center">
                <Spinner size="sm" />
              </div>
            ) : (
              <div className="flex flex-wrap items-center gap-6 py-2">
                <div>
                  <div className="text-xs text-white/50 mb-1">Version</div>
                  <span className="font-mono font-semibold text-white">
                    v{currentDeployment.version}
                  </span>
                </div>
                <div>
                  <div className="text-xs text-white/50 mb-1">Status</div>
                  <DeploymentStatusBadge status={currentDeployment.observedStatus} />
                </div>
                <div>
                  <div className="text-xs text-white/50 mb-1">Image</div>
                  <span className="font-mono text-xs text-white/70">
                    {currentDeployment.imageRef}
                  </span>
                </div>
                {currentDeployment.deployedAt && (
                  <div>
                    <div className="text-xs text-white/50 mb-1">Deployed</div>
                    <span className="text-sm text-white/70">
                      {new Date(currentDeployment.deployedAt).toLocaleString()}
                    </span>
                  </div>
                )}
                {currentDeployment.errorMessage && (
                  <div className="w-full">
                    <div className="text-xs text-white/50 mb-1">Error</div>
                    <span className="text-xs text-red-400 font-mono">
                      {currentDeployment.errorMessage}
                    </span>
                  </div>
                )}
              </div>
            )}
          </Card>
          {/* Action bar */}
          <Card title="Actions">
            <div className="flex flex-wrap gap-2 py-2">
              <RequirePermission permission="apps:deploy">
                <Button
                  variant="primary"
                  size="sm"
                  loading={deployMutation.isPending}
                  onClick={handleDeploy}
                >
                  Deploy
                </Button>
              </RequirePermission>
              <RequirePermission permission="apps:deploy">
                <Button
                  variant="secondary"
                  size="sm"
                  loading={restartMutation.isPending}
                  onClick={handleRestart}
                  disabled={!app.currentDeploymentId}
                >
                  Restart
                </Button>
              </RequirePermission>
              <RequirePermission permission="apps:deploy">
                <Button
                  variant="secondary"
                  size="sm"
                  onClick={() => setStopConfirmOpen(true)}
                  disabled={!app.currentDeploymentId}
                >
                  Stop
                </Button>
              </RequirePermission>
              <RequirePermission permission="apps:deploy">
                <Button
                  variant="secondary"
                  size="sm"
                  onClick={() => {
                    setReuploadFile(null);
                    if (fileInputRef.current) fileInputRef.current.value = '';
                    setReuploadModalOpen(true);
                  }}
                >
                  Re-upload JAR
                </Button>
              </RequirePermission>
              <RequirePermission permission="apps:manage">
                <Button
                  variant="danger"
                  size="sm"
                  onClick={() => setDeleteConfirmOpen(true)}
                >
                  Delete App
                </Button>
              </RequirePermission>
            </div>
          </Card>
          {/* Agent status card */}
          <Card title="Agent Status">
            <div className="space-y-3 py-2">
              <div className="flex items-center gap-3">
                <StatusDot variant={agentDotVariant()} pulse={agentStatus?.state === 'CONNECTED'} />
                <span className="text-sm text-white/80">
                  {agentStatus?.registered ? 'Registered' : 'Not registered'}
                </span>
                {agentStatus?.state && (
                  <Badge
                    label={agentStatus.state}
                    color={agentStatus.state === 'CONNECTED' ? 'success' : 'auto'}
                  />
                )}
              </div>
              {agentStatus?.lastHeartbeat && (
                <div className="text-xs text-white/50">
                  Last heartbeat: {new Date(agentStatus.lastHeartbeat).toLocaleString()}
                </div>
              )}
              {agentStatus?.routeIds && agentStatus.routeIds.length > 0 && (
                <div>
                  <div className="text-xs text-white/50 mb-1">Routes</div>
                  <div className="flex flex-wrap gap-1">
                    {agentStatus.routeIds.map((rid) => (
                      <Badge key={rid} label={rid} color="primary" variant="outlined" />
                    ))}
                  </div>
                </div>
              )}
              {obsStatus && (
                <div className="flex flex-wrap gap-4 pt-1">
                  <span className="text-xs text-white/50">
                    Traces:{' '}
                    <span className={obsStatus.hasTraces ? 'text-green-400' : 'text-white/30'}>
                      {obsStatus.hasTraces ? `${obsStatus.traceCount24h} (24h)` : 'none'}
                    </span>
                  </span>
                  <span className="text-xs text-white/50">
                    Metrics:{' '}
                    <span className={obsStatus.hasMetrics ? 'text-green-400' : 'text-white/30'}>
                      {obsStatus.hasMetrics ? 'yes' : 'none'}
                    </span>
                  </span>
                  <span className="text-xs text-white/50">
                    Diagrams:{' '}
                    <span className={obsStatus.hasDiagrams ? 'text-green-400' : 'text-white/30'}>
                      {obsStatus.hasDiagrams ? 'yes' : 'none'}
                    </span>
                  </span>
                </div>
              )}
              <div className="pt-1">
                <Link
                  to="/dashboard"
                  className="text-sm text-blue-400 hover:text-blue-300 transition-colors"
                >
                  View in Dashboard →
                </Link>
              </div>
            </div>
          </Card>
          {/* Routing card */}
          <Card title="Routing">
            <div className="flex items-center justify-between py-2">
              <div className="space-y-1">
                {app.exposedPort ? (
                  <>
                    <div className="text-xs text-white/50">Port</div>
                    <span className="font-mono text-white">{app.exposedPort}</span>
                  </>
                ) : (
                  <span className="text-sm text-white/40">No port configured</span>
                )}
                {app.routeUrl && (
                  <div className="mt-2">
                    <div className="text-xs text-white/50 mb-0.5">Route URL</div>
                    <a
                      href={app.routeUrl}
                      target="_blank"
                      rel="noreferrer"
                      className="text-sm text-blue-400 hover:text-blue-300 font-mono transition-colors"
                    >
                      {app.routeUrl}
                    </a>
                  </div>
                )}
              </div>
              <RequirePermission permission="apps:manage">
                <Button variant="secondary" size="sm" onClick={openRoutingModal}>
                  Edit Routing
                </Button>
              </RequirePermission>
            </div>
          </Card>
        </div>
      )}
      {/* ── Tab: Deployments ── */}
      {activeTab === 'deployments' && (
        <Card title="Deployment History">
          {deploymentRows.length === 0 ? (
            <EmptyState
              title="No deployments yet"
              description="Deploy your app to see history here."
            />
          ) : (
            <DataTable<DeploymentRow>
              columns={deploymentColumns}
              data={deploymentRows}
              pageSize={20}
              rowAccent={(row) =>
                row.observedStatus === 'FAILED' ? 'error' : undefined
              }
              flush
            />
          )}
        </Card>
      )}
      {/* ── Tab: Logs ── */}
      {activeTab === 'logs' && (
        <Card title="Container Logs">
          <div className="space-y-3">
            {/* Stream filter */}
            <div className="flex gap-2">
              {[
                { label: 'All', value: undefined },
                { label: 'stdout', value: 'stdout' },
                { label: 'stderr', value: 'stderr' },
              ].map((opt) => (
                <Button
                  key={String(opt.value)}
                  variant={logStream === opt.value ? 'primary' : 'secondary'}
                  size="sm"
                  onClick={() => setLogStream(opt.value)}
                >
                  {opt.label}
                </Button>
              ))}
            </div>
            {dsLogEntries.length === 0 ? (
              <EmptyState
                title="No logs available"
                description="Logs will appear here once the app is running."
              />
            ) : (
              <LogViewer entries={dsLogEntries} maxHeight={500} />
            )}
          </div>
        </Card>
      )}
      {/* ── Dialogs / Modals ── */}
      {/* Stop confirmation */}
      <ConfirmDialog
        open={stopConfirmOpen}
        onClose={() => setStopConfirmOpen(false)}
        onConfirm={handleStop}
        title="Stop App"
        message={`Are you sure you want to stop "${app.displayName}"?`}
        confirmText="Stop"
        confirmLabel="Stop"
        cancelLabel="Cancel"
        variant="warning"
        loading={stopMutation.isPending}
      />
      {/* Delete confirmation */}
      <ConfirmDialog
        open={deleteConfirmOpen}
        onClose={() => setDeleteConfirmOpen(false)}
        onConfirm={handleDelete}
        title="Delete App"
        message={`Are you sure you want to delete "${app.displayName}"? This action cannot be undone.`}
        confirmText="Delete"
        confirmLabel="Delete"
        cancelLabel="Cancel"
        variant="danger"
        loading={deleteMutation.isPending}
      />
      {/* Routing modal */}
      <Modal
        open={routingModalOpen}
        onClose={() => setRoutingModalOpen(false)}
        title="Edit Routing"
        size="sm"
      >
        <form onSubmit={handleUpdateRouting} className="space-y-4">
          <FormField
            label="Exposed Port"
            htmlFor="exposed-port"
            hint="Leave empty to remove the exposed port."
          >
            <Input
              id="exposed-port"
              type="number"
              value={portInput}
              onChange={(e) => setPortInput(e.target.value)}
              placeholder="e.g. 8080"
              min={1}
              max={65535}
            />
          </FormField>
          <div className="flex justify-end gap-2 pt-2">
            <Button
              type="button"
              variant="secondary"
              size="sm"
              onClick={() => setRoutingModalOpen(false)}
            >
              Cancel
            </Button>
            <Button
              type="submit"
              variant="primary"
              size="sm"
              loading={updateRoutingMutation.isPending}
            >
              Save
            </Button>
          </div>
        </form>
      </Modal>
      {/* Re-upload JAR modal */}
      <Modal
        open={reuploadModalOpen}
        onClose={() => setReuploadModalOpen(false)}
        title="Re-upload JAR"
        size="sm"
      >
        <form onSubmit={handleReupload} className="space-y-4">
          <FormField label="JAR File" htmlFor="reupload-jar" required>
            <input
              ref={fileInputRef}
              id="reupload-jar"
              type="file"
              accept=".jar"
              className="block w-full text-sm text-white/70 file:mr-3 file:py-1 file:px-3 file:rounded file:border-0 file:text-sm file:bg-white/10 file:text-white hover:file:bg-white/20 cursor-pointer"
              onChange={(e) => setReuploadFile(e.target.files?.[0] ?? null)}
              required
            />
          </FormField>
          <div className="flex justify-end gap-2 pt-2">
            <Button
              type="button"
              variant="secondary"
              size="sm"
              onClick={() => setReuploadModalOpen(false)}
            >
              Cancel
            </Button>
            <Button
              type="submit"
              variant="primary"
              size="sm"
              loading={reuploadMutation.isPending}
              disabled={!reuploadFile}
            >
              Upload
            </Button>
          </div>
        </form>
      </Modal>
    </div>
  );
 }
--- a/ui/src/pages/DashboardPage.tsx
+++ b/ui/src/pages/DashboardPage.tsx
@@ -0,0 +1,221 @@
 import React, { useState, useCallback, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import {
  Badge,
  Button,
  Card,
  EmptyState,
  KpiStrip,
  Spinner,
 } from '@cameleer/design-system';
 import { useAuthStore } from '../auth/auth-store';
 import { useTenant, useEnvironments, useApps } from '../api/hooks';
 import { RequirePermission } from '../components/RequirePermission';
 import type { EnvironmentResponse, AppResponse } from '../types/api';
 // Helper: fetches apps for one environment and reports data upward via effect
 function EnvApps({
  environment,
  onData,
 }: {
  environment: EnvironmentResponse;
  onData: (envId: string, apps: AppResponse[]) => void;
 }) {
  const { data } = useApps(environment.id);
  useEffect(() => {
    if (data) {
      onData(environment.id, data);
    }
  }, [data, environment.id, onData]);
  return null;
 }
 function tierColor(tier: string): 'primary' | 'success' | 'warning' | 'error' {
  switch (tier?.toLowerCase()) {
    case 'enterprise': return 'success';
    case 'pro': return 'primary';
    case 'starter': return 'warning';
    default: return 'primary';
  }
 }
 export function DashboardPage() {
  const navigate = useNavigate();
  const tenantId = useAuthStore((s) => s.tenantId);
  const { data: tenant, isLoading: tenantLoading } = useTenant(tenantId ?? '');
  const { data: environments, isLoading: envsLoading } = useEnvironments(tenantId ?? '');
  // Collect apps per environment using a ref-like approach via state + callback
  const [appsByEnv, setAppsByEnv] = useState<Record<string, AppResponse[]>>({});
  const handleAppsData = useCallback((envId: string, apps: AppResponse[]) => {
    setAppsByEnv((prev) => {
      if (prev[envId] === apps) return prev; // stable reference, no update
      return { ...prev, [envId]: apps };
    });
  }, []);
  const allApps = Object.values(appsByEnv).flat();
  const runningApps = allApps.filter((a) => a.currentDeploymentId !== null);
  // "Failed" is apps that have a previous deployment but no current (stopped) — approximate heuristic
  const failedApps = allApps.filter(
    (a) => a.currentDeploymentId === null && a.previousDeploymentId !== null,
  );
  const isLoading = tenantLoading || envsLoading;
  const kpiItems = [
    {
      label: 'Environments',
      value: environments?.length ?? 0,
      subtitle: 'isolated runtime contexts',
    },
    {
      label: 'Total Apps',
      value: allApps.length,
      subtitle: 'across all environments',
    },
    {
      label: 'Running',
      value: runningApps.length,
      trend: {
        label: 'active deployments',
        variant: 'success' as const,
      },
    },
    {
      label: 'Stopped',
      value: failedApps.length,
      trend: failedApps.length > 0
        ? { label: 'need attention', variant: 'warning' as const }
        : { label: 'none', variant: 'muted' as const },
    },
  ];
  if (isLoading) {
    return (
      <div className="flex items-center justify-center h-64">
        <Spinner />
      </div>
    );
  }
  if (!tenantId) {
    return (
      <EmptyState
        title="No tenant associated"
        description="Your account is not linked to a tenant. Please contact your administrator."
      />
    );
  }
  return (
    <div className="space-y-6 p-6">
      {/* Tenant Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <h1 className="text-2xl font-semibold text-white">
            {tenant?.name ?? tenantId}
          </h1>
          {tenant?.tier && (
            <Badge
              label={tenant.tier.toUpperCase()}
              color={tierColor(tenant.tier)}
            />
          )}
        </div>
        <div className="flex items-center gap-2">
          <RequirePermission permission="apps:manage">
            <Button
              variant="secondary"
              size="sm"
              onClick={() => navigate('/environments/new')}
            >
              New Environment
            </Button>
          </RequirePermission>
          <Button
            variant="primary"
            size="sm"
            onClick={() => navigate('/dashboard')}
          >
            View Observability Dashboard
          </Button>
        </div>
      </div>
      {/* KPI Strip */}
      <KpiStrip items={kpiItems} />
      {/* Environments overview */}
      {environments && environments.length > 0 ? (
        <Card title="Environments">
          {/* Render hidden data-fetchers for each environment */}
          {environments.map((env) => (
            <EnvApps key={env.id} environment={env} onData={handleAppsData} />
          ))}
          <div className="divide-y divide-white/10">
            {environments.map((env) => {
              const envApps = appsByEnv[env.id] ?? [];
              const envRunning = envApps.filter((a) => a.currentDeploymentId !== null).length;
              return (
                <div
                  key={env.id}
                  className="flex items-center justify-between py-3 first:pt-0 last:pb-0 cursor-pointer hover:bg-white/5 px-2 rounded"
                  onClick={() => navigate(`/environments/${env.id}`)}
                >
                  <div className="flex items-center gap-3">
                    <span className="text-sm font-medium text-white">
                      {env.displayName}
                    </span>
                    <Badge
                      label={env.slug}
                      color="primary"
                      variant="outlined"
                    />
                  </div>
                  <div className="flex items-center gap-4 text-sm text-white/60">
                    <span>{envApps.length} apps</span>
                    <span className="text-green-400">{envRunning} running</span>
                    <Badge
                      label={env.status}
                      color={env.status === 'ACTIVE' ? 'success' : 'warning'}
                    />
                  </div>
                </div>
              );
            })}
          </div>
        </Card>
      ) : (
        <EmptyState
          title="No environments yet"
          description="Create your first environment to get started deploying Camel applications."
          action={
            <RequirePermission permission="apps:manage">
              <Button variant="primary" onClick={() => navigate('/environments/new')}>
                Create Environment
              </Button>
            </RequirePermission>
          }
        />
      )}
      {/* Recent deployments placeholder */}
      <Card title="Recent Deployments">
        {allApps.length === 0 ? (
          <EmptyState
            title="No deployments yet"
            description="Deploy your first app to see deployment history here."
          />
        ) : (
          <p className="text-sm text-white/60">
            Select an app from an environment to view its deployment history.
          </p>
        )}
      </Card>
    </div>
  );
 }
--- a/ui/src/pages/EnvironmentDetailPage.tsx
+++ b/ui/src/pages/EnvironmentDetailPage.tsx
@@ -0,0 +1,318 @@
 import React, { useRef, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import {
  Badge,
  Button,
  Card,
  ConfirmDialog,
  DataTable,
  EmptyState,
  FormField,
  InlineEdit,
  Input,
  Modal,
  Spinner,
  useToast,
 } from '@cameleer/design-system';
 import type { Column } from '@cameleer/design-system';
 import { useAuthStore } from '../auth/auth-store';
 import {
  useEnvironments,
  useUpdateEnvironment,
  useDeleteEnvironment,
  useApps,
  useCreateApp,
 } from '../api/hooks';
 import { RequirePermission } from '../components/RequirePermission';
 import { DeploymentStatusBadge } from '../components/DeploymentStatusBadge';
 import type { AppResponse } from '../types/api';
 interface AppTableRow {
  id: string;
  displayName: string;
  slug: string;
  deploymentStatus: string;
  updatedAt: string;
  _raw: AppResponse;
 }
 const appColumns: Column<AppTableRow>[] = [
  {
    key: 'displayName',
    header: 'Name',
    render: (_val, row) => (
      <span className="font-medium text-white">{row.displayName}</span>
    ),
  },
  {
    key: 'slug',
    header: 'Slug',
    render: (_val, row) => (
      <Badge label={row.slug} color="primary" variant="outlined" />
    ),
  },
  {
    key: 'deploymentStatus',
    header: 'Status',
    render: (_val, row) =>
      row._raw.currentDeploymentId ? (
        <DeploymentStatusBadge status={row.deploymentStatus} />
      ) : (
        <Badge label="Not deployed" color="auto" />
      ),
  },
  {
    key: 'updatedAt',
    header: 'Last Updated',
    render: (_val, row) =>
      new Date(row.updatedAt).toLocaleDateString(undefined, {
        year: 'numeric',
        month: 'short',
        day: 'numeric',
      }),
  },
 ];
 export function EnvironmentDetailPage() {
  const navigate = useNavigate();
  const { envId } = useParams<{ envId: string }>();
  const { toast } = useToast();
  const tenantId = useAuthStore((s) => s.tenantId);
  const { data: environments, isLoading: envsLoading } = useEnvironments(tenantId ?? '');
  const environment = environments?.find((e) => e.id === envId);
  const { data: apps, isLoading: appsLoading } = useApps(envId ?? '');
  const updateMutation = useUpdateEnvironment(tenantId ?? '', envId ?? '');
  const deleteMutation = useDeleteEnvironment(tenantId ?? '', envId ?? '');
  const createAppMutation = useCreateApp(envId ?? '');
  // New app modal
  const [newAppOpen, setNewAppOpen] = useState(false);
  const [appSlug, setAppSlug] = useState('');
  const [appDisplayName, setAppDisplayName] = useState('');
  const [jarFile, setJarFile] = useState<File | null>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);
  // Delete confirm
  const [deleteOpen, setDeleteOpen] = useState(false);
  function openNewApp() {
    setAppSlug('');
    setAppDisplayName('');
    setJarFile(null);
    if (fileInputRef.current) fileInputRef.current.value = '';
    setNewAppOpen(true);
  }
  function closeNewApp() {
    setNewAppOpen(false);
  }
  async function handleCreateApp(e: React.FormEvent) {
    e.preventDefault();
    if (!appSlug.trim() || !appDisplayName.trim()) return;
    const formData = new FormData();
    formData.append('slug', appSlug.trim());
    formData.append('displayName', appDisplayName.trim());
    if (jarFile) {
      formData.append('jar', jarFile);
    }
    try {
      await createAppMutation.mutateAsync(formData);
      toast({ title: 'App created', variant: 'success' });
      closeNewApp();
    } catch {
      toast({ title: 'Failed to create app', variant: 'error' });
    }
  }
  async function handleDeleteEnvironment() {
    try {
      await deleteMutation.mutateAsync();
      toast({ title: 'Environment deleted', variant: 'success' });
      navigate('/environments');
    } catch {
      toast({ title: 'Failed to delete environment', variant: 'error' });
    }
  }
  async function handleRename(value: string) {
    if (!value.trim() || value === environment?.displayName) return;
    try {
      await updateMutation.mutateAsync({ displayName: value.trim() });
      toast({ title: 'Environment renamed', variant: 'success' });
    } catch {
      toast({ title: 'Failed to rename environment', variant: 'error' });
    }
  }
  const isLoading = envsLoading || appsLoading;
  if (isLoading) {
    return (
      <div className="flex items-center justify-center h-64">
        <Spinner />
      </div>
    );
  }
  if (!environment) {
    return (
      <EmptyState
        title="Environment not found"
        description="The requested environment does not exist or you do not have access."
        action={
          <Button variant="secondary" onClick={() => navigate('/environments')}>
            Back to Environments
          </Button>
        }
      />
    );
  }
  const tableData: AppTableRow[] = (apps ?? []).map((app) => ({
    id: app.id,
    displayName: app.displayName,
    slug: app.slug,
    deploymentStatus: app.currentDeploymentId ? 'RUNNING' : 'STOPPED',
    updatedAt: app.updatedAt,
    _raw: app,
  }));
  const hasApps = (apps?.length ?? 0) > 0;
  return (
    <div className="space-y-6 p-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <RequirePermission
            permission="apps:manage"
            fallback={
              <h1 className="text-2xl font-semibold text-white">
                {environment.displayName}
              </h1>
            }
          >
            <InlineEdit
              value={environment.displayName}
              onSave={handleRename}
              placeholder="Environment name"
            />
          </RequirePermission>
          <Badge label={environment.slug} color="primary" variant="outlined" />
          <Badge
            label={environment.status}
            color={environment.status === 'ACTIVE' ? 'success' : 'warning'}
          />
        </div>
        <div className="flex items-center gap-2">
          <RequirePermission permission="apps:deploy">
            <Button variant="primary" size="sm" onClick={openNewApp}>
              New App
            </Button>
          </RequirePermission>
          <RequirePermission permission="apps:manage">
            <Button
              variant="danger"
              size="sm"
              onClick={() => setDeleteOpen(true)}
              disabled={hasApps}
              title={hasApps ? 'Remove all apps before deleting this environment' : undefined}
            >
              Delete Environment
            </Button>
          </RequirePermission>
        </div>
      </div>
      {/* Apps table */}
      {tableData.length === 0 ? (
        <EmptyState
          title="No apps yet"
          description="Deploy your first Camel application to this environment."
          action={
            <RequirePermission permission="apps:deploy">
              <Button variant="primary" onClick={openNewApp}>
                New App
              </Button>
            </RequirePermission>
          }
        />
      ) : (
        <Card title="Apps">
          <DataTable<AppTableRow>
            columns={appColumns}
            data={tableData}
            onRowClick={(row) => navigate(`/environments/${envId}/apps/${row.id}`)}
            flush
          />
        </Card>
      )}
      {/* New App Modal */}
      <Modal open={newAppOpen} onClose={closeNewApp} title="New App" size="sm">
        <form onSubmit={handleCreateApp} className="space-y-4">
          <FormField label="Slug" htmlFor="app-slug" required>
            <Input
              id="app-slug"
              value={appSlug}
              onChange={(e) => setAppSlug(e.target.value)}
              placeholder="e.g. order-router"
              required
            />
          </FormField>
          <FormField label="Display Name" htmlFor="app-display-name" required>
            <Input
              id="app-display-name"
              value={appDisplayName}
              onChange={(e) => setAppDisplayName(e.target.value)}
              placeholder="e.g. Order Router"
              required
            />
          </FormField>
          <FormField label="JAR File" htmlFor="app-jar">
            <input
              ref={fileInputRef}
              id="app-jar"
              type="file"
              accept=".jar"
              className="block w-full text-sm text-white/70 file:mr-3 file:py-1 file:px-3 file:rounded file:border-0 file:text-sm file:bg-white/10 file:text-white hover:file:bg-white/20 cursor-pointer"
              onChange={(e) => setJarFile(e.target.files?.[0] ?? null)}
            />
          </FormField>
          <div className="flex justify-end gap-2 pt-2">
            <Button type="button" variant="secondary" size="sm" onClick={closeNewApp}>
              Cancel
            </Button>
            <Button
              type="submit"
              variant="primary"
              size="sm"
              loading={createAppMutation.isPending}
              disabled={!appSlug.trim() || !appDisplayName.trim()}
            >
              Create App
            </Button>
          </div>
        </form>
      </Modal>
      {/* Delete Confirmation */}
      <ConfirmDialog
        open={deleteOpen}
        onClose={() => setDeleteOpen(false)}
        onConfirm={handleDeleteEnvironment}
        title="Delete Environment"
        message={`Are you sure you want to delete "${environment.displayName}"? This action cannot be undone.`}
        confirmText="Delete"
        confirmLabel="Delete"
        cancelLabel="Cancel"
        variant="danger"
        loading={deleteMutation.isPending}
      />
    </div>
  );
 }
--- a/ui/src/pages/EnvironmentsPage.tsx
+++ b/ui/src/pages/EnvironmentsPage.tsx
@@ -0,0 +1,193 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import {
  Badge,
  Button,
  Card,
  DataTable,
  EmptyState,
  FormField,
  Input,
  Modal,
  Spinner,
  useToast,
 } from '@cameleer/design-system';
 import type { Column } from '@cameleer/design-system';
 import { useAuthStore } from '../auth/auth-store';
 import { useEnvironments, useCreateEnvironment } from '../api/hooks';
 import { RequirePermission } from '../components/RequirePermission';
 import type { EnvironmentResponse } from '../types/api';
 interface TableRow {
  id: string;
  displayName: string;
  slug: string;
  status: string;
  createdAt: string;
  _raw: EnvironmentResponse;
 }
 const columns: Column<TableRow>[] = [
  {
    key: 'displayName',
    header: 'Name',
    render: (_val, row) => (
      <span className="font-medium text-white">{row.displayName}</span>
    ),
  },
  {
    key: 'slug',
    header: 'Slug',
    render: (_val, row) => (
      <Badge label={row.slug} color="primary" variant="outlined" />
    ),
  },
  {
    key: 'status',
    header: 'Status',
    render: (_val, row) => (
      <Badge
        label={row.status}
        color={row.status === 'ACTIVE' ? 'success' : 'warning'}
      />
    ),
  },
  {
    key: 'createdAt',
    header: 'Created',
    render: (_val, row) =>
      new Date(row.createdAt).toLocaleDateString(undefined, {
        year: 'numeric',
        month: 'short',
        day: 'numeric',
      }),
  },
 ];
 export function EnvironmentsPage() {
  const navigate = useNavigate();
  const { toast } = useToast();
  const tenantId = useAuthStore((s) => s.tenantId);
  const { data: environments, isLoading } = useEnvironments(tenantId ?? '');
  const createMutation = useCreateEnvironment(tenantId ?? '');
  const [modalOpen, setModalOpen] = useState(false);
  const [slug, setSlug] = useState('');
  const [displayName, setDisplayName] = useState('');
  const tableData: TableRow[] = (environments ?? []).map((env) => ({
    id: env.id,
    displayName: env.displayName,
    slug: env.slug,
    status: env.status,
    createdAt: env.createdAt,
    _raw: env,
  }));
  function openModal() {
    setSlug('');
    setDisplayName('');
    setModalOpen(true);
  }
  function closeModal() {
    setModalOpen(false);
  }
  async function handleCreate(e: React.FormEvent) {
    e.preventDefault();
    if (!slug.trim() || !displayName.trim()) return;
    try {
      await createMutation.mutateAsync({ slug: slug.trim(), displayName: displayName.trim() });
      toast({ title: 'Environment created', variant: 'success' });
      closeModal();
    } catch {
      toast({ title: 'Failed to create environment', variant: 'error' });
    }
  }
  if (isLoading) {
    return (
      <div className="flex items-center justify-center h-64">
        <Spinner />
      </div>
    );
  }
  return (
    <div className="space-y-6 p-6">
      {/* Page header */}
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-semibold text-white">Environments</h1>
        <RequirePermission permission="apps:manage">
          <Button variant="primary" size="sm" onClick={openModal}>
            Create Environment
          </Button>
        </RequirePermission>
      </div>
      {/* Table / empty state */}
      {tableData.length === 0 ? (
        <EmptyState
          title="No environments yet"
          description="Create your first environment to start deploying Camel applications."
          action={
            <RequirePermission permission="apps:manage">
              <Button variant="primary" onClick={openModal}>
                Create Environment
              </Button>
            </RequirePermission>
          }
        />
      ) : (
        <Card>
          <DataTable<TableRow>
            columns={columns}
            data={tableData}
            onRowClick={(row) => navigate(`/environments/${row.id}`)}
            flush
          />
        </Card>
      )}
      {/* Create Environment Modal */}
      <Modal open={modalOpen} onClose={closeModal} title="Create Environment" size="sm">
        <form onSubmit={handleCreate} className="space-y-4">
          <FormField label="Slug" htmlFor="env-slug" required>
            <Input
              id="env-slug"
              value={slug}
              onChange={(e) => setSlug(e.target.value)}
              placeholder="e.g. production"
              required
            />
          </FormField>
          <FormField label="Display Name" htmlFor="env-display-name" required>
            <Input
              id="env-display-name"
              value={displayName}
              onChange={(e) => setDisplayName(e.target.value)}
              placeholder="e.g. Production"
              required
            />
          </FormField>
          <div className="flex justify-end gap-2 pt-2">
            <Button type="button" variant="secondary" size="sm" onClick={closeModal}>
              Cancel
            </Button>
            <Button
              type="submit"
              variant="primary"
              size="sm"
              loading={createMutation.isPending}
              disabled={!slug.trim() || !displayName.trim()}
            >
              Create
            </Button>
          </div>
        </form>
      </Modal>
    </div>
  );
 }
--- a/ui/src/pages/LicensePage.tsx
+++ b/ui/src/pages/LicensePage.tsx
@@ -0,0 +1,184 @@
 import React, { useState } from 'react';
 import {
  Badge,
  Card,
  EmptyState,
  Spinner,
 } from '@cameleer/design-system';
 import { useAuthStore } from '../auth/auth-store';
 import { useLicense } from '../api/hooks';
 const FEATURE_LABELS: Record<string, string> = {
  topology: 'Topology',
  lineage: 'Lineage',
  correlation: 'Correlation',
  debugger: 'Debugger',
  replay: 'Replay',
 };
 const LIMIT_LABELS: Record<string, string> = {
  maxAgents: 'Max Agents',
  retentionDays: 'Retention Days',
  maxEnvironments: 'Max Environments',
 };
 function tierColor(tier: string): 'primary' | 'success' | 'warning' | 'error' {
  switch (tier?.toUpperCase()) {
    case 'BUSINESS': return 'success';
    case 'HIGH': return 'primary';
    case 'MID': return 'warning';
    case 'LOW': return 'error';
    default: return 'primary';
  }
 }
 function daysRemaining(expiresAt: string): number {
  const now = Date.now();
  const exp = new Date(expiresAt).getTime();
  return Math.max(0, Math.ceil((exp - now) / (1000 * 60 * 60 * 24)));
 }
 export function LicensePage() {
  const tenantId = useAuthStore((s) => s.tenantId);
  const { data: license, isLoading, isError } = useLicense(tenantId ?? '');
  const [tokenExpanded, setTokenExpanded] = useState(false);
  if (isLoading) {
    return (
      <div className="flex items-center justify-center h-64">
        <Spinner />
      </div>
    );
  }
  if (!tenantId) {
    return (
      <EmptyState
        title="No tenant associated"
        description="Your account is not linked to a tenant. Please contact your administrator."
      />
    );
  }
  if (isError || !license) {
    return (
      <EmptyState
        title="License unavailable"
        description="Unable to load license information. Please try again later."
      />
    );
  }
  const expDate = new Date(license.expiresAt).toLocaleDateString(undefined, {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  });
  const days = daysRemaining(license.expiresAt);
  const isExpiringSoon = days <= 30;
  const isExpired = days === 0;
  return (
    <div className="space-y-6 p-6">
      {/* Header */}
      <div className="flex items-center gap-3">
        <h1 className="text-2xl font-semibold text-white">License</h1>
        <Badge
          label={license.tier.toUpperCase()}
          color={tierColor(license.tier)}
        />
      </div>
      {/* Expiry info */}
      <Card title="Validity">
        <div className="flex flex-col gap-2 text-sm">
          <div className="flex items-center justify-between">
            <span className="text-white/60">Issued</span>
            <span className="text-white">
              {new Date(license.issuedAt).toLocaleDateString(undefined, {
                year: 'numeric',
                month: 'long',
                day: 'numeric',
              })}
            </span>
          </div>
          <div className="flex items-center justify-between">
            <span className="text-white/60">Expires</span>
            <span className="text-white">{expDate}</span>
          </div>
          <div className="flex items-center justify-between">
            <span className="text-white/60">Days remaining</span>
            <Badge
              label={isExpired ? 'Expired' : `${days} days`}
              color={isExpired ? 'error' : isExpiringSoon ? 'warning' : 'success'}
            />
          </div>
        </div>
      </Card>
      {/* Feature matrix */}
      <Card title="Features">
        <div className="divide-y divide-white/10">
          {Object.entries(FEATURE_LABELS).map(([key, label]) => {
            const enabled = license.features[key] ?? false;
            return (
              <div
                key={key}
                className="flex items-center justify-between py-3 first:pt-0 last:pb-0"
              >
                <span className="text-sm text-white">{label}</span>
                <Badge
                  label={enabled ? 'Enabled' : 'Disabled'}
                  color={enabled ? 'success' : 'error'}
                />
              </div>
            );
          })}
        </div>
      </Card>
      {/* Limits */}
      <Card title="Limits">
        <div className="divide-y divide-white/10">
          {Object.entries(LIMIT_LABELS).map(([key, label]) => {
            const value = license.limits[key];
            return (
              <div
                key={key}
                className="flex items-center justify-between py-3 first:pt-0 last:pb-0"
              >
                <span className="text-sm text-white/60">{label}</span>
                <span className="text-sm font-mono text-white">
                  {value !== undefined ? value : '—'}
                </span>
              </div>
            );
          })}
        </div>
      </Card>
      {/* License token */}
      <Card title="License Token">
        <div className="space-y-3">
          <p className="text-sm text-white/60">
            Use this token when registering Cameleer agents with your tenant.
          </p>
          <button
            type="button"
            className="text-sm text-primary-400 hover:text-primary-300 underline underline-offset-2 focus:outline-none"
            onClick={() => setTokenExpanded((v) => !v)}
          >
            {tokenExpanded ? 'Hide token' : 'Show token'}
          </button>
          {tokenExpanded && (
            <div className="mt-2 rounded bg-white/5 border border-white/10 p-3 overflow-x-auto">
              <code className="text-xs font-mono text-white/80 break-all">
                {license.token}
              </code>
            </div>
          )}
        </div>
      </Card>
    </div>
  );
 }
--- a/ui/src/router.tsx
+++ b/ui/src/router.tsx
@@ -0,0 +1,39 @@
 import { Routes, Route } from 'react-router';
 import { useEffect } from 'react';
 import { useAuthStore } from './auth/auth-store';
 import { LoginPage } from './auth/LoginPage';
 import { CallbackPage } from './auth/CallbackPage';
 import { ProtectedRoute } from './auth/ProtectedRoute';
 import { Layout } from './components/Layout';
 import { DashboardPage } from './pages/DashboardPage';
 import { EnvironmentsPage } from './pages/EnvironmentsPage';
 import { EnvironmentDetailPage } from './pages/EnvironmentDetailPage';
 import { AppDetailPage } from './pages/AppDetailPage';
 import { LicensePage } from './pages/LicensePage';
 export function AppRouter() {
  const loadFromStorage = useAuthStore((s) => s.loadFromStorage);
  useEffect(() => {
    loadFromStorage();
  }, [loadFromStorage]);
  return (
    <Routes>
      <Route path="/login" element={<LoginPage />} />
      <Route path="/callback" element={<CallbackPage />} />
      <Route
        element={
          <ProtectedRoute>
            <Layout />
          </ProtectedRoute>
        }
      >
        <Route index element={<DashboardPage />} />
        <Route path="environments" element={<EnvironmentsPage />} />
        <Route path="environments/:envId" element={<EnvironmentDetailPage />} />
        <Route path="environments/:envId/apps/:appId" element={<AppDetailPage />} />
        <Route path="license" element={<LicensePage />} />
      </Route>
    </Routes>
  );
 }
--- a/ui/src/types/api.ts
+++ b/ui/src/types/api.ts
@@ -0,0 +1,85 @@
 export interface TenantResponse {
  id: string;
  name: string;
  slug: string;
  tier: string;
  status: string;
  createdAt: string;
  updatedAt: string;
 }
 export interface EnvironmentResponse {
  id: string;
  tenantId: string;
  slug: string;
  displayName: string;
  status: string;
  createdAt: string;
  updatedAt: string;
 }
 export interface AppResponse {
  id: string;
  environmentId: string;
  slug: string;
  displayName: string;
  jarOriginalFilename: string | null;
  jarSizeBytes: number | null;
  jarChecksum: string | null;
  exposedPort: number | null;
  routeUrl: string | null;
  currentDeploymentId: string | null;
  previousDeploymentId: string | null;
  createdAt: string;
  updatedAt: string;
 }
 export interface DeploymentResponse {
  id: string;
  appId: string;
  version: number;
  imageRef: string;
  desiredStatus: string;
  observedStatus: string;
  errorMessage: string | null;
  orchestratorMetadata: Record<string, unknown>;
  deployedAt: string | null;
  stoppedAt: string | null;
  createdAt: string;
 }
 export interface LicenseResponse {
  id: string;
  tenantId: string;
  tier: string;
  features: Record<string, boolean>;
  limits: Record<string, number>;
  issuedAt: string;
  expiresAt: string;
  token: string;
 }
 export interface AgentStatusResponse {
  registered: boolean;
  state: string;
  lastHeartbeat: string | null;
  routeIds: string[];
  applicationId: string;
  environmentId: string;
 }
 export interface ObservabilityStatusResponse {
  hasTraces: boolean;
  hasMetrics: boolean;
  hasDiagrams: boolean;
  lastTraceAt: string | null;
  traceCount24h: number;
 }
 export interface LogEntry {
  appId: string;
  deploymentId: string;
  timestamp: string;
  stream: string;
  message: string;
 }
--- a/ui/src/vite-env.d.ts
+++ b/ui/src/vite-env.d.ts
@@ -0,0 +1 @@
 /// <reference types="vite/client" />
--- a/ui/tsconfig.json
+++ b/ui/tsconfig.json
@@ -0,0 +1,18 @@
 {
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2023", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false
  },
  "include": ["src"]
 }
--- a/ui/vite.config.ts
+++ b/ui/vite.config.ts
@@ -0,0 +1,19 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 export default defineConfig({
  plugins: [react()],
  server: {
    port: 5173,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      },
    },
  },
  build: {
    outDir: '../src/main/resources/static',
    emptyOutDir: true,
  },
 });
Author	SHA1	Message	Date
hsiegeln	050ff61e7a	Merge pull request 'feat: Phase 9 — Frontend React Shell' (#35 ) from feat/phase-9-frontend-react-shell into main All checks were successful CI / build (push) Successful in 41s Details CI / docker (push) Successful in 4s Details Reviewed-on: #35	2026-04-04 22:12:53 +02:00
hsiegeln	e325c4d2c0	fix: correct Dockerfile frontend build output path All checks were successful CI / build (push) Successful in 1m10s Details CI / build (pull_request) Successful in 1m9s Details CI / docker (pull_request) Has been skipped Details CI / docker (push) Successful in 23s Details Vite's outDir is '../src/main/resources/static' (relative to ui/), which resolves to /src/main/resources/static/ in the Docker build. The COPY was looking at /ui/dist/ which doesn't exist. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-04 22:10:42 +02:00
hsiegeln	4c8c8efbe5	feat: add SPA controller, Traefik route, CI frontend build, and HOWTO update Some checks failed CI / build (push) Successful in 49s Details CI / docker (push) Failing after 38s Details CI / build (pull_request) Successful in 1m2s Details CI / docker (pull_request) Has been skipped Details - SpaController catch-all forwards non-API routes to index.html - Traefik SPA route at priority=1 catches all unmatched paths - CI pipeline builds frontend before Maven - Dockerfile adds multi-stage frontend build - HOWTO.md documents frontend development workflow Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-04 22:06:36 +02:00
hsiegeln	f6d3627abc	feat: add license page with tier features and limits Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-04 22:04:55 +02:00
hsiegeln	fe786790e1	feat: add app detail page with deploy, logs, and status Full AppDetailPage with tabbed layout (Overview / Deployments / Logs), current deployment status with auto-poll, action bar (deploy/stop/restart/re-upload/delete), agent status card, routing card with edit modal, deployment history table, and container log viewer with stream filter. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-04 22:03:29 +02:00
hsiegeln	5eac48ad72	feat: add environments list and environment detail pages Implements EnvironmentsPage with DataTable, create modal, and row navigation, and EnvironmentDetailPage with app list, inline rename, new app form with JAR upload, and delete confirmation — all gated by RBAC permissions. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-04 22:00:14 +02:00
hsiegeln	02019e9347	feat: add dashboard page with tenant overview and KPI stats Replaces placeholder DashboardPage with a full implementation: tenant name + tier badge, KPI strip (environments, total apps, running, stopped), environment list with per-env app counts, and a recent deployments placeholder. Uses EnvApps helper component to fetch per-environment app data without violating hook rules. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-04 21:57:53 +02:00
hsiegeln	91a4235223	feat: add sidebar layout, environment tree, and router Wires up AppShell + Sidebar compound component, a per-environment SidebarTree that lazy-fetches apps, React Router nested routes, and provider-wrapped main.tsx with ThemeProvider/ToastProvider/BreadcrumbProvider. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-04 21:55:21 +02:00
hsiegeln	e725669aef	feat: add RBAC hooks and permission-gated components Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-04 21:51:38 +02:00
hsiegeln	d572926010	feat: add API client with auth middleware and React Query hooks Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-04 21:50:19 +02:00
hsiegeln	e33818cc74	feat: add auth store, login, callback, and protected route Adds Zustand auth store with JWT parsing (sub, roles, organization_id), Logto OIDC login page, authorization code callback handler, and ProtectedRoute guard. Also adds vite-env.d.ts for import.meta.env types. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-04 21:48:56 +02:00
hsiegeln	146dbccc6e	feat: scaffold React SPA with Vite, design system, and TypeScript types Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-04 21:47:01 +02:00
		`@@ -0,0 +1 @@`
							`@cameleer:registry=https://gitea.siegeln.net/api/packages/cameleer/npm/`