unkeyed · chronark · Sep 1, 2025 · Aug 26, 2025 · Aug 26, 2025 · Aug 26, 2025
@@ -6,7 +6,7 @@ import { useFilters } from "../../../../hooks/use-filters";
 export const DeploymentListSearch = () => {
   const { filters, updateFilters } = useFilters();
 
-  const queryLLMForStructuredOutput = trpc.deploy.deployment.search.useMutation({
+  const queryLLMForStructuredOutput = trpc.deploy.project.deployment.search.useMutation({
     onSuccess(data) {
       if (data?.filters.length === 0 || !data) {
         toast.error(

@@ -90,7 +90,7 @@ export function useDeploymentsListQuery() {
     fetchNextPage,
     isFetchingNextPage,
     isLoading: isLoadingInitial,
-  } = trpc.deploy.deployment.list.useInfiniteQuery(queryParams, {
+  } = trpc.deploy.project.deployment.list.useInfiniteQuery(queryParams, {
     getNextPageParam: (lastPage) => lastPage.nextCursor,
     staleTime: 30_000,
     refetchOnMount: false,

@@ -0,0 +1,15 @@
+"use client";
+
+import { DeploymentsListControlCloud } from "./components/control-cloud";
+import { DeploymentsListControls } from "./components/controls";
+import { DeploymentsList } from "./components/table/deployments-list";
+
+export default function Deployments() {
+  return (
+    <div className="flex flex-col">
+      <DeploymentsListControls />
+      <DeploymentsListControlCloud />
+      <DeploymentsList />
+    </div>
+  );
+}
@@ -0,0 +1,12 @@
+import { cn } from "@unkey/ui/src/lib/utils";
+import type { ReactNode } from "react";
+
+export function Card({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return <div className={cn("border border-gray-4 w-full", className)}>{children}</div>;
+}
@@ -0,0 +1,34 @@
+import type { IconProps } from "@unkey/icons/src/props";
+import { Button } from "@unkey/ui";
+import { cn } from "@unkey/ui/src/lib/utils";
+
+type FilterButtonProps = {
+  isActive: boolean;
+  count: number;
+  onClick: () => void;
+  icon: React.ComponentType<IconProps>;
+  label: string;
+};
+
+export const FilterButton = ({
+  isActive,
+  count,
+  onClick,
+  icon: Icon,
+  label,
+}: FilterButtonProps) => (
+  <Button
+    variant="primary"
+    className={cn(
+      "text-xs h-[26px] border-none hover:bg-grayA-4",
+      isActive ? "bg-gray-12 hover:bg-grayA-12" : "bg-grayA-3 text-grayA-9",
+    )}
+    onClick={onClick}
+  >
+    <Icon size="sm-regular" className={isActive ? "" : "text-grayA-9"} />
+    <span className={isActive ? "" : "text-grayA-9"}>{label}</span>
+    <div className="rounded size-[18px] flex items-center justify-center text-[10px] leading-4 bg-gray-4 text-black dark:text-white">
+      {count}
+    </div>
+  </Button>
+);
@@ -0,0 +1,162 @@
+import { trpc } from "@/lib/trpc/client";
+import { format } from "date-fns";
+import { useEffect, useMemo, useRef, useState } from "react";
+
+type LogEntry = {
+  timestamp: string;
+  level?: "info" | "warning" | "error";
+  message: string;
+};
+
+type LogFilter = "all" | "errors" | "warnings";
+
+type UseDeploymentLogsProps = {
+  deploymentId: string;
+};
+
+type UseDeploymentLogsReturn = {
+  // State
+  logFilter: LogFilter;
+  searchTerm: string;
+  isExpanded: boolean;
+  showFade: boolean;
+  // Computed
+  filteredLogs: LogEntry[];
+  logCounts: {
+    total: number;
+    errors: number;
+    warnings: number;
+  };
+  // Loading state
+  isLoading: boolean;
+  // Actions
+  setLogFilter: (filter: LogFilter) => void;
+  setSearchTerm: (term: string) => void;
+  setExpanded: (expanded: boolean) => void;
+  handleScroll: (e: React.UIEvent<HTMLDivElement>) => void;
+  handleFilterChange: (filter: LogFilter) => void;
+  handleSearchChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  // Refs
+  scrollRef: React.RefObject<HTMLDivElement>;
+};
+
+export function useDeploymentLogs({
+  deploymentId,
+}: UseDeploymentLogsProps): UseDeploymentLogsReturn {
+  const [logFilter, setLogFilter] = useState<LogFilter>("all");
+  const [searchTerm, setSearchTerm] = useState("");
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [showFade, setShowFade] = useState(true);
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  // Fetch logs via tRPC
+  const { data: logsData, isLoading } = trpc.deploy.project.activeDeployment.buildLogs.useQuery({
+    deploymentId,
+  });
+
+  // Transform tRPC logs to match the expected format
+  const logs = useMemo((): LogEntry[] => {
+    if (!logsData?.logs) {
+      return [];
+    }
+
+    return logsData.logs.map((log) => ({
+      timestamp: format(new Date(log.timestamp), "HH:mm:ss.SSS"),
+      level: log.level,
+      message: log.message,
+    }));
+  }, [logsData]);
+
+  // Auto-expand when logs are fetched
+  useEffect(() => {
+    if (logsData?.logs && logsData.logs.length > 0) {
+      setIsExpanded(true);
+    }
+  }, [logsData]);
+
+  // Calculate log counts
+  const logCounts = useMemo(
+    () => ({
+      total: logs.length,
+      errors: logs.filter((log) => log.level === "error").length,
+      warnings: logs.filter((log) => log.level === "warning").length,
+    }),
+    [logs],
+  );
+
+  // Filter logs by level and search term
+  const filteredLogs = useMemo(() => {
+    let filtered = logs;
+
+    // Apply level filter
+    if (logFilter === "errors") {
+      filtered = logs.filter((log) => log.level === "error");
+    } else if (logFilter === "warnings") {
+      filtered = logs.filter((log) => log.level === "warning");
+    }
+
+    // Apply search filter
+    if (searchTerm.trim()) {
+      filtered = filtered.filter(
+        (log) =>
+          log.message.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          log.timestamp.includes(searchTerm) ||
+          log.level?.toLowerCase().includes(searchTerm.toLowerCase()),
+      );
+    }
+
+    return filtered;
+  }, [logs, logFilter, searchTerm]);
+
+  const resetScroll = () => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = 0;
+      setShowFade(true);
+    }
+  };
+
+  const setExpanded = (expanded: boolean) => {
+    setIsExpanded(expanded);
+    if (!expanded) {
+      setTimeout(resetScroll, 50);
+    }
+  };
+
+  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
+    const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
+    const isAtBottom = scrollTop + clientHeight >= scrollHeight - 1;
+    setShowFade(!isAtBottom);
+  };
+
+  const handleFilterChange = (filter: LogFilter) => {
+    setLogFilter(filter);
+    resetScroll();
+  };
+
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(e.target.value);
+    resetScroll();
+  };
+
+  return {
+    // State
+    logFilter,
+    searchTerm,
+    isExpanded,
+    showFade,
+    // Computed
+    filteredLogs,
+    logCounts,
+    // Loading state
+    isLoading,
+    // Actions
+    setLogFilter,
+    setSearchTerm,
+    setExpanded,
+    handleScroll,
+    handleFilterChange,
+    handleSearchChange,
+    // Refs
+    scrollRef,
+  };
+}