@andreprado/agentkit 0.1.1 → 0.3.0

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

@@ -1,606 +0,0 @@
-import { readFile } from "node:fs/promises";
-import { createServer, type IncomingMessage, type Server, 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; autoPort?: boolean },
-): Promise<{
-  url: string;
-  deployUrl: string;
-  tokenSource: string;
-  port: number;
-  portConflict: { port: number } | null;
-  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 start = await listenForDeployChatUiServer({
-    hostname,
-    requestedPort: options.port,
-    autoPort: options.autoPort === true,
-    create: () => createDeployChatUiHttpServer({ root, tokenPath, hostname, requestedPort: options.port, deployUrl }),
-  });
-
-  return {
-    url: `http://${hostname}:${start.port}`,
-    deployUrl,
-    tokenSource: process.env.AGENTKIT_DEPLOY_ACCESS_TOKEN ? "AGENTKIT_DEPLOY_ACCESS_TOKEN" : relativePath(root, tokenPath),
-    port: start.port,
-    portConflict: start.portConflict,
-    stop: () =>
-      new Promise<void>((resolvePromise, reject) => {
-        start.server.close((error) => (error ? reject(error) : resolvePromise()));
-      }),
-  };
-}
-
-function createDeployChatUiHttpServer(input: {
-  root: string;
-  tokenPath: string;
-  hostname: string;
-  requestedPort: number;
-  deployUrl: string;
-}): Server {
-  const { root, tokenPath, hostname, requestedPort, deployUrl } = input;
-  const server = createServer(async (request, response) => {
-    try {
-      const requestUrl = new URL(request.url ?? "/", `http://${request.headers.host ?? `${hostname}:${requestedPort}`}`);
-
-      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),
-        },
-      });
-    }
-  });
-
-  return server;
-}
-
-async function listenForDeployChatUiServer(input: {
-  hostname: string;
-  requestedPort: number;
-  autoPort: boolean;
-  create: () => Server;
-}): Promise<{ server: Server; port: number; portConflict: { port: number } | null }> {
-  let firstConflict: { port: number } | null = null;
-  const lastPort = input.autoPort ? input.requestedPort + 50 : input.requestedPort;
-
-  for (let port = input.requestedPort; port <= lastPort; port += 1) {
-    const server = input.create();
-
-    try {
-      await listen(server, input.hostname, port);
-      return { server, port, portConflict: port === input.requestedPort ? null : firstConflict };
-    } catch (error) {
-      await closeServerAfterListenError(server);
-
-      if (!input.autoPort || !isAddressInUseError(error)) {
-        throw error;
-      }
-
-      firstConflict ??= { port };
-    }
-  }
-
-  throw new AgentKitError(
-    "runtime_error",
-    `Could not allocate a local AgentKit hosted chat UI port after ${input.requestedPort}-${lastPort}.`,
-  );
-}
-
-function listen(server: Server, hostname: string, port: number): Promise<void> {
-  return new Promise((resolvePromise, reject) => {
-    server.once("error", reject);
-    server.listen(port, hostname, () => {
-      server.off("error", reject);
-      resolvePromise();
-    });
-  });
-}
-
-async function closeServerAfterListenError(server: Server): Promise<void> {
-  await new Promise<void>((resolvePromise) => {
-    server.close(() => resolvePromise());
-  });
-}
-
-function isAddressInUseError(error: unknown): boolean {
-  return Boolean(error && typeof error === "object" && "code" in error && error.code === "EADDRINUSE");
-}
-
-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 || ".";
-}