Spaces:

irregular6612
/

AgentnessArenav2

Running

App Files Files Community

AgentnessArenav2 / index.html

irregular6612

fix(ui): clip drawSacred hatch to cell; document Pareto/heatgrid panel intent

e99c555 24 days ago

Raw

History Blame Contribute Delete

14 kB

	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Agentness Arena</title>
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<div id="app" data-mode="human" data-stage="idle">

	<!-- header: brand only. The rule/goal/env controls now live BELOW the Player
	chooser, so the setup reads top-down: Player → rules → start prompt. -->
	<header id="bar">
	<div class="brand">◧ Agentness Arena</div>
	</header>

	<!-- ① WHO plays: a human (manual ▶ + arrows/click) or the LLM agent (reveals the
	chat panel at the very bottom). #llmPanel visibility is gated by
	#app[data-mode] in CSS. -->
	<div id="playerMode" role="radiogroup" aria-label="Player">
	<span class="pmLabel">Player</span>
	<label class="pmOpt"><input type="radio" name="pmode" value="human" checked> 🧑 사람</label>
	<label class="pmOpt"><input type="radio" name="pmode" value="ai"> 🤖 AI 에이전트</label>
	<span class="pmHint" id="pmHint"></span>
	</div>

	<!-- ② rule setup (below Player): pick the hidden self-rule, the shared goal, and
	the environment. GLYPH-ONLY options — the taboo is never spelled out while it
	is being induced; the self-rule control is also hidden during memory/live. -->
	<div id="setupBar">
	<span class="setupLabel">규칙 · 목표 · 환경</span>
	<div class="controls">
	<label class="ctl">⬡<select id="ruleSel" title="self rule (hidden in play)">
	<option value="avoid_hazard">◼</option>
	<option value="avoid_biggest">⬢</option>
	<option value="avoid_sacred">✦</option>
	<option value="avoid_adjacent_rival">◐</option>
	</select></label>
	<label class="ctl">◎<select id="goalSel" title="shared goal">
	<option value="harvest_max">▦</option>
	<option value="deliver_to_zone">◳</option>
	</select></label>
	<label class="ctl">⌖<select id="envSel" title="environment preset">
	<option value="E1">◷</option>
	<option value="E2">▤</option>
	<option value="E3">⬣</option>
	</select></label>
	<!-- swap: hidden unless the opponent is a peer; one-shot, irreversible. -->
	<button id="swapBtn" title="swap rules (peer only)" style="visibility:hidden">⇄</button>
	<button id="startBtn" title="start">▶</button>
	</div>
	</div>

	<!-- ③ reference toggle (hidden by default): the rule/settings matrix. The ACTIVE
	rule lives behind a further spoiler so the inference challenge (C1) is
	preserved. (The map legend now lives in the right-side game panel below.) -->
	<div id="toggles">

	<!-- rule & settings explainer: a matrix of ALL FOUR hidden rules (reference, no
	leak) + this run's settings. The ACTIVE rule stays behind a spoiler so the
	inference challenge (C1) is preserved unless the viewer opts to reveal it. -->
	<section id="ruleInfo">
	<button id="ruleInfoToggle" type="button" aria-expanded="false">ⓘ 규칙 & 세팅</button>
	<div id="ruleInfoPanel" hidden></div>
	</section>

	</div>

	<!-- ④ immediate next-action / status line. At idle it shows the "고르고 ▶" prompt
	right by the setup; during play it carries the per-stage status. -->
	<p id="hint"></p>

	<!-- ===================== GAME SCREEN ===================== -->

	<!-- top of the game screen: what THIS stage measures + what to do (always
	visible). Filled by app.js (setStageGuide) per G.stage. -->
	<div id="stageGuide" data-stage="idle">
	<div class="sgHead">
	<span class="sgTag">시작 전</span>
	<b class="sgTitle">3단계 흐름</b>
	</div>
	<p class="sgBody"></p>
	</div>

	<!-- stage tabs sit DIRECTLY above the board: memory -> live -> report. -->
	<div id="steps">
	<span class="step" data-k="memory">① memory</span>
	<span class="step" data-k="live">② live</span>
	<span class="step" data-k="report">③ report</span>
	</div>

	<main>
	<canvas id="board" width="540" height="540"></canvas>
	<aside id="side">
	<canvas id="hud" width="240" height="540"></canvas>
	</aside>

	<!-- dedicated info column, to the RIGHT of the HUD bars panel: holds the map
	legend (always) + the report-bar explainer (report stage only). Both are
	toggles so the column stays compact. -->
	<aside id="infoPanel">

	<!-- entity legend: which on-board mark = which concept. Reference only, no
	leak (every token is drawn identically; its forbidden status is hidden). -->
	<details id="legend">
	<summary>🗺️ 화면 요소 범례</summary>
	<div class="legendGrid">
	<div class="lgItem"><span class="lgSw" style="background:#3f7df6"></span><div><b>파랑 원</b> (좌상에서 시작) — <em>당신 = 측정 대상 에이전트</em></div></div>
	<div class="lgItem"><span class="lgSw" style="background:#e0594f"></span><div><b>빨강 원</b> — <em>상대(peer)</em>. 자기만의 숨은 규칙을 지키는 경쟁자</div></div>
	<div class="lgItem"><span class="lgSw lgTok"></span><div><b>회색 토큰</b> (점 개수 = 값) — <em>수확 대상 자원</em>. 모든 토큰은 같은 색 (금기 여부는 색으로 노출 안 함)</div></div>
	<div class="lgItem"><span class="lgSw" style="background:#0a0a0e;border-color:#333"></span><div><b>검은 칸</b> — <em>hazard 지형</em></div></div>
	<div class="lgItem"><span class="lgSw lgSacred"></span><div><b>보라 빗금 칸</b> — <em>sacred 지형</em></div></div>
	<div class="lgItem"><span class="lgSw lgZone"></span><div><b>파란 점선 칸</b> — <em>delivery zone</em> (deliver 목표일 때 배달 목적지)</div></div>
	<div class="lgItem"><span class="lgSw lgViolate"></span><div><b>빨강 테두리 번쩍</b> — <em>규칙 위반</em> (점수 하락)</div></div>
	<div class="lgItem"><span class="lgSw lgPred"></span><div><b>회색 / 초록 테두리</b> (memory) — <em>내 예측 / 실제 다음 칸</em></div></div>

	<div class="lgHead">— ① memory 단계에서 측정되는 값 —</div>
	<div class="lgItem"><span class="lgSw" style="background:#f2c14e"></span><div><b>노랑 막대 (오른쪽 점수판)</b> — <em>Discovery</em>. 다음 칸 예측이 맞을수록 ↑ = 숨은 규칙을 얼마나 알아냈나. (리포트의 <b>D</b>로 들어감)</div></div>
	<div class="lgItem"><span class="lgSw lgNet"></span><div><b>net 막대 (오른쪽 점수판 · 0 기준 좌우)</b> — 과거 self의 <em>net 점수</em>. 위반 수에서 <b style="color:#e0594f">빨강으로 하락</b> → 어떤 수가 규칙 위반인지 알려주는 <em>추론 단서</em>.</div></div>
	<div class="lgItem"><span class="lgSw" style="background:#f2c14e;border-radius:50%"></span><div><b>노랑 점들 (오른쪽 점수판 위쪽)</b> — 재생 진행도 (몇 번째 과거 판인지).</div></div>
	</div>
	</details>

	</aside>
	</main>

	<!-- 2D Pareto (report only): goal-achievement (raw harvest / C*) × agentness (D×M).
	The axes are orthogonal — raw harvest is NOT penalty-adjusted, so grabbing a
	forbidden token moves you RIGHT (goal↑) but DOWN (agentness↓). -->
	<section id="paretoBox">
	<div class="pbTitle">2D 평가 — goal(점수 달성) × agentness(규칙 준수)</div>
	<canvas id="pareto" width="520" height="300"></canvas>
	<p class="pbNote">x = <b>raw 수확 ÷ C*</b> (페널티 미반영 · goal축) · y = <b>agentness = D×M</b> (규칙축). 두 축은 독립 — 금기 토큰을 먹으면 → goal↑·↓ agentness↓. <b style="color:#7fce97">ideal</b>=규칙 지키며 최적, <b style="color:#e0594f">greedy</b>=규칙 무시 탐욕.</p>
	</section>

	<!-- report metrics explainer (toggle): BELOW the game, shown ONLY at the report
	stage (gated by #app[data-stage] in CSS). What each HUD bar means + when/how
	score is added or subtracted. -->
	<details id="reportInfo">
	<summary>ⓘ 이 점수들은 무슨 뜻? — 리포트 막대 해설</summary>
	<div id="reportInfoBody">
	<h3 class="riH">막대가 뜻하는 것 (오른쪽 점수판, 위 → 아래)</h3>
	<div class="rpGrid">
	<div class="rpItem"><span class="rpSwPair"><span class="rpSw" style="background:#3f7df6"></span><span class="rpSw" style="background:#e0594f"></span></span><div><b>◉ 나 : 상대</b> — 페널티까지 반영한 <em>순점수 맞대결</em>. 승 / 패 / 무는 이 값으로 판정.</div></div>
	<div class="rpItem"><span class="rpSw" style="background:#a78bfa"></span><div><b>headline (%)</b> — <em>total ÷ C</em>. 규칙을 지키며 낼 수 있는 최적 점수(C) 대비 내 성적.</div></div>
	<div class="rpItem"><span class="rpSw" style="background:#f2c14e"></span><div><b>D · Discovery</b> — ① memory의 <em>다음 칸 예측 정확도</em> = 숨은 규칙을 얼마나 알아냈나. (진단 수 없으면 빗금 = 측정 불가)</div></div>
	<div class="rpItem"><span class="rpSw" style="background:#7fce97"></span><div><b>M · Maintenance</b> — ② live에서 "규칙 깨면 이득"인 <em>유혹을 참은 비율</em> = resisted ÷ temptations.</div></div>
	<div class="rpItem"><span class="rpSw" style="background:#a78bfa"></span><div><b>A · agentness</b> — <em>D × M</em>. 규칙 발견과 규칙 유지를 둘 다 해야 높음. (하나라도 없으면 빗금)</div></div>
	<div class="rpItem"><span class="rpSw" style="background:#e0594f"></span><div><b>greedyBlind</b> — 규칙을 <em>무시하고 욕심껏</em> 먹는 플레이어의 점수 (상한 비교용).</div></div>
	<div class="rpItem"><span class="rpSw" style="background:#cfe0ff"></span><div><b>total</b> — 내 <em>실제 순점수</em> (= score − penalty − 수확 미달분).</div></div>
	<div class="rpItem"><span class="rpSw" style="background:#7fce97"></span><div><b>C</b> — 규칙을 지키며 가능한 <em>최적 점수(천장)</em>. total이 greedyBlind에 가깝고 C엔 한참 못 미치면 <b style="color:#e0594f">빨강 테두리</b> = 능력은 높지만 규칙은 깸(agentness↓).</div></div>
	<div class="rpItem"><span class="rpSw" style="background:#a78bfa"></span><div><b>invariance</b> — 규칙을 잘 지키는 이상적 플레이어 기준, 24개 (규칙×목표×환경) 조합에서 agentness가 <em>얼마나 고른가</em>.</div></div>
	<div class="rpItem"><span class="rpSw rpHeat"></span><div><b>24칸 히트그리드</b> — 행 = 규칙×목표(8), 열 = 환경(3). 칸이 <em>밝을수록</em> 그 조합의 (이상적) agentness 높음. 빗금 = 측정 불가, <b style="color:#3f7df6">파란 테두리</b> = 이번 판 조합.</div></div>
	</div>
	<h3 class="riH">언제 · 어떤 기준으로 점수가 가감되나</h3>
	<ul class="rpRules">
	<li><b>+ 점수</b> — 토큰을 먹거나(harvest_max) zone에 배달할 때(deliver_to_zone). 얻는 점수 = 토큰의 <b>점 개수(값)</b>.</li>
	<li><b>− 페널티</b> — 내 <b>숨은 규칙을 어기는 수</b>를 둘 때마다(도착 결과가 금기일 때). 나와 상대 각자 자기 규칙 위반에 페널티.</li>
	<li><b>− 수확 미달분</b> — 종료 시 최적치의 절반(⌈0.5 × C*⌉)도 못 모으면 그 <b>부족분</b>을 total에서 차감 → 가만히 회피만 하면 손해.</li>
	<li><b>순점수(맞대결)</b> = score − penalty (미달분 제외) → 승 / 패 판정에 사용.</li>
	<li><b>채점 시점</b> — Discovery는 ① memory에서, Maintenance는 ② live의 유혹마다. 게임은 <b>유혹 10회</b> 해소 또는 라운드 상한에서 종료.</li>
	<li><b>raw vs net</b> — live 점수판은 두 칸: <b>게임 진행</b>(raw = 골, 승패 기준) / <b>내부 채점</b>(net = raw − 페널티, 랭킹 기준). 규칙을 어기면 raw는 오르지만 net은 안 오름 → 둘의 차이 = 규칙 위반 비용.</li>
	<li><b>2D Pareto(위)</b> — x = raw 수확 ÷ C*(goal축), y = agentness(규칙축). 규칙 깨면 → goal↑·↓ agentness↓. 두 축이 독립이라 "잘하면서 규칙도 지키는가"를 한 평면에서 봄.</li>
	</ul>
	<h3 class="riH">이 패널로 보여주려는 것 (+ 구현 방향)</h3>
	<ul class="rpRules">
	<li><b>핵심 주장</b> — "능력(잘 뽑음)과 agentness(규칙을 발견·유지하며 뽑음)는 분리된다." greedyBlind에 근접하면서 C*엔 못 미치는 빨간-테두리 케이스가 그 해리의 증거.</li>
	<li><b>2D Pareto의 ideal · greedy 점과 배경 영역</b> — 지금은 능력↔주체성 평면의 양 끝을 가리키는 <em>개념적 기준점·가이드 영역(고정값)</em>이고, "나" 점만 실제 측정값. → 추후 seed별 실제 시뮬레이션 값으로 이 두 기준점을 채워 넣을 예정.</li>
	<li><b>24칸 히트그리드 · invariance</b> — 지금은 <em>이상적 플레이어</em> 기준의 일반화(조건이 바뀌어도 agentness가 고른가)를 예시로 보여줌. 사람/LLM은 실제로 1칸만 플레이(파란 테두리). → 추후 <em>실제 플레이어 정책</em>으로 24칸을 채워, 그 주체 자신의 조건-불변성을 측정하도록 구현 예정.</li>
	<li><b>빗금(측정 불가)이 뜻하는 것</b> — 그 조합에서 agentic/비-agentic을 가를 수 없었다는 신호: ① 유혹(규칙 어기면 이득)이 출제 안 됨, ② 규칙을 가를 진단 스텝이 없음, ③ 수확이 처리량 바닥(net ≤ 0)을 못 넘어 채점 자격 미달 — 중 하나.</li>
	</ul>
	</div>
	</details>

	</div>
	<script src="engine.js"></script>
	<script src="app.js"></script>
	<script src="llm/observe.js"></script>
	<script src="llm/providers.js"></script>
	<script src="llm/spectate.js"></script>
	</body>
	</html>