feat: adds inspection panel to show node inputs

src/frontend/src/CustomNodes/GenericNode/components/NodeInputField/index.tsx

@@ -9,7 +9,10 @@ import {
   CustomParameterLabel,
   getCustomParameterTitle,
 } from "@/customization/components/custom-parameter";
-import { LANGFLOW_AGENTIC_EXPERIENCE } from "@/customization/feature-flags";
+import {
+  ENABLE_INSPECTION_PANEL,
+  LANGFLOW_AGENTIC_EXPERIENCE,
+} from "@/customization/feature-flags";
 import { useIsAutoLogin } from "@/hooks/use-is-auto-login";
 import useAuthStore from "@/stores/authStore";
 import { cn } from "@/utils/utils";
@@ -226,27 +229,28 @@ export default function NodeInputField({
           />
         </div>
 
-        {data.node?.template[name] !== undefined && (
-          <CustomParameterComponent
-            handleOnNewValue={handleOnNewValue}
-            name={name}
-            nodeId={data.id}
-            inputId={id}
-            templateData={data.node?.template[name]!}
-            templateValue={data.node?.template[name].value ?? ""}
-            editNode={false}
-            handleNodeClass={handleNodeClass}
-            nodeClass={data.node!}
-            placeholder={
-              isToolMode
-                ? DEFAULT_TOOLSET_PLACEHOLDER
-                : data.node?.template[name].placeholder
-            }
-            isToolMode={isToolMode}
-            nodeInformationMetadata={nodeInformationMetadata}
-            proxy={proxy}
-          />
-        )}
+        {(!ENABLE_INSPECTION_PANEL || !optionalHandle) &&
+          data.node?.template[name] !== undefined && (
+            <CustomParameterComponent
+              handleOnNewValue={handleOnNewValue}
+              name={name}
+              nodeId={data.id}
+              inputId={id}
+              templateData={data.node?.template[name]!}
+              templateValue={data.node?.template[name].value ?? ""}
+              editNode={false}
+              handleNodeClass={handleNodeClass}
+              nodeClass={data.node!}
+              placeholder={
+                isToolMode
+                  ? DEFAULT_TOOLSET_PLACEHOLDER
+                  : data.node?.template[name].placeholder
+              }
+              isToolMode={isToolMode}
+              nodeInformationMetadata={nodeInformationMetadata}
+              proxy={proxy}
+            />
+          )}
       </div>
     </div>
   );

src/frontend/src/CustomNodes/GenericNode/components/RenderInputParameters/index.tsx

@@ -5,6 +5,7 @@ import { sortToolModeFields } from "@/CustomNodes/helpers/sort-tool-mode-field";
 import getFieldTitle from "@/CustomNodes/utils/get-field-title";
 import { scapedJSONStringfy } from "@/utils/reactflowUtils";
 import NodeInputField from "../NodeInputField";
+import { ENABLE_INSPECTION_PANEL } from "@/customization/feature-flags";
 
 const RenderInputParameters = ({
   data,
@@ -31,11 +32,31 @@ const RenderInputParameters = ({
   const shownTemplateFields = useMemo(() => {
     return templateFields.filter((templateField) => {
       const template = data.node?.template[templateField];
-      return (
-        template?.show &&
-        !template?.advanced &&
-        !(template?.tool_mode && isToolMode)
-      );
+
+      if (!ENABLE_INSPECTION_PANEL) {
+        return (
+          template?.show &&
+          !template?.advanced &&
+          !(template?.tool_mode && isToolMode)
+        );
+      }
+
+      // Basic visibility check
+      if (
+        !template?.show ||
+        template?.advanced ||
+        (template?.tool_mode && isToolMode)
+      ) {
+        return false;
+      }
+
+      // Only show fields that have handles (input_types)
+      const hasHandle = template.input_types && template.input_types.length > 0;
+      if (!hasHandle) {
+        return false;
+      }
+
+      return true;
     });
   }, [templateFields, data.node?.template, isToolMode]);
 

src/frontend/src/customization/feature-flags.ts

@@ -17,6 +17,7 @@ export const ENABLE_IMAGE_ON_PLAYGROUND = false;
 export const ENABLE_MCP = true;
 export const ENABLE_MCP_NOTICE = false;
 export const ENABLE_KNOWLEDGE_BASES = false;
+export const ENABLE_INSPECTION_PANEL = true;
 
 export const ENABLE_MCP_COMPOSER =
   import.meta.env.LANGFLOW_MCP_COMPOSER_ENABLED === "true";

src/frontend/src/pages/FlowPage/components/InspectionPanel/components/InspectionPanelField.tsx

@@ -0,0 +1,191 @@
+import { useMemo } from "react";
+import { AssistantButton } from "@/components/common/assistant";
+import IconComponent from "@/components/common/genericIconComponent";
+import ShadTooltip from "@/components/common/shadTooltipComponent";
+import {
+  CustomParameterComponent,
+  CustomParameterLabel,
+  getCustomParameterTitle,
+} from "@/customization/components/custom-parameter";
+import { LANGFLOW_AGENTIC_EXPERIENCE } from "@/customization/feature-flags";
+import { useIsAutoLogin } from "@/hooks/use-is-auto-login";
+import useAuthStore from "@/stores/authStore";
+import useFlowStore from "@/stores/flowStore";
+import { useTypesStore } from "@/stores/typesStore";
+import type { NodeInputFieldComponentType } from "@/types/components";
+import { cn } from "@/utils/utils";
+import {
+  DEFAULT_TOOLSET_PLACEHOLDER,
+  FLEX_VIEW_TYPES,
+  ICON_STROKE_WIDTH,
+} from "@/constants/constants";
+import useHandleNodeClass from "@/CustomNodes/hooks/use-handle-node-class";
+import { usePostTemplateValue } from "@/controllers/API/queries/nodes/use-post-template-value";
+import useFetchDataOnMount from "@/CustomNodes/hooks/use-fetch-data-on-mount";
+import useHandleOnNewValue from "@/CustomNodes/hooks/use-handle-new-value";
+import NodeInputInfo from "@/CustomNodes/GenericNode/components/NodeInputInfo";
+
+export default function InspectionPanelField({
+  id,
+  data,
+  title,
+  name = "",
+  required = false,
+  info = "",
+  showNode,
+  isToolMode = false,
+  proxy,
+}: Omit<
+  NodeInputFieldComponentType,
+  | "colors"
+  | "tooltipTitle"
+  | "type"
+  | "optionalHandle"
+  | "colorName"
+  | "lastInput"
+>) {
+  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
+  const isAutoLogin = useIsAutoLogin();
+  const shouldDisplayApiKey = isAuthenticated && !isAutoLogin;
+
+  const { currentFlowId, currentFlowName } = useFlowStore((state) => ({
+    currentFlowId: state.currentFlow?.id,
+    currentFlowName: state.currentFlow?.name,
+  }));
+
+  const myData = useTypesStore((state) => state.data);
+  const postTemplateValue = usePostTemplateValue({
+    node: data.node!,
+    nodeId: data.id,
+    parameterId: name,
+  });
+
+  const { handleNodeClass } = useHandleNodeClass(data.id);
+
+  const { handleOnNewValue } = useHandleOnNewValue({
+    node: data.node!,
+    nodeId: data.id,
+    name,
+  });
+
+  const nodeInformationMetadata = useMemo(() => {
+    return {
+      flowId: currentFlowId ?? "",
+      nodeType: data?.type?.toLowerCase() ?? "",
+      flowName: currentFlowName ?? "",
+      isAuth: shouldDisplayApiKey!,
+      variableName: name,
+    };
+  }, [data?.node?.id, shouldDisplayApiKey, name]);
+
+  useFetchDataOnMount(
+    data.node!,
+    data.id,
+    handleNodeClass,
+    name,
+    postTemplateValue,
+  );
+
+  const template = data.node?.template[name];
+  const type = template?.type;
+  const isFlexView = FLEX_VIEW_TYPES.includes(type ?? "");
+
+  return (
+    <div
+      className={cn(
+        "relative flex min-h-10 w-full flex-wrap items-center justify-between px-3 py-1.5",
+        isToolMode && "bg-primary/10",
+        (name === "code" && type === "code") || (name.includes("code") && proxy)
+          ? "hidden"
+          : "",
+      )}
+    >
+      <div
+        className={cn(
+          "flex w-full flex-col gap-2",
+          isFlexView ? "flex-row" : "flex-col",
+        )}
+      >
+        <div className="flex w-full items-center justify-between text-sm">
+          <div className="flex w-full items-center truncate">
+            {proxy ? (
+              <ShadTooltip content={<span>{proxy.id}</span>}>
+                <span>
+                  {getCustomParameterTitle({
+                    title,
+                    nodeId: data.id,
+                    isFlexView,
+                    required,
+                  })}
+                </span>
+              </ShadTooltip>
+            ) : (
+              <div className="flex gap-2">
+                <span className="text-sm font-medium">
+                  {getCustomParameterTitle({
+                    title,
+                    nodeId: data.id,
+                    isFlexView,
+                    required,
+                  })}
+                </span>
+              </div>
+            )}
+            <div>
+              {info !== "" && (
+                <ShadTooltip content={<NodeInputInfo info={info} />}>
+                  <div className="cursor-help">
+                    <IconComponent
+                      name="Info"
+                      strokeWidth={ICON_STROKE_WIDTH}
+                      className="relative ml-1 h-3 w-3 text-placeholder"
+                    />
+                  </div>
+                </ShadTooltip>
+              )}
+            </div>
+            {LANGFLOW_AGENTIC_EXPERIENCE &&
+              data.node?.template[name]?.ai_enabled && (
+                <AssistantButton
+                  compData={id}
+                  handleOnNewValue={handleOnNewValue}
+                  inputValue={data.node?.template[name]?.value}
+                  type="field"
+                />
+              )}
+          </div>
+          <CustomParameterLabel
+            name={name}
+            nodeId={data.id}
+            templateValue={data.node?.template[name]}
+            nodeClass={data.node!}
+          />
+        </div>
+
+        {data.node?.template[name] !== undefined && (
+          <CustomParameterComponent
+            handleOnNewValue={handleOnNewValue}
+            name={name}
+            nodeId={data.id}
+            inputId={id}
+            templateData={data.node?.template[name]!}
+            templateValue={data.node?.template[name].value ?? ""}
+            editNode={false}
+            handleNodeClass={handleNodeClass}
+            nodeClass={data.node!}
+            placeholder={
+              isToolMode
+                ? DEFAULT_TOOLSET_PLACEHOLDER
+                : data.node?.template[name].placeholder
+            }
+            isToolMode={isToolMode}
+            nodeInformationMetadata={nodeInformationMetadata}
+            proxy={proxy}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+// Made with Bob

src/frontend/src/pages/FlowPage/components/InspectionPanel/components/InspectionPanelFields.tsx

@@ -0,0 +1,81 @@
+import { useMemo } from "react";
+import { sortToolModeFields } from "@/CustomNodes/helpers/sort-tool-mode-field";
+import getFieldTitle from "@/CustomNodes/utils/get-field-title";
+import type { NodeDataType } from "@/types/flow";
+import { LANGFLOW_SUPPORTED_TYPES } from "@/constants/constants";
+import InspectionPanelField from "./InspectionPanelField";
+
+interface InspectionPanelFieldsProps {
+  data: NodeDataType;
+}
+
+export default function InspectionPanelFields({
+  data,
+}: InspectionPanelFieldsProps) {
+  // Get all fields in one list - show ALL fields in Inspection Panel
+  const allFields = useMemo(() => {
+    return Object.keys(data.node?.template || {})
+      .filter((templateField) => {
+        const template = data.node?.template[templateField];
+
+        // Filter out fields that shouldn't be shown
+        if (
+          templateField.charAt(0) === "_" ||
+          !template?.show ||
+          (templateField === "code" && template.type === "code") ||
+          (templateField.includes("code") && template.proxy)
+        ) {
+          return false;
+        }
+
+        return true;
+      })
+      .sort((a, b) =>
+        sortToolModeFields(
+          a,
+          b,
+          data.node!.template,
+          data.node?.field_order ?? [],
+          false,
+        ),
+      );
+  }, [data.node?.template, data.node?.field_order]);
+
+  if (allFields.length === 0) {
+    return (
+      <div className="flex items-center justify-center p-8 text-sm text-muted-foreground">
+        No fields available
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-2 p-2">
+      {allFields.map((templateField: string) => {
+        const template = data.node?.template[templateField];
+
+        return (
+          <InspectionPanelField
+            key={`${data.id}-${templateField}`}
+            data={data}
+            title={getFieldTitle(data.node?.template!, templateField)}
+            info={template.info!}
+            name={templateField}
+            required={template.required}
+            id={{
+              inputTypes: template.input_types,
+              type: template.type,
+              id: data.id,
+              fieldName: templateField,
+            }}
+            proxy={template.proxy}
+            showNode={true}
+            isToolMode={false}
+          />
+        );
+      })}
+    </div>
+  );
+}
+
+// Made with Bob