fix(frontend): auto-select credentials correctly in old builder (#11815)

## Changes 🏗️

On the **Old Builder**, when running an agent...

### Before

<img width="800" height="614" alt="Screenshot 2026-01-21 at 21 27 05"
src="https://github.com/user-attachments/assets/a3b2ec17-597f-44d2-9130-9e7931599c38"
/>

Credentials are there, but it is not recognising them, you need to click
on them to be selected

### After

<img width="1029" height="728" alt="Screenshot 2026-01-21 at 21 26 47"
src="https://github.com/user-attachments/assets/c6e83846-6048-439e-919d-6807674f2d5a"
/>

It uses the new credentials UI and correctly auto-selects existing ones.

### Other

Fixed a small timezone display glitch on the new library view.

### 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] Run agent in old builder
- [x] Credentials are auto-selected and using the new collapsed system
credentials UI

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-run-draft-view.tsx

@@ -1,8 +1,15 @@
 "use client";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 
 import {
   CredentialsMetaInput,
+  CredentialsType,
   GraphExecutionID,
   GraphMeta,
   LibraryAgentPreset,
@@ -29,7 +36,11 @@ import {
 } from "@/components/__legacy__/ui/icons";
 import { Input } from "@/components/__legacy__/ui/input";
 import { Button } from "@/components/atoms/Button/Button";
-import { CredentialsInput } from "@/components/contextual/CredentialsInput/CredentialsInput";
+import { CredentialsGroupedView } from "@/components/contextual/CredentialsInput/components/CredentialsGroupedView/CredentialsGroupedView";
+import {
+  findSavedCredentialByProviderAndType,
+  findSavedUserCredentialByProviderAndType,
+} from "@/components/contextual/CredentialsInput/components/CredentialsGroupedView/helpers";
 import { InformationTooltip } from "@/components/molecules/InformationTooltip/InformationTooltip";
 import {
   useToast,
@@ -37,6 +48,7 @@ import {
 } from "@/components/molecules/Toast/use-toast";
 import { humanizeCronExpression } from "@/lib/cron-expression-utils";
 import { cn, isEmpty } from "@/lib/utils";
+import { CredentialsProvidersContext } from "@/providers/agent-credentials/credentials-provider";
 import { ClockIcon, CopyIcon, InfoIcon } from "@phosphor-icons/react";
 import { CalendarClockIcon, Trash2Icon } from "lucide-react";
 
@@ -90,6 +102,7 @@ export function AgentRunDraftView({
   const api = useBackendAPI();
   const { toast } = useToast();
   const toastOnFail = useToastOnFail();
+  const allProviders = useContext(CredentialsProvidersContext);
 
   const [inputValues, setInputValues] = useState<Record<string, any>>({});
   const [inputCredentials, setInputCredentials] = useState<
@@ -128,6 +141,77 @@ export function AgentRunDraftView({
     () => graph.credentials_input_schema.properties,
     [graph],
   );
+  const credentialFields = useMemo(
+    function getCredentialFields() {
+      return Object.entries(agentCredentialsInputFields);
+    },
+    [agentCredentialsInputFields],
+  );
+  const requiredCredentials = useMemo(
+    function getRequiredCredentials() {
+      return new Set(
+        (graph.credentials_input_schema?.required as string[]) || [],
+      );
+    },
+    [graph.credentials_input_schema?.required],
+  );
+
+  useEffect(
+    function initializeDefaultCredentials() {
+      if (!allProviders) return;
+      if (!graph.credentials_input_schema?.properties) return;
+      if (requiredCredentials.size === 0) return;
+
+      setInputCredentials(function updateCredentials(currentCreds) {
+        const next = { ...currentCreds };
+        let didAdd = false;
+
+        for (const key of requiredCredentials) {
+          if (next[key]) continue;
+          const schema = graph.credentials_input_schema.properties[key];
+          if (!schema) continue;
+
+          const providerNames = schema.credentials_provider || [];
+          const credentialTypes = schema.credentials_types || [];
+          const requiredScopes = schema.credentials_scopes;
+
+          const userCredential = findSavedUserCredentialByProviderAndType(
+            providerNames,
+            credentialTypes,
+            requiredScopes,
+            allProviders,
+          );
+
+          const savedCredential =
+            userCredential ||
+            findSavedCredentialByProviderAndType(
+              providerNames,
+              credentialTypes,
+              requiredScopes,
+              allProviders,
+            );
+
+          if (!savedCredential) continue;
+
+          next[key] = {
+            id: savedCredential.id,
+            provider: savedCredential.provider,
+            type: savedCredential.type as CredentialsType,
+            title: savedCredential.title,
+          };
+          didAdd = true;
+        }
+
+        if (!didAdd) return currentCreds;
+        return next;
+      });
+    },
+    [
+      allProviders,
+      graph.credentials_input_schema?.properties,
+      requiredCredentials,
+    ],
+  );
 
   const [allRequiredInputsAreSet, missingInputs] = useMemo(() => {
     const nonEmptyInputs = new Set(
@@ -145,18 +229,35 @@ export function AgentRunDraftView({
     );
     return [isSuperset, difference];
   }, [agentInputSchema.required, inputValues]);
-  const [allCredentialsAreSet, missingCredentials] = useMemo(() => {
-    const availableCredentials = new Set(Object.keys(inputCredentials));
-    const allCredentials = new Set(Object.keys(agentCredentialsInputFields));
-    // Backwards-compatible implementation of isSupersetOf and difference
-    const isSuperset = Array.from(allCredentials).every((item) =>
-      availableCredentials.has(item),
-    );
-    const difference = Array.from(allCredentials).filter(
-      (item) => !availableCredentials.has(item),
-    );
-    return [isSuperset, difference];
-  }, [agentCredentialsInputFields, inputCredentials]);
+  const [allCredentialsAreSet, missingCredentials] = useMemo(
+    function getCredentialStatus() {
+      const missing = Array.from(requiredCredentials).filter((key) => {
+        const cred = inputCredentials[key];
+        return !cred || !cred.id;
+      });
+      return [missing.length === 0, missing];
+    },
+    [requiredCredentials, inputCredentials],
+  );
+  function addChangedCredentials(prev: Set<keyof LibraryAgentPresetUpdatable>) {
+    const next = new Set(prev);
+    next.add("credentials");
+    return next;
+  }
+
+  function handleCredentialChange(key: string, value?: CredentialsMetaInput) {
+    setInputCredentials(function updateInputCredentials(currentCreds) {
+      const next = { ...currentCreds };
+      if (value === undefined) {
+        delete next[key];
+        return next;
+      }
+      next[key] = value;
+      return next;
+    });
+    setChangedPresetAttributes(addChangedCredentials);
+  }
+
   const notifyMissingInputs = useCallback(
     (needPresetName: boolean = true) => {
       const allMissingFields = (
@@ -649,35 +750,6 @@ export function AgentRunDraftView({
               </>
             )}
 
-            {/* Credentials inputs */}
-            {Object.entries(agentCredentialsInputFields).map(
-              ([key, inputSubSchema]) => (
-                <CredentialsInput
-                  key={key}
-                  schema={{ ...inputSubSchema, discriminator: undefined }}
-                  selectedCredentials={
-                    inputCredentials[key] ?? inputSubSchema.default
-                  }
-                  onSelectCredentials={(value) => {
-                    setInputCredentials((obj) => {
-                      const newObj = { ...obj };
-                      if (value === undefined) {
-                        delete newObj[key];
-                        return newObj;
-                      }
-                      return {
-                        ...obj,
-                        [key]: value,
-                      };
-                    });
-                    setChangedPresetAttributes((prev) =>
-                      prev.add("credentials"),
-                    );
-                  }}
-                />
-              ),
-            )}
-
             {/* Regular inputs */}
             {Object.entries(agentInputFields).map(([key, inputSubSchema]) => (
               <RunAgentInputs
@@ -695,6 +767,17 @@ export function AgentRunDraftView({
                 data-testid={`agent-input-${key}`}
               />
             ))}
+
+            {/* Credentials inputs */}
+            {credentialFields.length > 0 && (
+              <CredentialsGroupedView
+                credentialFields={credentialFields}
+                requiredCredentials={requiredCredentials}
+                inputCredentials={inputCredentials}
+                inputValues={inputValues}
+                onCredentialChange={handleCredentialChange}
+              />
+            )}
           </CardContent>
         </Card>
       </div>