Main Console

터미널 & 메인 제어 뷰

사용자와 에이전트가 쉘 세션을 실시간으로 인터랙션하는 최상위 핵심 제어 화면입니다.

시각적 구성 요소

  • PTY 가상 터미널 (Xterm.js): 글로벌 쉘 세션 및 로컬 Claude Code CLI 구동 내용을 컬러 코드로 온전하게 출력합니다. 사용자는 키 입력을 통해 승인 혹은 프롬프트를 수동 주입할 수 있습니다.
  • 상단 에이전트 표시 바 (Agent Info Bar): 구동 중인 노드 에이전트의 아이콘, 고유 식별 명칭(예: omc-autopilot)을 노출하며 우측의 Manage 버튼으로 설정 화면으로 원클릭 링크됩니다.
  • 에디터 인스펙터 패널 (Slider Panel): 우측 영역에 수납되는 사이드 패널로, 수정된 파일 목록 트리와 특정 소스코드 텍스트의 하이라이트 인스펙션 브라우저(Vditor 포함)를 토글 노출합니다.

주요 단축키 제어

기능 단축키 설명
에디터 슬라이드 토글 Ctrl + E 우측의 소스코드 인스펙터 패널을 즉각 열고 닫습니다.
강제 취소 (Force Abort) Ctrl + Shift + K 작동 중인 전체 PTY 세션과 자식 프로세스를 일괄 강제 종료합니다.
단축키 전체 설명 팝업 F1 BADA 내부에 셋업된 글로벌 메뉴 단축키 오버레이 팝업을 호출합니다.
Workflow Designer

워크플로우 디자이너

노드와 방향성 엣지를 결합하여 복합 루프 시나리오를 그래픽 인터페이스로 저작하는 캔버스입니다.

시각적 및 조작 기능

  • Cytoscape.js 드로잉 보드: 캔버스를 좌클릭 드래그하여 스팬(Pan)하고, 마우스 휠로 자유롭게 축소/확대(Zoom)가 가능합니다.
  • 드래그 노드 커넥터: 노드의 끝자락 핸들을 끌어다 다른 노드로 놓으면 성공(Success), 실패(Failure) 또는 조건부 바이패스 속성을 고를 수 있는 엣지 팝업이 노출됩니다.
  • 컨텍스트 메뉴 (Right-click): 빈 영역 우클릭 시 신규 노드 추가 팝업이 뜨며, 노드 우클릭 시 삭제/속성 변경/복제 액션 메뉴를 제공합니다.

노드 세부 속성 제어

⚙️ Agent Node 속성 카드
해당 노드를 실행할 에이전트의 프로필 ID(예: ralph-agent), 최대 재시도 카운트(Max Agent Runs), 실행 제한 격리 정책(Git Worktree 활성화 여부)을 시각 인터페이스로 셋팅합니다.
Real-time Monitor

워크플로우 실시간 모니터

구동 중인 워크플로우의 실행 노드 추적, 일시 중지 및 진화 로그를 동적으로 관측하는 화면입니다.

핵심 표시 요소

  • 실행 노드 네온 스트림 (Neon Highlights): 현재 활성화되어 PTY 명령을 집행하는 노드는 주기적으로 밝게 점멸하는 애니메이션 테두리를 두르고, 진행률을 백분율 막대로 오버레이 표시합니다.
  • 콘솔 로그 스트리머 (Consolidated Console): 해당 워크플로우 런 파일(.log)을 읽어와 파일 변경 이벤트를 감지하고 콘솔 창에 개별 출력 스트림을 결합해 실시간 렌더링합니다.

제어 액션 판넬 (Control Bar)

실행 오작동 징후 발견 혹은 예산 초과로 Paused 상태에 놓였을 때 대시보드에서 작동하는 물리 제어판입니다.

제어 버튼 동작 방식 내부 프로세스 처리
Pause (일시 중지) 상태를 즉시 Paused로 고정 PTY의 입력을 임시 블로킹하고 로그 파일 디스크립터를 닫음
Resume (재개) 스케줄 복구 및 이어하기 로그 FD를 append 모드로 새로 열고 다음 보류 노드 트리거
Kill (강제 파괴) 실행 즉시 폭파 정리 스폰된 모든 PTY 프로세스를 SIGKILL하고 브랜치 롤백 후 Failed 종료
Batch Scheduler

배치 스케줄러 관리 뷰

정기적 빌드 및 자동화 배치를 관리하고 순차적 단계를 설정하는 제어판입니다.

시각적 및 조작 기능

  • 비주얼 스텝 정렬 편집기 (Drag-and-Drop Step Reorder): 개별 단계 블록을 드래그하여 순서를 바꿀 수 있습니다.
  • 단계별 타겟 유형 구성:
    1) cli 스텝: 순수 쉘 명령.
    2) pty_agent 스텝: 가상 터미널 기동 에이전트.
    3) transform 스텝: JS VM 샌드박스 데이터 변경 코드 입력 폼.
    4) api 스텝: Webhook용 URL, Header, Body 편집기.
  • 스케줄 예약 게이트 지표: 사전 테스트 런 성공 여부를 녹색 방패(Tested OK) 또는 빨간색 경고(Test Required) 아이콘으로 한 눈에 시각화해 줍니다.
Harness Manager

검증 하네스 통제 뷰

로컬 빌드 검증을 관리하고, 실패 에러 기록을 통해 에이전트의 오작동 롤백 상태를 통제합니다.

주요 세부 속성

  • 하네스 등록 카드 리스트: 프로젝트별로 등록된 하네스(예: eslint-test, jest-unit)의 커맨드와 구동 경로를 보여줍니다.
  • 진화 이력 모달 (Evolution Logs Modal): 하네스 노드가 실패를 유발할 때마다 모인 Stack Trace와 에러 문자열을 시각 뷰어로 추적하고, 에이전트가 이를 어떻게 학습해 성공에 이르렀는지를 회차별 탭 인터페이스로 렌더링합니다.
  • 수동 롤백 작동기: 최대 시도를 실패했을 때 Git에서 수동으로 복구할 대상 파일과 롤백 스위치를 명시적으로 제어할 수 있는 조작기를 탑재했습니다.
Knowledge base

지식 그래프 & 위키 뷰

도메인 텍스트와 코드 참조가 그물망 형태로 결합된 시각 그래프 및 위키 에디터 화면입니다.

시각적 조작

  • D3.js 힘지향 그래프 토폴로지: 노드를 드래그하여 중심점으로 고정하거나 연결 엣지 위로 마우스를 올릴 때 관계 속성(예: refers_to, calls)이 반투명 하이라이트됩니다.
  • 위키 연동 마크다운 브라우저: 특정 지식 노드를 클릭하면 우측 뷰어 윈도우에 위키 에디터가 로드되어 도메인 규칙을 직접 타이핑하여 영속 저장할 수 있습니다. 작성된 룰 카드는 Claude Code 기동 시 .clauderules 파일의 RAG 컨텍스트로 자동 치환 주입됩니다.
Profiles & Settings

에이전트 프로필 및 환경설정

에이전트 성격(Persona), 사용할 모델 규격, BADA 데몬의 포트와 외부 API 바인딩을 통제합니다.

에이전트 프로필 매니저

  • Persona / System Prompt 텍스트 에디터: 에이전트에게 내릴 지침을 마크다운 스타일 서식 뷰어로 지정하고 저장합니다.
  • RAG 매핑 필터 태그: 에이전트 구동 시 지식베이스 위키에서 RAG 정보로 바인딩해줄 대상 태그들(예: #battery, #security)을 다중 선택 콤보박스로 세팅합니다.

BADA 일반 환경 설정

어플리케이션의 기본 설정 및 Claude Code CLI 바이너리 위치를 직접 지정합니다.

  • 테마 모드 설정: Dark 테마 (Catppuccin Mocha), Light 테마 (Catppuccin Latte) 스위치.
  • Claude CLI Binary Path: 글로벌 node 패키지 경로를 재매핑하거나 수동 오프라인 바이너리 절대 경로를 저장합니다.
  • Port & Connection Bridges: 로컬 데몬 포트번호 및 로컬 SQLite DB 파일의 저장 절대 경로를 텍스트박스로 변경 및 연동 테스트(Test Connection) 지원.
Loop Orchestrator

루프 빌더 위자드 (loop-builder.html)

자연어 입력 또는 템플릿 선택을 통해 Closed-Loop 에이전트 구동 룰 및 가드레일을 5단계로 설계하는 화면입니다.

시각적 및 조작 기능

  • 5단계 스텝 위자드 바: 상단 프로그레스 바를 통해 Goal 설정 ➔ 가드레일 ➔ 에이전트 ➔ 하네스 ➔ 최종 검토 단계로 구성됩니다.
  • ✨ AI Loop Wizard 자동 프리셋 분석기: 목표하는 내용(예: "3달러 내에서 빠르게 npm test 패스")을 자연어로 작성하여 [분석 및 추천 적용]을 누르면, 시스템이 분석하여 가드레일(Max Iterations, Budget 등)과 격리 유무를 추천하여 폼에 자동 반영합니다.
  • 동적 조건 필드 제어: Goal Type(파일 유무 검사, 지표 임계치 비교, 테스트 패스 등)의 종류에 맞춰 설정 입력 영역이 애니메이션과 함께 유연하게 노출됩니다.
  • 에이전트 Fleet 모드 토글: 단일 에이전트 루프와 다중 에이전트 편대(Maker-Checker)를 동적으로 전환할 수 있으며, 이 때 각 역할별 타겟 모델 설정 기능이 열립니다.
Loop Monitoring

루프 대시보드 & 이력 (loop-dashboard.html / loop-history.html)

현재 실행중인 루프의 세션을 모니터링하고 과거의 루프 실행 로그 및 이력을 탐색합니다.

루프 실시간 대시보드 (loop-dashboard.html)

  • KPI 메트릭 보드: 현재 이터레이션 횟수, 단계, 누적 토큰 비용, 누적 진행시간 및 성공률을 실시간 카드로 요약합니다.
  • 가로 스크롤 타임라인: 매 이터레이션(Iteration 1, Iteration 2...) 별 통과/반려 상태를 한 눈에 파악할 수 있는 시각 타임라인을 렌더링합니다.
  • 실시간 원시 로그 & 예산 소모 게이지: 에이전트들의 로그 스트림을 관찰하고, 설정한 토큰 예산 대비 실시간 예산 누적 비용을 비주얼 게이지 차트로 제공합니다.

루프 히스토리 브라우저 (loop-history.html)

  • 이터레이션 Diff 및 로그 탭: 과거 루프들의 성공 여부와 이터레이션별로 소스 코드의 어떤 라인이 수정되었는지 Git Diff 탭을 통해 즉각적인 수술적 리팩토링 흔적을 파악할 수 있습니다.
  • AI 생성 교훈(Retrospective Logs) 요약: 루프가 완료 혹은 회로 차단(Circuit Trip)되었을 때 에이전트들이 획득한 요약 인사이트와 자가 학습 데이터를 열람합니다.