Workflow Metadata Handling Refactoring

ui/src/components/play-button.tsx

@@ -4,7 +4,7 @@ import { PlayButtonProps, InputField } from "../types/play-button.types";
 
 export const PlayButton: React.FC<PlayButtonProps> = ({
   workflowName,
-  workflowMetadata,
+  workflowData
 }) => {
   const [showModal, setShowModal] = useState<boolean>(false);
   const [showLogViewer, setShowLogViewer] = useState<boolean>(false);
@@ -15,14 +15,15 @@ export const PlayButton: React.FC<PlayButtonProps> = ({
   const [logPosition, setLogPosition] = useState<number>(0);
   const [workflowStatus, setWorkflowStatus] = useState<string>("idle");
 
+  const inputSchema = workflowData?.input_schema;
   const openModal = () => {
     if (!workflowName) return;
 
     setShowModal(true);
     setError(null);
 
-    if (workflowMetadata && workflowMetadata.input_schema) {
-      const fields = workflowMetadata.input_schema.map((input: any) => ({
+    if (inputSchema) {
+      const fields = inputSchema.map((input: any) => ({
         name: input.name,
         type: input.type,
         required: input.required,
@@ -157,7 +158,7 @@ export const PlayButton: React.FC<PlayButtonProps> = ({
             {/* header */}
             <div className="flex items-center justify-between border-b border-gray-700 p-4">
               <h3 className="m-0 text-lg">
-                Execute Workflow: {workflowMetadata?.name || workflowName}
+                Execute Workflow: {workflowName}
               </h3>
               <button
                 onClick={closeModal}

ui/src/components/sidebar.tsx

@@ -1,23 +1,12 @@
 import React from "react";
 import WorkflowItem from "./workflow-item";
-import { WorkflowMetadata } from "../types/workflow-layout.types";
-
-interface SidebarProps {
-  workflows: string[];
-  onSelect: (workflow: string) => void;
-  selected: string | null;
-  workflowMetadata: WorkflowMetadata | null;
-  onUpdateMetadata: (metadata: WorkflowMetadata) => Promise<void>;
-  allWorkflowsMetadata?: Record<string, WorkflowMetadata>;
-}
+import { SidebarProps } from "../types/sidebar.types";
 
 export const Sidebar: React.FC<SidebarProps> = ({
-  workflows,
   onSelect,
   selected,
-  workflowMetadata,
-  onUpdateMetadata,
-  allWorkflowsMetadata = {},
+  workflowsData,
+  onUpdateWorkflow,
 }) => (
   <aside className="w-[250px] border-r border-[#542e2e] p-3 bg-[#2a2a2a] text-white flex flex-col overflow-auto">
     {/* logo */}
@@ -32,18 +21,14 @@ export const Sidebar: React.FC<SidebarProps> = ({
     <h3 className="text-lg text-[#ddd]">Workflows</h3>
 
     <ul className="m-0 p-0">
-      {workflows.map((id) => (
+      {Object.keys(workflowsData).map((id) => (
         <WorkflowItem
           key={id}
           id={id}
           selected={id === selected}
-          metadata={
-            id === selected
-              ? workflowMetadata ?? undefined
-              : allWorkflowsMetadata[id]
-          }
+          workflow={workflowsData[id]}
           onSelect={onSelect}
-          onUpdateMetadata={onUpdateMetadata}
+          onUpdateWorkflow={(workflow) => onUpdateWorkflow(id, workflow)}
         />
       ))}
     </ul>

ui/src/components/workflow-item.tsx

@@ -1,64 +1,60 @@
 import React, { useState, ChangeEvent } from "react";
 import {
-  WorkflowMetadata,
+  Workflow,
   WorkflowItemProps,
 } from "../types/workflow-layout.types";
 
 const WorkflowItem: React.FC<WorkflowItemProps> = ({
   id,
   selected,
-  metadata,
+  workflow,
   onSelect,
-  onUpdateMetadata,
+  onUpdateWorkflow,
 }) => {
   const [isEditing, setIsEditing] = useState(false);
-  const [edited, setEdited] = useState<WorkflowMetadata | null>(null);
+  const [edited, setEdited] = useState<Workflow | null>(null);
   const [submitting, setSubmitting] = useState(false);
 
   const displayName = () => {
-    if (metadata)
+    if (workflow)
       return (
         <>
-          <span className="text-md">{metadata.name}</span>
-          {metadata.version && (
+          <span className="text-md">{workflow.name}</span>
+          {workflow.version && (
             <span className="text-xs text-[#888] ml-1.5">
-              v{metadata.version}
+              v{workflow.version}
             </span>
           )}
         </>
       );
-
-    return (
-      <span className="text-[#ccc]">
-        <span className="opacity-70">Loading workflow…</span>
-        <span className="hidden">{id}</span>
-      </span>
-    );
+    return <span className="text-md">{id}</span>;
   };
 
-  const change =
-    (field: keyof WorkflowMetadata) =>
-    (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
-      edited && setEdited({ ...edited, [field]: e.target.value });
+  const change = 
+    (field: keyof Workflow) => 
+    (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      if (!edited) return;
+      setEdited({ ...edited, [field]: e.target.value });
+    };
 
   const save = async () => {
     if (!edited) return;
     setSubmitting(true);
-    await onUpdateMetadata(edited).finally(() => setSubmitting(false));
+    await onUpdateWorkflow(edited).finally(() => setSubmitting(false));
     setIsEditing(false);
   };
 
-  const editForm = metadata && (
+  const editForm = workflow && (
     <div>
-      {(["name", "version"] as (keyof WorkflowMetadata)[]).map((f) => (
+      {(["name", "version"] as const).map((f) => (
         <label key={f} className="block text-xs mb-2">
           <span className="block text-[#aaa] mb-1">
             {f[0]?.toUpperCase() + f.slice(1)}
           </span>
           <input
             className="w-full bg-[#333] border border-[#555] text-white p-1.5 rounded text-xs"
             value={edited?.[f] ?? ""}
-            onChange={change(f)}
+            onChange={change(f as keyof Workflow)}
           />
         </label>
       ))}
@@ -92,18 +88,18 @@ const WorkflowItem: React.FC<WorkflowItemProps> = ({
     </div>
   );
 
-  const readOnly = metadata && (
+  const readOnly = workflow && (
     <>
       <div className="mb-2">
         <div className="text-xs text-[#aaa] mb-1">Description</div>
-        <div className="text-xs">{metadata.description}</div>
+        <div className="text-xs">{workflow.description}</div>
       </div>
 
-      {metadata.input_schema?.length && (
+      {Array.isArray(workflow.input_schema) && workflow.input_schema.length > 0 && (
         <>
           <div className="text-xs text-[#aaa] mb-1">Input Parameters</div>
           <ul className="pl-4 text-xs list-disc marker:text-[#7ac5ff]">
-            {metadata.input_schema.map((p) => (
+            {workflow.input_schema.map((p) => (
               <li key={p.name} className="mb-1">
                 <span className="text-[#7ac5ff]">{p.name}</span>
                 <span className="text-[#aaa]"> ({p.type})</span>
@@ -131,14 +127,14 @@ const WorkflowItem: React.FC<WorkflowItemProps> = ({
       </li>
 
       {/* details panel */}
-      {selected && metadata && (
+      {selected && workflow && (
         <li className="py-2 pl-4 border-l border-[#444] my-1 ml-1">
           <div className="flex justify-between items-center mb-2">
             <h4 className="m-0 text-sm text-[#ddd]">Details</h4>
             {!isEditing && (
               <button
                 onClick={() => {
-                  setEdited({ ...metadata });
+                  setEdited({ ...workflow });
                   setIsEditing(true);
                 }}
                 className="bg-[#444] text-white py-1 px-2 rounded text-xs"