@cere/cere-design-system 0.0.28 → 0.0.29

package/dist/index.d.mts

@@ -1681,11 +1681,13 @@ declare const AppBar: React__default.FC<AppBarProps>;
 interface WorkflowTopBarProps extends Omit<BoxProps$1, 'title'> {
     /** Heading shown at the left side of the bar. */
     title?: string;
-    /** Execution identifier displayed in the CID field. */
+    /** Job identifier displayed in the Job ID field. */
     executionId: string;
-    /** Called when the execution ID value changes. */
+    /** Label shown above the job ID input. Defaults to "Job ID". */
+    executionIdLabel?: string;
+    /** Called when the job ID value changes. */
     onExecutionIdChange?: (value: string) => void;
-    /** Called when the execution ID clear action is pressed. */
+    /** Called when the job ID clear action is pressed. */
     onClearExecutionId?: () => void;
     /** Submit button label. */
     submitLabel?: string;
@@ -1730,6 +1732,14 @@ interface WorkflowSideInspectorProps extends PaperProps$1 {
     timestamp?: string;
     /** Duration value shown in metadata section. */
     duration?: string;
+    /** Whether to show the Input field in the details section. Defaults to true. */
+    showInput?: boolean;
+    /** Whether to show the Output field in the details section. Defaults to true. */
+    showOutput?: boolean;
+    /** Whether to show the Timestamp field in the metadata section. Defaults to true. */
+    showTimestamp?: boolean;
+    /** Whether to show the Duration field in the metadata section. Defaults to true. */
+    showDuration?: boolean;
     /** Bottom CTA label. Set to `undefined` or `null` to hide the button. */
     actionLabel?: string | null;
     /** Called when close button is pressed. */

package/dist/index.d.ts

@@ -1681,11 +1681,13 @@ declare const AppBar: React__default.FC<AppBarProps>;
 interface WorkflowTopBarProps extends Omit<BoxProps$1, 'title'> {
     /** Heading shown at the left side of the bar. */
     title?: string;
-    /** Execution identifier displayed in the CID field. */
+    /** Job identifier displayed in the Job ID field. */
     executionId: string;
-    /** Called when the execution ID value changes. */
+    /** Label shown above the job ID input. Defaults to "Job ID". */
+    executionIdLabel?: string;
+    /** Called when the job ID value changes. */
     onExecutionIdChange?: (value: string) => void;
-    /** Called when the execution ID clear action is pressed. */
+    /** Called when the job ID clear action is pressed. */
     onClearExecutionId?: () => void;
     /** Submit button label. */
     submitLabel?: string;
@@ -1730,6 +1732,14 @@ interface WorkflowSideInspectorProps extends PaperProps$1 {
     timestamp?: string;
     /** Duration value shown in metadata section. */
     duration?: string;
+    /** Whether to show the Input field in the details section. Defaults to true. */
+    showInput?: boolean;
+    /** Whether to show the Output field in the details section. Defaults to true. */
+    showOutput?: boolean;
+    /** Whether to show the Timestamp field in the metadata section. Defaults to true. */
+    showTimestamp?: boolean;
+    /** Whether to show the Duration field in the metadata section. Defaults to true. */
+    showDuration?: boolean;
     /** Bottom CTA label. Set to `undefined` or `null` to hide the button. */
     actionLabel?: string | null;
     /** Called when close button is pressed. */

package/dist/index.js

@@ -6651,6 +6651,7 @@ var import_jsx_runtime58 = require("react/jsx-runtime");
 var WorkflowTopBar = ({
   title = "Agent visualization flow chart",
   executionId,
+  executionIdLabel = "Job ID",
   onExecutionIdChange,
   onClearExecutionId,
   submitLabel = "Submit",
@@ -6738,7 +6739,7 @@ var WorkflowTopBar = ({
                                   fontSize: 12,
                                   display: "block"
                                 },
-                                children: "Execution CID"
+                                children: executionIdLabel
                               }
                             ),
                             /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
@@ -6746,7 +6747,7 @@ var WorkflowTopBar = ({
                               {
                                 value: executionId,
                                 onChange: (event) => onExecutionIdChange?.(event.target.value),
-                                inputProps: { "aria-label": "Execution CID value" },
+                                inputProps: { "aria-label": executionIdLabel },
                                 sx: {
                                   width: "100%",
                                   mt: 0.25,
@@ -6764,7 +6765,7 @@ var WorkflowTopBar = ({
                             import_material39.IconButton,
                             {
                               size: "small",
-                              "aria-label": "Clear execution ID",
+                              "aria-label": `Clear ${executionIdLabel.toLowerCase()}`,
                               onClick: onClearExecutionId,
                               sx: { color: "#4A4458", ml: 1 },
                               children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_Cancel.default, { fontSize: "small" })
@@ -6847,6 +6848,10 @@ var WorkflowSideInspector = ({
   cubbyId = "ID:S8787",
   timestamp = "2026-02-11 14:32:10",
   duration = "120ms",
+  showInput = true,
+  showOutput = true,
+  showTimestamp = true,
+  showDuration = true,
   actionLabel,
   onClose,
   onCopyCubbyId,
@@ -6938,11 +6943,13 @@ var WorkflowSideInspector = ({
             )
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_material40.Divider, { sx: { borderColor: DIVIDER_COLOR } }),
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_material40.Box, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(InfoBlock, { label: "Input", value: inputValue }),
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(InfoBlock, { label: "Output", value: outputValue })
+          (showInput || showOutput) && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_material40.Box, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
+              showInput && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(InfoBlock, { label: "Input", value: inputValue }),
+              showOutput && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(InfoBlock, { label: "Output", value: outputValue })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_material40.Divider, { sx: { borderColor: DIVIDER_COLOR } })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_material40.Divider, { sx: { borderColor: DIVIDER_COLOR } }),
           /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_material40.Box, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
             /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_material40.Typography, { variant: "body2", sx: { color: MUTED_TEXT_COLOR }, children: "Cubby ID" }),
             /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
@@ -6958,11 +6965,13 @@ var WorkflowSideInspector = ({
             )
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_material40.Divider, { sx: { borderColor: DIVIDER_COLOR } }),
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_material40.Box, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(InfoBlock, { label: "Timestamp", value: timestamp }),
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(InfoBlock, { label: "Duration", value: duration })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_material40.Divider, { sx: { borderColor: DIVIDER_COLOR } })
+          (showTimestamp || showDuration) && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_material40.Box, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
+              showTimestamp && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(InfoBlock, { label: "Timestamp", value: timestamp }),
+              showDuration && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(InfoBlock, { label: "Duration", value: duration })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_material40.Divider, { sx: { borderColor: DIVIDER_COLOR } })
+          ] })
         ] }),
         actionLabel && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Button, { variant: "primary", fullWidth: true, onClick: onAction, children: actionLabel })
       ]