feat: More verbose logging on workflow logs

2026-07-20 17:35:58 +01:00
parent 82d7dde5f8
commit bea545e873
10 changed files with 187 additions and 48 deletions
@@ -148,13 +148,47 @@ function LogTerminal({ runId, server }: { runId: string; server: ServerRun }) {
                )}
            </div>
            <div ref={preRef} className="max-h-[340px] overflow-auto whitespace-pre-wrap px-4 py-3.5 font-mono text-[12.5px] leading-relaxed text-text-secondary">
-                {text || (running ? "Waiting for output…" : "No output.")}
+                {text ? <LogLines text={text} /> : running ? "Waiting for output…" : "No output."}
                {running && text && <span className="ml-0.5 inline-block h-3.5 w-[7px] translate-y-[2px] bg-accent caret-blink align-baseline" />}
            </div>
        </div>
    );
 }

+// LogLines renders the raw server-run log, parsing each line's leading UTC
+// timestamp ([2026-07-20T12:04:02.000Z]) and rendering it in the viewer's local
+// timezone. Event markers (===== …) are highlighted so the run's shape scans.
+const TS_RE = /^\[(\d{4}-\d{2}-\d{2}T[\d:.]+Z)\]\s?(.*)$/;
+
+function LogLines({ text }: { text: string }) {
+    const lines = text.replace(/\n$/, "").split("\n");
+    return (
+        <>
+            {lines.map((line, i) => {
+                const m = TS_RE.exec(line);
+                if (!m) {
+                    return (
+                        <span key={i} className="block">
+                            {line || " "}
+                        </span>
+                    );
+                }
+                const local = new Date(m[1]).toLocaleTimeString([], { hour12: false });
+                const body = m[2];
+                const isMarker = body.startsWith("=====");
+                return (
+                    <span key={i} className="block">
+                        <span className="select-none text-[#565b74]" title={m[1]}>
+                            {local}{" "}
+                        </span>
+                        <span className={isMarker ? "font-semibold text-accent" : ""}>{body || " "}</span>
+                    </span>
+                );
+            })}
+        </>
+    );
+}
+
 // ---- step list ------------------------------------------------------------

 function StepList({ server, now }: { server: ServerRun; now: number }) {