From 3a677ce50912b82c7d4b2ffc2aad50cbc638637a Mon Sep 17 00:00:00 2001
From: John Smith <john@johnjcsmith.com>
Date: Sun, 22 Dec 2024 17:48:18 +1030
Subject: [PATCH] feat: More playground responsive ness (#353)

* feat: Collapse breadcrumb on small screens

* chore: Improve mobile layout of configs list

* chore: Move clerk pickers into popover
---
 app/app/clusters/[clusterId]/configs/page.tsx |  36 ++--
 app/app/clusters/[clusterId]/runs/layout.tsx  |  24 ++-
 app/app/clusters/[clusterId]/usage/page.tsx   | 157 ++++++------------
 app/app/layout.tsx                            |   7 +-
 app/components/breadcrumbs.tsx                |  79 +++++----
 app/components/header.tsx                     |  90 ++++++++--
 6 files changed, 204 insertions(+), 189 deletions(-)

diff --git a/app/app/clusters/[clusterId]/configs/page.tsx b/app/app/clusters/[clusterId]/configs/page.tsx
index 34785fca..a2c19b88 100644
--- a/app/app/clusters/[clusterId]/configs/page.tsx
+++ b/app/app/clusters/[clusterId]/configs/page.tsx
@@ -21,25 +21,15 @@ type Prompt = ClientInferResponseBody<
 const columns: ColumnDef<Prompt>[] = [
   {
     accessorKey: "name",
-    header: ({ column }) => {
-      return (
-        <Button
-          variant="ghost"
-          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
-        >
-          Name
-          <ArrowUpDown className="ml-2 h-4 w-4" />
-        </Button>
-      );
-    },
+    header: "Name",
     cell: ({ row }) => (
       <div className="space-y-2 max-w-[800px]">
         <p className="font-medium">{row.getValue("name")}</p>
-        <p className="text-sm text-gray-500 line-clamp-2 overflow-hidden text-ellipsis">
+        <p className="text-sm text-gray-500 line-clamp-2 overflow-hidden text-ellipsis md:block hidden">
           {row.original.initialPrompt}
         </p>
         {row.original.attachedFunctions.filter(Boolean).length > 0 && (
-          <div className="flex flex-wrap gap-1">
+          <div className="flex flex-wrap gap-1 hidden md:flex">
             {row.original.attachedFunctions.map((tool) => (
               <span
                 key={tool}
@@ -55,16 +45,20 @@ const columns: ColumnDef<Prompt>[] = [
   },
   {
     id: "id",
-    header: "Configuration ID",
+    header: ({ column }) => (
+      <div className="hidden md:block">Configuration ID</div>
+    ),
     cell: ({ row }) => (
-      <pre className="text-sm text-gray-500">{row.original.id}</pre>
+      <pre className="text-sm text-gray-500 hidden md:block">{row.original.id}</pre>
     ),
   },
   {
     id: "lastUpdated",
-    header: "Last Updated",
+    header: ({ column }) => (
+      <div className="hidden md:block">Last Updated</div>
+    ),
     cell: ({ row }) => (
-      <p className="text-sm text-gray-500">
+      <p className="text-sm text-gray-500 hidden md:block">
         {row.original.updatedAt
           ? formatDistanceToNow(new Date(row.original.updatedAt), {
               addSuffix: true,
@@ -75,6 +69,7 @@ const columns: ColumnDef<Prompt>[] = [
   },
   {
     id: "actions",
+    header: "Actions",
     cell: function Cell({ row }) {
       const [isDeleting, setIsDeleting] = useState(false);
       const { getToken } = useAuth();
@@ -133,6 +128,7 @@ const columns: ColumnDef<Prompt>[] = [
             size="sm"
             onClick={handleDelete}
             disabled={isDeleting}
+            className="hidden md:inline-flex"
           >
             {isDeleting ? "Deleting..." : "Delete"}
           </Button>
@@ -188,18 +184,19 @@ export default function Page({ params }: { params: { clusterId: string } }) {
   }
 
   return (
-    <div className="ml-0 max-w-[1200px]">
+    <div className="container mx-auto px-4">
       <h1 className="text-xl">Saved Run Configurations</h1>
       <p className="text-sm text-gray-500 mb-4">
         Saved run configurations are reusable configurations that can be used in
         your next run.
       </p>
-      <div className="flex space-x-4 mb-4">
+      <div className="flex flex-col md:flex-row gap-4 mb-4">
         <Button
           variant="secondary"
           onClick={() => {
             router.push(`/clusters/${params.clusterId}/configs/new`);
           }}
+          className="w-full md:w-auto"
         >
           <PlusIcon className="mr-2 h-4 w-4" />
           Create New Run Configuration
@@ -209,6 +206,7 @@ export default function Page({ params }: { params: { clusterId: string } }) {
           onClick={() => {
             router.push(`/clusters/${params.clusterId}/configs/global`);
           }}
+          className="w-full md:w-auto"
         >
           <Globe className="mr-2 h-4 w-4" />
           Global Context
diff --git a/app/app/clusters/[clusterId]/runs/layout.tsx b/app/app/clusters/[clusterId]/runs/layout.tsx
index 4f9a4d4b..02e37e37 100644
--- a/app/app/clusters/[clusterId]/runs/layout.tsx
+++ b/app/app/clusters/[clusterId]/runs/layout.tsx
@@ -1,11 +1,11 @@
-import { client } from "@/client/client";
-import { MachineList } from "@/components/MachineList";
-import { ServiceList } from "@/components/ServiceList";
-import { RunList } from "@/components/WorkflowList";
-import { auth } from "@clerk/nextjs";
-import { Button } from "@/components/ui/button";
-import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
-import { Blocks, Cpu } from "lucide-react";
+import { client } from '@/client/client';
+import { MachineList } from '@/components/MachineList';
+import { ServiceList } from '@/components/ServiceList';
+import { RunList } from '@/components/WorkflowList';
+import { auth } from '@clerk/nextjs';
+import { Button } from '@/components/ui/button';
+import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
+import { Blocks, Cpu } from 'lucide-react';
 
 export async function generateMetadata({
   params: { clusterId },
@@ -21,7 +21,7 @@ export async function generateMetadata({
   });
 
   if (cluster.status !== 200) {
-    return { title: "Inferable" };
+    return { title: 'Inferable' };
   }
 
   return { title: `${cluster.body?.name}` };
@@ -49,7 +49,7 @@ async function Home({
         <div className="md:hidden">
           <RunList clusterId={clusterId} />
         </div>
-        <span className="text-sm text-muted-foreground font-medium">
+        <span className="hidden md:block text-sm text-muted-foreground font-medium">
           {cluster.status === 200 ? cluster.body.name : clusterId}
         </span>
         <div className="flex items-center gap-2">
@@ -81,9 +81,7 @@ async function Home({
         <div className="hidden md:block">
           <RunList clusterId={clusterId} />
         </div>
-        <div className="flex-1 overflow-auto">
-          {children}
-        </div>
+        <div className="flex-1 overflow-auto">{children}</div>
       </div>
     </main>
   );
diff --git a/app/app/clusters/[clusterId]/usage/page.tsx b/app/app/clusters/[clusterId]/usage/page.tsx
index 17e4ee52..0e3bcf9d 100644
--- a/app/app/clusters/[clusterId]/usage/page.tsx
+++ b/app/app/clusters/[clusterId]/usage/page.tsx
@@ -1,11 +1,5 @@
-import { client } from "@/client/client";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
+import { client } from '@/client/client';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import {
   Table,
   TableBody,
@@ -14,10 +8,10 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table";
-import { auth } from "@clerk/nextjs";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Progress } from "@/components/ui/progress";
+} from '@/components/ui/table';
+import { auth } from '@clerk/nextjs';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Progress } from '@/components/ui/progress';
 
 type BillableRate = {
   input: number;
@@ -26,21 +20,21 @@ type BillableRate = {
 
 const billable: [string, BillableRate][] = [
   [
-    "claude-3-5-sonnet",
+    'claude-3-5-sonnet',
     {
       input: 0.003,
       output: 0.015,
     },
   ],
   [
-    "claude-3-5-haiku",
+    'claude-3-5-haiku',
     {
       input: 0.001,
       output: 0.005,
     },
   ],
   [
-    "unknown",
+    'unknown',
     {
       input: 0.0,
       output: 0.0,
@@ -48,11 +42,7 @@ const billable: [string, BillableRate][] = [
   ],
 ];
 
-export default async function UsagePage({
-  params: { clusterId },
-}: {
-  params: { clusterId: string };
-}) {
+export default async function Page({ params: { clusterId } }: { params: { clusterId: string } }) {
   const { getToken } = auth();
 
   const result = await client.listUsageActivity({
@@ -61,7 +51,7 @@ export default async function UsagePage({
   });
 
   if (result.status !== 200) {
-    throw new Error("Failed to fetch usage data");
+    throw new Error('Failed to fetch usage data');
   }
 
   const { modelUsage, agentRuns } = result.body;
@@ -71,21 +61,17 @@ export default async function UsagePage({
     (acc, curr) => ({
       totalInputTokens: acc.totalInputTokens + curr.totalInputTokens,
       totalOutputTokens: acc.totalOutputTokens + curr.totalOutputTokens,
-      totalModelInvocations:
-        acc.totalModelInvocations + curr.totalModelInvocations,
+      totalModelInvocations: acc.totalModelInvocations + curr.totalModelInvocations,
     }),
     {
       totalInputTokens: 0,
       totalOutputTokens: 0,
       totalModelInvocations: 0,
-    },
+    }
   );
 
   // Calculate totals for agent runs
-  const predictionsTotal = agentRuns.reduce(
-    (acc, curr) => acc + curr.totalAgentRuns,
-    0,
-  );
+  const predictionsTotal = agentRuns.reduce((acc, curr) => acc + curr.totalAgentRuns, 0);
 
   // Calculate current billing cycle dates
   const today = new Date();
@@ -106,14 +92,14 @@ export default async function UsagePage({
   // Group model usage by model ID
   const modelGroups = modelUsage.reduce(
     (acc, curr) => {
-      const modelId = curr.modelId || "Unknown";
+      const modelId = curr.modelId || 'Unknown';
       if (!acc[modelId]) {
         acc[modelId] = [];
       }
       acc[modelId].push(curr);
       return acc;
     },
-    {} as Record<string, typeof modelUsage>,
+    {} as Record<string, typeof modelUsage>
   );
 
   // Calculate totals for each model
@@ -122,27 +108,25 @@ export default async function UsagePage({
       acc[modelId] = usage.reduce(
         (modelAcc, curr) => ({
           totalInputTokens: modelAcc.totalInputTokens + curr.totalInputTokens,
-          totalOutputTokens:
-            modelAcc.totalOutputTokens + curr.totalOutputTokens,
-          totalModelInvocations:
-            modelAcc.totalModelInvocations + curr.totalModelInvocations,
+          totalOutputTokens: modelAcc.totalOutputTokens + curr.totalOutputTokens,
+          totalModelInvocations: modelAcc.totalModelInvocations + curr.totalModelInvocations,
         }),
         {
           totalInputTokens: 0,
           totalOutputTokens: 0,
           totalModelInvocations: 0,
-        },
+        }
       );
       return acc;
     },
-    {} as Record<string, typeof modelTotals>,
+    {} as Record<string, typeof modelTotals>
   );
 
   // Calculate costs per model
   const modelCostsBreakdown = Object.entries(modelGroupTotals).reduce(
     (acc, [modelId, usage]) => {
       // Special case for unknown models
-      if (modelId.toLowerCase() === "unknown") {
+      if (modelId.toLowerCase() === 'unknown') {
         acc[modelId] = {
           inputCost: 0,
           outputCost: 0,
@@ -162,10 +146,8 @@ export default async function UsagePage({
       };
 
       // Round down to nearest 1000 tokens before calculating cost
-      const inputTokensRounded =
-        Math.floor(usage.totalInputTokens / 1000) * 1000;
-      const outputTokensRounded =
-        Math.floor(usage.totalOutputTokens / 1000) * 1000;
+      const inputTokensRounded = Math.floor(usage.totalInputTokens / 1000) * 1000;
+      const outputTokensRounded = Math.floor(usage.totalOutputTokens / 1000) * 1000;
 
       const inputTokenCost = (inputTokensRounded / 1000) * rate.input;
       const outputTokenCost = (outputTokensRounded / 1000) * rate.output;
@@ -186,7 +168,7 @@ export default async function UsagePage({
         totalCost: number;
         rate: BillableRate;
       }
-    >,
+    >
   );
 
   // Update calculateCosts to use the breakdown
@@ -196,7 +178,7 @@ export default async function UsagePage({
 
     const modelCosts = Object.values(modelCostsBreakdown).reduce(
       (acc, curr) => acc + curr.totalCost,
-      0,
+      0
     );
 
     const totalModelCost = Math.max(0, modelCosts - 5);
@@ -213,12 +195,12 @@ export default async function UsagePage({
   const costs = calculateCosts();
 
   return (
-    <div className="p-6 max-w-6xl space-y-6 text-sm">
+    <div className="container p-6 max-w-6xl mx-auto space-y-6 text-sm">
       <Card>
         <CardHeader>
           <CardTitle>Billing Cycle Information</CardTitle>
           <CardDescription>
-            Current billing period: {cycleStart.toLocaleDateString()} -{" "}
+            Current billing period: {cycleStart.toLocaleDateString()} -{' '}
             {cycleEnd.toLocaleDateString()}
           </CardDescription>
         </CardHeader>
@@ -227,23 +209,17 @@ export default async function UsagePage({
       <Card>
         <CardHeader>
           <CardTitle>Free Tier Status</CardTitle>
-          <CardDescription>
-            Monthly free tier allowance and usage
-          </CardDescription>
+          <CardDescription>Monthly free tier allowance and usage</CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
           <div className="space-y-2">
             <div className="flex justify-between items-center">
               <span className="font-medium">Predictions Free Tier</span>
-              <span className="text-sm text-muted-foreground">
-                {predictionsTotal} / 500 used
-              </span>
+              <span className="text-sm text-muted-foreground">{predictionsTotal} / 500 used</span>
             </div>
             <Progress value={(predictionsTotal / 500) * 100} />
             {freeTierRemaining > 0 && (
-              <p className="text-sm text-green-600">
-                {freeTierRemaining} predictions remaining
-              </p>
+              <p className="text-sm text-green-600">{freeTierRemaining} predictions remaining</p>
             )}
           </div>
 
@@ -263,8 +239,7 @@ export default async function UsagePage({
           </div>
 
           <div className="text-sm text-muted-foreground mt-4">
-            Your free tier includes 500 predictions and $5 of model costs each
-            billing cycle.
+            Your free tier includes 500 predictions and $5 of model costs each billing cycle.
           </div>
         </CardContent>
       </Card>
@@ -272,17 +247,14 @@ export default async function UsagePage({
       <Card>
         <CardHeader>
           <CardTitle>Pay As You Go Usage</CardTitle>
-          <CardDescription>
-            Billable usage beyond free tier allowance
-          </CardDescription>
+          <CardDescription>Billable usage beyond free tier allowance</CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
           <div className="space-y-2">
             <div className="flex justify-between">
               <span className="font-medium">Platform Usage</span>
               <span>
-                {Math.max(0, predictionsTotal - 500).toLocaleString()} paid
-                predictions
+                {Math.max(0, predictionsTotal - 500).toLocaleString()} paid predictions
                 <span className="text-muted-foreground ml-2">
                   (${costs.platformCost.toFixed(2)})
                 </span>
@@ -305,8 +277,8 @@ export default async function UsagePage({
           </div>
 
           <div className="text-sm text-muted-foreground">
-            Platform fee: $0.50 per 100 predictions after free tier. Models
-            token usage is billed at cost.
+            Platform fee: $0.50 per 100 predictions after free tier. Models token usage is billed at
+            cost.
           </div>
         </CardContent>
       </Card>
@@ -314,19 +286,14 @@ export default async function UsagePage({
       <Card>
         <CardHeader>
           <CardTitle>Model Usage Statistics</CardTitle>
-          <CardDescription>
-            Daily token usage and model invocations
-          </CardDescription>
+          <CardDescription>Daily token usage and model invocations</CardDescription>
         </CardHeader>
         <CardContent>
-          <Tabs
-            defaultValue={Object.keys(modelGroups)[0] || "all"}
-            className="space-y-4"
-          >
-            <TabsList>
+          <Tabs defaultValue={Object.keys(modelGroups)[0] || 'all'} className="space-y-6">
+            <TabsList className="flex flex-wrap gap-2 h-auto p-2">
               <TabsTrigger value="all">All Models</TabsTrigger>
-              {Object.keys(modelGroups).map((modelId) => (
-                <TabsTrigger key={modelId} value={modelId}>
+              {Object.keys(modelGroups).map(modelId => (
+                <TabsTrigger key={modelId} value={modelId} className="flex-shrink-0">
                   {modelId}
                 </TabsTrigger>
               ))}
@@ -344,10 +311,10 @@ export default async function UsagePage({
                   </TableRow>
                 </TableHeader>
                 <TableBody>
-                  {modelUsage.map((day) => (
+                  {modelUsage.map(day => (
                     <TableRow key={`${day.date}-${day.modelId}`}>
                       <TableCell>{day.date}</TableCell>
-                      <TableCell>{day.modelId || "Unknown"}</TableCell>
+                      <TableCell>{day.modelId || 'Unknown'}</TableCell>
                       <TableCell className="text-right">
                         {day.totalInputTokens?.toLocaleString()}
                       </TableCell>
@@ -386,8 +353,7 @@ export default async function UsagePage({
                       <span>
                         ${modelCostsBreakdown[modelId].inputCost.toFixed(2)}
                         <span className="text-muted-foreground ml-2">
-                          (${modelCostsBreakdown[modelId].rate.input.toFixed(3)}{" "}
-                          per 1K tokens)
+                          (${modelCostsBreakdown[modelId].rate.input.toFixed(3)} per 1K tokens)
                         </span>
                       </span>
                     </div>
@@ -397,10 +363,7 @@ export default async function UsagePage({
                         ${modelCostsBreakdown[modelId].outputCost.toFixed(2)}
                         <span className="text-muted-foreground ml-2">
                           ($
-                          {modelCostsBreakdown[modelId].rate.output.toFixed(
-                            3,
-                          )}{" "}
-                          per 1K tokens)
+                          {modelCostsBreakdown[modelId].rate.output.toFixed(3)} per 1K tokens)
                         </span>
                       </span>
                     </div>
@@ -416,19 +379,13 @@ export default async function UsagePage({
                     <TableHeader>
                       <TableRow>
                         <TableHead>Date</TableHead>
-                        <TableHead className="text-right">
-                          Input Tokens
-                        </TableHead>
-                        <TableHead className="text-right">
-                          Output Tokens
-                        </TableHead>
-                        <TableHead className="text-right">
-                          Model Calls
-                        </TableHead>
+                        <TableHead className="text-right">Input Tokens</TableHead>
+                        <TableHead className="text-right">Output Tokens</TableHead>
+                        <TableHead className="text-right">Model Calls</TableHead>
                       </TableRow>
                     </TableHeader>
                     <TableBody>
-                      {usage.map((day) => (
+                      {usage.map(day => (
                         <TableRow key={day.date}>
                           <TableCell>{day.date}</TableCell>
                           <TableCell className="text-right">
@@ -447,19 +404,13 @@ export default async function UsagePage({
                       <TableRow>
                         <TableCell>Total</TableCell>
                         <TableCell className="text-right">
-                          {modelGroupTotals[
-                            modelId
-                          ].totalInputTokens.toLocaleString()}
+                          {modelGroupTotals[modelId].totalInputTokens.toLocaleString()}
                         </TableCell>
                         <TableCell className="text-right">
-                          {modelGroupTotals[
-                            modelId
-                          ].totalOutputTokens.toLocaleString()}
+                          {modelGroupTotals[modelId].totalOutputTokens.toLocaleString()}
                         </TableCell>
                         <TableCell className="text-right">
-                          {modelGroupTotals[
-                            modelId
-                          ].totalModelInvocations.toLocaleString()}
+                          {modelGroupTotals[modelId].totalModelInvocations.toLocaleString()}
                         </TableCell>
                       </TableRow>
                     </TableFooter>
@@ -485,7 +436,7 @@ export default async function UsagePage({
               </TableRow>
             </TableHeader>
             <TableBody>
-              {agentRuns.map((day) => (
+              {agentRuns.map(day => (
                 <TableRow key={day.date}>
                   <TableCell>{day.date}</TableCell>
                   <TableCell className="text-right">
@@ -497,9 +448,7 @@ export default async function UsagePage({
             <TableFooter>
               <TableRow>
                 <TableCell>Total</TableCell>
-                <TableCell className="text-right">
-                  {predictionsTotal.toLocaleString()}
-                </TableCell>
+                <TableCell className="text-right">{predictionsTotal.toLocaleString()}</TableCell>
               </TableRow>
             </TableFooter>
           </Table>
diff --git a/app/app/layout.tsx b/app/app/layout.tsx
index ac2b31a3..6b04017d 100644
--- a/app/app/layout.tsx
+++ b/app/app/layout.tsx
@@ -56,10 +56,13 @@ export default function RootLayout({
   return (
     <ClerkProvider>
       <RollbarProvider config={rollbarConfig}>
-        <html lang="en">
+        <html lang="en" className="h-full">
+          <head>
+            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+          </head>
           <body
             className={cn(
-              "min-h-screen bg-background font-sans antialiased",
+              "h-full min-h-screen bg-background font-sans antialiased",
               fontSans.variable,
             )}
           >
diff --git a/app/components/breadcrumbs.tsx b/app/components/breadcrumbs.tsx
index 1d2440c9..6b3947e3 100644
--- a/app/components/breadcrumbs.tsx
+++ b/app/components/breadcrumbs.tsx
@@ -1,5 +1,5 @@
-import { client } from "@/client/client";
-import { auth } from "@clerk/nextjs";
+import { client } from '@/client/client';
+import { auth } from '@clerk/nextjs';
 import {
   BookOpen,
   ExternalLink,
@@ -9,51 +9,32 @@ import {
   Hammer,
   NetworkIcon,
   BarChart2,
-} from "lucide-react";
-import Link from "next/link";
-import ErrorDisplay from "./error-display";
+} from 'lucide-react';
+import Link from 'next/link';
+import ErrorDisplay from './error-display';
 
 interface ClusterBreadcrumbsProps {
   clusterId: string;
 }
 
 const linkStyles =
-  "flex items-center px-3 py-1.5 text-sm text-gray-600 hover:text-gray-900 hover:bg-slate-50 rounded-sm transition-all gap-2 border border-transparent hover:border-gray-100";
+  'flex items-center px-3 py-1.5 text-sm text-gray-600 hover:text-gray-900 hover:bg-slate-50 rounded-sm transition-all gap-2 border border-transparent hover:border-gray-100';
 
-export async function ClusterBreadcrumbs({
-  clusterId,
-}: ClusterBreadcrumbsProps) {
-  const { getToken } = auth();
-
-  const clusterDetails = await client.getCluster({
-    headers: { authorization: `Bearer ${await getToken()}` },
-    params: { clusterId },
-  });
-
-  if (clusterDetails.status !== 200) {
-    return (
-      <ErrorDisplay
-        error={clusterDetails.body}
-        status={clusterDetails.status}
-      />
-    );
-  }
+// Extracted NavigationItems component to be used in both Header and Breadcrumbs
+export function NavigationItems({ clusterId }: { clusterId?: string }) {
+  if (!clusterId) return null;
 
   return (
-    <div className="px-6 py-2 flex gap-2 items-center border-b bg-white">
+    <>
       <Link href={`/clusters/${clusterId}/runs`} className={linkStyles}>
         <PlayCircle className="h-4 w-4" /> Runs
       </Link>
-      {clusterDetails.body.enableRunConfigs && (
-        <Link href={`/clusters/${clusterId}/configs`} className={linkStyles}>
-          <Hammer className="h-4 w-4" /> Run Configs
-        </Link>
-      )}
-      {clusterDetails.body.enableKnowledgebase && (
-        <Link href={`/clusters/${clusterId}/knowledge`} className={linkStyles}>
-          <BookOpen className="h-4 w-4" /> Knowledge
-        </Link>
-      )}
+      <Link href={`/clusters/${clusterId}/configs`} className={linkStyles}>
+        <Hammer className="h-4 w-4" /> Run Configs
+      </Link>
+      <Link href={`/clusters/${clusterId}/knowledge`} className={linkStyles}>
+        <BookOpen className="h-4 w-4" /> Knowledge
+      </Link>
       <Link href={`/clusters/${clusterId}/integrations`} className={linkStyles}>
         <NetworkIcon className="h-4 w-4" /> Integrations
       </Link>
@@ -63,6 +44,28 @@ export async function ClusterBreadcrumbs({
       <Link href={`/clusters/${clusterId}/settings`} className={linkStyles}>
         <Settings className="h-4 w-4" /> Settings
       </Link>
+    </>
+  );
+}
+
+export async function ClusterBreadcrumbs({ clusterId }: ClusterBreadcrumbsProps) {
+  const { getToken } = auth();
+
+  const clusterDetails = await client.getCluster({
+    headers: { authorization: `Bearer ${await getToken()}` },
+    params: { clusterId },
+  });
+
+  if (clusterDetails.status !== 200) {
+    return <ErrorDisplay error={clusterDetails.body} status={clusterDetails.status} />;
+  }
+
+  return (
+    <div className="px-6 py-2 border-b bg-white">
+      {/* Desktop breadcrumbs only */}
+      <div className="hidden md:flex gap-2 items-center">
+        <NavigationItems clusterId={clusterId} />
+      </div>
     </div>
   );
 }
@@ -73,11 +76,7 @@ export async function GlobalBreadcrumbs() {
       <Link href={`/clusters`} className={linkStyles}>
         <Network className="h-4 w-4" /> Clusters
       </Link>
-      <Link
-        href={`https://docs.inferable.ai`}
-        target="_blank"
-        className={linkStyles}
-      >
+      <Link href={`https://docs.inferable.ai`} target="_blank" className={linkStyles}>
         <ExternalLink className="h-4 w-4" /> Docs
       </Link>
     </div>
diff --git a/app/components/header.tsx b/app/components/header.tsx
index 1a63a1c5..c058f371 100644
--- a/app/components/header.tsx
+++ b/app/components/header.tsx
@@ -1,23 +1,91 @@
-import { OrganizationSwitcher, UserButton } from "@clerk/nextjs";
-import Image from "next/image";
-import logo from "./logo.png";
+'use client';
+
+import { OrganizationSwitcher, UserButton } from '@clerk/nextjs';
+import Image from 'next/image';
+import logo from './logo.png';
+import { Menu } from 'lucide-react';
+import { Button } from './ui/button';
+import { Sheet, SheetContent, SheetTrigger, SheetClose } from './ui/sheet';
+import { NavigationItems } from './breadcrumbs';
+import { useParams } from 'next/navigation';
 
 export function Header() {
+  const params = useParams();
+  const clusterId = params?.clusterId as string;
+
+  const navigationItems = NavigationItems({ clusterId });
+  if (!navigationItems) return null;
+
+  const navigationLinks = Array.isArray(navigationItems.props.children)
+    ? navigationItems.props.children
+    : [navigationItems.props.children];
+
   return (
     <header className="flex items-center justify-between w-full h-16 px-8">
       <div className="flex items-center space-x-8">
-        <a href="/" className="flex items-center space-x-4">
-          <div className="flex items-center space-x-4 -ml-2">
-            <Image src={logo} width={40} height={40} alt={"logo"} />
-            <h1 className="text-2xl">Playground</h1>
+        <div className="flex items-center gap-4">
+          {/* Mobile menu */}
+          <div className="md:hidden">
+            <Sheet>
+              <SheetTrigger asChild>
+                <Button variant="ghost" size="sm">
+                  <Menu className="h-5 w-5" />
+                </Button>
+              </SheetTrigger>
+              <SheetContent side="left" className="w-[240px] flex flex-col gap-2 pt-8">
+                {/* User profile section */}
+                <div className="mb-4 pb-4 border-b">
+                  <div className="flex justify-center mb-4">
+                    <UserButton
+                      appearance={{
+                        variables: {
+                          colorText: 'black',
+                        },
+                      }}
+                    />
+                  </div>
+                  <OrganizationSwitcher
+                    hidePersonal={true}
+                    appearance={{
+                      variables: {
+                        colorText: 'black',
+                      },
+                      elements: {
+                        rootBox: 'w-full',
+                        organizationSwitcherTrigger: 'w-full',
+                      },
+                    }}
+                    afterSelectOrganizationUrl="/switch-org"
+                  />
+                </div>
+                {/* Navigation section */}
+                <h2 className="font-medium mb-2 text-sm">Navigation</h2>
+                {navigationLinks.map(
+                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                  (child: any, index: any) =>
+                    child && (
+                      <SheetClose key={index} asChild>
+                        {child}
+                      </SheetClose>
+                    )
+                )}
+              </SheetContent>
+            </Sheet>
           </div>
-        </a>
+          <a href="/" className="flex items-center space-x-4">
+            <div className="flex items-center space-x-4 -ml-2">
+              <Image className="hidden md:block" src={logo} width={40} height={40} alt={'logo'} />
+              <h1 className="text-2xl hidden md:block">Playground</h1>
+            </div>
+          </a>
+        </div>
       </div>
-      <div className="flex items-center space-x-8">
+      {/* Desktop user controls */}
+      <div className="hidden md:flex items-center space-x-8">
         <UserButton
           appearance={{
             variables: {
-              colorText: "black",
+              colorText: 'black',
             },
           }}
         />
@@ -26,7 +94,7 @@ export function Header() {
             hidePersonal={true}
             appearance={{
               variables: {
-                colorText: "black",
+                colorText: 'black',
               },
             }}
             afterSelectOrganizationUrl="/switch-org"