[FE][BE] MVP1 End-to-End UI: RBAC, credential, observability, compare

[yoonki1207]

목표

• MVP1이 backend-only가 아니라 브라우저에서 작동하는 제품 흐름이 되게 한다.
• organization/team/permission/credential/workflow/observability/compare의 최소 UI를 제공한다.
• run detail 또는 canvas에서 node별 cost/token/latency/status를 확인할 수 있게 한다.
• 같은 입력으로 model 또는 prompt 2개를 비교할 수 있게 한다.

관련 Linear

• 워크플로우(Canvas) UI UX 개선 #6 일부
• 노드 구성 및 상세 편집 UX 개편 #23 일부
• [FE] 기존 Nav를 Organization 기준으로 변경 #16 일부

구현 범위:

작업	내용
Run detail	node별 model/token/cost/latency/status 표시
Canvas badge	최근 실행 기준으로 node badge에 cost/token/latency/status 표시
Failure emphasis	실패 node와 비용이 큰 node를 시각적으로 구분
Organization indicator	현재 organization scope를 nav/header/settings 중 한 곳에 표시
Team/member UI	team 생성, member 추가/제거, team 비활성화의 최소 화면 제공
Permission UI	workflow permission과 LLM credential permission grant/revoke 화면 제공
User direct grant UI	특정 user에게 workflow/LLM credential 추가 권한을 부여/회수할 수 있는 최소 UI 제공
Credential management UI	organization-level credential 등록, model sync, credential preview 확인
Permission-aware editor	권한에 따라 canvas/editor의 저장/실행 버튼과 read-only 상태 반영
Credential permission UX	권한 없는 credential/model은 선택 불가 또는 실행 전 명확한 오류 표시
Model/prompt compare	같은 입력으로 두 설정을 실행하고 결과, 비용, latency를 비교
Audit confirmation UI	권한 차단/실행 이벤트를 확인할 수 있는 최소 audit list 또는 activity panel 제공
Organization nav	MBA-16에서 다루는 nav 전체 개편은 후순위 가능하지만, 현재 organization 표시와 MVP1 이동 경로는 포함

구현 방법

1. 기존 apps/client/app/features/workflow/api/workflowApi.ts의 run/detail API를 확장한다.
2. LogDetail, LogList, monitoring/statistics 컴포넌트의 기존 표시 구조를 우선 재사용한다.
3. Canvas node badge는 최근 run detail에서 받은 node별 usage summary를 표시한다.
4. 비교 기능은 새 table을 만들지 않고 기존 workflow run과 llm usage를 사용한다.
5. 비교 결과를 장기 상태로 관리하지 않는다. 장기 저장이 필요하면 MVP3 이후 schema extension으로 분리한다.
6. RBAC 관리 UI는 별도 대형 admin console이 아니라 settings 또는 organization 관리 화면의 최소 CRUD로 시작한다.
7. 권한이 없는 action은 버튼을 숨기기보다 disabled 상태와 서버 에러 메시지를 함께 처리한다.
8. viewer 계정으로 들어왔을 때 workflow editor가 read-only로 보이고 저장/실행이 막히는지 확인한다.
9. builder/operator/manager별로 같은 화면에서 허용 action이 다르게 보이도록 한다.

Acceptance Criteria

• organization owner/manager가 UI에서 team을 만들고 user를 team에 넣을 수 있다.
• organization owner/manager 또는 resource manager가 UI에서 workflow/LLM credential 권한을 부여/회수할 수 있다.
• user direct permission을 UI에서 부여/회수할 수 있다.
• organization owner/manager가 UI에서 LLM credential을 등록하고 model sync 결과를 확인할 수 있다.
• viewer는 workflow editor를 read-only로 볼 수 있고 저장/실행 버튼이 막힌다.
• operator는 실행 가능하지만 저장 버튼이 막힌다.
• builder는 저장과 실행이 가능하다.
• LLM node 포함 workflow 실행 후 UI에서 node별 token/cost/latency/status를 확인할 수 있다.
• 여러 LLM node가 있을 때 node별 값이 섞이지 않는다.
• 권한 없는 credential/model로 실행하려 하면 사용자가 이유를 이해할 수 있는 오류가 보인다.
• model A/B 또는 prompt A/B 결과, 비용, latency를 한 화면에서 비교할 수 있다.
• audit UI 또는 activity panel에서 권한 차단/실행 이벤트를 확인할 수 있다.
• 기존 Canvas 주요 기능이 깨지지 않는다.

Out of Scope

• Stitch 디자인 세트 전체 적용
• Edge handle 시각화 개선
• 번호 기반 edge 연결
• Canvas 다중 선택 UX
• 전체 dashboard UI UX 개선
• multi-organization switcher 완성
• 상세 role catalog 관리 화면

참고 사항

MVP-01-기반 문서

[linear-code]

MBA-45