From d4e4c2c7d281c88567d856d45189d4b5e415681c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Sun, 16 Aug 2026 00:11:27 +0200
Subject: [PATCH] Show the full resolved command and variables on the run
 detail page

The command lived in a narrow truncate'd grid cell, so anything but a
short invocation was unreadable. It now gets its own scrollable code
block, plus a breakdown of each variable (using the script's configured
labels when available) and the value it resolved to for that run.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 app/src/app/(app)/runs/[runId]/page.tsx | 56 ++++++++++++++++++++++---
 1 file changed, 50 insertions(+), 6 deletions(-)

diff --git a/app/src/app/(app)/runs/[runId]/page.tsx b/app/src/app/(app)/runs/[runId]/page.tsx
index dfd8312..9c4a421 100644
--- a/app/src/app/(app)/runs/[runId]/page.tsx
+++ b/app/src/app/(app)/runs/[runId]/page.tsx
@@ -5,6 +5,7 @@ import { eq } from "drizzle-orm";
 import { notFound } from "next/navigation";
 import { getDb } from "@/lib/db/client";
 import { runs } from "@/lib/db/schema";
+import { getScript } from "@/lib/config/load";
 import { readLogTail } from "@/lib/runner/log-file";
 import { RunTerminal } from "@/components/runs/run-terminal";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@@ -13,6 +14,13 @@ interface RunDetailPageProps {
   params: Promise<{ runId: string }>;
 }
 
+function formatVariableValue(value: unknown): string {
+  if (value === undefined || value === null || value === "") return "—";
+  if (Array.isArray(value)) return value.length ? value.join(", ") : "—";
+  if (typeof value === "boolean") return value ? "true" : "false";
+  return String(value);
+}
+
 export async function generateMetadata({
   params,
 }: RunDetailPageProps): Promise<Metadata> {
@@ -35,12 +43,25 @@ export default async function RunDetailPage({ params }: RunDetailPageProps) {
     run.logFilePath,
   );
 
+  const script = getScript(run.scriptId);
+  const variableEntries = script
+    ? script.variables.map((variable) => ({
+        key: variable.name,
+        label: variable.label ?? variable.name,
+        value: run.variables[variable.name],
+      }))
+    : Object.entries(run.variables).map(([key, value]) => ({
+        key,
+        label: key,
+        value,
+      }));
+
   return (
     <div className="mx-auto flex max-w-3xl flex-col gap-4">
       <Card>
         <CardHeader>
           <CardTitle>{run.scriptName}</CardTitle>
-          <dl className="text-muted-foreground grid grid-cols-2 gap-x-4 gap-y-1 text-xs sm:grid-cols-4">
+          <dl className="text-muted-foreground grid grid-cols-2 gap-x-4 gap-y-1 text-xs sm:grid-cols-3">
             <div>
               <dt className="font-medium">Triggered by</dt>
               <dd>{run.triggeredBy}</dd>
@@ -51,17 +72,40 @@ export default async function RunDetailPage({ params }: RunDetailPageProps) {
                 {run.startedAt ? new Date(run.startedAt).toLocaleString() : "-"}
               </dd>
             </div>
-            <div>
-              <dt className="font-medium">Command</dt>
-              <dd className="truncate font-mono">{run.resolvedCommand}</dd>
-            </div>
             <div>
               <dt className="font-medium">Run ID</dt>
               <dd className="truncate font-mono">{run.id}</dd>
             </div>
           </dl>
         </CardHeader>
-        <CardContent>
+        <CardContent className="flex flex-col gap-4">
+          <div className="flex flex-col gap-1.5">
+            <span className="text-muted-foreground text-xs font-medium">
+              Command
+            </span>
+            <pre className="bg-muted overflow-x-auto rounded-md p-3 font-mono text-xs whitespace-pre">
+              {run.resolvedCommand}
+            </pre>
+          </div>
+
+          {variableEntries.length > 0 && (
+            <div className="flex flex-col gap-1.5">
+              <span className="text-muted-foreground text-xs font-medium">
+                Variables
+              </span>
+              <dl className="grid gap-x-6 gap-y-2 rounded-md border p-3 text-xs sm:grid-cols-2">
+                {variableEntries.map(({ key, label, value }) => (
+                  <div key={key} className="flex flex-col gap-0.5">
+                    <dt className="text-muted-foreground">{label}</dt>
+                    <dd className="font-mono break-all">
+                      {formatVariableValue(value)}
+                    </dd>
+                  </div>
+                ))}
+              </dl>
+            </div>
+          )}
+
           <RunTerminal
             runId={run.id}
             initialStatus={run.status}