DevTools (loopy dev)

loopy dev는 loopy runtime이 실행되는 동안 그걸 관찰하는 로컬 웹 UI를 띄워요. 코드에 계측(instrumentation)을 추가하거나 어디로 뭔가를 전송하지 않아요. 앱을 같은 프로세스에서 로드해서, 이벤트 소싱과 리플레이를 구동하는 것과 똑같은 이벤트 스트림을 구독하고, 브라우저에 실시간으로 그려줘요.

로컬. 여러분의 머신에서 실행되고, http://localhost:<port>로 서빙돼요.
오프라인. 계정도, 외부 서비스도 없어요. 앱의 이벤트 로그를 읽는 프로세스 하나가 전부예요.
읽기 전용 (v1). DevTools는 관찰만 해요. UI에서 상태를 수정하거나, 실행 중간부터 리플레이하거나, 중단된 실행을 재개할 수는 없어요. 아래 범위를 참고하세요.

실행하는 방법

runtime을 내보내는 모듈을 가리키세요 — defineLoopy(...)가 반환하는 것과 같은 객체예요:

export const runtime = defineLoopy({ agents, workflows, teams, deps });

loopy dev ./loopy.config.ts --port 5173

--port를 생략하면 기본값은 5173이에요. loopy dev는 run 함수가 제대로 동작하는 runtime이라는 이름의 익스포트(또는 default export)를 찾아요. loopy({...}).provide(...) 빌더로 만든 런타임은 여기서 지원하지 않아요 — DevTools에서 열고 싶은 건 defineLoopy로 만드세요.

출력된 URL을 열고 UI에서 실행을 트리거하세요. 진입점(에이전트, 워크플로우, 팀 중 하나)을 고르고 입력을 JSON으로 넣으면 돼요.

세 개의 패널

타임라인 (왼쪽) — 실행의 모든 스텝을 순서대로 보여줘요. 상태도 함께요: ✓ 완료, ⟳ 실행 중, ✗ 에러. 스텝을 클릭하면 선택돼요.
그래프 (오른쪽 위) — React Flow로 만든 워크플로우/팀의 노드-엣지 뷰예요. .nodes() / .flow()로 선언한 정적 그래프 위에, 지금까지 실제로 지나온 경로가 오버레이돼요.
상세 (오른쪽 아래) — 선택한 스텝이 실제로 한 일을 보여줘요. 모델을 호출했다면 그 프롬프트와 응답, 툴 인자와 결과, 어떤 상태 채널에 썼는지까지요.

타임라인에서 스텝을 선택하면 그래프에서 강조되고 상세 패널이 채워져요. 세 패널은 따로 노는 세 개의 도구가 아니라, 같은 실행을 보여주는 하나로 연결된 뷰예요.

실시간 실행과 스크럽 슬라이더

실행이 진행되는 동안 이벤트가 WebSocket을 통해 브라우저로 스트리밍돼서, 스텝이 끝날 때마다 타임라인과 그래프가 새로고침 없이 갱신돼요.

타임라인 위의 스크럽 슬라이더는 읽기 전용 시간 여행이에요: 실행 중 아무 지점으로나 드래그하면 모든 패널이 그 스텝 시점의 상태로 바뀌어요. 실행 자체에는 영향을 주지 않고요. 슬라이더를 놓거나(또는 끝까지 드래그하면) 다시 실시간으로 실행을 따라가는 상태로 돌아가요.

범위: 읽기 전용 v1과 다음 단계

오늘의 DevTools는 의도적으로 좁아요: 여러분이 트리거한 실행을 관찰하고, 그 히스토리의 어느 지점이든 들여다볼 수 있게 해줘요. 지금은 다음을 지원하지 않아요:

UI에서 중단된 실행을 재개하거나, 임의의 지점부터 리플레이하는 것.
스텝 사이에서 채널 값이 어떻게 바뀌었는지 전체 diff로 보는 것 (상세 패널은 한 스텝이 무엇을 썼는지 보여줄 뿐, 이전/이후 diff는 아니에요).
엣지를 클릭해서 그 위로 지나간 페이로드를 들여다보는 것.
프로덕션 배포를 관찰하는 것 — v1은 로컬 개발 도구이지, 호스팅되는 옵저버빌리티 제품이 아니에요.

이건 계획된 v2의 모습이고, 아직 구현되지 않았어요. loopy의 나머지 부분과 비교해서 이게 어디쯤 있는지는 현황과 로드맵을 참고하세요.

다음 단계

이벤트 소싱과 리플레이 — DevTools가 읽고 있는 그 이벤트 로그예요.
빠른 시작 — 브라우저 없이 같은 이벤트를 리플레이하는 CI 친화적인 방법인 loopy test도 다뤄요.