From c797f4e1f29981b2e0a399d727cc711e179e241d Mon Sep 17 00:00:00 2001
From: Bentlybro <Github@bentlybro.com>
Date: Fri, 13 Feb 2026 11:53:07 +0000
Subject: [PATCH] Update ModelsTable.tsx

---
 .../admin/llms/components/ModelsTable.tsx     | 219 +++++++++---------
 1 file changed, 111 insertions(+), 108 deletions(-)

diff --git a/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/ModelsTable.tsx b/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/ModelsTable.tsx
index a3a71f1224..d846075d60 100644
--- a/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/ModelsTable.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/admin/llms/components/ModelsTable.tsx
@@ -116,118 +116,121 @@ export function ModelsTable({
     <div>
       <div className="rounded-lg border">
         <Table>
-        <TableHeader>
-          <TableRow>
-            <TableHead>Model</TableHead>
-            <TableHead>Provider</TableHead>
-            <TableHead>Creator</TableHead>
-            <TableHead>Context Window</TableHead>
-            <TableHead>Max Output</TableHead>
-            <TableHead>Cost</TableHead>
-            <TableHead>Status</TableHead>
-            <TableHead>Actions</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {models.map((model) => {
-            const cost = model.costs?.[0];
-            const provider = providerLookup.get(model.provider_id);
-            return (
-              <TableRow
-                key={model.id}
-                className={model.is_enabled ? "" : "opacity-60"}
-              >
-                <TableCell>
-                  <div className="font-medium">{model.display_name}</div>
-                  <div className="text-xs text-muted-foreground">
-                    {model.slug}
-                  </div>
-                </TableCell>
-                <TableCell>
-                  {provider ? (
-                    <>
-                      <div>{provider.display_name}</div>
-                      <div className="text-xs text-muted-foreground">
-                        {provider.name}
-                      </div>
-                    </>
-                  ) : (
-                    model.provider_id
-                  )}
-                </TableCell>
-                <TableCell>
-                  {model.creator ? (
-                    <>
-                      <div>{model.creator.display_name}</div>
-                      <div className="text-xs text-muted-foreground">
-                        {model.creator.name}
-                      </div>
-                    </>
-                  ) : (
-                    <span className="text-muted-foreground">—</span>
-                  )}
-                </TableCell>
-                <TableCell>{model.context_window.toLocaleString()}</TableCell>
-                <TableCell>
-                  {model.max_output_tokens
-                    ? model.max_output_tokens.toLocaleString()
-                    : "—"}
-                </TableCell>
-                <TableCell>
-                  {cost ? (
-                    <>
-                      <div className="font-medium">
-                        {cost.credit_cost} credits
-                      </div>
-                      <div className="text-xs text-muted-foreground">
-                        {cost.credential_provider}
-                      </div>
-                    </>
-                  ) : (
-                    "—"
-                  )}
-                </TableCell>
-                <TableCell>
-                  <div className="flex flex-col gap-1">
-                    <span
-                      className={`inline-flex rounded-full px-2.5 py-1 text-xs font-semibold ${
-                        model.is_enabled
-                          ? "bg-primary/10 text-primary"
-                          : "bg-muted text-muted-foreground"
-                      }`}
-                    >
-                      {model.is_enabled ? "Enabled" : "Disabled"}
-                    </span>
-                    {model.is_recommended && (
-                      <span className="inline-flex items-center gap-1 rounded-full bg-amber-500/10 px-2.5 py-1 text-xs font-semibold text-amber-600 dark:text-amber-400">
-                        <Star size={12} weight="fill" />
-                        Recommended
-                      </span>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Model</TableHead>
+              <TableHead>Provider</TableHead>
+              <TableHead>Creator</TableHead>
+              <TableHead>Context Window</TableHead>
+              <TableHead>Max Output</TableHead>
+              <TableHead>Cost</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead>Actions</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {models.map((model) => {
+              const cost = model.costs?.[0];
+              const provider = providerLookup.get(model.provider_id);
+              return (
+                <TableRow
+                  key={model.id}
+                  className={model.is_enabled ? "" : "opacity-60"}
+                >
+                  <TableCell>
+                    <div className="font-medium">{model.display_name}</div>
+                    <div className="text-xs text-muted-foreground">
+                      {model.slug}
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    {provider ? (
+                      <>
+                        <div>{provider.display_name}</div>
+                        <div className="text-xs text-muted-foreground">
+                          {provider.name}
+                        </div>
+                      </>
+                    ) : (
+                      model.provider_id
                     )}
-                  </div>
-                </TableCell>
-                <TableCell>
-                  <div className="flex items-center justify-end gap-2">
-                    {model.is_enabled ? (
-                      <DisableModelModal
+                  </TableCell>
+                  <TableCell>
+                    {model.creator ? (
+                      <>
+                        <div>{model.creator.display_name}</div>
+                        <div className="text-xs text-muted-foreground">
+                          {model.creator.name}
+                        </div>
+                      </>
+                    ) : (
+                      <span className="text-muted-foreground">—</span>
+                    )}
+                  </TableCell>
+                  <TableCell>{model.context_window.toLocaleString()}</TableCell>
+                  <TableCell>
+                    {model.max_output_tokens
+                      ? model.max_output_tokens.toLocaleString()
+                      : "—"}
+                  </TableCell>
+                  <TableCell>
+                    {cost ? (
+                      <>
+                        <div className="font-medium">
+                          {cost.credit_cost} credits
+                        </div>
+                        <div className="text-xs text-muted-foreground">
+                          {cost.credential_provider}
+                        </div>
+                      </>
+                    ) : (
+                      "—"
+                    )}
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex flex-col gap-1">
+                      <span
+                        className={`inline-flex rounded-full px-2.5 py-1 text-xs font-semibold ${
+                          model.is_enabled
+                            ? "bg-primary/10 text-primary"
+                            : "bg-muted text-muted-foreground"
+                        }`}
+                      >
+                        {model.is_enabled ? "Enabled" : "Disabled"}
+                      </span>
+                      {model.is_recommended && (
+                        <span className="inline-flex items-center gap-1 rounded-full bg-amber-500/10 px-2.5 py-1 text-xs font-semibold text-amber-600 dark:text-amber-400">
+                          <Star size={12} weight="fill" />
+                          Recommended
+                        </span>
+                      )}
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex items-center justify-end gap-2">
+                      {model.is_enabled ? (
+                        <DisableModelModal
+                          model={model}
+                          availableModels={models}
+                        />
+                      ) : (
+                        <EnableModelButton modelId={model.id} />
+                      )}
+                      <EditModelModal
+                        model={model}
+                        providers={providers}
+                        creators={creators}
+                      />
+                      <DeleteModelModal
                         model={model}
                         availableModels={models}
                       />
-                    ) : (
-                      <EnableModelButton modelId={model.id} />
-                    )}
-                    <EditModelModal
-                      model={model}
-                      providers={providers}
-                      creators={creators}
-                    />
-                    <DeleteModelModal model={model} availableModels={models} />
-                  </div>
-                </TableCell>
-              </TableRow>
-            );
-          })}
-        </TableBody>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              );
+            })}
+          </TableBody>
         </Table>
       </div>