본문으로 건너뛰기

MAO Prompt Ops 라우트 & 컴포넌트 구조

1. 라우트 트리​

app/
└─ (admin)/
   └─ operations/
      ├─ layout.tsx                # Tier1: Operations Shell (탭/브레드크럼)
      ├─ page.tsx                  # Operations Dashboard (기본 KPI)
      ├─ agent/
      │  ├─ page.tsx               # Prompt Library
      │  ├─ deployment/
      │  │  └─ [deploymentId]/
      │  │     └─ page.tsx         # Deployment 상세 (Modal 대체)
      │  └─ models/
      │     └─ page.tsx            # LLM Model Profiles (Provider, Quota, Fallback)
      ├─ agent/new/
      │  └─ page.tsx               # 신규 템플릿 생성 (Server Action)
      ├─ agent/[templateId]/
      │  ├─ page.tsx               # Template Detail / Diff / Review
      │  └─ reviews/
      │     └─ page.tsx            # 리뷰/코멘트 Thread (Client component)
      ├─ experiments/
      │  └─ page.tsx               # Routing Experiment 관리
      └─ observability/
         └─ page.tsx               # KPI/Guardrail 대시보드 (SSE)
  • operations/layout.tsx는 Tier1(Operations) 공통 네비게이션/탭/Alert Center를 제공.
  • Tier2별 sublayout이 필요하면 agent/layout.tsx 등으로 확장해 로딩/에러 상태를 통일한다.

2. 주요 컴포넌트 배치​

화면서버 컴포넌트클라이언트 컴포넌트비고
Prompt Library (agent/page.tsx)PromptLibraryServer (데이터 페칭, 필터 query)PromptListTable, AgentFilter, TemplateActionsServer Components로 프롬프트 리스트를 스트리밍
Template Detail (agent/[templateId]/page.tsx)PromptDetailServerMonacoPromptEditor, SlotChecklist, DiffViewer, ReviewPanelReviewPanel은 Suspense boundary로 분리
Deployment Detail (agent/deployment/[id]/page.tsx)DeploymentServerRolloutTimeline, GuardrailStatus, RollbackButton모달 또는 라우트 페이지 중 선택
Experiments (experiments/page.tsx)ExperimentServerExperimentTable, CanaryConfigFormForm은 Server Action과 연동
Observability (observability/page.tsx)ObservabilityServerRoutingChart, CtaFunnel, LatencyHeatmap, TokenUsageTrendSSE hook 사용 (Zustand/React Query)
Model Profiles (agent/models/page.tsx)ModelProfileServerModelProfileDrawer, ProviderPill, FallbackChainEditor, QuotaUsagePanelProvider별 파라미터/폴백 편집 및 토큰 한도 시각화

3. 데이터 로딩 전략​

  • Server Components는 cache: 'no-store' 또는 Revalidate 짧게 설정하여 최신 상태 유지.
  • SSE/API Polling은 /api/admin/prompt-console/metrics Route Handler를 통해서만 접근하고, 클라이언트 훅 usePromptMetrics에서 관리.
  • Model Profile 페이지는 /api/admin/prompt-console/model-profiles, /api/admin/prompt-console/model-quotas를 Server Components에서 Prefetch 후 Drawer에서 mutate.
  • 모든 Admin API 호출은 libs/core/admin-api 클라이언트에 래핑.

4. 상태 관리​

  • 로컬 Form 상태: React Hook Form + Zod (클라이언트)
  • 글로벌 토스트/경보: libs/shared/ui/admin-toast
  • SSE 데이터: Zustand store (usePromptMetricsStore)로 대시보드 및 Observability 화면에서 공유.

5. 라우팅 가이드​

  • Template Detail 페이지는 URL 상태만으로 Draft/Review/Deploy 탭을 구분 (?tab=review).
  • 확정되지 않은 기능은 feature flag(promptOpsExperiments)로 둘러싼다.
  • Breadcrumb 표준: Operations / Agent Ops / Template #123.

추가 라우트가 필요할 경우 본 문서에 새 경로와 컴포넌트 배치를 추가한다.