UI Hermes workflow node editor: catalog-driven params & validation

ui/client/bundle/index.html

@@ -7,7 +7,7 @@
   <title>Hera UI</title>
   <link rel="icon" type="image/svg+xml" href="/favicon.svg">
   <link rel="alternate icon" type="image/png" href="/favicon.png">
-  <script type="module" crossorigin src="/assets/index-D_qnatyS.js"></script>
+  <script type="module" crossorigin src="/assets/index-CgXTaMYk.js"></script>
   <link rel="stylesheet" crossorigin href="/assets/index-B2gUmkKP.css">
 </head>
 

ui/client/src/buildNumber.ts

@@ -1 +1 @@
-export const buildNumber = '20260617.1';
+export const buildNumber = '20260624.1';

ui/client/src/components/details/DetailsViewDocId.tsx

@@ -36,7 +36,7 @@ export const DetailsViewDocId = ({
             />
           )
           : (
-            <Box sx={{ p: 2, height: '100%', overflow: 'auto' }}>
+            <Box sx={{ p: 2, height: '100%', overflow: 'auto', display: 'flex', flexDirection: 'column', minHeight: 0 }}>
               <DetailsViewDocument
                 doc={docObj}
                 setDoc={(newDoc) => changeDocument(newDoc.data)}

ui/client/src/components/details/DetailsViewDocumentContent.tsx

@@ -8,13 +8,14 @@ import { AgentConfig } from '../../shared/AgentConfig';
 import { FORBIDDEN_FIELDS } from '../../shared/constants';
 import { TabKind } from '../../shared/tabKind';
 import { ProjectDocument, WorkflowDesc } from '../../shared/types';
-import { isWorkflowDoc } from '../../shared/workflow';
+import { getWorkflowSolver, isWorkflowDoc, setWorkflowSolver } from '../../shared/workflow';
 import { copyWithout, reorderEntries } from '../../utils/utils';
 import { AgentConfigEditor } from '../agents/AgentConfigEditor';
 import { WorkflowEditor } from '../workflow/WorkflowEditor';
 import { DetailsViewDocumentHeader } from './DetailsViewDocumentHeader';
 import { DocView, DocViewSelector } from './DocViewSelector';
 import { DetailsViewItem, keyForDetailsViewItem } from './DetailsViewItem';
+import { DetailsVisibility, DetailsVisibilityToggle } from './DetailsVisibilityToggle';
 
 const HIDE_ON_DESC = ['datasourceName', 'toolkit', 'version'];
 const isAgentConfigDoc = (doc: ProjectDocument) => {
@@ -40,6 +41,9 @@ export const DetailsViewDocumentContent = ({
   const isWorkflow = isWorkflowDoc(shownDoc);
 
   const [docView, setDocView] = useState<DocView>(() => defaultView(doc.data));
+  const [detailsVisibility, setDetailsVisibility] = useState<DetailsVisibility>(DetailsVisibility.Both);
+  const showHeader = detailsVisibility === DetailsVisibility.Both;
+  const showTree = detailsVisibility !== DetailsVisibility.None;
 
   // When switching to a different document, reset to its default view.
   useEffect(() => {
@@ -79,6 +83,10 @@ export const DetailsViewDocumentContent = ({
           setDocView={setDocView}
           enabled={{ [TabKind.Agent]: isAgent, [TabKind.Workflow]: isWorkflow }}
         />
+        <DetailsVisibilityToggle
+          value={detailsVisibility}
+          onChange={setDetailsVisibility}
+        />
         {isChanged
           ? (<>
             <ButtonTooltip
@@ -96,23 +104,26 @@ export const DetailsViewDocumentContent = ({
           </>)
           : null}
       </Stack>
-      <DetailsViewDocumentHeader
-        docid={doc.docid}
-        shownDoc={shownDoc}
-        setShownDoc={setShownDoc}
-        showFormulated={showFormulated}
-        extraFields={!showKindEditor
-          ? []
-          : [
-            { name: 'type', value: shownDoc.type },
-            { name: 'dataFormat', value: shownDoc.dataFormat },
-          ]
-        }
-      />
-      <SimpleTreeView
-        defaultExpandedItems={[keyForDetailsViewItem('desc'), keyForDetailsViewItem('resource')]}
-      >
-        {reorderEntries(Object.entries(shownDoc), ['desc', 'resource']).map(([k, v]) => {
+      {showHeader && (
+        <DetailsViewDocumentHeader
+          docid={doc.docid}
+          shownDoc={shownDoc}
+          setShownDoc={setShownDoc}
+          showFormulated={showFormulated}
+          extraFields={!showKindEditor
+            ? []
+            : [
+              { name: 'type', value: shownDoc.type },
+              { name: 'dataFormat', value: shownDoc.dataFormat },
+            ]
+          }
+        />
+      )}
+      {showTree && (
+        <SimpleTreeView
+          defaultExpandedItems={[keyForDetailsViewItem('desc'), keyForDetailsViewItem('resource')]}
+        >
+          {reorderEntries(Object.entries(shownDoc), ['desc', 'resource']).map(([k, v]) => {
           if (FORBIDDEN_FIELDS.includes(k)) {
             return null;
           }
@@ -137,7 +148,19 @@ export const DetailsViewDocumentContent = ({
             />
           );
         })}
-      </SimpleTreeView>
+        {showWorkflow && (
+          <DetailsViewItem
+            itemKey="solver"
+            itemValue={getWorkflowSolver((shownDoc.desc as WorkflowDesc).workflow)}
+            parentKey={undefined}
+            setItemValue={newVal => setShownDoc({
+              ...shownDoc,
+              desc: { ...shownDoc.desc, workflow: setWorkflowSolver((shownDoc.desc as WorkflowDesc).workflow, newVal) } as WorkflowDesc,
+            })}
+          />
+        )}
+        </SimpleTreeView>
+      )}
       {showAgentConfig
         ? (
           <AgentConfigEditor

ui/client/src/components/details/DetailsViewItem.tsx

@@ -4,6 +4,7 @@ import { TreeItem } from '@mui/x-tree-view';
 import { ButtonTooltip } from '../../elements/ButtonTooltip';
 import { DetailsViewItemName } from './DetailsViewItemName';
 import { DetailsViewItemSingle } from './DetailsViewItemSingle';
+import { FieldDef } from './fieldDef';
 import { EditAsJsonButton } from './EditAsJsonButton';
 import { SelectDataFormat } from './SelectDataFormat';
 
@@ -17,12 +18,16 @@ export const DetailsViewItem = ({
   setItemValue,
   setItemKey = undefined,
   parentKey,
+  def = undefined,
 }: {
   itemKey: string,
   itemValue: any,
   setItemValue: (newVal: any) => void,
   setItemKey?: (newKey: string | undefined) => void | undefined,
   parentKey?: string,
+  // Definition of this field: `required` for the value editor, `children` for
+  // the sub-fields below it.
+  def?: FieldDef,
 }) => {
   const key = keyForDetailsViewItem(itemKey, parentKey);
   const isTree = typeof itemValue === 'object' && itemValue !== null;
@@ -50,7 +55,9 @@ export const DetailsViewItem = ({
           spacing={1}
           justifyItems={'stretch'}
           alignItems={'center'}
-          style={{ marginTop: 7 }}
+          // Bottom space on every row reserves room for a field's "required"
+          // helper text, so it shows without moving anything.
+          style={{ marginTop: 7, marginBottom: 14 }}
         >
 
           <DetailsViewItemName
@@ -90,6 +97,7 @@ export const DetailsViewItem = ({
                 <DetailsViewItemSingle
                   itemValue={itemValue}
                   setItemValue={newVal => setItemValue(newVal)}
+                  def={def}
                 />
               )
             )
@@ -138,6 +146,7 @@ export const DetailsViewItem = ({
               parentKey={key}
               setItemValue={newVal => setItemValue({ ...itemValue, [k]: newVal })}
               setItemKey={isDir ? undefined : changeKey}
+              def={def?.children?.[k]}
             />
           )
         })}

ui/client/src/components/details/DetailsViewItemSingle.tsx

@@ -1,6 +1,7 @@
 import { TextField } from '@mui/material';
 import { useEffect, useState } from 'react';
 import { SelectProperty } from '../../elements/SelectProperty';
+import { FieldDef } from './fieldDef';
 
 enum ItemTypesEnum {
   number = 'number',
@@ -21,11 +22,14 @@ const calcItemType = (val: any) => {
 export const DetailsViewItemSingle = ({
   itemValue,
   setItemValue,
+  def = undefined,
 }: {
   itemValue: any,
   setItemValue: (newVal: any) => void,
+  def?: FieldDef,
 }) => {
   const [itemType, setItemType] = useState<ItemTypesEnum>(() => calcItemType(itemValue));
+  const missing = !!def?.required && (itemValue === undefined || itemValue === null || itemValue === '');
 
   useEffect(() => {
     setItemType(calcItemType(itemValue));
@@ -50,6 +54,17 @@ export const DetailsViewItemSingle = ({
         onKeyDown={e => e.stopPropagation()}
         fullWidth
         disabled={itemType === ItemTypesEnum.null}
+        error={missing}
+        helperText={missing ? 'required' : undefined}
+        // Float the "required" text just below the field: absolute so it adds no
+        // height (required and normal rows stay the same height), zIndex so it is
+        // not painted over by the next row.
+        sx={{ position: 'relative' }}
+        slotProps={{
+          formHelperText: {
+            sx: { position: 'absolute', top: '100%', left: 0, m: 0, lineHeight: 1, zIndex: 1 },
+          },
+        }}
       />
       <SelectProperty
         label="Type"

ui/client/src/components/details/DetailsVisibilityToggle.tsx

@@ -0,0 +1,51 @@
+import { KeyboardArrowDown, KeyboardArrowUp, KeyboardDoubleArrowDown } from '@mui/icons-material';
+import { ReactNode } from 'react';
+import { ButtonTooltip } from '../../elements/ButtonTooltip';
+
+// How much of a document's detail section is shown above the editor:
+//   Both — read-only header + the editable field tree
+//   Tree — field tree only (header hidden)
+//   None — both hidden, giving the editor the most space
+export enum DetailsVisibility {
+  Both = 'both',
+  Tree = 'tree',
+  None = 'none',
+}
+
+// Each press reveals less, then wraps back to showing everything.
+const NEXT: { [key in DetailsVisibility]: DetailsVisibility } = {
+  [DetailsVisibility.Both]: DetailsVisibility.Tree,
+  [DetailsVisibility.Tree]: DetailsVisibility.None,
+  [DetailsVisibility.None]: DetailsVisibility.Both,
+};
+
+// The chevron points down when more is visible, up when less; the double
+// chevron marks the fully-expanded state.
+const ICON: { [key in DetailsVisibility]: ReactNode } = {
+  [DetailsVisibility.Both]: <KeyboardDoubleArrowDown />,
+  [DetailsVisibility.Tree]: <KeyboardArrowDown />,
+  [DetailsVisibility.None]: <KeyboardArrowUp />,
+};
+
+const TITLE: { [key in DetailsVisibility]: string } = {
+  [DetailsVisibility.Both]: 'Hide header',
+  [DetailsVisibility.Tree]: 'Hide fields',
+  [DetailsVisibility.None]: 'Show details',
+};
+
+export const DetailsVisibilityToggle = ({
+  value,
+  onChange,
+}: {
+  value: DetailsVisibility,
+  onChange: (value: DetailsVisibility) => void,
+}) => {
+  return (
+    <ButtonTooltip
+      title={TITLE[value]}
+      onClick={() => onChange(NEXT[value])}
+    >
+      {ICON[value]}
+    </ButtonTooltip>
+  );
+};

ui/client/src/components/details/fieldDef.ts

@@ -0,0 +1,8 @@
+// Generic, domain-agnostic definition of a field in the details tree. Recursive:
+// `children` holds the defs of an object field's sub-fields, keyed by key — so
+// one `def` describes a whole subtree. Extend with more details (type, default,
+// help, …); callers pass one `def` and the field reads what it needs.
+export interface FieldDef {
+  required?: boolean;
+  children?: { [key: string]: FieldDef };
+}

ui/client/src/components/workflow/WorkflowContextMenu.tsx

@@ -0,0 +1,45 @@
+import { Menu, MenuItem } from '@mui/material';
+
+export enum WorkflowContextMenuKind {
+  Node = 'node',
+  Edge = 'edge',
+}
+
+// Right-click target: a node, or an edge (a requires link), anchored at a point.
+export type WorkflowContextMenuTarget =
+  | { kind: WorkflowContextMenuKind.Node, name: string, x: number, y: number }
+  | { kind: WorkflowContextMenuKind.Edge, source: string, target: string, x: number, y: number };
+
+// The right-click menu for the workflow graph: delete a node or remove a
+// requires edge, anchored at the click point.
+export const WorkflowContextMenu = ({
+  menu,
+  onClose,
+  onDeleteNode,
+  onRemoveRequire,
+}: {
+  menu: WorkflowContextMenuTarget | null,
+  onClose: () => void,
+  onDeleteNode: (name: string) => void,
+  onRemoveRequire: (source: string, target: string) => void,
+}) => {
+  return (
+    <Menu
+      open={menu !== null}
+      onClose={onClose}
+      anchorReference="anchorPosition"
+      anchorPosition={menu ? { top: menu.y, left: menu.x } : undefined}
+    >
+      {menu?.kind === WorkflowContextMenuKind.Node && (
+        <MenuItem onClick={() => { onDeleteNode(menu.name); onClose(); }}>
+          Delete node “{menu.name}”
+        </MenuItem>
+      )}
+      {menu?.kind === WorkflowContextMenuKind.Edge && (
+        <MenuItem onClick={() => { onRemoveRequire(menu.source, menu.target); onClose(); }}>
+          Remove requirement ({menu.source} → {menu.target})
+        </MenuItem>
+      )}
+    </Menu>
+  );
+};

ui/client/src/components/workflow/WorkflowEditor.tsx

@@ -1,7 +1,8 @@
-import { Box, TextField, Typography } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 import { useState } from 'react';
 import { WorkflowBlock, WorkflowData, WorkflowNode } from '../../shared/types';
 import { getWorkflowBlock, isTopLevelBlock, normalizeRequires } from '../../shared/workflow';
+import { useNodeCatalog } from './useNodeCatalog';
 import { WorkflowGraph } from './WorkflowGraph';
 
 // Returns the node's `requires` with oldName replaced by newName, preserving
@@ -26,6 +27,7 @@ export const WorkflowEditor = ({
   setWorkflow: (workflow: WorkflowData) => void,
 }) => {
   const [selectedNode, setSelectedNode] = useState<string | undefined>(undefined);
+  const { catalog } = useNodeCatalog();
   const block = getWorkflowBlock(workflow);
 
   // Preserve the original nesting (the block may be wrapped in an extra
@@ -114,19 +116,13 @@ export const WorkflowEditor = ({
   };
 
   return (
-    <Box sx={{ maxWidth: 900 }}>
+    <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
       {!block
         ? <Typography color="text.secondary">No workflow found in this document.</Typography>
         : (
           <>
-            <TextField
-              label="Solver"
-              size="small"
-              value={block.solver ?? ''}
-              onChange={(e) => setBlock({ ...block, solver: e.target.value })}
-              sx={{ mb: 2 }}
-            />
             <WorkflowGraph
+              catalog={catalog}
               nodeNames={nodeNames}
               nodes={block.nodes ?? {}}
               selectedNode={selectedNode}