{"id":34636698,"url":"https://github.com/fullstack-pw/cks-frontend","last_synced_at":"2026-02-07T09:08:07.291Z","repository":{"id":296503703,"uuid":"993478544","full_name":"fullstack-pw/cks-frontend","owner":"fullstack-pw","description":null,"archived":false,"fork":false,"pushed_at":"2026-01-14T16:19:14.000Z","size":225,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-14T19:47:48.686Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fullstack-pw.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-05-30T21:34:21.000Z","updated_at":"2026-01-14T16:19:18.000Z","dependencies_parsed_at":"2025-05-31T17:53:10.168Z","dependency_job_id":"a1cbec54-a105-4953-b724-a1c6b50ca960","html_url":"https://github.com/fullstack-pw/cks-frontend","commit_stats":null,"previous_names":["fullstack-pw/cks-frontend"],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/fullstack-pw/cks-frontend","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fullstack-pw%2Fcks-frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fullstack-pw%2Fcks-frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fullstack-pw%2Fcks-frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fullstack-pw%2Fcks-frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fullstack-pw","download_url":"https://codeload.github.com/fullstack-pw/cks-frontend/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fullstack-pw%2Fcks-frontend/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29190842,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-07T07:37:03.739Z","status":"ssl_error","status_checked_at":"2026-02-07T07:37:03.029Z","response_time":63,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-12-24T17:02:22.191Z","updated_at":"2026-02-07T09:08:07.274Z","avatar_url":"https://github.com/fullstack-pw.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CKS Frontend\n\nNext.js-based web interface for the Certified Kubernetes Security Specialist (CKS) training platform. Provides browser-based terminal access via WebSocket, real-time task validation, and admin dashboard for cluster pool management.\n\n## Architecture Overview\n\nProduction-ready React application implementing sophisticated state management with SWR caching, WebSocket-based terminal emulation using xterm.js, and real-time session monitoring. Built with Next.js 14 standalone output for containerized deployment with 70% image size reduction compared to standard builds.\n\n### Core Components\n\n**Terminal System** (`src/components/Terminal.js`, `src/components/TerminalContainer.js`)\n- Full xterm.js integration with dynamic imports (no SSR) to prevent Node.js compatibility issues\n- WebSocket binary protocol for bidirectional terminal I/O with ArrayBuffer handling\n- Exponential backoff reconnection (1s to 2min with jitter) preventing thundering herd\n- Addon integration: FitAddon (auto-resize), SearchAddon (Ctrl+F with regex), WebLinksAddon (clickable URLs)\n- Tab-based interface for control-plane and worker-node terminals with lazy creation\n\n**State Management Architecture**\n- SWR (Stale-While-Revalidate) with 2-minute polling, focus revalidation, and 10-second deduplication\n- SessionContext providing global CRUD operations with optimistic updates via `mutate()`\n- ToastContext for notification system with auto-dismiss and stacking\n- Custom hooks: useSession, useTerminal, useTaskValidation, useScenario, useError\n\n**Admin Dashboard** (`src/pages/admin.js`)\n- Cluster pool status monitoring with real-time updates (30-second interval)\n- Session management with task progress visualization\n- Bootstrap pool, create snapshots, and release all clusters operations\n- Delete sessions with confirmation modal\n\n**API Client** (`src/lib/api.js`)\n- Centralized fetch wrapper with timeout support (120s default, configurable per endpoint)\n- Exponential backoff retry for network errors (2 retries: 1s, 2s delays)\n- AbortController integration for timeout cancellation\n- Structured error handling with status code mapping to user-friendly messages\n\n**Error Handling System** (`src/utils/errorHandler.js`, `src/hooks/useError.js`)\n- Centralized error processor with HTTP status code mapping\n- Context-aware error tracking for debugging\n- Toast notification integration\n- Error boundary for React error catching\n\n## DevOps Practices\n\n### Multi-Stage Docker Build\n\n**Dependencies Stage** (node:18-alpine)\n```dockerfile\nCOPY package.json package-lock.json ./\nRUN npm ci --omit=dev\n```\n- Installs production dependencies only\n- Leverages Docker layer caching\n\n**Builder Stage**\n```dockerfile\nRUN npm ci  # All dependencies including dev\nCOPY . .\nRUN npm run build  # Creates standalone output\n```\n- Next.js build with output file tracing\n- Generates minimal server bundle\n\n**Runtime Stage**\n```dockerfile\nFROM node:18-alpine\nRUN addgroup --system --gid 1001 nodejs\nRUN adduser --system --uid 1001 nextjs\nCOPY --from=builder --chown=nextjs:nodejs build/standalone ./\nCOPY --from=builder --chown=nextjs:nodejs build/static ./build/static\nUSER nextjs\nCMD [\"node\", \"server.js\"]\n```\n- Non-root execution (UID/GID 1001)\n- Standalone output: ~80MB vs ~200MB standard build\n- Self-contained server with traced dependencies\n\n**Build Optimizations**:\n- Multi-stage build reduces final image by 70%\n- Static asset optimization via Next.js automatic image optimization\n- Code splitting at route level\n- Tree shaking eliminates unused code\n\n### Next.js Standalone Output\n\n**Configuration** (`src/next.config.js`):\n```javascript\n{\n  output: 'standalone',  // Enables output file tracing\n  distDir: 'build',     // Custom build directory\n  reactStrictMode: true  // Enables strict mode checks\n}\n```\n\n**Benefits**:\n- Automatic dependency tracing identifies required packages\n- Generates minimal `server.js` with only runtime dependencies\n- Reduces `node_modules` from 300MB+ to ~50MB\n- Faster container startup and deployment\n\n### GitOps CI/CD Pipeline\n\n**Automated Pipeline** (`.github/workflows/pipeline.yml`)\n\nJob Flow:\n1. **docker-build-and-push**: Multi-stage build, push to `registry.fullstack.pw/library/cks-frontend:latest` and commit SHA\n2. **dev-deploy**: Kustomize overlay application to development cluster\n3. **versioning**: Semantic versioning from commit messages, GitHub release creation\n\n**Manual Pipeline** (`.github/workflows/manual-pipeline.yml`)\n- Workflow dispatch for manual deployments\n- Environment selection: dev/stg/prod\n- Optional Cypress test execution (prepared but commented out)\n\n**Deployment Strategy**:\n- Kustomize base + overlays pattern for environment-specific configuration\n- ConfigMap for runtime environment variables (API_BASE_URL, LOG_LEVEL)\n- Single replica for dev/stg, multiple replicas for prod\n- Rolling updates with readiness probe gates\n\n### Kustomize Deployment Architecture\n\n**Base Layer** (`kustomize/base/`)\n\n**Deployment**:\n```yaml\ncontainers:\n  - name: cks-frontend\n    image: registry.fullstack.pw/library/cks-frontend:latest\n    ports:\n      - containerPort: 3000\n    envFrom:\n      - configMapRef:\n          name: cks-frontend-config\n    resources:\n      requests:\n        cpu: 100m\n        memory: 128Mi\n      limits:\n        cpu: 200m\n        memory: 256Mi\n    readinessProbe:\n      httpGet:\n        path: /\n        port: 3000\n      initialDelaySeconds: 5\n      periodSeconds: 10\n    livenessProbe:\n      httpGet:\n        path: /\n        port: 3000\n      initialDelaySeconds: 15\n      periodSeconds: 20\n```\n\n**Service**:\n- Type: ClusterIP\n- Port: 3000\n\n**VirtualService** (Istio):\n```yaml\nspec:\n  hosts:\n    - dev.cks.fullstack.pw  # Overridden per environment\n  gateways:\n    - istio-system/default-gateway\n  http:\n    - route:\n        - destination:\n            host: cks-frontend.default.svc.cluster.local\n            port:\n              number: 3000\n```\n- TLS termination via cert-manager annotation\n- Automatic HTTPS certificate management\n\n**Overlays** (dev/stg/prod):\n- Environment-specific ConfigMap values\n- Replica count adjustments\n- Resource limit modifications\n- API endpoint URLs\n\n### State Management Patterns\n\n**SWR Configuration**:\n```javascript\nuseSWR(key, fetcher, {\n  refreshInterval: 120000,      // Poll every 2 minutes\n  revalidateOnFocus: true,      // Refresh on window focus\n  dedupingInterval: 10000,      // Dedupe within 10 seconds\n  onErrorRetry: (error, key, config, revalidate, { retryCount }) =\u003e {\n    if (retryCount \u003e= 3) return;  // Max 3 retries\n    setTimeout(() =\u003e revalidate({ retryCount }), 5000 * Math.pow(2, retryCount));\n  }\n})\n```\n\n**Benefits**:\n- Automatic caching reduces redundant API calls\n- Stale-while-revalidate pattern: Show cached data instantly, fetch in background\n- Optimistic updates via `mutate()` for instant UI feedback\n- Focus revalidation ensures fresh data when user returns to tab\n\n**Data Flow**:\n1. Component calls `useSession(sessionId)`\n2. SWR checks cache, returns stale data if exists\n3. Background fetch initiated\n4. On success: cache updated, components re-render\n5. On error: retry with exponential backoff, show error state\n\n### WebSocket Terminal Implementation\n\n**Connection Management**:\n```javascript\nconst protocol = apiUrl.startsWith('https') ? 'wss:' : 'ws:';\nconst wsUrl = `${protocol}://${host}/api/v1/terminals/${terminalId}/attach`;\nconst socket = new WebSocket(wsUrl);\nsocket.binaryType = 'arraybuffer';\n```\n\n**Reconnection Strategy**:\n```javascript\nconst calculateDelay = () =\u003e {\n  const baseDelay = 1000;\n  const maxDelay = 120000;  // 2 minutes\n  const delay = Math.min(\n    baseDelay * Math.pow(1.5, attemptCount),\n    maxDelay\n  );\n  return delay + (Math.random() * 1000);  // Add jitter\n};\n```\n\n**Binary Protocol**:\n- Incoming: Blob → ArrayBuffer → Uint8Array → terminal.write()\n- Outgoing: User input → TextEncoder → send()\n- Resize messages: Custom 5-byte binary format (type + cols + rows)\n\n**Advanced Features**:\n- Search with Ctrl+F (regex support, result highlighting, navigation)\n- Clickable URLs in terminal output\n- Auto-resize on window changes\n- Cleanup architecture prevents memory leaks (event listeners, timeouts, WebSocket)\n\n### Error Handling Architecture\n\n**Centralized Error Processor**:\n```javascript\nErrorHandler.processApiError(error, context) {\n  // 1. Parse error (network, timeout, HTTP)\n  // 2. Map status code to user message\n  // 3. Log with context\n  // 4. Return structured error\n  return {\n    message: \"User-friendly message\",\n    statusCode: 404,\n    originalError: error,\n    context: { endpoint, sessionId }\n  };\n}\n```\n\n**Status Code Mapping**:\n- 401: \"Authentication required. Please log in again.\"\n- 403: \"You do not have permission to perform this action.\"\n- 404: \"The requested resource was not found.\"\n- 408: \"Request timed out. The server is taking too long to respond.\"\n- 429: \"Too many requests. Please slow down.\"\n- 500+: \"We're experiencing technical difficulties. Please try again later.\"\n\n**Integration Points**:\n- API client: All fetch calls wrapped\n- React components: useError hook\n- Error boundaries: Catch React errors\n- Toast notifications: User feedback\n\n## Technical Innovations\n\n### Dynamic Import Strategy\n\n**Problem**: xterm.js is browser-only, crashes on server-side rendering\n\n**Solution**:\n```javascript\nconst Terminal = dynamic(() =\u003e {\n  return Promise.all([\n    import('@xterm/xterm'),\n    import('@xterm/addon-fit'),\n    import('@xterm/addon-search'),\n    import('@xterm/addon-web-links')\n  ]).then(([xterm, fit, search, weblinks]) =\u003e {\n    // Component implementation\n  });\n}, {\n  ssr: false,  // Disable SSR\n  loading: () =\u003e \u003cLoadingSpinner /\u003e\n});\n```\n\n**Benefits**:\n- Prevents SSR errors\n- Parallel addon loading\n- Reduces initial bundle size\n- Graceful loading state\n\n### Optimistic UI Updates\n\n**Session Creation**:\n```javascript\nconst createSession = async (scenarioId) =\u003e {\n  // 1. Optimistic update: Add to cache immediately\n  mutate('/api/v1/sessions',\n    async (current) =\u003e [...current, { id: tempId, status: 'creating' }],\n    false  // Don't revalidate yet\n  );\n\n  // 2. Make API call\n  const session = await api.sessions.create(scenarioId);\n\n  // 3. Replace temp with real data\n  mutate('/api/v1/sessions');\n\n  // 4. Navigate to lab page\n  router.push(`/lab/${session.id}`);\n};\n```\n\n**Benefits**:\n- Instant UI feedback\n- Perceived performance improvement\n- Rollback on error\n- Seamless navigation\n\n### Environment Variable Injection\n\n**Problem**: Next.js bundles environment variables at build time, but API URL varies per deployment\n\n**Solution**:\n```javascript\n// _app.js server-side\nexport async function getInitialProps() {\n  return {\n    apiBaseUrl: process.env.API_BASE_URL || 'http://localhost:8080/api/v1'\n  };\n}\n\n// Inject into client\n\u003cscript dangerouslySetInnerHTML={{\n  __html: `window.__API_BASE_URL__ = ${JSON.stringify(apiBaseUrl)};`\n}} /\u003e\n\n// API client runtime\nconst getApiBaseUrl = () =\u003e {\n  if (typeof window !== 'undefined') {\n    return window.__API_BASE_URL__;\n  }\n  return 'http://localhost:8080/api/v1';\n};\n```\n\n**Benefits**:\n- Single Docker image for all environments\n- Runtime configuration via ConfigMap\n- No rebuild required for environment changes\n\n## Admin Panel Features\n\n### Cluster Pool Monitoring\n\n**Display Information**:\n- Total clusters: 3\n- Available count (green indicator)\n- Locked count (yellow indicator)\n- Cluster table with columns:\n  - Cluster ID\n  - Status (available/locked/resetting/error) with color coding\n  - Assigned Session ID\n  - Lock Duration (formatted as \"1h 23m\" or \"45m\")\n  - VM Names (control-plane + worker)\n  - Last Reset timestamp\n  - Last Health Check timestamp\n\n**Operations**:\n- **Release All Clusters**: Bulk operation to force-release all locked clusters\n  - Confirmation modal with warning\n  - Disabled when no clusters locked\n  - Loading spinner during operation\n  - Success toast on completion\n\n**Auto-Refresh**:\n- Fetches cluster status every 30 seconds\n- Manual refresh button in page header\n- Loading indicator during fetch\n- Error toast on fetch failure\n\n### Session Management\n\n**Session Table Columns**:\n- Session ID (truncated with tooltip)\n- Status badge (running/provisioning/failed with colors)\n- Scenario ID\n- Assigned Cluster (green badge)\n- Duration since start (\"2h 15m ago\")\n- Time Remaining (red if expired, countdown format)\n- Active Terminals count\n- Task Progress (X/Y completed with inline progress bar)\n- Actions (Delete button)\n\n**Delete Session Operation**:\n```javascript\nconst handleDelete = async (sessionId) =\u003e {\n  // 1. Show confirmation modal\n  const confirmed = await showConfirmation({\n    title: \"Delete Session\",\n    message: \"This will terminate the session and release resources.\",\n    danger: true\n  });\n\n  // 2. Call API\n  await api.admin.deleteSession(sessionId);\n\n  // 3. Refresh both clusters and sessions\n  await Promise.all([\n    fetchClusters(),\n    fetchSessions()\n  ]);\n\n  // 4. Show success toast\n  toast.success(\"Session deleted successfully\");\n};\n```\n\n**Task Progress Visualization**:\n- Inline progress bar (green fill based on percentage)\n- Completion count (e.g., \"3/5\")\n- Percentage calculation\n- Visual indicator for 0%, partial, and 100% completion\n\n### Bootstrap Operations\n\n**POST /api/v1/admin/bootstrap-pool**:\n- Creates 3 baseline clusters from scratch\n- Blocks UI with loading state\n- Progress tracking (if implemented)\n- Use case: Initial setup, disaster recovery\n\n**POST /api/v1/admin/create-snapshots**:\n- Creates VirtualMachineSnapshot for all cluster VMs\n- Must run after bootstrap before first session\n- Loading state with progress indication\n- Success/error toast notifications\n\n## Task Validation System\n\n**Validation Flow**:\n1. User clicks \"Validate\" button on task card\n2. `useTaskValidation` hook calls `POST /api/v1/sessions/{id}/tasks/{taskId}/validate`\n3. Backend executes validation rules (resource checks, commands, scripts)\n4. Response includes:\n   ```json\n   {\n     \"success\": true,\n     \"message\": \"All validation rules passed\",\n     \"results\": [\n       {\n         \"ruleId\": \"namespace-exists\",\n         \"ruleType\": \"resource_exists\",\n         \"passed\": true,\n         \"message\": \"Namespace test-pods found\",\n         \"expected\": \"exists\",\n         \"actual\": \"exists\"\n       }\n     ],\n     \"timestamp\": \"2025-11-15T10:30:00Z\"\n   }\n   ```\n5. Frontend updates task status to \"completed\" or \"failed\"\n6. Visual feedback: green checkmark or red X\n7. Details expandable showing individual rule results\n\n**Validation Result Caching**:\n- Results stored in component state to prevent redundant checks\n- Cleared on session refresh\n- Displayed in validation history panel\n\n**Progress Tracking**:\n- Task list shows completion status per task\n- Progress bar at scenario level (X/Y tasks completed)\n- Percentage calculation\n- Session context maintains global task state\n\n## Technology Stack\n\n**Core Framework**:\n- Next.js 14 (React framework with SSR)\n- React 18 (functional components with hooks)\n- Node.js 18+ (runtime environment)\n\n**UI \u0026 Styling**:\n- Tailwind CSS 3.3 (utility-first CSS)\n- Custom CSS (global styles, animations)\n- Responsive design (mobile-first breakpoints)\n\n**State Management**:\n- SWR 2.0 (data fetching with caching)\n- React Context (SessionContext, ToastContext)\n- Custom hooks (5 specialized hooks)\n\n**Terminal**:\n- @xterm/xterm 5.5 (terminal emulator)\n- @xterm/addon-fit (auto-sizing)\n- @xterm/addon-search (Ctrl+F search)\n- @xterm/addon-web-links (clickable URLs)\n- WebSocket (real-time communication)\n\n**Content \u0026 Utilities**:\n- react-markdown 8.0 (Markdown rendering)\n- Custom error handler (centralized error processing)\n\n**Build Tools**:\n- PostCSS (CSS processing)\n- Autoprefixer (browser compatibility)\n- ESLint (code linting)\n\n**Infrastructure**:\n- Kubernetes (deployment orchestration)\n- Kustomize (configuration management)\n- Istio (service mesh, ingress)\n- Cert-Manager (TLS certificates)\n\n## Environment Configuration\n\nKey configuration via ConfigMap:\n\n| Variable | Purpose | Default |\n|----------|---------|---------|\n| `NEXT_PUBLIC_API_BASE_URL` | Backend API URL | `http://localhost:8080/api/v1` |\n| `NEXT_TELEMETRY_DISABLED` | Disable Next.js telemetry | `1` |\n| `NODE_ENV` | Environment mode | `development` |\n| `LOG_LEVEL` | Logging verbosity | `DEBUG` |\n\n**Environment-Specific Values**:\n- **dev**: `https://dev.api.cks.fullstack.pw/api/v1`\n- **stg**: `https://stg.api.cks.fullstack.pw/api/v1`\n- **prod**: `https://api.cks.fullstack.pw/api/v1`\n\n## Repository Structure\n\n```\ncks-frontend/\n├── src/\n│   ├── pages/\n│   │   ├── index.js                # Home: Scenario browser\n│   │   ├── admin.js                # Admin dashboard\n│   │   ├── lab/[id].js             # Lab environment (dynamic route)\n│   │   ├── _app.js                 # App wrapper with contexts\n│   │   └── 404.js                  # Custom 404 page\n│   ├── components/\n│   │   ├── common/                 # Reusable UI (11 components)\n│   │   ├── Terminal.js             # xterm.js terminal\n│   │   ├── TerminalContainer.js    # Terminal tabs\n│   │   ├── TaskPanel.js            # Task list UI\n│   │   ├── TaskValidation.js       # Validation display\n│   │   ├── ScenarioCard.js         # Scenario display\n│   │   ├── Admin*.js               # Admin dashboard components\n│   │   └── Toast.js                # Notification system\n│   ├── hooks/\n│   │   ├── useSession.js           # Session management with SWR\n│   │   ├── useTerminal.js          # Terminal connection\n│   │   ├── useTaskValidation.js    # Task validation logic\n│   │   ├── useScenario.js          # Scenario data fetching\n│   │   └── useError.js             # Error handling\n│   ├── contexts/\n│   │   ├── SessionContext.js       # Global session state\n│   │   └── ToastContext.js         # Toast notifications\n│   ├── lib/\n│   │   └── api.js                  # API client with retry/timeout\n│   ├── utils/\n│   │   └── errorHandler.js         # Centralized error processing\n│   ├── styles/\n│   │   └── globals.css             # Global CSS + Tailwind\n│   ├── public/                     # Static assets\n│   ├── package.json                # Dependencies\n│   ├── next.config.js              # Next.js configuration\n│   └── tailwind.config.js          # Tailwind configuration\n├── kustomize/\n│   ├── base/                       # Base manifests\n│   └── overlays/{dev,stg,prod}/    # Environment configs\n├── .github/workflows/              # CI/CD pipelines\n├── Dockerfile                      # Multi-stage build\n├── Makefile                        # Build/deploy commands\n└── README.md                       # This file\n```\n\n## Performance Characteristics\n\n**Build Performance**:\n- Docker image: ~80MB (standalone) vs ~200MB (standard)\n- Build time: ~2 minutes (multi-stage)\n- Deployment time: ~30 seconds (rolling update)\n\n**Runtime Performance**:\n- Time to Interactive: \u003c2 seconds (SWR cached)\n- Terminal connection: \u003c500ms\n- Validation execution: 2-10 seconds (backend-dependent)\n- SWR cache hit rate: ~80% (2-minute refresh)\n\n**Resource Usage**:\n- Container: ~100m CPU, ~128Mi memory (idle)\n- Container: ~150m CPU, ~200Mi memory (active)\n- Browser: ~50MB memory per tab\n\n**Network**:\n- Initial page load: ~300KB (gzipped)\n- xterm.js lazy load: ~150KB\n- WebSocket overhead: \u003c1KB/s (terminal idle)\n- WebSocket throughput: ~100KB/s (terminal active)\n\n## Security Implementation\n\n**Container Security**:\n- Non-root execution (UID 1001)\n- Minimal base image (Alpine)\n- Health checks for liveness/readiness\n- Resource limits prevent DoS\n\n**Network Security**:\n- HTTPS via Istio + cert-manager\n- Automatic certificate renewal\n- Secure WebSocket (wss://)\n- CORS enforcement (backend)\n\n**Client-Side Security**:\n- Input sanitization in error messages\n- No secrets in client code\n- XSS prevention via React escaping\n- No eval() or dangerouslySetInnerHTML (except controlled env injection)\n\n**API Security**:\n- Timeout protection (120s max)\n- Request cancellation via AbortController\n- Retry limits prevent abuse\n\n---\n\n**Version**: 1.0.0\n**License**: Proprietary\n**Repository**: https://github.com/fullstack-pw/cks-frontend\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffullstack-pw%2Fcks-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffullstack-pw%2Fcks-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffullstack-pw%2Fcks-frontend/lists"}