From 2861861339b14dbc3967d96cede9a9abc2cb2288 Mon Sep 17 00:00:00 2001
From: Evan Jacobson <evanjacobson3@gmail.com>
Date: Mon, 18 May 2026 13:55:10 -0600
Subject: [PATCH 1/4] Add BYOK setup link/guide to KiloClaw settings page >
 Default Model

---
 .../app/(app)/claw/components/SettingsTab.tsx   | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/apps/web/src/app/(app)/claw/components/SettingsTab.tsx b/apps/web/src/app/(app)/claw/components/SettingsTab.tsx
index c58bda528..abfeb48f9 100644
--- a/apps/web/src/app/(app)/claw/components/SettingsTab.tsx
+++ b/apps/web/src/app/(app)/claw/components/SettingsTab.tsx
@@ -20,6 +20,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { OpenclawImportCard } from './OpenclawImportCard';
 
 import { usePostHog } from 'posthog-js/react';
+import Link from 'next/link';
 import { toast } from 'sonner';
 import { useModelSelectorList } from '@/app/api/openrouter/hooks';
 import { useUser } from '@/hooks/useUser';
@@ -2233,6 +2234,22 @@ export function SettingsTab({
               <p className="text-muted-foreground text-xs">
                 Used for new conversations. Can be changed per-conversation.
               </p>
+              <p className="text-muted-foreground mt-2 text-xs">
+                Configure your own model provider keys in{' '}
+                <Link href="/byok" className="underline">
+                  Kilo BYOK settings
+                </Link>
+                .{' '}
+                <a
+                  href="https://kilo.ai/docs/getting-started/byok"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="underline"
+                >
+                  View the BYOK setup guide
+                </a>
+                .
+              </p>
             </div>
             <div className="flex items-center gap-2">
               <ModelCombobox

From 4d8022646d4680e292d96cd9d5ea59f89afb6add Mon Sep 17 00:00:00 2001
From: Evan Jacobson <evanjacobson3@gmail.com>
Date: Mon, 18 May 2026 14:14:25 -0600
Subject: [PATCH 2/4] Open BYOK link in new tab

---
 apps/web/src/app/(app)/claw/components/SettingsTab.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/apps/web/src/app/(app)/claw/components/SettingsTab.tsx b/apps/web/src/app/(app)/claw/components/SettingsTab.tsx
index abfeb48f9..5d3900d4d 100644
--- a/apps/web/src/app/(app)/claw/components/SettingsTab.tsx
+++ b/apps/web/src/app/(app)/claw/components/SettingsTab.tsx
@@ -2236,14 +2236,13 @@ export function SettingsTab({
               </p>
               <p className="text-muted-foreground mt-2 text-xs">
                 Configure your own model provider keys in{' '}
-                <Link href="/byok" className="underline">
+                <Link href="/byok" target="_blank" className="underline">
                   Kilo BYOK settings
                 </Link>
                 .{' '}
                 <a
                   href="https://kilo.ai/docs/getting-started/byok"
                   target="_blank"
-                  rel="noopener noreferrer"
                   className="underline"
                 >
                   View the BYOK setup guide

From f478ae54791240a298cef346fadb33b63df21db9 Mon Sep 17 00:00:00 2001
From: Evan Jacobson <evanjacobson3@gmail.com>
Date: Wed, 20 May 2026 08:52:18 -0600
Subject: [PATCH 3/4] re-add noopener noreferrer rel

---
 apps/web/src/app/(app)/claw/components/SettingsTab.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/web/src/app/(app)/claw/components/SettingsTab.tsx b/apps/web/src/app/(app)/claw/components/SettingsTab.tsx
index 5d3900d4d..e68fc7fc3 100644
--- a/apps/web/src/app/(app)/claw/components/SettingsTab.tsx
+++ b/apps/web/src/app/(app)/claw/components/SettingsTab.tsx
@@ -2243,6 +2243,7 @@ export function SettingsTab({
                 <a
                   href="https://kilo.ai/docs/getting-started/byok"
                   target="_blank"
+                  rel="noopener noreferrer"
                   className="underline"
                 >
                   View the BYOK setup guide

From 7480b18d0b611454054cbe8f1f683b3426876269 Mon Sep 17 00:00:00 2001
From: Evan Jacobson <evanjacobson3@gmail.com>
Date: Wed, 20 May 2026 09:50:33 -0600
Subject: [PATCH 4/4] Move the guide to the BYOK page card footer.

---
 .../app/(app)/claw/components/SettingsTab.tsx |  9 ------
 .../organizations/byok/BYOKKeysManager.tsx    | 31 ++++++++++++++++---
 2 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/apps/web/src/app/(app)/claw/components/SettingsTab.tsx b/apps/web/src/app/(app)/claw/components/SettingsTab.tsx
index e68fc7fc3..ce8b9c227 100644
--- a/apps/web/src/app/(app)/claw/components/SettingsTab.tsx
+++ b/apps/web/src/app/(app)/claw/components/SettingsTab.tsx
@@ -2239,15 +2239,6 @@ export function SettingsTab({
                 <Link href="/byok" target="_blank" className="underline">
                   Kilo BYOK settings
                 </Link>
-                .{' '}
-                <a
-                  href="https://kilo.ai/docs/getting-started/byok"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="underline"
-                >
-                  View the BYOK setup guide
-                </a>
                 .
               </p>
             </div>
diff --git a/apps/web/src/components/organizations/byok/BYOKKeysManager.tsx b/apps/web/src/components/organizations/byok/BYOKKeysManager.tsx
index d47f5203d..53800154f 100644
--- a/apps/web/src/components/organizations/byok/BYOKKeysManager.tsx
+++ b/apps/web/src/components/organizations/byok/BYOKKeysManager.tsx
@@ -21,7 +21,7 @@ import {
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Switch } from '@/components/ui/switch';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import {
@@ -91,6 +91,19 @@ function BYOKDescription() {
   );
 }
 
+function BYOKSetupGuideLink() {
+  return (
+    <a
+      href="https://kilo.ai/docs/getting-started/byok"
+      target="_blank"
+      rel="noopener noreferrer"
+      className="text-muted-foreground hover:text-foreground text-sm underline underline-offset-4 transition-colors"
+    >
+      View the BYOK setup guide
+    </a>
+  );
+}
+
 function SupportedModelsList({ models }: { models: string[] }) {
   const [expanded, setExpanded] = useState(false);
 
@@ -293,11 +306,16 @@ export function BYOKKeysManager({ organizationId }: BYOKKeysManagerProps) {
         <BYOKDescription />
         <Card>
           <CardHeader>
-            <CardTitle>BYOK API Keys</CardTitle>
+            <div className="flex flex-col gap-2">
+              <CardTitle>BYOK API Keys</CardTitle>
+            </div>
           </CardHeader>
           <CardContent>
             <div className="text-muted-foreground">Loading...</div>
           </CardContent>
+          <CardFooter>
+            <BYOKSetupGuideLink />
+          </CardFooter>
         </Card>
       </div>
     );
@@ -317,8 +335,10 @@ export function BYOKKeysManager({ organizationId }: BYOKKeysManagerProps) {
     <div className="space-y-4">
       <BYOKDescription />
       <Card>
-        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
-          <CardTitle>BYOK API Keys</CardTitle>
+        <CardHeader className="flex flex-row items-start justify-between gap-4 space-y-0 pb-4">
+          <div className="flex flex-col gap-2">
+            <CardTitle>BYOK API Keys</CardTitle>
+          </div>
           <Button onClick={() => setIsDialogOpen(true)} size="sm">
             <Plus className="mr-2 h-4 w-4" />
             Add Key
@@ -622,6 +642,9 @@ export function BYOKKeysManager({ organizationId }: BYOKKeysManagerProps) {
             </DialogFooter>
           </DialogContent>
         </Dialog>
+        <CardFooter>
+          <BYOKSetupGuideLink />
+        </CardFooter>
       </Card>
     </div>
   );