feat: Enhance template management and UI components

apps/control-panel-app/src/constants/success.ts

@@ -45,4 +45,9 @@ export const SUCCESS_MESSAGES = {
     LIST: "MCP API keys fetched successfully",
     REVOKED: "MCP API key revoked successfully",
   },
+
+  TEMPLATE: {
+    LIST: "Templates fetched successfully",
+    CATEGORIES: "Template categories fetched successfully",
+  },
 };

apps/control-panel-app/src/modules/service-template/constants/template-list.constants.ts

@@ -0,0 +1,3 @@
+export const DEFAULT_TEMPLATE_LIST_PAGE = 1;
+export const DEFAULT_TEMPLATE_LIST_LIMIT = 12;
+export const MAX_TEMPLATE_LIST_LIMIT = 100;

apps/control-panel-app/src/modules/service-template/controllers/service-template.controller.ts

@@ -8,6 +8,11 @@ import {
 } from "@nestjs/common";
 import type { Response } from "express";
 
+import { PaginatedResponse } from "@shared/common";
+import { ServiceResponse } from "@control-panel/common/interfaces/success-response.interface";
+
+import { ListTemplatesQueryDto } from "../dto/list-templates-query.dto";
+import type { TemplateListItemDto } from "../dto/template-marketplace.dto";
 import { ServiceTemplateService } from "../services/service-template.service";
 
 @Controller("templates")
@@ -16,11 +21,27 @@ export class ServiceTemplateController {
     private readonly serviceTemplateService: ServiceTemplateService,
   ) {}
 
+  /**
+   * Lists templates with pagination.
+   */
   @Get()
-  listTemplates() {
-    return this.serviceTemplateService.listTemplates();
+  listTemplates(
+    @Query() query: ListTemplatesQueryDto,
+  ): Promise<ServiceResponse<PaginatedResponse<TemplateListItemDto>>> {
+    return this.serviceTemplateService.listTemplatesPaginated(query);
+  }
+
+  /**
+   * Lists unique template categories.
+   */
+  @Get("categories")
+  listCategories(): Promise<ServiceResponse<string[]>> {
+    return this.serviceTemplateService.listTemplateCategories();
   }
 
+  /**
+   * Gets the template by slug and format.
+   */
   @Get(":slug")
   async getTemplate(
     @Param("slug") slug: string,

apps/control-panel-app/src/modules/service-template/dto/list-templates-query.dto.ts

@@ -0,0 +1,37 @@
+import { Transform, Type } from "class-transformer";
+import { IsInt, IsOptional, IsString, Max, Min } from "class-validator";
+
+import {
+  DEFAULT_TEMPLATE_LIST_LIMIT,
+  DEFAULT_TEMPLATE_LIST_PAGE,
+  MAX_TEMPLATE_LIST_LIMIT,
+} from "../constants/template-list.constants";
+
+export class ListTemplatesQueryDto {
+  @IsOptional()
+  @Type(() => Number)
+  @IsInt()
+  @Min(1)
+  page: number = DEFAULT_TEMPLATE_LIST_PAGE;
+
+  @IsOptional()
+  @Type(() => Number)
+  @IsInt()
+  @Min(1)
+  @Max(MAX_TEMPLATE_LIST_LIMIT)
+  limit: number = DEFAULT_TEMPLATE_LIST_LIMIT;
+
+  @IsOptional()
+  @IsString()
+  @Transform(({ value }: { value: unknown }) =>
+    typeof value === "string" ? value.trim() : value,
+  )
+  search?: string;
+
+  @IsOptional()
+  @IsString()
+  @Transform(({ value }: { value: unknown }) =>
+    typeof value === "string" ? value.trim() : value,
+  )
+  category?: string;
+}

apps/control-panel-app/src/modules/service-template/services/service-template.service.ts

@@ -5,7 +5,13 @@ import {
   NotFoundException,
 } from "@nestjs/common";
 import { InjectRepository } from "@nestjs/typeorm";
-import { Repository } from "typeorm";
+import {
+  ArrayContains,
+  ArrayOverlap,
+  FindOptionsWhere,
+  ILike,
+  Repository,
+} from "typeorm";
 import {
   getTemplateDescriptionFromComments,
   getTemplateLongDescriptionFromComments,
@@ -15,7 +21,16 @@ import {
 } from "@shared/common";
 import * as yaml from "js-yaml";
 
+import { SUCCESS_MESSAGES } from "@control-panel/constants/success";
+import { ServiceResponse } from "@control-panel/common/interfaces/success-response.interface";
+import { PaginatedResponse } from "@shared/common";
+
 import { ServiceTemplateEntity } from "../entities/service-template.entity";
+import {
+  DEFAULT_TEMPLATE_LIST_LIMIT,
+  DEFAULT_TEMPLATE_LIST_PAGE,
+} from "../constants/template-list.constants";
+import { ListTemplatesQueryDto } from "../dto/list-templates-query.dto";
 import {
   PUBLIC_TEMPLATE_DETAIL_FIELDS,
   PUBLIC_TEMPLATE_LIST_FIELDS,
@@ -54,6 +69,9 @@ export class ServiceTemplateService {
     private readonly templatePayloadService: TemplatePayloadService,
   ) {}
 
+  /**
+   * Gets the template by slug and format.
+   */
   async getTemplate(
     slug: string,
     format: string = "yml",
@@ -134,6 +152,101 @@ export class ServiceTemplateService {
     return this.listTemplates(PUBLIC_TEMPLATE_LIST_FIELDS, { category });
   }
 
+  /**
+   * Lists templates with pagination.
+   */
+  async listTemplatesPaginated(
+    query: ListTemplatesQueryDto,
+  ): Promise<ServiceResponse<PaginatedResponse<TemplateListItemDto>>> {
+    const page = query.page ?? DEFAULT_TEMPLATE_LIST_PAGE;
+    const limit = query.limit ?? DEFAULT_TEMPLATE_LIST_LIMIT;
+    const skip = (page - 1) * limit;
+
+    if (query.category !== undefined && query.category.trim() === "") {
+      throw new BadRequestException("category query parameter cannot be empty");
+    }
+
+    const baseWhere: FindOptionsWhere<ServiceTemplateEntity> = {
+      isActive: true,
+    };
+
+    if (query.category?.trim()) {
+      baseWhere.category = ArrayContains([query.category.trim().toLowerCase()]);
+    }
+
+    let where:
+      | FindOptionsWhere<ServiceTemplateEntity>
+      | FindOptionsWhere<ServiceTemplateEntity>[];
+
+    if (query.search?.trim()) {
+      const searchTerm = query.search.trim();
+      const search = ILike(`%${searchTerm}%`);
+
+      where = [
+        { ...baseWhere, name: search },
+        { ...baseWhere, slug: search },
+        { ...baseWhere, shortDescription: search },
+        { ...baseWhere, tags: ArrayOverlap([searchTerm]) },
+      ];
+    } else {
+      where = baseWhere;
+    }
+
+    try {
+      const [templates, total] =
+        await this.serviceTemplateRepository.findAndCount({
+          where,
+          order: { name: "ASC" },
+          skip,
+          take: limit,
+        });
+      const totalPages = total === 0 ? 0 : Math.ceil(total / limit);
+
+      return {
+        message: SUCCESS_MESSAGES.TEMPLATE.LIST,
+        data: {
+          data: templates.map((template) => this.toTemplateListItem(template)),
+          pagination: {
+            page,
+            limit,
+            total,
+            totalPages,
+          },
+        },
+      };
+    } catch (error) {
+      if (error instanceof BadRequestException) {
+        throw error;
+      }
+      throw new InternalServerErrorException(
+        `Failed to list templates: ${error instanceof Error ? error.message : String(error)}`,
+      );
+    }
+  }
+
+  /**
+   * Lists unique template categories.
+   */
+  async listTemplateCategories(): Promise<ServiceResponse<string[]>> {
+    try {
+      const categories = await this.listUniqueCategories();
+      return {
+        message: SUCCESS_MESSAGES.TEMPLATE.CATEGORIES,
+        data: categories,
+      };
+    } catch (error) {
+      if (error instanceof BadRequestException) {
+        throw error;
+      }
+      throw new InternalServerErrorException(
+        `Failed to list template categories: ${error instanceof Error ? error.message : String(error)}`,
+      );
+    }
+  }
+
+  /**
+   * Lists unique template categories.
+   */
   async listUniqueCategories(): Promise<string[]> {
     const templates = await this.listTemplates(["category"]);
     const categories = new Set<string>();
@@ -150,6 +263,9 @@ export class ServiceTemplateService {
     return Array.from(categories).sort((a, b) => a.localeCompare(b));
   }
 
+  /**
+   * Gets the template details for the public template.
+   */
   async getPublicTemplateDetails(
     slug: string,
   ): Promise<PublicTemplateDetailsDto> {
@@ -191,6 +307,9 @@ export class ServiceTemplateService {
     }
   }
 
+  /**
+   * Gets the template details.
+   */
   async getTemplateDetails(slug: string): Promise<TemplateDetailsDto> {
     try {
       const template = await this.getTemplateEntity(slug);

console-app/src/components/deployment-logs.css

@@ -686,6 +686,7 @@
 .deploy-logs-page .deploy-terminal-xterm-host .xterm-viewport {
   overflow-y: auto !important;
   width: 100% !important;
+  overscroll-behavior: contain;
 }
 
 .deploy-logs-page .deploy-terminal-loading {

console-app/src/components/deployment-logs.tsx

@@ -1,12 +1,6 @@
 import { BackLink } from "@/components/shared/back-link";
 import { ServiceBrandIcon } from "@/components/shared/service-brand-icon";
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { DeploymentTerminalViewer } from "@/components/deployment-terminal-viewer";
 import "@/components/shared/kubeara-terminal-shell.css";
 import {
@@ -168,12 +162,17 @@ export function DeploymentLogs({
   const [logView, setLogView] = useState<DeploymentLogView>("installation");
 
   const deploymentQuery = useDeploymentQuery(deploymentId);
-  const { logs, status, deploymentStatus, hasReceivedStatus, isSocketConnected } =
-    useDeploymentLogStream({
-      deploymentId,
-      serverId,
-      enabled: Boolean(serverId && deploymentId),
-    });
+  const {
+    logs,
+    status,
+    deploymentStatus,
+    hasReceivedStatus,
+    isSocketConnected,
+  } = useDeploymentLogStream({
+    deploymentId,
+    serverId,
+    enabled: Boolean(serverId && deploymentId),
+  });
 
   const liveDeploymentStatus =
     hasReceivedStatus && deploymentStatus
@@ -310,7 +309,11 @@ export function DeploymentLogs({
                       : null) ??
                     deploymentQuery.data?.statusMessage ??
                     resolvedStatus ??
-                    deploymentStateLabel(status, isStarting, liveDeploymentStatus)}
+                    deploymentStateLabel(
+                      status,
+                      isStarting,
+                      liveDeploymentStatus,
+                    )}
                 </dd>
               </div>
             </dl>
@@ -339,7 +342,10 @@ export function DeploymentLogs({
 
           <div className="server-terminal-window">
             {isStreaming && filteredLineCount === 0 && (
-              <div className="server-terminal-connecting-overlay" aria-live="polite">
+              <div
+                className="server-terminal-connecting-overlay"
+                aria-live="polite"
+              >
                 <span
                   className="server-terminal-connecting-spinner"
                   aria-hidden
@@ -399,7 +405,9 @@ function statusLabel(
   }
 }
 
-function formatDeploymentStatus(status: DeploymentStatus | null): string | null {
+function formatDeploymentStatus(
+  status: DeploymentStatus | null,
+): string | null {
   if (!status) return null;
   switch (status) {
     case "pending":

console-app/src/components/deployment-terminal-viewer.tsx

@@ -8,6 +8,7 @@ import {
 } from "@/components/shared/kubeara-terminal-theme";
 import { TerminalScrollDownButton } from "@/components/shared/terminal-scroll-down-button";
 import { useTerminalScrollDown } from "@/components/shared/use-terminal-scroll-down";
+import { useTerminalWheelTrap } from "@/components/shared/use-terminal-wheel-trap";
 import "@/components/shared/terminal-scroll-down-button.css";
 import type { DeploymentLogLine } from "@/features/deployments/types";
 import { formatDeploymentLogAnsi } from "@/features/deployments/utils/format-deployment-log-ansi";
@@ -28,6 +29,7 @@ export function DeploymentTerminalViewer({
   isLive = false,
 }: DeploymentTerminalViewerProps) {
   const hostRef = useRef<HTMLDivElement>(null);
+  const frameRef = useRef<HTMLDivElement>(null);
   const termRef = useRef<Terminal | null>(null);
   const fitRef = useRef<FitAddon | null>(null);
   const writtenCountRef = useRef(0);
@@ -146,6 +148,8 @@ export function DeploymentTerminalViewer({
   const { visible: showScrollDown, handleClick: handleScrollDown } =
     useTerminalScrollDown(hostRef, scrollToBottom);
 
+  useTerminalWheelTrap(frameRef);
+
   return (
     <div
       className={`server-terminal-log-viewer${isEmpty ? " is-empty" : ""}${isActive ? " is-active" : ""}`}
@@ -156,7 +160,7 @@ export function DeploymentTerminalViewer({
           <span>{emptyMessage}</span>
         </div>
       )}
-      <div className="terminal-viewer-frame">
+      <div ref={frameRef} className="terminal-viewer-frame">
         <div ref={hostRef} className="server-terminal-xterm-host" />
         <TerminalScrollDownButton
           visible={showScrollDown && !isEmpty}