unkeyed · ogzhanolguncu · Sep 25, 2025 · Sep 18, 2025 · Sep 18, 2025 · Sep 18, 2025
@@ -1,83 +1,57 @@
 "use client";
-import { DEFAULT_DRAGGABLE_WIDTH } from "@/app/(app)/logs/constants";
-import { ResizablePanel } from "@/components/logs/details/resizable-panel";
+import { LogDetails } from "@/components/logs/details/log-details";
 import type { KeysOverviewLog } from "@unkey/clickhouse/src/keys/keys";
-import { TimestampInfo } from "@unkey/ui";
+import { TimestampInfo, toast } from "@unkey/ui";
 import Link from "next/link";
-import { useMemo } from "react";
+import { useEffect, useState } from "react";
 import { LogHeader } from "./components/log-header";
 import { OutcomeDistributionSection } from "./components/log-outcome-distribution-section";
 import { LogSection } from "./components/log-section";
 import { PermissionsSection, RolesSection } from "./components/roles-permissions";
 
-type StyleObject = {
-  top: string;
-  width: string;
-  height: string;
-  paddingBottom: string;
-};
-
-const createPanelStyle = (distanceToTop: number): StyleObject => ({
-  top: `${distanceToTop}px`,
-  width: `${DEFAULT_DRAGGABLE_WIDTH}px`,
-  height: `calc(100vh - ${distanceToTop}px)`,
-  paddingBottom: "1rem",
-});
+const ANIMATION_DELAY = 350;
 
-type KeysOverviewLogDetailsProps = {
+type Props = {
   distanceToTop: number;
   log: KeysOverviewLog | null;
   apiId: string;
   setSelectedLog: (data: KeysOverviewLog | null) => void;
 };
 
-export const KeysOverviewLogDetails = ({
-  distanceToTop,
-  log,
-  setSelectedLog,
-  apiId,
-}: KeysOverviewLogDetailsProps) => {
-  const panelStyle = useMemo(() => createPanelStyle(distanceToTop), [distanceToTop]);
+export const KeysOverviewLogDetails = ({ distanceToTop, log, setSelectedLog, apiId }: Props) => {
+  const [errorShown, setErrorShown] = useState(false);
 
-  if (!log) {
-    return null;
-  }
+  useEffect(() => {
+    if (!errorShown && log) {
+      if (!log.key_details) {
+        toast.error("Key Details Unavailable", {
+          description:
+            "Could not retrieve key information for this log. The key may have been deleted or is still processing.",
+        });
+        setErrorShown(true);
+      }
+    }
+    if (!log) {
+      setErrorShown(false);
+    }
+  }, [log, errorShown]);
 
-  const handleClose = (): void => {
+  const handleClose = () => {
     setSelectedLog(null);
   };
 
-  // Only process if key_details exists
+  if (!log) {
+    return null;
+  }
+
   if (!log.key_details) {
-    return (
-      <ResizablePanel
-        onClose={handleClose}
-        className="absolute right-0 bg-gray-1 dark:bg-black font-mono drop-shadow-2xl overflow-y-auto z-20 p-4"
-        style={panelStyle}
-      >
-        <LogHeader log={log} onClose={handleClose} />
-        <div className="py-4 text-center text-accent-9">No key details available</div>
-      </ResizablePanel>
-    );
+    return null;
   }
 
-  // Process key details data
   const metaData = formatMeta(log.key_details.meta);
-  const identifiers = {
-    "Key ID": (
-      <Link
-        title={`View details for ${log.key_id}`}
-        className="font-mono underline decoration-dotted"
-        href={`/apis/${apiId}/keys/${log.key_details?.key_auth_id}/${log.key_id}`}
-      >
-        <div className="font-mono font-medium truncate">{log.key_id}</div>
-      </Link>
-    ),
-    Name: log.key_details.name || "N/A",
-  };
 
   const usage = {
-    Created: metaData?.createdAt ? metaData.createdAt : "N/A",
+    Created: metaData?.createdAt || "N/A",
     "Last Used": log.time ? (
       <TimestampInfo value={log.time} className="font-mono underline decoration-dotted" />
     ) : (
@@ -93,32 +67,50 @@ export const KeysOverviewLogDetails = ({
         : "Unlimited",
   };
 
-  const tags =
-    log.tags && log.tags.length > 0 ? { Tags: log.tags.join(", ") } : { "No tags": null };
+  const identifiers = {
+    "Key ID": (
+      <Link
+        title={`View details for ${log.key_id}`}
+        className="font-mono underline decoration-dotted"
+        href={`/apis/${apiId}/keys/${log.key_details.key_auth_id}/${log.key_id}`}
+      >
+        <div className="font-mono font-medium truncate">{log.key_id}</div>
+      </Link>
+    ),
+    Name: log.key_details.name || "N/A",
+  };
 
   const identity = log.key_details.identity
     ? { "External ID": log.key_details.identity.external_id || "N/A" }
     : { "No identity connected": null };
 
-  const metaString = metaData ? JSON.stringify(metaData, null, 2) : { "No meta available": "" };
+  const tags =
+    log.tags && log.tags.length > 0 ? { Tags: log.tags.join(", ") } : { "No tags": null };
+
+  const sections = [
+    <LogSection key="usage" title="Usage" details={usage} />,
+    log.outcome_counts && (
+      <OutcomeDistributionSection key="outcomes" outcomeCounts={log.outcome_counts} />
+    ),
+    <LogSection key="limits" title="Limits" details={limits} />,
+    <LogSection key="identifiers" title="Identifiers" details={identifiers} />,
+    <LogSection key="identity" title="Identity" details={identity} />,
+    <LogSection key="tags" title="Tags" details={tags} />,
+    <RolesSection key="roles" roles={log.key_details.roles || []} />,
+    <PermissionsSection key="permissions" permissions={log.key_details.permissions || []} />,
+  ].filter(Boolean);
 
   return (
-    <ResizablePanel
-      onClose={handleClose}
-      className="absolute max-md:!h-screen max-md:!w-full max-md:!top-0 right-0 bg-gray-1 dark:bg-black font-mono shadow-2xl overflow-y-auto z-20 p-4"
-      style={panelStyle}
-    >
-      <LogHeader log={log} onClose={handleClose} />
-      <LogSection title="Usage" details={usage} />
-      {log.outcome_counts && <OutcomeDistributionSection outcomeCounts={log.outcome_counts} />}
-      <LogSection title="Limits" details={limits} />
-      <LogSection title="Identifiers" details={identifiers} />
-      <LogSection title="Identity" details={identity} />
-      <LogSection title="Tags" details={tags} />
-      <RolesSection roles={log.key_details.roles || []} />
-      <PermissionsSection permissions={log.key_details.permissions || []} />
-      <LogSection title="Meta" details={metaString} />
-    </ResizablePanel>
+    <LogDetails distanceToTop={distanceToTop} log={log} onClose={handleClose}>
+      <LogDetails.Header onClose={handleClose}>
+        <LogHeader log={log} onClose={handleClose} />
+      </LogDetails.Header>
+      <LogDetails.CustomSections startDelay={150} staggerDelay={50}>
+        {sections}
+      </LogDetails.CustomSections>
+      <LogDetails.Spacer delay={ANIMATION_DELAY} />
+      <LogDetails.Meta />
+    </LogDetails>
   );
 };
 

@@ -1,31 +1,19 @@
 "use client";
-import { ResizablePanel } from "@/components/logs/details/resizable-panel";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useState } from "react";
 
-import { LogFooter } from "@/app/(app)/logs/components/table/log-details/components/log-footer";
-import { LogHeader } from "@/app/(app)/logs/components/table/log-details/components/log-header";
-import { LogSection } from "@/app/(app)/logs/components/table/log-details/components/log-section";
-import { DEFAULT_DRAGGABLE_WIDTH } from "@/app/(app)/logs/constants";
-import { safeParseJson } from "@/app/(app)/logs/utils";
+import { LogDetails } from "@/components/logs/details/log-details";
 import type { KeyDetailsLog } from "@unkey/clickhouse/src/verifications";
 import { toast } from "@unkey/ui";
 import { useFetchRequestDetails } from "./components/hooks/use-logs-query";
 
-const createPanelStyle = (distanceToTop: number) => ({
-  top: `${distanceToTop}px`,
-  width: `${DEFAULT_DRAGGABLE_WIDTH}px`,
-  height: `calc(100vh - ${distanceToTop}px)`,
-  paddingBottom: "1rem",
-});
-
+const ANIMATION_DELAY = 350;
 type Props = {
   distanceToTop: number;
   selectedLog: KeyDetailsLog | null;
   onLogSelect: (log: KeyDetailsLog | null) => void;
 };
 
 export const KeyDetailsDrawer = ({ distanceToTop, onLogSelect, selectedLog }: Props) => {
-  const panelStyle = useMemo(() => createPanelStyle(distanceToTop), [distanceToTop]);
   const { log, error } = useFetchRequestDetails({
     requestId: selectedLog?.request_id,
   });
@@ -69,38 +57,11 @@ export const KeyDetailsDrawer = ({ distanceToTop, onLogSelect, selectedLog }: Pr
   }
 
   return (
-    <ResizablePanel
-      onClose={handleClose}
-      className="absolute right-0 bg-gray-1 dark:bg-black font-mono drop-shadow-2xl overflow-y-auto z-20 p-4"
-      style={panelStyle}
-    >
-      <LogHeader log={log} onClose={handleClose} />
-      <LogSection
-        details={log.request_headers.length ? log.request_headers : "<EMPTY>"}
-        title="Request Header"
-      />
-      <LogSection
-        details={
-          JSON.stringify(safeParseJson(log.request_body), null, 2) === "null"
-            ? "<EMPTY>"
-            : JSON.stringify(safeParseJson(log.request_body), null, 2)
-        }
-        title="Request Body"
-      />
-      <LogSection
-        details={log.response_headers.length ? log.response_headers : "<EMPTY>"}
-        title="Response Header"
-      />
-      <LogSection
-        details={
-          JSON.stringify(safeParseJson(log.response_body), null, 2) === "null"
-            ? "<EMPTY>"
-            : JSON.stringify(safeParseJson(log.response_body), null, 2)
-        }
-        title="Response Body"
-      />
-      <div className="mt-3" />
-      <LogFooter log={log} />
-    </ResizablePanel>
+    <LogDetails distanceToTop={distanceToTop} log={log} onClose={handleClose}>
+      <LogDetails.Header onClose={handleClose} />
+      <LogDetails.Sections />
+      <LogDetails.Spacer delay={ANIMATION_DELAY} />
+      <LogDetails.Footer />
+    </LogDetails>
   );
 };
@@ -1,18 +1,17 @@
 import { formatTimestampForChart } from "@/components/logs/chart/utils/format-timestamp";
 import { HISTORICAL_DATA_WINDOW } from "@/components/logs/constants";
+import type { TimeseriesRequestSchema } from "@/lib/schemas/logs.schema";
 import { trpc } from "@/lib/trpc/client";
 import { useQueryTime } from "@/providers/query-time-provider";
 import { useMemo } from "react";
-import type { z } from "zod";
 import { useFilters } from "../../../hooks/use-filters";
-import type { queryTimeseriesPayload } from "../query-timeseries.schema";
 
 export const useFetchTimeseries = () => {
   const { filters } = useFilters();
 
   const { queryTime: timestamp } = useQueryTime();
   const queryParams = useMemo(() => {
-    const params: z.infer<typeof queryTimeseriesPayload> = {
+    const params: TimeseriesRequestSchema = {
       startTime: timestamp - HISTORICAL_DATA_WINDOW,
       endTime: timestamp,
       host: { filters: [] },
@@ -61,7 +60,7 @@ export const useFetchTimeseries = () => {
             console.error("Host filter value type has to be 'string'");
             return;
           }
-          params.host?.filters.push({
+          params.host?.filters?.push({
             operator: "is",
             value: filter.value,
           });

@@ -1,6 +1,6 @@
-import { logsFilterFieldConfig } from "@/app/(app)/logs/filters.schema";
 import { useFilters } from "@/app/(app)/logs/hooks/use-filters";
 import { FilterOperatorInput } from "@/components/logs/filter-operator-input";
+import { logsFilterFieldConfig } from "@/lib/schemas/logs.filter.schema";
 
 export const PathsFilter = () => {
   const { filters, updateFilters } = useFilters();

@@ -1,5 +1,5 @@
-import type { QuerySearchParams } from "@/app/(app)/logs/filters.schema";
 import { iconsPerField } from "@/components/logs/queries/utils";
+import type { QuerySearchParams } from "@/lib/schemas/logs.filter.schema";
 import { ChartActivity2 } from "@unkey/icons";
 import { format } from "date-fns";
 import React from "react";
@@ -90,7 +90,10 @@ export function formatFilterValues(
 
 export function getFilterFieldIcon(field: string): JSX.Element {
   const Icon = iconsPerField[field] || ChartActivity2;
-  return React.createElement(Icon, { size: "md-regular", className: "justify-center" });
+  return React.createElement(Icon, {
+    size: "md-regular",
+    className: "justify-center",
+  });
 }
 
 export const FieldsToTruncate = [

@@ -1,11 +1,10 @@
 import { HISTORICAL_DATA_WINDOW } from "@/components/logs/constants";
+import type { LogsRequestSchema } from "@/lib/schemas/logs.schema";
 import { trpc } from "@/lib/trpc/client";
 import { useQueryTime } from "@/providers/query-time-provider";
 import type { Log } from "@unkey/clickhouse/src/logs";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import type { z } from "zod";
 import { useFilters } from "../../../hooks/use-filters";
-import type { queryLogsPayload } from "../query-logs.schema";
 
 // Duration in milliseconds for historical data fetch window (12 hours)
 type UseLogsQueryParams = {
@@ -37,7 +36,7 @@ export function useLogsQuery({
 
   //Required for preventing double trpc call during initial render
   const queryParams = useMemo(() => {
-    const params: z.infer<typeof queryLogsPayload> = {
+    const params: LogsRequestSchema = {
       limit,
       startTime: timestamp - HISTORICAL_DATA_WINDOW,
       endTime: timestamp,
@@ -88,7 +87,7 @@ export function useLogsQuery({
             console.error("Host filter value type has to be 'string'");
             return;
           }
-          params.host?.filters.push({
+          params.host?.filters?.push({
             operator: "is",
             value: filter.value,
           });