feat: add Gateway section to sidebar and /gateway page

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>

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>
+  );
+}