feat(web): add input display

web/src/components/RunDisplay.tsx

@@ -1,3 +1,4 @@
+import { RunInputs } from "@/components/RunInputs";
 import { LiveStatus } from "./LiveStatus";
 import { RunOutputs } from "@/components/RunOutputs";
 import {
@@ -18,17 +19,11 @@ export async function RunDisplay({
 }: {
   run: Awaited<ReturnType<typeof findAllRuns>>[0];
 }) {
-  // const [view, setView] = useState<any>();
   return (
     <Dialog>
       <DialogTrigger
         asChild
         className="appearance-none hover:cursor-pointer"
-        // onClick={async () => {
-        //   if (view) return;
-        //   const _view = await callServerPromise(getRunsOutputDisplay(run.id));
-        //   setView(_view);
-        // }}
       >
         <TableRow>
           <TableCell>{run.version?.version}</TableCell>
@@ -45,6 +40,7 @@ export async function RunDisplay({
           </DialogDescription>
         </DialogHeader>
         <div className="max-h-96 overflow-y-scroll">
+          <RunInputs run={run}/>
           <Suspense>
             <RunOutputs run_id={run.id} />
           </Suspense>

web/src/components/RunInputs.tsx

@@ -0,0 +1,51 @@
+import { OutputRender } from "./RunDisplay";
+import { CodeBlock } from "@/components/CodeBlock";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { findAllRuns } from "@/server/findAllRuns";
+import { getRunsOutput } from "@/server/getRunsOutput";
+
+export async function RunInputs({
+  run,
+}: {
+  run: Awaited<ReturnType<typeof findAllRuns>>[0];
+}) {
+  return (
+    <>
+      {run.workflow_inputs && (
+        <Table className="table-fixed">
+          <TableHeader className="bg-background top-0 sticky">
+            <TableRow>
+              <TableHead className="w-[200px]">File</TableHead>
+              <TableHead className="">Input</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {Object.entries(run.workflow_inputs).map(([key, data]) => {
+              let imageUrl;
+              try {
+                const url = new URL(data);
+                if (url.pathname.endsWith('.png')) {
+                  imageUrl = data;
+                }
+              } catch (_) {
+              }
+              return (
+                <TableRow key={key}>
+                  <TableCell>{key}</TableCell>
+                  {imageUrl ? <TableCell><img className="w-[200px] aspect-square" src={imageUrl}></img></TableCell> : <TableCell>{data}</TableCell>}
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+      )}
+    </>
+  );
+}

web/src/components/RunOutputs.tsx

@@ -12,22 +12,8 @@ import { getRunsOutput } from "@/server/getRunsOutput";
 
 export async function RunOutputs({ run_id }: { run_id: string }) {
   const outputs = await getRunsOutput(run_id);
-  // console.log("Getting runs out put");
-
-  // const [outputs, setOutputs] =
-  //   useState<Awaited<ReturnType<typeof getRunsOutput>>>();
-
-  // useEffect(() => {
-  //   if (!run_id) return;
-  //   // fetch(`/api/run?run_id=${run_id}`)
-  //   //   .then((x) => x.json())
-  //   //   .then((x) => setOutputs(x));
-  //   callServerPromise(getRunsOutput(run_id).then((x) => setOutputs(x)));
-  // }, [run_id]);
-
   return (
     <Table className="table-fixed">
-      {/* <TableCaption>A list of your recent runs.</TableCaption> */}
       <TableHeader className="bg-background top-0 sticky">
         <TableRow>
           <TableHead className="w-[200px]">File</TableHead>