index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>ADK Multi-Agent Blog Simulation</title>
  <style>
    :root{
      --bg:#f6f7fb;
      --panel:#ffffff;
      --card:#ffffff;
      --text:#1f2937;
      --muted:#6b7280;
      --border:#d1d5db;
      --accent:#2563eb;
      --accent-bg:#dbeafe;
      --ok:#16a34a;
      --retry:#d97706;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:Arial,Helvetica,sans-serif;
      background:var(--bg);
      color:var(--text);
    }
    .app{
      max-width:1200px;
      margin:0 auto;
      padding:24px;
    }
    h1{margin:0 0 8px;font-size:28px}
    .subtitle{color:var(--muted);margin-bottom:18px}
    .controls{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      align-items:center;
      margin-bottom:16px;
    }
    button,select{
      font:inherit;
      padding:10px 14px;
      border-radius:8px;
      border:1px solid var(--border);
      background:#fff;
      color:var(--text);
    }
    button{cursor:pointer}
    button.primary{
      background:var(--accent);
      color:#fff;
      border-color:var(--accent);
    }
    button:disabled{opacity:.5;cursor:not-allowed}
    .spacer{flex:1}
    .grid{
      display:grid;
      grid-template-columns:1fr 50px 1fr 50px 1fr;
      gap:12px;
      align-items:stretch;
    }
    .arrow{
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:28px;
      color:var(--muted);
    }
    .card,.panel{
      background:var(--card);
      border:2px solid var(--border);
      border-radius:14px;
      padding:16px;
      transition:.2s ease;
    }
    .label{
      font-size:12px;
      text-transform:uppercase;
      letter-spacing:.08em;
      color:var(--muted);
      font-weight:700;
    }
    .title{
      margin-top:4px;
      font-size:18px;
      font-weight:700;
    }
    .node{
      border:2px solid var(--border);
      border-radius:10px;
      padding:10px;
      margin-top:10px;
      background:#fff;
      transition:.2s ease;
    }
    .down{
      text-align:center;
      color:var(--muted);
      padding:6px 0 0;
    }
    .loop-note{
      border:2px dashed var(--border);
      border-radius:10px;
      padding:9px;
      margin-top:10px;
      text-align:center;
      font-size:12px;
      color:var(--muted);
      transition:.2s ease;
    }
    .status{
      border:1px solid var(--border);
      border-radius:9px;
      padding:9px;
      margin-top:12px;
      font-size:14px;
    }
    .active{
      border-color:var(--accent)!important;
      background:var(--accent-bg)!important;
      transform:translateY(-2px);
    }
    .ok{border-color:var(--ok)!important}
    .retry{border-color:var(--retry)!important}
    .pulse{animation:pulse .7s ease-in-out infinite alternate}
    @keyframes pulse{from{opacity:.68}to{opacity:1}}
    .panel{margin-top:14px;border-width:1px}
    .panel-head{
      display:flex;
      gap:12px;
      justify-content:space-between;
      align-items:center;
      flex-wrap:wrap;
    }
    .badge{
      border:1px solid var(--border);
      border-radius:999px;
      padding:6px 10px;
      font-size:13px;
    }
    .queue{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:12px;
    }
    .topic{
      border:1px solid var(--border);
      border-radius:999px;
      padding:6px 10px;
      font-size:13px;
      background:#fff;
    }
    .two-col{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:14px;
      margin-top:14px;
    }
    .state-row{
      display:flex;
      justify-content:space-between;
      gap:16px;
      border-bottom:1px solid var(--border);
      padding:8px 0;
      font-size:14px;
    }
    .state-row:last-child{border-bottom:0}
    .mono{font-family:Consolas,monospace}
    .muted{color:var(--muted)}
    .log{
      max-height:230px;
      overflow:auto;
      margin-top:10px;
      font-size:14px;
      line-height:1.5;
    }
    .final{margin-top:14px}
    @media(max-width:850px){
      .grid{grid-template-columns:1fr}
      .arrow{transform:rotate(90deg)}
      .two-col{grid-template-columns:1fr}
    }
    @media(prefers-reduced-motion:reduce){
      .card,.node,.loop-note{transition:none}
      .pulse{animation:none}
    }
  </style>
</head>
<body>
  <div class="app" id="blogSim">
    <h1>ADK Multi-Agent Blog Simulation</h1>
    <div class="subtitle">Watch topics flow through the Blogger root agent, planner validation loop, writer validation loop, and final response.</div>

    <div class="controls">
      <button id="startBtn" class="primary" type="button">Start Simulation</button>
      <button id="pauseBtn" type="button" disabled>Pause</button>
      <button id="resetBtn" type="button">Reset</button>
      <div class="spacer"></div>
      <label>Speed
        <select id="speed">
          <option value="1400">Slow</option>
          <option value="850" selected>Normal</option>
          <option value="420">Fast</option>
        </select>
      </label>
    </div>

    <div class="grid">
      <section id="rootCard" class="card">
        <div class="label">Root Agent</div>
        <div class="title">Blogger</div>
        <p class="muted">Instruction-enforced sequence:</p>
        <div class="mono">1. Planner → 2. Writer → 3. Final</div>
        <div id="rootStatus" class="status">Waiting for topic</div>
      </section>

      <div class="arrow">→</div>

      <section id="plannerCard" class="card">
        <div class="label">LoopAgent · Max 3</div>
        <div class="title">RobustBlogPlanner</div>
        <div id="plannerAgent" class="node">BlogPlanner</div>
        <div class="down">↓ blog_outline</div>
        <div id="outlineValidator" class="node">OutlineValidationChecker</div>
        <div id="plannerLoop" class="loop-note">retry ↻ until OK or 3 iterations</div>
      </section>

      <div class="arrow">→</div>

      <section id="writerCard" class="card">
        <div class="label">LoopAgent · Max 3</div>
        <div class="title">RobustBlogWriter</div>
        <div id="writerAgent" class="node">BlogWriter</div>
        <div class="down">↓ blog_post</div>
        <div id="postValidator" class="node">BlogPostValidationChecker</div>
        <div id="writerLoop" class="loop-note">retry ↻ until OK or 3 iterations</div>
      </section>
    </div>

    <section class="panel">
      <div class="panel-head">
        <div>
          <div class="label">Incoming Topic Queue</div>
          <div id="currentTopic" class="title">No topic active</div>
        </div>
        <div id="iterationBadge" class="badge">Idle</div>
      </div>
      <div id="topicQueue" class="queue"></div>
    </section>

    <div class="two-col">
      <section class="panel" style="margin-top:0">
        <div class="title">State / Output Keys</div>
        <div class="state-row"><span class="mono">blog_outline</span><span id="outlineState" class="muted">empty</span></div>
        <div class="state-row"><span class="mono">validation_result</span><span id="validationState" class="muted">empty</span></div>
        <div class="state-row"><span class="mono">blog_post</span><span id="postState" class="muted">empty</span></div>
      </section>

      <section class="panel" style="margin-top:0">
        <div class="title">Execution Log</div>
        <div id="log" class="log"><div class="muted">Simulation ready.</div></div>
      </section>
    </div>

    <section id="finalCard" class="panel final">
      <div class="label">Final Response</div>
      <div id="finalOutput" class="muted" style="margin-top:8px">Validated blog + 3 alternate titles + 2 tweet-length hooks will appear here.</div>
    </section>
  </div>

  <script>
    (() => {
      const root = document.getElementById('blogSim');
      const $ = id => document.getElementById(id);
      const topics = [
        'ADK Agent Patterns',
        'Context Engineering',
        'Vertex AI Memory',
        'Agentic Coding Workflows',
        'Responsible AI Guardrails'
      ];

      let running = false;
      let paused = false;
      let stopped = false;
      let topicIndex = 0;

      const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
      const delay = () => Number($('speed').value) || 850;

      async function waitStep(mult = 1) {
        let remaining = delay() * mult;
        while (remaining > 0 && !stopped) {
          if (!paused) remaining -= 80;
          await sleep(80);
        }
      }

      function log(msg) {
        const d = document.createElement('div');
        d.textContent = msg;
        $('log').appendChild(d);
        $('log').scrollTop = $('log').scrollHeight;
      }

      function clearActive() {
        root.querySelectorAll('.active,.pulse,.retry,.ok').forEach(el => {
          el.classList.remove('active','pulse','retry','ok');
        });
      }

      function activate(id, status) {
        clearActive();
        const el = $(id);
        if (el) el.classList.add('active','pulse');
        if (status) $('iterationBadge').textContent = status;
      }

      function renderQueue() {
        $('topicQueue').innerHTML = '';
        topics.forEach((t, i) => {
          const span = document.createElement('span');
          span.className = 'topic';
          span.textContent = (i < topicIndex ? '✓ ' : '') + t;
          if (i === topicIndex && running) span.classList.add('active');
          $('topicQueue').appendChild(span);
        });
      }

      async function planner(topic) {
        const iterations = topicIndex % 2 === 0 ? 2 : 1;
        for (let i = 1; i <= iterations; i++) {
          activate('plannerAgent', `Planner iteration ${i}/3`);
          $('rootStatus').textContent = 'Calling planner_tool';
          log(`Planner: generating outline for “${topic}”`);
          await waitStep();

          $('outlineState').textContent = `outline v${i}`;

          activate('outlineValidator', 'Validating outline');
          log('OutlineValidationChecker: checking title, intro, 4–6 sections, conclusion');
          await waitStep();

          if (i < iterations) {
            $('validationState').textContent = 'retry';
            $('outlineValidator').classList.add('retry');
            $('plannerLoop').classList.add('active');
            log('Validation result: retry → LoopAgent starts next iteration');
            await waitStep(.75);
          } else {
            $('validationState').textContent = 'ok';
            $('outlineValidator').classList.add('ok');
            log('Validation result: ok → planner returns control to Blogger');
            await waitStep(.75);
          }
        }
      }

      async function writer(topic) {
        const iterations = topicIndex % 3 === 0 ? 2 : 1;
        for (let i = 1; i <= iterations; i++) {
          activate('writerAgent', `Writer iteration ${i}/3`);
          $('rootStatus').textContent = 'Calling writer_tool';
          log('Writer: producing article from blog_outline');
          await waitStep();

          $('postState').textContent = `draft v${i}`;

          activate('postValidator', 'Validating article');
          log('BlogPostValidationChecker: checking structure and technical clarity');
          await waitStep();

          if (i < iterations) {
            $('validationState').textContent = 'retry';
            $('postValidator').classList.add('retry');
            $('writerLoop').classList.add('active');
            log('Validation result: retry → writer loop repeats');
            await waitStep(.75);
          } else {
            $('validationState').textContent = 'ok';
            $('postValidator').classList.add('ok');
            log('Validation result: ok → writer returns control to Blogger');
            await waitStep(.75);
          }
        }
      }

      async function processTopic(topic) {
        $('currentTopic').textContent = topic;
        $('outlineState').textContent = 'empty';
        $('validationState').textContent = 'empty';
        $('postState').textContent = 'empty';
        $('finalOutput').textContent = 'Processing…';

        activate('rootCard', 'Step 1 · Planner');
        $('rootStatus').textContent = 'Topic received → planner first';
        log(`Blogger received topic: “${topic}”`);
        await waitStep(.8);

        await planner(topic);
        if (stopped) return;

        activate('rootCard', 'Step 2 · Writer');
        $('rootStatus').textContent = 'Planner complete → writer second';
        log('Blogger: planner returned; invoking writer_tool');
        await waitStep(.8);

        await writer(topic);
        if (stopped) return;

        activate('finalCard', 'Step 3 · Final');
        $('rootStatus').textContent = 'Writer complete → final response';
        $('finalOutput').innerHTML =
          `<strong>${topic}</strong><br>✓ Validated blog post<br>✓ 3 alternate titles<br>✓ 2 tweet-length hooks`;
        log('Blogger: assembling final response with titles and hooks');
        await waitStep();

        clearActive();
      }

      async function run() {
        if (running) return;

        running = true;
        paused = false;
        stopped = false;

        $('startBtn').disabled = true;
        $('pauseBtn').disabled = false;
        $('pauseBtn').textContent = 'Pause';

        log('--- Simulation started ---');
        renderQueue();

        while (topicIndex < topics.length && !stopped) {
          renderQueue();
          await processTopic(topics[topicIndex]);
          if (stopped) break;

          topicIndex++;
          renderQueue();
          await waitStep(.5);
        }

        if (!stopped && topicIndex >= topics.length) {
          $('currentTopic').textContent = 'All queued topics complete';
          $('iterationBadge').textContent = 'Complete';
          $('rootStatus').textContent = 'Waiting for next topic';
          log('--- Queue complete ---');
        }

        running = false;
        $('startBtn').disabled = false;
        $('startBtn').textContent =
          topicIndex >= topics.length ? 'Run Again' : 'Start Simulation';
        $('pauseBtn').disabled = true;
      }

      $('startBtn').addEventListener('click', () => {
        if (topicIndex >= topics.length) {
          topicIndex = 0;
          renderQueue();
        }
        run();
      });

      $('pauseBtn').addEventListener('click', () => {
        paused = !paused;
        $('pauseBtn').textContent = paused ? 'Resume' : 'Pause';
        $('iterationBadge').textContent = paused ? 'Paused' : 'Running';
      });

      $('resetBtn').addEventListener('click', () => {
        stopped = true;
        paused = false;
        running = false;
        topicIndex = 0;

        clearActive();

        $('startBtn').disabled = false;
        $('startBtn').textContent = 'Start Simulation';
        $('pauseBtn').disabled = true;
        $('pauseBtn').textContent = 'Pause';

        $('currentTopic').textContent = 'No topic active';
        $('iterationBadge').textContent = 'Idle';
        $('rootStatus').textContent = 'Waiting for topic';
        $('outlineState').textContent = 'empty';
        $('validationState').textContent = 'empty';
        $('postState').textContent = 'empty';

        $('finalOutput').textContent =
          'Validated blog + 3 alternate titles + 2 tweet-length hooks will appear here.';

        $('log').innerHTML =
          '<div class="muted">Simulation reset.</div>';

        renderQueue();
      });

      renderQueue();
    })();
  </script>
</body>
</html>