agent-runtime-platform/api/demo_assets/index.html at main · YingzuoLiu/agent-runtime-platform · 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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta
      name="description"
      content="A local console for inspecting durable, policy-governed Agent execution."
    />
    <title>Runtime Console — Agent Runtime Platform</title>
    <link rel="stylesheet" href="/demo-assets/styles.css" />
    <script src="/demo-assets/app.js" defer></script>
  </head>
  <body>
    <a class="skip-link" href="#runtime-workspace">Skip to runtime output</a>

    <header class="topbar">
      <div class="topbar-inner">
        <a class="product-link" href="/demo" aria-label="Agent Runtime Platform home">
          <span class="product-symbol" aria-hidden="true">AR</span>
          <span class="product-name">
            <strong>Agent Runtime Platform</strong>
            <small>Runtime Console</small>
          </span>
        </a>

        <div class="environment-strip" aria-label="Demo environment">
          <span class="environment-status"><i aria-hidden="true"></i>Local runtime</span>
          <span>Offline</span>
          <span>Synthetic data</span>
        </div>
      </div>
    </header>

    <main class="console">
      <section class="intro" aria-labelledby="page-title">
        <div class="intro-copy">
          <p class="context-label">Local execution inspector</p>
          <h1 id="page-title">From planner decision to durable evidence.</h1>
          <p>
            Submit a request, inspect each policy and tool boundary, and verify the
            state committed by the Runtime.
          </p>
        </div>

        <div class="execution-path" aria-label="Execution ownership">
          <span>Planner</span>
          <b aria-hidden="true">→</b>
          <strong>Runtime</strong>
          <b aria-hidden="true">→</b>
          <span>Evidence</span>
        </div>
      </section>

      <section class="request-panel" aria-labelledby="request-title">
        <div class="request-heading">
          <div>
            <h2 id="request-title">Run reference agent</h2>
            <p>Deterministic Travel workflow using the authenticated Runtime API.</p>
          </div>
          <code id="runtime-version">travel-agent:1.2.0</code>
        </div>

        <form id="request-form">
          <label for="request-input">Request</label>
          <textarea
            id="request-input"
            name="request"
            rows="2"
            required
            aria-describedby="request-help"
          ></textarea>
          <div class="request-actions">
            <p id="request-help">
              <span>No model key</span>
              <span>No network calls</span>
              <span>Plan only</span>
            </p>
            <button id="run-button" type="submit">
              Run agent
              <span aria-hidden="true">→</span>
            </button>
          </div>
        </form>
      </section>

      <section id="runtime-workspace" class="workspace" aria-label="Runtime output">
        <article class="panel result-panel" aria-labelledby="result-title">
          <div class="panel-heading">
            <div>
              <p class="panel-label">Application output</p>
              <h2 id="result-title">Result</h2>
            </div>
            <span id="run-status" class="run-status idle">Ready</span>
          </div>

          <div id="result-empty" class="result-empty">
            <div class="empty-symbol" aria-hidden="true"></div>
            <h3>Waiting for a run</h3>
            <p>A validated reference plan or clarification request will appear here.</p>
          </div>

          <div id="result-content" class="result-content" hidden>
            <p id="result-message" class="result-message"></p>
            <dl class="plan-grid">
              <div>
                <dt>Destination</dt>
                <dd id="plan-destination">—</dd>
              </div>
              <div>
                <dt>Duration</dt>
                <dd id="plan-days">—</dd>
              </div>
              <div>
                <dt>Total cost</dt>
                <dd id="plan-cost">—</dd>
              </div>
              <div>
                <dt>Flight</dt>
                <dd id="plan-flight">—</dd>
              </div>
              <div class="wide">
                <dt>Hotel</dt>
                <dd id="plan-hotel">—</dd>
              </div>
              <div class="wide">
                <dt>Itinerary style</dt>
                <dd id="plan-style">—</dd>
              </div>
            </dl>

            <section class="plan-evidence" aria-labelledby="plan-evidence-title">
              <div class="plan-evidence-heading">
                <div>
                  <p>How this plan was formed</p>
                  <h3 id="plan-evidence-title">
                    <span id="plan-option">Selected reference option</span>
                  </h3>
                </div>
                <span id="plan-source" class="source-badge">Offline synthetic catalog</span>
              </div>

              <dl class="cost-breakdown">
                <div>
                  <dt>Transport</dt>
                  <dd id="cost-transport">—</dd>
                </div>
                <div>
                  <dt>Hotel</dt>
                  <dd id="cost-hotel">—</dd>
                </div>
                <div>
                  <dt>Activities</dt>
                  <dd id="cost-activities">—</dd>
                </div>
                <div class="cost-total">
                  <dt>Total</dt>
                  <dd id="cost-total">—</dd>
                </div>
              </dl>

              <p class="ranking-rule">
                Ranked by
                <strong>cost <span id="rank-cost-weight">—</span></strong>
                <span aria-hidden="true">·</span>
                <strong>duration <span id="rank-duration-weight">—</span></strong>
              </p>
            </section>

            <div class="result-note success-note">
              <span aria-hidden="true">✓</span>
              <p>
                <strong>Validation passed</strong>
                Reference plan committed from persisted tool evidence.
              </p>
            </div>
            <p class="catalog-note">No live inventory, pricing, or booking</p>
          </div>

          <div id="result-clarification" class="result-state clarification-state" hidden>
            <span class="state-icon" aria-hidden="true">?</span>
            <div>
              <strong>Planner needs more input</strong>
              <p id="clarification-message"></p>
              <small>Runtime status: completed · no itinerary committed</small>
            </div>
          </div>

          <div id="result-error" class="result-state error-state" hidden role="alert">
            <span class="state-icon" aria-hidden="true">!</span>
            <div>
              <strong>Execution failed</strong>
              <p id="error-message"></p>
            </div>
          </div>
        </article>

        <article class="panel evidence-panel" aria-labelledby="evidence-title">
          <div class="panel-heading evidence-heading">
            <div>
              <p class="panel-label">Persisted event stream</p>
              <h2 id="evidence-title">Execution log</h2>
            </div>
            <span id="event-count" class="event-count">0 events</span>
          </div>

          <div class="evidence-legend" aria-label="Event categories">
            <span class="planner-key">Planner</span>
            <span class="policy-key">Policy</span>
            <span class="tool-key">Tool</span>
            <span class="state-key">State</span>
          </div>

          <div id="evidence-empty" class="evidence-empty">
            <p>Events appear here only after the Runtime persists them.</p>
          </div>

          <ol id="event-list" class="event-list" aria-live="polite"></ol>
        </article>
      </section>

      <footer class="console-footer">
        <p>Local portfolio demo · authenticated Runtime API · persisted evidence</p>
        <a href="https://github.com/YingzuoLiu/agent-runtime-platform">GitHub source</a>
      </footer>
    </main>
  </body>
</html>