Spaces:

evalstate
/

presentations

Running

File size: 13,733 Bytes

ce0e171

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="shared/http-diagram.css">
  <style>
    /* Make MCP-Cookie box much larger and prominent */
    .message-session.mcp-cookie {
      padding: 12px 16px;
      border-radius: 12px;
      min-width: 200px;
      background: #f3e5f5;
      border: 3px solid #ab47bc;
      box-shadow: 0 6px 20px rgba(156, 39, 176, 0.35);
    }

    .message-session.mcp-cookie .cookie-label {
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #7b1fa2;
      margin-bottom: 6px;
    }

    .message-session.mcp-cookie .cookie-value {
      font-family: 'SF Mono', Monaco, monospace;
      font-size: 14px;
      font-weight: 700;
      background: white;
      padding: 6px 14px;
      border-radius: 8px;
      border: 2px solid #ce93d8;
      color: #7b1fa2;
      display: inline-block;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .message-session.mcp-cookie .cookie-value.empty {
      color: #9e9e9e;
      border-color: #e0e0e0;
      font-style: italic;
    }

    /* Set-Cookie variation - green themed (server issuing) */
    .message-session.mcp-cookie.set-cookie {
      background: #e8f5e9;
      border-color: #66bb6a;
      box-shadow: 0 6px 20px rgba(76, 175, 80, 0.35);
    }

    .message-session.mcp-cookie.set-cookie .cookie-label {
      color: #2e7d32;
    }

    .message-session.mcp-cookie.set-cookie .cookie-value {
      border-color: #a5d6a7;
      color: #2e7d32;
    }

    /* Request with cookie - blue themed */
    .message.request .message-session.mcp-cookie:not(.set-cookie) {
      background: #e3f2fd;
      border-color: #42a5f5;
      box-shadow: 0 6px 20px rgba(33, 150, 243, 0.35);
    }

    .message.request .message-session.mcp-cookie:not(.set-cookie) .cookie-label {
      color: #1565c0;
    }

    .message.request .message-session.mcp-cookie:not(.set-cookie) .cookie-value {
      border-color: #90caf9;
      color: #1565c0;
    }
  </style>
</head>
<body>
  <div class="canvas-root">
    <div class="diagram">
    <!-- Client -->
    <div class="entity client">
      <div class="entity-box" id="client-box">
        <span>MCP Client</span>
        <span class="entity-status" id="client-status"></span>
      </div>
      <div class="state-badge" id="client-state">
        <div class="badge-title">Cookie Jar</div>
        <div class="empty-state">empty</div>
        <div class="session-id" id="client-session"></div>
        <div class="caps-row" id="client-caps"></div>
      </div>
    </div>

    <!-- Load Balancer -->
    <div class="entity lb">
      <div class="entity-box">LB</div>
    </div>

    <!-- Connection lines -->
    <div class="connection conn-client-lb"></div>
    <div class="connection conn-lb-servers"></div>

    <!-- Server Cluster -->
    <div class="server-cluster">
      <div class="cluster-label">Streamable HTTP (Cookies)</div>
    </div>

    <!-- Server Nodes with session badges to the right -->
    <div class="entity server server-1">
      <div class="entity-box" id="server-1-box">
        <span>Node 1</span>
        <span class="entity-status" id="server-1-status"></span>
      </div>
      <div class="state-badge" id="server-1-state">
        <div class="badge-title">Known Cookie</div>
        <div class="empty-state">none</div>
        <div class="session-id" id="server-1-session"></div>
        <div class="caps-row" id="server-1-caps"></div>
      </div>
    </div>

    <div class="entity server server-2">
      <div class="entity-box" id="server-2-box">
        <span>Node 2</span>
        <span class="entity-status" id="server-2-status"></span>
      </div>
      <div class="state-badge" id="server-2-state">
        <div class="badge-title">Known Cookie</div>
        <div class="empty-state">none</div>
        <div class="session-id" id="server-2-session"></div>
        <div class="caps-row" id="server-2-caps"></div>
      </div>
    </div>

    <div class="entity server server-3">
      <div class="entity-box" id="server-3-box">
        <span>Node 3</span>
        <span class="entity-status" id="server-3-status"></span>
      </div>
      <div class="state-badge" id="server-3-state">
        <div class="badge-title">Known Cookie</div>
        <div class="empty-state">none</div>
        <div class="session-id" id="server-3-session"></div>
        <div class="caps-row" id="server-3-caps"></div>
      </div>
    </div>

    <!-- Message -->
    <div class="message" id="message">
      <div class="message-header">
        <span class="message-type" id="message-type">initialize</span>
        <span class="message-arrow" id="message-arrow">→</span>
      </div>
      <div class="message-detail" id="message-detail">CallToolRequest</div>
      <div class="message-session" id="message-session">MCP-Cookie: (none)</div>
    </div>
  </div>

    <div class="narration" id="narration">
    <span class="step-num" id="step-num">○</span>
    <span id="narration-text">Client uses MCP cookies for session semantics...</span>
  </div>

  </div>

  <script src="shared/animation-config.js"></script>
  <script src="shared/diagram-helpers.js"></script>
  <script src="shared/canvas-scale.js"></script>
  <script>
    const message = document.getElementById('message');
    const messageType = document.getElementById('message-type');
    const messageArrow = document.getElementById('message-arrow');
    const messageDetail = document.getElementById('message-detail');
    const messageSession = document.getElementById('message-session');
    const narration = document.getElementById('narration');
    const narrationText = document.getElementById('narration-text');
    const stepNum = document.getElementById('step-num');
    
    const clientBox = document.getElementById('client-box');
    const clientState = document.getElementById('client-state');
    const clientSession = document.getElementById('client-session');
    const clientCaps = document.getElementById('client-caps');
    
    const server1Box = document.getElementById('server-1-box');
    const server2Box = document.getElementById('server-2-box');
    const server3Box = document.getElementById('server-3-box');
    const server1State = document.getElementById('server-1-state');
    const server2State = document.getElementById('server-2-state');
    const server3State = document.getElementById('server-3-state');
    const server1Session = document.getElementById('server-1-session');
    const server1Caps = document.getElementById('server-1-caps');
    const server2Session = document.getElementById('server-2-session');
    const server2Caps = document.getElementById('server-2-caps');
    const server3Session = document.getElementById('server-3-session');
    const server3Caps = document.getElementById('server-3-caps');


    const messageElements = {
      container: message,
      header: message.querySelector('.message-header'),
      type: messageType,
      arrow: messageArrow,
      detail: messageDetail,
      session: messageSession,
    };

    // Positions (x centers)
    const pos = {
      client: 65,
      lb: 240,
      server1: 470,
      server2: 470,
      server3: 470
    };
    const yClient = 115;
    const yServer1 = 38;
    const yServer2 = 143;
    const yServer3 = 248;


    function setMessagePos(x, y) {
      setMessagePosition(message, x, y);
    }

    function animateMessage(fromX, fromY, toX, toY, duration, callback) {
      animateMessageBetween(message, fromX, fromY, toX, toY, duration, callback);
    }

    function animatePath(waypoints, totalDuration, callback) {
      animatePathBetween(message, waypoints, totalDuration, callback);
    }

    function configMessage(type, arrow, method, detail, sessionText, sessionError, direction) {
      configureMessage(messageElements, {
        type,
        arrow,
        method,
        detail,
        sessionText,
        sessionError,
        direction,
      });
    }

    function buildCookieMarkup(label, value, isEmpty) {
      const valueClass = isEmpty ? 'cookie-value empty' : 'cookie-value';
      return `<div class="cookie-label">${label}</div><div class="${valueClass}">${value}</div>`;
    }

    function resetAll() {
      clientBox.className = 'entity-box';
      server1Box.className = 'entity-box';
      server2Box.className = 'entity-box';
      server3Box.className = 'entity-box';
      clientState.className = 'state-badge';
      server1State.className = 'state-badge';
      server2State.className = 'state-badge';
      server3State.className = 'state-badge';
      // Clear dynamic content
      clientSession.textContent = '';
      clientCaps.innerHTML = '';
      server1Session.textContent = '';
      server1Caps.innerHTML = '';
      server2Session.textContent = '';
      server2Caps.innerHTML = '';
      server3Session.textContent = '';
      server3Caps.innerHTML = '';
      message.className = 'message';
    }

    const steps = [
      // Step 0: Initial state
      {
        setup: () => {
          resetAll();
          stepNum.textContent = '○';
          narrationText.textContent = 'Client and server exchange cookies at the MCP layer';
          narration.className = 'narration';
        },
        animate: (done) => setTimeout(done, ANIMATION.INITIAL_PAUSE),
        after: () => {}
      },
      // Step 1: tools/call → LB → Node 1 (no cookie yet)
      {
        setup: () => {
          configMessage('request', '→', 'tools/call', 'CallToolRequest', buildCookieMarkup('MCP-Cookie', '(none)', true), false, 'right');
          messageSession.classList.add('mcp-cookie');
          setMessagePos(pos.client, yClient);
          stepNum.textContent = '1';
          narrationText.textContent = 'Client sends request without cookie (MCP JSON-RPC layer)';
          narration.className = 'narration request-state';
          clientBox.classList.add('alive', 'active');
        },
        animate: (done) => animatePath(
          [{x: pos.client, y: yClient}, {x: pos.lb, y: yClient}, {x: pos.server1, y: yServer1}],
          ANIMATION.MSG_DURATION,
          done
        ),
        after: () => {
          clientBox.classList.remove('active');
          server1Box.classList.add('alive', 'active');
        }
      },
      // Step 2: tools/call result ← Node 1 issues cookie
      {
        setup: () => {
          configMessage('response', '←', 'tools/call', 'CallToolResult', buildCookieMarkup('Set-MCP-Cookie', 'cookie_4f2', false), false, 'left');
          messageSession.classList.add('mcp-cookie', 'set-cookie');
          setMessagePos(pos.server1, yServer1);
          stepNum.textContent = '2';
          narrationText.textContent = 'Server issues MCP cookie (can be copied to HTTP headers)';
          narration.className = 'narration response-state';
          server1Session.textContent = 'cookie_4f2';
          server1State.classList.add('active');
        },
        animate: (done) => animatePath(
          [{x: pos.server1, y: yServer1}, {x: pos.lb, y: yClient}, {x: pos.client, y: yClient}],
          ANIMATION.MSG_DURATION,
          done
        ),
        after: () => {
          server1Box.classList.remove('active');
          clientSession.textContent = 'cookie_4f2';
          clientState.classList.add('active');
        }
      },
      // Step 3: tools/call → LB → Node 2 (cookie included)
      {
        setup: () => {
          configMessage('request', '→', 'tools/call', 'CallToolRequest', buildCookieMarkup('MCP-Cookie', 'cookie_4f2', false), false, 'right');
          messageSession.classList.add('mcp-cookie');
          setMessagePos(pos.client, yClient);
          stepNum.textContent = '3';
          narrationText.textContent = 'Client returns cookie on the next request';
          narration.className = 'narration request-state';
          clientBox.classList.add('active');
        },
        animate: (done) => animatePath(
          [{x: pos.client, y: yClient}, {x: pos.lb, y: yClient}, {x: pos.server2, y: yServer2}],
          ANIMATION.MSG_DURATION,
          done
        ),
        after: () => {
          clientBox.classList.remove('active');
          server2Box.classList.add('alive', 'active');
        }
      },
      // Step 4: tools/call result ← Node 2 recognizes cookie
      {
        setup: () => {
          configMessage('response', '←', 'tools/call', 'CallToolResult', buildCookieMarkup('MCP-Cookie ✓', 'cookie_4f2', false), false, 'left');
          messageSession.classList.add('mcp-cookie');
          setMessagePos(pos.server2, yServer2);
          stepNum.textContent = '4';
          narrationText.textContent = 'Server uses cookie to maintain session semantics';
          narration.className = 'narration response-state';
          server2Session.textContent = 'cookie_4f2';
          server2State.classList.add('active');
        },
        animate: (done) => animatePath(
          [{x: pos.server2, y: yServer2}, {x: pos.lb, y: yClient}, {x: pos.client, y: yClient}],
          ANIMATION.MSG_DURATION,
          done
        ),
        after: () => {
          server2Box.classList.remove('active');
        }
      },
      // Step 5: Pause before restart
      {
        setup: () => {
          message.className = 'message';
          stepNum.textContent = '✓';
          narrationText.textContent = 'MCP cookies preserve client/server context across requests';
          narration.className = 'narration success-state';
        },
        animate: (done) => setTimeout(done, ANIMATION.ERROR_PAUSE),
        after: () => {}
      }
    ];

    runStepSequence(steps);
    scaleCanvas();
  </script>
</body>
</html>