feat: expose profile reset operation progress

app/gateway-frontend/e2e/admin-runtime-actions.spec.ts

@@ -33,12 +33,15 @@ const installFixture = async (
     page: Page,
     options: {
         deferRequest?: boolean;
+        deferInstall?: boolean;
         initialActions?: RuntimeAction[];
         afterRequestActions?: RuntimeAction[];
         pendingProfileReads?: number;
     } = {}
 ) => {
     let requested = false;
+    let installRequested = false;
+    let installActive = false;
     let postRequestProfileReads = 0;
     const requestBodies: unknown[] = [];
     let releaseRequest = (): void => {};
@@ -47,6 +50,12 @@ const installFixture = async (
               releaseRequest = resolve;
           })
         : Promise.resolve();
+    let releaseInstall = (): void => {};
+    const installGate = options.deferInstall
+        ? new Promise<void>((resolve) => {
+              releaseInstall = resolve;
+          })
+        : Promise.resolve();
     await page.addInitScript(() => {
         window.localStorage.setItem('sammo-session-token', 'playwright-admin-session');
     });
@@ -58,6 +67,12 @@ const installFixture = async (
             requestBodies.push(body);
             await requestGate;
         }
+        if (operations.includes('admin.profiles.install')) {
+            installRequested = true;
+            requestBodies.push(body);
+            await installGate;
+            installActive = true;
+        }
         const results = operations.map((operation) => {
             if (operation === 'me') {
                 return response({
@@ -75,7 +90,17 @@ const installFixture = async (
                 return response({ enabled: true });
             }
             if (operation === 'admin.profiles.listScenarios') {
-                return response([]);
+                return response([
+                    {
+                        id: 1010,
+                        title: '【테스트】황건의 난',
+                        year: 184,
+                        npcCount: 42,
+                        npcExCount: 0,
+                        npcNeutralCount: 0,
+                        nations: [],
+                    },
+                ]);
             }
             if (operation === 'admin.profiles.list') {
                 const keepPending = requested && postRequestProfileReads++ < (options.pendingProfileReads ?? 0);
@@ -83,11 +108,17 @@ const installFixture = async (
                     {
                         profileName: 'hwe:default',
                         profile: 'hwe',
-                        scenario: 'default',
+                        scenario: '1010',
                         apiPort: 15015,
                         status: 'RUNNING',
                         buildStatus: 'SUCCEEDED',
                         meta: {},
+                        activeOperation: installActive
+                            ? {
+                                  id: '77777777-7777-4777-8777-777777777777',
+                                  status: 'QUEUED',
+                              }
+                            : null,
                         runtime: {
                             profileName: 'hwe:default',
                             apiRunning: true,
@@ -123,6 +154,32 @@ const installFixture = async (
                     },
                 });
             }
+            if (operation === 'admin.profiles.install') {
+                return response({
+                    ok: true,
+                    operationId: '77777777-7777-4777-8777-777777777777',
+                });
+            }
+            if (operation === 'admin.operations.list') {
+                return response(
+                    installRequested
+                        ? [
+                              {
+                                  id: '77777777-7777-4777-8777-777777777777',
+                                  profileName: 'hwe:default',
+                                  type: 'RESET',
+                                  status: installActive ? 'QUEUED' : 'RUNNING',
+                                  sourceMode: 'COMMIT',
+                                  sourceRef: '0123456789abcdef0123456789abcdef01234567',
+                                  payload: {},
+                                  requestedBy: 'admin-user',
+                                  createdAt: '2026-07-30T02:00:00.000Z',
+                                  updatedAt: '2026-07-30T02:00:00.000Z',
+                              },
+                          ]
+                        : []
+                );
+            }
             throw new Error(`Unhandled tRPC operation: ${operation}`);
         });
         await route.fulfill({
@@ -131,7 +188,7 @@ const installFixture = async (
             body: JSON.stringify(results),
         });
     });
-    return { releaseRequest, requestBodies };
+    return { releaseRequest, releaseInstall, requestBodies };
 };
 
 test('reports clock-shift acceptance separately from actual application', async ({ page }) => {
@@ -215,3 +272,33 @@ test('renders an ignored terminal outcome without calling it applied', async ({
     await expect(page.getByText('지원하지 않는 요청')).toBeVisible();
     await expect(page.getByText(/적용됨|요청 완료/)).toHaveCount(0);
 });
+
+test('keeps profile installation disabled while its queued operation is active', async ({ page }, testInfo) => {
+    const fixture = await installFixture(page, { deferInstall: true });
+    page.on('dialog', (dialog) => dialog.accept());
+    await page.goto('admin');
+
+    const installButton = page.getByRole('button', { name: '설치 적용' });
+    const click = installButton.click();
+    await expect.poll(() => fixture.requestBodies.length).toBe(1);
+    await expect(page.getByRole('button', { name: '등록 중…' })).toBeDisabled();
+    fixture.releaseInstall();
+    await click;
+
+    const operationLink = page.getByRole('link', { name: /77777777-7777-4777-8777-777777777777 상태 보기/ });
+    await expect(operationLink).toBeVisible();
+    await expect(page.getByRole('button', { name: '설치 작업 진행 중' })).toBeDisabled();
+
+    await page.setViewportSize({ width: 390, height: 844 });
+    const linkGeometry = await operationLink.evaluate((element) => {
+        const rect = element.getBoundingClientRect();
+        return { left: rect.left, right: rect.right, viewportWidth: window.innerWidth };
+    });
+    expect(linkGeometry.left).toBeGreaterThanOrEqual(0);
+    expect(linkGeometry.right).toBeLessThanOrEqual(linkGeometry.viewportWidth);
+    await page.screenshot({ path: testInfo.outputPath('admin-install-active-mobile.png'), fullPage: true });
+
+    await operationLink.click();
+    await expect(page).toHaveURL(/\/gateway\/admin\/server-operations\?operationId=77777777/);
+    await expect(page.getByTestId('operations-table')).toContainText('77777777-7777-4777-8777-777777777777');
+});

app/gateway-frontend/e2e/server-operations.spec.ts

@@ -10,6 +10,8 @@ type Operation = {
     sourceMode?: 'BRANCH' | 'COMMIT';
     sourceRef?: string;
     resolvedCommitSha?: string;
+    completedAt?: string;
+    error?: string;
     payload: Record<string, unknown>;
     requestedBy: string;
     createdAt: string;
@@ -127,6 +129,22 @@ const installFixture = async (page: Page, state: FixtureState) => {
                 state.operations = [operation];
                 return response(operation);
             }
+            if (name === 'admin.operations.retry') {
+                const operation: Operation = {
+                    id: '44444444-4444-4444-8444-444444444444',
+                    profileName: 'che:2',
+                    type: 'RESET',
+                    status: 'QUEUED',
+                    sourceMode: 'COMMIT',
+                    sourceRef: 'fedcba9876543210fedcba9876543210fedcba98',
+                    payload: { installOperationId: 'failed-generation' },
+                    requestedBy: 'admin',
+                    createdAt: '2026-07-25T04:00:00.000Z',
+                    updatedAt: '2026-07-25T04:00:00.000Z',
+                };
+                state.operations = [operation, ...state.operations];
+                return response(operation);
+            }
             throw new Error(`Unhandled tRPC operation: ${name}`);
         });
         await route.fulfill({
@@ -190,7 +208,7 @@ test('separates branch and commit semantics and submits a reset from the dedicat
     await page.getByTestId('request-reset').hover();
     await page.getByTestId('request-reset').click();
 
-    await expect(page.getByText('초기화 작업을 시작했습니다.')).toBeVisible();
+    await expect(page.getByText('초기화 작업을 등록했습니다.')).toBeVisible();
     await expect(page.getByTestId('operations-table')).toContainText('RESET');
     const resetRequest = state.requestBodies.find((entry) => entry.operation === 'admin.operations.requestReset');
     expect(JSON.stringify(resetRequest?.body)).toContain('"sourceMode":"COMMIT"');
@@ -232,3 +250,66 @@ test('starts and stops all runtime roles through the operation controls', async
     expect(serializedRequests).toContain('"action":"START"');
     expect(serializedRequests).toContain('"action":"STOP"');
 });
+
+test('renders a failed reset, retries it as a new operation, and reaches success', async ({ page }, testInfo) => {
+    const longError =
+        '선택한 커밋의 프로필 프로세스를 시작하지 못했습니다. 실패 원인을 확인한 뒤 동일 generation으로 재시도해 주세요.';
+    const state: FixtureState = {
+        operations: [
+            {
+                id: '55555555-5555-4555-8555-555555555555',
+                profileName: 'che:2',
+                type: 'RESET',
+                status: 'FAILED',
+                sourceMode: 'COMMIT',
+                sourceRef: 'fedcba9876543210fedcba9876543210fedcba98',
+                resolvedCommitSha: 'fedcba9876543210fedcba9876543210fedcba98',
+                payload: { installOperationId: 'failed-generation' },
+                requestedBy: 'admin',
+                completedAt: '2026-07-25T03:30:00.000Z',
+                error: longError,
+                createdAt: '2026-07-25T03:00:00.000Z',
+                updatedAt: '2026-07-25T03:30:00.000Z',
+            },
+        ],
+        runtimeRunning: false,
+        requestBodies: [],
+    };
+    await installFixture(page, state);
+    page.on('dialog', (dialog) => dialog.accept());
+
+    await page.goto('admin/server-operations');
+    await expect(page.getByText('FAILED', { exact: true })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'fedcba987654', exact: true })).toBeVisible();
+    const failure = page.getByText(longError);
+    await expect(failure).toBeVisible();
+    expect(await failure.evaluate((element) => getComputedStyle(element).color)).toBe('oklch(0.704 0.191 22.216)');
+
+    await page.getByRole('button', { name: '재시도' }).click();
+    await expect(page.getByText('재시도 작업을 등록했습니다.')).toBeVisible();
+    await expect(page.getByText('FAILED', { exact: true })).toBeVisible();
+    await expect(page.getByText('QUEUED', { exact: true })).toBeVisible();
+    await expect(page.getByTestId('operations-table').locator('tbody tr')).toHaveCount(2);
+
+    state.operations[0] = {
+        ...state.operations[0]!,
+        status: 'SUCCEEDED',
+        resolvedCommitSha: 'fedcba9876543210fedcba9876543210fedcba98',
+        completedAt: '2026-07-25T04:05:00.000Z',
+        updatedAt: '2026-07-25T04:05:00.000Z',
+    };
+    state.runtimeRunning = true;
+    await page.getByTestId('refresh-operations').click();
+    await expect(page.getByText('SUCCEEDED', { exact: true })).toBeVisible();
+    await expect(page.getByText('RUNNING', { exact: true }).first()).toBeVisible();
+
+    await page.screenshot({ path: testInfo.outputPath('failed-retry-succeeded-desktop.png'), fullPage: true });
+    await page.setViewportSize({ width: 390, height: 844 });
+    const tableGeometry = await page.getByTestId('operations-table').evaluate((table) => {
+        const tableRect = table.getBoundingClientRect();
+        const scrollerRect = table.parentElement!.getBoundingClientRect();
+        return { tableWidth: tableRect.width, scrollerWidth: scrollerRect.width };
+    });
+    expect(tableGeometry.tableWidth).toBeGreaterThan(tableGeometry.scrollerWidth);
+    await page.screenshot({ path: testInfo.outputPath('failed-retry-succeeded-mobile.png'), fullPage: true });
+});

app/gateway-frontend/src/views/AdminView.vue

@@ -74,6 +74,10 @@ type AdminProfile = {
         tournamentRunning: boolean;
     };
     buildCommitSha?: string;
+    activeOperation?: {
+        id: string;
+        status: 'QUEUED' | 'RUNNING';
+    } | null;
     meta: Record<string, unknown>;
     runtimeActions: Array<{
         id: string;
@@ -238,7 +242,7 @@ type AdminClient = {
                     gitRef?: string;
                 };
                 reason?: string;
-            }) => Promise<{ ok: boolean; action?: unknown }>;
+            }) => Promise<{ ok: boolean; operationId: string; action?: unknown }>;
         };
         requestAction: {
             mutate: (input: {
@@ -306,6 +310,8 @@ const profileActionSubmitting = ref<Record<string, boolean>>({});
 const scenarioCatalogs = ref<Record<string, ScenarioCatalogState>>({});
 const profileInstalls = ref<Record<string, InstallFormState>>({});
 const profileInstallStatus = ref<Record<string, string>>({});
+const profileInstallSubmitting = ref<Record<string, boolean>>({});
+const profileInstallOperationId = ref<Record<string, string>>({});
 
 const runtimeActionPending = (profile: AdminProfile): boolean => {
     return profile.runtimeActions.some((action) => action.status === 'REQUESTED' || action.status === 'PARTIAL');
@@ -685,6 +691,9 @@ const loadScenariosForProfile = async (profileName: string) => {
     if (!install) {
         return;
     }
+    if (profileInstallSubmitting.value[profileName]) {
+        return;
+    }
     await loadScenarioCatalog(install.gitRef);
 };
 
@@ -817,8 +826,9 @@ const requestInstall = async (profileName: string) => {
         return;
     }
     try {
+        profileInstallSubmitting.value = { ...profileInstallSubmitting.value, [profileName]: true };
         const gitRef = normalizeGitRefInput(install.gitRef);
-        await adminClient.profiles.install.mutate({
+        const result = await adminClient.profiles.install.mutate({
             profileName,
             install: {
                 scenarioId: install.scenarioId,
@@ -840,14 +850,20 @@ const requestInstall = async (profileName: string) => {
         });
         profileInstallStatus.value = {
             ...profileInstallStatus.value,
-            [profileName]: openAt ? '설치 예약 완료' : '설치 요청 완료',
+            [profileName]: openAt ? '설치 작업을 예약했습니다.' : '설치 작업을 등록했습니다.',
+        };
+        profileInstallOperationId.value = {
+            ...profileInstallOperationId.value,
+            [profileName]: result.operationId,
         };
         await loadProfiles();
     } catch (error) {
         profileInstallStatus.value = {
             ...profileInstallStatus.value,
-            [profileName]: '설치 요청 실패',
+            [profileName]: error instanceof Error ? `설치 요청 실패: ${error.message}` : '설치 요청 실패',
         };
+    } finally {
+        profileInstallSubmitting.value = { ...profileInstallSubmitting.value, [profileName]: false };
     }
 };
 
@@ -1664,9 +1680,19 @@ onMounted(() => {
                             >
                                 <div class="flex items-center justify-between">
                                     <h4 class="text-sm font-semibold">설치/리셋</h4>
-                                    <span class="text-xs text-zinc-500">{{
+                                    <div class="text-right text-xs text-zinc-500">
-                                        profileInstallStatus[profile.profileName]
+                                        <div>{{ profileInstallStatus[profile.profileName] }}</div>
-                                    }}</span>
+                                        <RouterLink
+                                            v-if="profileInstallOperationId[profile.profileName]"
+                                            :to="{
+                                                path: '/admin/server-operations',
+                                                query: { operationId: profileInstallOperationId[profile.profileName] },
+                                            }"
+                                            class="block break-all text-amber-400 underline hover:text-amber-300"
+                                        >
+                                            작업 {{ profileInstallOperationId[profile.profileName] }} 상태 보기
+                                        </RouterLink>
+                                    </div>
                                 </div>
                                 <div class="grid lg:grid-cols-2 gap-4">
                                     <div class="space-y-3">
@@ -2064,10 +2090,20 @@ onMounted(() => {
                                         </div>
 
                                         <button
-                                            class="bg-emerald-600 hover:bg-emerald-500 text-black font-semibold px-4 py-2 rounded w-full"
+                                            class="bg-emerald-600 hover:bg-emerald-500 disabled:cursor-not-allowed disabled:opacity-50 text-black font-semibold px-4 py-2 rounded w-full"
+                                            :disabled="
+                                                profileInstallSubmitting[profile.profileName] ||
+                                                Boolean(profile.activeOperation)
+                                            "
                                             @click="requestInstall(profile.profileName)"
                                         >
-                                            설치 적용
+                                            {{
+                                                profileInstallSubmitting[profile.profileName]
+                                                    ? '등록 중…'
+                                                    : profile.activeOperation
+                                                      ? '설치 작업 진행 중'
+                                                      : '설치 적용'
+                                            }}
                                         </button>
 
                                         <div

app/gateway-frontend/src/views/ServerOperationsView.vue

@@ -254,7 +254,7 @@ const requestReset = async () => {
                 preopenAt: toIso(form.preopenAt),
             },
         });
-        message.value = form.scheduledAt ? '예약 초기화 작업을 등록했습니다.' : '초기화 작업을 시작했습니다.';
+        message.value = form.scheduledAt ? '예약 초기화 작업을 등록했습니다.' : '초기화 작업을 등록했습니다.';
         await loadState(true);
     } catch (error) {
         errorMessage.value = error instanceof Error ? error.message : '초기화 요청에 실패했습니다.';
@@ -668,6 +668,7 @@ onBeforeUnmount(() => {
                         <thead class="border-b border-zinc-700 text-xs text-zinc-500">
                             <tr>
                                 <th class="p-2">요청/예약</th>
+                                <th class="p-2">작업 ID</th>
                                 <th class="p-2">프로필</th>
                                 <th class="p-2">작업</th>
                                 <th class="p-2">상태</th>
@@ -690,6 +691,7 @@ onBeforeUnmount(() => {
                                         예약 {{ formatTime(operation.scheduledAt) }}
                                     </div>
                                 </td>
+                                <td class="max-w-48 break-all p-2 font-mono text-xs">{{ operation.id }}</td>
                                 <td class="p-2">{{ operation.profileName }}</td>
                                 <td class="p-2">{{ operation.type }}</td>
                                 <td class="p-2 font-semibold">{{ operation.status }}</td>
@@ -703,7 +705,13 @@ onBeforeUnmount(() => {
                                 </td>
                                 <td class="max-w-xs p-2 text-xs">
                                     {{ formatTime(operation.completedAt) }}
-                                    <div v-if="operation.error" class="mt-1 text-red-400">{{ operation.error }}</div>
+                                    <div
+                                        v-if="operation.error"
+                                        class="mt-1"
+                                        :class="operation.status === 'FAILED' ? 'text-red-400' : 'text-amber-300'"
+                                    >
+                                        {{ operation.error }}
+                                    </div>
                                 </td>
                                 <td class="p-2">
                                     <button
@@ -723,7 +731,7 @@ onBeforeUnmount(() => {
                                 </td>
                             </tr>
                             <tr v-if="operations.length === 0">
-                                <td colspan="9" class="p-6 text-center text-zinc-500">작업 이력이 없습니다.</td>
+                                <td colspan="10" class="p-6 text-center text-zinc-500">작업 이력이 없습니다.</td>
                             </tr>
                         </tbody>
                     </table>