@inkeep/agents-manage-ui 0.1.0

package/src/app/utils/format-date.ts

@@ -0,0 +1,95 @@
+/**
+ * Formats an ISO date string as "Mon DD, YYYY", e.g. "Jan 20, 2024".
+ * @param {string} isoString - An ISO‐formatted date string, e.g. "2024-01-20T14:45:00Z"
+ * @returns {string} - Formatted date like "Jan 20, 2024"
+ */
+export function formatDate(isoString: string) {
+  const date = new Date(isoString);
+
+  // Check if the date is valid first
+  if (Number.isNaN(date.getTime())) {
+    return 'Invalid date';
+  }
+
+  try {
+    const formatter = new Intl.DateTimeFormat('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    });
+    return formatter.format(date);
+  } catch (error) {
+    console.error('Error formatting date:', error);
+    return 'Invalid date';
+  }
+}
+
+export function formatDateTime(isoString: string): string {
+  const date = new Date(isoString);
+  if (Number.isNaN(date.getTime())) return 'Invalid date';
+  return new Intl.DateTimeFormat('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: true,
+  }).format(date); // e.g. "Aug 28, 2024, 5:42:30 PM"
+}
+
+export function formatDateAgo(dateString: string) {
+  try {
+    const date = new Date(dateString);
+
+    // Check if the date is valid
+    if (Number.isNaN(date.getTime())) {
+      return 'Invalid date';
+    }
+
+    const now = new Date();
+    const diffInMs = now.getTime() - date.getTime();
+
+    // Handle future dates
+    if (diffInMs < 0) {
+      return 'In the future';
+    }
+
+    const diffInMinutes = Math.floor(diffInMs / (1000 * 60));
+    const diffInHours = Math.floor(diffInMs / (1000 * 60 * 60));
+    const diffInDays = Math.floor(diffInMs / (1000 * 60 * 60 * 24));
+
+    if (diffInMinutes < 1) {
+      return 'just now';
+    } else if (diffInMinutes < 60) {
+      return `${diffInMinutes}m ago`;
+    } else if (diffInHours < 24) {
+      return `${diffInHours}h ago`;
+    } else if (diffInDays < 7) {
+      return `${diffInDays}d ago`;
+    } else if (diffInDays < 30) {
+      const weeks = Math.floor(diffInDays / 7);
+      return `${weeks}w ago`;
+    } else {
+      return date.toLocaleDateString('en-US', {
+        month: 'short',
+        day: 'numeric',
+        year: date.getFullYear() !== now.getFullYear() ? 'numeric' : undefined,
+      });
+    }
+  } catch (error) {
+    console.warn('Error formatting date:', dateString, error);
+    return 'Invalid date';
+  }
+}
+
+export function formatDuration(durationMs: number): string {
+  const totalMinutes = Math.round(durationMs / 1000 / 60);
+  const hours = Math.floor(totalMinutes / 60);
+  const minutes = totalMinutes % 60;
+
+  if (hours > 0) {
+    return `${hours}h ${minutes}m`;
+  }
+  return `${minutes}m`;
+}

package/src/components/api-keys/api-key-display.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { CopyableSingleLineCode } from '@/components/ui/copyable-single-line-code';
+
+interface ApiKeyDisplayProps {
+  apiKey: string;
+  open: boolean;
+  onClose: () => void;
+}
+
+export function ApiKeyDisplay({ apiKey, open, onClose }: ApiKeyDisplayProps) {
+  return (
+    <AlertDialog
+      open={open}
+      onOpenChange={(open) => {
+        if (!open) {
+          onClose();
+        }
+      }}
+    >
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Save your API key</AlertDialogTitle>
+          <AlertDialogDescription>
+            Your API key has been generated. Make sure to copy it now and store it in a secure
+            location as{' '}
+            <span className="text-foreground font-medium">it won&apos;t be shown again</span>.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        {apiKey && (
+          <div className="min-w-0">
+            <div className="space-y-6">
+              <div className="min-w-0">
+                <div className="flex items-center justify-between mb-2">
+                  <div className="text-sm font-medium">API Key</div>
+                </div>
+                <CopyableSingleLineCode code={apiKey} />
+              </div>
+            </div>
+          </div>
+        )}
+        <AlertDialogFooter>
+          <AlertDialogAction onClick={onClose}>Done</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

package/src/components/api-keys/api-key-item-menu.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { MoreHorizontal, Trash2 } from 'lucide-react';
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Dialog, DialogTrigger } from '@/components/ui/dialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { DeleteApiKeyConfirmation } from './delete-api-key-confirmation';
+
+interface ApiKeyItemMenuProps {
+  apiKeyId: string;
+  apiKeyName?: string;
+}
+
+export function ApiKeyItemMenu({ apiKeyId, apiKeyName }: ApiKeyItemMenuProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleOpenChange = (open: boolean) => {
+    setIsOpen(open);
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={handleOpenChange}>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+            <MoreHorizontal className="h-4 w-4 text-muted-foreground" />
+            <span className="sr-only">Open menu</span>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-48">
+          <DialogTrigger asChild>
+            <DropdownMenuItem className="text-destructive hover:!bg-destructive/10 dark:hover:!bg-destructive/20 hover:!text-destructive cursor-pointer">
+              <Trash2 className="size-4 text-destructive" />
+              Delete
+            </DropdownMenuItem>
+          </DialogTrigger>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      {isOpen && (
+        <DeleteApiKeyConfirmation
+          apiKeyId={apiKeyId}
+          apiKeyName={apiKeyName}
+          setIsOpen={setIsOpen}
+        />
+      )}
+    </Dialog>
+  );
+}

package/src/components/api-keys/api-keys-table.tsx

@@ -0,0 +1,77 @@
+import { formatDateAgo } from '@/app/utils/format-date';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import type { ApiKey } from '@/lib/api/api-keys';
+import type { Graph } from '@/lib/types/graph-full';
+import { ApiKeyItemMenu } from './api-key-item-menu';
+import { ExpirationIndicator } from './expiration-indicator';
+
+interface ApiKeysTableProps {
+  apiKeys: ApiKey[];
+  graphLookup: Record<string, Graph>;
+}
+
+export function ApiKeysTable({ apiKeys, graphLookup }: ApiKeysTableProps) {
+  return (
+    <div className="rounded-lg border">
+      <Table>
+        <TableHeader>
+          <TableRow noHover>
+            <TableHead>Name</TableHead>
+            <TableHead>Key</TableHead>
+            <TableHead>Last Used</TableHead>
+            <TableHead>Expires</TableHead>
+            <TableHead>Created</TableHead>
+            <TableHead className="w-12"></TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {apiKeys.length === 0 ? (
+            <TableRow noHover>
+              <TableCell colSpan={5} className="text-center text-muted-foreground">
+                No API keys yet.
+              </TableCell>
+            </TableRow>
+          ) : (
+            apiKeys.map(({ id, name, graphId, keyPrefix, lastUsedAt, expiresAt, createdAt }) => (
+              <TableRow key={id} noHover>
+                <TableCell>
+                  <div className="flex flex-col">
+                    <span className="font-medium text-foreground">{name || 'No name'}</span>
+                    <span className="text-sm text-muted-foreground">
+                      {graphLookup[graphId]?.name || graphId}
+                    </span>
+                  </div>
+                </TableCell>
+                <TableCell>
+                  <code className="bg-muted text-muted-foreground rounded-md border px-2 py-1 text-sm font-mono">
+                    {keyPrefix}
+                    {'•'.repeat(3)}
+                  </code>
+                </TableCell>
+                <TableCell className="text-sm text-muted-foreground">
+                  {lastUsedAt ? formatDateAgo(lastUsedAt) : 'Never'}
+                </TableCell>
+                <TableCell>
+                  <ExpirationIndicator expiresAt={expiresAt} />
+                </TableCell>
+                <TableCell className="text-sm text-muted-foreground">
+                  {createdAt ? formatDateAgo(createdAt) : ''}
+                </TableCell>
+                <TableCell>
+                  <ApiKeyItemMenu apiKeyId={id} apiKeyName={name} />
+                </TableCell>
+              </TableRow>
+            ))
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}

package/src/components/api-keys/delete-api-key-confirmation.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { useParams } from 'next/navigation';
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { DeleteConfirmation } from '@/components/ui/delete-confirmation';
+import { deleteApiKeyAction } from '@/lib/actions/api-keys';
+
+interface DeleteApiKeyConfirmationProps {
+  apiKeyId: string;
+  apiKeyName?: string;
+  setIsOpen: (isOpen: boolean) => void;
+}
+
+export function DeleteApiKeyConfirmation({
+  apiKeyId,
+  apiKeyName,
+  setIsOpen,
+}: DeleteApiKeyConfirmationProps) {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const { tenantId, projectId } = useParams<{ tenantId: string; projectId: string }>();
+
+  const handleDelete = async () => {
+    setIsSubmitting(true);
+    try {
+      const result = await deleteApiKeyAction(tenantId, projectId, apiKeyId);
+      if (result.success) {
+        setIsOpen(false);
+        toast.success('API key deleted.');
+      } else {
+        toast.error(result.error);
+      }
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <DeleteConfirmation
+      itemName={apiKeyName || 'this API key'}
+      isSubmitting={isSubmitting}
+      onDelete={handleDelete}
+    />
+  );
+}

package/src/components/api-keys/expiration-indicator.tsx

@@ -0,0 +1,86 @@
+import { AlertCircle } from 'lucide-react';
+import { formatDate } from '@/app/utils/format-date';
+import { Badge } from '@/components/ui/badge';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
+
+interface ExpirationIndicatorProps {
+  expiresAt: string | undefined;
+}
+
+function isExpired(expiresAt: string | undefined): boolean {
+  if (!expiresAt) return false;
+  const expiryDate = new Date(expiresAt);
+  const now = new Date();
+  return expiryDate.getTime() < now.getTime();
+}
+
+function isExpiringInLessThan24Hours(expiresAt: string | undefined): boolean {
+  if (!expiresAt) return false;
+  const expiryDate = new Date(expiresAt);
+  const now = new Date();
+  const hoursUntilExpiry = Math.floor((expiryDate.getTime() - now.getTime()) / (1000 * 60 * 60));
+  return hoursUntilExpiry <= 24 && hoursUntilExpiry >= 0;
+}
+
+function isExpiringSoon(expiresAt: string | undefined): boolean {
+  if (!expiresAt) return false;
+  const expiryDate = new Date(expiresAt);
+  const now = new Date();
+  const daysUntilExpiry = Math.floor(
+    (expiryDate.getTime() - now.getTime()) / (1000 * 60 * 60 * 24)
+  );
+  return daysUntilExpiry <= 7 && daysUntilExpiry >= 0;
+}
+
+export function ExpirationIndicator({ expiresAt }: ExpirationIndicatorProps) {
+  // Show expiration date for non-expired keys
+  const showExpirationDate = !isExpired(expiresAt);
+
+  // Determine which indicator to show (most urgent takes precedence)
+  const expired = isExpired(expiresAt);
+  const criticallyExpiring = isExpiringInLessThan24Hours(expiresAt) && !expired;
+  const expiringSoon = isExpiringSoon(expiresAt) && !criticallyExpiring && !expired;
+
+  return (
+    <div className="flex items-center gap-2">
+      {showExpirationDate && (
+        <span className="text-sm text-muted-foreground">
+          {expiresAt ? formatDate(expiresAt) : 'Never'}
+        </span>
+      )}
+
+      {expired && (
+        <Tooltip>
+          <TooltipTrigger>
+            <Badge variant="error">Expired</Badge>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>This API key expired on {expiresAt ? formatDate(expiresAt) : ''}</p>
+          </TooltipContent>
+        </Tooltip>
+      )}
+
+      {criticallyExpiring && (
+        <Tooltip>
+          <TooltipTrigger>
+            <AlertCircle className="h-4 w-4 text-red-500" />
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>Expires in less than 24 hours</p>
+          </TooltipContent>
+        </Tooltip>
+      )}
+
+      {expiringSoon && (
+        <Tooltip>
+          <TooltipTrigger>
+            <AlertCircle className="h-4 w-4 text-amber-500" />
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>Expires in less than 7 days</p>
+          </TooltipContent>
+        </Tooltip>
+      )}
+    </div>
+  );
+}

package/src/components/api-keys/form/api-key-form.tsx

@@ -0,0 +1,120 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { GenericComboBox } from '@/components/form/generic-combo-box';
+import type { SelectOption } from '@/components/form/generic-select';
+import { GenericSelect } from '@/components/form/generic-select';
+import { Button } from '@/components/ui/button';
+import { Form } from '@/components/ui/form';
+import { createApiKeyAction } from '@/lib/actions/api-keys';
+import type { ApiKey, ApiKeyCreateResponse } from '@/lib/api/api-keys';
+import { defaultValues } from './form-configuration';
+import { type ApiKeyFormData, apiKeySchema, EXPIRATION_DATE_OPTIONS } from './validation';
+
+interface ApiKeyFormProps {
+  tenantId: string;
+  projectId: string;
+  initialData?: ApiKeyFormData;
+  graphsOptions: SelectOption[];
+  onApiKeyCreated?: (apiKeyData: ApiKeyCreateResponse) => void;
+}
+
+const convertDurationToDate = (duration: string): string | undefined => {
+  if (duration === 'never') {
+    return undefined;
+  }
+
+  const now = new Date();
+
+  switch (duration) {
+    case '1d':
+      now.setDate(now.getDate() + 1);
+      break;
+    case '1w':
+      now.setDate(now.getDate() + 7);
+      break;
+    case '1m':
+      now.setMonth(now.getMonth() + 1);
+      break;
+    case '3m':
+      now.setMonth(now.getMonth() + 3);
+      break;
+    case '1y':
+      now.setFullYear(now.getFullYear() + 1);
+      break;
+    default:
+      return undefined;
+  }
+
+  return now.toISOString();
+};
+
+export function ApiKeyForm({
+  tenantId,
+  projectId,
+  initialData,
+  graphsOptions,
+  onApiKeyCreated,
+}: ApiKeyFormProps) {
+  const form = useForm<ApiKeyFormData>({
+    resolver: zodResolver(apiKeySchema),
+    defaultValues: initialData || defaultValues,
+  });
+
+  const { isSubmitting } = form.formState;
+
+  const onSubmit = async (data: ApiKeyFormData) => {
+    try {
+      const expiresAt = data.expiresAt ? convertDurationToDate(data.expiresAt) : undefined;
+
+      const payload: Partial<ApiKey> = {
+        graphId: data.graphId,
+        expiresAt,
+      };
+
+      const res = await createApiKeyAction(tenantId, projectId, payload);
+      if (!res.success) {
+        toast.error(res.error || 'Failed to create api key');
+        return;
+      }
+
+      if (res.data) {
+        onApiKeyCreated?.(res.data);
+      }
+      toast.success('API key created successfully');
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'An unexpected error occurred';
+      toast.error(errorMessage);
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+        <GenericSelect
+          control={form.control}
+          name="expiresAt"
+          label="Expiration"
+          placeholder="Select expiration date"
+          options={EXPIRATION_DATE_OPTIONS}
+          selectTriggerClassName="w-full"
+        />
+        <GenericComboBox
+          control={form.control}
+          name="graphId"
+          label="Graph"
+          options={graphsOptions}
+          placeholder="Select a graph"
+          searchPlaceholder="Search graphs..."
+        />
+        <div className="flex justify-end">
+          <Button type="submit" disabled={isSubmitting}>
+            Create API key
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+}

package/src/components/api-keys/form/form-configuration.tsx

@@ -0,0 +1,7 @@
+import type { ApiKeyFormData } from './validation';
+
+export const defaultValues: ApiKeyFormData = {
+  // name: '', // todo: will be added soon
+  graphId: '',
+  expiresAt: 'never',
+};

package/src/components/api-keys/form/validation.ts

@@ -0,0 +1,20 @@
+import { z } from 'zod';
+
+export const EXPIRATION_DATE_OPTIONS = [
+  { value: '1d', label: '1 day' },
+  { value: '1w', label: '1 week' },
+  { value: '1m', label: '1 month' },
+  { value: '3m', label: '3 months' },
+  { value: '1y', label: '1 year' },
+  { value: 'never', label: 'No expiration' },
+];
+
+export const apiKeySchema = z.object({
+  // name: z.string().min(1, 'Please enter a name.'), // todo: will be added soon
+  graphId: z.string().min(1, 'Please select a graph.'),
+  expiresAt: z.enum(['1d', '1w', '1m', '3m', '1y', 'never'], {
+    message: 'Please select a valid expiration date.',
+  }),
+});
+
+export type ApiKeyFormData = z.infer<typeof apiKeySchema>;

package/src/components/api-keys/new-api-key-dialog.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import { Plus } from 'lucide-react';
+import { useState } from 'react';
+import type { SelectOption } from '@/components/form/generic-select';
+import type { ApiKeyCreateResponse } from '@/lib/api/api-keys';
+import { Button } from '../ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '../ui/dialog';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
+import { ApiKeyDisplay } from './api-key-display';
+import { ApiKeyForm } from './form/api-key-form';
+
+interface NewApiKeyDialogProps {
+  tenantId: string;
+  projectId: string;
+  graphsOptions: SelectOption[];
+}
+
+export function NewApiKeyDialog({ tenantId, projectId, graphsOptions }: NewApiKeyDialogProps) {
+  const [isFormOpen, setIsFormOpen] = useState(false);
+  const [createdApiKey, setCreatedApiKey] = useState<ApiKeyCreateResponse | null>(null);
+
+  const hasGraphs = graphsOptions.length > 0;
+
+  const handleApiKeyCreated = (apiKeyData: ApiKeyCreateResponse) => {
+    setCreatedApiKey(apiKeyData);
+    setIsFormOpen(false);
+  };
+
+  const handleApiKeyDisplayClosed = () => {
+    setCreatedApiKey(null);
+  };
+
+  return (
+    <>
+      {/* Form Dialog */}
+      <Dialog open={isFormOpen} onOpenChange={setIsFormOpen}>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div>
+              <DialogTrigger asChild>
+                <Button disabled={!hasGraphs}>
+                  <Plus className="size-4" /> New API key
+                </Button>
+              </DialogTrigger>
+            </div>
+          </TooltipTrigger>
+          {!hasGraphs && (
+            <TooltipContent className="max-w-3xs">
+              Please create a graph first, then you will be able to create an API key.
+            </TooltipContent>
+          )}
+        </Tooltip>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>New API key</DialogTitle>
+            <DialogDescription className="sr-only">Create a new API key.</DialogDescription>
+          </DialogHeader>
+          <div className="pt-6">
+            <ApiKeyForm
+              tenantId={tenantId}
+              projectId={projectId}
+              graphsOptions={graphsOptions}
+              onApiKeyCreated={handleApiKeyCreated}
+            />
+          </div>
+        </DialogContent>
+      </Dialog>
+      {/* API Key Display Alert Dialog */}
+      <ApiKeyDisplay
+        apiKey={createdApiKey?.key ?? ''}
+        open={!!createdApiKey}
+        onClose={handleApiKeyDisplayClosed}
+      />
+    </>
+  );
+}