@andreprado/agentkit 0.1.0-alpha.9 → 0.1.0

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

@@ -1,5 +1,5 @@
 import { readFile } from "node:fs/promises";
-import { createServer, type IncomingMessage, type ServerResponse } from "node:http";
+import { createServer, type IncomingMessage, type Server, type ServerResponse } from "node:http";
 import { join, relative, resolve } from "node:path";
 
 import { findAgentCapsuleRoot } from "../runtime/config";
@@ -9,8 +9,15 @@ import { defaultDeployChatAccessTokenName, defaultDeployChatAccessTokenPath } fr
 
 export async function startDeployChatUiServer(
   cwd: string,
-  options: { port: number; tokenFile?: string },
-): Promise<{ url: string; deployUrl: string; tokenSource: string; stop(): Promise<void> }> {
+  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);
 
@@ -23,9 +30,37 @@ export async function startDeployChatUiServer(
     : 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}:${options.port}`}`);
+      const requestUrl = new URL(request.url ?? "/", `http://${request.headers.host ?? `${hostname}:${requestedPort}`}`);
 
       if (request.method === "GET" && requestUrl.pathname === "/") {
         sendHtml(response, renderDeployChatUi({ deployUrl }));
@@ -70,6 +105,27 @@ export async function startDeployChatUiServer(
         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, {
@@ -81,23 +137,59 @@ export async function startDeployChatUiServer(
     }
   });
 
-  await new Promise<void>((resolvePromise, reject) => {
+  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(options.port, hostname, () => {
+    server.listen(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()));
-      }),
-  };
+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> {
@@ -196,6 +288,8 @@ function renderDeployChatUi(input: { deployUrl: string }): string {
       header {
         border-bottom: 1px solid var(--line);
         padding: 18px 22px;
+        display: grid;
+        gap: 10px;
       }
 
       h1 {
@@ -204,12 +298,27 @@ function renderDeployChatUi(input: { deployUrl: string }): string {
         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;
@@ -255,6 +364,39 @@ function renderDeployChatUi(input: { deployUrl: string }): string {
         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;
@@ -286,6 +428,13 @@ function renderDeployChatUi(input: { deployUrl: string }): string {
         cursor: pointer;
       }
 
+      button.secondary {
+        min-height: 34px;
+        color: var(--ink);
+        background: #eef1ee;
+        border: 1px solid var(--line);
+      }
+
       button:disabled {
         cursor: wait;
         opacity: 0.65;
@@ -305,10 +454,20 @@ function renderDeployChatUi(input: { deployUrl: string }): string {
   <body>
     <main>
       <header>
-        <h1>AgentKit Hosted Chat</h1>
-        <code>${deployUrl}</code>
+        <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>
@@ -319,6 +478,10 @@ function renderDeployChatUi(input: { deployUrl: string }): string {
       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 = "") {
@@ -335,6 +498,55 @@ function renderDeployChatUi(input: { deployUrl: string }): string {
         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();
@@ -363,10 +575,12 @@ function renderDeployChatUi(input: { deployUrl: string }): string {
             throw new Error(payload.error?.message || "Request failed");
           }
 
-          conversationId = payload.conversationId || conversationId;
+          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();