feat(web): update machine status view

web/src/app/workflows/[workflow_id]/page.tsx

@@ -5,6 +5,7 @@ import {
   CreateDeploymentButton,
   MachineSelect,
   RunWorkflowButton,
+  VersionDetails,
   VersionSelect,
 } from "@/components/VersionSelect";
 import {
@@ -46,6 +47,8 @@ export default async function Page({
               <CreateDeploymentButton workflow={workflow} machines={machines} />
             </div>
 
+            <VersionDetails workflow={workflow} />
+
             <MachinesWSMain machines={machines} />
           </CardContent>
         </Card>

web/src/components/MachinesWS.tsx

@@ -1,6 +1,8 @@
 "use client";
 
+import { Badge } from "@/components/ui/badge";
 import type { getMachines } from "@/server/curdMachine";
+import { Check, CircleOff, SatelliteDish } from "lucide-react";
 import React, { useEffect } from "react";
 import useWebSocket, { ReadyState } from "react-use-websocket";
 import { create } from "zustand";
@@ -36,11 +38,13 @@ export function MachinesWSMain(props: {
   machines: Awaited<ReturnType<typeof getMachines>>;
 }) {
   return (
-    <div className="flex flex-col gap-2 mt-6">
+    <div className="flex flex-col gap-2 mt-4">
       Machine Status
-      {props.machines.map((x) => (
+      <div className="flex flex-wrap gap-2">
-        <MachineWS key={x.id} machine={x} />
+        {props.machines.map((x) => (
-      ))}
+          <MachineWS key={x.id} machine={x} />
+        ))}
+      </div>
     </div>
   );
 }
@@ -55,17 +59,19 @@ function MachineWS({
   const { lastMessage, readyState } = useWebSocket(
     `${wsEndpoint}/comfyui-deploy/ws`,
     {
-      shouldReconnect: ()=> true,
+      shouldReconnect: () => true,
       reconnectAttempts: 20,
       reconnectInterval: 1000,
     }
   );
 
   const connectionStatus = {
-    [ReadyState.CONNECTING]: "Connecting",
+    [ReadyState.CONNECTING]: (
-    [ReadyState.OPEN]: "Open",
+      <SatelliteDish size={14} className="text-orange-500" />
-    [ReadyState.CLOSING]: "Closing",
+    ),
-    [ReadyState.CLOSED]: "Closed",
+    [ReadyState.OPEN]: <Check size={14} className="text-green-500" />,
+    [ReadyState.CLOSING]: <CircleOff size={14} className="text-orange-500" />,
+    [ReadyState.CLOSED]: <CircleOff size={14} className="text-red-500" />,
     [ReadyState.UNINSTANTIATED]: "Uninstantiated",
   }[readyState];
 
@@ -81,8 +87,8 @@ function MachineWS({
   }, [lastMessage]);
 
   return (
-    <div className="text-sm">
+    <Badge className="text-sm flex gap-2 font-normal" variant="outline">
-      {machine.name} - {connectionStatus}
+      {machine.name} {connectionStatus}
-    </div>
+    </Badge>
   );
 }

web/src/components/VersionSelect.tsx

@@ -2,6 +2,7 @@
 
 import { callServerPromise } from "./callServerPromise";
 import { LoadingIcon } from "@/components/LoadingIcon";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
@@ -199,3 +200,48 @@ export function CreateDeploymentButton({
     </DropdownMenu>
   );
 }
+
+const customInputNodes: Record<string, string> = {
+  ComfyUIDeployExternalText: "string",
+};
+
+export function VersionDetails({
+  workflow,
+}: {
+  workflow: Awaited<ReturnType<typeof findFirstTableWithVersion>>;
+}) {
+  const [version] = useQueryState("version", {
+    defaultValue: workflow?.versions[0].version ?? 1,
+    ...parseAsInteger,
+  });
+  const workflow_version = workflow?.versions.find(
+    (x) => x.version === version
+  );
+  return (
+    <div className="mt-4">
+      Workflow Details
+      <div className="border rounded-lg p-2">
+        {workflow_version?.workflow_api && (
+          <div>
+            {Object.entries(workflow_version.workflow_api).map(
+              ([key, value]) => {
+                if (!value.class_type) return <> </>;
+                const nodeType = customInputNodes[value.class_type];
+                if (nodeType) {
+                  const input_id = value.inputs.input_id;
+                  const defaultValue = value.inputs.default_value;
+                  return (
+                    <>
+                      <Badge>{input_id}</Badge> {nodeType} {defaultValue}
+                    </>
+                  );
+                }
+                return <></>;
+              }
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}