From 00f9e262a9c0140251df8e088b7a3a4399306f9a Mon Sep 17 00:00:00 2001
From: 190km <botmiley@gmail.com>
Date: Wed, 11 Dec 2024 00:20:22 +0100
Subject: [PATCH 01/32] feat(logs): new logs style and system

---
 .../dashboard/application/logs/show.tsx       |   1 -
 .../dashboard/compose/logs/show.tsx           |   1 -
 .../dashboard/docker/logs/docker-logs-id.tsx  | 324 ++++++++++++------
 .../docker/logs/show-docker-modal-logs.tsx    |   1 -
 .../dashboard/docker/logs/terminal-line.tsx   |  73 ++++
 .../components/dashboard/docker/logs/utils.ts | 132 +++++++
 .../settings/web-server/show-modal-logs.tsx   |   1 -
 apps/dokploy/components/ui/badge.tsx          |  12 +
 .../server/wss/docker-container-logs.ts       |   6 +-
 apps/dokploy/styles/globals.css               |  26 ++
 .../server/src/wss/docker-container-logs.ts   |   6 +-
 11 files changed, 479 insertions(+), 104 deletions(-)
 create mode 100644 apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx
 create mode 100644 apps/dokploy/components/dashboard/docker/logs/utils.ts

diff --git a/apps/dokploy/components/dashboard/application/logs/show.tsx b/apps/dokploy/components/dashboard/application/logs/show.tsx
index 33beab12..dba3666c 100644
--- a/apps/dokploy/components/dashboard/application/logs/show.tsx
+++ b/apps/dokploy/components/dashboard/application/logs/show.tsx
@@ -90,7 +90,6 @@ export const ShowDockerLogs = ({ appName, serverId }: Props) => {
 				</Select>
 				<DockerLogs
 					serverId={serverId || ""}
-					id="terminal"
 					containerId={containerId || "select-a-container"}
 				/>
 			</CardContent>
diff --git a/apps/dokploy/components/dashboard/compose/logs/show.tsx b/apps/dokploy/components/dashboard/compose/logs/show.tsx
index 99208694..6b39f413 100644
--- a/apps/dokploy/components/dashboard/compose/logs/show.tsx
+++ b/apps/dokploy/components/dashboard/compose/logs/show.tsx
@@ -96,7 +96,6 @@ export const ShowDockerLogsCompose = ({
 				</Select>
 				<DockerLogs
 					serverId={serverId || ""}
-					id="terminal"
 					containerId={containerId || "select-a-container"}
 				/>
 			</CardContent>
diff --git a/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx b/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
index 6fc0ab48..e9459849 100644
--- a/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
+++ b/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
@@ -1,115 +1,247 @@
 import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Terminal } from "@xterm/xterm";
+import { Button } from "@/components/ui/button";
 import React, { useEffect, useRef } from "react";
-import { FitAddon } from "xterm-addon-fit";
-import "@xterm/xterm/css/xterm.css";
+import { getLogType, LogLine, parseLogs } from "./utils";
+import { TerminalLine } from "./terminal-line";
+import { Download as DownloadIcon } from "lucide-react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Badge } from "@/components/ui/badge";
 
 interface Props {
-	id: string;
-	containerId: string;
-	serverId?: string | null;
+  containerId: string;
+  serverId?: string | null;
 }
 
-export const DockerLogsId: React.FC<Props> = ({
-	id,
-	containerId,
-	serverId,
-}) => {
-	const [term, setTerm] = React.useState<Terminal>();
-	const [lines, setLines] = React.useState<number>(40);
-	const wsRef = useRef<WebSocket | null>(null); // Ref to hold WebSocket instance
+type TimeFilter = "all" | "1h" | "6h" | "24h" | "168h" | "720h";
+type TypeFilter = "all" | "error" | "warning" | "success" | "info";
 
-	useEffect(() => {
-		// if (containerId === "select-a-container") {
-		// 	return;
-		// }
-		const container = document.getElementById(id);
-		if (container) {
-			container.innerHTML = "";
-		}
+export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
+  const [rawLogs, setRawLogs] = React.useState("");
+  const [filteredLogs, setFilteredLogs] = React.useState<LogLine[]>([]);
+  const [autoScroll, setAutoScroll] = React.useState(true);
+  const [lines, setLines] = React.useState<number>(100);
+  const [search, setSearch] = React.useState<string>("");
+  const [since, setSince] = React.useState<TimeFilter>("all");
+  const [typeFilter, setTypeFilter] = React.useState<TypeFilter>("all");
+  const scrollRef = useRef<HTMLDivElement>(null);
 
-		if (wsRef.current) {
-			if (wsRef.current.readyState === WebSocket.OPEN) {
-				wsRef.current.close();
-			}
-			wsRef.current = null;
-		}
-		const termi = new Terminal({
-			cursorBlink: true,
-			cols: 80,
-			rows: 30,
-			lineHeight: 1.25,
-			fontWeight: 400,
-			fontSize: 14,
-			fontFamily:
-				'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+  const scrollToBottom = () => {
+    if (autoScroll && scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  };
 
-			convertEol: true,
-			theme: {
-				cursor: "transparent",
-				background: "rgba(0, 0, 0, 0)",
-			},
-		});
+  const handleScroll = () => {
+    if (!scrollRef.current) return;
 
-		const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+    const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
+    const isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) < 10;
+    setAutoScroll(isAtBottom);
+  };
 
-		const wsUrl = `${protocol}//${window.location.host}/docker-container-logs?containerId=${containerId}&tail=${lines}${serverId ? `&serverId=${serverId}` : ""}`;
-		const ws = new WebSocket(wsUrl);
-		wsRef.current = ws;
-		const fitAddon = new FitAddon();
-		termi.loadAddon(fitAddon);
-		// @ts-ignore
-		termi.open(container);
-		fitAddon.fit();
-		termi.focus();
-		setTerm(termi);
+  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setRawLogs("");
+    setFilteredLogs([]);
+    setSearch(e.target.value || "");
+  };
 
-		ws.onerror = (error) => {
-			console.error("WebSocket error: ", error);
-		};
+  const handleLines = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setRawLogs("");
+    setFilteredLogs([]);
+    setLines(Number(e.target.value) || 1);
+  };
 
-		ws.onmessage = (e) => {
-			termi.write(e.data);
-		};
+  const handleSince = (value: TimeFilter) => {
+    setRawLogs("");
+    setFilteredLogs([]);
+    setSince(value);
+  };
 
-		ws.onclose = (e) => {
-			console.log(e.reason);
+  const handleTypeFilter = (value: TypeFilter) => {
+    setTypeFilter(value);
+  };
 
-			termi.write(`Connection closed!\nReason: ${e.reason}\n`);
-			wsRef.current = null;
-		};
-		return () => {
-			if (wsRef.current?.readyState === WebSocket.OPEN) {
-				ws.close();
-				wsRef.current = null;
-			}
-		};
-	}, [lines, containerId]);
+  useEffect(() => {
+    setRawLogs("");
+    setFilteredLogs([]);
+  }, [containerId]);
 
-	useEffect(() => {
-		term?.clear();
-	}, [lines, term]);
+  useEffect(() => {
+    if (!containerId) return;
 
-	return (
-		<div className="flex flex-col gap-4">
-			<div className="flex flex-col gap-2">
-				<Label>
-					<span>Number of lines to show</span>
-				</Label>
-				<Input
-					type="text"
-					placeholder="Number of lines to show (Defaults to 35)"
-					value={lines}
-					onChange={(e) => {
-						setLines(Number(e.target.value) || 1);
-					}}
-				/>
-			</div>
+    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+    const wsUrl = `${protocol}//${
+      window.location.host
+    }/docker-container-logs?containerId=${containerId}&tail=${lines}&since=${since}&search=${search}${
+      serverId ? `&serverId=${serverId}` : ""
+    }`;
+    console.log("Connecting to WebSocket:", wsUrl);
+    const ws = new WebSocket(wsUrl);
 
-			<div className="w-full h-full rounded-lg p-2 bg-[#19191A]">
-				<div id={id} />
-			</div>
-		</div>
-	);
+    ws.onopen = () => {
+      console.log("WebSocket connected");
+    };
+
+    ws.onmessage = (e) => {
+      // console.log("Received message:", e.data);
+      setRawLogs((prev) => prev + e.data);
+    };
+
+    ws.onerror = (error) => {
+      console.error("WebSocket error:", error);
+    };
+
+    ws.onclose = (e) => {
+      console.log("WebSocket closed:", e.reason);
+      setRawLogs(
+        (prev) =>
+          prev +
+          `Connection closed!\nReason: ${
+            e.reason || "WebSocket was closed try to refresh"
+          }\n`
+      );
+    };
+
+    return () => {
+      if (ws.readyState === WebSocket.OPEN) {
+        ws.close();
+      }
+    };
+  }, [containerId, serverId, lines, search, since]);
+
+  const handleDownload = () => {
+    const logContent = filteredLogs
+      .map(
+        ({ timestamp, message }: { timestamp: Date | null; message: string }) =>
+          `${timestamp?.toISOString() || "No timestamp"} ${message}`
+      )
+      .join("\n");
+
+    const blob = new Blob([logContent], { type: "text/plain" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `dokploy-logs-${new Date().toISOString()}.txt`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  const handleFilter = (logs: LogLine[]) => {
+    return logs.filter((log) => {
+      const logType = getLogType(log.message).type;
+
+      const matchesType = typeFilter === "all" || logType === typeFilter;
+
+      return matchesType;
+    });
+  };
+
+  useEffect(() => {
+    setRawLogs("");
+    setFilteredLogs([]);
+  }, [containerId]);
+
+  useEffect(() => {
+    const logs = parseLogs(rawLogs);
+    const filtered = handleFilter(logs);
+    setFilteredLogs(filtered);
+  }, [rawLogs, search, lines, since, typeFilter]);
+
+  useEffect(() => {
+    scrollToBottom();
+
+    if (autoScroll && scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [filteredLogs, autoScroll]);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="shadow-md rounded-lg overflow-hidden">
+        <div className="space-y-4">
+          <div className="flex flex-wrap justify-between items-start sm:items-center gap-4">
+            <div className="flex flex-wrap gap-4">
+              <Input
+                type="text"
+                placeholder="Number of lines to show"
+                value={lines}
+                onChange={handleLines}
+                className="inline-flex h-9 text-sm text-white placeholder-gray-400 w-full sm:w-auto"
+              />
+              <Input
+                type="text"
+                placeholder="Search logs..."
+                value={search}
+                onChange={handleSearch}
+                className="inline-flex h-9 text-sm text-white placeholder-gray-400 w-full sm:w-auto"
+              />
+              <Select value={since} onValueChange={handleSince}>
+                <SelectTrigger className="w-[180px] h-9">
+                  <SelectValue placeholder="Time filter" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="1h">Last 1 hour</SelectItem>
+                  <SelectItem value="6h">Last 6 hours</SelectItem>
+                  <SelectItem value="24h">Last 24 hours</SelectItem>
+                  <SelectItem value="168h">Last 7 days</SelectItem>
+                  <SelectItem value="720h">Last 30 days</SelectItem>
+                  <SelectItem value="all">All time</SelectItem>
+                </SelectContent>
+              </Select>
+
+              <Select value={typeFilter} onValueChange={handleTypeFilter}>
+                <SelectTrigger className="w-[180px] h-9">
+                  <SelectValue placeholder="Type filter" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">
+                    <Badge variant="blank">All</Badge>
+                  </SelectItem>
+                  <SelectItem value="error">
+                    <Badge variant="red">Error</Badge>
+                  </SelectItem>
+                  <SelectItem value="warning">
+                    <Badge variant="yellow">Warning</Badge>
+                  </SelectItem>
+                  <SelectItem value="success">
+                    <Badge variant="green">Success</Badge>
+                  </SelectItem>
+                  <SelectItem value="info">
+                    <Badge variant="blue">Info</Badge>
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-9"
+              onClick={handleDownload}
+            >
+              <DownloadIcon className="mr-2 h-4 w-4" />
+              Download logs
+            </Button>
+          </div>
+          <div
+            ref={scrollRef}
+            onScroll={handleScroll}
+            className="h-[720px] overflow-y-auto space-y-0 border p-4 bg-[#d4d4d4] dark:bg-[#050506] rounded custom-logs-scrollbar"
+          >
+            {filteredLogs.map((filteredLog: LogLine, index: number) => (
+              <TerminalLine key={index} log={filteredLog} searchTerm={search} />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 };
diff --git a/apps/dokploy/components/dashboard/docker/logs/show-docker-modal-logs.tsx b/apps/dokploy/components/dashboard/docker/logs/show-docker-modal-logs.tsx
index c3d38d98..4aea3c7d 100644
--- a/apps/dokploy/components/dashboard/docker/logs/show-docker-modal-logs.tsx
+++ b/apps/dokploy/components/dashboard/docker/logs/show-docker-modal-logs.tsx
@@ -47,7 +47,6 @@ export const ShowDockerModalLogs = ({
 				</DialogHeader>
 				<div className="flex flex-col gap-4 pt-2.5">
 					<DockerLogsId
-						id="terminal"
 						containerId={containerId || ""}
 						serverId={serverId}
 					/>
diff --git a/apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx b/apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx
new file mode 100644
index 00000000..36499df9
--- /dev/null
+++ b/apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx
@@ -0,0 +1,73 @@
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+import { getLogType, type LogLine } from "./utils";
+import React from "react";
+
+interface LogLineProps {
+  log: LogLine;
+  searchTerm?: string;
+}
+
+export function TerminalLine({ log, searchTerm }: LogLineProps) {
+  const { timestamp, message } = log;
+  const { type, variant, color } = getLogType(message);
+
+  const formattedTime = timestamp
+    ? timestamp.toLocaleString("en-GB", {
+        day: "2-digit",
+        month: "short",
+        year: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+        hour12: false,
+      })
+    : "--- No time found ---";
+
+  const highlightMessage = (text: string, term: string) => {
+    if (!term) return text;
+
+    const parts = text.split(new RegExp(`(${term})`, "gi"));
+    return parts.map((part, index) =>
+      part.toLowerCase() === term.toLowerCase() ? (
+        <span key={index} className="bg-yellow-200 dark:bg-yellow-900">
+          {part}
+        </span>
+      ) : (
+        part
+      )
+    );
+  };
+
+  return (
+    <div
+      className={cn(
+        "font-mono text-xs flex flex-row gap-3 py-2 sm:py-0.5 group",
+        type === "error" 
+          ? "bg-red-500/10 hover:bg-red-500/15"
+          : type === "warning"
+            ? "bg-yellow-500/10 hover:bg-yellow-500/15"
+            : "hover:bg-gray-200/50 dark:hover:bg-gray-800/50"
+      )}
+    >
+      {" "}
+      <div className="flex items-start gap-x-2">
+        {/* Icon to expand the log item maybe implement a colapsible later */}
+        {/* <Square className="size-4 text-muted-foreground opacity-0 group-hover/logitem:opacity-100 transition-opacity" /> */}
+        <div className={cn("w-2 h-full flex-shrink-0 rounded-[3px]", color)} />
+        <span className="select-none pl-2 text-muted-foreground w-full sm:w-40 flex-shrink-0">
+          {formattedTime}
+        </span>
+        <Badge
+          variant={variant}
+          className="w-14 justify-center text-[10px] px-1 py-0"
+        >
+          {type}
+        </Badge>
+      </div>
+      <span className="dark:text-gray-200 text-foreground ">
+        {searchTerm ? highlightMessage(message, searchTerm) : message}
+      </span>
+    </div>
+  );
+}
diff --git a/apps/dokploy/components/dashboard/docker/logs/utils.ts b/apps/dokploy/components/dashboard/docker/logs/utils.ts
new file mode 100644
index 00000000..1c010681
--- /dev/null
+++ b/apps/dokploy/components/dashboard/docker/logs/utils.ts
@@ -0,0 +1,132 @@
+export type LogType = "error" | "warning" | "success" | "info";
+export type LogVariant = "red" | "yellow" | "green" | "blue";
+
+export interface LogLine {
+  timestamp: Date | null;
+  message: string;
+}
+
+interface LogStyle {
+  type: LogType;
+  variant: LogVariant;
+  color: string;
+}
+
+const LOG_STYLES: Record<LogType, LogStyle> = {
+  error: {
+    type: "error",
+    variant: "red",
+    color: "bg-red-500/40",
+  },
+  warning: {
+    type: "warning",
+    variant: "yellow",
+    color: "bg-yellow-500/40",
+  },
+  success: {
+    type: "success",
+    variant: "green",
+    color: "bg-green-500/40",
+  },
+  info: {
+    type: "info",
+    variant: "blue",
+    color: "bg-blue-600/40",
+  },
+} as const;
+
+export function parseLogs(logString: string): LogLine[] {
+  // Regex to match the log line format
+  // Exemple of return :
+  // 1 2024-12-10T10:00:00.000Z The server is running on port 8080
+  // Should return :
+  // { timestamp: new Date("2024-12-10T10:00:00.000Z"), 
+  // message: "The server is running on port 8080" }  
+  const logRegex =
+    /^(?:(\d+)\s+)?(\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d+)?Z|\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}\.\d{3} UTC)?\s*(.*)$/;
+
+  return logString
+    .split("\n")
+    .map((line) => line.trim())
+    .filter((line) => line !== "")
+    .map((line) => {
+      const match = line.match(logRegex);
+      if (!match) return null;
+
+      const [, , timestamp, message] = match;
+
+      if (!message?.trim()) return null;
+
+      // Delete other timestamps and keep only the one from --timestamps
+      const cleanedMessage = message
+        ?.replace(
+          /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d+)?Z|\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}\.\d{3} UTC/g,
+          ""
+        )
+        .trim();
+
+      return {
+        timestamp: timestamp ? new Date(timestamp.replace(" UTC", "Z")) : null,
+        message: cleanedMessage,
+      };
+    })
+    .filter((log) => log !== null);
+}
+
+// Detect log type based on message content
+export const getLogType = (message: string): LogStyle => {
+  const lowerMessage = message.toLowerCase();
+
+  if (
+    /(?:^|\s)(?:error|err):?\s/i.test(lowerMessage) ||
+    /\b(?:exception|failed|failure)\b/i.test(lowerMessage) ||
+    /(?:stack\s?trace):\s*$/i.test(lowerMessage) ||
+    /^\s*at\s+[\w.]+\s*\(?.+:\d+:\d+\)?/.test(lowerMessage) ||
+    /\b(?:uncaught|unhandled)\s+(?:exception|error)\b/i.test(lowerMessage) ||
+    /Error:\s.*(?:in|at)\s+.*:\d+(?::\d+)?/.test(lowerMessage) ||
+    /\b(?:errno|code):\s*(?:\d+|[A-Z_]+)\b/i.test(lowerMessage) ||
+    /\[(?:error|err|fatal)\]/i.test(lowerMessage) ||
+    /\b(?:crash|critical|fatal)\b/i.test(lowerMessage) ||
+    /\b(?:fail(?:ed|ure)?|broken|dead)\b/i.test(lowerMessage)
+  ) {
+    return LOG_STYLES.error;
+  }
+
+  if (
+    /(?:^|\s)(?:warning|warn):?\s/i.test(lowerMessage) ||
+    /\[(?:warn(?:ing)?|attention)\]/i.test(lowerMessage) ||
+    /(?:deprecated|obsolete)\s+(?:since|in|as\s+of)/i.test(lowerMessage) ||
+    /\b(?:caution|attention|notice):\s/i.test(lowerMessage) ||
+    /(?:might|may|could)\s+(?:not|cause|lead\s+to)/i.test(lowerMessage) ||
+    /(?:!+\s*(?:warning|caution|attention)\s*!+)/i.test(lowerMessage) ||
+    /\b(?:deprecated|obsolete)\b/i.test(lowerMessage) ||
+    /\b(?:unstable|experimental)\b/i.test(lowerMessage)
+  ) {
+    return LOG_STYLES.warning;
+  }
+
+  if (
+    /(?:successfully|complete[d]?)\s+(?:initialized|started|completed|done)/i.test(
+      lowerMessage
+    ) ||
+    /\[(?:success|ok|done)\]/i.test(lowerMessage) ||
+    /(?:listening|running)\s+(?:on|at)\s+(?:port\s+)?\d+/i.test(lowerMessage) ||
+    /(?:connected|established|ready)\s+(?:to|for|on)/i.test(lowerMessage) ||
+    /\b(?:loaded|mounted|initialized)\s+successfully\b/i.test(lowerMessage) ||
+    /✓|√|\[ok\]|done!/i.test(lowerMessage) ||
+    /\b(?:success(?:ful)?|completed|ready)\b/i.test(lowerMessage) ||
+    /\b(?:started|running|active)\b/i.test(lowerMessage)
+  ) {
+    return LOG_STYLES.success;
+  }
+
+  if (
+    /(?:^|\s)(?:info|inf):?\s/i.test(lowerMessage) ||
+    /\[(info|log|debug|trace|server|db|api)\]/i.test(lowerMessage) ||
+    /\b(?:version|config|start|import|load)\b:?/i.test(lowerMessage)
+  ) {
+    return LOG_STYLES.info;
+  }
+
+  return LOG_STYLES.info;
+};
diff --git a/apps/dokploy/components/dashboard/settings/web-server/show-modal-logs.tsx b/apps/dokploy/components/dashboard/settings/web-server/show-modal-logs.tsx
index 2693f79c..f15e475c 100644
--- a/apps/dokploy/components/dashboard/settings/web-server/show-modal-logs.tsx
+++ b/apps/dokploy/components/dashboard/settings/web-server/show-modal-logs.tsx
@@ -92,7 +92,6 @@ export const ShowModalLogs = ({ appName, children, serverId }: Props) => {
 						</SelectContent>
 					</Select>
 					<DockerLogsId
-						id="terminal"
 						containerId={containerId || ""}
 						serverId={serverId}
 					/>
diff --git a/apps/dokploy/components/ui/badge.tsx b/apps/dokploy/components/ui/badge.tsx
index f38976c0..fd190b8a 100644
--- a/apps/dokploy/components/ui/badge.tsx
+++ b/apps/dokploy/components/ui/badge.tsx
@@ -14,6 +14,18 @@ const badgeVariants = cva(
 					"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
 				destructive:
 					"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+				red: 
+					"border-transparent select-none items-center whitespace-nowrap font-medium bg-red-500/15 text-destructive text-xs h-4 px-1 py-1 rounded-md",
+				yellow:
+					"border-transparent select-none items-center whitespace-nowrap font-medium bg-yellow-500/15 text-yellow-500 text-xs h-4 px-1 py-1 rounded-md",
+				orange:
+					"border-transparent select-none items-center whitespace-nowrap font-medium bg-orange-500/15 text-orange-500 text-xs h-4 px-1 py-1 rounded-md",
+				green:
+					"border-transparent select-none items-center whitespace-nowrap font-medium bg-emerald-500/15 text-emerald-500 text-xs h-4 px-1 py-1 rounded-md",
+				blue: 
+					"border-transparent select-none items-center whitespace-nowrap font-medium bg-blue-500/15 text-blue-500 text-xs h-4 px-1 py-1 rounded-md",
+				blank:
+					"border-transparent select-none items-center whitespace-nowrap font-medium dark:bg-white/15 bg-black/15 text-foreground text-xs h-4 px-1 py-1 rounded-md",
 				outline: "text-foreground",
 			},
 		},
diff --git a/apps/dokploy/server/wss/docker-container-logs.ts b/apps/dokploy/server/wss/docker-container-logs.ts
index 1493f698..882b2b4e 100644
--- a/apps/dokploy/server/wss/docker-container-logs.ts
+++ b/apps/dokploy/server/wss/docker-container-logs.ts
@@ -31,6 +31,8 @@ export const setupDockerContainerLogsWebSocketServer = (
 		const url = new URL(req.url || "", `http://${req.headers.host}`);
 		const containerId = url.searchParams.get("containerId");
 		const tail = url.searchParams.get("tail");
+		const search = url.searchParams.get("search");
+		const since = url.searchParams.get("since")
 		const serverId = url.searchParams.get("serverId");
 		const { user, session } = await validateWebSocketRequest(req);
 
@@ -52,7 +54,7 @@ export const setupDockerContainerLogsWebSocketServer = (
 				client
 					.once("ready", () => {
 						const command = `
-						bash -c "docker container logs --tail ${tail} --follow ${containerId}"
+						bash -c "docker container logs --timestamps --tail ${tail} ${since === "all" ? "" : `--since ${since}`} --follow ${containerId} | grep -i '${search}'"
 					`;
 						client.exec(command, (err, stream) => {
 							if (err) {
@@ -95,7 +97,7 @@ export const setupDockerContainerLogsWebSocketServer = (
 					shell,
 					[
 						"-c",
-						`docker container logs --tail ${tail} --follow ${containerId}`,
+						`docker container logs --timestamps --tail ${tail} ${since === "all" ? "" : `--since ${since}`} --follow ${containerId} | grep -i '${search}'`,
 					],
 					{
 						name: "xterm-256color",
diff --git a/apps/dokploy/styles/globals.css b/apps/dokploy/styles/globals.css
index f7e2a71f..a116d66b 100644
--- a/apps/dokploy/styles/globals.css
+++ b/apps/dokploy/styles/globals.css
@@ -173,3 +173,29 @@
 		padding-top: 1rem !important;
 	}
 }
+
+/* Docker Logs Scrollbar */
+@layer utilities {
+	.custom-logs-scrollbar {
+		scrollbar-width: thin;
+		scrollbar-color: hsl(var(--muted-foreground)) transparent;
+	}
+
+	.custom-logs-scrollbar::-webkit-scrollbar {
+		width: 8px;
+		height: 8px;
+	}
+
+	.custom-logs-scrollbar::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	.custom-logs-scrollbar::-webkit-scrollbar-thumb {
+		background-color: hsl(var(--muted-foreground) / 0.3);
+		border-radius: 20px;
+	}
+
+	.custom-logs-scrollbar::-webkit-scrollbar-thumb:hover {
+		background-color: hsl(var(--muted-foreground) / 0.5);
+	}
+}
\ No newline at end of file
diff --git a/packages/server/src/wss/docker-container-logs.ts b/packages/server/src/wss/docker-container-logs.ts
index 75292018..ab3234b7 100644
--- a/packages/server/src/wss/docker-container-logs.ts
+++ b/packages/server/src/wss/docker-container-logs.ts
@@ -32,6 +32,8 @@ export const setupDockerContainerLogsWebSocketServer = (
 		const url = new URL(req.url || "", `http://${req.headers.host}`);
 		const containerId = url.searchParams.get("containerId");
 		const tail = url.searchParams.get("tail");
+		const since = url.searchParams.get("since");
+		const search = url.searchParams.get("search");
 		const serverId = url.searchParams.get("serverId");
 		const { user, session } = await validateWebSocketRequest(req);
 
@@ -54,7 +56,7 @@ export const setupDockerContainerLogsWebSocketServer = (
 					client
 						.once("ready", () => {
 							const command = `
-						bash -c "docker container logs --tail ${tail} --follow ${containerId}"
+						bash -c "docker container logs --timestamps --tail ${tail} ${since === "all" ? "" : `--since ${since}`} --follow ${containerId} | grep -i '${search}'"
 					`;
 							client.exec(command, (err, stream) => {
 								if (err) {
@@ -89,7 +91,7 @@ export const setupDockerContainerLogsWebSocketServer = (
 					shell,
 					[
 						"-c",
-						`docker container logs --tail ${tail} --follow ${containerId}`,
+						`docker container logs --timestamps --tail ${tail} ${since === "all" ? "" : `--since ${since}`} --follow ${containerId} | grep -i '${search}'`,
 					],
 					{
 						name: "xterm-256color",

From 95cd410825e452f0b4f71928f283098347da366e Mon Sep 17 00:00:00 2001
From: Nicholas Penree <nick@penree.com>
Date: Wed, 11 Dec 2024 10:29:09 -0500
Subject: [PATCH 02/32] feat(logs): improvements to searching

---
 .../dashboard/docker/logs/docker-logs-id.tsx  | 22 ++++++++++++-------
 .../dashboard/docker/logs/terminal-line.tsx   |  3 ++-
 .../server/wss/docker-container-logs.ts       | 19 +++++++++++-----
 .../server/src/wss/docker-container-logs.ts   |  4 ++--
 4 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx b/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
index e9459849..7c0edf05 100644
--- a/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
+++ b/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
@@ -76,11 +76,18 @@ export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
     if (!containerId) return;
 
     const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
-    const wsUrl = `${protocol}//${
-      window.location.host
-    }/docker-container-logs?containerId=${containerId}&tail=${lines}&since=${since}&search=${search}${
-      serverId ? `&serverId=${serverId}` : ""
-    }`;
+    const params = new globalThis.URLSearchParams({
+      containerId,
+      tail: lines.toString(),
+      since,
+      search
+    });
+    
+    if (serverId) {
+      params.append('serverId', serverId);
+    }
+
+    const wsUrl = `${protocol}//${window.location.host}/docker-container-logs?${params.toString()}`;
     console.log("Connecting to WebSocket:", wsUrl);
     const ws = new WebSocket(wsUrl);
 
@@ -101,8 +108,7 @@ export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
       console.log("WebSocket closed:", e.reason);
       setRawLogs(
         (prev) =>
-          prev +
-          `Connection closed!\nReason: ${
+          `${prev}Connection closed!\nReason: ${
             e.reason || "WebSocket was closed try to refresh"
           }\n`
       );
@@ -177,7 +183,7 @@ export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
                 className="inline-flex h-9 text-sm text-white placeholder-gray-400 w-full sm:w-auto"
               />
               <Input
-                type="text"
+                type="search"
                 placeholder="Search logs..."
                 value={search}
                 onChange={handleSearch}
diff --git a/apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx b/apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx
index 36499df9..6790e6d9 100644
--- a/apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx
+++ b/apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx
@@ -2,6 +2,7 @@ import { Badge } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
 import { getLogType, type LogLine } from "./utils";
 import React from "react";
+import { escapeRegExp } from 'lodash';
 
 interface LogLineProps {
   log: LogLine;
@@ -27,7 +28,7 @@ export function TerminalLine({ log, searchTerm }: LogLineProps) {
   const highlightMessage = (text: string, term: string) => {
     if (!term) return text;
 
-    const parts = text.split(new RegExp(`(${term})`, "gi"));
+    const parts = text.split(new RegExp(`(${escapeRegExp(term)})`, "gi"));
     return parts.map((part, index) =>
       part.toLowerCase() === term.toLowerCase() ? (
         <span key={index} className="bg-yellow-200 dark:bg-yellow-900">
diff --git a/apps/dokploy/server/wss/docker-container-logs.ts b/apps/dokploy/server/wss/docker-container-logs.ts
index 882b2b4e..4630d8fe 100644
--- a/apps/dokploy/server/wss/docker-container-logs.ts
+++ b/apps/dokploy/server/wss/docker-container-logs.ts
@@ -32,7 +32,7 @@ export const setupDockerContainerLogsWebSocketServer = (
 		const containerId = url.searchParams.get("containerId");
 		const tail = url.searchParams.get("tail");
 		const search = url.searchParams.get("search");
-		const since = url.searchParams.get("since")
+		const since = url.searchParams.get("since");
 		const serverId = url.searchParams.get("serverId");
 		const { user, session } = await validateWebSocketRequest(req);
 
@@ -53,9 +53,12 @@ export const setupDockerContainerLogsWebSocketServer = (
 				const client = new Client();
 				client
 					.once("ready", () => {
-						const command = `
-						bash -c "docker container logs --timestamps --tail ${tail} ${since === "all" ? "" : `--since ${since}`} --follow ${containerId} | grep -i '${search}'"
-					`;
+						const baseCommand = `docker container logs --timestamps --tail ${tail} ${
+							since === "all" ? "" : `--since ${since}`
+						  } --follow ${containerId}`;
+						const command = search 
+						  ? `${baseCommand} 2>&1 | grep -iF '${search}'` 
+						  : baseCommand;
 						client.exec(command, (err, stream) => {
 							if (err) {
 								console.error("Execution error:", err);
@@ -93,11 +96,17 @@ export const setupDockerContainerLogsWebSocketServer = (
 				});
 			} else {
 				const shell = getShell();
+				const baseCommand = `docker container logs --timestamps --tail ${tail} ${
+					since === "all" ? "" : `--since ${since}`
+				  } --follow ${containerId}`;
+				const command = search 
+				  ? `${baseCommand} 2>&1 | grep -iF '${search}'` 
+				  : baseCommand;
 				const ptyProcess = spawn(
 					shell,
 					[
 						"-c",
-						`docker container logs --timestamps --tail ${tail} ${since === "all" ? "" : `--since ${since}`} --follow ${containerId} | grep -i '${search}'`,
+						command,
 					],
 					{
 						name: "xterm-256color",
diff --git a/packages/server/src/wss/docker-container-logs.ts b/packages/server/src/wss/docker-container-logs.ts
index ab3234b7..db9ce90b 100644
--- a/packages/server/src/wss/docker-container-logs.ts
+++ b/packages/server/src/wss/docker-container-logs.ts
@@ -56,7 +56,7 @@ export const setupDockerContainerLogsWebSocketServer = (
 					client
 						.once("ready", () => {
 							const command = `
-						bash -c "docker container logs --timestamps --tail ${tail} ${since === "all" ? "" : `--since ${since}`} --follow ${containerId} | grep -i '${search}'"
+						bash -c "docker container logs --timestamps --tail ${tail} ${since === "all" ? "" : `--since ${since}`} --follow ${containerId} | grep -iF '${search}'"
 					`;
 							client.exec(command, (err, stream) => {
 								if (err) {
@@ -91,7 +91,7 @@ export const setupDockerContainerLogsWebSocketServer = (
 					shell,
 					[
 						"-c",
-						`docker container logs --timestamps --tail ${tail} ${since === "all" ? "" : `--since ${since}`} --follow ${containerId} | grep -i '${search}'`,
+						`docker container logs --timestamps --tail ${tail} ${since === "all" ? "" : `--since ${since}`} --follow ${containerId} | grep -iF '${search}'`,
 					],
 					{
 						name: "xterm-256color",

From 7233667d496379f8730cdd52110e5a6e57855a7c Mon Sep 17 00:00:00 2001
From: Nicholas Penree <nick@penree.com>
Date: Wed, 11 Dec 2024 10:35:12 -0500
Subject: [PATCH 03/32] feat(logs): improvements to searching

---
 .../server/wss/docker-container-logs.ts       | 39 ++++++++-----------
 .../server/src/wss/docker-container-logs.ts   | 38 +++++++++---------
 2 files changed, 36 insertions(+), 41 deletions(-)

diff --git a/apps/dokploy/server/wss/docker-container-logs.ts b/apps/dokploy/server/wss/docker-container-logs.ts
index 4630d8fe..1b28c11b 100644
--- a/apps/dokploy/server/wss/docker-container-logs.ts
+++ b/apps/dokploy/server/wss/docker-container-logs.ts
@@ -55,10 +55,10 @@ export const setupDockerContainerLogsWebSocketServer = (
 					.once("ready", () => {
 						const baseCommand = `docker container logs --timestamps --tail ${tail} ${
 							since === "all" ? "" : `--since ${since}`
-						  } --follow ${containerId}`;
-						const command = search 
-						  ? `${baseCommand} 2>&1 | grep -iF '${search}'` 
-						  : baseCommand;
+						} --follow ${containerId}`;
+						const command = search
+							? `${baseCommand} 2>&1 | grep -iF '${search}'`
+							: baseCommand;
 						client.exec(command, (err, stream) => {
 							if (err) {
 								console.error("Execution error:", err);
@@ -98,25 +98,18 @@ export const setupDockerContainerLogsWebSocketServer = (
 				const shell = getShell();
 				const baseCommand = `docker container logs --timestamps --tail ${tail} ${
 					since === "all" ? "" : `--since ${since}`
-				  } --follow ${containerId}`;
-				const command = search 
-				  ? `${baseCommand} 2>&1 | grep -iF '${search}'` 
-				  : baseCommand;
-				const ptyProcess = spawn(
-					shell,
-					[
-						"-c",
-						command,
-					],
-					{
-						name: "xterm-256color",
-						cwd: process.env.HOME,
-						env: process.env,
-						encoding: "utf8",
-						cols: 80,
-						rows: 30,
-					},
-				);
+				} --follow ${containerId}`;
+				const command = search
+					? `${baseCommand} 2>&1 | grep -iF '${search}'`
+					: baseCommand;
+				const ptyProcess = spawn(shell, ["-c", command], {
+					name: "xterm-256color",
+					cwd: process.env.HOME,
+					env: process.env,
+					encoding: "utf8",
+					cols: 80,
+					rows: 30,
+				});
 
 				ptyProcess.onData((data) => {
 					ws.send(data);
diff --git a/packages/server/src/wss/docker-container-logs.ts b/packages/server/src/wss/docker-container-logs.ts
index db9ce90b..7cfdb8d6 100644
--- a/packages/server/src/wss/docker-container-logs.ts
+++ b/packages/server/src/wss/docker-container-logs.ts
@@ -55,9 +55,12 @@ export const setupDockerContainerLogsWebSocketServer = (
 				new Promise<void>((resolve, reject) => {
 					client
 						.once("ready", () => {
-							const command = `
-						bash -c "docker container logs --timestamps --tail ${tail} ${since === "all" ? "" : `--since ${since}`} --follow ${containerId} | grep -iF '${search}'"
-					`;
+							const baseCommand = `docker container logs --timestamps --tail ${tail} ${
+								since === "all" ? "" : `--since ${since}`
+							} --follow ${containerId}`;
+							const command = search
+								? `${baseCommand} 2>&1 | grep -iF '${search}'`
+								: baseCommand;
 							client.exec(command, (err, stream) => {
 								if (err) {
 									console.error("Execution error:", err);
@@ -87,21 +90,20 @@ export const setupDockerContainerLogsWebSocketServer = (
 				});
 			} else {
 				const shell = getShell();
-				const ptyProcess = spawn(
-					shell,
-					[
-						"-c",
-						`docker container logs --timestamps --tail ${tail} ${since === "all" ? "" : `--since ${since}`} --follow ${containerId} | grep -iF '${search}'`,
-					],
-					{
-						name: "xterm-256color",
-						cwd: process.env.HOME,
-						env: process.env,
-						encoding: "utf8",
-						cols: 80,
-						rows: 30,
-					},
-				);
+				const baseCommand = `docker container logs --timestamps --tail ${tail} ${
+					since === "all" ? "" : `--since ${since}`
+				} --follow ${containerId}`;
+				const command = search
+					? `${baseCommand} 2>&1 | grep -iF '${search}'`
+					: baseCommand;
+				const ptyProcess = spawn(shell, ["-c", command], {
+					name: "xterm-256color",
+					cwd: process.env.HOME,
+					env: process.env,
+					encoding: "utf8",
+					cols: 80,
+					rows: 30,
+				});
 
 				ptyProcess.onData((data) => {
 					ws.send(data);

From 9a51e0a00dc310cfce7585d203a3748c222a59cc Mon Sep 17 00:00:00 2001
From: 190km <botmiley@gmail.com>
Date: Wed, 11 Dec 2024 17:58:35 +0100
Subject: [PATCH 04/32] show a message about no matches found

---
 .../dashboard/docker/logs/docker-logs-id.tsx  | 504 +++++++++---------
 1 file changed, 251 insertions(+), 253 deletions(-)

diff --git a/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx b/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
index 7c0edf05..010a6265 100644
--- a/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
+++ b/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
@@ -1,253 +1,251 @@
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import React, { useEffect, useRef } from "react";
-import { getLogType, LogLine, parseLogs } from "./utils";
-import { TerminalLine } from "./terminal-line";
-import { Download as DownloadIcon } from "lucide-react";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Badge } from "@/components/ui/badge";
-
-interface Props {
-  containerId: string;
-  serverId?: string | null;
-}
-
-type TimeFilter = "all" | "1h" | "6h" | "24h" | "168h" | "720h";
-type TypeFilter = "all" | "error" | "warning" | "success" | "info";
-
-export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
-  const [rawLogs, setRawLogs] = React.useState("");
-  const [filteredLogs, setFilteredLogs] = React.useState<LogLine[]>([]);
-  const [autoScroll, setAutoScroll] = React.useState(true);
-  const [lines, setLines] = React.useState<number>(100);
-  const [search, setSearch] = React.useState<string>("");
-  const [since, setSince] = React.useState<TimeFilter>("all");
-  const [typeFilter, setTypeFilter] = React.useState<TypeFilter>("all");
-  const scrollRef = useRef<HTMLDivElement>(null);
-
-  const scrollToBottom = () => {
-    if (autoScroll && scrollRef.current) {
-      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
-    }
-  };
-
-  const handleScroll = () => {
-    if (!scrollRef.current) return;
-
-    const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
-    const isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) < 10;
-    setAutoScroll(isAtBottom);
-  };
-
-  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setRawLogs("");
-    setFilteredLogs([]);
-    setSearch(e.target.value || "");
-  };
-
-  const handleLines = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setRawLogs("");
-    setFilteredLogs([]);
-    setLines(Number(e.target.value) || 1);
-  };
-
-  const handleSince = (value: TimeFilter) => {
-    setRawLogs("");
-    setFilteredLogs([]);
-    setSince(value);
-  };
-
-  const handleTypeFilter = (value: TypeFilter) => {
-    setTypeFilter(value);
-  };
-
-  useEffect(() => {
-    setRawLogs("");
-    setFilteredLogs([]);
-  }, [containerId]);
-
-  useEffect(() => {
-    if (!containerId) return;
-
-    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
-    const params = new globalThis.URLSearchParams({
-      containerId,
-      tail: lines.toString(),
-      since,
-      search
-    });
-    
-    if (serverId) {
-      params.append('serverId', serverId);
-    }
-
-    const wsUrl = `${protocol}//${window.location.host}/docker-container-logs?${params.toString()}`;
-    console.log("Connecting to WebSocket:", wsUrl);
-    const ws = new WebSocket(wsUrl);
-
-    ws.onopen = () => {
-      console.log("WebSocket connected");
-    };
-
-    ws.onmessage = (e) => {
-      // console.log("Received message:", e.data);
-      setRawLogs((prev) => prev + e.data);
-    };
-
-    ws.onerror = (error) => {
-      console.error("WebSocket error:", error);
-    };
-
-    ws.onclose = (e) => {
-      console.log("WebSocket closed:", e.reason);
-      setRawLogs(
-        (prev) =>
-          `${prev}Connection closed!\nReason: ${
-            e.reason || "WebSocket was closed try to refresh"
-          }\n`
-      );
-    };
-
-    return () => {
-      if (ws.readyState === WebSocket.OPEN) {
-        ws.close();
-      }
-    };
-  }, [containerId, serverId, lines, search, since]);
-
-  const handleDownload = () => {
-    const logContent = filteredLogs
-      .map(
-        ({ timestamp, message }: { timestamp: Date | null; message: string }) =>
-          `${timestamp?.toISOString() || "No timestamp"} ${message}`
-      )
-      .join("\n");
-
-    const blob = new Blob([logContent], { type: "text/plain" });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = `dokploy-logs-${new Date().toISOString()}.txt`;
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-    URL.revokeObjectURL(url);
-  };
-
-  const handleFilter = (logs: LogLine[]) => {
-    return logs.filter((log) => {
-      const logType = getLogType(log.message).type;
-
-      const matchesType = typeFilter === "all" || logType === typeFilter;
-
-      return matchesType;
-    });
-  };
-
-  useEffect(() => {
-    setRawLogs("");
-    setFilteredLogs([]);
-  }, [containerId]);
-
-  useEffect(() => {
-    const logs = parseLogs(rawLogs);
-    const filtered = handleFilter(logs);
-    setFilteredLogs(filtered);
-  }, [rawLogs, search, lines, since, typeFilter]);
-
-  useEffect(() => {
-    scrollToBottom();
-
-    if (autoScroll && scrollRef.current) {
-      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
-    }
-  }, [filteredLogs, autoScroll]);
-
-  return (
-    <div className="flex flex-col gap-4">
-      <div className="shadow-md rounded-lg overflow-hidden">
-        <div className="space-y-4">
-          <div className="flex flex-wrap justify-between items-start sm:items-center gap-4">
-            <div className="flex flex-wrap gap-4">
-              <Input
-                type="text"
-                placeholder="Number of lines to show"
-                value={lines}
-                onChange={handleLines}
-                className="inline-flex h-9 text-sm text-white placeholder-gray-400 w-full sm:w-auto"
-              />
-              <Input
-                type="search"
-                placeholder="Search logs..."
-                value={search}
-                onChange={handleSearch}
-                className="inline-flex h-9 text-sm text-white placeholder-gray-400 w-full sm:w-auto"
-              />
-              <Select value={since} onValueChange={handleSince}>
-                <SelectTrigger className="w-[180px] h-9">
-                  <SelectValue placeholder="Time filter" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="1h">Last 1 hour</SelectItem>
-                  <SelectItem value="6h">Last 6 hours</SelectItem>
-                  <SelectItem value="24h">Last 24 hours</SelectItem>
-                  <SelectItem value="168h">Last 7 days</SelectItem>
-                  <SelectItem value="720h">Last 30 days</SelectItem>
-                  <SelectItem value="all">All time</SelectItem>
-                </SelectContent>
-              </Select>
-
-              <Select value={typeFilter} onValueChange={handleTypeFilter}>
-                <SelectTrigger className="w-[180px] h-9">
-                  <SelectValue placeholder="Type filter" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="all">
-                    <Badge variant="blank">All</Badge>
-                  </SelectItem>
-                  <SelectItem value="error">
-                    <Badge variant="red">Error</Badge>
-                  </SelectItem>
-                  <SelectItem value="warning">
-                    <Badge variant="yellow">Warning</Badge>
-                  </SelectItem>
-                  <SelectItem value="success">
-                    <Badge variant="green">Success</Badge>
-                  </SelectItem>
-                  <SelectItem value="info">
-                    <Badge variant="blue">Info</Badge>
-                  </SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-
-            <Button
-              variant="outline"
-              size="sm"
-              className="h-9"
-              onClick={handleDownload}
-            >
-              <DownloadIcon className="mr-2 h-4 w-4" />
-              Download logs
-            </Button>
-          </div>
-          <div
-            ref={scrollRef}
-            onScroll={handleScroll}
-            className="h-[720px] overflow-y-auto space-y-0 border p-4 bg-[#d4d4d4] dark:bg-[#050506] rounded custom-logs-scrollbar"
-          >
-            {filteredLogs.map((filteredLog: LogLine, index: number) => (
-              <TerminalLine key={index} log={filteredLog} searchTerm={search} />
-            ))}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import React, { useEffect, useRef } from "react";
+import { getLogType, LogLine, parseLogs } from "./utils";
+import { TerminalLine } from "./terminal-line";
+import { Download as DownloadIcon } from "lucide-react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Badge } from "@/components/ui/badge";
+
+interface Props {
+  containerId: string;
+  serverId?: string | null;
+}
+
+type TimeFilter = "all" | "1h" | "6h" | "24h" | "168h" | "720h";
+type TypeFilter = "all" | "error" | "warning" | "success" | "info";
+
+export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
+  const [rawLogs, setRawLogs] = React.useState("");
+  const [filteredLogs, setFilteredLogs] = React.useState<LogLine[]>([]);
+  const [autoScroll, setAutoScroll] = React.useState(true);
+  const [lines, setLines] = React.useState<number>(100);
+  const [search, setSearch] = React.useState<string>("");
+  const [since, setSince] = React.useState<TimeFilter>("all");
+  const [typeFilter, setTypeFilter] = React.useState<TypeFilter>("all");
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [errorMessage, setErrorMessage] = React.useState<string | null>(null);
+
+  const scrollToBottom = () => {
+    if (autoScroll && scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  };
+
+  const handleScroll = () => {
+    if (!scrollRef.current) return;
+
+    const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
+    const isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) < 10;
+    setAutoScroll(isAtBottom);
+  };
+
+  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setRawLogs("");
+    setFilteredLogs([]);
+    setSearch(e.target.value || "");
+  };
+
+  const handleLines = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setRawLogs("");
+    setFilteredLogs([]);
+    setLines(Number(e.target.value) || 1);
+  };
+
+  const handleSince = (value: TimeFilter) => {
+    setRawLogs("");
+    setFilteredLogs([]);
+    setSince(value);
+  };
+
+  const handleTypeFilter = (value: TypeFilter) => {
+    setTypeFilter(value);
+  };
+
+  useEffect(() => {
+    setRawLogs("");
+    setFilteredLogs([]);
+  }, [containerId]);
+
+  useEffect(() => {
+    if (!containerId) return;
+
+    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+    const params = new globalThis.URLSearchParams({
+      containerId,
+      tail: lines.toString(),
+      since,
+      search
+    });
+    
+    if (serverId) {
+      params.append('serverId', serverId);
+    }
+
+    const wsUrl = `${protocol}//${window.location.host}/docker-container-logs?${params.toString()}`;
+    console.log("Connecting to WebSocket:", wsUrl);
+    const ws = new WebSocket(wsUrl);
+
+    ws.onopen = () => {
+      console.log("WebSocket connected");
+    };
+
+    ws.onmessage = (e) => {
+      // console.log("Received message:", e.data);
+      setRawLogs((prev) => prev + e.data);
+    };
+
+    ws.onerror = (error) => {
+      console.error("WebSocket error:", error);
+    };
+
+    ws.onclose = (e) => {
+      console.log("WebSocket closed:", e.reason);
+      setErrorMessage(`Connection closed!\nReason: ${e.reason || "WebSocket was closed try to refresh"}`);
+    };
+
+    return () => {
+      if (ws.readyState === WebSocket.OPEN) {
+        ws.close();
+      }
+    };
+  }, [containerId, serverId, lines, search, since]);
+
+  const handleDownload = () => {
+    const logContent = filteredLogs
+      .map(
+        ({ timestamp, message }: { timestamp: Date | null; message: string }) =>
+          `${timestamp?.toISOString() || "No timestamp"} ${message}`
+      )
+      .join("\n");
+
+    const blob = new Blob([logContent], { type: "text/plain" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `dokploy-logs-${new Date().toISOString()}.txt`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  const handleFilter = (logs: LogLine[]) => {
+    return logs.filter((log) => {
+      const logType = getLogType(log.message).type;
+
+      const matchesType = typeFilter === "all" || logType === typeFilter;
+
+      return matchesType;
+    });
+  };
+
+  useEffect(() => {
+    setRawLogs("");
+    setFilteredLogs([]);
+  }, [containerId]);
+
+  useEffect(() => {
+    const logs = parseLogs(rawLogs);
+    const filtered = handleFilter(logs);
+    setFilteredLogs(filtered);
+  }, [rawLogs, search, lines, since, typeFilter]);
+
+  useEffect(() => {
+    scrollToBottom();
+
+    if (autoScroll && scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [filteredLogs, autoScroll]);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="shadow-md rounded-lg overflow-hidden">
+        <div className="space-y-4">
+          <div className="flex flex-wrap justify-between items-start sm:items-center gap-4">
+            <div className="flex flex-wrap gap-4">
+              <Input
+                type="text"
+                placeholder="Number of lines to show"
+                value={lines}
+                onChange={handleLines}
+                className="inline-flex h-9 text-sm text-white placeholder-gray-400 w-full sm:w-auto"
+              />
+              <Input
+                type="search"
+                placeholder="Search logs..."
+                value={search}
+                onChange={handleSearch}
+                className="inline-flex h-9 text-sm text-white placeholder-gray-400 w-full sm:w-auto"
+              />
+              <Select value={since} onValueChange={handleSince}>
+                <SelectTrigger className="w-[180px] h-9">
+                  <SelectValue placeholder="Time filter" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="1h">Last 1 hour</SelectItem>
+                  <SelectItem value="6h">Last 6 hours</SelectItem>
+                  <SelectItem value="24h">Last 24 hours</SelectItem>
+                  <SelectItem value="168h">Last 7 days</SelectItem>
+                  <SelectItem value="720h">Last 30 days</SelectItem>
+                  <SelectItem value="all">All time</SelectItem>
+                </SelectContent>
+              </Select>
+
+              <Select value={typeFilter} onValueChange={handleTypeFilter}>
+                <SelectTrigger className="w-[180px] h-9">
+                  <SelectValue placeholder="Type filter" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">
+                    <Badge variant="blank">All</Badge>
+                  </SelectItem>
+                  <SelectItem value="error">
+                    <Badge variant="red">Error</Badge>
+                  </SelectItem>
+                  <SelectItem value="warning">
+                    <Badge variant="yellow">Warning</Badge>
+                  </SelectItem>
+                  <SelectItem value="success">
+                    <Badge variant="green">Success</Badge>
+                  </SelectItem>
+                  <SelectItem value="info">
+                    <Badge variant="blue">Info</Badge>
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-9"
+              onClick={handleDownload}
+            >
+              <DownloadIcon className="mr-2 h-4 w-4" />
+              Download logs
+            </Button>
+          </div>
+          <div
+            ref={scrollRef}
+            onScroll={handleScroll}
+            className="h-[720px] overflow-y-auto space-y-0 border p-4 bg-[#d4d4d4] dark:bg-[#050506] rounded custom-logs-scrollbar"
+          >
+            {
+              filteredLogs.length > 0 ? filteredLogs.map((filteredLog: LogLine, index: number) => (
+                <TerminalLine key={index} log={filteredLog} searchTerm={search} />
+              )) : <div className="flex justify-center items-center h-full text-muted-foreground">No logs found</div>
+            }
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

From 20b253e708edc5cd941e94556aed87c8f0234717 Mon Sep 17 00:00:00 2001
From: usopp <botmiley@gmail.com>
Date: Wed, 11 Dec 2024 18:03:28 +0100
Subject: [PATCH 05/32] removed useless state

---
 .../dokploy/components/dashboard/docker/logs/docker-logs-id.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx b/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
index 010a6265..16a96314 100644
--- a/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
+++ b/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
@@ -30,7 +30,6 @@ export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
   const [since, setSince] = React.useState<TimeFilter>("all");
   const [typeFilter, setTypeFilter] = React.useState<TypeFilter>("all");
   const scrollRef = useRef<HTMLDivElement>(null);
-  const [errorMessage, setErrorMessage] = React.useState<string | null>(null);
 
   const scrollToBottom = () => {
     if (autoScroll && scrollRef.current) {
@@ -107,7 +106,6 @@ export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
 
     ws.onclose = (e) => {
       console.log("WebSocket closed:", e.reason);
-      setErrorMessage(`Connection closed!\nReason: ${e.reason || "WebSocket was closed try to refresh"}`);
     };
 
     return () => {

From cb90281583597541d40605c270898390dc94458a Mon Sep 17 00:00:00 2001
From: 190km <botmiley@gmail.com>
Date: Wed, 11 Dec 2024 20:25:49 +0100
Subject: [PATCH 06/32] feat: added appname as filename when export

---
 .../dashboard/docker/logs/docker-logs-id.tsx  | 45 ++++++++++++++-----
 1 file changed, 34 insertions(+), 11 deletions(-)

diff --git a/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx b/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
index 16a96314..03b82fe5 100644
--- a/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
+++ b/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
@@ -12,6 +12,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Badge } from "@/components/ui/badge";
+import { api } from "@/utils/api";
 
 interface Props {
   containerId: string;
@@ -22,6 +23,16 @@ type TimeFilter = "all" | "1h" | "6h" | "24h" | "168h" | "720h";
 type TypeFilter = "all" | "error" | "warning" | "success" | "info";
 
 export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
+  const { data } = api.docker.getConfig.useQuery(
+    {
+      containerId,
+      serverId,
+    },
+    {
+      enabled: !!containerId,
+    }
+  );
+
   const [rawLogs, setRawLogs] = React.useState("");
   const [filteredLogs, setFilteredLogs] = React.useState<LogLine[]>([]);
   const [autoScroll, setAutoScroll] = React.useState(true);
@@ -80,14 +91,16 @@ export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
       containerId,
       tail: lines.toString(),
       since,
-      search
+      search,
     });
-    
+
     if (serverId) {
-      params.append('serverId', serverId);
+      params.append("serverId", serverId);
     }
 
-    const wsUrl = `${protocol}//${window.location.host}/docker-container-logs?${params.toString()}`;
+    const wsUrl = `${protocol}//${
+      window.location.host
+    }/docker-container-logs?${params.toString()}`;
     console.log("Connecting to WebSocket:", wsUrl);
     const ws = new WebSocket(wsUrl);
 
@@ -126,8 +139,9 @@ export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
     const blob = new Blob([logContent], { type: "text/plain" });
     const url = URL.createObjectURL(blob);
     const a = document.createElement("a");
+    const appName = data.Name.replace("/", "") || "app";
     a.href = url;
-    a.download = `dokploy-logs-${new Date().toISOString()}.txt`;
+    a.download = `logs-${appName}-${new Date().toISOString()}.txt`;
     document.body.appendChild(a);
     a.click();
     document.body.removeChild(a);
@@ -226,6 +240,7 @@ export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
               size="sm"
               className="h-9"
               onClick={handleDownload}
+              disabled={filteredLogs.length === 0 || !data?.Name}
             >
               <DownloadIcon className="mr-2 h-4 w-4" />
               Download logs
@@ -234,13 +249,21 @@ export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
           <div
             ref={scrollRef}
             onScroll={handleScroll}
-            className="h-[720px] overflow-y-auto space-y-0 border p-4 bg-[#d4d4d4] dark:bg-[#050506] rounded custom-logs-scrollbar"
+            className="h-[720px] overflow-y-auto overflow-x-auto space-y-0 border p-4 bg-[#d4d4d4] dark:bg-[#050506] rounded custom-logs-scrollbar"
           >
-            {
-              filteredLogs.length > 0 ? filteredLogs.map((filteredLog: LogLine, index: number) => (
-                <TerminalLine key={index} log={filteredLog} searchTerm={search} />
-              )) : <div className="flex justify-center items-center h-full text-muted-foreground">No logs found</div>
-            }
+            {filteredLogs.length > 0 ? (
+              filteredLogs.map((filteredLog: LogLine, index: number) => (
+                <TerminalLine
+                  key={index}
+                  log={filteredLog}
+                  searchTerm={search}
+                />
+              ))
+            ) : (
+              <div className="flex justify-center items-center h-full text-muted-foreground">
+                No logs found
+              </div>
+            )}
           </div>
         </div>
       </div>

From 50b1de959434018a615e0acf70e3f76fc07aa74d Mon Sep 17 00:00:00 2001
From: 190km <botmiley@gmail.com>
Date: Wed, 11 Dec 2024 20:26:19 +0100
Subject: [PATCH 07/32] feat: added appname as filename when export

---
 .../dokploy/components/dashboard/docker/logs/docker-logs-id.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx b/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
index 03b82fe5..8cb9ff24 100644
--- a/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
+++ b/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
@@ -249,7 +249,7 @@ export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
           <div
             ref={scrollRef}
             onScroll={handleScroll}
-            className="h-[720px] overflow-y-auto overflow-x-auto space-y-0 border p-4 bg-[#d4d4d4] dark:bg-[#050506] rounded custom-logs-scrollbar"
+            className="h-[720px] overflow-y-auto space-y-0 border p-4 bg-[#d4d4d4] dark:bg-[#050506] rounded custom-logs-scrollbar"
           >
             {filteredLogs.length > 0 ? (
               filteredLogs.map((filteredLog: LogLine, index: number) => (

From 42f3105f6949184133ab9c085863eaf6c0abc6dd Mon Sep 17 00:00:00 2001
From: Nicholas Penree <nick@penree.com>
Date: Wed, 11 Dec 2024 19:13:53 -0500
Subject: [PATCH 08/32] feat(logs): improvements based on feedback

---
 .../dashboard/docker/logs/docker-logs-id.tsx  | 546 +++++++++---------
 .../docker/logs/show-docker-modal-logs.tsx    |   5 +-
 .../dashboard/docker/logs/terminal-line.tsx   | 172 +++---
 .../components/dashboard/docker/logs/utils.ts | 266 ++++-----
 .../settings/web-server/show-modal-logs.tsx   |   5 +-
 apps/dokploy/components/ui/badge.tsx          |   6 +-
 apps/dokploy/styles/globals.css               |   2 +-
 7 files changed, 511 insertions(+), 491 deletions(-)

diff --git a/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx b/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
index 8cb9ff24..4d2dfe9c 100644
--- a/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
+++ b/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
@@ -1,272 +1,274 @@
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import React, { useEffect, useRef } from "react";
-import { getLogType, LogLine, parseLogs } from "./utils";
-import { TerminalLine } from "./terminal-line";
-import { Download as DownloadIcon } from "lucide-react";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Badge } from "@/components/ui/badge";
-import { api } from "@/utils/api";
-
-interface Props {
-  containerId: string;
-  serverId?: string | null;
-}
-
-type TimeFilter = "all" | "1h" | "6h" | "24h" | "168h" | "720h";
-type TypeFilter = "all" | "error" | "warning" | "success" | "info";
-
-export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
-  const { data } = api.docker.getConfig.useQuery(
-    {
-      containerId,
-      serverId,
-    },
-    {
-      enabled: !!containerId,
-    }
-  );
-
-  const [rawLogs, setRawLogs] = React.useState("");
-  const [filteredLogs, setFilteredLogs] = React.useState<LogLine[]>([]);
-  const [autoScroll, setAutoScroll] = React.useState(true);
-  const [lines, setLines] = React.useState<number>(100);
-  const [search, setSearch] = React.useState<string>("");
-  const [since, setSince] = React.useState<TimeFilter>("all");
-  const [typeFilter, setTypeFilter] = React.useState<TypeFilter>("all");
-  const scrollRef = useRef<HTMLDivElement>(null);
-
-  const scrollToBottom = () => {
-    if (autoScroll && scrollRef.current) {
-      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
-    }
-  };
-
-  const handleScroll = () => {
-    if (!scrollRef.current) return;
-
-    const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
-    const isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) < 10;
-    setAutoScroll(isAtBottom);
-  };
-
-  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setRawLogs("");
-    setFilteredLogs([]);
-    setSearch(e.target.value || "");
-  };
-
-  const handleLines = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setRawLogs("");
-    setFilteredLogs([]);
-    setLines(Number(e.target.value) || 1);
-  };
-
-  const handleSince = (value: TimeFilter) => {
-    setRawLogs("");
-    setFilteredLogs([]);
-    setSince(value);
-  };
-
-  const handleTypeFilter = (value: TypeFilter) => {
-    setTypeFilter(value);
-  };
-
-  useEffect(() => {
-    setRawLogs("");
-    setFilteredLogs([]);
-  }, [containerId]);
-
-  useEffect(() => {
-    if (!containerId) return;
-
-    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
-    const params = new globalThis.URLSearchParams({
-      containerId,
-      tail: lines.toString(),
-      since,
-      search,
-    });
-
-    if (serverId) {
-      params.append("serverId", serverId);
-    }
-
-    const wsUrl = `${protocol}//${
-      window.location.host
-    }/docker-container-logs?${params.toString()}`;
-    console.log("Connecting to WebSocket:", wsUrl);
-    const ws = new WebSocket(wsUrl);
-
-    ws.onopen = () => {
-      console.log("WebSocket connected");
-    };
-
-    ws.onmessage = (e) => {
-      // console.log("Received message:", e.data);
-      setRawLogs((prev) => prev + e.data);
-    };
-
-    ws.onerror = (error) => {
-      console.error("WebSocket error:", error);
-    };
-
-    ws.onclose = (e) => {
-      console.log("WebSocket closed:", e.reason);
-    };
-
-    return () => {
-      if (ws.readyState === WebSocket.OPEN) {
-        ws.close();
-      }
-    };
-  }, [containerId, serverId, lines, search, since]);
-
-  const handleDownload = () => {
-    const logContent = filteredLogs
-      .map(
-        ({ timestamp, message }: { timestamp: Date | null; message: string }) =>
-          `${timestamp?.toISOString() || "No timestamp"} ${message}`
-      )
-      .join("\n");
-
-    const blob = new Blob([logContent], { type: "text/plain" });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    const appName = data.Name.replace("/", "") || "app";
-    a.href = url;
-    a.download = `logs-${appName}-${new Date().toISOString()}.txt`;
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-    URL.revokeObjectURL(url);
-  };
-
-  const handleFilter = (logs: LogLine[]) => {
-    return logs.filter((log) => {
-      const logType = getLogType(log.message).type;
-
-      const matchesType = typeFilter === "all" || logType === typeFilter;
-
-      return matchesType;
-    });
-  };
-
-  useEffect(() => {
-    setRawLogs("");
-    setFilteredLogs([]);
-  }, [containerId]);
-
-  useEffect(() => {
-    const logs = parseLogs(rawLogs);
-    const filtered = handleFilter(logs);
-    setFilteredLogs(filtered);
-  }, [rawLogs, search, lines, since, typeFilter]);
-
-  useEffect(() => {
-    scrollToBottom();
-
-    if (autoScroll && scrollRef.current) {
-      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
-    }
-  }, [filteredLogs, autoScroll]);
-
-  return (
-    <div className="flex flex-col gap-4">
-      <div className="shadow-md rounded-lg overflow-hidden">
-        <div className="space-y-4">
-          <div className="flex flex-wrap justify-between items-start sm:items-center gap-4">
-            <div className="flex flex-wrap gap-4">
-              <Input
-                type="text"
-                placeholder="Number of lines to show"
-                value={lines}
-                onChange={handleLines}
-                className="inline-flex h-9 text-sm text-white placeholder-gray-400 w-full sm:w-auto"
-              />
-              <Input
-                type="search"
-                placeholder="Search logs..."
-                value={search}
-                onChange={handleSearch}
-                className="inline-flex h-9 text-sm text-white placeholder-gray-400 w-full sm:w-auto"
-              />
-              <Select value={since} onValueChange={handleSince}>
-                <SelectTrigger className="w-[180px] h-9">
-                  <SelectValue placeholder="Time filter" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="1h">Last 1 hour</SelectItem>
-                  <SelectItem value="6h">Last 6 hours</SelectItem>
-                  <SelectItem value="24h">Last 24 hours</SelectItem>
-                  <SelectItem value="168h">Last 7 days</SelectItem>
-                  <SelectItem value="720h">Last 30 days</SelectItem>
-                  <SelectItem value="all">All time</SelectItem>
-                </SelectContent>
-              </Select>
-
-              <Select value={typeFilter} onValueChange={handleTypeFilter}>
-                <SelectTrigger className="w-[180px] h-9">
-                  <SelectValue placeholder="Type filter" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="all">
-                    <Badge variant="blank">All</Badge>
-                  </SelectItem>
-                  <SelectItem value="error">
-                    <Badge variant="red">Error</Badge>
-                  </SelectItem>
-                  <SelectItem value="warning">
-                    <Badge variant="yellow">Warning</Badge>
-                  </SelectItem>
-                  <SelectItem value="success">
-                    <Badge variant="green">Success</Badge>
-                  </SelectItem>
-                  <SelectItem value="info">
-                    <Badge variant="blue">Info</Badge>
-                  </SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-
-            <Button
-              variant="outline"
-              size="sm"
-              className="h-9"
-              onClick={handleDownload}
-              disabled={filteredLogs.length === 0 || !data?.Name}
-            >
-              <DownloadIcon className="mr-2 h-4 w-4" />
-              Download logs
-            </Button>
-          </div>
-          <div
-            ref={scrollRef}
-            onScroll={handleScroll}
-            className="h-[720px] overflow-y-auto space-y-0 border p-4 bg-[#d4d4d4] dark:bg-[#050506] rounded custom-logs-scrollbar"
-          >
-            {filteredLogs.length > 0 ? (
-              filteredLogs.map((filteredLog: LogLine, index: number) => (
-                <TerminalLine
-                  key={index}
-                  log={filteredLog}
-                  searchTerm={search}
-                />
-              ))
-            ) : (
-              <div className="flex justify-center items-center h-full text-muted-foreground">
-                No logs found
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { api } from "@/utils/api";
+import { Download as DownloadIcon } from "lucide-react";
+import React, { useEffect, useRef } from "react";
+import { TerminalLine } from "./terminal-line";
+import { type LogLine, getLogType, parseLogs } from "./utils";
+
+interface Props {
+	containerId: string;
+	serverId?: string | null;
+}
+
+type TimeFilter = "all" | "1h" | "6h" | "24h" | "168h" | "720h";
+type TypeFilter = "all" | "error" | "warning" | "success" | "info";
+
+export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
+	const { data } = api.docker.getConfig.useQuery(
+		{
+			containerId,
+			serverId,
+		},
+		{
+			enabled: !!containerId,
+		},
+	);
+
+	const [rawLogs, setRawLogs] = React.useState("");
+	const [filteredLogs, setFilteredLogs] = React.useState<LogLine[]>([]);
+	const [autoScroll, setAutoScroll] = React.useState(true);
+	const [lines, setLines] = React.useState<number>(100);
+	const [search, setSearch] = React.useState<string>("");
+	const [since, setSince] = React.useState<TimeFilter>("all");
+	const [typeFilter, setTypeFilter] = React.useState<TypeFilter>("all");
+	const scrollRef = useRef<HTMLDivElement>(null);
+
+	const scrollToBottom = () => {
+		if (autoScroll && scrollRef.current) {
+			scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+		}
+	};
+
+	const handleScroll = () => {
+		if (!scrollRef.current) return;
+
+		const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
+		const isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) < 10;
+		setAutoScroll(isAtBottom);
+	};
+
+	const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+		setRawLogs("");
+		setFilteredLogs([]);
+		setSearch(e.target.value || "");
+	};
+
+	const handleLines = (e: React.ChangeEvent<HTMLInputElement>) => {
+		setRawLogs("");
+		setFilteredLogs([]);
+		setLines(Number(e.target.value) || 1);
+	};
+
+	const handleSince = (value: TimeFilter) => {
+		setRawLogs("");
+		setFilteredLogs([]);
+		setSince(value);
+	};
+
+	const handleTypeFilter = (value: TypeFilter) => {
+		setTypeFilter(value);
+	};
+
+	useEffect(() => {
+		setRawLogs("");
+		setFilteredLogs([]);
+	}, [containerId]);
+
+	useEffect(() => {
+		if (!containerId) return;
+
+		const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+		const params = new globalThis.URLSearchParams({
+			containerId,
+			tail: lines.toString(),
+			since,
+			search,
+		});
+
+		if (serverId) {
+			params.append("serverId", serverId);
+		}
+
+		const wsUrl = `${protocol}//${
+			window.location.host
+		}/docker-container-logs?${params.toString()}`;
+		console.log("Connecting to WebSocket:", wsUrl);
+		const ws = new WebSocket(wsUrl);
+
+		ws.onopen = () => {
+			console.log("WebSocket connected");
+		};
+
+		ws.onmessage = (e) => {
+			// console.log("Received message:", e.data);
+			setRawLogs((prev) => prev + e.data);
+		};
+
+		ws.onerror = (error) => {
+			console.error("WebSocket error:", error);
+		};
+
+		ws.onclose = (e) => {
+			console.log("WebSocket closed:", e.reason);
+		};
+
+		return () => {
+			if (ws.readyState === WebSocket.OPEN) {
+				ws.close();
+			}
+		};
+	}, [containerId, serverId, lines, search, since]);
+
+	const handleDownload = () => {
+		const logContent = filteredLogs
+			.map(
+				({ timestamp, message }: { timestamp: Date | null; message: string }) =>
+					`${timestamp?.toISOString() || "No timestamp"} ${message}`,
+			)
+			.join("\n");
+
+		const blob = new Blob([logContent], { type: "text/plain" });
+		const url = URL.createObjectURL(blob);
+		const a = document.createElement("a");
+		const appName = data.Name.replace("/", "") || "app";
+		a.href = url;
+		a.download = `logs-${appName}-${new Date().toISOString()}.txt`;
+		document.body.appendChild(a);
+		a.click();
+		document.body.removeChild(a);
+		URL.revokeObjectURL(url);
+	};
+
+	const handleFilter = (logs: LogLine[]) => {
+		return logs.filter((log) => {
+			const logType = getLogType(log.message).type;
+
+			const matchesType = typeFilter === "all" || logType === typeFilter;
+
+			return matchesType;
+		});
+	};
+
+	useEffect(() => {
+		setRawLogs("");
+		setFilteredLogs([]);
+	}, [containerId]);
+
+	useEffect(() => {
+		const logs = parseLogs(rawLogs);
+		const filtered = handleFilter(logs);
+		setFilteredLogs(filtered);
+	}, [rawLogs, search, lines, since, typeFilter]);
+
+	useEffect(() => {
+		scrollToBottom();
+
+		if (autoScroll && scrollRef.current) {
+			scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+		}
+	}, [filteredLogs, autoScroll]);
+
+	return (
+		<div className="flex flex-col gap-4">
+			<div className="shadow-md rounded-lg overflow-hidden">
+				<div className="space-y-4">
+					<div className="flex flex-wrap justify-between items-start sm:items-center gap-4">
+						<div className="flex flex-wrap gap-4">
+							<Input
+								type="text"
+								placeholder="Number of lines to show"
+								value={lines}
+								onChange={handleLines}
+								className="inline-flex h-9 text-sm text-white placeholder-gray-400 w-full sm:w-auto"
+							/>
+
+							<Select value={since} onValueChange={handleSince}>
+								<SelectTrigger className="w-[180px] h-9">
+									<SelectValue placeholder="Time filter" />
+								</SelectTrigger>
+								<SelectContent>
+									<SelectItem value="1h">Last hour</SelectItem>
+									<SelectItem value="6h">Last 6 hours</SelectItem>
+									<SelectItem value="24h">Last 24 hours</SelectItem>
+									<SelectItem value="168h">Last 7 days</SelectItem>
+									<SelectItem value="720h">Last 30 days</SelectItem>
+									<SelectItem value="all">All time</SelectItem>
+								</SelectContent>
+							</Select>
+
+							<Select value={typeFilter} onValueChange={handleTypeFilter}>
+								<SelectTrigger className="w-[180px] h-9">
+									<SelectValue placeholder="Type filter" />
+								</SelectTrigger>
+								<SelectContent>
+									<SelectItem value="all">
+										<Badge variant="blank">All</Badge>
+									</SelectItem>
+									<SelectItem value="error">
+										<Badge variant="red">Error</Badge>
+									</SelectItem>
+									<SelectItem value="warning">
+										<Badge variant="yellow">Warning</Badge>
+									</SelectItem>
+									<SelectItem value="success">
+										<Badge variant="green">Success</Badge>
+									</SelectItem>
+									<SelectItem value="info">
+										<Badge variant="blue">Info</Badge>
+									</SelectItem>
+								</SelectContent>
+							</Select>
+
+							<Input
+								type="search"
+								placeholder="Search logs..."
+								value={search}
+								onChange={handleSearch}
+								className="inline-flex h-9 text-sm text-white placeholder-gray-400 w-full sm:w-auto"
+							/>
+						</div>
+
+						<Button
+							variant="outline"
+							size="sm"
+							className="h-9"
+							onClick={handleDownload}
+							disabled={filteredLogs.length === 0 || !data?.Name}
+						>
+							<DownloadIcon className="mr-2 h-4 w-4" />
+							Download logs
+						</Button>
+					</div>
+					<div
+						ref={scrollRef}
+						onScroll={handleScroll}
+						className="h-[720px] overflow-y-auto space-y-0 border p-4 bg-[#d4d4d4] dark:bg-[#050506] rounded custom-logs-scrollbar"
+					>
+						{filteredLogs.length > 0 ? (
+							filteredLogs.map((filteredLog: LogLine, index: number) => (
+								<TerminalLine
+									key={index}
+									log={filteredLog}
+									searchTerm={search}
+								/>
+							))
+						) : (
+							<div className="flex justify-center items-center h-full text-muted-foreground">
+								No logs found
+							</div>
+						)}
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
diff --git a/apps/dokploy/components/dashboard/docker/logs/show-docker-modal-logs.tsx b/apps/dokploy/components/dashboard/docker/logs/show-docker-modal-logs.tsx
index 4aea3c7d..f8531d77 100644
--- a/apps/dokploy/components/dashboard/docker/logs/show-docker-modal-logs.tsx
+++ b/apps/dokploy/components/dashboard/docker/logs/show-docker-modal-logs.tsx
@@ -46,10 +46,7 @@ export const ShowDockerModalLogs = ({
 					<DialogDescription>View the logs for {containerId}</DialogDescription>
 				</DialogHeader>
 				<div className="flex flex-col gap-4 pt-2.5">
-					<DockerLogsId
-						containerId={containerId || ""}
-						serverId={serverId}
-					/>
+					<DockerLogsId containerId={containerId || ""} serverId={serverId} />
 				</div>
 			</DialogContent>
 		</Dialog>
diff --git a/apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx b/apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx
index 6790e6d9..eb619277 100644
--- a/apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx
+++ b/apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx
@@ -1,74 +1,98 @@
-import { Badge } from "@/components/ui/badge";
-import { cn } from "@/lib/utils";
-import { getLogType, type LogLine } from "./utils";
-import React from "react";
-import { escapeRegExp } from 'lodash';
-
-interface LogLineProps {
-  log: LogLine;
-  searchTerm?: string;
-}
-
-export function TerminalLine({ log, searchTerm }: LogLineProps) {
-  const { timestamp, message } = log;
-  const { type, variant, color } = getLogType(message);
-
-  const formattedTime = timestamp
-    ? timestamp.toLocaleString("en-GB", {
-        day: "2-digit",
-        month: "short",
-        year: "numeric",
-        hour: "2-digit",
-        minute: "2-digit",
-        second: "2-digit",
-        hour12: false,
-      })
-    : "--- No time found ---";
-
-  const highlightMessage = (text: string, term: string) => {
-    if (!term) return text;
-
-    const parts = text.split(new RegExp(`(${escapeRegExp(term)})`, "gi"));
-    return parts.map((part, index) =>
-      part.toLowerCase() === term.toLowerCase() ? (
-        <span key={index} className="bg-yellow-200 dark:bg-yellow-900">
-          {part}
-        </span>
-      ) : (
-        part
-      )
-    );
-  };
-
-  return (
-    <div
-      className={cn(
-        "font-mono text-xs flex flex-row gap-3 py-2 sm:py-0.5 group",
-        type === "error" 
-          ? "bg-red-500/10 hover:bg-red-500/15"
-          : type === "warning"
-            ? "bg-yellow-500/10 hover:bg-yellow-500/15"
-            : "hover:bg-gray-200/50 dark:hover:bg-gray-800/50"
-      )}
-    >
-      {" "}
-      <div className="flex items-start gap-x-2">
-        {/* Icon to expand the log item maybe implement a colapsible later */}
-        {/* <Square className="size-4 text-muted-foreground opacity-0 group-hover/logitem:opacity-100 transition-opacity" /> */}
-        <div className={cn("w-2 h-full flex-shrink-0 rounded-[3px]", color)} />
-        <span className="select-none pl-2 text-muted-foreground w-full sm:w-40 flex-shrink-0">
-          {formattedTime}
-        </span>
-        <Badge
-          variant={variant}
-          className="w-14 justify-center text-[10px] px-1 py-0"
-        >
-          {type}
-        </Badge>
-      </div>
-      <span className="dark:text-gray-200 text-foreground ">
-        {searchTerm ? highlightMessage(message, searchTerm) : message}
-      </span>
-    </div>
-  );
-}
+import { Badge } from "@/components/ui/badge";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import { escapeRegExp } from "lodash";
+import React from "react";
+import { type LogLine, getLogType } from "./utils";
+
+interface LogLineProps {
+	log: LogLine;
+	searchTerm?: string;
+}
+
+export function TerminalLine({ log, searchTerm }: LogLineProps) {
+	const { timestamp, message, rawTimestamp } = log;
+	const { type, variant, color } = getLogType(message);
+
+	const formattedTime = timestamp
+		? timestamp.toLocaleString([], {
+				month: "2-digit",
+				day: "2-digit",
+				hour: "2-digit",
+				minute: "2-digit",
+				year: "2-digit",
+				second: "2-digit",
+			})
+		: "--- No time found ---";
+
+	const highlightMessage = (text: string, term: string) => {
+		if (!term) return text;
+
+		const parts = text.split(new RegExp(`(${escapeRegExp(term)})`, "gi"));
+		return parts.map((part, index) =>
+			part.toLowerCase() === term.toLowerCase() ? (
+				<span key={index} className="bg-yellow-200 dark:bg-yellow-900">
+					{part}
+				</span>
+			) : (
+				part
+			),
+		);
+	};
+
+	const tooltip = (color: string, timestamp: string) => {
+		return (
+			<TooltipProvider>
+				<Tooltip>
+					<TooltipTrigger asChild>
+						<div
+							className={cn("w-2 h-full flex-shrink-0 rounded-[3px]", color)}
+						/>
+					</TooltipTrigger>
+					<TooltipContent>
+						<p className="text text-xs text-muted-foreground break-all max-w-md">
+							{timestamp}
+						</p>
+					</TooltipContent>
+				</Tooltip>
+			</TooltipProvider>
+		);
+	};
+
+	return (
+		<div
+			className={cn(
+				"font-mono text-xs flex flex-row gap-3 py-2 sm:py-0.5 group",
+				type === "error"
+					? "bg-red-500/10 hover:bg-red-500/15"
+					: type === "warning"
+						? "bg-yellow-500/10 hover:bg-yellow-500/15"
+						: "hover:bg-gray-200/50 dark:hover:bg-gray-800/50",
+			)}
+		>
+			{" "}
+			<div className="flex items-start gap-x-2">
+				{/* Icon to expand the log item maybe implement a colapsible later */}
+				{/* <Square className="size-4 text-muted-foreground opacity-0 group-hover/logitem:opacity-100 transition-opacity" /> */}
+				{rawTimestamp && tooltip(color, rawTimestamp)}
+				<span className="select-none pl-2 text-muted-foreground w-full sm:w-40 flex-shrink-0">
+					{formattedTime}
+				</span>
+				<Badge
+					variant={variant}
+					className="w-14 justify-center text-[10px] px-1 py-0"
+				>
+					{type}
+				</Badge>
+			</div>
+			<span className="dark:text-gray-200 text-foreground ">
+				{searchTerm ? highlightMessage(message, searchTerm) : message}
+			</span>
+		</div>
+	);
+}
diff --git a/apps/dokploy/components/dashboard/docker/logs/utils.ts b/apps/dokploy/components/dashboard/docker/logs/utils.ts
index 1c010681..6e11fe0e 100644
--- a/apps/dokploy/components/dashboard/docker/logs/utils.ts
+++ b/apps/dokploy/components/dashboard/docker/logs/utils.ts
@@ -1,132 +1,134 @@
-export type LogType = "error" | "warning" | "success" | "info";
-export type LogVariant = "red" | "yellow" | "green" | "blue";
-
-export interface LogLine {
-  timestamp: Date | null;
-  message: string;
-}
-
-interface LogStyle {
-  type: LogType;
-  variant: LogVariant;
-  color: string;
-}
-
-const LOG_STYLES: Record<LogType, LogStyle> = {
-  error: {
-    type: "error",
-    variant: "red",
-    color: "bg-red-500/40",
-  },
-  warning: {
-    type: "warning",
-    variant: "yellow",
-    color: "bg-yellow-500/40",
-  },
-  success: {
-    type: "success",
-    variant: "green",
-    color: "bg-green-500/40",
-  },
-  info: {
-    type: "info",
-    variant: "blue",
-    color: "bg-blue-600/40",
-  },
-} as const;
-
-export function parseLogs(logString: string): LogLine[] {
-  // Regex to match the log line format
-  // Exemple of return :
-  // 1 2024-12-10T10:00:00.000Z The server is running on port 8080
-  // Should return :
-  // { timestamp: new Date("2024-12-10T10:00:00.000Z"), 
-  // message: "The server is running on port 8080" }  
-  const logRegex =
-    /^(?:(\d+)\s+)?(\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d+)?Z|\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}\.\d{3} UTC)?\s*(.*)$/;
-
-  return logString
-    .split("\n")
-    .map((line) => line.trim())
-    .filter((line) => line !== "")
-    .map((line) => {
-      const match = line.match(logRegex);
-      if (!match) return null;
-
-      const [, , timestamp, message] = match;
-
-      if (!message?.trim()) return null;
-
-      // Delete other timestamps and keep only the one from --timestamps
-      const cleanedMessage = message
-        ?.replace(
-          /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d+)?Z|\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}\.\d{3} UTC/g,
-          ""
-        )
-        .trim();
-
-      return {
-        timestamp: timestamp ? new Date(timestamp.replace(" UTC", "Z")) : null,
-        message: cleanedMessage,
-      };
-    })
-    .filter((log) => log !== null);
-}
-
-// Detect log type based on message content
-export const getLogType = (message: string): LogStyle => {
-  const lowerMessage = message.toLowerCase();
-
-  if (
-    /(?:^|\s)(?:error|err):?\s/i.test(lowerMessage) ||
-    /\b(?:exception|failed|failure)\b/i.test(lowerMessage) ||
-    /(?:stack\s?trace):\s*$/i.test(lowerMessage) ||
-    /^\s*at\s+[\w.]+\s*\(?.+:\d+:\d+\)?/.test(lowerMessage) ||
-    /\b(?:uncaught|unhandled)\s+(?:exception|error)\b/i.test(lowerMessage) ||
-    /Error:\s.*(?:in|at)\s+.*:\d+(?::\d+)?/.test(lowerMessage) ||
-    /\b(?:errno|code):\s*(?:\d+|[A-Z_]+)\b/i.test(lowerMessage) ||
-    /\[(?:error|err|fatal)\]/i.test(lowerMessage) ||
-    /\b(?:crash|critical|fatal)\b/i.test(lowerMessage) ||
-    /\b(?:fail(?:ed|ure)?|broken|dead)\b/i.test(lowerMessage)
-  ) {
-    return LOG_STYLES.error;
-  }
-
-  if (
-    /(?:^|\s)(?:warning|warn):?\s/i.test(lowerMessage) ||
-    /\[(?:warn(?:ing)?|attention)\]/i.test(lowerMessage) ||
-    /(?:deprecated|obsolete)\s+(?:since|in|as\s+of)/i.test(lowerMessage) ||
-    /\b(?:caution|attention|notice):\s/i.test(lowerMessage) ||
-    /(?:might|may|could)\s+(?:not|cause|lead\s+to)/i.test(lowerMessage) ||
-    /(?:!+\s*(?:warning|caution|attention)\s*!+)/i.test(lowerMessage) ||
-    /\b(?:deprecated|obsolete)\b/i.test(lowerMessage) ||
-    /\b(?:unstable|experimental)\b/i.test(lowerMessage)
-  ) {
-    return LOG_STYLES.warning;
-  }
-
-  if (
-    /(?:successfully|complete[d]?)\s+(?:initialized|started|completed|done)/i.test(
-      lowerMessage
-    ) ||
-    /\[(?:success|ok|done)\]/i.test(lowerMessage) ||
-    /(?:listening|running)\s+(?:on|at)\s+(?:port\s+)?\d+/i.test(lowerMessage) ||
-    /(?:connected|established|ready)\s+(?:to|for|on)/i.test(lowerMessage) ||
-    /\b(?:loaded|mounted|initialized)\s+successfully\b/i.test(lowerMessage) ||
-    /✓|√|\[ok\]|done!/i.test(lowerMessage) ||
-    /\b(?:success(?:ful)?|completed|ready)\b/i.test(lowerMessage) ||
-    /\b(?:started|running|active)\b/i.test(lowerMessage)
-  ) {
-    return LOG_STYLES.success;
-  }
-
-  if (
-    /(?:^|\s)(?:info|inf):?\s/i.test(lowerMessage) ||
-    /\[(info|log|debug|trace|server|db|api)\]/i.test(lowerMessage) ||
-    /\b(?:version|config|start|import|load)\b:?/i.test(lowerMessage)
-  ) {
-    return LOG_STYLES.info;
-  }
-
-  return LOG_STYLES.info;
-};
+export type LogType = "error" | "warning" | "success" | "info";
+export type LogVariant = "red" | "yellow" | "green" | "blue";
+
+export interface LogLine {
+	rawTimestamp: string | null;
+	timestamp: Date | null;
+	message: string;
+}
+
+interface LogStyle {
+	type: LogType;
+	variant: LogVariant;
+	color: string;
+}
+
+const LOG_STYLES: Record<LogType, LogStyle> = {
+	error: {
+		type: "error",
+		variant: "red",
+		color: "bg-red-500/40",
+	},
+	warning: {
+		type: "warning",
+		variant: "yellow",
+		color: "bg-yellow-500/40",
+	},
+	success: {
+		type: "success",
+		variant: "green",
+		color: "bg-green-500/40",
+	},
+	info: {
+		type: "info",
+		variant: "blue",
+		color: "bg-blue-600/40",
+	},
+} as const;
+
+export function parseLogs(logString: string): LogLine[] {
+	// Regex to match the log line format
+	// Exemple of return :
+	// 1 2024-12-10T10:00:00.000Z The server is running on port 8080
+	// Should return :
+	// { timestamp: new Date("2024-12-10T10:00:00.000Z"),
+	// message: "The server is running on port 8080" }
+	const logRegex =
+		/^(?:(\d+)\s+)?(\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d+)?Z|\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}\.\d{3} UTC)?\s*(.*)$/;
+
+	return logString
+		.split("\n")
+		.map((line) => line.trim())
+		.filter((line) => line !== "")
+		.map((line) => {
+			const match = line.match(logRegex);
+			if (!match) return null;
+
+			const [, , timestamp, message] = match;
+
+			if (!message?.trim()) return null;
+
+			// Delete other timestamps and keep only the one from --timestamps
+			const cleanedMessage = message
+				?.replace(
+					/\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d+)?Z|\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}\.\d{3} UTC/g,
+					"",
+				)
+				.trim();
+
+			return {
+				rawTimestamp: timestamp,
+				timestamp: timestamp ? new Date(timestamp.replace(" UTC", "Z")) : null,
+				message: cleanedMessage,
+			};
+		})
+		.filter((log) => log !== null);
+}
+
+// Detect log type based on message content
+export const getLogType = (message: string): LogStyle => {
+	const lowerMessage = message.toLowerCase();
+
+	if (
+		/(?:^|\s)(?:error|err):?\s/i.test(lowerMessage) ||
+		/\b(?:exception|failed|failure)\b/i.test(lowerMessage) ||
+		/(?:stack\s?trace):\s*$/i.test(lowerMessage) ||
+		/^\s*at\s+[\w.]+\s*\(?.+:\d+:\d+\)?/.test(lowerMessage) ||
+		/\b(?:uncaught|unhandled)\s+(?:exception|error)\b/i.test(lowerMessage) ||
+		/Error:\s.*(?:in|at)\s+.*:\d+(?::\d+)?/.test(lowerMessage) ||
+		/\b(?:errno|code):\s*(?:\d+|[A-Z_]+)\b/i.test(lowerMessage) ||
+		/\[(?:error|err|fatal)\]/i.test(lowerMessage) ||
+		/\b(?:crash|critical|fatal)\b/i.test(lowerMessage) ||
+		/\b(?:fail(?:ed|ure)?|broken|dead)\b/i.test(lowerMessage)
+	) {
+		return LOG_STYLES.error;
+	}
+
+	if (
+		/(?:^|\s)(?:warning|warn):?\s/i.test(lowerMessage) ||
+		/\[(?:warn(?:ing)?|attention)\]/i.test(lowerMessage) ||
+		/(?:deprecated|obsolete)\s+(?:since|in|as\s+of)/i.test(lowerMessage) ||
+		/\b(?:caution|attention|notice):\s/i.test(lowerMessage) ||
+		/(?:might|may|could)\s+(?:not|cause|lead\s+to)/i.test(lowerMessage) ||
+		/(?:!+\s*(?:warning|caution|attention)\s*!+)/i.test(lowerMessage) ||
+		/\b(?:deprecated|obsolete)\b/i.test(lowerMessage) ||
+		/\b(?:unstable|experimental)\b/i.test(lowerMessage)
+	) {
+		return LOG_STYLES.warning;
+	}
+
+	if (
+		/(?:successfully|complete[d]?)\s+(?:initialized|started|completed|done)/i.test(
+			lowerMessage,
+		) ||
+		/\[(?:success|ok|done)\]/i.test(lowerMessage) ||
+		/(?:listening|running)\s+(?:on|at)\s+(?:port\s+)?\d+/i.test(lowerMessage) ||
+		/(?:connected|established|ready)\s+(?:to|for|on)/i.test(lowerMessage) ||
+		/\b(?:loaded|mounted|initialized)\s+successfully\b/i.test(lowerMessage) ||
+		/✓|√|\[ok\]|done!/i.test(lowerMessage) ||
+		/\b(?:success(?:ful)?|completed|ready)\b/i.test(lowerMessage) ||
+		/\b(?:started|running|active)\b/i.test(lowerMessage)
+	) {
+		return LOG_STYLES.success;
+	}
+
+	if (
+		/(?:^|\s)(?:info|inf):?\s/i.test(lowerMessage) ||
+		/\[(info|log|debug|trace|server|db|api)\]/i.test(lowerMessage) ||
+		/\b(?:version|config|start|import|load)\b:?/i.test(lowerMessage)
+	) {
+		return LOG_STYLES.info;
+	}
+
+	return LOG_STYLES.info;
+};
diff --git a/apps/dokploy/components/dashboard/settings/web-server/show-modal-logs.tsx b/apps/dokploy/components/dashboard/settings/web-server/show-modal-logs.tsx
index f15e475c..92401dc3 100644
--- a/apps/dokploy/components/dashboard/settings/web-server/show-modal-logs.tsx
+++ b/apps/dokploy/components/dashboard/settings/web-server/show-modal-logs.tsx
@@ -91,10 +91,7 @@ export const ShowModalLogs = ({ appName, children, serverId }: Props) => {
 							</SelectGroup>
 						</SelectContent>
 					</Select>
-					<DockerLogsId
-						containerId={containerId || ""}
-						serverId={serverId}
-					/>
+					<DockerLogsId containerId={containerId || ""} serverId={serverId} />
 				</div>
 			</DialogContent>
 		</Dialog>
diff --git a/apps/dokploy/components/ui/badge.tsx b/apps/dokploy/components/ui/badge.tsx
index fd190b8a..911b0071 100644
--- a/apps/dokploy/components/ui/badge.tsx
+++ b/apps/dokploy/components/ui/badge.tsx
@@ -14,16 +14,14 @@ const badgeVariants = cva(
 					"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
 				destructive:
 					"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-				red: 
-					"border-transparent select-none items-center whitespace-nowrap font-medium bg-red-500/15 text-destructive text-xs h-4 px-1 py-1 rounded-md",
+				red: "border-transparent select-none items-center whitespace-nowrap font-medium bg-red-500/15 text-destructive text-xs h-4 px-1 py-1 rounded-md",
 				yellow:
 					"border-transparent select-none items-center whitespace-nowrap font-medium bg-yellow-500/15 text-yellow-500 text-xs h-4 px-1 py-1 rounded-md",
 				orange:
 					"border-transparent select-none items-center whitespace-nowrap font-medium bg-orange-500/15 text-orange-500 text-xs h-4 px-1 py-1 rounded-md",
 				green:
 					"border-transparent select-none items-center whitespace-nowrap font-medium bg-emerald-500/15 text-emerald-500 text-xs h-4 px-1 py-1 rounded-md",
-				blue: 
-					"border-transparent select-none items-center whitespace-nowrap font-medium bg-blue-500/15 text-blue-500 text-xs h-4 px-1 py-1 rounded-md",
+				blue: "border-transparent select-none items-center whitespace-nowrap font-medium bg-blue-500/15 text-blue-500 text-xs h-4 px-1 py-1 rounded-md",
 				blank:
 					"border-transparent select-none items-center whitespace-nowrap font-medium dark:bg-white/15 bg-black/15 text-foreground text-xs h-4 px-1 py-1 rounded-md",
 				outline: "text-foreground",
diff --git a/apps/dokploy/styles/globals.css b/apps/dokploy/styles/globals.css
index a116d66b..ab6084e1 100644
--- a/apps/dokploy/styles/globals.css
+++ b/apps/dokploy/styles/globals.css
@@ -198,4 +198,4 @@
 	.custom-logs-scrollbar::-webkit-scrollbar-thumb:hover {
 		background-color: hsl(var(--muted-foreground) / 0.5);
 	}
-}
\ No newline at end of file
+}

From 2fa6f3bfa6e2cbcca9ebeec15252eb5db1720739 Mon Sep 17 00:00:00 2001
From: Nicholas Penree <nick@penree.com>
Date: Wed, 11 Dec 2024 19:20:30 -0500
Subject: [PATCH 09/32] feat(logs): lint

---
 .../dokploy/components/dashboard/docker/logs/docker-logs-id.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx b/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
index 4d2dfe9c..2781aff5 100644
--- a/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
+++ b/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
@@ -26,7 +26,7 @@ export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
 	const { data } = api.docker.getConfig.useQuery(
 		{
 			containerId,
-			serverId,
+			serverId: serverId ?? undefined,
 		},
 		{
 			enabled: !!containerId,

From 16ca198eb420e43acad3debfaebf3219234c63d9 Mon Sep 17 00:00:00 2001
From: Nicholas Penree <nick@penree.com>
Date: Wed, 11 Dec 2024 19:31:23 -0500
Subject: [PATCH 10/32] feat(logs): better download file names

---
 .../components/dashboard/docker/logs/docker-logs-id.tsx        | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx b/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
index 2781aff5..63e24a20 100644
--- a/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
+++ b/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
@@ -140,8 +140,9 @@ export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
 		const url = URL.createObjectURL(blob);
 		const a = document.createElement("a");
 		const appName = data.Name.replace("/", "") || "app";
+		const isoDate = new Date().toISOString();
 		a.href = url;
-		a.download = `logs-${appName}-${new Date().toISOString()}.txt`;
+		a.download = `${appName}-${isoDate.slice(0, 10).replace(/-/g, "")}_${isoDate.slice(11, 19).replace(/:/g, "")}.log.txt`;
 		document.body.appendChild(a);
 		a.click();
 		document.body.removeChild(a);

From 8546031df005d9a3ce085c729f0d6d0ff92b064d Mon Sep 17 00:00:00 2001
From: Nicholas Penree <nick@penree.com>
Date: Wed, 11 Dec 2024 19:32:34 -0500
Subject: [PATCH 11/32] feat(logs): lint

---
 apps/dokploy/components/dashboard/docker/logs/utils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/dokploy/components/dashboard/docker/logs/utils.ts b/apps/dokploy/components/dashboard/docker/logs/utils.ts
index 6e11fe0e..9f178d25 100644
--- a/apps/dokploy/components/dashboard/docker/logs/utils.ts
+++ b/apps/dokploy/components/dashboard/docker/logs/utils.ts
@@ -67,7 +67,7 @@ export function parseLogs(logString: string): LogLine[] {
 				.trim();
 
 			return {
-				rawTimestamp: timestamp,
+				rawTimestamp: timestamp ?? null,
 				timestamp: timestamp ? new Date(timestamp.replace(" UTC", "Z")) : null,
 				message: cleanedMessage,
 			};

From d374f5eedf04722696103821888143100e57c8d2 Mon Sep 17 00:00:00 2001
From: usopp <botmiley@gmail.com>
Date: Thu, 12 Dec 2024 19:28:16 +0100
Subject: [PATCH 12/32] fix: no time found block same width as the timestamp
 ones

---
 .../components/dashboard/docker/logs/terminal-line.tsx      | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx b/apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx
index eb619277..bc04b26d 100644
--- a/apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx
+++ b/apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx
@@ -45,7 +45,7 @@ export function TerminalLine({ log, searchTerm }: LogLineProps) {
 		);
 	};
 
-	const tooltip = (color: string, timestamp: string) => {
+	const tooltip = (color: string, timestamp: string | null) => {
 		return (
 			<TooltipProvider>
 				<Tooltip>
@@ -56,7 +56,7 @@ export function TerminalLine({ log, searchTerm }: LogLineProps) {
 					</TooltipTrigger>
 					<TooltipContent>
 						<p className="text text-xs text-muted-foreground break-all max-w-md">
-							{timestamp}
+							{timestamp || "--- No time found ---"}
 						</p>
 					</TooltipContent>
 				</Tooltip>
@@ -79,7 +79,7 @@ export function TerminalLine({ log, searchTerm }: LogLineProps) {
 			<div className="flex items-start gap-x-2">
 				{/* Icon to expand the log item maybe implement a colapsible later */}
 				{/* <Square className="size-4 text-muted-foreground opacity-0 group-hover/logitem:opacity-100 transition-opacity" /> */}
-				{rawTimestamp && tooltip(color, rawTimestamp)}
+				{tooltip(color, rawTimestamp)}
 				<span className="select-none pl-2 text-muted-foreground w-full sm:w-40 flex-shrink-0">
 					{formattedTime}
 				</span>

From fe088bad3bbc1cebeb640ead6f65908e51204f4a Mon Sep 17 00:00:00 2001
From: 190km <botmiley@gmail.com>
Date: Thu, 12 Dec 2024 19:54:44 +0100
Subject: [PATCH 13/32] feat: add loading spinner when logs are being loaded

---
 .../dashboard/docker/logs/docker-logs-id.tsx  | 561 +++++++++---------
 1 file changed, 286 insertions(+), 275 deletions(-)

diff --git a/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx b/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
index 63e24a20..6873ef9b 100644
--- a/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
+++ b/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
@@ -1,275 +1,286 @@
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "@/components/ui/select";
-import { api } from "@/utils/api";
-import { Download as DownloadIcon } from "lucide-react";
-import React, { useEffect, useRef } from "react";
-import { TerminalLine } from "./terminal-line";
-import { type LogLine, getLogType, parseLogs } from "./utils";
-
-interface Props {
-	containerId: string;
-	serverId?: string | null;
-}
-
-type TimeFilter = "all" | "1h" | "6h" | "24h" | "168h" | "720h";
-type TypeFilter = "all" | "error" | "warning" | "success" | "info";
-
-export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
-	const { data } = api.docker.getConfig.useQuery(
-		{
-			containerId,
-			serverId: serverId ?? undefined,
-		},
-		{
-			enabled: !!containerId,
-		},
-	);
-
-	const [rawLogs, setRawLogs] = React.useState("");
-	const [filteredLogs, setFilteredLogs] = React.useState<LogLine[]>([]);
-	const [autoScroll, setAutoScroll] = React.useState(true);
-	const [lines, setLines] = React.useState<number>(100);
-	const [search, setSearch] = React.useState<string>("");
-	const [since, setSince] = React.useState<TimeFilter>("all");
-	const [typeFilter, setTypeFilter] = React.useState<TypeFilter>("all");
-	const scrollRef = useRef<HTMLDivElement>(null);
-
-	const scrollToBottom = () => {
-		if (autoScroll && scrollRef.current) {
-			scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
-		}
-	};
-
-	const handleScroll = () => {
-		if (!scrollRef.current) return;
-
-		const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
-		const isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) < 10;
-		setAutoScroll(isAtBottom);
-	};
-
-	const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
-		setRawLogs("");
-		setFilteredLogs([]);
-		setSearch(e.target.value || "");
-	};
-
-	const handleLines = (e: React.ChangeEvent<HTMLInputElement>) => {
-		setRawLogs("");
-		setFilteredLogs([]);
-		setLines(Number(e.target.value) || 1);
-	};
-
-	const handleSince = (value: TimeFilter) => {
-		setRawLogs("");
-		setFilteredLogs([]);
-		setSince(value);
-	};
-
-	const handleTypeFilter = (value: TypeFilter) => {
-		setTypeFilter(value);
-	};
-
-	useEffect(() => {
-		setRawLogs("");
-		setFilteredLogs([]);
-	}, [containerId]);
-
-	useEffect(() => {
-		if (!containerId) return;
-
-		const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
-		const params = new globalThis.URLSearchParams({
-			containerId,
-			tail: lines.toString(),
-			since,
-			search,
-		});
-
-		if (serverId) {
-			params.append("serverId", serverId);
-		}
-
-		const wsUrl = `${protocol}//${
-			window.location.host
-		}/docker-container-logs?${params.toString()}`;
-		console.log("Connecting to WebSocket:", wsUrl);
-		const ws = new WebSocket(wsUrl);
-
-		ws.onopen = () => {
-			console.log("WebSocket connected");
-		};
-
-		ws.onmessage = (e) => {
-			// console.log("Received message:", e.data);
-			setRawLogs((prev) => prev + e.data);
-		};
-
-		ws.onerror = (error) => {
-			console.error("WebSocket error:", error);
-		};
-
-		ws.onclose = (e) => {
-			console.log("WebSocket closed:", e.reason);
-		};
-
-		return () => {
-			if (ws.readyState === WebSocket.OPEN) {
-				ws.close();
-			}
-		};
-	}, [containerId, serverId, lines, search, since]);
-
-	const handleDownload = () => {
-		const logContent = filteredLogs
-			.map(
-				({ timestamp, message }: { timestamp: Date | null; message: string }) =>
-					`${timestamp?.toISOString() || "No timestamp"} ${message}`,
-			)
-			.join("\n");
-
-		const blob = new Blob([logContent], { type: "text/plain" });
-		const url = URL.createObjectURL(blob);
-		const a = document.createElement("a");
-		const appName = data.Name.replace("/", "") || "app";
-		const isoDate = new Date().toISOString();
-		a.href = url;
-		a.download = `${appName}-${isoDate.slice(0, 10).replace(/-/g, "")}_${isoDate.slice(11, 19).replace(/:/g, "")}.log.txt`;
-		document.body.appendChild(a);
-		a.click();
-		document.body.removeChild(a);
-		URL.revokeObjectURL(url);
-	};
-
-	const handleFilter = (logs: LogLine[]) => {
-		return logs.filter((log) => {
-			const logType = getLogType(log.message).type;
-
-			const matchesType = typeFilter === "all" || logType === typeFilter;
-
-			return matchesType;
-		});
-	};
-
-	useEffect(() => {
-		setRawLogs("");
-		setFilteredLogs([]);
-	}, [containerId]);
-
-	useEffect(() => {
-		const logs = parseLogs(rawLogs);
-		const filtered = handleFilter(logs);
-		setFilteredLogs(filtered);
-	}, [rawLogs, search, lines, since, typeFilter]);
-
-	useEffect(() => {
-		scrollToBottom();
-
-		if (autoScroll && scrollRef.current) {
-			scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
-		}
-	}, [filteredLogs, autoScroll]);
-
-	return (
-		<div className="flex flex-col gap-4">
-			<div className="shadow-md rounded-lg overflow-hidden">
-				<div className="space-y-4">
-					<div className="flex flex-wrap justify-between items-start sm:items-center gap-4">
-						<div className="flex flex-wrap gap-4">
-							<Input
-								type="text"
-								placeholder="Number of lines to show"
-								value={lines}
-								onChange={handleLines}
-								className="inline-flex h-9 text-sm text-white placeholder-gray-400 w-full sm:w-auto"
-							/>
-
-							<Select value={since} onValueChange={handleSince}>
-								<SelectTrigger className="w-[180px] h-9">
-									<SelectValue placeholder="Time filter" />
-								</SelectTrigger>
-								<SelectContent>
-									<SelectItem value="1h">Last hour</SelectItem>
-									<SelectItem value="6h">Last 6 hours</SelectItem>
-									<SelectItem value="24h">Last 24 hours</SelectItem>
-									<SelectItem value="168h">Last 7 days</SelectItem>
-									<SelectItem value="720h">Last 30 days</SelectItem>
-									<SelectItem value="all">All time</SelectItem>
-								</SelectContent>
-							</Select>
-
-							<Select value={typeFilter} onValueChange={handleTypeFilter}>
-								<SelectTrigger className="w-[180px] h-9">
-									<SelectValue placeholder="Type filter" />
-								</SelectTrigger>
-								<SelectContent>
-									<SelectItem value="all">
-										<Badge variant="blank">All</Badge>
-									</SelectItem>
-									<SelectItem value="error">
-										<Badge variant="red">Error</Badge>
-									</SelectItem>
-									<SelectItem value="warning">
-										<Badge variant="yellow">Warning</Badge>
-									</SelectItem>
-									<SelectItem value="success">
-										<Badge variant="green">Success</Badge>
-									</SelectItem>
-									<SelectItem value="info">
-										<Badge variant="blue">Info</Badge>
-									</SelectItem>
-								</SelectContent>
-							</Select>
-
-							<Input
-								type="search"
-								placeholder="Search logs..."
-								value={search}
-								onChange={handleSearch}
-								className="inline-flex h-9 text-sm text-white placeholder-gray-400 w-full sm:w-auto"
-							/>
-						</div>
-
-						<Button
-							variant="outline"
-							size="sm"
-							className="h-9"
-							onClick={handleDownload}
-							disabled={filteredLogs.length === 0 || !data?.Name}
-						>
-							<DownloadIcon className="mr-2 h-4 w-4" />
-							Download logs
-						</Button>
-					</div>
-					<div
-						ref={scrollRef}
-						onScroll={handleScroll}
-						className="h-[720px] overflow-y-auto space-y-0 border p-4 bg-[#d4d4d4] dark:bg-[#050506] rounded custom-logs-scrollbar"
-					>
-						{filteredLogs.length > 0 ? (
-							filteredLogs.map((filteredLog: LogLine, index: number) => (
-								<TerminalLine
-									key={index}
-									log={filteredLog}
-									searchTerm={search}
-								/>
-							))
-						) : (
-							<div className="flex justify-center items-center h-full text-muted-foreground">
-								No logs found
-							</div>
-						)}
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-};
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { api } from "@/utils/api";
+import { Download as DownloadIcon, Loader2 } from "lucide-react";
+import React, { useEffect, useRef } from "react";
+import { TerminalLine } from "./terminal-line";
+import { type LogLine, getLogType, parseLogs } from "./utils";
+
+interface Props {
+  containerId: string;
+  serverId?: string | null;
+}
+
+type TimeFilter = "all" | "1h" | "6h" | "24h" | "168h" | "720h";
+type TypeFilter = "all" | "error" | "warning" | "success" | "info";
+
+export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
+  const { data } = api.docker.getConfig.useQuery(
+    {
+      containerId,
+      serverId: serverId ?? undefined,
+    },
+    {
+      enabled: !!containerId,
+    }
+  );
+
+  const [rawLogs, setRawLogs] = React.useState("");
+  const [filteredLogs, setFilteredLogs] = React.useState<LogLine[]>([]);
+  const [autoScroll, setAutoScroll] = React.useState(true);
+  const [lines, setLines] = React.useState<number>(100);
+  const [search, setSearch] = React.useState<string>("");
+  const [since, setSince] = React.useState<TimeFilter>("all");
+  const [typeFilter, setTypeFilter] = React.useState<TypeFilter>("all");
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [isLoading, setIsLoading] = React.useState(false);
+
+  const scrollToBottom = () => {
+    if (autoScroll && scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  };
+
+  const handleScroll = () => {
+    if (!scrollRef.current) return;
+
+    const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
+    const isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) < 10;
+    setAutoScroll(isAtBottom);
+  };
+
+  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setRawLogs("");
+    setFilteredLogs([]);
+    setSearch(e.target.value || "");
+  };
+
+  const handleLines = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setRawLogs("");
+    setFilteredLogs([]);
+    setLines(Number(e.target.value) || 1);
+  };
+
+  const handleSince = (value: TimeFilter) => {
+    setRawLogs("");
+    setFilteredLogs([]);
+    setSince(value);
+  };
+
+  const handleTypeFilter = (value: TypeFilter) => {
+    setTypeFilter(value);
+  };
+
+  useEffect(() => {
+    setRawLogs("");
+    setFilteredLogs([]);
+  }, [containerId]);
+
+  useEffect(() => {
+    if (!containerId) return;
+    setIsLoading(true);
+
+    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+    const params = new globalThis.URLSearchParams({
+      containerId,
+      tail: lines.toString(),
+      since,
+      search,
+    });
+
+    if (serverId) {
+      params.append("serverId", serverId);
+    }
+
+    const wsUrl = `${protocol}//${
+      window.location.host
+    }/docker-container-logs?${params.toString()}`;
+    console.log("Connecting to WebSocket:", wsUrl);
+    const ws = new WebSocket(wsUrl);
+
+    ws.onopen = () => {
+      console.log("WebSocket connected");
+	  setIsLoading(false)
+    };
+
+    ws.onmessage = (e) => {
+      setRawLogs((prev) => prev + e.data);
+      setIsLoading(false);
+    };
+
+    ws.onerror = (error) => {
+      console.error("WebSocket error:", error);
+      setIsLoading(false);
+    };
+
+    ws.onclose = (e) => {
+      console.log("WebSocket closed:", e.reason);
+      setIsLoading(false);
+    };
+
+    return () => {
+      if (ws.readyState === WebSocket.OPEN) {
+        ws.close();
+      }
+    };
+  }, [containerId, serverId, lines, search, since]);
+
+  const handleDownload = () => {
+    const logContent = filteredLogs
+      .map(
+        ({ timestamp, message }: { timestamp: Date | null; message: string }) =>
+          `${timestamp?.toISOString() || "No timestamp"} ${message}`
+      )
+      .join("\n");
+
+    const blob = new Blob([logContent], { type: "text/plain" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    const appName = data.Name.replace("/", "") || "app";
+    const isoDate = new Date().toISOString();
+    a.href = url;
+    a.download = `${appName}-${isoDate.slice(0, 10).replace(/-/g, "")}_${isoDate
+      .slice(11, 19)
+      .replace(/:/g, "")}.log.txt`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  const handleFilter = (logs: LogLine[]) => {
+    return logs.filter((log) => {
+      const logType = getLogType(log.message).type;
+
+      const matchesType = typeFilter === "all" || logType === typeFilter;
+
+      return matchesType;
+    });
+  };
+
+  useEffect(() => {
+    setRawLogs("");
+    setFilteredLogs([]);
+  }, [containerId]);
+
+  useEffect(() => {
+    const logs = parseLogs(rawLogs);
+    const filtered = handleFilter(logs);
+    setFilteredLogs(filtered);
+  }, [rawLogs, search, lines, since, typeFilter]);
+
+  useEffect(() => {
+    scrollToBottom();
+
+    if (autoScroll && scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [filteredLogs, autoScroll]);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="shadow-md rounded-lg overflow-hidden">
+        <div className="space-y-4">
+          <div className="flex flex-wrap justify-between items-start sm:items-center gap-4">
+            <div className="flex flex-wrap gap-4">
+              <Input
+                type="text"
+                placeholder="Number of lines to show"
+                value={lines}
+                onChange={handleLines}
+                className="inline-flex h-9 text-sm text-white placeholder-gray-400 w-full sm:w-auto"
+              />
+
+              <Select value={since} onValueChange={handleSince}>
+                <SelectTrigger className="w-[180px] h-9">
+                  <SelectValue placeholder="Time filter" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="1h">Last hour</SelectItem>
+                  <SelectItem value="6h">Last 6 hours</SelectItem>
+                  <SelectItem value="24h">Last 24 hours</SelectItem>
+                  <SelectItem value="168h">Last 7 days</SelectItem>
+                  <SelectItem value="720h">Last 30 days</SelectItem>
+                  <SelectItem value="all">All time</SelectItem>
+                </SelectContent>
+              </Select>
+
+              <Select value={typeFilter} onValueChange={handleTypeFilter}>
+                <SelectTrigger className="w-[180px] h-9">
+                  <SelectValue placeholder="Type filter" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">
+                    <Badge variant="blank">All</Badge>
+                  </SelectItem>
+                  <SelectItem value="error">
+                    <Badge variant="red">Error</Badge>
+                  </SelectItem>
+                  <SelectItem value="warning">
+                    <Badge variant="yellow">Warning</Badge>
+                  </SelectItem>
+                  <SelectItem value="success">
+                    <Badge variant="green">Success</Badge>
+                  </SelectItem>
+                  <SelectItem value="info">
+                    <Badge variant="blue">Info</Badge>
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+
+              <Input
+                type="search"
+                placeholder="Search logs..."
+                value={search}
+                onChange={handleSearch}
+                className="inline-flex h-9 text-sm text-white placeholder-gray-400 w-full sm:w-auto"
+              />
+            </div>
+
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-9"
+              onClick={handleDownload}
+              disabled={filteredLogs.length === 0 || !data?.Name}
+            >
+              <DownloadIcon className="mr-2 h-4 w-4" />
+              Download logs
+            </Button>
+          </div>
+          <div
+            ref={scrollRef}
+            onScroll={handleScroll}
+            className="h-[720px] overflow-y-auto space-y-0 border p-4 bg-[#d4d4d4] dark:bg-[#050506] rounded custom-logs-scrollbar"
+          >
+            {filteredLogs.length > 0 ? (
+              filteredLogs.map((filteredLog: LogLine, index: number) => (
+                <TerminalLine
+                  key={index}
+                  log={filteredLog}
+                  searchTerm={search}
+                />
+              ))
+            ) : isLoading ? (
+              <div className="flex justify-center items-center h-full text-muted-foreground">
+                <Loader2 className="h-6 w-6 animate-spin" />
+              </div>
+            ) : (
+              <div className="flex justify-center items-center h-full text-muted-foreground">
+                No logs found
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

From ee622b1ba066d4595726886db2146ff31f110f69 Mon Sep 17 00:00:00 2001
From: 190km <botmiley@gmail.com>
Date: Thu, 12 Dec 2024 21:00:17 +0100
Subject: [PATCH 14/32] feat: added new logs styling in deployments views

---
 .../deployments/show-deployment.tsx           | 21 ++++++++++++----
 .../deployments/show-deployment-compose.tsx   | 25 ++++++++++++++-----
 2 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/apps/dokploy/components/dashboard/application/deployments/show-deployment.tsx b/apps/dokploy/components/dashboard/application/deployments/show-deployment.tsx
index 8c15e2cd..39bff46a 100644
--- a/apps/dokploy/components/dashboard/application/deployments/show-deployment.tsx
+++ b/apps/dokploy/components/dashboard/application/deployments/show-deployment.tsx
@@ -6,6 +6,8 @@ import {
 	DialogTitle,
 } from "@/components/ui/dialog";
 import { useEffect, useRef, useState } from "react";
+import { TerminalLine } from "../../docker/logs/terminal-line";
+import { LogLine, parseLogs } from "../../docker/logs/utils";
 
 interface Props {
 	logPath: string | null;
@@ -15,6 +17,7 @@ interface Props {
 }
 export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
 	const [data, setData] = useState("");
+	const [filteredLogs, setFilteredLogs] = useState<LogLine[]>([]);
 	const endOfLogsRef = useRef<HTMLDivElement>(null);
 	const wsRef = useRef<WebSocket | null>(null); // Ref to hold WebSocket instance
 
@@ -52,6 +55,11 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
 		endOfLogsRef.current?.scrollIntoView({ behavior: "smooth" });
 	};
 
+	useEffect(() => {
+		const logs = parseLogs(data);
+		setFilteredLogs(logs);
+	}, [data]);
+
 	useEffect(() => {
 		scrollToBottom();
 	}, [data]);
@@ -81,12 +89,15 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
 				</DialogHeader>
 
 				<div className="text-wrap rounded-lg border p-4 text-sm sm:max-w-[59rem]">
-					<code>
-						<pre className="whitespace-pre-wrap break-words">
-							{data || "Loading..."}
-						</pre>
+					<div>
+							{filteredLogs.map((log: LogLine, index: number) => (
+								<TerminalLine
+									key={index}
+									log={log}
+								/>
+							)) || "Loading..."}
 						<div ref={endOfLogsRef} />
-					</code>
+					</div>
 				</div>
 			</DialogContent>
 		</Dialog>
diff --git a/apps/dokploy/components/dashboard/compose/deployments/show-deployment-compose.tsx b/apps/dokploy/components/dashboard/compose/deployments/show-deployment-compose.tsx
index 14f3bcd7..4439a984 100644
--- a/apps/dokploy/components/dashboard/compose/deployments/show-deployment-compose.tsx
+++ b/apps/dokploy/components/dashboard/compose/deployments/show-deployment-compose.tsx
@@ -6,6 +6,8 @@ import {
 	DialogTitle,
 } from "@/components/ui/dialog";
 import { useEffect, useRef, useState } from "react";
+import { TerminalLine } from "../../docker/logs/terminal-line";
+import { LogLine, parseLogs } from "../../docker/logs/utils";
 
 interface Props {
 	logPath: string | null;
@@ -21,8 +23,8 @@ export const ShowDeploymentCompose = ({
 }: Props) => {
 	const [data, setData] = useState("");
 	const endOfLogsRef = useRef<HTMLDivElement>(null);
+	const [filteredLogs, setFilteredLogs] = useState<LogLine[]>([]);
 	const wsRef = useRef<WebSocket | null>(null); // Ref to hold WebSocket instance
-
 	useEffect(() => {
 		if (!open || !logPath) return;
 
@@ -58,6 +60,13 @@ export const ShowDeploymentCompose = ({
 		endOfLogsRef.current?.scrollIntoView({ behavior: "smooth" });
 	};
 
+	useEffect(() => {
+		const logs = parseLogs(data);
+		console.log(data);
+		console.log(logs);
+		setFilteredLogs(logs);
+	}, [data]);
+
 	useEffect(() => {
 		scrollToBottom();
 	}, [data]);
@@ -87,12 +96,16 @@ export const ShowDeploymentCompose = ({
 				</DialogHeader>
 
 				<div className="text-wrap rounded-lg border p-4 text-sm sm:max-w-[59rem]">
-					<code>
-						<pre className="whitespace-pre-wrap break-words">
-							{data || "Loading..."}
-						</pre>
+					<div>
+						
+					{filteredLogs.map((log: LogLine, index: number) => (
+								<TerminalLine
+									key={index}
+									log={log}
+								/>
+							)) || "Loading..."}
 						<div ref={endOfLogsRef} />
-					</code>
+					</div>
 				</div>
 			</DialogContent>
 		</Dialog>

From 3bc1bd5b15d97015942f66609b7abf96053debff Mon Sep 17 00:00:00 2001
From: 190km <botmiley@gmail.com>
Date: Thu, 12 Dec 2024 21:10:19 +0100
Subject: [PATCH 15/32] feat: added more log success filter

---
 apps/dokploy/components/dashboard/docker/logs/utils.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/dokploy/components/dashboard/docker/logs/utils.ts b/apps/dokploy/components/dashboard/docker/logs/utils.ts
index 9f178d25..acae133e 100644
--- a/apps/dokploy/components/dashboard/docker/logs/utils.ts
+++ b/apps/dokploy/components/dashboard/docker/logs/utils.ts
@@ -88,7 +88,7 @@ export const getLogType = (message: string): LogStyle => {
 		/Error:\s.*(?:in|at)\s+.*:\d+(?::\d+)?/.test(lowerMessage) ||
 		/\b(?:errno|code):\s*(?:\d+|[A-Z_]+)\b/i.test(lowerMessage) ||
 		/\[(?:error|err|fatal)\]/i.test(lowerMessage) ||
-		/\b(?:crash|critical|fatal)\b/i.test(lowerMessage) ||
+		/\b(?:&ash|critical|fatal)\b/i.test(lowerMessage) ||
 		/\b(?:fail(?:ed|ure)?|broken|dead)\b/i.test(lowerMessage)
 	) {
 		return LOG_STYLES.error;
@@ -108,16 +108,16 @@ export const getLogType = (message: string): LogStyle => {
 	}
 
 	if (
-		/(?:successfully|complete[d]?)\s+(?:initialized|started|completed|done)/i.test(
+		/(?:successfully|complete[d]?)\s+(?:initialized|started|completed|created|done|deployed)/i.test(
 			lowerMessage,
 		) ||
 		/\[(?:success|ok|done)\]/i.test(lowerMessage) ||
 		/(?:listening|running)\s+(?:on|at)\s+(?:port\s+)?\d+/i.test(lowerMessage) ||
 		/(?:connected|established|ready)\s+(?:to|for|on)/i.test(lowerMessage) ||
 		/\b(?:loaded|mounted|initialized)\s+successfully\b/i.test(lowerMessage) ||
-		/✓|√|\[ok\]|done!/i.test(lowerMessage) ||
+		/✓|√|✅|\[ok\]|done!/i.test(lowerMessage) ||
 		/\b(?:success(?:ful)?|completed|ready)\b/i.test(lowerMessage) ||
-		/\b(?:started|running|active)\b/i.test(lowerMessage)
+		/\b(?:started|starting|active)\b/i.test(lowerMessage)
 	) {
 		return LOG_STYLES.success;
 	}

From cb487b8be05d6b4e458d2ffc863d1bc6e20c81f5 Mon Sep 17 00:00:00 2001
From: 190km <botmiley@gmail.com>
Date: Thu, 12 Dec 2024 21:53:10 +0100
Subject: [PATCH 16/32] feat: added debug log type & noTimestamp props for
 TerminalLine

---
 .../application/deployments/show-deployment.tsx |  1 +
 .../deployments/show-deployment-compose.tsx     |  1 +
 .../dashboard/docker/logs/docker-logs-id.tsx    |  7 +++++--
 .../dashboard/docker/logs/terminal-line.tsx     | 17 ++++++++++++-----
 .../components/dashboard/docker/logs/utils.ts   | 17 +++++++++++------
 5 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/apps/dokploy/components/dashboard/application/deployments/show-deployment.tsx b/apps/dokploy/components/dashboard/application/deployments/show-deployment.tsx
index 39bff46a..982a7ad6 100644
--- a/apps/dokploy/components/dashboard/application/deployments/show-deployment.tsx
+++ b/apps/dokploy/components/dashboard/application/deployments/show-deployment.tsx
@@ -94,6 +94,7 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
 								<TerminalLine
 									key={index}
 									log={log}
+									noTimestamp
 								/>
 							)) || "Loading..."}
 						<div ref={endOfLogsRef} />
diff --git a/apps/dokploy/components/dashboard/compose/deployments/show-deployment-compose.tsx b/apps/dokploy/components/dashboard/compose/deployments/show-deployment-compose.tsx
index 4439a984..eb03f128 100644
--- a/apps/dokploy/components/dashboard/compose/deployments/show-deployment-compose.tsx
+++ b/apps/dokploy/components/dashboard/compose/deployments/show-deployment-compose.tsx
@@ -102,6 +102,7 @@ export const ShowDeploymentCompose = ({
 								<TerminalLine
 									key={index}
 									log={log}
+									noTimestamp
 								/>
 							)) || "Loading..."}
 						<div ref={endOfLogsRef} />
diff --git a/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx b/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
index 6873ef9b..78304ab3 100644
--- a/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
+++ b/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
@@ -20,7 +20,7 @@ interface Props {
 }
 
 type TimeFilter = "all" | "1h" | "6h" | "24h" | "168h" | "720h";
-type TypeFilter = "all" | "error" | "warning" | "success" | "info";
+type TypeFilter = "all" | "error" | "warning" | "success" | "info" | "debug";
 
 export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
   const { data } = api.docker.getConfig.useQuery(
@@ -225,7 +225,10 @@ export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
                     <Badge variant="red">Error</Badge>
                   </SelectItem>
                   <SelectItem value="warning">
-                    <Badge variant="yellow">Warning</Badge>
+                    <Badge variant="orange">Warning</Badge>
+                  </SelectItem>
+				  <SelectItem value="warning">
+                    <Badge variant="yellow">Debug</Badge>
                   </SelectItem>
                   <SelectItem value="success">
                     <Badge variant="green">Success</Badge>
diff --git a/apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx b/apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx
index bc04b26d..5077988d 100644
--- a/apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx
+++ b/apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx
@@ -12,10 +12,11 @@ import { type LogLine, getLogType } from "./utils";
 
 interface LogLineProps {
 	log: LogLine;
+	noTimestamp?: boolean;
 	searchTerm?: string;
 }
 
-export function TerminalLine({ log, searchTerm }: LogLineProps) {
+export function TerminalLine({ log, noTimestamp, searchTerm }: LogLineProps) {
 	const { timestamp, message, rawTimestamp } = log;
 	const { type, variant, color } = getLogType(message);
 
@@ -72,7 +73,9 @@ export function TerminalLine({ log, searchTerm }: LogLineProps) {
 					? "bg-red-500/10 hover:bg-red-500/15"
 					: type === "warning"
 						? "bg-yellow-500/10 hover:bg-yellow-500/15"
-						: "hover:bg-gray-200/50 dark:hover:bg-gray-800/50",
+						: type === "debug"
+							? "bg-orange-500/10 hover:bg-orange-500/15"
+							: "hover:bg-gray-200/50 dark:hover:bg-gray-800/50",
 			)}
 		>
 			{" "}
@@ -80,9 +83,13 @@ export function TerminalLine({ log, searchTerm }: LogLineProps) {
 				{/* Icon to expand the log item maybe implement a colapsible later */}
 				{/* <Square className="size-4 text-muted-foreground opacity-0 group-hover/logitem:opacity-100 transition-opacity" /> */}
 				{tooltip(color, rawTimestamp)}
-				<span className="select-none pl-2 text-muted-foreground w-full sm:w-40 flex-shrink-0">
-					{formattedTime}
-				</span>
+				{!noTimestamp && (
+					<span className="select-none pl-2 text-muted-foreground w-full sm:w-40 flex-shrink-0">
+						{formattedTime}
+					</span>
+				)}
+
+        
 				<Badge
 					variant={variant}
 					className="w-14 justify-center text-[10px] px-1 py-0"
diff --git a/apps/dokploy/components/dashboard/docker/logs/utils.ts b/apps/dokploy/components/dashboard/docker/logs/utils.ts
index acae133e..e47f1358 100644
--- a/apps/dokploy/components/dashboard/docker/logs/utils.ts
+++ b/apps/dokploy/components/dashboard/docker/logs/utils.ts
@@ -1,5 +1,5 @@
-export type LogType = "error" | "warning" | "success" | "info";
-export type LogVariant = "red" | "yellow" | "green" | "blue";
+export type LogType = "error"  | "warning" | "success" | "info" | "debug";
+export type LogVariant = "red" | "yellow"  | "green"   | "blue" | "orange";
 
 export interface LogLine {
 	rawTimestamp: string | null;
@@ -21,6 +21,11 @@ const LOG_STYLES: Record<LogType, LogStyle> = {
 	},
 	warning: {
 		type: "warning",
+		variant: "orange",
+		color: "bg-orange-500/40",
+	},
+	debug: {
+		type: "debug",
 		variant: "yellow",
 		color: "bg-yellow-500/40",
 	},
@@ -88,7 +93,7 @@ export const getLogType = (message: string): LogStyle => {
 		/Error:\s.*(?:in|at)\s+.*:\d+(?::\d+)?/.test(lowerMessage) ||
 		/\b(?:errno|code):\s*(?:\d+|[A-Z_]+)\b/i.test(lowerMessage) ||
 		/\[(?:error|err|fatal)\]/i.test(lowerMessage) ||
-		/\b(?:&ash|critical|fatal)\b/i.test(lowerMessage) ||
+		/\b(?:crash|critical|fatal)\b/i.test(lowerMessage) ||
 		/\b(?:fail(?:ed|ure)?|broken|dead)\b/i.test(lowerMessage)
 	) {
 		return LOG_STYLES.error;
@@ -124,10 +129,10 @@ export const getLogType = (message: string): LogStyle => {
 
 	if (
 		/(?:^|\s)(?:info|inf):?\s/i.test(lowerMessage) ||
-		/\[(info|log|debug|trace|server|db|api)\]/i.test(lowerMessage) ||
-		/\b(?:version|config|start|import|load)\b:?/i.test(lowerMessage)
+		/\[(info|log|debug|trace|server|db|api|http|request|response)\]/i.test(lowerMessage) ||
+		/\b(?:version|config|import|load)\b:?/i.test(lowerMessage)
 	) {
-		return LOG_STYLES.info;
+		return LOG_STYLES.debug;
 	}
 
 	return LOG_STYLES.info;

From 37ee89e6abfddac4f92ff83e8af85984badc29c2 Mon Sep 17 00:00:00 2001
From: 190km <botmiley@gmail.com>
Date: Fri, 13 Dec 2024 00:53:58 +0100
Subject: [PATCH 17/32] fix: debug value in select

---
 .../dokploy/components/dashboard/docker/logs/docker-logs-id.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx b/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
index 78304ab3..aed2fe4c 100644
--- a/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
+++ b/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
@@ -227,7 +227,7 @@ export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
                   <SelectItem value="warning">
                     <Badge variant="orange">Warning</Badge>
                   </SelectItem>
-				  <SelectItem value="warning">
+		  <SelectItem value="debug">
                     <Badge variant="yellow">Debug</Badge>
                   </SelectItem>
                   <SelectItem value="success">

From 22a2e64563bdd5ca2e57765092f4e4dd7dcf10cd Mon Sep 17 00:00:00 2001
From: Nicholas Penree <nick@penree.com>
Date: Thu, 12 Dec 2024 22:59:03 -0500
Subject: [PATCH 18/32] feat(logs): tooltip improvements (break out, no delay)

---
 .../dashboard/docker/logs/terminal-line.tsx   | 34 +++++++++++--------
 apps/dokploy/components/ui/tooltip.tsx        | 10 +++++-
 2 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx b/apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx
index 5077988d..7024d253 100644
--- a/apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx
+++ b/apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx
@@ -2,6 +2,7 @@ import { Badge } from "@/components/ui/badge";
 import {
 	Tooltip,
 	TooltipContent,
+	TooltipPortal,
 	TooltipProvider,
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
@@ -46,22 +47,28 @@ export function TerminalLine({ log, noTimestamp, searchTerm }: LogLineProps) {
 		);
 	};
 
-	const tooltip = (color: string, timestamp: string | null) => {
-		return (
-			<TooltipProvider>
+	const tooltip = (color: string, timestamp: string) => {
+		const square = (
+			<div className={cn("w-2 h-full flex-shrink-0 rounded-[3px]", color)} />
+		);
+		return timestamp ? (
+			<TooltipProvider delayDuration={0} disableHoverableContent>
 				<Tooltip>
-					<TooltipTrigger asChild>
-						<div
-							className={cn("w-2 h-full flex-shrink-0 rounded-[3px]", color)}
-						/>
-					</TooltipTrigger>
-					<TooltipContent>
-						<p className="text text-xs text-muted-foreground break-all max-w-md">
-							{timestamp || "--- No time found ---"}
-						</p>
-					</TooltipContent>
+					<TooltipTrigger asChild>{square}</TooltipTrigger>
+					<TooltipPortal>
+						<TooltipContent
+							sideOffset={5}
+							className="bg-popover border-border z-[99999]"
+						>
+							<p className="text text-xs text-muted-foreground break-all max-w-md">
+								<pre>{timestamp}</pre>
+							</p>
+						</TooltipContent>
+					</TooltipPortal>
 				</Tooltip>
 			</TooltipProvider>
+		) : (
+			square
 		);
 	};
 
@@ -89,7 +96,6 @@ export function TerminalLine({ log, noTimestamp, searchTerm }: LogLineProps) {
 					</span>
 				)}
 
-        
 				<Badge
 					variant={variant}
 					className="w-14 justify-center text-[10px] px-1 py-0"
diff --git a/apps/dokploy/components/ui/tooltip.tsx b/apps/dokploy/components/ui/tooltip.tsx
index c533f855..f715fd31 100644
--- a/apps/dokploy/components/ui/tooltip.tsx
+++ b/apps/dokploy/components/ui/tooltip.tsx
@@ -9,6 +9,8 @@ const Tooltip = TooltipPrimitive.Root;
 
 const TooltipTrigger = TooltipPrimitive.Trigger;
 
+const TooltipPortal = TooltipPrimitive.Portal;
+
 const TooltipContent = React.forwardRef<
 	React.ElementRef<typeof TooltipPrimitive.Content>,
 	React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
@@ -25,4 +27,10 @@ const TooltipContent = React.forwardRef<
 ));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+export {
+	Tooltip,
+	TooltipTrigger,
+	TooltipContent,
+	TooltipProvider,
+	TooltipPortal,
+};

From 4311ba93f31843f319cfd1e57d04a93b55f08a5e Mon Sep 17 00:00:00 2001
From: Nicholas Penree <nick@penree.com>
Date: Fri, 13 Dec 2024 09:00:17 -0500
Subject: [PATCH 19/32] chore: lint/typecheck

---
 apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx b/apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx
index 7024d253..289165eb 100644
--- a/apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx
+++ b/apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx
@@ -47,7 +47,7 @@ export function TerminalLine({ log, noTimestamp, searchTerm }: LogLineProps) {
 		);
 	};
 
-	const tooltip = (color: string, timestamp: string) => {
+	const tooltip = (color: string, timestamp: string | null) => {
 		const square = (
 			<div className={cn("w-2 h-full flex-shrink-0 rounded-[3px]", color)} />
 		);

From e5d5a98bab575d3636d27504b8fa520feb7e93d8 Mon Sep 17 00:00:00 2001
From: Nicholas Penree <nick@penree.com>
Date: Fri, 13 Dec 2024 09:15:56 -0500
Subject: [PATCH 20/32] feat(logs): preserve whitespace in log line

---
 .../components/dashboard/docker/logs/terminal-line.tsx        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx b/apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx
index 289165eb..5aa374e6 100644
--- a/apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx
+++ b/apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx
@@ -103,9 +103,9 @@ export function TerminalLine({ log, noTimestamp, searchTerm }: LogLineProps) {
 					{type}
 				</Badge>
 			</div>
-			<span className="dark:text-gray-200 text-foreground ">
+			<pre className="dark:text-gray-200 font-mono text-foreground whitespace-pre">
 				{searchTerm ? highlightMessage(message, searchTerm) : message}
-			</span>
+			</pre>
 		</div>
 	);
 }

From 6773458da393d90d7121789f767e4b85eec9b40c Mon Sep 17 00:00:00 2001
From: 190km <botmiley@gmail.com>
Date: Fri, 13 Dec 2024 18:29:18 +0100
Subject: [PATCH 21/32] fix: text came out of the parent div

---
 .../components/dashboard/docker/logs/terminal-line.tsx        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx b/apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx
index 5aa374e6..96b51d4a 100644
--- a/apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx
+++ b/apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx
@@ -103,9 +103,9 @@ export function TerminalLine({ log, noTimestamp, searchTerm }: LogLineProps) {
 					{type}
 				</Badge>
 			</div>
-			<pre className="dark:text-gray-200 font-mono text-foreground whitespace-pre">
+			<span className="dark:text-gray-200 font-mono text-foreground whitespace-pre-wrap break-words">
 				{searchTerm ? highlightMessage(message, searchTerm) : message}
-			</pre>
+			</span>
 		</div>
 	);
 }

From 3df3d187e4ad3ecde7e870945f02454616a814cf Mon Sep 17 00:00:00 2001
From: usopp <botmiley@gmail.com>
Date: Fri, 13 Dec 2024 19:41:02 +0100
Subject: [PATCH 22/32] feat: added deployment loader & lines count

---
 .../deployments/show-deployment.tsx           | 24 +++++++++++------
 .../deployments/show-deployment-compose.tsx   | 26 +++++++++++++------
 2 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/apps/dokploy/components/dashboard/application/deployments/show-deployment.tsx b/apps/dokploy/components/dashboard/application/deployments/show-deployment.tsx
index 982a7ad6..2d4cbe66 100644
--- a/apps/dokploy/components/dashboard/application/deployments/show-deployment.tsx
+++ b/apps/dokploy/components/dashboard/application/deployments/show-deployment.tsx
@@ -8,6 +8,8 @@ import {
 import { useEffect, useRef, useState } from "react";
 import { TerminalLine } from "../../docker/logs/terminal-line";
 import { LogLine, parseLogs } from "../../docker/logs/utils";
+import { Badge } from "@/components/ui/badge";
+import { Loader2 } from "lucide-react";
 
 interface Props {
 	logPath: string | null;
@@ -84,19 +86,25 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
 				<DialogHeader>
 					<DialogTitle>Deployment</DialogTitle>
 					<DialogDescription>
-						See all the details of this deployment
+						See all the details of this deployment | <Badge variant="blank" className="text-xs">{filteredLogs.length} lines</Badge>
 					</DialogDescription>
 				</DialogHeader>
 
 				<div className="text-wrap rounded-lg border p-4 text-sm sm:max-w-[59rem]">
 					<div>
-							{filteredLogs.map((log: LogLine, index: number) => (
-								<TerminalLine
-									key={index}
-									log={log}
-									noTimestamp
-								/>
-							)) || "Loading..."}
+					{ 
+						filteredLogs.length > 0 ? filteredLogs.map((log: LogLine, index: number) => (
+							<TerminalLine
+								key={index}
+								log={log}
+								noTimestamp
+							/>
+						)) : 
+						(
+							<div className="flex justify-center items-center h-full text-muted-foreground">
+								<Loader2 className="h-6 w-6 animate-spin" />
+							</div>
+						)}
 						<div ref={endOfLogsRef} />
 					</div>
 				</div>
diff --git a/apps/dokploy/components/dashboard/compose/deployments/show-deployment-compose.tsx b/apps/dokploy/components/dashboard/compose/deployments/show-deployment-compose.tsx
index eb03f128..702394b6 100644
--- a/apps/dokploy/components/dashboard/compose/deployments/show-deployment-compose.tsx
+++ b/apps/dokploy/components/dashboard/compose/deployments/show-deployment-compose.tsx
@@ -8,6 +8,9 @@ import {
 import { useEffect, useRef, useState } from "react";
 import { TerminalLine } from "../../docker/logs/terminal-line";
 import { LogLine, parseLogs } from "../../docker/logs/utils";
+import { Badge } from "@/components/ui/badge";
+import { Loader2 } from "lucide-react";
+
 
 interface Props {
 	logPath: string | null;
@@ -91,20 +94,27 @@ export const ShowDeploymentCompose = ({
 				<DialogHeader>
 					<DialogTitle>Deployment</DialogTitle>
 					<DialogDescription>
-						See all the details of this deployment
+					See all the details of this deployment | <Badge variant="blank" className="text-xs">{filteredLogs.length} lines</Badge>
 					</DialogDescription>
 				</DialogHeader>
 
 				<div className="text-wrap rounded-lg border p-4 text-sm sm:max-w-[59rem]">
 					<div>
 						
-					{filteredLogs.map((log: LogLine, index: number) => (
-								<TerminalLine
-									key={index}
-									log={log}
-									noTimestamp
-								/>
-							)) || "Loading..."}
+					{ 
+						filteredLogs.length > 0 ? filteredLogs.map((log: LogLine, index: number) => (
+							<TerminalLine
+								key={index}
+								log={log}
+								noTimestamp
+							/>
+						)) : 
+						(
+						<div className="flex justify-center items-center h-full text-muted-foreground">
+							<Loader2 className="h-6 w-6 animate-spin" />
+						</div>
+						)
+					}
 						<div ref={endOfLogsRef} />
 					</div>
 				</div>

From c71d12fd0655a28d4a0b2b1710d03ef89d3c8a2c Mon Sep 17 00:00:00 2001
From: 190km <botmiley@gmail.com>
Date: Fri, 13 Dec 2024 20:21:00 +0100
Subject: [PATCH 23/32] feat: added info possibilities & debug more debug
 possibilities

---
 .../dokploy/components/dashboard/docker/logs/utils.ts | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/apps/dokploy/components/dashboard/docker/logs/utils.ts b/apps/dokploy/components/dashboard/docker/logs/utils.ts
index e47f1358..409c6989 100644
--- a/apps/dokploy/components/dashboard/docker/logs/utils.ts
+++ b/apps/dokploy/components/dashboard/docker/logs/utils.ts
@@ -84,6 +84,15 @@ export function parseLogs(logString: string): LogLine[] {
 export const getLogType = (message: string): LogStyle => {
 	const lowerMessage = message.toLowerCase();
 
+	if (
+		/(?:^|\s)(?:info|inf|information):?\s/i.test(lowerMessage) ||
+		/\[(?:info|information)\]/i.test(lowerMessage) ||
+		/\b(?:status|state|current|progress)\b:?\s/i.test(lowerMessage) ||
+		/\b(?:processing|executing|performing)\b/i.test(lowerMessage)
+	) {
+		return LOG_STYLES.info;
+	}
+
 	if (
 		/(?:^|\s)(?:error|err):?\s/i.test(lowerMessage) ||
 		/\b(?:exception|failed|failure)\b/i.test(lowerMessage) ||
@@ -130,7 +139,7 @@ export const getLogType = (message: string): LogStyle => {
 	if (
 		/(?:^|\s)(?:info|inf):?\s/i.test(lowerMessage) ||
 		/\[(info|log|debug|trace|server|db|api|http|request|response)\]/i.test(lowerMessage) ||
-		/\b(?:version|config|import|load)\b:?/i.test(lowerMessage)
+		/\b(?:version|config|import|load|get|HTTP|PATCH|POST|debug)\b:?/i.test(lowerMessage)
 	) {
 		return LOG_STYLES.debug;
 	}

From 7726fa6112d72c05cfd3709b9d5846c59314b257 Mon Sep 17 00:00:00 2001
From: 190km <botmiley@gmail.com>
Date: Fri, 13 Dec 2024 20:29:26 +0100
Subject: [PATCH 24/32] style: make selects responsive

---
 .../components/dashboard/docker/logs/docker-logs-id.tsx     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx b/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
index aed2fe4c..76b040aa 100644
--- a/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
+++ b/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
@@ -200,7 +200,7 @@ export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
               />
 
               <Select value={since} onValueChange={handleSince}>
-                <SelectTrigger className="w-[180px] h-9">
+                <SelectTrigger className="w-full sm:w-auto h-9">
                   <SelectValue placeholder="Time filter" />
                 </SelectTrigger>
                 <SelectContent>
@@ -214,7 +214,7 @@ export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
               </Select>
 
               <Select value={typeFilter} onValueChange={handleTypeFilter}>
-                <SelectTrigger className="w-[180px] h-9">
+                <SelectTrigger className="w-full sm:w-auto h-9">
                   <SelectValue placeholder="Type filter" />
                 </SelectTrigger>
                 <SelectContent>
@@ -227,7 +227,7 @@ export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
                   <SelectItem value="warning">
                     <Badge variant="orange">Warning</Badge>
                   </SelectItem>
-		  <SelectItem value="debug">
+		              <SelectItem value="debug">
                     <Badge variant="yellow">Debug</Badge>
                   </SelectItem>
                   <SelectItem value="success">

From 280be5c9dfe5941ab888b5004cbc1b453d372c65 Mon Sep 17 00:00:00 2001
From: 190km <botmiley@gmail.com>
Date: Fri, 13 Dec 2024 21:13:10 +0100
Subject: [PATCH 25/32] style: fixed select sizes

---
 .../components/dashboard/docker/logs/docker-logs-id.tsx       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx b/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
index 76b040aa..4d8b6c43 100644
--- a/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
+++ b/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
@@ -200,7 +200,7 @@ export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
               />
 
               <Select value={since} onValueChange={handleSince}>
-                <SelectTrigger className="w-full sm:w-auto h-9">
+                <SelectTrigger className="w-[180px] sm:w-auto h-9">
                   <SelectValue placeholder="Time filter" />
                 </SelectTrigger>
                 <SelectContent>
@@ -214,7 +214,7 @@ export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
               </Select>
 
               <Select value={typeFilter} onValueChange={handleTypeFilter}>
-                <SelectTrigger className="w-full sm:w-auto h-9">
+                <SelectTrigger className="w-[180px] sm:w-auto h-9">
                   <SelectValue placeholder="Type filter" />
                 </SelectTrigger>
                 <SelectContent>

From 138650d5610f013df2d2b78409ca87d4d5fe2f93 Mon Sep 17 00:00:00 2001
From: 190km <botmiley@gmail.com>
Date: Sat, 14 Dec 2024 01:30:36 +0100
Subject: [PATCH 26/32] feat: improved deployment view scroll & style

---
 .../deployments/show-deployment.tsx           | 38 ++++++++++++-----
 .../deployments/show-deployment-compose.tsx   | 42 +++++++++++++------
 2 files changed, 58 insertions(+), 22 deletions(-)

diff --git a/apps/dokploy/components/dashboard/application/deployments/show-deployment.tsx b/apps/dokploy/components/dashboard/application/deployments/show-deployment.tsx
index 2d4cbe66..96e32d8c 100644
--- a/apps/dokploy/components/dashboard/application/deployments/show-deployment.tsx
+++ b/apps/dokploy/components/dashboard/application/deployments/show-deployment.tsx
@@ -20,9 +20,25 @@ interface Props {
 export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
 	const [data, setData] = useState("");
 	const [filteredLogs, setFilteredLogs] = useState<LogLine[]>([]);
-	const endOfLogsRef = useRef<HTMLDivElement>(null);
 	const wsRef = useRef<WebSocket | null>(null); // Ref to hold WebSocket instance
+	const [autoScroll, setAutoScroll] = useState(true);
+	const scrollRef = useRef<HTMLDivElement>(null);
 
+
+	const scrollToBottom = () => {
+		if (autoScroll && scrollRef.current) {
+		  scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+		}
+	  };
+	
+	const handleScroll = () => {
+		if (!scrollRef.current) return;
+	
+		const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
+		const isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) < 10;
+		setAutoScroll(isAtBottom);
+	  };
+	
 	useEffect(() => {
 		if (!open || !logPath) return;
 
@@ -53,9 +69,6 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
 		};
 	}, [logPath, open]);
 
-	const scrollToBottom = () => {
-		endOfLogsRef.current?.scrollIntoView({ behavior: "smooth" });
-	};
 
 	useEffect(() => {
 		const logs = parseLogs(data);
@@ -64,7 +77,12 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
 
 	useEffect(() => {
 		scrollToBottom();
-	}, [data]);
+	
+		if (autoScroll && scrollRef.current) {
+		  scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+		}
+	  }, [filteredLogs, autoScroll]);
+
 
 	return (
 		<Dialog
@@ -90,9 +108,11 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
 					</DialogDescription>
 				</DialogHeader>
 
-				<div className="text-wrap rounded-lg border p-4 text-sm sm:max-w-[59rem]">
-					<div>
-					{ 
+				<div 
+					ref={scrollRef}
+					onScroll={handleScroll}
+					className="h-[720px] overflow-y-auto space-y-0 border p-4 bg-[#d4d4d4] dark:bg-[#050506] rounded custom-logs-scrollbar"
+				>					{ 
 						filteredLogs.length > 0 ? filteredLogs.map((log: LogLine, index: number) => (
 							<TerminalLine
 								key={index}
@@ -105,8 +125,6 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
 								<Loader2 className="h-6 w-6 animate-spin" />
 							</div>
 						)}
-						<div ref={endOfLogsRef} />
-					</div>
 				</div>
 			</DialogContent>
 		</Dialog>
diff --git a/apps/dokploy/components/dashboard/compose/deployments/show-deployment-compose.tsx b/apps/dokploy/components/dashboard/compose/deployments/show-deployment-compose.tsx
index 702394b6..c8746b71 100644
--- a/apps/dokploy/components/dashboard/compose/deployments/show-deployment-compose.tsx
+++ b/apps/dokploy/components/dashboard/compose/deployments/show-deployment-compose.tsx
@@ -25,9 +25,26 @@ export const ShowDeploymentCompose = ({
 	serverId,
 }: Props) => {
 	const [data, setData] = useState("");
-	const endOfLogsRef = useRef<HTMLDivElement>(null);
 	const [filteredLogs, setFilteredLogs] = useState<LogLine[]>([]);
 	const wsRef = useRef<WebSocket | null>(null); // Ref to hold WebSocket instance
+	const [autoScroll, setAutoScroll] = useState(true);
+	const scrollRef = useRef<HTMLDivElement>(null);
+
+	const scrollToBottom = () => {
+		if (autoScroll && scrollRef.current) {
+		  scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+		}
+	  };
+	
+	const handleScroll = () => {
+		if (!scrollRef.current) return;
+	
+		const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
+		const isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) < 10;
+		setAutoScroll(isAtBottom);
+	  };
+	
+	
 	useEffect(() => {
 		if (!open || !logPath) return;
 
@@ -59,20 +76,19 @@ export const ShowDeploymentCompose = ({
 		};
 	}, [logPath, open]);
 
-	const scrollToBottom = () => {
-		endOfLogsRef.current?.scrollIntoView({ behavior: "smooth" });
-	};
 
 	useEffect(() => {
 		const logs = parseLogs(data);
-		console.log(data);
-		console.log(logs);
 		setFilteredLogs(logs);
 	}, [data]);
 
 	useEffect(() => {
 		scrollToBottom();
-	}, [data]);
+	
+		if (autoScroll && scrollRef.current) {
+		  scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+		}
+	  }, [filteredLogs, autoScroll]);
 
 	return (
 		<Dialog
@@ -90,7 +106,7 @@ export const ShowDeploymentCompose = ({
 				}
 			}}
 		>
-			<DialogContent className={"sm:max-w-5xl overflow-y-auto max-h-screen"}>
+			<DialogContent className={"sm:max-w-5xl max-h-screen"}>
 				<DialogHeader>
 					<DialogTitle>Deployment</DialogTitle>
 					<DialogDescription>
@@ -98,8 +114,12 @@ export const ShowDeploymentCompose = ({
 					</DialogDescription>
 				</DialogHeader>
 
-				<div className="text-wrap rounded-lg border p-4 text-sm sm:max-w-[59rem]">
-					<div>
+				<div 
+					ref={scrollRef}
+					onScroll={handleScroll}
+					className="h-[720px] overflow-y-auto space-y-0 border p-4 bg-[#d4d4d4] dark:bg-[#050506] rounded custom-logs-scrollbar"
+				>
+						
 						
 					{ 
 						filteredLogs.length > 0 ? filteredLogs.map((log: LogLine, index: number) => (
@@ -115,8 +135,6 @@ export const ShowDeploymentCompose = ({
 						</div>
 						)
 					}
-						<div ref={endOfLogsRef} />
-					</div>
 				</div>
 			</DialogContent>
 		</Dialog>

From a9c62b47ef39c0ea7f18896f2a06ac4f2bbd3933 Mon Sep 17 00:00:00 2001
From: 190km <botmiley@gmail.com>
Date: Sat, 14 Dec 2024 02:58:21 +0100
Subject: [PATCH 27/32] style: selects wididth

---
 .../components/dashboard/docker/logs/docker-logs-id.tsx       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx b/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
index 4d8b6c43..afe18f40 100644
--- a/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
+++ b/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
@@ -200,7 +200,7 @@ export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
               />
 
               <Select value={since} onValueChange={handleSince}>
-                <SelectTrigger className="w-[180px] sm:w-auto h-9">
+                <SelectTrigger className="sm:w-[180px] w-full h-9">
                   <SelectValue placeholder="Time filter" />
                 </SelectTrigger>
                 <SelectContent>
@@ -214,7 +214,7 @@ export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
               </Select>
 
               <Select value={typeFilter} onValueChange={handleTypeFilter}>
-                <SelectTrigger className="w-[180px] sm:w-auto h-9">
+                <SelectTrigger className="sm:w-[180px] w-full h-9">
                   <SelectValue placeholder="Type filter" />
                 </SelectTrigger>
                 <SelectContent>

From 06448423057cd9beba350503f3a6ecd6400d59cb Mon Sep 17 00:00:00 2001
From: 190km <botmiley@gmail.com>
Date: Sat, 14 Dec 2024 02:58:21 +0100
Subject: [PATCH 28/32] style: selects width

---
 .../components/dashboard/docker/logs/docker-logs-id.tsx       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx b/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
index 4d8b6c43..afe18f40 100644
--- a/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
+++ b/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
@@ -200,7 +200,7 @@ export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
               />
 
               <Select value={since} onValueChange={handleSince}>
-                <SelectTrigger className="w-[180px] sm:w-auto h-9">
+                <SelectTrigger className="sm:w-[180px] w-full h-9">
                   <SelectValue placeholder="Time filter" />
                 </SelectTrigger>
                 <SelectContent>
@@ -214,7 +214,7 @@ export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
               </Select>
 
               <Select value={typeFilter} onValueChange={handleTypeFilter}>
-                <SelectTrigger className="w-[180px] sm:w-auto h-9">
+                <SelectTrigger className="sm:w-[180px] w-full h-9">
                   <SelectValue placeholder="Type filter" />
                 </SelectTrigger>
                 <SelectContent>

From 115ed7e7bfb4d646bfeadfd419720fff832992e4 Mon Sep 17 00:00:00 2001
From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
Date: Sat, 14 Dec 2024 01:17:13 -0600
Subject: [PATCH 29/32] refactor: remove is loading false

---
 .../dashboard/docker/logs/docker-logs-id.tsx  | 578 +++++++++---------
 1 file changed, 289 insertions(+), 289 deletions(-)

diff --git a/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx b/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
index afe18f40..e5eb7182 100644
--- a/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
+++ b/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
@@ -1,289 +1,289 @@
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { api } from "@/utils/api";
-import { Download as DownloadIcon, Loader2 } from "lucide-react";
-import React, { useEffect, useRef } from "react";
-import { TerminalLine } from "./terminal-line";
-import { type LogLine, getLogType, parseLogs } from "./utils";
-
-interface Props {
-  containerId: string;
-  serverId?: string | null;
-}
-
-type TimeFilter = "all" | "1h" | "6h" | "24h" | "168h" | "720h";
-type TypeFilter = "all" | "error" | "warning" | "success" | "info" | "debug";
-
-export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
-  const { data } = api.docker.getConfig.useQuery(
-    {
-      containerId,
-      serverId: serverId ?? undefined,
-    },
-    {
-      enabled: !!containerId,
-    }
-  );
-
-  const [rawLogs, setRawLogs] = React.useState("");
-  const [filteredLogs, setFilteredLogs] = React.useState<LogLine[]>([]);
-  const [autoScroll, setAutoScroll] = React.useState(true);
-  const [lines, setLines] = React.useState<number>(100);
-  const [search, setSearch] = React.useState<string>("");
-  const [since, setSince] = React.useState<TimeFilter>("all");
-  const [typeFilter, setTypeFilter] = React.useState<TypeFilter>("all");
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const [isLoading, setIsLoading] = React.useState(false);
-
-  const scrollToBottom = () => {
-    if (autoScroll && scrollRef.current) {
-      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
-    }
-  };
-
-  const handleScroll = () => {
-    if (!scrollRef.current) return;
-
-    const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
-    const isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) < 10;
-    setAutoScroll(isAtBottom);
-  };
-
-  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setRawLogs("");
-    setFilteredLogs([]);
-    setSearch(e.target.value || "");
-  };
-
-  const handleLines = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setRawLogs("");
-    setFilteredLogs([]);
-    setLines(Number(e.target.value) || 1);
-  };
-
-  const handleSince = (value: TimeFilter) => {
-    setRawLogs("");
-    setFilteredLogs([]);
-    setSince(value);
-  };
-
-  const handleTypeFilter = (value: TypeFilter) => {
-    setTypeFilter(value);
-  };
-
-  useEffect(() => {
-    setRawLogs("");
-    setFilteredLogs([]);
-  }, [containerId]);
-
-  useEffect(() => {
-    if (!containerId) return;
-    setIsLoading(true);
-
-    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
-    const params = new globalThis.URLSearchParams({
-      containerId,
-      tail: lines.toString(),
-      since,
-      search,
-    });
-
-    if (serverId) {
-      params.append("serverId", serverId);
-    }
-
-    const wsUrl = `${protocol}//${
-      window.location.host
-    }/docker-container-logs?${params.toString()}`;
-    console.log("Connecting to WebSocket:", wsUrl);
-    const ws = new WebSocket(wsUrl);
-
-    ws.onopen = () => {
-      console.log("WebSocket connected");
-	  setIsLoading(false)
-    };
-
-    ws.onmessage = (e) => {
-      setRawLogs((prev) => prev + e.data);
-      setIsLoading(false);
-    };
-
-    ws.onerror = (error) => {
-      console.error("WebSocket error:", error);
-      setIsLoading(false);
-    };
-
-    ws.onclose = (e) => {
-      console.log("WebSocket closed:", e.reason);
-      setIsLoading(false);
-    };
-
-    return () => {
-      if (ws.readyState === WebSocket.OPEN) {
-        ws.close();
-      }
-    };
-  }, [containerId, serverId, lines, search, since]);
-
-  const handleDownload = () => {
-    const logContent = filteredLogs
-      .map(
-        ({ timestamp, message }: { timestamp: Date | null; message: string }) =>
-          `${timestamp?.toISOString() || "No timestamp"} ${message}`
-      )
-      .join("\n");
-
-    const blob = new Blob([logContent], { type: "text/plain" });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    const appName = data.Name.replace("/", "") || "app";
-    const isoDate = new Date().toISOString();
-    a.href = url;
-    a.download = `${appName}-${isoDate.slice(0, 10).replace(/-/g, "")}_${isoDate
-      .slice(11, 19)
-      .replace(/:/g, "")}.log.txt`;
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-    URL.revokeObjectURL(url);
-  };
-
-  const handleFilter = (logs: LogLine[]) => {
-    return logs.filter((log) => {
-      const logType = getLogType(log.message).type;
-
-      const matchesType = typeFilter === "all" || logType === typeFilter;
-
-      return matchesType;
-    });
-  };
-
-  useEffect(() => {
-    setRawLogs("");
-    setFilteredLogs([]);
-  }, [containerId]);
-
-  useEffect(() => {
-    const logs = parseLogs(rawLogs);
-    const filtered = handleFilter(logs);
-    setFilteredLogs(filtered);
-  }, [rawLogs, search, lines, since, typeFilter]);
-
-  useEffect(() => {
-    scrollToBottom();
-
-    if (autoScroll && scrollRef.current) {
-      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
-    }
-  }, [filteredLogs, autoScroll]);
-
-  return (
-    <div className="flex flex-col gap-4">
-      <div className="shadow-md rounded-lg overflow-hidden">
-        <div className="space-y-4">
-          <div className="flex flex-wrap justify-between items-start sm:items-center gap-4">
-            <div className="flex flex-wrap gap-4">
-              <Input
-                type="text"
-                placeholder="Number of lines to show"
-                value={lines}
-                onChange={handleLines}
-                className="inline-flex h-9 text-sm text-white placeholder-gray-400 w-full sm:w-auto"
-              />
-
-              <Select value={since} onValueChange={handleSince}>
-                <SelectTrigger className="sm:w-[180px] w-full h-9">
-                  <SelectValue placeholder="Time filter" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="1h">Last hour</SelectItem>
-                  <SelectItem value="6h">Last 6 hours</SelectItem>
-                  <SelectItem value="24h">Last 24 hours</SelectItem>
-                  <SelectItem value="168h">Last 7 days</SelectItem>
-                  <SelectItem value="720h">Last 30 days</SelectItem>
-                  <SelectItem value="all">All time</SelectItem>
-                </SelectContent>
-              </Select>
-
-              <Select value={typeFilter} onValueChange={handleTypeFilter}>
-                <SelectTrigger className="sm:w-[180px] w-full h-9">
-                  <SelectValue placeholder="Type filter" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="all">
-                    <Badge variant="blank">All</Badge>
-                  </SelectItem>
-                  <SelectItem value="error">
-                    <Badge variant="red">Error</Badge>
-                  </SelectItem>
-                  <SelectItem value="warning">
-                    <Badge variant="orange">Warning</Badge>
-                  </SelectItem>
-		              <SelectItem value="debug">
-                    <Badge variant="yellow">Debug</Badge>
-                  </SelectItem>
-                  <SelectItem value="success">
-                    <Badge variant="green">Success</Badge>
-                  </SelectItem>
-                  <SelectItem value="info">
-                    <Badge variant="blue">Info</Badge>
-                  </SelectItem>
-                </SelectContent>
-              </Select>
-
-              <Input
-                type="search"
-                placeholder="Search logs..."
-                value={search}
-                onChange={handleSearch}
-                className="inline-flex h-9 text-sm text-white placeholder-gray-400 w-full sm:w-auto"
-              />
-            </div>
-
-            <Button
-              variant="outline"
-              size="sm"
-              className="h-9"
-              onClick={handleDownload}
-              disabled={filteredLogs.length === 0 || !data?.Name}
-            >
-              <DownloadIcon className="mr-2 h-4 w-4" />
-              Download logs
-            </Button>
-          </div>
-          <div
-            ref={scrollRef}
-            onScroll={handleScroll}
-            className="h-[720px] overflow-y-auto space-y-0 border p-4 bg-[#d4d4d4] dark:bg-[#050506] rounded custom-logs-scrollbar"
-          >
-            {filteredLogs.length > 0 ? (
-              filteredLogs.map((filteredLog: LogLine, index: number) => (
-                <TerminalLine
-                  key={index}
-                  log={filteredLog}
-                  searchTerm={search}
-                />
-              ))
-            ) : isLoading ? (
-              <div className="flex justify-center items-center h-full text-muted-foreground">
-                <Loader2 className="h-6 w-6 animate-spin" />
-              </div>
-            ) : (
-              <div className="flex justify-center items-center h-full text-muted-foreground">
-                No logs found
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { api } from "@/utils/api";
+import { Download as DownloadIcon, Loader2 } from "lucide-react";
+import React, { useEffect, useRef } from "react";
+import { TerminalLine } from "./terminal-line";
+import { type LogLine, getLogType, parseLogs } from "./utils";
+
+interface Props {
+  containerId: string;
+  serverId?: string | null;
+}
+
+type TimeFilter = "all" | "1h" | "6h" | "24h" | "168h" | "720h";
+type TypeFilter = "all" | "error" | "warning" | "success" | "info" | "debug";
+
+export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
+  const { data } = api.docker.getConfig.useQuery(
+    {
+      containerId,
+      serverId: serverId ?? undefined,
+    },
+    {
+      enabled: !!containerId,
+    }
+  );
+
+  const [rawLogs, setRawLogs] = React.useState("");
+  const [filteredLogs, setFilteredLogs] = React.useState<LogLine[]>([]);
+  const [autoScroll, setAutoScroll] = React.useState(true);
+  const [lines, setLines] = React.useState<number>(100);
+  const [search, setSearch] = React.useState<string>("");
+
+  const [since, setSince] = React.useState<TimeFilter>("all");
+  const [typeFilter, setTypeFilter] = React.useState<TypeFilter>("all");
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [isLoading, setIsLoading] = React.useState(false);
+
+  const scrollToBottom = () => {
+    if (autoScroll && scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  };
+
+  const handleScroll = () => {
+    if (!scrollRef.current) return;
+
+    const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
+    const isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) < 10;
+    setAutoScroll(isAtBottom);
+  };
+
+  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setRawLogs("");
+    setFilteredLogs([]);
+    setSearch(e.target.value || "");
+  };
+
+  const handleLines = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setRawLogs("");
+    setFilteredLogs([]);
+    setLines(Number(e.target.value) || 1);
+  };
+
+  const handleSince = (value: TimeFilter) => {
+    setRawLogs("");
+    setFilteredLogs([]);
+    setSince(value);
+  };
+
+  const handleTypeFilter = (value: TypeFilter) => {
+    setTypeFilter(value);
+  };
+
+  useEffect(() => {
+    setRawLogs("");
+    setFilteredLogs([]);
+  }, [containerId]);
+
+  useEffect(() => {
+    if (!containerId) return;
+    setIsLoading(true);
+
+    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+    const params = new globalThis.URLSearchParams({
+      containerId,
+      tail: lines.toString(),
+      since,
+      search,
+    });
+
+    if (serverId) {
+      params.append("serverId", serverId);
+    }
+
+    const wsUrl = `${protocol}//${
+      window.location.host
+    }/docker-container-logs?${params.toString()}`;
+    console.log("Connecting to WebSocket:", wsUrl);
+    const ws = new WebSocket(wsUrl);
+
+    ws.onopen = () => {
+      console.log("WebSocket connected");
+    };
+
+    ws.onmessage = (e) => {
+      setRawLogs((prev) => prev + e.data);
+      setIsLoading(false);
+    };
+
+    ws.onerror = (error) => {
+      console.error("WebSocket error:", error);
+      setIsLoading(false);
+    };
+
+    ws.onclose = (e) => {
+      console.log("WebSocket closed:", e.reason);
+      setIsLoading(false);
+    };
+
+    return () => {
+      if (ws.readyState === WebSocket.OPEN) {
+        ws.close();
+      }
+    };
+  }, [containerId, serverId, lines, search, since]);
+
+  const handleDownload = () => {
+    const logContent = filteredLogs
+      .map(
+        ({ timestamp, message }: { timestamp: Date | null; message: string }) =>
+          `${timestamp?.toISOString() || "No timestamp"} ${message}`
+      )
+      .join("\n");
+
+    const blob = new Blob([logContent], { type: "text/plain" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    const appName = data.Name.replace("/", "") || "app";
+    const isoDate = new Date().toISOString();
+    a.href = url;
+    a.download = `${appName}-${isoDate.slice(0, 10).replace(/-/g, "")}_${isoDate
+      .slice(11, 19)
+      .replace(/:/g, "")}.log.txt`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  const handleFilter = (logs: LogLine[]) => {
+    return logs.filter((log) => {
+      const logType = getLogType(log.message).type;
+
+      const matchesType = typeFilter === "all" || logType === typeFilter;
+
+      return matchesType;
+    });
+  };
+
+  useEffect(() => {
+    setRawLogs("");
+    setFilteredLogs([]);
+  }, [containerId]);
+
+  useEffect(() => {
+    const logs = parseLogs(rawLogs);
+    const filtered = handleFilter(logs);
+    setFilteredLogs(filtered);
+  }, [rawLogs, search, lines, since, typeFilter]);
+
+  useEffect(() => {
+    scrollToBottom();
+
+    if (autoScroll && scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [filteredLogs, autoScroll]);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="shadow-md rounded-lg overflow-hidden">
+        <div className="space-y-4">
+          <div className="flex flex-wrap justify-between items-start sm:items-center gap-4">
+            <div className="flex flex-wrap gap-4">
+              <Input
+                type="text"
+                placeholder="Number of lines to show"
+                value={lines}
+                onChange={handleLines}
+                className="inline-flex h-9 text-sm text-white placeholder-gray-400 w-full sm:w-auto"
+              />
+
+              <Select value={since} onValueChange={handleSince}>
+                <SelectTrigger className="sm:w-[180px] w-full h-9">
+                  <SelectValue placeholder="Time filter" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="1h">Last hour</SelectItem>
+                  <SelectItem value="6h">Last 6 hours</SelectItem>
+                  <SelectItem value="24h">Last 24 hours</SelectItem>
+                  <SelectItem value="168h">Last 7 days</SelectItem>
+                  <SelectItem value="720h">Last 30 days</SelectItem>
+                  <SelectItem value="all">All time</SelectItem>
+                </SelectContent>
+              </Select>
+
+              <Select value={typeFilter} onValueChange={handleTypeFilter}>
+                <SelectTrigger className="sm:w-[180px] w-full h-9">
+                  <SelectValue placeholder="Type filter" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">
+                    <Badge variant="blank">All</Badge>
+                  </SelectItem>
+                  <SelectItem value="error">
+                    <Badge variant="red">Error</Badge>
+                  </SelectItem>
+                  <SelectItem value="warning">
+                    <Badge variant="orange">Warning</Badge>
+                  </SelectItem>
+                  <SelectItem value="debug">
+                    <Badge variant="yellow">Debug</Badge>
+                  </SelectItem>
+                  <SelectItem value="success">
+                    <Badge variant="green">Success</Badge>
+                  </SelectItem>
+                  <SelectItem value="info">
+                    <Badge variant="blue">Info</Badge>
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+
+              <Input
+                type="search"
+                placeholder="Search logs..."
+                value={search}
+                onChange={handleSearch}
+                className="inline-flex h-9 text-sm text-white placeholder-gray-400 w-full sm:w-auto"
+              />
+            </div>
+
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-9"
+              onClick={handleDownload}
+              disabled={filteredLogs.length === 0 || !data?.Name}
+            >
+              <DownloadIcon className="mr-2 h-4 w-4" />
+              Download logs
+            </Button>
+          </div>
+          <div
+            ref={scrollRef}
+            onScroll={handleScroll}
+            className="h-[720px] overflow-y-auto space-y-0 border p-4 bg-[#d4d4d4] dark:bg-[#050506] rounded custom-logs-scrollbar"
+          >
+            {filteredLogs.length > 0 ? (
+              filteredLogs.map((filteredLog: LogLine, index: number) => (
+                <TerminalLine
+                  key={index}
+                  log={filteredLog}
+                  searchTerm={search}
+                />
+              ))
+            ) : isLoading ? (
+              <div className="flex justify-center items-center h-full text-muted-foreground">
+                <Loader2 className="h-6 w-6 animate-spin" />
+              </div>
+            ) : (
+              <div className="flex justify-center items-center h-full text-muted-foreground">
+                No logs found
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

From 1157e08aa101ef9832ffd2601fd708b391f21378 Mon Sep 17 00:00:00 2001
From: 190km <botmiley@gmail.com>
Date: Sun, 15 Dec 2024 04:21:38 +0100
Subject: [PATCH 30/32] fix: log line came out of the div

---
 apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx b/apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx
index 96b51d4a..cdbbb2c8 100644
--- a/apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx
+++ b/apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx
@@ -103,7 +103,7 @@ export function TerminalLine({ log, noTimestamp, searchTerm }: LogLineProps) {
 					{type}
 				</Badge>
 			</div>
-			<span className="dark:text-gray-200 font-mono text-foreground whitespace-pre-wrap break-words">
+			<span className="dark:text-gray-200 font-mono text-foreground whitespace-pre-wrap break-all">
 				{searchTerm ? highlightMessage(message, searchTerm) : message}
 			</span>
 		</div>

From c2fe1eed0135e3c31da929c39afde938023c298f Mon Sep 17 00:00:00 2001
From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
Date: Sun, 15 Dec 2024 19:18:41 -0600
Subject: [PATCH 31/32] fix: remote server search add long buffering

---
 .../dashboard/docker/logs/docker-logs-id.tsx  | 19 ++++++++++++-------
 .../server/wss/docker-container-logs.ts       | 15 +++++++++++++--
 2 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx b/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
index 60f567d7..d05b481e 100644
--- a/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
+++ b/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
@@ -59,8 +59,6 @@ export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
   };
 
   const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setRawLogs("");
-    setFilteredLogs([]);
     setSearch(e.target.value || "");
   };
 
@@ -81,13 +79,12 @@ export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
   };
 
   useEffect(() => {
+    if (!containerId) return;
+    
+    let isCurrentConnection = true;
+    setIsLoading(true);
     setRawLogs("");
     setFilteredLogs([]);
-  }, [containerId]);
-
-  useEffect(() => {
-    if (!containerId) return;
-    setIsLoading(true);
 
     const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
     const params = new globalThis.URLSearchParams({
@@ -108,25 +105,33 @@ export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
     const ws = new WebSocket(wsUrl);
 
     ws.onopen = () => {
+      if (!isCurrentConnection) {
+        ws.close();
+        return;
+      }
       console.log("WebSocket connected");
     };
 
     ws.onmessage = (e) => {
+      if (!isCurrentConnection) return;
       setRawLogs((prev) => prev + e.data);
       setIsLoading(false);
     };
 
     ws.onerror = (error) => {
+      if (!isCurrentConnection) return;
       console.error("WebSocket error:", error);
       setIsLoading(false);
     };
 
     ws.onclose = (e) => {
+      if (!isCurrentConnection) return;
       console.log("WebSocket closed:", e.reason);
       setIsLoading(false);
     };
 
     return () => {
+      isCurrentConnection = false;
       if (ws.readyState === WebSocket.OPEN) {
         ws.close();
       }
diff --git a/apps/dokploy/server/wss/docker-container-logs.ts b/apps/dokploy/server/wss/docker-container-logs.ts
index 1b28c11b..3df09ce0 100644
--- a/apps/dokploy/server/wss/docker-container-logs.ts
+++ b/apps/dokploy/server/wss/docker-container-logs.ts
@@ -56,9 +56,11 @@ export const setupDockerContainerLogsWebSocketServer = (
 						const baseCommand = `docker container logs --timestamps --tail ${tail} ${
 							since === "all" ? "" : `--since ${since}`
 						} --follow ${containerId}`;
+						const escapedSearch = search ? search.replace(/'/g, "'\\''") : "";
 						const command = search
-							? `${baseCommand} 2>&1 | grep -iF '${search}'`
+							? `${baseCommand} 2>&1 | grep --line-buffered -iF "${escapedSearch}"`
 							: baseCommand;
+						console.log("Executing SSH command:", command);
 						client.exec(command, (err, stream) => {
 							if (err) {
 								console.error("Execution error:", err);
@@ -66,15 +68,24 @@ export const setupDockerContainerLogsWebSocketServer = (
 								client.end();
 								return;
 							}
+
+							let dataReceived = false;
+
 							stream
 								.on("close", () => {
+									console.log("Stream closed, dataReceived:", dataReceived);
+									if (!dataReceived) {
+										ws.send("No matching logs found");
+									}
 									client.end();
 									ws.close();
 								})
 								.on("data", (data: string) => {
+									dataReceived = true;
 									ws.send(data.toString());
 								})
 								.stderr.on("data", (data) => {
+									console.error("Stream stderr:", data.toString());
 									ws.send(data.toString());
 								});
 						});
@@ -100,7 +111,7 @@ export const setupDockerContainerLogsWebSocketServer = (
 					since === "all" ? "" : `--since ${since}`
 				} --follow ${containerId}`;
 				const command = search
-					? `${baseCommand} 2>&1 | grep -iF '${search}'`
+					? `${baseCommand} 2>&1 | grep --line-buffered -iF '${search}'`
 					: baseCommand;
 				const ptyProcess = spawn(shell, ["-c", command], {
 					name: "xterm-256color",

From e6c242a06487c9d35cf8471b9153baa76e3a3d23 Mon Sep 17 00:00:00 2001
From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
Date: Sun, 15 Dec 2024 19:24:50 -0600
Subject: [PATCH 32/32] refactor: set logs no found when the search is empty

---
 .../dashboard/docker/logs/docker-logs-id.tsx      | 15 +++++++++++++++
 apps/dokploy/server/wss/docker-container-logs.ts  | 12 +-----------
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx b/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
index d05b481e..db1c774b 100644
--- a/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
+++ b/apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx
@@ -82,6 +82,7 @@ export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
     if (!containerId) return;
     
     let isCurrentConnection = true;
+    let noDataTimeout: NodeJS.Timeout;
     setIsLoading(true);
     setRawLogs("");
     setFilteredLogs([]);
@@ -104,34 +105,48 @@ export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
     console.log("Connecting to WebSocket:", wsUrl);
     const ws = new WebSocket(wsUrl);
 
+    const resetNoDataTimeout = () => {
+      if (noDataTimeout) clearTimeout(noDataTimeout);
+      noDataTimeout = setTimeout(() => {
+        if (isCurrentConnection) {
+          setIsLoading(false);
+        }
+      }, 2000); // Wait 2 seconds for data before showing "No logs found"
+    };
+
     ws.onopen = () => {
       if (!isCurrentConnection) {
         ws.close();
         return;
       }
       console.log("WebSocket connected");
+      resetNoDataTimeout();
     };
 
     ws.onmessage = (e) => {
       if (!isCurrentConnection) return;
       setRawLogs((prev) => prev + e.data);
       setIsLoading(false);
+      if (noDataTimeout) clearTimeout(noDataTimeout);
     };
 
     ws.onerror = (error) => {
       if (!isCurrentConnection) return;
       console.error("WebSocket error:", error);
       setIsLoading(false);
+      if (noDataTimeout) clearTimeout(noDataTimeout);
     };
 
     ws.onclose = (e) => {
       if (!isCurrentConnection) return;
       console.log("WebSocket closed:", e.reason);
       setIsLoading(false);
+      if (noDataTimeout) clearTimeout(noDataTimeout);
     };
 
     return () => {
       isCurrentConnection = false;
+      if (noDataTimeout) clearTimeout(noDataTimeout);
       if (ws.readyState === WebSocket.OPEN) {
         ws.close();
       }
diff --git a/apps/dokploy/server/wss/docker-container-logs.ts b/apps/dokploy/server/wss/docker-container-logs.ts
index 3df09ce0..0c1e66a4 100644
--- a/apps/dokploy/server/wss/docker-container-logs.ts
+++ b/apps/dokploy/server/wss/docker-container-logs.ts
@@ -60,7 +60,6 @@ export const setupDockerContainerLogsWebSocketServer = (
 						const command = search
 							? `${baseCommand} 2>&1 | grep --line-buffered -iF "${escapedSearch}"`
 							: baseCommand;
-						console.log("Executing SSH command:", command);
 						client.exec(command, (err, stream) => {
 							if (err) {
 								console.error("Execution error:", err);
@@ -68,24 +67,15 @@ export const setupDockerContainerLogsWebSocketServer = (
 								client.end();
 								return;
 							}
-
-							let dataReceived = false;
-
 							stream
 								.on("close", () => {
-									console.log("Stream closed, dataReceived:", dataReceived);
-									if (!dataReceived) {
-										ws.send("No matching logs found");
-									}
 									client.end();
 									ws.close();
 								})
 								.on("data", (data: string) => {
-									dataReceived = true;
 									ws.send(data.toString());
 								})
 								.stderr.on("data", (data) => {
-									console.error("Stream stderr:", data.toString());
 									ws.send(data.toString());
 								});
 						});
@@ -111,7 +101,7 @@ export const setupDockerContainerLogsWebSocketServer = (
 					since === "all" ? "" : `--since ${since}`
 				} --follow ${containerId}`;
 				const command = search
-					? `${baseCommand} 2>&1 | grep --line-buffered -iF '${search}'`
+					? `${baseCommand} 2>&1 | grep -iF '${search}'`
 					: baseCommand;
 				const ptyProcess = spawn(shell, ["-c", command], {
 					name: "xterm-256color",