From 39348c94919c5378f26188f38358cbdef3cb6fde Mon Sep 17 00:00:00 2001
From: mrhid6 <mrhid6@gmail.com>
Date: Mon, 20 Jul 2026 15:18:36 +0100
Subject: [PATCH] feat(web): live SSE log tail and log retention setting

---
 web/app/settings/page.tsx                    | 35 ++++++++-
 web/app/workflows/[id]/runs/[runId]/page.tsx | 78 +++++++++++++++-----
 web/lib/api.ts                               | 22 +++++-
 3 files changed, 112 insertions(+), 23 deletions(-)

diff --git a/web/app/settings/page.tsx b/web/app/settings/page.tsx
index f2fbf4e..41ae69a 100644
--- a/web/app/settings/page.tsx
+++ b/web/app/settings/page.tsx
@@ -168,6 +168,9 @@ export default function SettingsPage() {
   const [toAddrs, setToAddrs] = useState(""); // comma-separated in UI
   const [useTLS, setUseTLS] = useState(false);
 
+  // Workflow log retention (days). 0 = keep forever.
+  const [logRetentionDays, setLogRetentionDays] = useState(30);
+
   const [saved, setSaved] = useState(false);
 
   useEffect(() => {
@@ -183,11 +186,15 @@ export default function SettingsPage() {
     setFromAddr(settings.email?.from_addr ?? "");
     setToAddrs((settings.email?.to_addrs ?? []).join(", "));
     setUseTLS(settings.email?.use_tls ?? false);
+    setLogRetentionDays(settings.workflow_log_retention_days ?? 30);
   }, [settings]);
 
   const { mutate: save, isPending } = useMutation({
-    mutationFn: (payload: { alerts: AlertSettings; email: EmailSettings }) =>
-      api.saveSettings(payload),
+    mutationFn: (payload: {
+      alerts: AlertSettings;
+      email: EmailSettings;
+      workflow_log_retention_days?: number | null;
+    }) => api.saveSettings(payload),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["settings"] });
       setSaved(true);
@@ -218,6 +225,7 @@ export default function SettingsPage() {
         to_addrs: toList,
         use_tls: useTLS,
       },
+      workflow_log_retention_days: logRetentionDays,
     });
   }
 
@@ -374,6 +382,29 @@ export default function SettingsPage() {
           </div>
         </Card>
 
+        {/* Workflow logs */}
+        <Card>
+          <CardHeader>
+            <CardTitle>Workflow Logs</CardTitle>
+          </CardHeader>
+          <p className="mb-5 text-sm text-text-secondary">
+            How long to keep workflow run logs on the server before they are
+            automatically deleted.
+          </p>
+          <Field
+            label="Log retention (days)"
+            hint="0 = keep forever. Applies to per-run step output logs."
+          >
+            <input
+              type="number"
+              min={0}
+              value={logRetentionDays}
+              onChange={(e) => setLogRetentionDays(Number(e.target.value))}
+              className="w-32 rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm text-text-primary focus:border-accent/50 focus:outline-none focus:ring-1 focus:ring-accent/30"
+            />
+          </Field>
+        </Card>
+
         <div className="flex items-center gap-3">
           <Button type="submit" variant="primary" loading={isPending}>
             {saved ? "Saved!" : "Save Settings"}
diff --git a/web/app/workflows/[id]/runs/[runId]/page.tsx b/web/app/workflows/[id]/runs/[runId]/page.tsx
index 8b3d8a5..f1b213b 100644
--- a/web/app/workflows/[id]/runs/[runId]/page.tsx
+++ b/web/app/workflows/[id]/runs/[runId]/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useParams } from "next/navigation";
+import { useEffect, useRef, useState } from "react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { api, ServerRun, StepRun } from "@/lib/api";
 import { Button, Badge, Card } from "@/components/ui";
@@ -20,6 +21,50 @@ function StatusBadge({ status }: { status: string }) {
   return <Badge variant={statusVariant[status] ?? "neutral"}>{status}</Badge>;
 }
 
+function ServerLog({
+  runId,
+  serverId,
+  status,
+}: {
+  runId: string;
+  serverId: string;
+  status: string;
+}) {
+  const [text, setText] = useState("");
+  const preRef = useRef<HTMLPreElement>(null);
+  const running = status === "running";
+
+  useEffect(() => {
+    if (running) {
+      const es = new EventSource(api.serverRunLogStreamUrl(runId, serverId), {
+        withCredentials: true,
+      });
+      es.onmessage = (e) => setText((t) => t + e.data + "\n");
+      es.addEventListener("done", () => es.close());
+      es.onerror = () => es.close();
+      return () => es.close();
+    }
+    // terminal: fetch the whole file once
+    api
+      .getServerRunLog(runId, serverId)
+      .then(setText)
+      .catch(() => setText(""));
+  }, [running, runId, serverId]);
+
+  useEffect(() => {
+    preRef.current?.scrollTo(0, preRef.current.scrollHeight);
+  }, [text]);
+
+  return (
+    <pre
+      ref={preRef}
+      className="mt-3 max-h-80 overflow-auto whitespace-pre-wrap rounded bg-black/40 p-2 font-mono text-xs text-text-secondary"
+    >
+      {text || (running ? "Waiting for output…" : "No output.")}
+    </pre>
+  );
+}
+
 export default function RunDetail() {
   const { runId } = useParams<{ runId: string }>();
   const queryClient = useQueryClient();
@@ -65,32 +110,29 @@ export default function RunDetail() {
             </div>
             <div className="space-y-2">
               {sr.steps.map((st: StepRun) => (
-                <details
+                <div
                   key={st.order}
-                  className="rounded-lg border border-border bg-surface-2 p-2"
+                  className="flex items-center justify-between gap-2 rounded-lg border border-border bg-surface-2 p-2"
                 >
-                  <summary className="flex cursor-pointer items-center justify-between gap-2">
-                    <span className="text-sm text-text-primary">{st.name}</span>
-                    <span className="flex items-center gap-2">
-                      <span className="text-xs text-text-secondary">
-                        attempts: {st.attempts}
-                        {st.status === "failed" ? ` · exit ${st.exit_code}` : ""}
-                      </span>
-                      <StatusBadge status={st.status} />
+                  <span className="text-sm text-text-primary">{st.name}</span>
+                  <span className="flex items-center gap-2">
+                    <span className="text-xs text-text-secondary">
+                      attempts: {st.attempts}
+                      {st.status === "failed" ? ` · exit ${st.exit_code}` : ""}
                     </span>
-                  </summary>
-                  {(st.stdout || st.stderr) && (
-                    <pre className="mt-2 max-h-64 overflow-auto rounded bg-black/40 p-2 font-mono text-xs text-text-secondary">
-                      {st.stdout}
-                      {st.stderr ? `\n${st.stderr}` : ""}
-                    </pre>
-                  )}
-                </details>
+                    <StatusBadge status={st.status} />
+                  </span>
+                </div>
               ))}
               {sr.steps.length === 0 && (
                 <p className="text-xs text-text-secondary">No steps yet.</p>
               )}
             </div>
+            <ServerLog
+              runId={run.run_id}
+              serverId={sr.server_id}
+              status={sr.status}
+            />
           </Card>
         ))}
         {run.server_runs.length === 0 && (
diff --git a/web/lib/api.ts b/web/lib/api.ts
index 6d13f38..157f87b 100644
--- a/web/lib/api.ts
+++ b/web/lib/api.ts
@@ -95,6 +95,7 @@ export interface Settings {
   alerts: AlertSettings;
   email: EmailSettings;
   secrets: SecretsSettings;
+  workflow_log_retention_days?: number | null;
 }
 
 export interface SecretGroupSummary {
@@ -171,8 +172,7 @@ export interface StepRun {
   status: string;
   attempts: number;
   exit_code: number;
-  stdout: string;
-  stderr: string;
+  log_offset: number;
   output_env: Record<string, string>;
   started_at?: string;
   finished_at?: string;
@@ -290,7 +290,11 @@ export const api = {
     return request<Settings>("/settings");
   },
 
-  saveSettings(settings: { alerts: AlertSettings; email: EmailSettings }): Promise<{ saved: boolean }> {
+  saveSettings(settings: {
+    alerts: AlertSettings;
+    email: EmailSettings;
+    workflow_log_retention_days?: number | null;
+  }): Promise<{ saved: boolean }> {
     return request<{ saved: boolean }>("/settings", {
       method: "PUT",
       body: JSON.stringify(settings),
@@ -460,4 +464,16 @@ export const api = {
   cancelRun(runId: string): Promise<void> {
     return request<void>(`/runs/${runId}/cancel`, { method: "POST" });
   },
+
+  async getServerRunLog(runId: string, serverId: string): Promise<string> {
+    const res = await fetch(`/api/runs/${runId}/servers/${serverId}/logs`, {
+      credentials: "include",
+    });
+    if (!res.ok) throw new Error("no logs");
+    return res.text();
+  },
+
+  serverRunLogStreamUrl(runId: string, serverId: string): string {
+    return `/api/runs/${runId}/servers/${serverId}/logs/stream`;
+  },
 };