Stream build-server logs in the deployment details page

myftija · myftija · commit c87adc4ee778 · 2025-11-09T20:50:59.000+01:00
diff --git a/apps/webapp/app/components/primitives/DateTime.tsx b/apps/webapp/app/components/primitives/DateTime.tsx
@@ -13,6 +13,7 @@ type DateTimeProps = {
   includeTime?: boolean;
   showTimezone?: boolean;
   showTooltip?: boolean;
+  hideDate?: boolean;
   previousDate?: Date | string | null; // Add optional previous date for comparison
 };
 
@@ -184,7 +185,7 @@ function formatSmartDateTime(date: Date, timeZone: string, locales: string[]): s
 // Format time only
 function formatTimeOnly(date: Date, timeZone: string, locales: string[]): string {
   return new Intl.DateTimeFormat(locales, {
-    hour: "numeric",
+    hour: "2-digit",
     minute: "numeric",
     second: "numeric",
     timeZone,
@@ -198,6 +199,7 @@ export const DateTimeAccurate = ({
   timeZone = "UTC",
   previousDate = null,
   showTooltip = true,
+  hideDate = false,
 }: DateTimeProps) => {
   const locales = useLocales();
   const [localTimeZone, setLocalTimeZone] = useState<string>("UTC");
@@ -214,7 +216,9 @@ export const DateTimeAccurate = ({
   }, []);
 
   // Smart formatting based on whether date changed
-  const formattedDateTime = realPrevDate
+  const formattedDateTime = hideDate
+    ? formatTimeOnly(realDate, localTimeZone, locales)
+    : realPrevDate
     ? isSameDay(realDate, realPrevDate)
       ? formatTimeOnly(realDate, localTimeZone, locales)
       : formatDateTimeAccurate(realDate, localTimeZone, locales)
diff --git a/apps/webapp/app/components/primitives/Paragraph.tsx b/apps/webapp/app/components/primitives/Paragraph.tsx
@@ -17,6 +17,10 @@ const paragraphVariants = {
     text: "font-sans text-sm font-normal text-text-bright",
     spacing: "mb-2",
   },
+  "small/dimmed": {
+    text: "font-sans text-sm font-normal text-text-dimmed",
+    spacing: "mb-2",
+  },
   "extra-small": {
     text: "font-sans text-xs font-normal text-text-dimmed",
     spacing: "mb-1.5",
@@ -25,6 +29,14 @@ const paragraphVariants = {
     text: "font-sans text-xs font-normal text-text-bright",
     spacing: "mb-1.5",
   },
+  "extra-small/dimmed": {
+    text: "font-sans text-xs font-normal text-text-dimmed",
+    spacing: "mb-1.5",
+  },
+  "extra-small/dimmed/mono": {
+    text: "font-mono text-xs font-normal text-text-dimmed",
+    spacing: "mb-1.5",
+  },
   "extra-small/mono": {
     text: "font-mono text-xs font-normal text-text-dimmed",
     spacing: "mb-1.5",
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments.$deploymentParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments.$deploymentParam/route.tsx
@@ -1,6 +1,9 @@
 import { Link, useLocation } from "@remix-run/react";
 import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
+import { useEffect, useState, useRef, useCallback } from "react";
+import { S2, S2Error } from "@s2-dev/streamstore";
+import { Clipboard, ClipboardCheck } from "lucide-react";
 import { ExitIcon } from "~/assets/icons/ExitIcon";
 import { GitMetadata } from "~/components/GitMetadata";
 import { RuntimeIcon } from "~/components/RuntimeIcon";
@@ -22,10 +25,15 @@ import {
 } from "~/components/primitives/Table";
 import { DeploymentError } from "~/components/runs/v3/DeploymentError";
 import { DeploymentStatus } from "~/components/runs/v3/DeploymentStatus";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "~/components/primitives/Tooltip";
 import { useEnvironment } from "~/hooks/useEnvironment";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
-import { useUser } from "~/hooks/useUser";
 import { DeploymentPresenter } from "~/presenters/v3/DeploymentPresenter.server";
 import { requireUserId } from "~/services/session.server";
 import { cn } from "~/utils/cn";
@@ -40,15 +48,15 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
 
   try {
     const presenter = new DeploymentPresenter();
-    const { deployment } = await presenter.call({
+    const { deployment, s2Logs } = await presenter.call({
       userId,
       organizationSlug,
       projectSlug: projectParam,
       environmentSlug: envParam,
       deploymentShortCode: deploymentParam,
     });
 
-    return typedjson({ deployment });
+    return typedjson({ deployment, s2Logs });
   } catch (error) {
     console.error(error);
     throw new Response(undefined, {
@@ -58,15 +66,92 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   }
 };
 
+type LogEntry = {
+  message: string;
+  timestamp: Date;
+  level: "info" | "error" | "warn";
+};
+
 export default function Page() {
-  const { deployment } = useTypedLoaderData<typeof loader>();
+  const { deployment, s2Logs } = useTypedLoaderData<typeof loader>();
   const organization = useOrganization();
   const project = useProject();
   const environment = useEnvironment();
   const location = useLocation();
-  const user = useUser();
   const page = new URLSearchParams(location.search).get("page");
 
+  const [logs, setLogs] = useState<LogEntry[]>([]);
+  const [isStreaming, setIsStreaming] = useState(true);
+  const [streamError, setStreamError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const abortController = new AbortController();
+
+    setLogs([]);
+    setStreamError(null);
+
+    const streamLogs = async () => {
+      try {
+        const s2 = new S2({ accessToken: s2Logs.accessToken });
+        const basin = s2.basin(s2Logs.basin);
+        const stream = basin.stream(s2Logs.stream);
+
+        const readSession = await stream.readSession(
+          {
+            seq_num: 0,
+            wait: 60,
+            as: "bytes",
+          },
+          { signal: abortController.signal }
+        );
+
+        const decoder = new TextDecoder();
+
+        for await (const record of readSession) {
+          try {
+            const headers: Record<string, string> = {};
+
+            if (record.headers) {
+              for (const [nameBytes, valueBytes] of record.headers) {
+                headers[decoder.decode(nameBytes)] = decoder.decode(valueBytes);
+              }
+            }
+            const level = (headers["level"]?.toLowerCase() as LogEntry["level"]) ?? "info";
+
+            setLogs((prevLogs) => [
+              ...prevLogs,
+              {
+                timestamp: new Date(record.timestamp),
+                message: decoder.decode(record.body),
+                level,
+              },
+            ]);
+          } catch (err) {
+            console.error("Failed to parse log record:", err);
+          }
+        }
+      } catch (error) {
+        if (abortController.signal.aborted) return;
+
+        const isNotFoundError = error instanceof S2Error && error.code === "stream_not_found";
+        if (isNotFoundError) return;
+
+        console.error("Failed to stream logs:", error);
+        setStreamError("Failed to stream logs");
+      } finally {
+        if (!abortController.signal.aborted) {
+          setIsStreaming(false);
+        }
+      }
+    };
+
+    streamLogs();
+
+    return () => {
+      abortController.abort();
+    };
+  }, [s2Logs.basin, s2Logs.stream]);
+
   return (
     <div className="grid h-full max-h-full grid-rows-[2.5rem_1fr] overflow-hidden bg-background-bright">
       <div className="mx-3 flex items-center justify-between gap-2 border-b border-grid-dimmed">
@@ -158,6 +243,10 @@ export default function Page() {
                   />
                 </Property.Value>
               </Property.Item>
+              <Property.Item>
+                <Property.Label>Logs</Property.Label>
+                <LogsDisplay logs={logs} isStreaming={isStreaming} streamError={streamError} />
+              </Property.Item>
               {deployment.canceledAt && (
                 <Property.Item>
                   <Property.Label>Canceled at</Property.Label>
@@ -320,3 +409,143 @@ export default function Page() {
     </div>
   );
 }
+
+type LogsDisplayProps = {
+  logs: LogEntry[];
+  isStreaming: boolean;
+  streamError: string | null;
+};
+
+function LogsDisplay({ logs, isStreaming, streamError }: LogsDisplayProps) {
+  const [copied, setCopied] = useState(false);
+  const [mouseOver, setMouseOver] = useState(false);
+  const logsContainerRef = useRef<HTMLDivElement>(null);
+
+  // auto-scroll log container to bottom when new logs arrive
+  useEffect(() => {
+    if (logsContainerRef.current) {
+      logsContainerRef.current.scrollTop = logsContainerRef.current.scrollHeight;
+    }
+  }, [logs]);
+
+  const onCopyLogs = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      event.preventDefault();
+      event.stopPropagation();
+      const logsText = logs.map((log) => log.message).join("\n");
+      navigator.clipboard.writeText(logsText);
+      setCopied(true);
+      setTimeout(() => {
+        setCopied(false);
+      }, 1500);
+    },
+    [logs]
+  );
+
+  const errorCount = logs.filter((log) => log.level === "error").length;
+  const warningCount = logs.filter((log) => log.level === "warn").length;
+
+  return (
+    <div className="mt-1.5 overflow-hidden rounded-md border border-grid-bright">
+      <div className="flex items-center justify-between border-b border-grid-dimmed px-3 py-2">
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-1.5">
+            <div
+              className={cn(
+                "h-2 w-2 rounded-full",
+                errorCount > 0 ? "bg-error/80" : "bg-charcoal-600"
+              )}
+            />
+            <Paragraph variant="extra-small/dimmed/mono" className="w-[ch-10]">
+              {`${errorCount} ${errorCount === 1 ? "error" : "errors"}`}
+            </Paragraph>
+          </div>
+          <div className="flex items-center gap-1.5">
+            <div
+              className={cn(
+                "h-2 w-2 rounded-full",
+                warningCount > 0 ? "bg-warning/80" : "bg-charcoal-600"
+              )}
+            />
+            <Paragraph variant="extra-small/dimmed/mono">
+              {`${warningCount} ${warningCount === 1 ? "warning" : "warnings"}`}
+            </Paragraph>
+          </div>
+        </div>
+        {logs.length > 0 && (
+          <TooltipProvider>
+            <Tooltip open={copied || mouseOver} disableHoverableContent>
+              <TooltipTrigger
+                onClick={onCopyLogs}
+                onMouseEnter={() => setMouseOver(true)}
+                onMouseLeave={() => setMouseOver(false)}
+                className={cn(
+                  "transition-colors duration-100 focus-custom hover:cursor-pointer",
+                  copied ? "text-success" : "text-text-dimmed hover:text-text-bright"
+                )}
+              >
+                {copied ? <ClipboardCheck className="size-4" /> : <Clipboard className="size-4" />}
+              </TooltipTrigger>
+              <TooltipContent side="left" className="text-xs">
+                {copied ? "Copied" : "Copy"}
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        )}
+      </div>
+
+      <div
+        ref={logsContainerRef}
+        className="h-64 grow overflow-x-auto overflow-y-scroll font-mono text-xs scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+      >
+        <div className="flex w-fit min-w-full flex-col">
+          {logs.length === 0 && (
+            <div className="flex gap-x-2.5 border-l-2 border-transparent px-2.5 py-1">
+              {streamError ? (
+                <span className="text-error">Failed fetching logs</span>
+              ) : (
+                <span className="text-text-dimmed">
+                  {isStreaming ? "Waiting for logs..." : "No logs yet"}
+                </span>
+              )}
+            </div>
+          )}
+          {logs.map((log, index) => {
+            return (
+              <div
+                key={index}
+                className={cn(
+                  "flex w-full gap-x-2.5 border-l-2 px-2.5 py-1",
+                  log.level === "error" && "border-error/60 bg-error/15 hover:bg-error/25",
+                  log.level === "warn" && "border-warning/60 bg-warning/20 hover:bg-warning/30",
+                  log.level === "info" && "border-transparent hover:bg-charcoal-750"
+                )}
+              >
+                <span
+                  className={cn(
+                    "select-none whitespace-nowrap py-px",
+                    log.level === "error" && "text-error/80",
+                    log.level === "warn" && "text-warning/70",
+                    log.level === "info" && "text-text-dimmed"
+                  )}
+                >
+                  <DateTimeAccurate date={log.timestamp} hideDate />
+                </span>
+                <span
+                  className={cn(
+                    "whitespace-nowrap",
+                    log.level === "error" && "text-error",
+                    log.level === "warn" && "text-warning",
+                    log.level === "info" && "text-text-bright"
+                  )}
+                >
+                  {log.message}
+                </span>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments/route.tsx
@@ -372,7 +372,7 @@ export default function Page() {
           {deploymentParam && (
             <>
               <ResizableHandle id="deployments-handle" />
-              <ResizablePanel id="deployments-inspector" min="400px" max="700px">
+              <ResizablePanel id="deployments-inspector" min="500px" max="800px">
                 <Outlet />
               </ResizablePanel>
             </>
diff --git a/apps/webapp/package.json b/apps/webapp/package.json
@@ -105,6 +105,7 @@
     "@remix-run/serve": "2.1.0",
     "@remix-run/server-runtime": "2.1.0",
     "@remix-run/v1-meta": "^0.1.3",
+    "@s2-dev/streamstore": "^0.17.2",
     "@sentry/remix": "9.46.0",
     "@slack/web-api": "7.9.1",
     "@socket.io/redis-adapter": "^8.3.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
