@andreprado/agentkit 0.1.0-alpha.2 → 0.1.0-alpha.20

package/src/cli/deploy-chat-ui.ts

@@ -0,0 +1,535 @@
+import { readFile } from "node:fs/promises";
+import { createServer, type IncomingMessage, type ServerResponse } from "node:http";
+import { join, relative, resolve } from "node:path";
+
+import { findAgentCapsuleRoot } from "../runtime/config";
+import { readLocalDeployStateIfExists } from "../runtime/core/deploy-state";
+import { AgentKitError, isAgentKitError } from "../runtime/errors";
+import { defaultDeployChatAccessTokenName, defaultDeployChatAccessTokenPath } from "./constants";
+
+export async function startDeployChatUiServer(
+  cwd: string,
+  options: { port: number; tokenFile?: string },
+): Promise<{ url: string; deployUrl: string; tokenSource: string; stop(): Promise<void> }> {
+  const root = await findAgentCapsuleRoot(cwd);
+  const state = await readLocalDeployStateIfExists(root);
+
+  if (!state?.url) {
+    throw new Error("No hosted deploy URL found. Run agentkit deploy first.");
+  }
+
+  const tokenPath = options.tokenFile
+    ? resolve(root, options.tokenFile)
+    : join(root, defaultDeployChatAccessTokenPath);
+  const hostname = "localhost";
+  const deployUrl = state.url;
+  const server = createServer(async (request, response) => {
+    try {
+      const requestUrl = new URL(request.url ?? "/", `http://${request.headers.host ?? `${hostname}:${options.port}`}`);
+
+      if (request.method === "GET" && requestUrl.pathname === "/") {
+        sendHtml(response, renderDeployChatUi({ deployUrl }));
+        return;
+      }
+
+      if (request.method === "GET" && requestUrl.pathname === "/health") {
+        sendJson(response, 200, { status: "ok", target: "deploy-chat-ui", deployUrl });
+        return;
+      }
+
+      if (request.method === "GET" && requestUrl.pathname === "/_agentkit") {
+        sendJson(response, 200, {
+          deployUrl,
+          access: "proxied",
+          tokenSource: process.env.AGENTKIT_DEPLOY_ACCESS_TOKEN ? "AGENTKIT_DEPLOY_ACCESS_TOKEN" : relativePath(root, tokenPath),
+        });
+        return;
+      }
+
+      if (request.method === "POST" && (requestUrl.pathname === "/v1/chat" || requestUrl.pathname === "/chat")) {
+        const token = await readDeployAccessTokenForUi(tokenPath);
+        const body = await readIncomingBody(request);
+        const contentTypeHeader = request.headers["content-type"];
+        const contentType = Array.isArray(contentTypeHeader)
+          ? contentTypeHeader[0] ?? "application/json"
+          : contentTypeHeader ?? "application/json";
+        const upstream = await fetch(new URL("/v1/chat", deployUrl).href, {
+          method: "POST",
+          headers: {
+            "Authorization": `Bearer ${token}`,
+            "Content-Type": contentType,
+          },
+          body,
+        });
+        const text = await upstream.text();
+
+        response.writeHead(upstream.status, {
+          "content-type": upstream.headers.get("content-type") ?? "application/json",
+        });
+        response.end(text);
+        return;
+      }
+
+      if (
+        request.method === "GET" &&
+        (requestUrl.pathname === "/v1/conversations" ||
+          /^\/v1\/conversations\/[^/]+(?:\/trace)?$/.test(requestUrl.pathname))
+      ) {
+        const token = await readDeployAccessTokenForUi(tokenPath);
+        const upstream = await fetch(new URL(requestUrl.pathname, deployUrl).href, {
+          method: "GET",
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        });
+        const text = await upstream.text();
+
+        response.writeHead(upstream.status, {
+          "content-type": upstream.headers.get("content-type") ?? "application/json",
+        });
+        response.end(text);
+        return;
+      }
+
+      sendJson(response, 404, { error: { code: "not_found", message: "Route not found." } });
+    } catch (error) {
+      sendJson(response, 500, {
+        error: {
+          code: isAgentKitError(error) ? error.code : "deploy_chat_ui_error",
+          message: error instanceof Error ? error.message : String(error),
+        },
+      });
+    }
+  });
+
+  await new Promise<void>((resolvePromise, reject) => {
+    server.once("error", reject);
+    server.listen(options.port, hostname, () => {
+      server.off("error", reject);
+      resolvePromise();
+    });
+  });
+
+  return {
+    url: `http://${hostname}:${options.port}`,
+    deployUrl,
+    tokenSource: process.env.AGENTKIT_DEPLOY_ACCESS_TOKEN ? "AGENTKIT_DEPLOY_ACCESS_TOKEN" : relativePath(root, tokenPath),
+    stop: () =>
+      new Promise<void>((resolvePromise, reject) => {
+        server.close((error) => (error ? reject(error) : resolvePromise()));
+      }),
+  };
+}
+
+export async function readDeployAccessTokenForUi(tokenPath: string): Promise<string> {
+  if (process.env.AGENTKIT_DEPLOY_ACCESS_TOKEN) {
+    return process.env.AGENTKIT_DEPLOY_ACCESS_TOKEN;
+  }
+
+  let payload: unknown;
+
+  try {
+    payload = JSON.parse(await readFile(tokenPath, "utf8"));
+  } catch {
+    throw new AgentKitError(
+      "deploy_access_token_missing",
+      `Could not read a clean deploy access token file at ${tokenPath}. Run: agentkit access token create ${defaultDeployChatAccessTokenName} --out ${defaultDeployChatAccessTokenPath}`,
+    );
+  }
+
+  const token =
+    payload && typeof payload === "object"
+      ? (payload as { access_token?: { token?: unknown }; token?: unknown; accessToken?: unknown }).access_token?.token ??
+        (payload as { token?: unknown }).token ??
+        (payload as { accessToken?: unknown }).accessToken
+      : undefined;
+
+  if (typeof token !== "string" || token.trim().length === 0) {
+    throw new AgentKitError(
+      "deploy_access_token_invalid",
+      `Deploy access token file ${tokenPath} does not contain access_token.token. Recreate it with: agentkit access token create ${defaultDeployChatAccessTokenName} --out ${defaultDeployChatAccessTokenPath}`,
+    );
+  }
+
+  return token.trim();
+}
+
+function readIncomingBody(request: IncomingMessage): Promise<string> {
+  return new Promise((resolvePromise, reject) => {
+    let body = "";
+    request.setEncoding("utf8");
+    request.on("data", (chunk) => {
+      body += chunk;
+    });
+    request.on("end", () => resolvePromise(body));
+    request.on("error", reject);
+  });
+}
+
+function sendJson(response: ServerResponse, status: number, body: unknown): void {
+  response.writeHead(status, { "content-type": "application/json; charset=utf-8" });
+  response.end(JSON.stringify(body, null, 2));
+}
+
+function sendHtml(response: ServerResponse, body: string): void {
+  response.writeHead(200, { "content-type": "text/html; charset=utf-8" });
+  response.end(body);
+}
+
+function renderDeployChatUi(input: { deployUrl: string }): string {
+  const deployUrl = escapeHtml(input.deployUrl);
+
+  return `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>AgentKit Hosted Chat</title>
+    <style>
+      :root {
+        color-scheme: light;
+        --bg: #f6f7f5;
+        --panel: #ffffff;
+        --ink: #182022;
+        --muted: #667175;
+        --line: #d9ded9;
+        --accent: #176b5d;
+        --danger: #9f2d2d;
+      }
+
+      * { box-sizing: border-box; }
+
+      body {
+        margin: 0;
+        min-height: 100svh;
+        background: var(--bg);
+        color: var(--ink);
+        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      }
+
+      main {
+        min-height: 100svh;
+        display: grid;
+        grid-template-rows: auto 1fr auto;
+        background: var(--panel);
+      }
+
+      header {
+        border-bottom: 1px solid var(--line);
+        padding: 18px 22px;
+        display: grid;
+        gap: 10px;
+      }
+
+      h1 {
+        margin: 0 0 4px;
+        font-size: 20px;
+        line-height: 1.2;
+      }
+
+      .topline {
+        display: flex;
+        align-items: start;
+        justify-content: space-between;
+        gap: 12px;
+      }
+
+      code {
+        color: var(--muted);
+        font-size: 12px;
+        overflow-wrap: anywhere;
+      }
+
+      .meta {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px 14px;
+        color: var(--muted);
+        font-size: 12px;
+      }
+
+      #messages {
+        padding: 22px;
+        overflow: auto;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+
+      .message {
+        max-width: 780px;
+        display: grid;
+        gap: 4px;
+      }
+
+      .message.user {
+        align-self: end;
+      }
+
+      .role {
+        color: var(--muted);
+        font-size: 12px;
+        font-weight: 700;
+        text-transform: uppercase;
+      }
+
+      .bubble {
+        border: 1px solid var(--line);
+        border-radius: 8px;
+        padding: 12px 14px;
+        white-space: pre-wrap;
+        line-height: 1.45;
+        background: #fbfbfa;
+      }
+
+      .user .bubble {
+        border-color: #b8d8ce;
+        background: #e8f5f0;
+      }
+
+      .error .bubble {
+        border-color: #e1b1b1;
+        color: var(--danger);
+        background: #fff6f6;
+      }
+
+      #trace {
+        border-top: 1px solid var(--line);
+        padding: 12px 22px;
+        display: grid;
+        gap: 8px;
+        background: #fbfbfa;
+      }
+
+      .tool-call {
+        border: 1px solid var(--line);
+        border-radius: 8px;
+        padding: 10px 12px;
+        display: grid;
+        gap: 6px;
+        font-size: 12px;
+      }
+
+      .tool-head {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        align-items: center;
+        color: var(--muted);
+        font-weight: 700;
+      }
+
+      .tool-call pre {
+        margin: 0;
+        max-height: 180px;
+        overflow: auto;
+        white-space: pre-wrap;
+      }
+
+      form {
+        border-top: 1px solid var(--line);
+        padding: 14px;
+        display: grid;
+        grid-template-columns: 1fr auto;
+        gap: 10px;
+      }
+
+      textarea {
+        min-height: 52px;
+        max-height: 180px;
+        resize: vertical;
+        border: 1px solid var(--line);
+        border-radius: 8px;
+        padding: 12px;
+        color: var(--ink);
+        font: inherit;
+      }
+
+      button {
+        min-width: 96px;
+        border: 0;
+        border-radius: 8px;
+        padding: 0 18px;
+        color: white;
+        background: var(--accent);
+        font: inherit;
+        font-weight: 700;
+        cursor: pointer;
+      }
+
+      button.secondary {
+        min-height: 34px;
+        color: var(--ink);
+        background: #eef1ee;
+        border: 1px solid var(--line);
+      }
+
+      button:disabled {
+        cursor: wait;
+        opacity: 0.65;
+      }
+
+      @media (max-width: 640px) {
+        form {
+          grid-template-columns: 1fr;
+        }
+
+        button {
+          min-height: 44px;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <header>
+        <div class="topline">
+          <div>
+            <h1>AgentKit Hosted Chat</h1>
+            <code>${deployUrl}</code>
+          </div>
+          <button class="secondary" id="new-conversation" type="button">New conversation</button>
+        </div>
+        <div class="meta">
+          <span>Conversation: <code id="conversation-id">none</code></span>
+          <span>Tool calls: <code id="tool-count">0</code></span>
+        </div>
+      </header>
+      <section id="messages" aria-live="polite"></section>
+      <section id="trace" aria-live="polite"></section>
+      <form id="form">
+        <textarea id="message" name="message" placeholder="Type a message" required autofocus></textarea>
+        <button id="send" type="submit">Send</button>
+      </form>
+    </main>
+    <script>
+      const form = document.querySelector("#form");
+      const textarea = document.querySelector("#message");
+      const send = document.querySelector("#send");
+      const messages = document.querySelector("#messages");
+      const trace = document.querySelector("#trace");
+      const conversationLabel = document.querySelector("#conversation-id");
+      const toolCount = document.querySelector("#tool-count");
+      const newConversation = document.querySelector("#new-conversation");
+      let conversationId = null;
+
+      function addMessage(role, content, className = "") {
+        const wrapper = document.createElement("article");
+        wrapper.className = ["message", role, className].filter(Boolean).join(" ");
+        const label = document.createElement("div");
+        label.className = "role";
+        label.textContent = role;
+        const bubble = document.createElement("div");
+        bubble.className = "bubble";
+        bubble.textContent = content;
+        wrapper.append(label, bubble);
+        messages.append(wrapper);
+        messages.scrollTop = messages.scrollHeight;
+      }
+
+      function setConversationId(value) {
+        conversationId = value || null;
+        conversationLabel.textContent = conversationId || "none";
+      }
+
+      function renderTrace(payload) {
+        const calls = [];
+        for (const run of payload.runs || []) {
+          for (const call of run.toolCalls || []) {
+            calls.push(call);
+          }
+        }
+
+        toolCount.textContent = String(calls.length);
+        trace.innerHTML = "";
+
+        for (const call of calls.slice(-8)) {
+          const item = document.createElement("article");
+          item.className = "tool-call";
+          const head = document.createElement("div");
+          head.className = "tool-head";
+          head.textContent = [call.name, call.status, call.errorMessage].filter(Boolean).join(" · ");
+          const input = document.createElement("pre");
+          input.textContent = JSON.stringify(call.input || {}, null, 2);
+          item.append(head, input);
+          trace.append(item);
+        }
+      }
+
+      async function refreshTrace() {
+        if (!conversationId) {
+          toolCount.textContent = "0";
+          trace.innerHTML = "";
+          return;
+        }
+
+        const response = await fetch("/v1/conversations/" + encodeURIComponent(conversationId) + "/trace");
+        const payload = await response.json();
+        if (response.ok) renderTrace(payload);
+      }
+
+      newConversation.addEventListener("click", () => {
+        setConversationId(null);
+        messages.innerHTML = "";
+        trace.innerHTML = "";
+        toolCount.textContent = "0";
+        textarea.focus();
+      });
+
+      textarea.addEventListener("keydown", (event) => {
+        if (event.key !== "Enter" || event.shiftKey || event.isComposing) return;
+        event.preventDefault();
+        if (send.disabled) return;
+        form.requestSubmit();
+      });
+
+      form.addEventListener("submit", async (event) => {
+        event.preventDefault();
+        const message = textarea.value.trim();
+        if (!message) return;
+
+        addMessage("user", message);
+        textarea.value = "";
+        send.disabled = true;
+
+        try {
+          const response = await fetch("/v1/chat", {
+            method: "POST",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify({ message, conversationId }),
+          });
+          const payload = await response.json();
+
+          if (!response.ok) {
+            throw new Error(payload.error?.message || "Request failed");
+          }
+
+          setConversationId(payload.conversationId || conversationId);
+          addMessage("assistant", payload.message?.content || "");
+          await refreshTrace();
+        } catch (error) {
+          addMessage("error", error instanceof Error ? error.message : String(error), "error");
+          await refreshTrace().catch(() => {});
+        } finally {
+          send.disabled = false;
+          textarea.focus();
+        }
+      });
+    </script>
+  </body>
+</html>`;
+}
+
+function escapeHtml(value: string): string {
+  return value
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
+function relativePath(root: string, path: string): string {
+  const output = relative(root, path);
+  return output.startsWith("..") ? path : output || ".";
+}