feat(frontend): add feature-based arch with auth and layout

src/frontend/package.json

@@ -9,15 +9,25 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@microsoft/signalr": "^10.0.0",
+    "@tanstack/react-query": "^5.90.21",
     "@xyflow/react": "^12.0.0",
+    "keycloak-js": "^26.2.3",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.13.0",
+    "zustand": "^5.0.11"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^4.3.0",
+    "jsdom": "^28.0.0",
+    "msw": "^2.12.10",
     "typescript": "~5.7.0",
-    "vite": "^6.0.0"
+    "vite": "^6.0.0",
+    "vitest": "^4.0.18"
   }
 }

src/frontend/src/api/client.ts

@@ -0,0 +1,25 @@
+// Copyright (c) 2026 Qubernetic (Biró, Csaba Attila)
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+const BASE_URL = "/api";
+
+export async function apiFetch<T>(
+  path: string,
+  options?: RequestInit,
+): Promise<T> {
+  const token = sessionStorage.getItem("auth_token");
+  const response = await fetch(`${BASE_URL}${path}`, {
+    ...options,
+    headers: {
+      "Content-Type": "application/json",
+      ...(token ? { Authorization: `Bearer ${token}` } : {}),
+      ...options?.headers,
+    },
+  });
+
+  if (!response.ok) {
+    throw new Error(`API error: ${response.status} ${response.statusText}`);
+  }
+
+  return response.json() as Promise<T>;
+}

src/frontend/src/api/endpoints.ts

@@ -0,0 +1,43 @@
+// Copyright (c) 2026 Qubernetic (Biró, Csaba Attila)
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+export const endpoints = {
+  health: "/health",
+
+  projects: {
+    list: "/projects",
+    detail: (id: string) => `/projects/${id}`,
+    create: "/projects",
+  },
+
+  build: {
+    enqueue: "/build",
+    claim: "/build/claim",
+    result: (buildId: string) => `/build/${buildId}/result`,
+    history: (projectId: string) => `/build/history/${projectId}`,
+  },
+
+  deploy: {
+    request: "/deploy",
+    approve: (deployId: string) => `/deploy/${deployId}/approve`,
+    lock: (targetId: string) => `/deploy/lock/${targetId}`,
+    unlock: (targetId: string) => `/deploy/unlock/${targetId}`,
+  },
+
+  targets: {
+    list: "/targets",
+    detail: (id: string) => `/targets/${id}`,
+    groups: "/targets/groups",
+  },
+
+  monitor: {
+    start: "/monitor/start",
+    stop: (sessionId: string) => `/monitor/${sessionId}/stop`,
+  },
+
+  admin: {
+    users: "/admin/users",
+    user: (id: string) => `/admin/users/${id}`,
+    roles: "/admin/roles",
+  },
+} as const;

src/frontend/src/api/types.ts

@@ -0,0 +1,119 @@
+// Copyright (c) 2026 Qubernetic (Biró, Csaba Attila)
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+// Mirrors FlowForge.Shared DTOs
+
+export interface FlowDocument {
+  name: string;
+  version: string;
+  nodes: FlowNode[];
+  connections: FlowConnection[];
+  metadata: Record<string, string>;
+}
+
+export interface FlowNode {
+  id: string;
+  type: string;
+  position: { x: number; y: number };
+  parameters: Record<string, unknown>;
+}
+
+export interface FlowConnection {
+  from: { nodeId: string; portName: string };
+  to: { nodeId: string; portName: string };
+}
+
+export type BuildStatus =
+  | "Pending"
+  | "Claimed"
+  | "InProgress"
+  | "Completed"
+  | "Failed";
+
+export interface BuildJob {
+  id: string;
+  projectId: string;
+  projectName: string;
+  status: BuildStatus;
+  includeDeploy: boolean;
+  createdAt: string;
+}
+
+export interface BuildResult {
+  buildId: string;
+  success: boolean;
+  errors: string[];
+  commitSha: string | null;
+  completedAt: string;
+}
+
+export interface BuildProgress {
+  buildId: string;
+  stage: string;
+  percentage: number;
+  message: string;
+}
+
+export type DeployStatus =
+  | "Pending"
+  | "AwaitingApproval"
+  | "Approved"
+  | "InProgress"
+  | "Completed"
+  | "Failed"
+  | "Rejected";
+
+export interface ProjectSummary {
+  id: string;
+  name: string;
+  description: string;
+  repoUrl: string;
+  lastCommitSha: string | null;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface ProjectDetail extends ProjectSummary {
+  branch: string;
+  flow: FlowDocument | null;
+}
+
+export interface PlcTarget {
+  id: string;
+  name: string;
+  amsNetId: string;
+  twinCatVersion: string;
+  labels: string[];
+  groupId: string | null;
+  isProductionTarget: boolean;
+  deployLocked: boolean;
+}
+
+export interface TargetGroup {
+  id: string;
+  name: string;
+  description: string;
+  targets: PlcTarget[];
+}
+
+export interface UserInfo {
+  id: string;
+  userName: string;
+  email: string;
+  displayName: string;
+  roles: string[];
+}
+
+export interface MonitorSession {
+  sessionId: string;
+  signalREndpoint: string;
+  authToken: string;
+  targetAmsNetId: string;
+}
+
+export interface PlcVariableValue {
+  path: string;
+  value: unknown;
+  dataType: string;
+  timestamp: string;
+}

src/frontend/src/auth/AuthProvider.tsx

@@ -0,0 +1,32 @@
+// Copyright (c) 2026 Qubernetic (Biró, Csaba Attila)
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { createContext, type ReactNode } from "react";
+import type { UserInfo } from "../api/types";
+
+export interface AuthContextType {
+  user: UserInfo | null;
+  isAuthenticated: boolean;
+  login: () => void;
+  logout: () => void;
+  token: string | null;
+}
+
+export const AuthContext = createContext<AuthContextType | null>(null);
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  // TODO: Initialize Keycloak, handle OIDC flow, manage token lifecycle
+  return (
+    <AuthContext.Provider
+      value={{
+        user: null,
+        isAuthenticated: false,
+        login: () => {},
+        logout: () => {},
+        token: null,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+}

src/frontend/src/auth/ProtectedRoute.tsx

@@ -0,0 +1,16 @@
+// Copyright (c) 2026 Qubernetic (Biró, Csaba Attila)
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { Navigate } from "react-router-dom";
+import { useAuth } from "./useAuth";
+import type { ReactNode } from "react";
+
+export function ProtectedRoute({ children }: { children: ReactNode }) {
+  const { isAuthenticated } = useAuth();
+
+  if (!isAuthenticated) {
+    return <Navigate to="/login" replace />;
+  }
+
+  return <>{children}</>;
+}

src/frontend/src/auth/permissions.ts

@@ -0,0 +1,49 @@
+// Copyright (c) 2026 Qubernetic (Biró, Csaba Attila)
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+export type Permission =
+  | "project:view"
+  | "project:create"
+  | "project:edit"
+  | "project:delete"
+  | "build"
+  | "deploy"
+  | "target:manage"
+  | "monitor"
+  | "admin:users"
+  | "admin:system";
+
+const rolePermissions: Record<string, Permission[]> = {
+  viewer: ["project:view", "monitor"],
+  editor: ["project:view", "project:edit", "monitor"],
+  builder: ["project:view", "project:edit", "build", "monitor"],
+  deployer: [
+    "project:view",
+    "project:edit",
+    "build",
+    "deploy",
+    "monitor",
+    "target:manage",
+  ],
+  admin: [
+    "project:view",
+    "project:create",
+    "project:edit",
+    "project:delete",
+    "build",
+    "deploy",
+    "target:manage",
+    "monitor",
+    "admin:users",
+    "admin:system",
+  ],
+};
+
+export function hasPermission(
+  roles: string[],
+  permission: Permission,
+): boolean {
+  return roles.some((role) =>
+    rolePermissions[role]?.includes(permission),
+  );
+}

src/frontend/src/auth/useAuth.ts

@@ -0,0 +1,13 @@
+// Copyright (c) 2026 Qubernetic (Biró, Csaba Attila)
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { useContext } from "react";
+import { AuthContext, type AuthContextType } from "./AuthProvider";
+
+export function useAuth(): AuthContextType {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+  return context;
+}

src/frontend/src/features/admin/AdminPage.tsx

@@ -0,0 +1,6 @@
+// Copyright (c) 2026 Qubernetic (Biró, Csaba Attila)
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+export function AdminPage() {
+  return <div>AdminPage</div>;
+}

src/frontend/src/features/admin/UsersPage.tsx

@@ -0,0 +1,6 @@
+// Copyright (c) 2026 Qubernetic (Biró, Csaba Attila)
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+export function UsersPage() {
+  return <div>UsersPage</div>;
+}

src/frontend/src/features/admin/components/RoleAssignment.tsx

@@ -0,0 +1,6 @@
+// Copyright (c) 2026 Qubernetic (Biró, Csaba Attila)
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+export function RoleAssignment() {
+  return <div>RoleAssignment</div>;
+}

src/frontend/src/features/admin/components/UserEditDialog.tsx

@@ -0,0 +1,6 @@
+// Copyright (c) 2026 Qubernetic (Biró, Csaba Attila)
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+export function UserEditDialog() {
+  return <div>UserEditDialog</div>;
+}

src/frontend/src/features/admin/components/UserTable.tsx

@@ -0,0 +1,6 @@
+// Copyright (c) 2026 Qubernetic (Biró, Csaba Attila)
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+export function UserTable() {
+  return <div>UserTable</div>;
+}

src/frontend/src/features/admin/hooks/useRoles.ts

@@ -0,0 +1,6 @@
+// Copyright (c) 2026 Qubernetic (Biró, Csaba Attila)
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+export function useRoles() {
+  return [];
+}

src/frontend/src/features/admin/hooks/useUsers.ts

@@ -0,0 +1,6 @@
+// Copyright (c) 2026 Qubernetic (Biró, Csaba Attila)
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+export function useUsers() {
+  return [];
+}

src/frontend/src/features/deploy/components/ApprovalDialog.tsx

@@ -0,0 +1,6 @@
+// Copyright (c) 2026 Qubernetic (Biró, Csaba Attila)
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+export function ApprovalDialog() {
+  return <div>ApprovalDialog</div>;
+}

src/frontend/src/features/deploy/components/DeployLockIndicator.tsx

@@ -0,0 +1,6 @@
+// Copyright (c) 2026 Qubernetic (Biró, Csaba Attila)
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+export function DeployLockIndicator() {
+  return <div>DeployLockIndicator</div>;
+}