AkurAI-Framework / site/frontend/runtime-demo.html

Latest change ea85a4bfaa729fcd081e9ff622de7180d94a97b1 - integrate AI components: real component manifest (27), wire /chat + /ai-components + /ai-runtime routes, AI docs sidebar + nav, changelogs, landing alert; AI batch track done by Ólafur Búi Ólafsson

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Generative-UI runtime — AkurAI/Framework</title>
    <meta
      name="description"
      content="Live demo of the tool-call → component runtime: registry dispatch, JSON fail-safe, inline approval round-trip, reasoning toggle, suggestion chips, ThreadList and branch picker."
    />
    <link rel="stylesheet" href="/styles.css" />
    <style>
      /* toolui- scoped demo-only layout helpers (no design-system overrides). */
      .toolui-demo-grid { display: grid; gap: 2.5rem; margin: 2.5rem 0 5rem; }
      .toolui-demo-out { margin-top: 1rem; }
      .toolui-demo-sidebar { max-width: 260px; }
    </style>
  </head>
  <body>
    <main class="container">
      <header class="page-head">
        <span class="eyebrow">Live demo</span>
        <h1>Generative-UI runtime</h1>
        <p class="lede">
          The engine behind <code>tool-ui</code>: tool-call payloads are matched
          to registered components and rendered to the DOM. Pure native ESM, zero
          dependencies. Open DevTools → Console for <code>[toolui]</code> and
          <code>[runtime]</code> breadcrumbs. <a href="/docs/generative-ui">Read the docs →</a>
        </p>
      </header>

      <div class="toolui-demo-grid">
        <!-- 1. Matched render -->
        <section>
          <h2>1 · Matched render</h2>
          <p>A <code>weather</code> payload is dispatched and the registered weather component renders it.</p>
          <button class="btn btn-primary" id="demo-match">Render weather payload</button>
          <div class="toolui-demo-out" id="out-match"></div>
        </section>

        <!-- 2. JSON fail-safe fallback -->
        <section>
          <h2>2 · JSON fail-safe</h2>
          <p>An unrecognized payload matches nothing, so the dispatcher falls back to a pretty-printed JSON card — the UI never crashes.</p>
          <button class="btn btn-primary" id="demo-fallback">Render unknown payload</button>
          <div class="toolui-demo-out" id="out-fallback"></div>
        </section>

        <!-- 3. Approval round-trip -->
        <section>
          <h2>3 · Approval round-trip</h2>
          <p>An <code>approval</code> payload renders Approve/Reject. Choosing one resolves a promise and fires a receipt (POST attempted + <code>toolui:receipt</code> event).</p>
          <button class="btn btn-primary" id="demo-approval">Render approval</button>
          <div class="toolui-demo-out" id="out-approval"></div>
          <p class="small muted toolui-demo-out" id="approval-status">Receipt log: —</p>
        </section>

        <!-- 4. Reasoning toggle -->
        <section>
          <h2>4 · Reasoning toggle</h2>
          <p>A collapsible reasoning block for an assistant turn.</p>
          <div class="toolui-demo-out" id="out-reasoning"></div>
        </section>

        <!-- 5. Suggestion chips -->
        <section>
          <h2>5 · Suggestion chips</h2>
          <p>Tappable chips fill the composer below and emit <code>suggestion:pick</code>.</p>
          <div class="toolui-demo-out" id="out-suggestions"></div>
          <form id="composer-form" class="toolui-demo-out" style="display:flex; gap:8px;">
            <input id="composer" type="text" style="flex:1" placeholder="Pick a suggestion…" />
            <button class="btn btn-secondary" type="submit">Send</button>
          </form>
        </section>

        <!-- 6. ThreadList + branch picker -->
        <section class="split">
          <div>
            <h2>6 · ThreadList</h2>
            <p>Switch conversations (in-memory + localStorage). Emits <code>thread:select</code>.</p>
            <div class="toolui-demo-sidebar toolui-demo-out" id="out-threads"></div>
            <p class="small muted" id="thread-status">Selected: —</p>
          </div>
          <div>
            <h2>Branch picker</h2>
            <p>Step through alternate message versions. Emits <code>branch:change</code>.</p>
            <div class="toolui-demo-out" id="out-branch"></div>
            <p class="small muted" id="branch-status">Branch: —</p>
          </div>
        </section>
      </div>
    </main>

    <script type="module">
      import Runtime, {
        registerAll,
        renderToolPayload,
        renderApproval,
        createReasoning,
        createSuggestions,
        createThreadList,
        createBranchPicker,
      } from "/ai/runtime/index.js";

      // ── Register 2 tiny inline example components ────────────────────────────
      registerAll([
        {
          name: "weather-card",
          category: "data",
          title: "Weather card",
          match: (p) => p && p.type === "weather",
          render: (p) => {
            const card = document.createElement("div");
            card.className = "card";
            card.innerHTML =
              '<h3>' + (p.city || "Somewhere") + "</h3>" +
              '<p class="muted">' + (p.temp ?? "?") + "°C · " + (p.summary || "") + "</p>";
            return card;
          },
          example: { type: "weather", city: "Akureyri", temp: 4, summary: "Light snow" },
        },
        {
          name: "metric-card",
          category: "data",
          title: "Metric card",
          match: (p) => p && p.type === "metric",
          render: (p) => {
            const card = document.createElement("div");
            card.className = "card";
            card.innerHTML =
              '<h3>' + (p.label || "Metric") + "</h3>" +
              '<p style="font-size:28px;margin-top:4px;">' + (p.value ?? "—") + "</p>";
            return card;
          },
          example: { type: "metric", label: "Active users", value: 1280 },
        },
      ]);

      const $ = (id) => document.getElementById(id);

      // 1. Matched render
      $("demo-match").addEventListener("click", () => {
        const out = $("out-match");
        out.textContent = "";
        out.appendChild(renderToolPayload({ type: "weather", city: "Akureyri", temp: 4, summary: "Light snow" }));
      });

      // 2. JSON fail-safe
      $("demo-fallback").addEventListener("click", () => {
        const out = $("out-fallback");
        out.textContent = "";
        out.appendChild(renderToolPayload({ type: "unknown-thing", foo: 1, nested: { a: [1, 2, 3] } }));
      });

      // 3. Approval round-trip
      document.addEventListener("toolui:receipt", (e) => {
        $("approval-status").textContent = "Receipt log: " + JSON.stringify(e.detail);
      });
      $("demo-approval").addEventListener("click", () => {
        const out = $("out-approval");
        out.textContent = "";
        const { element, promise } = renderApproval(
          {
            title: "Delete 3 records?",
            message: "This permanently removes the selected rows.",
            toolCallId: "call_demo_1",
          },
          Runtime.makeReceiptCtx()
        );
        out.appendChild(element);
        promise.then((r) => console.log("[demo] approval resolved:", r));
      });

      // 4. Reasoning toggle
      $("out-reasoning").appendChild(
        createReasoning({
          summary: "Show reasoning",
          text: "Step 1: parse the request.\nStep 2: select the weather tool.\nStep 3: format the result as a card.",
        }).element
      );

      // 5. Suggestion chips
      $("out-suggestions").appendChild(
        createSuggestions(
          ["Tell me more", "Summarize this", { text: "Send now", submit: true }],
          { composer: $("composer"), form: $("composer-form") }
        ).element
      );
      $("composer-form").addEventListener("submit", (e) => {
        e.preventDefault();
        console.log("[demo] composer submit:", $("composer").value);
      });

      // 6. ThreadList
      const threads = createThreadList({
        threads: [
          { id: "t1", title: "Weather questions" },
          { id: "t2", title: "Budget planning" },
        ],
        storageKey: "toolui:demo-threads",
        onSelect: (t) => ($("thread-status").textContent = "Selected: " + t.title),
      });
      $("out-threads").appendChild(threads.element);

      // Branch picker
      const branch = createBranchPicker({
        total: 3,
        index: 0,
        onChange: (i, n) => ($("branch-status").textContent = `Branch: ${i + 1} / ${n}`),
      });
      $("out-branch").appendChild(branch.element);

      console.log("[demo] runtime-demo initialized", Runtime.getRegistered().map((d) => d.name));
    </script>
  </body>
</html>