feat(frontend): enhance CredentialsInput and CredentialRow components with variant support (#11753)

### Changes 🏗️

- Added a new `variant` prop to `CredentialsInput` component with
options "default" or "node"
- Implemented compact styling for the "node" variant in `CredentialRow`
component
- Modified layout and overflow handling for credential display in node
context
- Added conditional rendering of masked key display based on variant
- Passed the variant prop through the component hierarchy
- Applied the "node" variant to the `CredentialsField` component with
appropriate styling

Before

![Screenshot 2026-01-12 at
4.39.35 PM.png](https://app.graphite.com/user-attachments/assets/2b605b2d-7abf-4e8a-adc5-6a6e8b712ef7.png)

After

![Screenshot 2026-01-12 at
4.55.39 PM.png](https://app.graphite.com/user-attachments/assets/20bb1452-870a-4111-a246-c4e3a3b456ea.png)

### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  - [x] Verified credential selection works correctly in node context
  - [x] Confirmed compact styling is applied properly in node variant
  - [x] Tested overflow handling for long credential names
  - [x] Verified both default and node variants display correctly

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **New Features**
* Credential input and selection components now support multiple
configurable visual variants, enabling better text display handling,
optimized layouts, and improved visual consistency across different
application contexts and specific use cases.

* **Style**
* Credential field displays now feature enhanced text truncation and
overflow management for a more polished and consistent user interface
experience.

<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/CredentialsInputs.tsx

@@ -36,6 +36,7 @@ type Props = {
   readOnly?: boolean;
   isOptional?: boolean;
   showTitle?: boolean;
+  variant?: "default" | "node";
 };
 
 export function CredentialsInput({
@@ -48,6 +49,7 @@ export function CredentialsInput({
   readOnly = false,
   isOptional = false,
   showTitle = true,
+  variant = "default",
 }: Props) {
   const hookData = useCredentialsInput({
     schema,
@@ -123,6 +125,7 @@ export function CredentialsInput({
               onClearCredential={() => onSelectCredential(undefined)}
               readOnly={readOnly}
               allowNone={isOptional}
+              variant={variant}
             />
           ) : (
             <div className="mb-4 space-y-2">

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/components/CredentialRow/CredentialRow.tsx

@@ -30,6 +30,8 @@ type CredentialRowProps = {
   readOnly?: boolean;
   showCaret?: boolean;
   asSelectTrigger?: boolean;
+  /** When "node", applies compact styling for node context */
+  variant?: "default" | "node";
 };
 
 export function CredentialRow({
@@ -41,14 +43,22 @@ export function CredentialRow({
   readOnly = false,
   showCaret = false,
   asSelectTrigger = false,
+  variant = "default",
 }: CredentialRowProps) {
   const ProviderIcon = providerIcons[provider] || fallbackIcon;
+  const isNodeVariant = variant === "node";
 
   return (
     <div
       className={cn(
         "flex items-center gap-3 rounded-medium border border-zinc-200 bg-white p-3 transition-colors",
-        asSelectTrigger ? "border-0 bg-transparent" : readOnly ? "w-fit" : "",
+        asSelectTrigger && isNodeVariant
+          ? "min-w-0 flex-1 overflow-hidden border-0 bg-transparent"
+          : asSelectTrigger
+            ? "border-0 bg-transparent"
+            : readOnly
+              ? "w-fit"
+              : "",
       )}
       onClick={readOnly || showCaret || asSelectTrigger ? undefined : onSelect}
       style={
@@ -61,19 +71,31 @@ export function CredentialRow({
         <ProviderIcon className="h-3 w-3 text-white" />
       </div>
       <IconKey className="h-5 w-5 shrink-0 text-zinc-800" />
-      <div className="flex min-w-0 flex-1 flex-nowrap items-center gap-4">
+      <div
+        className={cn(
+          "flex min-w-0 flex-1 flex-nowrap items-center gap-4",
+          isNodeVariant && "overflow-hidden",
+        )}
+      >
         <Text
           variant="body"
-          className="line-clamp-1 flex-[0_0_50%] text-ellipsis tracking-tight"
+          className={cn(
+            "tracking-tight",
+            isNodeVariant
+              ? "truncate"
+              : "line-clamp-1 flex-[0_0_50%] text-ellipsis",
+          )}
         >
           {getCredentialDisplayName(credential, displayName)}
         </Text>
-        <Text
-          variant="large"
-          className="lex-[0_0_40%] relative top-1 hidden overflow-hidden whitespace-nowrap font-mono tracking-tight md:block"
-        >
-          {"*".repeat(MASKED_KEY_LENGTH)}
-        </Text>
+        {!(asSelectTrigger && isNodeVariant) && (
+          <Text
+            variant="large"
+            className="relative top-1 hidden overflow-hidden whitespace-nowrap font-mono tracking-tight md:block"
+          >
+            {"*".repeat(MASKED_KEY_LENGTH)}
+          </Text>
+        )}
       </div>
       {showCaret && !asSelectTrigger && (
         <CaretDown className="h-4 w-4 shrink-0 text-gray-400" />

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/CredentialsInputs/components/CredentialsSelect/CredentialsSelect.tsx

@@ -7,6 +7,7 @@ import {
 } from "@/components/__legacy__/ui/select";
 import { Text } from "@/components/atoms/Text/Text";
 import { CredentialsMetaInput } from "@/lib/autogpt-server-api/types";
+import { cn } from "@/lib/utils";
 import { useEffect } from "react";
 import { getCredentialDisplayName } from "../../helpers";
 import { CredentialRow } from "../CredentialRow/CredentialRow";
@@ -26,6 +27,8 @@ interface Props {
   onClearCredential?: () => void;
   readOnly?: boolean;
   allowNone?: boolean;
+  /** When "node", applies compact styling for node context */
+  variant?: "default" | "node";
 }
 
 export function CredentialsSelect({
@@ -37,6 +40,7 @@ export function CredentialsSelect({
   onClearCredential,
   readOnly = false,
   allowNone = true,
+  variant = "default",
 }: Props) {
   // Auto-select first credential if none is selected (only if allowNone is false)
   useEffect(() => {
@@ -59,7 +63,12 @@ export function CredentialsSelect({
         value={selectedCredentials?.id || (allowNone ? "__none__" : "")}
         onValueChange={handleValueChange}
       >
-        <SelectTrigger className="h-auto min-h-12 w-full rounded-medium border-zinc-200 p-0 pr-4 shadow-none">
+        <SelectTrigger
+          className={cn(
+            "h-auto min-h-12 w-full rounded-medium border-zinc-200 p-0 pr-4 shadow-none",
+            variant === "node" && "overflow-hidden",
+          )}
+        >
           {selectedCredentials ? (
             <SelectValue key={selectedCredentials.id} asChild>
               <CredentialRow
@@ -75,6 +84,7 @@ export function CredentialsSelect({
                 onDelete={() => {}}
                 readOnly={readOnly}
                 asSelectTrigger={true}
+                variant={variant}
               />
             </SelectValue>
           ) : (

autogpt_platform/frontend/src/components/renderers/InputRenderer/custom/CredentialField/CredentialField.tsx

@@ -88,6 +88,8 @@ export const CredentialsField = (props: FieldProps) => {
         showTitle={false}
         readOnly={formContext?.readOnly}
         isOptional={!isRequired}
+        className="w-full"
+        variant="node"
       />
 
       {/* Optional credentials toggle - only show in builder canvas, not run dialogs */}