MAO Prompt Ops UI & 상호작용 명세

1. Prompt Library

레이아웃: 좌측 필터 패널(Agent Type, Status, Search), 우측 리스트 테이블
테이블 컬럼: Template ID, Agent, Version, Status Badge, Updated By/At, Guardrail Alerts 수, Actions
인터랙션:
- 행 클릭 시 상세 페이지 이동 (/operations/agent/[id])
- New Template 버튼 → /operations/agent/new
- Duplicate 액션 → POST /templates with sourceTemplateId
- Status Badge Hover → SlotMeta 요약 툴팁 (Data Readiness, Context coverage)
Empty State: “선택한 Agent에 Draft가 없습니다. [새 템플릿 만들기]”
Bulk Action: 멀티 선택 후 Request Review (Draft → REVIEW)

헤더: Template ID, Agent, Version, Status, 버튼(Preview, Request Review, Deploy)
탭: Template, Diff, Reviews, History
- Template 탭: Monaco Editor(토큰 수 표시), Slot Checklist (필수 슬롯 완료 여부), Data Readiness 카드
- Template 탭 우측에 Model Profile 카드: 현재 Provider/Model/Fallback Chain/토큰 한도 표시, Edit Model Profile 버튼 제공
- Diff 탭: Side-by-side diff (previousVersion vs current)
- Reviews 탭: 코멘트 리스트 + Reply, Status 변경 버튼
- History 탭: Version 타임라인
Validation:
- Slot Checklist는 JSON Schema 기반 자동 검사 결과를 표시 (미충족 항목은 빨간 배지)
- 저장 시 즉시 lint 실행, 실패 시 Toast + 오류 위치 하이라이트
Actions:
- Request Review: PATCH /templates/{id} with status: "REVIEW"
- Approve/Reject: Reviewer만 버튼 표시, POST /templates/{id}/reviews
- Deploy 버튼: 상태가 REVIEW/APPROVED일 때만 표출, Deployment 모달 호출
- Edit Model Profile: Drawer 열기 → Provider(Vertex/OpenAI/Anthropic), 모델명, Max Tokens, Temperature, Top P, Fallback Chain 편집 후 Run Guardrail Sim 실행

모달/페이지: Template Detail에서 Deploy 클릭 시 슬라이드오버
폼 필드:
- Environment (Canary/Prod)
- Rollout Plan: traffic %, duration, start time
- Metrics Gate: Routing Accuracy threshold, CTA Conversion delta, Guardrail severity limit
- Notes
타임라인 뷰: 배포 생성 후 /agent/deployment/[id]에서 진행 상태, 이벤트 로그, Guardrail alert 리스트를 표시
조치 버튼:
- Pause (Canary 진행 중)
- Promote to Prod (기준 충족 시 활성화)
- Rollback (Guardrail 위반 시 강조)

카드 뷰: 각 실험 카드에 이름, 대상 Agents, 버킷/트래픽 표시
세부 설정: 카드 클릭 → Drawer에서 Bucket 구성, KPI Gate, 종료조건 편집
상태 인디케이터: Scheduled / Running / Paused / Completed 색상
Metrics Panel: 실험별 Routing Accuracy, CTA Conversion 비교 차트
LLM Split 시나리오: 실험 카드에서 버킷별 Model Profile을 표시(예: Control: GPT-4o, Variant: Claude 3.5), 토큰 비용 추정치를 보여줌

차트 구성:
- Routing Accuracy (라인 차트, agent filter)
- CTA Conversion Funnel (막대)
- Latency Heatmap (에이전트 x 시간)
- Token Usage Trend (스택 영역, Provider 필터)
LLM Cost 위젯: Provider별 일일 토큰 사용량/한도 대비 %, 예상 비용
Guardrail Feed: 우측 사이드에 최근 10건 표시, 클릭 시 모달로 sample payload / policy / remediation 안내
실시간 표시: SSE 업데이트 시 차트 상단에 “Updated 30s ago” 배지

리스트 섹션: Provider, Model, 상태, 최근 수정자, 적용 Agent 개수 컬럼
Quota 패널: 상단에 Provider별 토큰 한도/사용량 Progress bar 표시, 한도 초과 시 경고 배지
Drawer/Modal:
- Form: Provider 선택, 모델 이름 자동 완성, 세부 파라미터(temperature, topP, maxTokens), fallback chain(드래그로 순서 변경)
- Validate 버튼 클릭 시 Guardrail API 호출 결과(안전성/토큰 비용)를 요약 카드로 노출
- Bind to Agent: Agent/Environment 선택 후 즉시 적용 또는 예약(Effective Date)
Audit Trail: Drawer 하단에 최근 변경 기록(사용자, 필드, 이전/이후 값)

목록 테이블: Tool ID/Name, Provider/Type(http|function|workflow), Parameters(간략), Updated At, Actions(Edit/Disable)
상세 Drawer:
- ToolDefinition 보기/편집: 이름, 설명, provider, type, config(엔드포인트/timeout 등), parameters(JSON Schema) 확인
- Agent 바인딩 탭: agentId 목록과 enabled toggle, per-agent override config
- 호출 로그 탭: 최근 ToolInvocation(status/latency/taskId), 필터(status/agent/tool)
액션:
- New Tool: POST /tools
- Bind to Agent: POST /agents/{agentId}/tools/{toolId} (enable/disable)
- View Invocations: GET /tools/invocations?agentId=&status=

스토어/파일 관리:
- Store 리스트: Store Name, Provider(Gemini File Search), File Count, Status(Indexing/Ready), Updated At
- 파일 업로드 카드: Drag & Drop, MIME auto-detect, 표시 이름 입력
- Store에 파일 추가: add_files_to_file_search_store 호출 후 Indexing 상태 표시(스피너)
검색 로그 탭:
- RAG Query Log 테이블: query, agentId, taskId, topK, retrievedChunkIds(or file URIs), createdAt
- 상세 모달: citation/URI, chunk 프리뷰, 인용 링크
프롬프트 주입 가이드:
- “출처 인용 포함”, “근거 없으면 답변하지 않음” 지침을 표시
액션:
- New Store: POST /rag/index (관리형 File Search 스토어 메타 등록)
- Upload & Add to Store: Files API → add_files_to_store
- Delete Store/File: cleanup 버튼으로 과금/할당량 관리

세부 와이어프레임은 Figma 파일 Admin Console - MAO v0.1을 참조하며, 변경 시 본 문서에 스냅샷 설명을 추가한다.