From e503a43348123204fcefb85f1205634e017d368b Mon Sep 17 00:00:00 2001
From: "kiloconnect[bot]" <240665456+kiloconnect[bot]@users.noreply.github.com>
Date: Thu, 5 Feb 2026 15:50:07 +0000
Subject: [PATCH] feat: add Gateway section to sidebar and /gateway page

- Add Gateway section to PersonalAppSidebar above Account section
- Create new /gateway page that displays user's API key
- Reuse existing CopyTokenButton and ResetAPITokenDialog components
---
 .../(app)/components/PersonalAppSidebar.tsx   | 16 +++++++++
 src/app/(app)/gateway/page.tsx                | 34 +++++++++++++++++++
 2 files changed, 50 insertions(+)
 create mode 100644 src/app/(app)/gateway/page.tsx

diff --git a/src/app/(app)/components/PersonalAppSidebar.tsx b/src/app/(app)/components/PersonalAppSidebar.tsx
index 1c38b288d..00ffa7ced 100644
--- a/src/app/(app)/components/PersonalAppSidebar.tsx
+++ b/src/app/(app)/components/PersonalAppSidebar.tsx
@@ -23,6 +23,7 @@ import {
   Key,
   Wrench,
   Webhook,
+  Network,
 } from 'lucide-react';
 import HeaderLogo from '@/components/HeaderLogo';
 import OrganizationSwitcher from './OrganizationSwitcher';
@@ -139,6 +140,20 @@ export default function PersonalAppSidebar(props: React.ComponentProps<typeof Si
       : []),
   ];
 
+  // Gateway group
+  const gatewayItems: Array<{
+    title: string;
+    icon: React.ElementType;
+    url: string;
+    className?: string;
+  }> = [
+    {
+      title: 'Gateway',
+      icon: Network,
+      url: '/gateway',
+    },
+  ];
+
   // Account group
   const accountItems: Array<{
     title: string;
@@ -212,6 +227,7 @@ export default function PersonalAppSidebar(props: React.ComponentProps<typeof Si
       <SidebarContent>
         <SidebarMenuList label="Dashboard" items={dashboardItems} />
         {cloudItems.length > 0 && <SidebarMenuList label="Cloud" items={cloudItems} />}
+        <SidebarMenuList label="Gateway" items={gatewayItems} />
         <SidebarMenuList label="Account" items={accountItems} />
         <SidebarMenuList label="Start" items={startItems} />
       </SidebarContent>
diff --git a/src/app/(app)/gateway/page.tsx b/src/app/(app)/gateway/page.tsx
new file mode 100644
index 000000000..3fba4305a
--- /dev/null
+++ b/src/app/(app)/gateway/page.tsx
@@ -0,0 +1,34 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Key } from 'lucide-react';
+import { getUserFromAuthOrRedirect } from '@/lib/user.server';
+import { generateApiToken } from '@/lib/tokens';
+import { CopyTokenButton } from '@/components/auth/CopyTokenButton';
+import { ResetAPITokenDialog } from '@/components/profile/ResetAPITokenDialog';
+import { PageLayout } from '@/components/PageLayout';
+
+export default async function GatewayPage() {
+  const user = await getUserFromAuthOrRedirect('/users/sign_in?callbackPath=/gateway');
+  const kiloToken = generateApiToken(user);
+
+  return (
+    <PageLayout title="Gateway">
+      <Card className="w-full">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Key className="h-5 w-5" />
+            API Key
+          </CardTitle>
+          <CardDescription>
+            Use this API key to authenticate with the Kilo Code Gateway.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <CopyTokenButton kiloToken={kiloToken} />
+          <div className="flex justify-end">
+            <ResetAPITokenDialog />
+          </div>
+        </CardContent>
+      </Card>
+    </PageLayout>
+  );
+}