clone

minesweeper as an mcp server: agents start games, play moves in batches and watch the board

main
mcpsweeper / mcp-app.html
mcp-app.html 4.4K
1<!doctype html>2<html lang="en">3 <head>4 <meta charset="UTF-8" />5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />6 <title>MCPSweeper</title>7 <script type="application/json" id="baked-replay">"BAKED_REPLAY_SLOT"</script>8 </head>9 <body>10 <main class="desktop">11 <section class="window game-window" aria-label="MCPSweeper spectator window">12 <div class="title-bar">13 <div class="title-bar-text"><span aria-hidden="true">💣</span> MCPSweeper</div>14 <div class="title-bar-controls">15 <button type="button" aria-label="Minimize" disabled></button>16 <button type="button" aria-label="Maximize" disabled></button>17 <button type="button" aria-label="Close" disabled></button>18 </div>19 </div>20 <div class="window-body">21 <nav class="menu-bar" aria-label="Application menu">22 <button type="button" class="menu-item"><u>G</u>ame</button>23 <button type="button" class="menu-item"><u>H</u>elp</button>24 </nav>2526 <div class="game-area">27 <section class="game-main" aria-label="Puzzle game">28 <section class="hud sunken-panel" aria-label="Game counters">29 <output id="mine-counter" class="led-counter" aria-label="Unflagged mines">000</output>30 <button id="face-btn" class="face-button" type="button" aria-label="Pause or resume playback">31 <span id="face-icon" class="face-glyph face-playing" aria-hidden="true"></span>32 </button>33 <output id="batch-counter" class="led-counter" aria-label="Agent batches">000</output>34 </section>3536 <section class="board-column" aria-label="Puzzle board">37 <div class="board-frame sunken-panel">38 <div class="board-stage">39 <canvas id="game" width="768" height="768" aria-label="MCPSweeper field"></canvas>40 </div>41 </div>42 <div class="timeline-row board-timeline">43 <label for="replay-slider">Batch</label>44 <input id="replay-slider" type="range" min="0" max="0" value="0" step="1" />45 <output id="replay-position" for="replay-slider">000 / 000</output>46 </div>47 <div class="status-bar">48 <p id="status-text" class="status-bar-field intent-field">Waiting for the agent…</p>49 <p id="expiry-note" class="status-bar-field expiry-field" hidden></p>50 <p id="connection-text" class="status-bar-field connection-field">PREVIEW</p>51 </div>52 </section>53 </section>5455 <aside class="side-panel" aria-label="Batch history pane">56 <section class="replay-panel sunken-panel" aria-label="Game replay">57 <div class="replay-heading">58 <strong>Batch history</strong>59 <output id="comparison-phase">AFTER</output>60 </div>61 <div class="intent-header" aria-hidden="true">62 <span>Batch</span><span>Δ</span><span>Agent intent</span>63 </div>64 <ol id="intent-log" class="intent-log" aria-label="Agent intent log">65 <li class="intent-empty">Waiting for batch history…</li>66 </ol>67 </section>6869 <input70 id="zoom-slider"71 class="zoom-slider"72 type="range"73 min="1"74 max="4"75 value="3"76 step="0.25"77 aria-label="Board zoom"78 aria-valuetext="300%"79 title="Board zoom: 300%"80 />8182 <nav class="controls" aria-label="Playback controls">83 <button id="pause-btn" type="button">Replay</button>84 <button id="compare-btn" type="button">Compare: On</button>85 <button id="speed-btn" type="button">Speed 1×</button>86 <button id="fit-btn" type="button">Fit board</button>87 <a id="replay-link" class="replay-link" href="/preview" target="_blank" rel="noopener" aria-disabled="true">88 Preparing replay link…89 </a>90 </nav>91 </aside>92 </div>93 </div>94 </section>95 </main>96 <script type="module" src="/src/view.ts"></script>97 </body>98</html>