paginate app operations and refine runtime settings layout

src/pages/applications/AppManagementPage.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, type MouseEvent } from 'react';
 import { Database, Pencil, Play, Plus, RotateCcw, Settings2, Square, Trash2 } from 'lucide-react';
 import { Badge, Button, Card, CardHeader } from '../../components/ui';
 import { useToast } from '../../components/toast';
@@ -53,6 +53,17 @@ function useMinimumLoading(loading: boolean, minimumMs = 500) {
   return visible;
 }
 
+function isPageAgentClick(event: MouseEvent<HTMLElement>) {
+  return !event.nativeEvent.isTrusted;
+}
+
+function blockPageAgentDestructiveClick(event: MouseEvent<HTMLElement>) {
+  if (!isPageAgentClick(event)) return false;
+  event.preventDefault();
+  event.stopPropagation();
+  return true;
+}
+
 function getTone(status: string) {
   if (['활성', '완료', '게시됨', '실행 중', '배포됨', 'ACTIVE', 'READY'].includes(status)) return 'green';
   if (['주의', '예약됨', '대기', '준비중', '카나리'].includes(status)) return 'amber';
@@ -304,6 +315,14 @@ export function AppManagementPage() {
   const [buildEnvVariables, setBuildEnvVariables] = useState<BuildEnvVariableForm[]>([emptyBuildEnvVariable()]);
   const [buildEnvStatus, setBuildEnvStatus] = useState<'idle' | 'loading' | 'saving' | 'error'>('idle');
   const [deletingApp, setDeletingApp] = useState<ApiApp | null>(null);
+  const [appDeleteStatus, setAppDeleteStatus] = useState<'idle' | 'deleting' | 'error'>('idle');
+  const [appDeleteOptions, setAppDeleteOptions] = useState({
+    unlinkSources: true,
+    deleteRuntimeSettings: true,
+    scaleDownWorkloads: true,
+    deleteKubernetesResources: false,
+    deletePersistentVolumes: false
+  });
   const [deletingComponent, setDeletingComponent] = useState<ApiAppComponent | null>(null);
   const [runtimeResources, setRuntimeResources] = useState<RuntimeResource[]>([]);
   const [workloadActionKey, setWorkloadActionKey] = useState('');
@@ -806,7 +825,15 @@ export function AppManagementPage() {
   const deleteApp = () => {
     if (!deletingApp) return;
 
-    apiFetch(`${apiBaseUrl}/apps/${deletingApp.id}`, { method: 'DELETE', headers: authHeaders() })
+    setAppDeleteStatus('deleting');
+    apiFetch(`${apiBaseUrl}/apps/${deletingApp.id}/decommission`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        ...authHeaders()
+      },
+      body: JSON.stringify(appDeleteOptions)
+    })
       .then((response) => {
         if (!response.ok) throw new Error('App delete failed');
         return response.json().catch(() => null);
@@ -815,6 +842,7 @@ export function AppManagementPage() {
       .then((apps) => {
         setApiApps(apps);
         setDeletingApp(null);
+        setAppDeleteStatus('idle');
         setSelectedAppId((current) => {
           if (current !== deletingApp.id) return current;
           const nextAppId = apps[0]?.id ?? '';
@@ -824,10 +852,19 @@ export function AppManagementPage() {
         toast({ type: 'success', title: '앱 삭제', message: '앱 그룹이 삭제되었습니다.' });
       })
       .catch(() => {
+        setAppDeleteStatus('error');
         toast({ type: 'error', title: '앱 삭제 실패', message: '참조 이력 또는 백엔드 API 상태를 확인하세요.' });
       });
   };
 
+  const updateAppDeleteOption = (key: keyof typeof appDeleteOptions, value: boolean) => {
+    setAppDeleteOptions((current) => ({
+      ...current,
+      [key]: value,
+      ...(key === 'deleteKubernetesResources' && !value ? { deletePersistentVolumes: false } : {})
+    }));
+  };
+
   return (
     <>
       <PageTitle
@@ -883,10 +920,19 @@ export function AppManagementPage() {
                             className="size-8 border-rose-500/50 px-0 text-rose-300 hover:border-rose-400 hover:bg-rose-500/10 hover:text-rose-200"
                             title="삭제"
                             aria-label="삭제"
-                            onClick={(event) => {
-                              event.stopPropagation();
-                              setDeletingApp(app);
-                            }}
+	                            onClick={(event) => {
+	                              if (blockPageAgentDestructiveClick(event)) return;
+	                              event.stopPropagation();
+	                              setAppDeleteStatus('idle');
+	                              setAppDeleteOptions({
+	                                unlinkSources: true,
+	                                deleteRuntimeSettings: true,
+	                                scaleDownWorkloads: true,
+	                                deleteKubernetesResources: false,
+	                                deletePersistentVolumes: false
+	                              });
+	                              setDeletingApp(app);
+	                            }}
                           >
                             <Trash2 className="size-4" />
                           </Button>
@@ -994,7 +1040,10 @@ export function AppManagementPage() {
                                   className="size-8 border-rose-500/50 px-0 text-rose-300 hover:border-rose-400 hover:bg-rose-500/10 hover:text-rose-200"
                                   title="삭제"
                                   aria-label="삭제"
-                                  onClick={() => setDeletingComponent(component)}
+	                                  onClick={(event) => {
+	                                    if (blockPageAgentDestructiveClick(event)) return;
+	                                    setDeletingComponent(component);
+	                                  }}
                                 >
                                   <Trash2 className="size-4" />
                                 </Button>
@@ -1084,7 +1133,10 @@ export function AppManagementPage() {
                                 title="삭제"
                                 aria-label={`${resource.name} 삭제`}
                                 disabled={pending}
-                                onClick={() => requestDeleteWorkload(resource)}
+	                                onClick={(event) => {
+	                                  if (blockPageAgentDestructiveClick(event)) return;
+	                                  requestDeleteWorkload(resource);
+	                                }}
                               >
                                 <Trash2 className="size-4" />
                               </Button>
@@ -1095,7 +1147,10 @@ export function AppManagementPage() {
                                   title={stopped ? '데이터 볼륨 삭제' : '중지 후 데이터 볼륨 삭제 가능'}
                                   aria-label={`${resource.name} 데이터 볼륨 삭제`}
                                   disabled={pending || !stopped}
-                                  onClick={() => requestDeleteVolume(resource)}
+	                                  onClick={(event) => {
+	                                    if (blockPageAgentDestructiveClick(event)) return;
+	                                    requestDeleteVolume(resource);
+	                                  }}
                                 >
                                   <Database className="size-4" />
                                 </Button>
@@ -1330,7 +1385,10 @@ export function AppManagementPage() {
                         variant="ghost"
                         className="size-9 justify-self-end px-0 text-rose-300"
                         disabled={componentPorts.length === 1}
-                        onClick={() => setComponentPorts((prev) => prev.filter((_, portIndex) => portIndex !== index))}
+	                        onClick={(event) => {
+	                          if (blockPageAgentDestructiveClick(event)) return;
+	                          setComponentPorts((prev) => prev.filter((_, portIndex) => portIndex !== index));
+	                        }}
                         title="포트 삭제"
                         aria-label="포트 삭제"
                       >
@@ -1472,7 +1530,10 @@ export function AppManagementPage() {
                         variant="ghost"
                         className="size-9 justify-self-end px-0 text-rose-300"
                         disabled={buildEnvVariables.length === 1}
-                        onClick={() => setBuildEnvVariables((prev) => prev.filter((_, itemIndex) => itemIndex !== index))}
+	                        onClick={(event) => {
+	                          if (blockPageAgentDestructiveClick(event)) return;
+	                          setBuildEnvVariables((prev) => prev.filter((_, itemIndex) => itemIndex !== index));
+	                        }}
                         title="환경변수 삭제"
                         aria-label="환경변수 삭제"
                       >
@@ -1514,7 +1575,15 @@ export function AppManagementPage() {
             </div>
             <div className="flex justify-end gap-2 border-t border-border px-5 py-3">
               <Button variant="ghost" onClick={() => setDeletingComponent(null)}>취소</Button>
-              <Button variant="secondary" onClick={deleteComponent}>삭제</Button>
+              <Button
+                variant="secondary"
+                onClick={(event) => {
+                  if (blockPageAgentDestructiveClick(event)) return;
+                  deleteComponent();
+                }}
+              >
+                삭제
+              </Button>
             </div>
           </div>
         </div>
@@ -1522,27 +1591,59 @@ export function AppManagementPage() {
 
       {deletingApp ? (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/55 px-4 backdrop-blur-[2px]">
-          <div className="w-full max-w-md rounded-lg border border-border bg-card shadow-xl">
+          <div className="w-full max-w-xl rounded-lg border border-border bg-card shadow-xl">
             <div className="flex items-center gap-2 border-b border-border px-5 py-3">
               <Trash2 className="size-4 text-rose-300" />
-              <h2 className="text-sm font-semibold">앱 삭제</h2>
+              <h2 className="text-sm font-semibold">앱 폐기</h2>
             </div>
             <div className="space-y-4 px-5 py-6 text-sm">
               <p className="text-muted-foreground">
-                <span className="font-semibold text-foreground">{deletingApp.name}</span> 앱 그룹을 삭제합니다.
+                <span className="font-semibold text-foreground">{deletingApp.name}</span> 앱을 목록에서 삭제하고 선택한 운영 리소스를 정리합니다.
               </p>
-              <div className="rounded-md border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-xs leading-5 text-amber-200">
-                앱 관리 데이터만 삭제합니다. 네임스페이스, 워크로드, 볼륨은 자동 삭제하지 않습니다.
+              <div className="space-y-2 rounded-md border border-border bg-muted/20 p-3">
+                {[
+                  ['unlinkSources', '저장소 연결 정보 삭제'],
+                  ['deleteRuntimeSettings', '실행 설정 삭제'],
+                  ['scaleDownWorkloads', 'Kubernetes 워크로드 중지'],
+                  ['deleteKubernetesResources', 'Kubernetes 리소스 삭제'],
+                  ['deletePersistentVolumes', 'PVC/데이터 볼륨 삭제']
+                ].map(([key, label]) => {
+                  const optionKey = key as keyof typeof appDeleteOptions;
+                  const disabled = optionKey === 'deletePersistentVolumes' && !appDeleteOptions.deleteKubernetesResources;
+
+                  return (
+                    <label key={key} className={cn('flex items-center gap-2 text-sm', disabled && 'opacity-50')}>
+                      <input
+                        type="checkbox"
+                        checked={appDeleteOptions[optionKey]}
+                        disabled={disabled}
+                        onChange={(event) => updateAppDeleteOption(optionKey, event.target.checked)}
+                        className="size-4 accent-primary"
+                      />
+                      {label}
+                    </label>
+                  );
+                })}
               </div>
+              <div className="rounded-md border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-xs leading-5 text-amber-200">
+                PVC/데이터 볼륨 삭제는 되돌릴 수 없습니다. DB 데이터 백업을 확인한 경우에만 선택하세요.
+              </div>
+              {appDeleteStatus === 'error' ? (
+                <p className="text-xs text-rose-300">앱 폐기에 실패했습니다. 백엔드 로그와 Kubernetes 권한을 확인하세요.</p>
+              ) : null}
             </div>
             <div className="flex justify-end gap-2 border-t border-border px-5 py-3">
-              <Button variant="ghost" onClick={() => setDeletingApp(null)}>취소</Button>
+              <Button variant="ghost" onClick={() => setDeletingApp(null)} disabled={appDeleteStatus === 'deleting'}>취소</Button>
               <Button
                 variant="outline"
                 className="border-rose-500/50 text-rose-300 hover:border-rose-400 hover:bg-rose-500/10 hover:text-rose-200"
-                onClick={deleteApp}
+                onClick={(event) => {
+                  if (blockPageAgentDestructiveClick(event)) return;
+                  deleteApp();
+                }}
+                disabled={appDeleteStatus === 'deleting'}
               >
-                삭제
+                {appDeleteStatus === 'deleting' ? '폐기 중' : '폐기'}
               </Button>
             </div>
           </div>
@@ -1598,7 +1699,10 @@ export function AppManagementPage() {
                 variant="outline"
                 className="border-rose-500/50 text-rose-300 hover:border-rose-400 hover:bg-rose-500/10 hover:text-rose-200"
                 disabled={workloadActionKey === `delete-${deletingWorkload.kind}-${deletingWorkload.name}`}
-                onClick={confirmDeleteWorkload}
+                onClick={(event) => {
+                  if (blockPageAgentDestructiveClick(event)) return;
+                  confirmDeleteWorkload();
+                }}
               >
                 삭제
               </Button>
@@ -1713,7 +1817,10 @@ export function AppManagementPage() {
                 variant="outline"
                 className="border-rose-500/50 text-rose-300 hover:border-rose-400 hover:bg-rose-500/10 hover:text-rose-200"
                 disabled={!canDeleteVolume}
-                onClick={confirmDeleteVolume}
+	                onClick={(event) => {
+	                  if (blockPageAgentDestructiveClick(event)) return;
+	                  confirmDeleteVolume();
+	                }}
               >
                 {volumeDeleteStatus === 'deleting' ? '삭제 중' : '삭제'}
               </Button>

src/pages/applications/BuildManagementPage.tsx

@@ -1,12 +1,19 @@
-import { useEffect, useMemo, useState } from 'react';
-import { ChevronLeft, ChevronRight, MoreHorizontal, Play, RotateCcw, Search, Square, Trash2 } from 'lucide-react';
+import { useEffect, useMemo, useState, type MouseEvent } from 'react';
+import { ChevronLeft, ChevronRight, MoreHorizontal, Play, RotateCcw, Square, Trash2 } from 'lucide-react';
 import { Button, Card, CardHeader, Modal } from '../../components/ui';
 import { useToast } from '../../components/toast';
 import { PageTitle } from '../../layout/AppLayout';
 import type { BuildJob, SourceComponent } from '../../types/application';
 import { LoadingModal, useMinimumLoading } from '../operations/operation-utils';
 import { AppSelector, StatusBadge, formatDate, isBuildDone, useApps } from './ApplicationControls';
-import { cancelBuildJob, createBuildJob, deleteBuildJob, listBuildJobs, listSources } from './application-api';
+import { cancelBuildJob, createBuildJob, deleteBuildJob, listBuildJobsPage, listSources } from './application-api';
+
+function blockPageAgentDestructiveClick(event: MouseEvent<HTMLElement>) {
+  if (event.nativeEvent.isTrusted) return false;
+  event.preventDefault();
+  event.stopPropagation();
+  return true;
+}
 
 function buildTargetForType(type?: string | null) {
   return {
@@ -61,6 +68,20 @@ function jobTime(job: BuildJob) {
 }
 
 const buildJobPageSize = 3;
+type BuildRange = 'week' | 'month' | 'all';
+
+const buildRangeLabels: Record<BuildRange, string> = {
+  week: '일주일',
+  month: '한달',
+  all: '전체'
+};
+
+function buildRangeSince(range: BuildRange) {
+  if (range === 'all') return undefined;
+  const date = new Date();
+  date.setDate(date.getDate() - (range === 'week' ? 7 : 30));
+  return date.toISOString();
+}
 
 export function BuildManagementPage() {
   const { apps, selectedApp, selectedAppId, selectApp, loading: appsLoading } = useApps();
@@ -72,9 +93,9 @@ export function BuildManagementPage() {
   const [commitSha, setCommitSha] = useState('');
   const [selectedJob, setSelectedJob] = useState<BuildJob | null>(null);
   const [loading, setLoading] = useState(false);
-  const [search, setSearch] = useState('');
-  const [statusFilter, setStatusFilter] = useState('');
   const [page, setPage] = useState(1);
+  const [range, setRange] = useState<BuildRange>('week');
+  const [totalJobs, setTotalJobs] = useState(0);
   const loadingVisible = useMinimumLoading(appsLoading || loading);
 
   const componentOptions = useMemo(
@@ -88,13 +109,36 @@ export function BuildManagementPage() {
   const selectedTarget = selectedComponent?.buildTarget || buildTargetForType(selectedComponent?.type);
   const predicted = predictedArtifact(selectedComponent, branch, commitSha);
   const hasActiveJob = jobs.some((job) => job.status === 'PENDING' || job.status === 'RUNNING');
+  const totalPages = Math.max(1, Math.ceil(totalJobs / buildJobPageSize));
+  const currentPage = page;
+  const pagedJobs = jobs;
+
+  const loadJobs = async (nextPage = page, nextRange = range, appKey = selectedApp?.key) => {
+    const result = await listBuildJobsPage({
+      appKey,
+      page: nextPage,
+      limit: buildJobPageSize,
+      since: buildRangeSince(nextRange)
+    });
+    setJobs(result.jobs);
+    setTotalJobs(result.total);
+  };
 
   const refresh = async () => {
     setLoading(true);
     try {
-      const [nextSources, nextJobs] = await Promise.all([listSources(), listBuildJobs(selectedApp?.key)]);
+      const [nextSources, nextJobs] = await Promise.all([
+        listSources(),
+        listBuildJobsPage({
+          appKey: selectedApp?.key,
+          page,
+          limit: buildJobPageSize,
+          since: buildRangeSince(range)
+        })
+      ]);
       setSources(nextSources);
-      setJobs(nextJobs);
+      setJobs(nextJobs.jobs);
+      setTotalJobs(nextJobs.total);
       const filteredSources = (selectedAppId ? nextSources.filter((source) => source.appId === selectedAppId) : nextSources)
         .filter((source) => (source.imageSource ?? 'SOURCE') === 'SOURCE');
       setSelectedComponentId((prev) => {
@@ -110,19 +154,27 @@ export function BuildManagementPage() {
 
   useEffect(() => {
     void refresh();
-  }, [selectedAppId, selectedApp?.key]);
+  }, [selectedAppId, selectedApp?.key, page, range]);
 
   useEffect(() => {
     if (!hasActiveJob) return;
     const timer = window.setInterval(() => {
-      listBuildJobs(selectedApp?.key)
-        .then((nextJobs) => setJobs(nextJobs))
+      listBuildJobsPage({
+        appKey: selectedApp?.key,
+        page,
+        limit: buildJobPageSize,
+        since: buildRangeSince(range)
+      })
+        .then((nextJobs) => {
+          setJobs(nextJobs.jobs);
+          setTotalJobs(nextJobs.total);
+        })
         .catch((error: Error) => {
           toast({ type: 'error', message: `빌드 작업 갱신 실패: ${error.message}` });
         });
     }, 2000);
     return () => window.clearInterval(timer);
-  }, [hasActiveJob, selectedApp?.key, toast]);
+  }, [hasActiveJob, selectedApp?.key, toast, page, range]);
 
   useEffect(() => {
     if (!selectedJob) return;
@@ -140,26 +192,9 @@ export function BuildManagementPage() {
     }
   }, [componentOptions, selectedComponentId]);
 
-  const filteredJobs = useMemo(() => {
-    const normalizedSearch = search.trim().toLowerCase();
-    return jobs
-      .filter((job) => {
-        const text = `${job.component.app.name} ${job.component.name} ${job.component.repository ?? ''} ${job.branch} ${job.commitSha ?? ''} ${resultArtifact(job)} ${job.status}`.toLowerCase();
-        const matchesSearch = normalizedSearch ? text.includes(normalizedSearch) : true;
-        const matchesStatus = statusFilter ? job.status === statusFilter : true;
-        return matchesSearch && matchesStatus;
-      })
-      .sort((a, b) => jobTime(b) - jobTime(a));
-  }, [jobs, search, statusFilter]);
-
-  const totalPages = Math.max(1, Math.ceil(filteredJobs.length / buildJobPageSize));
-  const currentPage = Math.min(page, totalPages);
-  const pageStart = (currentPage - 1) * buildJobPageSize;
-  const pagedJobs = filteredJobs.slice(pageStart, pageStart + buildJobPageSize);
-
   useEffect(() => {
     setPage(1);
-  }, [search, statusFilter, selectedAppId]);
+  }, [selectedAppId, range]);
 
   const startBuild = async () => {
     if (!selectedComponent) return;
@@ -274,32 +309,26 @@ export function BuildManagementPage() {
       </Card>
 
       <Card className="min-w-0 overflow-hidden">
-        <div className="flex flex-col gap-3 border-b border-border px-5 py-4 lg:flex-row lg:items-center lg:justify-between">
-          <h2 className="text-sm font-semibold text-foreground">빌드 작업 목록</h2>
-          <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
-            <div className="relative w-full sm:w-80">
-              <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
-              <input
-                className="h-9 w-full rounded-md border border-input bg-background pl-9 pr-3 text-sm outline-none placeholder:text-muted-foreground focus:ring-2 focus:ring-ring"
-                placeholder="앱, 구성요소, 저장소 검색"
-                value={search}
-                onChange={(event) => setSearch(event.target.value)}
-              />
-            </div>
-            <select
-              className="h-9 rounded-md border border-input bg-background px-3 text-sm font-medium text-foreground outline-none focus:ring-2 focus:ring-ring"
-              value={statusFilter}
-              onChange={(event) => setStatusFilter(event.target.value)}
-            >
-              <option value="">전체 상태</option>
-              {[...new Set(jobs.map((job) => job.status))].map((status) => (
-                <option key={status} value={status}>{statusLabel(status)}</option>
+        <CardHeader
+          title="빌드 작업 목록"
+          description="선택한 기간의 빌드 작업을 최신순으로 표시합니다."
+          action={
+            <div className="flex items-center gap-2">
+              {(Object.keys(buildRangeLabels) as BuildRange[]).map((item) => (
+                <Button
+                  key={item}
+                  variant={range === item ? 'default' : 'outline'}
+                  className="h-8 px-3 text-[13px]"
+                  onClick={() => setRange(item)}
+                >
+                  {buildRangeLabels[item]}
+                </Button>
               ))}
-            </select>
-          </div>
-        </div>
-        <div className="space-y-3 p-4">
-          {!loading && filteredJobs.length === 0 ? (
+            </div>
+          }
+        />
+        <div className="min-h-[410px] space-y-3 p-4">
+          {!loading && jobs.length === 0 ? (
             <div className="flex min-h-44 items-center justify-center text-center text-sm text-muted-foreground">
               빌드 작업이 없습니다.
             </div>
@@ -309,7 +338,7 @@ export function BuildManagementPage() {
               <div className="flex items-start justify-between gap-4">
                 <div className="min-w-0">
                   <div className="flex flex-wrap items-center gap-2">
-                    <span className="text-xs font-medium text-muted-foreground">No. {filteredJobs.length - pageStart - index}</span>
+                    <span className="text-xs font-medium text-muted-foreground">No. {totalJobs - ((currentPage - 1) * buildJobPageSize + index)}</span>
                     <StatusBadge status={statusLabel(job.status)} />
                     <span className="font-medium">{job.component.app.name}</span>
                     <span className="text-muted-foreground">/</span>
@@ -336,7 +365,16 @@ export function BuildManagementPage() {
                     </Button>
                   )}
                   {isBuildDone(job.status) ? (
-                    <Button variant="outline" className="size-8 px-0" title="삭제" aria-label="삭제" onClick={() => removeJob(job.id)}>
+                    <Button
+                      variant="outline"
+                      className="size-8 px-0"
+                      title="삭제"
+                      aria-label="삭제"
+                      onClick={(event) => {
+                        if (blockPageAgentDestructiveClick(event)) return;
+                        removeJob(job.id);
+                      }}
+                    >
                       <Trash2 className="size-4" />
                     </Button>
                   ) : null}
@@ -361,7 +399,7 @@ export function BuildManagementPage() {
         </div>
         <div className="flex items-center justify-between gap-4 border-t border-border px-5 py-3 text-sm">
           <span className="text-xs text-muted-foreground">
-            {loading ? '불러오는 중' : `총 ${filteredJobs.length}건 · ${currentPage} / ${totalPages}`}
+            {loading ? '불러오는 중' : `총 ${totalJobs}건 · ${currentPage} / ${totalPages}`}
           </span>
           <div className="flex gap-2">
             <Button

src/pages/applications/DeploymentManagementPage.tsx

@@ -6,7 +6,7 @@ import { PageTitle } from '../../layout/AppLayout';
 import type { AppRelease, DeploymentJob } from '../../types/application';
 import { LoadingModal, useMinimumLoading } from '../operations/operation-utils';
 import { AppSelector, formatDate, useApps } from './ApplicationControls';
-import { createDeployment, listDeployments, listReleases } from './application-api';
+import { createDeployment, listDeploymentsPage, listReleases } from './application-api';
 
 function statusLabel(status: string) {
   return {
@@ -53,11 +53,25 @@ function deploymentTime(deployment: DeploymentJob) {
   return Number.isNaN(value) ? 0 : value;
 }
 
-const deploymentPageSize = 5;
+const deploymentPageSize = 3;
+type DeploymentRange = 'week' | 'month' | 'all';
+
+const deploymentRangeLabels: Record<DeploymentRange, string> = {
+  week: '일주일',
+  month: '한달',
+  all: '전체'
+};
+
+function deploymentRangeSince(range: DeploymentRange) {
+  if (range === 'all') return undefined;
+  const date = new Date();
+  date.setDate(date.getDate() - (range === 'week' ? 7 : 30));
+  return date.toISOString();
+}
 
 export function DeploymentManagementPage() {
   const { toast } = useToast();
-  const { apps, selectedAppId, loading: appsLoading, selectApp } = useApps();
+  const { apps, selectedApp, selectedAppId, loading: appsLoading, selectApp } = useApps();
   const [deployments, setDeployments] = useState<DeploymentJob[]>([]);
   const [releases, setReleases] = useState<AppRelease[]>([]);
   const [releaseId, setReleaseId] = useState('');
@@ -67,6 +81,9 @@ export function DeploymentManagementPage() {
   const [selectedDeployment, setSelectedDeployment] = useState<DeploymentJob | null>(null);
   const [loading, setLoading] = useState(true);
   const [page, setPage] = useState(1);
+  const [range, setRange] = useState<DeploymentRange>('week');
+  const [totalDeployments, setTotalDeployments] = useState(0);
+  const [deployedReleaseIdValues, setDeployedReleaseIdValues] = useState<string[]>([]);
   const loadingVisible = useMinimumLoading(loading);
 
   const selectedRelease = releases.find((release) => release.id === releaseId);
@@ -75,32 +92,37 @@ export function DeploymentManagementPage() {
     [releases, selectedAppId]
   );
   const deployedReleaseIds = useMemo(
-    () => new Set(deployments
-      .filter((deployment) => deployment.status === 'SUCCEEDED' && deployment.releaseId)
-      .map((deployment) => deployment.releaseId!)),
-    [deployments]
+    () => new Set(deployedReleaseIdValues),
+    [deployedReleaseIdValues]
   );
   const deployableReleases = useMemo(
     () => filteredReleases.filter((release) => !deployedReleaseIds.has(release.id)),
     [filteredReleases, deployedReleaseIds]
   );
   const filteredDeployments = useMemo(
-    () => deployments
-      .filter((deployment) => !selectedAppId || deployment.appId === selectedAppId)
-      .sort((a, b) => deploymentTime(b) - deploymentTime(a)),
-    [deployments, selectedAppId]
+    () => deployments,
+    [deployments]
   );
-  const totalPages = Math.max(1, Math.ceil(filteredDeployments.length / deploymentPageSize));
-  const currentPage = Math.min(page, totalPages);
-  const pageStart = (currentPage - 1) * deploymentPageSize;
-  const pagedDeployments = filteredDeployments.slice(pageStart, pageStart + deploymentPageSize);
+  const totalPages = Math.max(1, Math.ceil(totalDeployments / deploymentPageSize));
+  const currentPage = page;
+  const pagedDeployments = filteredDeployments;
 
   const refresh = async () => {
     setLoading(true);
     try {
-      const [nextDeployments, nextReleases] = await Promise.all([listDeployments(), listReleases()]);
+      const [nextDeployments, nextReleases] = await Promise.all([
+        listDeploymentsPage({
+          appKey: selectedApp?.key,
+          page,
+          limit: deploymentPageSize,
+          since: deploymentRangeSince(range)
+        }),
+        listReleases(selectedApp?.key)
+      ]);
       const deployableReleases = nextReleases.filter((release) => release.status === 'SUCCEEDED');
-      setDeployments(nextDeployments);
+      setDeployments(nextDeployments.deployments);
+      setTotalDeployments(nextDeployments.total);
+      setDeployedReleaseIdValues(nextDeployments.deployedReleaseIds ?? []);
       setReleases(deployableReleases);
     } finally {
       setLoading(false);
@@ -109,11 +131,11 @@ export function DeploymentManagementPage() {
 
   useEffect(() => {
     void refresh();
-  }, []);
+  }, [selectedApp?.key, selectedAppId, page, range]);
 
   useEffect(() => {
     setPage(1);
-  }, [selectedAppId]);
+  }, [selectedAppId, range]);
 
   useEffect(() => {
     if (selectedRelease?.app?.namespace) setNamespace((prev) => prev || selectedRelease.app.namespace || '');
@@ -166,9 +188,26 @@ export function DeploymentManagementPage() {
 
       <div className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_320px]">
         <Card className="min-w-0 overflow-hidden">
-          <CardHeader title="배포 작업" description="릴리즈별 배포 실행 결과와 rollout 로그를 확인합니다." />
+          <CardHeader
+            title="배포 작업"
+            description="선택한 기간의 배포 실행 결과와 rollout 로그를 최신순으로 표시합니다."
+            action={
+              <div className="flex items-center gap-2">
+                {(Object.keys(deploymentRangeLabels) as DeploymentRange[]).map((item) => (
+                  <Button
+                    key={item}
+                    variant={range === item ? 'default' : 'outline'}
+                    className="h-8 px-3 text-[13px]"
+                    onClick={() => setRange(item)}
+                  >
+                    {deploymentRangeLabels[item]}
+                  </Button>
+                ))}
+              </div>
+            }
+          />
           <div className="space-y-3 p-4">
-            {filteredDeployments.length === 0 ? (
+            {!loading && filteredDeployments.length === 0 ? (
               <div className="flex min-h-44 items-center justify-center text-center text-sm text-muted-foreground">
                 배포 작업이 없습니다.
               </div>
@@ -180,7 +219,7 @@ export function DeploymentManagementPage() {
                   <div className="flex items-start justify-between gap-4">
                     <div className="min-w-0">
                       <div className="flex flex-wrap items-center gap-2">
-                        <span className="text-xs font-medium text-muted-foreground">No. {filteredDeployments.length - pageStart - index}</span>
+                        <span className="text-xs font-medium text-muted-foreground">No. {totalDeployments - ((currentPage - 1) * deploymentPageSize + index)}</span>
                         <Badge tone={statusTone(deployment.status)}>{statusLabel(deployment.status)}</Badge>
                         <span className="text-base font-medium">{deployment.app.name}</span>
                         <span className="text-base font-medium">{deployment.release?.version || '-'}</span>
@@ -220,7 +259,7 @@ export function DeploymentManagementPage() {
           </div>
           <div className="flex items-center justify-between gap-4 border-t border-border px-5 py-3 text-sm">
             <span className="text-xs text-muted-foreground">
-              {loading ? '불러오는 중' : `총 ${filteredDeployments.length}건 · ${currentPage} / ${totalPages}`}
+              {loading ? '불러오는 중' : `총 ${totalDeployments}건 · ${currentPage} / ${totalPages}`}
             </span>
             <div className="flex gap-2">
               <Button

src/pages/applications/MigrationManagementPage.tsx

@@ -1,12 +1,12 @@
 import { useEffect, useMemo, useState } from 'react';
 import { ChevronLeft, ChevronRight, MoreHorizontal, Play } from 'lucide-react';
-import { Button, Card, Modal } from '../../components/ui';
+import { Button, Card, CardHeader, Modal } from '../../components/ui';
 import { useToast } from '../../components/toast';
 import { PageTitle } from '../../layout/AppLayout';
 import type { AppRelease, RuntimeControlJob } from '../../types/application';
 import { LoadingModal, useMinimumLoading } from '../operations/operation-utils';
 import { StatusBadge, formatDate, useApps } from './ApplicationControls';
-import { createMigration, listMigrations, listReleases } from './application-api';
+import { createMigration, listMigrationsPage, listReleases } from './application-api';
 
 type ImageTags = {
   images?: Record<string, string>;
@@ -33,15 +33,6 @@ function requestText(job: RuntimeControlJob, key: string, fallback = '-') {
   return typeof value === 'string' && value.trim() ? value : fallback;
 }
 
-function jobNumber(index: number, total: number) {
-  return total - index;
-}
-
-function migrationTime(job: RuntimeControlJob) {
-  const value = new Date(job.createdAt || job.startedAt || job.finishedAt || 0).getTime();
-  return Number.isNaN(value) ? 0 : value;
-}
-
 function sanitizeK8sName(value: string) {
   return value
     .trim()
@@ -54,7 +45,21 @@ function uniqueValues(values: string[]) {
   return [...new Set(values.filter(Boolean))];
 }
 
-const migrationPageSize = 5;
+const migrationPageSize = 3;
+type MigrationRange = 'week' | 'month' | 'all';
+
+const migrationRangeLabels: Record<MigrationRange, string> = {
+  week: '일주일',
+  month: '한달',
+  all: '전체'
+};
+
+function migrationRangeSince(range: MigrationRange) {
+  if (range === 'all') return undefined;
+  const date = new Date();
+  date.setDate(date.getDate() - (range === 'week' ? 7 : 30));
+  return date.toISOString();
+}
 
 export function MigrationManagementPage() {
   const { apps, selectedApp, selectedAppId, selectApp, loading: appsLoading } = useApps();
@@ -71,6 +76,8 @@ export function MigrationManagementPage() {
   const [confirmOpen, setConfirmOpen] = useState(false);
   const [loading, setLoading] = useState(false);
   const [page, setPage] = useState(1);
+  const [range, setRange] = useState<MigrationRange>('week');
+  const [totalJobs, setTotalJobs] = useState(0);
   const loadingVisible = useMinimumLoading(appsLoading || loading);
 
   const selectedRelease = releases.find((release) => release.id === releaseId);
@@ -89,18 +96,25 @@ export function MigrationManagementPage() {
     [envSecretName, images, selectedApp?.key]
   );
   const selectedImage = selectedImageTag(selectedRelease, imageComponentName);
-  const sortedJobs = [...jobs].sort((a, b) => migrationTime(b) - migrationTime(a));
-  const totalPages = Math.max(1, Math.ceil(sortedJobs.length / migrationPageSize));
-  const currentPage = Math.min(page, totalPages);
-  const pageStart = (currentPage - 1) * migrationPageSize;
-  const pagedJobs = sortedJobs.slice(pageStart, pageStart + migrationPageSize);
+  const totalPages = Math.max(1, Math.ceil(totalJobs / migrationPageSize));
+  const currentPage = page;
+  const pagedJobs = jobs;
 
   const refresh = async () => {
     setLoading(true);
     try {
-      const [nextJobs, nextReleases] = await Promise.all([listMigrations(), listReleases(selectedApp?.key)]);
+      const [nextJobs, nextReleases] = await Promise.all([
+        listMigrationsPage({
+          appId: selectedAppId,
+          page,
+          limit: migrationPageSize,
+          since: migrationRangeSince(range)
+        }),
+        listReleases(selectedApp?.key)
+      ]);
       const succeededReleases = nextReleases.filter((release) => release.status === 'SUCCEEDED');
-      setJobs(nextJobs);
+      setJobs(nextJobs.jobs);
+      setTotalJobs(nextJobs.total);
       setReleases(succeededReleases);
       setReleaseId((prev) => (succeededReleases.some((release) => release.id === prev) ? prev : succeededReleases[0]?.id || ''));
       setNamespace((prev) => prev || selectedApp?.namespace || '');
@@ -115,7 +129,7 @@ export function MigrationManagementPage() {
 
   useEffect(() => {
     void refresh();
-  }, [selectedApp?.key, selectedApp?.namespace]);
+  }, [selectedApp?.key, selectedApp?.namespace, selectedAppId, page, range]);
 
   useEffect(() => {
     const nextImages = imageEntries(selectedRelease?.imageTags);
@@ -133,6 +147,10 @@ export function MigrationManagementPage() {
     setPage(1);
   }, [selectedAppId]);
 
+  useEffect(() => {
+    setPage(1);
+  }, [range]);
+
   const runMigration = async () => {
     try {
       setConfirmOpen(false);
@@ -246,15 +264,27 @@ export function MigrationManagementPage() {
       </Card>
 
       <Card className="min-w-0 overflow-hidden">
-        <div className="border-b border-border px-5 py-4">
-          <div className="min-w-0">
-            <h2 className="text-sm font-semibold text-foreground">마이그레이션 작업</h2>
-            <p className="mt-1 text-xs leading-5 text-muted-foreground">마이그레이션 실행 이력과 로그입니다.</p>
-          </div>
-        </div>
+        <CardHeader
+          title="마이그레이션 작업"
+          description="선택한 기간의 마이그레이션 실행 이력과 로그를 최신순으로 표시합니다."
+          action={
+            <div className="flex items-center gap-2">
+              {(Object.keys(migrationRangeLabels) as MigrationRange[]).map((item) => (
+                <Button
+                  key={item}
+                  variant={range === item ? 'default' : 'outline'}
+                  className="h-8 px-3 text-[13px]"
+                  onClick={() => setRange(item)}
+                >
+                  {migrationRangeLabels[item]}
+                </Button>
+              ))}
+            </div>
+          }
+        />
 
-        <div className="space-y-3 p-5">
-          {jobs.length === 0 ? (
+        <div className="min-h-[410px] space-y-3 p-5">
+          {!loading && jobs.length === 0 ? (
             <div className="flex min-h-44 items-center justify-center text-center text-sm text-muted-foreground">
               등록된 마이그레이션 작업이 없습니다.
             </div>
@@ -268,7 +298,7 @@ export function MigrationManagementPage() {
                 <div className="flex items-start justify-between gap-4">
                   <div className="min-w-0 flex-1">
                     <div className="flex flex-wrap items-center gap-2">
-                      <span className="text-xs font-medium text-muted-foreground">No. {jobNumber(pageStart + index, sortedJobs.length)}</span>
+                      <span className="text-xs font-medium text-muted-foreground">No. {totalJobs - ((currentPage - 1) * migrationPageSize + index)}</span>
                       <StatusBadge status={job.status} />
                       <span className="truncate text-base font-medium text-foreground">
                         {selectedApp?.name ?? '앱'} {job.name}
@@ -295,7 +325,7 @@ export function MigrationManagementPage() {
         </div>
         <div className="flex items-center justify-between gap-4 border-t border-border px-5 py-3 text-sm">
           <span className="text-xs text-muted-foreground">
-            {loading ? '불러오는 중' : `총 ${sortedJobs.length}건 · ${currentPage} / ${totalPages}`}
+            {loading ? '불러오는 중' : `총 ${totalJobs}건 · ${currentPage} / ${totalPages}`}
           </span>
           <div className="flex gap-2">
             <Button

src/pages/applications/ReleaseManagementPage.tsx

@@ -6,7 +6,7 @@ import { PageTitle } from '../../layout/AppLayout';
 import type { AppRelease, BuildJob } from '../../types/application';
 import { LoadingModal, useMinimumLoading } from '../operations/operation-utils';
 import { AppSelector, formatDate, useApps } from './ApplicationControls';
-import { createRelease, listBuildJobs, listReleases } from './application-api';
+import { createRelease, listBuildJobsPage, listReleasesPage } from './application-api';
 
 function statusLabel(status: string) {
   return {
@@ -140,7 +140,21 @@ function releaseTime(release: AppRelease) {
   return Number.isNaN(value) ? 0 : value;
 }
 
-const releasePageSize = 5;
+const releasePageSize = 3;
+type ReleaseRange = 'week' | 'month' | 'all';
+
+const releaseRangeLabels: Record<ReleaseRange, string> = {
+  week: '일주일',
+  month: '한달',
+  all: '전체'
+};
+
+function releaseRangeSince(range: ReleaseRange) {
+  if (range === 'all') return undefined;
+  const date = new Date();
+  date.setDate(date.getDate() - (range === 'week' ? 7 : 30));
+  return date.toISOString();
+}
 
 export function ReleaseManagementPage() {
   const { toast } = useToast();
@@ -153,9 +167,13 @@ export function ReleaseManagementPage() {
   const [openLogReleaseId, setOpenLogReleaseId] = useState('');
   const [loading, setLoading] = useState(true);
   const [page, setPage] = useState(1);
+  const [range, setRange] = useState<ReleaseRange>('week');
+  const [totalReleases, setTotalReleases] = useState(0);
+  const [usedBuildIdValues, setUsedBuildIdValues] = useState<string[]>([]);
+  const [usedReleaseValueValues, setUsedReleaseValueValues] = useState<string[]>([]);
   const loadingVisible = useMinimumLoading(loading);
-  const usedValues = useMemo(() => usedReleaseValues(releases), [releases]);
-  const usedBuildIds = useMemo(() => usedReleaseBuildIds(releases), [releases]);
+  const usedValues = useMemo(() => new Set(usedReleaseValueValues), [usedReleaseValueValues]);
+  const usedBuildIds = useMemo(() => new Set(usedBuildIdValues), [usedBuildIdValues]);
   const candidateBuilds = useMemo(
     () => builds.filter((build) => {
       const value = buildValue(build);
@@ -168,12 +186,7 @@ export function ReleaseManagementPage() {
     () => groupCandidateBuilds(candidateBuilds).filter((group) => !selectedAppId || group.appId === selectedAppId),
     [candidateBuilds, selectedAppId]
   );
-  const filteredReleases = useMemo(
-    () => releases
-      .filter((release) => !selectedAppId || release.appId === selectedAppId)
-      .sort((a, b) => releaseTime(b) - releaseTime(a)),
-    [releases, selectedAppId]
-  );
+  const filteredReleases = releases;
   const modalBuilds = useMemo(
     () => candidateBuilds
       .filter((build) => !selectedAppId || build.component.app.id === selectedAppId)
@@ -184,10 +197,26 @@ export function ReleaseManagementPage() {
   const refresh = async () => {
     setLoading(true);
     try {
-      const [nextReleases, nextBuilds] = await Promise.all([listReleases(), listBuildJobs()]);
-      const succeededBuilds = nextBuilds.filter((job) => job.status === 'SUCCEEDED');
-      setReleases(nextReleases);
-      setBuilds(succeededBuilds);
+      const [nextReleases, nextBuilds] = await Promise.all([
+        listReleasesPage({
+          appKey: apps.find((app) => app.id === selectedAppId)?.key,
+          page,
+          limit: releasePageSize,
+          since: releaseRangeSince(range)
+        }),
+        listBuildJobsPage({
+          appKey: apps.find((app) => app.id === selectedAppId)?.key,
+          page: 1,
+          limit: 100,
+          since: releaseRangeSince(range),
+          status: 'SUCCEEDED'
+        })
+      ]);
+      setReleases(nextReleases.releases);
+      setTotalReleases(nextReleases.total);
+      setUsedBuildIdValues(nextReleases.usedBuildIds ?? []);
+      setUsedReleaseValueValues(nextReleases.usedValues ?? []);
+      setBuilds(nextBuilds.jobs);
     } finally {
       setLoading(false);
     }
@@ -195,16 +224,15 @@ export function ReleaseManagementPage() {
 
   useEffect(() => {
     void refresh();
-  }, []);
+  }, [selectedAppId, page, range, apps]);
 
   useEffect(() => {
     setPage(1);
-  }, [selectedAppId]);
+  }, [selectedAppId, range]);
 
-  const totalPages = Math.max(1, Math.ceil(filteredReleases.length / releasePageSize));
-  const currentPage = Math.min(page, totalPages);
-  const pageStart = (currentPage - 1) * releasePageSize;
-  const pagedReleases = filteredReleases.slice(pageStart, pageStart + releasePageSize);
+  const totalPages = Math.max(1, Math.ceil(totalReleases / releasePageSize));
+  const currentPage = page;
+  const pagedReleases = filteredReleases;
 
   const openReleaseModal = (appId?: string) => {
     const nextAppId = appId || selectedAppId || candidateGroups[0]?.appId || '';
@@ -252,7 +280,24 @@ export function ReleaseManagementPage() {
 
       <div className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_320px]">
         <Card className="min-w-0 overflow-hidden">
-          <CardHeader title="릴리즈 목록" description="release 브랜치에서 빌드된 산출물 기준의 배포 후보입니다." />
+          <CardHeader
+            title="릴리즈 목록"
+            description="release 브랜치에서 빌드된 산출물 기준의 배포 후보입니다."
+            action={
+              <div className="flex items-center gap-2">
+                {(Object.keys(releaseRangeLabels) as ReleaseRange[]).map((item) => (
+                  <Button
+                    key={item}
+                    variant={range === item ? 'default' : 'outline'}
+                    className="h-8 px-3 text-[13px]"
+                    onClick={() => setRange(item)}
+                  >
+                    {releaseRangeLabels[item]}
+                  </Button>
+                ))}
+              </div>
+            }
+          />
           <div className="space-y-3 p-4">
             {filteredReleases.length === 0 ? (
               <div className="flex min-h-44 items-center justify-center text-center text-sm text-muted-foreground">
@@ -306,7 +351,7 @@ export function ReleaseManagementPage() {
           </div>
           <div className="flex items-center justify-between gap-4 border-t border-border px-5 py-3 text-sm">
             <span className="text-xs text-muted-foreground">
-              {loading ? '불러오는 중' : `총 ${filteredReleases.length}건 · ${currentPage} / ${totalPages}`}
+              {loading ? '불러오는 중' : `총 ${totalReleases}건 · ${currentPage} / ${totalPages}`}
             </span>
             <div className="flex gap-2">
               <Button

src/pages/applications/RepositoryManagementPage.tsx

@@ -244,6 +244,15 @@ export function RepositoryManagementPage() {
     [giteaRepos, selectedAppRepoKeys]
   );
 
+  const handleRepoNameChange = (value: string) => {
+    const normalized = value
+      .trimStart()
+      .replace(new RegExp(`^${giteaAppOrg.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}/`, 'i'), '')
+      .replace(/^\/+/, '')
+      .replace(/\.git$/i, '');
+    setRepoName(normalized);
+  };
+
   return (
     <>
       <PageTitle
@@ -373,11 +382,17 @@ export function RepositoryManagementPage() {
             <div className="space-y-4 px-5 py-5">
               <label className="block">
                 <span className="text-xs font-medium text-muted-foreground">저장소명</span>
-                <input
-                  value={repoName}
-                  onChange={(event) => setRepoName(event.target.value)}
-                  className="mt-2 h-9 w-full rounded-md border border-border bg-background px-3 text-sm outline-none focus:border-primary"
-                />
+                <div className="mt-2 flex h-9 overflow-hidden rounded-md border border-border bg-background focus-within:border-primary">
+                  <span className="flex h-full shrink-0 items-center border-r border-border bg-muted px-3 text-xs font-semibold text-muted-foreground">
+                    {giteaAppOrg}/
+                  </span>
+                  <input
+                    value={repoName}
+                    onChange={(event) => handleRepoNameChange(event.target.value)}
+                    placeholder="lms-fe"
+                    className="h-full min-w-0 flex-1 bg-transparent px-3 text-sm outline-none placeholder:text-muted-foreground"
+                  />
+                </div>
               </label>
               <label className="block">
                 <span className="text-xs font-medium text-muted-foreground">설명</span>

src/pages/applications/application-api.ts

@@ -150,6 +150,17 @@ export function listBuildJobs(appKey?: string) {
   return apiRequest<BuildJob[]>(`/apps/builds${query}`);
 }
 
+export function listBuildJobsPage(options: { appKey?: string; page: number; limit: number; since?: string; status?: string }) {
+  const params = new URLSearchParams({
+    page: String(options.page),
+    limit: String(options.limit)
+  });
+  if (options.appKey) params.set('appKey', options.appKey);
+  if (options.since) params.set('since', options.since);
+  if (options.status) params.set('status', options.status);
+  return apiRequest<{ jobs: BuildJob[]; total: number; page: number; limit: number }>(`/apps/builds?${params.toString()}`);
+}
+
 export function createBuildJob(input: { componentId: string; branch?: string; commitSha?: string }) {
   return apiRequest<{ buildJob: BuildJob }>('/apps/builds', {
     method: 'POST',
@@ -170,6 +181,16 @@ export function listReleases(appKey?: string) {
   return apiRequest<AppRelease[]>(`/apps/releases${query}`);
 }
 
+export function listReleasesPage(options: { appKey?: string; page: number; limit: number; since?: string }) {
+  const params = new URLSearchParams({
+    page: String(options.page),
+    limit: String(options.limit)
+  });
+  if (options.appKey) params.set('appKey', options.appKey);
+  if (options.since) params.set('since', options.since);
+  return apiRequest<{ releases: AppRelease[]; total: number; page: number; limit: number; usedBuildIds?: string[]; usedValues?: string[] }>(`/apps/releases?${params.toString()}`);
+}
+
 export function createRelease(input: { appId: string; version: string; branch?: string; buildJobIds: string[] }) {
   return apiRequest<{ release: AppRelease }>('/apps/releases', {
     method: 'POST',
@@ -182,6 +203,16 @@ export function listDeployments(appKey?: string) {
   return apiRequest<DeploymentJob[]>(`/apps/deployments${query}`);
 }
 
+export function listDeploymentsPage(options: { appKey?: string; page: number; limit: number; since?: string }) {
+  const params = new URLSearchParams({
+    page: String(options.page),
+    limit: String(options.limit)
+  });
+  if (options.appKey) params.set('appKey', options.appKey);
+  if (options.since) params.set('since', options.since);
+  return apiRequest<{ deployments: DeploymentJob[]; total: number; page: number; limit: number; deployedReleaseIds?: string[] }>(`/apps/deployments?${params.toString()}`);
+}
+
 export function createDeployment(input: { releaseId: string; environment: string; namespace: string; updateLauncherAppVersion?: boolean }) {
   return apiRequest<{ deploymentJob: DeploymentJob }>('/apps/deployments', {
     method: 'POST',
@@ -193,6 +224,16 @@ export function listMigrations() {
   return apiRequest<RuntimeControlJob[]>('/apps/migrations');
 }
 
+export function listMigrationsPage(options: { appId?: string; page: number; limit: number; since?: string }) {
+  const params = new URLSearchParams({
+    page: String(options.page),
+    limit: String(options.limit)
+  });
+  if (options.appId) params.set('appId', options.appId);
+  if (options.since) params.set('since', options.since);
+  return apiRequest<{ jobs: RuntimeControlJob[]; total: number; page: number; limit: number }>(`/apps/migrations?${params.toString()}`);
+}
+
 export function createMigration(input: {
   releaseId: string;
   migrationComponentId: string;