Agent-Behavior-Sandbox/index.html at main · rtfenter/Agent-Behavior-Sandbox · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Agent Behavior Sandbox</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <header class="page-header">
    <div class="page-header-inner">
      <h1>Agent Behavior Sandbox</h1>
      <p class="tagline">
        Explore how a simple agent interprets tasks, applies rules, and changes behavior as context drifts.
      </p>
    </div>
  </header>

  <main class="main">
    <!-- LEFT: Agent setup -->
    <section class="panel panel-input">
      <div class="panel-header">
        <h2>Agent Setup</h2>
        <div class="panel-actions">
          <label class="scenario-label" for="scenario-select">Scenario:</label>
          <select id="scenario-select" class="scenario-select">
            <option value="blank">Start blank</option>
            <option value="oncall">Example – On-call Triage</option>
            <option value="feature">Example – Feature Rollout vs Reliability</option>
          </select>
          <button id="load-scenario-btn" class="btn btn-secondary">Load Scenario</button>
        </div>
      </div>

      <p class="help-text">
        Describe a task, the rules the agent must follow, and the current context.
        Then click <strong>Run Agent</strong> to see how it behaves.
      </p>

      <div class="field-group">
        <span class="field-label">Task</span>
        <p class="field-help">What is the agent being asked to do?</p>
        <textarea
          id="task-input"
          class="text-input"
          rows="4"
          placeholder="Example: Prioritize incidents in the on-call queue for the next 2 hours and decide what to work on first."
        ></textarea>
      </div>

      <div class="field-group">
        <span class="field-label">Rules &amp; Constraints</span>
        <p class="field-help">
          One rule per line. Use words like &quot;must&quot;, &quot;never&quot;, &quot;cannot&quot;, or &quot;avoid&quot; for hard constraints.
        </p>
        <textarea
          id="rules-input"
          class="text-input"
          rows="4"
          placeholder="- Must protect production traffic first&#10;- Never deploy unreviewed code&#10;- Prefer resolving high-severity issues before low-severity ones"
        ></textarea>
      </div>

      <div class="field-group">
        <span class="field-label">Context &amp; Signals</span>
        <p class="field-help">
          Observations, SLAs, incident pressure, or other signals the agent is aware of.
        </p>
        <textarea
          id="context-input"
          class="text-input"
          rows="4"
          placeholder="- P1 incident active impacting 20% of traffic&#10;- Feature launch scheduled for tomorrow&#10;- Error budget nearly exhausted for Service A"
        ></textarea>
      </div>

      <div class="panel-footer">
        <label class="checkbox-label">
          <input type="checkbox" id="simulate-drift" />
          Simulate drifted behavior
        </label>
        <button id="run-agent" class="btn btn-primary">Run Agent</button>
        <span id="parse-status" class="parse-status" aria-live="polite"></span>
      </div>
    </section>

    <!-- RIGHT: Behavior summary -->
    <section class="panel panel-results">
      <div class="panel-header">
        <h2>Behavior Summary</h2>
      </div>

      <div class="summary">
        <div id="summary-badge" class="summary-badge summary-badge-idle">
          <span id="summary-badge-label">Agent has not been run yet.</span>
        </div>
      </div>

      <div class="summary-section">
        <h3>Interpreted Task</h3>
        <p id="interpreted-task" class="summary-text">
          The agent’s understanding of what it’s actually being asked to optimize.
        </p>
      </div>

      <div class="summary-section">
        <h3>Rules &amp; Constraints Applied</h3>
        <ul id="rules-applied" class="summary-list">
          <li>No rules processed yet.</li>
        </ul>
      </div>

      <div class="summary-section">
        <h3>Context &amp; Drift Signals</h3>
        <ul id="context-signals" class="summary-list">
          <li>No context signals analyzed yet.</li>
        </ul>
      </div>

      <div class="summary-section">
        <h3>Decision &amp; Rationale</h3>
        <p id="decision" class="summary-text">
          Once the agent runs, this will describe its primary decision and why it chose that behavior.
        </p>
      </div>

      <div class="raw-output">
        <h3>Execution Trace</h3>
        <pre id="raw-trace">Run the agent to see a step-by-step trace of how rules and context were interpreted.</pre>
      </div>
    </section>
  </main>

  <footer class="page-footer">
    <p>
      Part of the <strong>Applied Intelligence Systems</strong> series.
    </p>
  </footer>

  <script src="app.js"></script>
</body>
</html>