feat: Add timestamp to service definitions and update UI

app/components/cluster-details.tsx

@@ -25,7 +25,7 @@ import {
 import { createErrorToast } from "@/lib/utils";
 import { useAuth } from "@clerk/nextjs";
 import { ClientInferResponseBody, ClientInferResponses } from "@ts-rest/core";
-import { formatRelative } from "date-fns";
+import { formatDistance, formatRelative } from "date-fns";
 import { AppWindowIcon, Layers } from "lucide-react";
 import ToolContextButton from "./chat/ToolContextButton";
 import { DeadGrayCircle, DeadRedCircle, LiveGreenCircle } from "./circles";
@@ -41,6 +41,7 @@ export type Service = {
     description?: string;
     schema?: string;
   }[];
+  timestamp: string;
 };
 
 function toServiceName(name: string) {
@@ -81,19 +82,20 @@ function ServiceCard({
           </div>
         </div>
       </div>
-      <Table>
+      <Table className="text-sm">
         <TableHeader>
           <TableRow>
-            <TableHead className="w-1/3">Function</TableHead>
-            <TableHead className="w-2/3">Description</TableHead>
+            <TableHead className="w-1/4">Function</TableHead>
+            <TableHead className="w-2/4">Description</TableHead>
+            <TableHead className="w-1/4">Last Ping</TableHead>
           </TableRow>
         </TableHeader>
         <TableBody>
           {service.functions
             ?.sort((a, b) => a.name.localeCompare(b.name))
             .map((func) => (
               <TableRow key={func.name}>
-                <TableCell className="w-1/3">
+                <TableCell className="w-1/4">
                   <div className="flex items-center space-x-2">
                     <span className="font-semibold text-sm">
                       {toFunctionName(func.name, service.name)}
@@ -105,9 +107,18 @@ function ServiceCard({
                     />
                   </div>
                 </TableCell>
-                <TableCell className="w-2/3">
+                <TableCell className="w-1/4">
                   {func.description || "No description"}
                 </TableCell>
+                <TableCell className="w-2/4 text-muted-foreground">
+                  {new Date(service.timestamp) > new Date() ? (
+                    <p className="text-sm text-muted-foreground">
+                      Permanent Sync
+                    </p>
+                  ) : (
+                    formatDistance(new Date(service.timestamp), new Date())
+                  )}
+                </TableCell>
               </TableRow>
             ))}
         </TableBody>
@@ -219,8 +230,6 @@ export function ClusterDetails({
     (m) => Date.now() - new Date(m.lastPingAt!).getTime() < 1000 * 60
   ).length;
 
-  const isHealthy = liveMachineCount > 0 && services.length > 0;
-
   return (
     <div className="flex flex-col space-y-2 w-[160px]">
       <Sheet>
@@ -230,7 +239,11 @@ export function ClusterDetails({
             className="border bg-white hover:bg-gray-50 w-full h-10 px-3 justify-start relative"
           >
             <div className="absolute -top-1 right-0">
-              {isHealthy ? <SmallLiveGreenCircle /> : <SmallDeadRedCircle />}
+              {liveMachineCount > 0 ? (
+                <SmallLiveGreenCircle />
+              ) : (
+                <SmallDeadRedCircle />
+              )}
             </div>
             <div className="flex items-center gap-2 text-sm w-full">
               <div className="h-6 w-6 shrink-0 rounded-full bg-gray-100 flex items-center justify-center">
@@ -273,7 +286,11 @@ export function ClusterDetails({
             className="border bg-white hover:bg-gray-50 w-full h-10 px-3 justify-start relative"
           >
             <div className="absolute -top-1 right-0">
-              {isHealthy ? <SmallLiveGreenCircle /> : <SmallDeadRedCircle />}
+              {services.length > 0 ? (
+                <SmallLiveGreenCircle />
+              ) : (
+                <SmallDeadRedCircle />
+              )}
             </div>
             <div className="flex items-center gap-2 text-sm w-full">
               <div className="h-6 w-6 shrink-0 rounded-full bg-gray-100 flex items-center justify-center">

app/components/services-overview.tsx

@@ -23,6 +23,7 @@ export type Service = {
     description?: string;
     schema?: string;
   }[];
+  timestamp: string;
 };
 
 function toServiceName(name: string) {
@@ -68,6 +69,7 @@ function ServiceCard({
           <TableRow>
             <TableHead className="w-1/3">Function</TableHead>
             <TableHead className="w-2/3">Description</TableHead>
+            <TableHead className="w-1/3">Last Ping</TableHead>
           </TableRow>
         </TableHeader>
         <TableBody>
@@ -90,6 +92,9 @@ function ServiceCard({
                 <TableCell className="w-2/3">
                   {func.description || "No description"}
                 </TableCell>
+                <TableCell className="w-1/3">
+                  {service.timestamp || "No description"}
+                </TableCell>
               </TableRow>
             ))}
         </TableBody>

control-plane/src/modules/contract.ts

@@ -929,6 +929,7 @@ export const definition = {
               }),
             )
             .optional(),
+          timestamp: z.date(),
         }),
       ),
     },

control-plane/src/modules/management.ts

@@ -3,9 +3,7 @@ import { ulid } from "ulid";
 import * as errors from "../utilities/errors";
 import * as data from "./data";
 import { randomName } from "./names";
-import {
-  storedServiceDefinitionSchema,
-} from "./service-definitions";
+import { storedServiceDefinitionSchema } from "./service-definitions";
 import { VersionedTexts } from "./versioned-text";
 
 export const getClusters = async ({
@@ -197,12 +195,16 @@ export const getClusterServices = async ({
   const services = await data.db
     .select({
       definition: data.services.definition,
+      timestamp: data.services.timestamp,
     })
     .from(data.services)
     .where(eq(data.services.cluster_id, clusterId));
 
   const serviceDefinitions = storedServiceDefinitionSchema.parse(
-    services.map((s) => s.definition),
+    services.map((s) => ({
+      ...(s.definition as object),
+      timestamp: s.timestamp,
+    })),
   );
 
   return serviceDefinitions;

control-plane/src/modules/service-definitions.ts

@@ -43,6 +43,7 @@ export const storedServiceDefinitionSchema = z.array(
   z.object({
     name: z.string(),
     description: z.string().optional(),
+    timestamp: z.date(),
     functions: z
       .array(
         z.object({
@@ -415,19 +416,22 @@ export const validateServiceRegistration = ({
       } catch {
         throw new InvalidServiceRegistrationError(
           `${fn.name} cache.keyPath is invalid`,
-          "https://docs.inferable.ai/pages/functions#config-cache"
-        )
+          "https://docs.inferable.ai/pages/functions#config-cache",
+        );
       }
     }
 
     // Checks for customer auth handler
     const VERIFY_FUNCTION_NAME = "handleCustomAuth";
     const VERIFY_FUNCTION_SERVICE = "default";
-    if (service === VERIFY_FUNCTION_SERVICE && fn.name === VERIFY_FUNCTION_NAME) {
+    if (
+      service === VERIFY_FUNCTION_SERVICE &&
+      fn.name === VERIFY_FUNCTION_NAME
+    ) {
       if (!fn.schema) {
         throw new InvalidServiceRegistrationError(
           `${fn.name} must have a valid schema`,
-          "https://docs.inferable.ai/pages/auth#handlecustomerauth"
+          "https://docs.inferable.ai/pages/auth#handlecustomerauth",
         );
       }
 
@@ -437,7 +441,7 @@ export const validateServiceRegistration = ({
       if (!schema.success) {
         throw new InvalidServiceRegistrationError(
           `${fn.name} schema is not valid`,
-          "https://docs.inferable.ai/pages/auth#handlecustomerauth"
+          "https://docs.inferable.ai/pages/auth#handlecustomerauth",
         );
       }
     }