feat: deployment runtime logs

web/apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/keys/[keyAuthId]/_components/components/table/keys-list.tsx

@@ -379,6 +379,7 @@ export const KeysList = ({
                 "text-xs align-middle whitespace-nowrap pr-4",
                 idx === 0 ? "pl-[18px]" : "",
                 column.key === "key" ? "py-[6px]" : "py-1",
+                column.cellClassName,
               )}
               style={{ height: `${rowHeight}px` }}
             >

web/apps/dashboard/app/(app)/[workspaceSlug]/authorization/permissions/components/table/permissions-list.tsx

@@ -234,6 +234,7 @@ export const PermissionsList = () => {
               className={cn(
                 "text-xs align-middle whitespace-nowrap",
                 column.key === "permission" ? "py-[6px]" : "py-1",
+                column.cellClassName,
               )}
               style={{ height: `${rowHeight}px` }}
             >

web/apps/dashboard/app/(app)/[workspaceSlug]/authorization/roles/components/table/roles-list.tsx

@@ -219,6 +219,7 @@ export const RolesList = () => {
               className={cn(
                 "text-xs align-middle whitespace-nowrap",
                 column.key === "role" ? "py-[6px]" : "py-1",
+                column.cellClassName,
               )}
               style={{ height: `${rowHeight}px` }}
             >

web/apps/dashboard/app/(app)/[workspaceSlug]/identities/_components/table/identities-list.tsx

@@ -318,6 +318,7 @@ export const IdentitiesList = () => {
               "text-xs align-middle whitespace-nowrap pr-4",
               idx === 0 ? "pl-[18px]" : "",
               column.key === "externalId" ? "py-[6px]" : "py-1",
+              column.cellClassName,
             )}
             style={{ height: `${rowHeight}px` }}
           >

web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/(overview)/components/metrics/metric-card.tsx

@@ -1,4 +1,5 @@
 import type { TimeseriesData } from "@/components/logs/overview-charts/types";
+import { formatLatency } from "@/lib/utils/metric-formatters";
 import type { IconProps } from "@unkey/icons";
 import type { ComponentType } from "react";
 import { LogsTimeseriesBarChart } from "../../../network/unkey-flow/components/overlay/node-details-panel/components/chart";
@@ -77,8 +78,16 @@ export function MetricCard({
         </div>
         <div className="ml-auto flex flex-col">
           <div className="flex gap-0.5 items-center">
-            <span className="text-grayA-12 font-medium text-xs">{currentValue}</span>
-            <span className="text-grayA-9 text-xs"> {config.unit}</span>
+            {metricType === "latency" ? (
+              <span className="text-grayA-12 font-medium text-xs">
+                {formatLatency(currentValue)}
+              </span>
+            ) : (
+              <>
+                <span className="text-grayA-12 font-medium text-xs">{currentValue}</span>
+                <span className="text-grayA-9 text-xs"> {config.unit}</span>
+              </>
+            )}
           </div>
           {secondaryValue && (
             <>

web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/(overview)/components/sections/deployment-info-section.tsx

@@ -8,6 +8,7 @@ import { ActiveDeploymentCard } from "../../../../../../components/active-deploy
 import { DeploymentStatusBadge } from "../../../../../../components/deployment-status-badge";
 import { DisabledWrapper } from "../../../../../../components/disabled-wrapper";
 import { InfoChip } from "../../../../../../components/info-chip";
+import { RegionFlags } from "../../../../../../components/region-flags";
 import { Section, SectionHeader } from "../../../../../../components/section";
 import { useProject } from "../../../../../layout-provider";
 
@@ -16,14 +17,16 @@ export function DeploymentInfoSection() {
   const deploymentId = params?.deploymentId as string;
 
   const { collections, setIsDetailsOpen, isDetailsOpen } = useProject();
-  const deployment = useLiveQuery(
+  const { data } = useLiveQuery(
     (q) =>
       q
         .from({ deployment: collections.deployments })
         .where(({ deployment }) => eq(deployment.id, deploymentId)),
     [deploymentId],
   );
-  const deploymentStatus = deployment.data.at(0)?.status;
+
+  const deployment = data.at(0);
+  const deploymentStatus = deployment?.status;
 
   return (
     <Section>
@@ -37,7 +40,7 @@ export function DeploymentInfoSection() {
           <div className="flex gap-1.5 items-center">
             <DisabledWrapper
               tooltipContent="Resource metrics coming soon"
-              className="flex gap-1.5 items-center"
+              className="2xl:flex gap-1.5 items-center hidden"
             >
               <InfoChip icon={Bolt}>
                 <div className="text-grayA-10 text-xs">
@@ -55,17 +58,7 @@ export function DeploymentInfoSection() {
                 </div>
               </InfoChip>
             </DisabledWrapper>
-            <div className="gap-1 flex items-center justify-center cursor-pointer border border-grayA-3 transition-all duration-100 bg-grayA-3 p-1.5 h-[22px] rounded-md">
-              <div className="border rounded-[10px] border-grayA-3 size-4 bg-grayA-3 flex items-center justify-center">
-                <img src={"/images/flags/us.svg"} alt="us-flag" className="size-4" />
-              </div>
-              <div className="border rounded-[10px] border-grayA-3 size-4 bg-grayA-3 flex items-center justify-center">
-                <img src={"/images/flags/de.svg"} alt="de-flag" className="size-4" />
-              </div>
-              <div className="border rounded-[10px] border-grayA-3 size-4 bg-grayA-3 flex items-center justify-center">
-                <img src={"/images/flags/in.svg"} alt="in-flag" className="size-4" />
-              </div>
-            </div>
+            <RegionFlags instances={deployment?.instances ?? []} />
             <InfoTooltip asChild content="Show deployment details">
               <Button
                 variant="ghost"
@@ -78,12 +71,7 @@ export function DeploymentInfoSection() {
             </InfoTooltip>
           </div>
         }
-        statusBadge={
-          <DeploymentStatusBadge
-            status={deploymentStatus}
-            className="text-successA-11 font-medium"
-          />
-        }
+        statusBadge={<DeploymentStatusBadge status={deploymentStatus} />}
       />
     </Section>
   );

web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/(overview)/components/table/components/latency-badge.tsx

@@ -1,25 +1,21 @@
 import { cn } from "@/lib/utils";
+import { formatLatency } from "@/lib/utils/metric-formatters";
 import type { SentinelLogsResponse } from "@unkey/clickhouse/src/sentinel";
-import { Badge } from "@unkey/ui";
+import { Badge, InfoTooltip } from "@unkey/ui";
 
 export const LatencyBadge = ({ log }: { log: SentinelLogsResponse }) => {
   const style = getLatencyStyle(log.total_latency);
   const tooltipText = `Total: ${log.total_latency}ms | Instance: ${log.instance_latency}ms | Sentinel: ${log.sentinel_latency}ms`;
 
   return (
-    <Badge
-      className={cn("px-[6px] rounded-md font-mono whitespace-nowrap tabular-nums", style)}
-      title={tooltipText}
-    >
-      {formatLatency(log.total_latency)}
-    </Badge>
+    <InfoTooltip content={tooltipText}>
+      <Badge className={cn("px-[6px] rounded-md font-mono whitespace-nowrap tabular-nums", style)}>
+        {formatLatency(log.total_latency)}
+      </Badge>
+    </InfoTooltip>
   );
 };
 
-const formatLatency = (latency: number): string => {
-  return `${latency}ms`;
-};
-
 /**
  * Get CSS classes for latency badge based on performance thresholds
  * - >500ms: error (red)

web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/(overview)/navigations/deployment-navbar.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { QuickNavPopover } from "@/components/navbar-popover";
+import { Navbar } from "@/components/navigation/navbar";
+import { ChevronExpandY, Cloud } from "@unkey/icons";
+import { useDeploymentBreadcrumbConfig } from "./use-deployment-breadcrumb-config";
+
+export function DeploymentNavbar() {
+  const breadcrumbs = useDeploymentBreadcrumbConfig();
+
+  return (
+    <Navbar>
+      <Navbar.Breadcrumbs icon={<Cloud />}>
+        {breadcrumbs
+          .filter((breadcrumb) => breadcrumb.shouldRender)
+          .map((breadcrumb) => (
+            <Navbar.Breadcrumbs.Link
+              key={breadcrumb.id}
+              href={breadcrumb.href}
+              noop={breadcrumb.noop}
+              isIdentifier={breadcrumb.isIdentifier}
+              active={breadcrumb.active}
+            >
+              {breadcrumb.quickNavConfig ? (
+                <QuickNavPopover
+                  items={breadcrumb.quickNavConfig.items}
+                  activeItemId={breadcrumb.quickNavConfig.activeItemId}
+                  shortcutKey={breadcrumb.quickNavConfig.shortcutKey}
+                >
+                  <div className="flex items-center gap-1">
+                    {breadcrumb.children}
+                    <ChevronExpandY className="size-4" />
+                  </div>
+                </QuickNavPopover>
+              ) : (
+                breadcrumb.children
+              )}
+            </Navbar.Breadcrumbs.Link>
+          ))}
+      </Navbar.Breadcrumbs>
+    </Navbar>
+  );
+}

web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/(overview)/navigations/use-deployment-breadcrumb-config.ts

@@ -0,0 +1,115 @@
+"use client";
+
+import type { QuickNavItem } from "@/components/navbar-popover";
+import type { Navbar } from "@/components/navigation/navbar";
+import { shortenId } from "@/lib/shorten-id";
+import { useParams, useSelectedLayoutSegments } from "next/navigation";
+import { useMemo } from "react";
+import type { ComponentPropsWithoutRef } from "react";
+
+export type BreadcrumbItem = ComponentPropsWithoutRef<typeof Navbar.Breadcrumbs.Link> & {
+  /** Unique identifier for the breadcrumb item */
+  id: string;
+  /** Internal: determines if this breadcrumb should be rendered */
+  shouldRender: boolean;
+  /** Optional QuickNav dropdown configuration */
+  quickNavConfig?: {
+    items: QuickNavItem[];
+    activeItemId?: string;
+    shortcutKey?: string;
+  };
+};
+
+export function useDeploymentBreadcrumbConfig(): BreadcrumbItem[] {
+  const params = useParams();
+  const segments = useSelectedLayoutSegments();
+
+  const workspaceSlug = params.workspaceSlug as string;
+  const projectId = params.projectId as string;
+  const deploymentId = params.deploymentId as string;
+
+  // Detect current tab from segments
+  const currentTab = segments.includes("network")
+    ? "network"
+    : segments.includes("runtime-logs")
+      ? "runtime-logs"
+      : "overview";
+
+  return useMemo(() => {
+    const basePath = `/${workspaceSlug}/projects/${projectId}`;
+
+    // Deployment tabs for QuickNav
+    const deploymentTabs: QuickNavItem[] = [
+      {
+        id: "overview",
+        label: "Overview",
+        href: `${basePath}/deployments/${deploymentId}`,
+      },
+      {
+        id: "runtime-logs",
+        label: "Runtime Logs",
+        href: `${basePath}/deployments/${deploymentId}/runtime-logs`,
+      },
+      {
+        id: "network",
+        label: "Network",
+        href: `${basePath}/deployments/${deploymentId}/network`,
+      },
+    ];
+
+    return [
+      {
+        id: "projects",
+        href: `/${workspaceSlug}/projects`,
+        children: "Projects",
+        shouldRender: true,
+        active: false,
+        isLast: false,
+      },
+      {
+        id: "project",
+        href: `${basePath}`,
+        children: projectId,
+        shouldRender: true,
+        active: false,
+        isLast: false,
+      },
+      {
+        id: "deployments",
+        href: `${basePath}/deployments`,
+        children: "Deployments",
+        shouldRender: true,
+        active: false,
+        isLast: false,
+      },
+      {
+        id: "deployment",
+        href: `${basePath}/deployments/${deploymentId}`,
+        children: shortenId(deploymentId),
+        isIdentifier: true,
+        shouldRender: true,
+        active: false,
+        isLast: false,
+      },
+      {
+        id: "deployment-tab",
+        href: "#",
+        noop: true,
+        active: true,
+        children:
+          currentTab === "overview"
+            ? "Overview"
+            : currentTab === "runtime-logs"
+              ? "Runtime Logs"
+              : "Network",
+        shouldRender: true,
+        isLast: true,
+        quickNavConfig: {
+          items: deploymentTabs,
+          activeItemId: currentTab,
+          shortcutKey: "T",
+        },
+      },
+    ];
+  }, [workspaceSlug, projectId, deploymentId, currentTab]);
+}

web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/layout.tsx

@@ -0,0 +1,14 @@
+import { DeploymentNavbar } from "./(overview)/navigations/deployment-navbar";
+
+export default function DeploymentLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex flex-col h-full">
+      <DeploymentNavbar />
+      <div className="flex-1 overflow-auto">{children}</div>
+    </div>
+  );
+}

web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/deployment-network-view.tsx

@@ -71,7 +71,7 @@ export function DeploymentNetworkView({
     >
       <TreeLayout
         data={currentTree}
-        nodeSpacing={{ x: 10, y: 75 }}
+        nodeSpacing={{ x: 10, y: 100 }}
         onNodeClick={isShowingSkeleton ? undefined : (node) => setSelectedNode(node)}
         renderNode={(node, parent) => renderDeploymentNode(node, parent, deploymentId ?? undefined)}
         renderConnection={(path, parent, child) => (