From 506c7c2e97cf4dd07b7815013614f72722c48d8f Mon Sep 17 00:00:00 2001
From: Kunal <16601274+Tekunalogy@users.noreply.github.com>
Date: Wed, 14 Oct 2026 21:12:40 -0700
Subject: [PATCH 1/3] feat(logs): Export logs as CSV

An Export button next to refresh downloads every log the backend holds as
dweos-logs-<time>.csv, with date, time, level, logger, file, line,
function and message columns, RFC 4180 quoting, and a BOM so Excel reads
it as UTF-8.

The shared helpers in lib/util/logs.ts also cover copying a log, which
falls back to execCommand("copy") because dweOS is usually opened over
plain HTTP, where navigator.clipboard isn't available.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../components/dwe/log-page/log-viewer.tsx    |  17 ++-
 frontend/src/lib/util/logs.ts                 | 109 ++++++++++++++++++
 2 files changed, 125 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/lib/util/logs.ts

diff --git a/frontend/src/components/dwe/log-page/log-viewer.tsx b/frontend/src/components/dwe/log-page/log-viewer.tsx
index 14325bbe..10a5fda4 100644
--- a/frontend/src/components/dwe/log-page/log-viewer.tsx
+++ b/frontend/src/components/dwe/log-page/log-viewer.tsx
@@ -19,7 +19,8 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Button } from "@/components/ui/button";
-import { Search, RefreshCw } from "lucide-react";
+import { Search, RefreshCw, Download } from "lucide-react";
+import { toast } from "sonner";
 import {
   Pagination,
   PaginationContent,
@@ -36,6 +37,7 @@ import { LogDetailView } from "./log-detail-view";
 import { getLevelColor } from "@/lib/utils";
 import { TOUR_STEP_IDS } from "@/lib/tour-constants";
 import { useTour } from "@/components/tour/tour";
+import { downloadFile, getLogExportFileName, logsToCsv } from "@/lib/util/logs";
 
 const DEMO_LOG: components["schemas"]["LogSchema"][] = [
   {
@@ -181,6 +183,14 @@ export function LogViewer() {
 
   const displayedLogs = isActive ? DEMO_LOG : currentItems;
 
+  const exportLogs = () => {
+    if (logs.length === 0) {
+      toast.info("No logs to export");
+      return;
+    }
+    downloadFile(getLogExportFileName(), logsToCsv(logs), "text/csv");
+  };
+
   return (
     <div
       className="flex flex-col h-[calc(100vh-5.5rem)] gap-4"
@@ -221,6 +231,11 @@ export function LogViewer() {
               className={`h-4 w-4 ${isLoading ? "animate-spin" : ""}`}
             />
           </Button>
+
+          <Button variant="outline" onClick={exportLogs}>
+            <Download className="h-4 w-4" />
+            Export
+          </Button>
         </div>
       </div>
 
diff --git a/frontend/src/lib/util/logs.ts b/frontend/src/lib/util/logs.ts
new file mode 100644
index 00000000..6bf5ea00
--- /dev/null
+++ b/frontend/src/lib/util/logs.ts
@@ -0,0 +1,109 @@
+import { components } from "@/schemas/dwe_os_2";
+
+type Log = components["schemas"]["LogSchema"];
+
+// "2026-10-15 05:14:50.293" -> ["2026-10-15", "05:14:50.293"]. The backend
+// uses "." before the milliseconds; Python's logging default is ",".
+export function splitTimestamp(timestamp: string): [string, string] {
+  const match = timestamp.match(
+    /^(\d{4}-\d{2}-\d{2}) (\d{2}:\d{2}:\d{2})(?:[.,](\d+))?/,
+  );
+  if (!match) return [timestamp, ""];
+  return [match[1], match[3] ? `${match[2]}.${match[3]}` : match[2]];
+}
+
+/**
+ * One log for the clipboard, like the backend's log file but with the message
+ * on its own line:
+ * "<timestamp> <LEVEL> [<logger>] <file>:<line> <function>():\n<message>"
+ */
+export function formatLogForCopy(log: Log): string {
+  return `${log.timestamp} ${log.level} [${log.name}] ${log.filename}:${log.lineno} ${log.function}():\n${log.message}`;
+}
+
+// RFC 4180: quote fields containing a delimiter, quote or line break
+const csvField = (value: string | number): string => {
+  const text = String(value);
+  return /[",\r\n]/.test(text) ? `"${text.replace(/"/g, '""')}"` : text;
+};
+
+/** CSV with the same columns as the logs table, plus a BOM so Excel reads it as UTF-8 */
+export function logsToCsv(logs: Log[]): string {
+  const header = [
+    "Date",
+    "Time",
+    "Level",
+    "Logger",
+    "File",
+    "Line",
+    "Function",
+    "Message",
+  ];
+  const rows = logs.map((log) => [
+    ...splitTimestamp(log.timestamp),
+    log.level,
+    log.name,
+    log.filename,
+    log.lineno,
+    log.function,
+    log.message,
+  ]);
+  return (
+    "\ufeff" +
+    [header, ...rows]
+      .map((row) => row.map(csvField).join(",") + "\r\n")
+      .join("")
+  );
+}
+
+export function getLogExportFileName(now: Date = new Date()): string {
+  const pad = (n: number) => n.toString().padStart(2, "0");
+  const stamp =
+    `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}` +
+    `T${pad(now.getHours())}-${pad(now.getMinutes())}-${pad(now.getSeconds())}`;
+  return `dweos-logs-${stamp}.csv`;
+}
+
+export function downloadFile(
+  fileName: string,
+  contents: string,
+  type: string,
+): void {
+  const url = URL.createObjectURL(new Blob([contents], { type }));
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = fileName;
+  link.click();
+  URL.revokeObjectURL(url);
+}
+
+/**
+ * navigator.clipboard only exists on secure origins (HTTPS or localhost), and
+ * dweOS is usually opened over plain HTTP on the vehicle's IP, so fall back to
+ * the legacy copy command there.
+ */
+export async function copyText(text: string): Promise<boolean> {
+  if (window.isSecureContext && navigator.clipboard) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return true;
+    } catch {
+      // Fall through to the legacy path
+    }
+  }
+
+  const textarea = document.createElement("textarea");
+  textarea.value = text;
+  textarea.setAttribute("readonly", "");
+  textarea.style.position = "fixed";
+  textarea.style.opacity = "0";
+  document.body.appendChild(textarea);
+  textarea.select();
+  try {
+    return document.execCommand("copy");
+  } catch {
+    return false;
+  } finally {
+    document.body.removeChild(textarea);
+  }
+}

From d89f2608de7d815528d5c2de0bafdb163b313f34 Mon Sep 17 00:00:00 2001
From: Kunal <16601274+Tekunalogy@users.noreply.github.com>
Date: Wed, 14 Oct 2026 21:12:54 -0700
Subject: [PATCH 2/3] feat(logs): Copy a log by clicking its row, replacing the
 detail dialog

Clicking anywhere on a row copies the whole log, with the message on its
own line after the timestamp, level, logger and source. The row uses a
pointer cursor and briefly highlights as feedback.

The log detail dialog is removed: it was 30% opaque over the table and
mostly repeated the row. The tour's logs step now explains the click to
copy.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../dwe/log-page/log-detail-view.tsx          | 132 ------------------
 .../components/dwe/log-page/log-viewer.tsx    |  62 ++++----
 frontend/src/components/tour/tour-steps.tsx   |   2 +-
 3 files changed, 32 insertions(+), 164 deletions(-)
 delete mode 100644 frontend/src/components/dwe/log-page/log-detail-view.tsx

diff --git a/frontend/src/components/dwe/log-page/log-detail-view.tsx b/frontend/src/components/dwe/log-page/log-detail-view.tsx
deleted file mode 100644
index 69fa7028..00000000
--- a/frontend/src/components/dwe/log-page/log-detail-view.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
-} from "@/components/ui/dialog";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { Badge } from "@/components/ui/badge";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Card, CardContent } from "@/components/ui/card";
-import { Clock, File, User, Code } from "lucide-react";
-import { components } from "@/schemas/dwe_os_2";
-import { getLevelColor } from "@/lib/utils";
-
-export function LogDetailView({
-  log,
-  open,
-  onOpenChange,
-}: {
-  log: components["schemas"]["LogSchema"] | undefined;
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-}) {
-  if (!log) return null;
-
-  // Format timestamp for better readability
-  const formatTimestamp = (timestamp: string) => {
-    try {
-      const date = new Date(timestamp.replace(",", "."));
-      return date.toLocaleString();
-    } catch {
-      return timestamp;
-    }
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-xl max-h-[90vh] bg-card/30 backdrop-blur-sm overflow-hidden flex flex-col">
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2 leading-relaxed">
-            <Badge className={getLevelColor(log.level)}>{log.level}</Badge>
-            <span className="truncate">{log.name}</span>
-          </DialogTitle>
-          <DialogDescription className="flex items-center gap-1">
-            <Clock className="h-3 w-3" /> {formatTimestamp(log.timestamp)}
-          </DialogDescription>
-        </DialogHeader>
-
-        <Tabs
-          defaultValue="message"
-          className="flex-1 overflow-hidden flex flex-col"
-        >
-          <div className="border-b border-transparent">
-            <TabsList className="grid w-full grid-cols-2 ">
-              <TabsTrigger value="message">Message</TabsTrigger>
-              <TabsTrigger value="details">Details</TabsTrigger>
-            </TabsList>
-          </div>
-
-          <TabsContent
-            value="message"
-            className="flex-1 overflow-hidden flex flex-col mt-0 pt-4"
-          >
-            <ScrollArea className="flex-1 rounded-md border">
-              <pre className="p-4 font-mono text-sm whitespace-pre-wrap break-words">
-                {log.message}
-              </pre>
-            </ScrollArea>
-          </TabsContent>
-
-          <TabsContent
-            value="details"
-            className="flex-1 overflow-auto mt-0 pt-4"
-          >
-            <Card>
-              <CardContent className="p-4 space-y-4">
-                <div className="grid grid-cols-[100px_1fr] gap-2">
-                  <div className="font-medium text-muted-foreground">
-                    Level:
-                  </div>
-                  <div>
-                    <Badge className={getLevelColor(log.level)}>
-                      {log.level}
-                    </Badge>
-                  </div>
-                </div>
-
-                <div className="grid grid-cols-[100px_1fr] gap-2">
-                  <div className="font-medium text-muted-foreground">
-                    Logger:
-                  </div>
-                  <div className="font-mono flex items-center gap-1">
-                    <User className="h-4 w-4 text-muted-foreground" />
-                    {log.name}
-                  </div>
-                </div>
-
-                <div className="grid grid-cols-[100px_1fr] gap-2">
-                  <div className="font-medium text-muted-foreground">File:</div>
-                  <div className="font-mono flex items-center gap-1">
-                    <File className="h-4 w-4 text-muted-foreground" />
-                    {log.filename}:{log.lineno}
-                  </div>
-                </div>
-
-                <div className="grid grid-cols-[100px_1fr] gap-2">
-                  <div className="font-medium text-muted-foreground">
-                    Function:
-                  </div>
-                  <div className="font-mono flex items-center gap-1">
-                    <Code className="h-4 w-4 text-muted-foreground" />
-                    {log.function}()
-                  </div>
-                </div>
-
-                <div className="grid grid-cols-[100px_1fr] gap-2">
-                  <div className="font-medium text-muted-foreground">
-                    Timestamp:
-                  </div>
-                  <div className="font-mono flex items-center gap-1">
-                    {log.timestamp}
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-          </TabsContent>
-        </Tabs>
-      </DialogContent>
-    </Dialog>
-  );
-}
diff --git a/frontend/src/components/dwe/log-page/log-viewer.tsx b/frontend/src/components/dwe/log-page/log-viewer.tsx
index 10a5fda4..c330f568 100644
--- a/frontend/src/components/dwe/log-page/log-viewer.tsx
+++ b/frontend/src/components/dwe/log-page/log-viewer.tsx
@@ -33,11 +33,16 @@ import {
 import WebsocketContext from "@/contexts/WebsocketContext";
 import { API_CLIENT } from "@/api";
 import { components } from "@/schemas/dwe_os_2";
-import { LogDetailView } from "./log-detail-view";
 import { getLevelColor } from "@/lib/utils";
 import { TOUR_STEP_IDS } from "@/lib/tour-constants";
 import { useTour } from "@/components/tour/tour";
-import { downloadFile, getLogExportFileName, logsToCsv } from "@/lib/util/logs";
+import {
+  copyText,
+  downloadFile,
+  formatLogForCopy,
+  getLogExportFileName,
+  logsToCsv,
+} from "@/lib/util/logs";
 
 const DEMO_LOG: components["schemas"]["LogSchema"][] = [
   {
@@ -64,10 +69,8 @@ export function LogViewer() {
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [currentPage, setCurrentPage] = useState<number>(1);
   const [itemsPerPage, setItemsPerPage] = useState<number>(10);
-  const [selectedLog, setSelectedLog] = useState<
-    components["schemas"]["LogSchema"] | undefined
-  >(undefined);
-  const [isDetailOpen, setIsDetailOpen] = useState(false);
+  // Row that was just copied, briefly highlighted as click feedback
+  const [copiedRow, setCopiedRow] = useState<number | null>(null);
 
   // Available log levels
   const logLevels = ["ALL", "DEBUG", "INFO", "WARNING", "ERROR", "CRITICAL"];
@@ -191,6 +194,19 @@ export function LogViewer() {
     downloadFile(getLogExportFileName(), logsToCsv(logs), "text/csv");
   };
 
+  const copyLog = async (
+    log: components["schemas"]["LogSchema"],
+    row: number,
+  ) => {
+    setCopiedRow(row);
+    setTimeout(
+      () => setCopiedRow((current) => (current === row ? null : current)),
+      600,
+    );
+    if (await copyText(formatLogForCopy(log))) toast.success("Log copied");
+    else toast.error("Couldn't copy the log");
+  };
+
   return (
     <div
       className="flex flex-col h-[calc(100vh-5.5rem)] gap-4"
@@ -257,11 +273,11 @@ export function LogViewer() {
                   <TableRow
                     key={index}
                     id={TOUR_STEP_IDS.DEMO_LOGS}
-                    className="cursor-pointer hover:bg-muted/50"
-                    onClick={() => {
-                      setSelectedLog(log);
-                      setIsDetailOpen(true);
-                    }}
+                    title="Click to copy"
+                    className={`cursor-pointer select-none transition-colors duration-300 hover:bg-muted/50 active:bg-muted ${
+                      copiedRow === index ? "bg-primary/15" : ""
+                    }`}
+                    onClick={() => copyLog(log, index)}
                   >
                     <TableCell className="font-mono text-xs">
                       {formatTimestamp(log.timestamp)}
@@ -271,29 +287,20 @@ export function LogViewer() {
                         {log.level}
                       </Badge>
                     </TableCell>
-                    <TableCell
-                      className="whitespace-normal break-words max-w-[150px]"
-                      title={log.name}
-                    >
+                    <TableCell className="whitespace-normal break-words max-w-[150px]">
                       {log.name}
                     </TableCell>
                     <TableCell>
                       <div className="text-xs">
-                        <div
-                          className="break-words max-w-[150px]"
-                          title={log.filename}
-                        >
+                        <div className="break-words max-w-[150px]">
                           {log.filename}:{log.lineno}
                         </div>
-                        <div
-                          className="text-gray-500 break-words max-w-[150px]"
-                          title={log.function}
-                        >
+                        <div className="text-gray-500 break-words max-w-[150px]">
                           {log.function}()
                         </div>
                       </div>
                     </TableCell>
-                    <TableCell title={log.message}>
+                    <TableCell>
                       <div className="font-mono text-xs whitespace-normal break-words line-clamp-2 pr-2 max-w-[150px]">
                         {log.message}
                       </div>
@@ -396,13 +403,6 @@ export function LogViewer() {
           </Pagination>
         </div>
       )}
-
-      {/* Log Detail Dialog */}
-      <LogDetailView
-        log={selectedLog}
-        open={isDetailOpen}
-        onOpenChange={setIsDetailOpen}
-      />
     </div>
   );
 }
diff --git a/frontend/src/components/tour/tour-steps.tsx b/frontend/src/components/tour/tour-steps.tsx
index 8f05cb01..e655686a 100644
--- a/frontend/src/components/tour/tour-steps.tsx
+++ b/frontend/src/components/tour/tour-steps.tsx
@@ -312,7 +312,7 @@ export function getSteps(
           <div>Sample Log</div>
           <Separator />
           <div className="text-sm text-muted-foreground p-2">
-            You can left click into a log for a detailed view.
+            Click a log to copy it. Hover over a long message to see all of it.
           </div>
         </div>
       ),

From f813390aeca6f08f4575835a1144ac1cb1035013 Mon Sep 17 00:00:00 2001
From: Kunal <16601274+Tekunalogy@users.noreply.github.com>
Date: Wed, 14 Oct 2026 21:13:03 -0700
Subject: [PATCH 3/3] feat(logs): Split date and time and show long messages on
 hover

- Separate Date and Time (with milliseconds) columns.
- The date, time and level columns are sized to their fixed-width
  contents, and level badges share one width, so the gaps line up on
  every row.
- The message column takes the remaining width instead of being capped
  at 150px; a message cut off by the two-line clamp shows the full text
  in a callout on hover.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../components/dwe/log-page/log-viewer.tsx    | 180 ++++++++++++------
 1 file changed, 118 insertions(+), 62 deletions(-)

diff --git a/frontend/src/components/dwe/log-page/log-viewer.tsx b/frontend/src/components/dwe/log-page/log-viewer.tsx
index c330f568..04f4f208 100644
--- a/frontend/src/components/dwe/log-page/log-viewer.tsx
+++ b/frontend/src/components/dwe/log-page/log-viewer.tsx
@@ -1,6 +1,12 @@
 "use client";
 
-import { useState, useEffect, useContext } from "react";
+import {
+  useState,
+  useEffect,
+  useContext,
+  useLayoutEffect,
+  useRef,
+} from "react";
 import {
   Table,
   TableBody,
@@ -20,6 +26,11 @@ import {
 } from "@/components/ui/select";
 import { Button } from "@/components/ui/button";
 import { Search, RefreshCw, Download } from "lucide-react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { toast } from "sonner";
 import {
   Pagination,
@@ -42,6 +53,7 @@ import {
   formatLogForCopy,
   getLogExportFileName,
   logsToCsv,
+  splitTimestamp,
 } from "@/lib/util/logs";
 
 const DEMO_LOG: components["schemas"]["LogSchema"][] = [
@@ -56,6 +68,59 @@ const DEMO_LOG: components["schemas"]["LogSchema"][] = [
   },
 ];
 
+/**
+ * Message clamped to two lines; when that cuts it off, hovering shows the
+ * whole message in a callout.
+ */
+const LogMessage = ({ message }: { message: string }) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const [isTruncated, setIsTruncated] = useState(false);
+  const [open, setOpen] = useState(false);
+
+  useLayoutEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+
+    const check = () =>
+      setIsTruncated(element.scrollHeight > element.clientHeight + 1);
+    const observer = new ResizeObserver(check);
+    observer.observe(element);
+    check();
+    return () => observer.disconnect();
+  }, [message]);
+
+  return (
+    // Always rendered so the measured element stays mounted; it just never
+    // opens when the message fits
+    <Tooltip
+      delayDuration={300}
+      open={open && isTruncated}
+      onOpenChange={setOpen}
+    >
+      <TooltipTrigger asChild>
+        <div
+          ref={ref}
+          className="font-mono text-xs whitespace-normal break-words line-clamp-2 pr-2"
+        >
+          {message}
+        </div>
+      </TooltipTrigger>
+      <TooltipContent
+        side="bottom"
+        align="start"
+        className="max-w-xl max-h-[60vh] overflow-auto select-text bg-popover backdrop-blur-none p-3 shadow-lg"
+        // React events bubble through the portal to the row, so selecting text
+        // in the callout would otherwise copy the whole row
+        onClick={(e) => e.stopPropagation()}
+      >
+        <pre className="font-mono text-xs whitespace-pre-wrap break-words">
+          {message}
+        </pre>
+      </TooltipContent>
+    </Tooltip>
+  );
+};
+
 export function LogViewer() {
   const { connected, socket } = useContext(WebsocketContext)!;
   const { isActive } = useTour();
@@ -97,25 +162,6 @@ export function LogViewer() {
     }
   }, [connected, socket]);
 
-  // Format timestamp for better readability
-  const formatTimestamp = (timestamp: string) => {
-    try {
-      const date = new Date(timestamp.replace(",", "."));
-      return date.toLocaleString("en-US", {
-        year: "numeric",
-        month: "2-digit",
-        day: "2-digit",
-        hour: "2-digit",
-        minute: "2-digit",
-        second: "2-digit",
-        fractionalSecondDigits: 3,
-      });
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    } catch (e) {
-      return timestamp; // Return original if parsing fails
-    }
-  };
-
   // Filter logs based on level and search query
   useEffect(() => {
     let filtered = [...logs];
@@ -260,56 +306,66 @@ export function LogViewer() {
           <Table className="table-fixed min-w-[900px]" noWrapper>
             <TableHeader className="bg-background sticky top-0 z-10">
               <TableRow>
-                <TableHead className="w-[120px]">Timestamp</TableHead>
-                <TableHead className="w-[80px]">Level</TableHead>
-                <TableHead className="w-[140px]">Logger</TableHead>
+                {/* Sized to their fixed-width contents so the gaps between them match */}
+                <TableHead className="w-[96px]">Date</TableHead>
+                <TableHead className="w-[112px]">Time</TableHead>
+                <TableHead className="w-[104px]">Level</TableHead>
+                <TableHead className="w-[220px]">Logger</TableHead>
                 <TableHead className="w-[100px]">Source</TableHead>
-                <TableHead className="w-[250px]">Message</TableHead>
+                {/* No fixed width, so the message takes the remaining space */}
+                <TableHead>Message</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
               {displayedLogs.length > 0 ? (
-                displayedLogs.map((log, index) => (
-                  <TableRow
-                    key={index}
-                    id={TOUR_STEP_IDS.DEMO_LOGS}
-                    title="Click to copy"
-                    className={`cursor-pointer select-none transition-colors duration-300 hover:bg-muted/50 active:bg-muted ${
-                      copiedRow === index ? "bg-primary/15" : ""
-                    }`}
-                    onClick={() => copyLog(log, index)}
-                  >
-                    <TableCell className="font-mono text-xs">
-                      {formatTimestamp(log.timestamp)}
-                    </TableCell>
-                    <TableCell>
-                      <Badge className={getLevelColor(log.level)}>
-                        {log.level}
-                      </Badge>
-                    </TableCell>
-                    <TableCell className="whitespace-normal break-words max-w-[150px]">
-                      {log.name}
-                    </TableCell>
-                    <TableCell>
-                      <div className="text-xs">
-                        <div className="break-words max-w-[150px]">
-                          {log.filename}:{log.lineno}
-                        </div>
-                        <div className="text-gray-500 break-words max-w-[150px]">
-                          {log.function}()
+                displayedLogs.map((log, index) => {
+                  const [date, time] = splitTimestamp(log.timestamp);
+                  return (
+                    <TableRow
+                      key={index}
+                      id={TOUR_STEP_IDS.DEMO_LOGS}
+                      title="Click to copy"
+                      className={`cursor-pointer select-none transition-colors duration-300 hover:bg-muted/50 active:bg-muted ${
+                        copiedRow === index ? "bg-primary/15" : ""
+                      }`}
+                      onClick={() => copyLog(log, index)}
+                    >
+                      <TableCell className="font-mono text-xs">
+                        {date}
+                      </TableCell>
+                      <TableCell className="font-mono text-xs">
+                        {time}
+                      </TableCell>
+                      <TableCell>
+                        <Badge
+                          // Same width for every level so the column lines up
+                          className={`w-20 justify-center ${getLevelColor(log.level)}`}
+                        >
+                          {log.level}
+                        </Badge>
+                      </TableCell>
+                      <TableCell className="whitespace-normal break-words">
+                        {log.name}
+                      </TableCell>
+                      <TableCell>
+                        <div className="text-xs">
+                          <div className="break-words max-w-[150px]">
+                            {log.filename}:{log.lineno}
+                          </div>
+                          <div className="text-gray-500 break-words max-w-[150px]">
+                            {log.function}()
+                          </div>
                         </div>
-                      </div>
-                    </TableCell>
-                    <TableCell>
-                      <div className="font-mono text-xs whitespace-normal break-words line-clamp-2 pr-2 max-w-[150px]">
-                        {log.message}
-                      </div>
-                    </TableCell>
-                  </TableRow>
-                ))
+                      </TableCell>
+                      <TableCell>
+                        <LogMessage message={log.message} />
+                      </TableCell>
+                    </TableRow>
+                  );
+                })
               ) : (
                 <TableRow>
-                  <TableCell colSpan={5} className="h-24 text-center">
+                  <TableCell colSpan={6} className="h-24 text-center">
                     No logs found matching your filters.
                   </TableCell>
                 </TableRow>