Upload menu-guide.html with huggingface_hub

bed421b verified 24 days ago

27.7 kB

	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>BADA Terminal — Detailed Menu & Functional Specification</title>
	<meta name="description" content="BADA Terminal의 각 화면별 메뉴 구조, 시각적 조작법 및 기능적 상세 설명 매뉴얼">

	<!-- Fonts -->
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Outfit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

	<!-- Styling -->
	<style>
	:root {
	--bg: #1e1e2e;
	--mantle: #181825;
	--crust: #11111b;
	--text: #cdd6f4;
	--subtext: #a6adc8;

	--mauve: #cba6f7;
	--blue: #89b4fa;
	--lavender: #b4befe;
	--green: #a6e3a1;
	--yellow: #f9e2af;
	--red: #f38ba8;
	--peach: #fab387;
	--teal: #94e2d5;

	--surface0: #313244;
	--surface1: #45475a;
	--surface2: #585b70;
	--overlay0: #6c7086;
	--border: rgba(255, 255, 255, 0.06);
	--glass-bg: rgba(24, 24, 37, 0.75);
	--glass-border: rgba(255, 255, 255, 0.05);
	--card-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
	--transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	}

	body.light-theme {
	--bg: #eff1f5;
	--mantle: #e6e9ef;
	--crust: #dce0e8;
	--text: #4c4f69;
	--subtext: #5c5f77;

	--mauve: #8839ef;
	--blue: #1e66f5;
	--lavender: #7287fd;
	--green: #40a02b;
	--yellow: #df8e1d;
	--red: #d20f39;
	--peach: #fe640b;
	--teal: #179287;

	--surface0: #ccd0da;
	--surface1: #bcc0cc;
	--surface2: #acb0be;
	--overlay0: #8c8fa1;
	--border: rgba(0, 0, 0, 0.06);
	--glass-bg: rgba(230, 233, 239, 0.85);
	--glass-border: rgba(0, 0, 0, 0.08);
	--card-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.08);
	}

	* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	}

	html, body {
	width: 100%;
	height: 100%;
	background-color: var(--bg);
	color: var(--text);
	font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
	overflow: hidden;
	transition: background-color 0.3s ease, color 0.3s ease;
	}

	#app-layout {
	display: flex;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	}

	/* Sidebar Navigation */
	#sidebar {
	width: 320px;
	height: 100%;
	background: var(--mantle);
	border-right: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	}

	#sidebar-header {
	padding: 24px;
	border-bottom: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	gap: 12px;
	}

	.brand-title {
	font-size: 20px;
	font-weight: 800;
	background: linear-gradient(135deg, var(--mauve), var(--lavender));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	letter-spacing: -0.5px;
	}

	.brand-subtitle {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: var(--subtext);
	}

	#sidebar-menu {
	flex: 1;
	overflow-y: auto;
	padding: 16px 12px;
	}

	.menu-group {
	margin-bottom: 20px;
	}

	.menu-group-title {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: var(--overlay0);
	padding-left: 12px;
	margin-bottom: 8px;
	}

	.menu-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 8px;
	color: var(--subtext);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: var(--transition);
	margin-bottom: 2px;
	}

	.menu-item:hover {
	background: var(--surface0);
	color: var(--text);
	}

	.menu-item.active {
	background: rgba(203, 166, 247, 0.15);
	color: var(--mauve);
	font-weight: 600;
	}

	.menu-item-icon {
	font-size: 16px;
	width: 20px;
	text-align: center;
	}

	#sidebar-footer {
	padding: 16px 20px;
	border-top: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--crust);
	}

	.theme-toggle-btn {
	background: var(--surface0);
	border: 1px solid var(--surface1);
	color: var(--text);
	width: 32px;
	height: 32px;
	border-radius: 6px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--transition);
	}

	.theme-toggle-btn:hover {
	background: var(--surface1);
	border-color: var(--mauve);
	color: var(--mauve);
	}

	.version-tag {
	font-size: 11px;
	font-family: 'JetBrains Mono', monospace;
	color: var(--overlay0);
	background: var(--surface0);
	padding: 3px 8px;
	border-radius: 4px;
	}

	/* Main Content */
	#content-container {
	flex: 1;
	height: 100%;
	overflow-y: auto;
	background: var(--bg);
	padding: 40px 60px;
	scroll-behavior: smooth;
	}

	.doc-section {
	display: none;
	animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	max-width: 900px;
	margin: 0 auto;
	}

	.doc-section.active {
	display: block;
	}

	@keyframes fadeIn {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: translateY(0); }
	}

	.section-header {
	margin-bottom: 32px;
	border-bottom: 1px solid var(--border);
	padding-bottom: 20px;
	}

	.section-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: var(--mauve);
	background: rgba(203, 166, 247, 0.12);
	padding: 4px 10px;
	border-radius: 99px;
	margin-bottom: 12px;
	}

	h1 {
	font-size: 32px;
	font-weight: 800;
	color: var(--text);
	letter-spacing: -0.8px;
	}

	p.section-desc {
	font-size: 15px;
	color: var(--subtext);
	margin-top: 8px;
	line-height: 1.5;
	}

	h2 {
	font-size: 20px;
	font-weight: 700;
	color: var(--text);
	margin-top: 36px;
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	gap: 10px;
	}

	h2::before {
	content: '';
	display: inline-block;
	width: 4px;
	height: 18px;
	background: var(--mauve);
	border-radius: 2px;
	}

	ul.doc-list {
	list-style-type: none;
	margin: 16px 0;
	}

	ul.doc-list li {
	position: relative;
	padding-left: 24px;
	font-size: 14.5px;
	color: var(--subtext);
	line-height: 1.7;
	margin-bottom: 12px;
	}

	ul.doc-list li::before {
	content: '✦';
	position: absolute;
	left: 4px;
	color: var(--mauve);
	font-size: 12px;
	}

	.callout {
	border-left: 4px solid var(--mauve);
	background: rgba(203, 166, 247, 0.04);
	padding: 18px;
	border-radius: 0 8px 8px 0;
	margin: 20px 0;
	display: flex;
	gap: 14px;
	}

	.callout-icon {
	font-size: 20px;
	line-height: 1;
	}

	.callout-content {
	flex: 1;
	}

	.callout-title {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--text);
	margin-bottom: 4px;
	}

	.callout-text {
	font-size: 13.5px;
	color: var(--subtext);
	margin: 0;
	line-height: 1.5;
	}

	.spec-block {
	background: var(--mantle);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 24px;
	margin: 24px 0;
	}

	.spec-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--text);
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	gap: 8px;
	}

	.spec-desc {
	font-size: 13.5px;
	color: var(--subtext);
	line-height: 1.6;
	}

	.shortcut-table {
	width: 100%;
	border-collapse: collapse;
	margin: 16px 0;
	}

	.shortcut-table th, .shortcut-table td {
	border: 1px solid var(--border);
	padding: 10px 14px;
	font-size: 13.5px;
	}

	.shortcut-table th {
	background: var(--crust);
	color: var(--text);
	font-weight: 600;
	}

	.shortcut-key {
	font-family: 'JetBrains Mono', monospace;
	background: var(--surface0);
	color: var(--mauve);
	padding: 2px 6px;
	border-radius: 4px;
	font-weight: 600;
	}
	</style>
	</head>
	<body>

	<div id="app-layout">

	<!-- Sidebar -->
	<aside id="sidebar">
	<div id="sidebar-header">
	<div class="brand-title">📋 UI Menu Guide</div>
	<div class="brand-subtitle">Functional Specifications</div>
	</div>
	<nav id="sidebar-menu">
	<div class="menu-group">
	<div class="menu-group-title">기본 인터페이스</div>
	<div class="menu-item active" data-target="ui-terminal">
	<span class="menu-item-icon">📺</span> 터미널 & 메인 제어
	</div>
	<div class="menu-item" data-target="ui-designer">
	<span class="menu-item-icon">🖌️</span> 워크플로우 디자이너
	</div>
	<div class="menu-item" data-target="ui-monitor">
	<span class="menu-item-icon">📡</span> 워크플로우 실시간 모니터
	</div>
	</div>
	<div class="menu-group">
	<div class="menu-group-title">고급 기능 모듈</div>
	<div class="menu-item" data-target="ui-scheduler">
	<span class="menu-item-icon">📆</span> 배치 스케줄러 관리
	</div>
	<div class="menu-item" data-target="ui-harness">
	<span class="menu-item-icon">🛡️</span> 검증 하네스 통제
	</div>
	<div class="menu-item" data-target="ui-knowledge">
	<span class="menu-item-icon">💡</span> 지식 그래프 & 위키
	</div>
	<div class="menu-item" data-target="ui-profiles">
	<span class="menu-item-icon">👤</span> 에이전트 및 설정
	</div>
	<div class="menu-item" data-target="ui-loop-builder">
	<span class="menu-item-icon">🔄</span> 루프 빌더 위자드
	</div>
	<div class="menu-item" data-target="ui-loop-dashboard">
	<span class="menu-item-icon">📈</span> 루프 대시보드 & 이력
	</div>
	</div>
	</nav>
	<div id="sidebar-footer">
	<button class="theme-toggle-btn" id="theme-toggle">🌓</button>
	<span class="version-tag">UI Spec</span>
	</div>
	</aside>

	<!-- Content -->
	<main id="content-container">

	<!-- Section: UI Terminal -->
	<section id="ui-terminal" class="doc-section active">
	<div class="section-header">
	<span class="section-badge">Main Console</span>
	<h1>터미널 & 메인 제어 뷰</h1>
	<p class="section-desc">사용자와 에이전트가 쉘 세션을 실시간으로 인터랙션하는 최상위 핵심 제어 화면입니다.</p>
	</div>

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

	<h2>주요 단축키 제어</h2>
	<table class="shortcut-table">
	<thead>
	<tr>
	<th>기능</th>
	<th>단축키</th>
	<th>설명</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td><strong>에디터 슬라이드 토글</strong></td>
	<td><span class="shortcut-key">Ctrl + E</span></td>
	<td>우측의 소스코드 인스펙터 패널을 즉각 열고 닫습니다.</td>
	</tr>
	<tr>
	<td><strong>강제 취소 (Force Abort)</strong></td>
	<td><span class="shortcut-key">Ctrl + Shift + K</span></td>
	<td>작동 중인 전체 PTY 세션과 자식 프로세스를 일괄 강제 종료합니다.</td>
	</tr>
	<tr>
	<td><strong>단축키 전체 설명 팝업</strong></td>
	<td><span class="shortcut-key">F1</span></td>
	<td>BADA 내부에 셋업된 글로벌 메뉴 단축키 오버레이 팝업을 호출합니다.</td>
	</tr>
	</tbody>
	</table>
	</section>

	<!-- Section: UI Designer -->
	<section id="ui-designer" class="doc-section">
	<div class="section-header">
	<span class="section-badge">Workflow Designer</span>
	<h1>워크플로우 디자이너</h1>
	<p class="section-desc">노드와 방향성 엣지를 결합하여 복합 루프 시나리오를 그래픽 인터페이스로 저작하는 캔버스입니다.</p>
	</div>

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

	<h2>노드 세부 속성 제어</h2>
	<div class="spec-block">
	<div class="spec-title">⚙️ Agent Node 속성 카드</div>
	<div class="spec-desc">
	해당 노드를 실행할 에이전트의 프로필 ID(예: <code>ralph-agent</code>), 최대 재시도 카운트(Max Agent Runs), 실행 제한 격리 정책(Git Worktree 활성화 여부)을 시각 인터페이스로 셋팅합니다.
	</div>
	</div>
	</section>

	<!-- Section: UI Monitor -->
	<section id="ui-monitor" class="doc-section">
	<div class="section-header">
	<span class="section-badge">Real-time Monitor</span>
	<h1>워크플로우 실시간 모니터</h1>
	<p class="section-desc">구동 중인 워크플로우의 실행 노드 추적, 일시 중지 및 진화 로그를 동적으로 관측하는 화면입니다.</p>
	</div>

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

	<h2>제어 액션 판넬 (Control Bar)</h2>
	<p>실행 오작동 징후 발견 혹은 예산 초과로 Paused 상태에 놓였을 때 대시보드에서 작동하는 물리 제어판입니다.</p>
	<table>
	<thead>
	<tr>
	<th>제어 버튼</th>
	<th>동작 방식</th>
	<th>내부 프로세스 처리</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td><strong>Pause (일시 중지)</strong></td>
	<td>상태를 즉시 Paused로 고정</td>
	<td>PTY의 입력을 임시 블로킹하고 로그 파일 디스크립터를 닫음</td>
	</tr>
	<tr>
	<td><strong>Resume (재개)</strong></td>
	<td>스케줄 복구 및 이어하기</td>
	<td>로그 FD를 append 모드로 새로 열고 다음 보류 노드 트리거</td>
	</tr>
	<tr>
	<td><strong>Kill (강제 파괴)</strong></td>
	<td>실행 즉시 폭파 정리</td>
	<td>스폰된 모든 PTY 프로세스를 SIGKILL하고 브랜치 롤백 후 Failed 종료</td>
	</tr>
	</tbody>
	</table>
	</section>

	<!-- Section: UI Scheduler -->
	<section id="ui-scheduler" class="doc-section">
	<div class="section-header">
	<span class="section-badge">Batch Scheduler</span>
	<h1>배치 스케줄러 관리 뷰</h1>
	<p class="section-desc">정기적 빌드 및 자동화 배치를 관리하고 순차적 단계를 설정하는 제어판입니다.</p>
	</div>

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

	<!-- Section: UI Harness -->
	<section id="ui-harness" class="doc-section">
	<div class="section-header">
	<span class="section-badge">Harness Manager</span>
	<h1>검증 하네스 통제 뷰</h1>
	<p class="section-desc">로컬 빌드 검증을 관리하고, 실패 에러 기록을 통해 에이전트의 오작동 롤백 상태를 통제합니다.</p>
	</div>

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

	<!-- Section: UI Knowledge -->
	<section id="ui-knowledge" class="doc-section">
	<div class="section-header">
	<span class="section-badge">Knowledge base</span>
	<h1>지식 그래프 & 위키 뷰</h1>
	<p class="section-desc">도메인 텍스트와 코드 참조가 그물망 형태로 결합된 시각 그래프 및 위키 에디터 화면입니다.</p>
	</div>

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

	<!-- Section: UI Profiles -->
	<section id="ui-profiles" class="doc-section">
	<div class="section-header">
	<span class="section-badge">Profiles & Settings</span>
	<h1>에이전트 프로필 및 환경설정</h1>
	<p class="section-desc">에이전트 성격(Persona), 사용할 모델 규격, BADA 데몬의 포트와 외부 API 바인딩을 통제합니다.</p>
	</div>

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

	<h2>BADA 일반 환경 설정</h2>
	<p>어플리케이션의 기본 설정 및 Claude Code CLI 바이너리 위치를 직접 지정합니다.</p>
	<ul class="doc-list">
	<li><strong>테마 모드 설정</strong>: Dark 테마 (Catppuccin Mocha), Light 테마 (Catppuccin Latte) 스위치.</li>
	<li><strong>Claude CLI Binary Path</strong>: 글로벌 node 패키지 경로를 재매핑하거나 수동 오프라인 바이너리 절대 경로를 저장합니다.</li>
	<li><strong>Port & Connection Bridges</strong>: 로컬 데몬 포트번호 및 로컬 SQLite DB 파일의 저장 절대 경로를 텍스트박스로 변경 및 연동 테스트(Test Connection) 지원.</li>
	</ul>
	</section>

	<!-- Section: UI Loop Builder -->
	<section id="ui-loop-builder" class="doc-section">
	<div class="section-header">
	<span class="section-badge">Loop Orchestrator</span>
	<h1>루프 빌더 위자드 (loop-builder.html)</h1>
	<p class="section-desc">자연어 입력 또는 템플릿 선택을 통해 Closed-Loop 에이전트 구동 룰 및 가드레일을 5단계로 설계하는 화면입니다.</p>
	</div>

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

	<!-- Section: UI Loop Dashboard -->
	<section id="ui-loop-dashboard" class="doc-section">
	<div class="section-header">
	<span class="section-badge">Loop Monitoring</span>
	<h1>루프 대시보드 & 이력 (loop-dashboard.html / loop-history.html)</h1>
	<p class="section-desc">현재 실행중인 루프의 세션을 모니터링하고 과거의 루프 실행 로그 및 이력을 탐색합니다.</p>
	</div>

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

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

	</main>
	</div>

	<script>
	// Navigation switching
	const menuItems = document.querySelectorAll('.menu-item');
	const sections = document.querySelectorAll('.doc-section');
	const content = document.getElementById('content-container');

	menuItems.forEach(item => {
	item.addEventListener('click', () => {
	menuItems.forEach(i => i.classList.remove('active'));
	item.classList.add('active');

	sections.forEach(s => s.classList.remove('active'));
	const target = item.getAttribute('data-target');
	const targetSec = document.getElementById(target);
	if (targetSec) {
	targetSec.classList.add('active');
	content.scrollTop = 0;
	}
	});
	});

	// Theme toggle
	const themeToggle = document.getElementById('theme-toggle');
	themeToggle.addEventListener('click', () => {
	document.body.classList.toggle('light-theme');
	});
	</script>
	</body>
	</html>