From b65078d28c72ddb119b437a02055992d17b28626 Mon Sep 17 00:00:00 2001
From: x032205 <x032205@gmail.com>
Date: Sat, 1 Nov 2025 03:21:22 -0400
Subject: [PATCH 1/7] Fix focus ring & trim logs

---
 .../components/PamSessionLogsSection.tsx      | 55 ++++++++++++++++++-
 1 file changed, 52 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.tsx b/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.tsx
index 5f06a64e2..66d2fad8d 100644
--- a/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.tsx
+++ b/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.tsx
@@ -4,6 +4,52 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { TPamSession } from "@app/hooks/api/pam";
 
+const formatLogContent = (text: string | null | undefined): string => {
+  if (!text) return "";
+
+  let lines = text.split("\n");
+
+  // Find the first and last non-empty lines to trim vertical padding
+  let firstLineIndex = -1;
+  for (let i = 0; i < lines.length; i += 1) {
+    if (lines[i].trim() !== "") {
+      firstLineIndex = i;
+      break;
+    }
+  }
+
+  if (firstLineIndex === -1) {
+    return "";
+  }
+
+  let lastLineIndex = -1;
+  for (let i = lines.length - 1; i >= 0; i -= 1) {
+    if (lines[i].trim() !== "") {
+      lastLineIndex = i;
+      break;
+    }
+  }
+
+  lines = lines.slice(firstLineIndex, lastLineIndex + 1);
+
+  // Determine the minimum indentation of non-empty lines
+  const indentations = lines
+    .filter((line) => line.trim() !== "")
+    .map((line) => {
+      const match = line.match(/^\s*/);
+      return match ? match[0].length : 0;
+    });
+
+  const minIndentation = Math.min(...indentations);
+
+  // Remove the common indentation from all lines
+  if (minIndentation > 0) {
+    lines = lines.map((line) => line.substring(minIndentation));
+  }
+
+  return lines.join("\n");
+};
+
 type Props = {
   session: TPamSession;
 };
@@ -32,11 +78,14 @@ export const PamSessionLogsSection = ({ session }: Props) => {
         {session.commandLogs.length > 0 ? (
           session.commandLogs.map((log) => {
             const isExpanded = expandedLogTimestamps.has(log.timestamp);
+            const formattedInput = formatLogContent(log.input);
+            const formattedOutput = formatLogContent(log.output);
+
             return (
               <button
                 type="button"
                 key={log.timestamp}
-                className={`flex w-full flex-col rounded-md border border-mineshaft-700 p-3 text-left focus:ring-2 focus:ring-mineshaft-400 focus:outline-hidden ${
+                className={`flex w-full flex-col rounded-md border border-mineshaft-700 p-3 text-left focus:inset-ring-2 focus:inset-ring-mineshaft-400 focus:outline-hidden ${
                   isExpanded ? "bg-mineshaft-700" : "bg-mineshaft-800 hover:bg-mineshaft-700"
                 }`}
                 onClick={() => toggleExpand(log.timestamp)}
@@ -56,12 +105,12 @@ export const PamSessionLogsSection = ({ session }: Props) => {
                     isExpanded ? "break-all whitespace-pre-wrap" : "truncate"
                   }`}
                 >
-                  {log.input}
+                  {formattedInput}
                 </div>
 
                 {isExpanded && log.output && (
                   <div className="mt-2 border-t border-mineshaft-700 pt-2 font-mono break-all whitespace-pre-wrap text-bunker-300">
-                    {log.output}
+                    {formattedOutput}
                   </div>
                 )}
               </button>

From 0425a085feea885bd1b2b2572dd21f6b57c98d2d Mon Sep 17 00:00:00 2001
From: x032205 <x032205@gmail.com>
Date: Sat, 1 Nov 2025 03:43:30 -0400
Subject: [PATCH 2/7] Format row outputs into tables, and only allow one log
 expanded at a time

---
 .../components/PamSessionLogOutput.tsx        | 95 +++++++++++++++++++
 .../components/PamSessionLogsSection.tsx      | 23 +++--
 2 files changed, 109 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogOutput.tsx

diff --git a/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogOutput.tsx b/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogOutput.tsx
new file mode 100644
index 000000000..92d173f7e
--- /dev/null
+++ b/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogOutput.tsx
@@ -0,0 +1,95 @@
+import { useState } from "react";
+
+type TableLog = {
+  command?: string;
+  data_rows: Record<string, string | number | null>[];
+  total_rows?: number;
+};
+
+export const PamSessionLogOutput = ({ content }: { content: string }) => {
+  const [isRawView, setIsRawView] = useState(false);
+
+  let parsedContent: TableLog | null = null;
+  try {
+    const parsed = JSON.parse(content);
+    if (
+      parsed &&
+      typeof parsed === "object" &&
+      !Array.isArray(parsed) &&
+      parsed.data_rows &&
+      Array.isArray(parsed.data_rows) &&
+      parsed.data_rows.length > 0 &&
+      typeof parsed.data_rows[0] === "object" &&
+      parsed.data_rows[0] !== null
+    ) {
+      parsedContent = parsed;
+    }
+  } catch (error) {
+    // Not a valid JSON or doesn't match structure, will render as plain text
+  }
+
+  if (parsedContent) {
+    const headers = Object.keys(parsedContent.data_rows[0]);
+    return (
+      <div className="font-sans">
+        {isRawView ? (
+          <div className="font-mono break-all whitespace-pre-wrap">{content}</div>
+        ) : (
+          <>
+            {parsedContent.command && (
+              <div className="mb-2 font-mono">{`> ${parsedContent.command}`}</div>
+            )}
+            <div className="overflow-x-auto rounded-md border border-mineshaft-600">
+              <table className="w-full min-w-max text-left">
+                <thead className="bg-mineshaft-800">
+                  <tr className="border-b border-mineshaft-600">
+                    {headers.map((header) => (
+                      <th key={header} className="p-2 font-semibold text-mineshaft-200 capitalize">
+                        {header.replace(/_/g, " ")}
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody>
+                  {parsedContent.data_rows.map((row, rowIndex) => (
+                    <tr
+                      // eslint-disable-next-line react/no-array-index-key
+                      key={`row-${rowIndex}`}
+                      className="border-b border-mineshaft-700 bg-mineshaft-900 last:border-b-0 hover:bg-mineshaft-800/50"
+                    >
+                      {headers.map((header) => (
+                        <td key={`${header}-${rowIndex}`} className="p-2">
+                          {String(row[header] ?? "")}
+                        </td>
+                      ))}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </>
+        )}
+        <div className="mt-2 flex items-center">
+          <button
+            type="button"
+            className="cursor-pointer text-sm text-bunker-400 underline"
+            onClick={(e) => {
+              e.stopPropagation();
+              setIsRawView((v) => !v);
+            }}
+          >
+            {isRawView ? "View Formatted" : "View Raw"}
+          </button>
+
+          {parsedContent.total_rows !== undefined && (
+            <div className="ml-auto text-right text-sm text-bunker-400">
+              Total rows: {parsedContent.total_rows}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  return <div className="font-mono break-all whitespace-pre-wrap">{content}</div>;
+};
diff --git a/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.tsx b/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.tsx
index 66d2fad8d..d620cf4cc 100644
--- a/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.tsx
+++ b/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.tsx
@@ -3,6 +3,7 @@ import { faChevronDown, faChevronRight } from "@fortawesome/free-solid-svg-icons
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { TPamSession } from "@app/hooks/api/pam";
+import { PamSessionLogOutput } from "./PamSessionLogOutput";
 
 const formatLogContent = (text: string | null | undefined): string => {
   if (!text) return "";
@@ -59,13 +60,10 @@ export const PamSessionLogsSection = ({ session }: Props) => {
 
   const toggleExpand = (timestamp: string) => {
     setExpandedLogTimestamps((prev) => {
-      const newSet = new Set(prev);
-      if (newSet.has(timestamp)) {
-        newSet.delete(timestamp);
-      } else {
-        newSet.add(timestamp);
+      if (prev.has(timestamp)) {
+        return new Set();
       }
-      return newSet;
+      return new Set([timestamp]);
     });
   };
 
@@ -109,9 +107,16 @@ export const PamSessionLogsSection = ({ session }: Props) => {
                 </div>
 
                 {isExpanded && log.output && (
-                  <div className="mt-2 border-t border-mineshaft-700 pt-2 font-mono break-all whitespace-pre-wrap text-bunker-300">
-                    {formattedOutput}
-                  </div>
+                  <>
+                    <div className="mt-2 flex items-center gap-2">
+                      <div className="h-px w-full bg-mineshaft-400"></div>
+                      <span className="text-xs text-mineshaft-400">OUTPUT</span>
+                      <div className="h-px w-full bg-mineshaft-400"></div>
+                    </div>
+                    <div className="pt-2 text-bunker-300">
+                      <PamSessionLogOutput content={formattedOutput} />
+                    </div>
+                  </>
                 )}
               </button>
             );

From 7d978443c7e0f02a6579b8ce4128b7742291055d Mon Sep 17 00:00:00 2001
From: x032205 <x032205@gmail.com>
Date: Sat, 1 Nov 2025 03:47:03 -0400
Subject: [PATCH 3/7] Move formatLogContent to a utils file

---
 .../components/PamSessionLogsSection.tsx      | 50 +------------------
 .../components/PamSessionLogsSection.utils.ts | 46 +++++++++++++++++
 2 files changed, 48 insertions(+), 48 deletions(-)
 create mode 100644 frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.utils.ts

diff --git a/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.tsx b/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.tsx
index d620cf4cc..9350f6cd9 100644
--- a/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.tsx
+++ b/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.tsx
@@ -4,52 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { TPamSession } from "@app/hooks/api/pam";
 import { PamSessionLogOutput } from "./PamSessionLogOutput";
-
-const formatLogContent = (text: string | null | undefined): string => {
-  if (!text) return "";
-
-  let lines = text.split("\n");
-
-  // Find the first and last non-empty lines to trim vertical padding
-  let firstLineIndex = -1;
-  for (let i = 0; i < lines.length; i += 1) {
-    if (lines[i].trim() !== "") {
-      firstLineIndex = i;
-      break;
-    }
-  }
-
-  if (firstLineIndex === -1) {
-    return "";
-  }
-
-  let lastLineIndex = -1;
-  for (let i = lines.length - 1; i >= 0; i -= 1) {
-    if (lines[i].trim() !== "") {
-      lastLineIndex = i;
-      break;
-    }
-  }
-
-  lines = lines.slice(firstLineIndex, lastLineIndex + 1);
-
-  // Determine the minimum indentation of non-empty lines
-  const indentations = lines
-    .filter((line) => line.trim() !== "")
-    .map((line) => {
-      const match = line.match(/^\s*/);
-      return match ? match[0].length : 0;
-    });
-
-  const minIndentation = Math.min(...indentations);
-
-  // Remove the common indentation from all lines
-  if (minIndentation > 0) {
-    lines = lines.map((line) => line.substring(minIndentation));
-  }
-
-  return lines.join("\n");
-};
+import { formatLogContent } from "./PamSessionLogsSection.utils";
 
 type Props = {
   session: TPamSession;
@@ -77,7 +32,6 @@ export const PamSessionLogsSection = ({ session }: Props) => {
           session.commandLogs.map((log) => {
             const isExpanded = expandedLogTimestamps.has(log.timestamp);
             const formattedInput = formatLogContent(log.input);
-            const formattedOutput = formatLogContent(log.output);
 
             return (
               <button
@@ -114,7 +68,7 @@ export const PamSessionLogsSection = ({ session }: Props) => {
                       <div className="h-px w-full bg-mineshaft-400"></div>
                     </div>
                     <div className="pt-2 text-bunker-300">
-                      <PamSessionLogOutput content={formattedOutput} />
+                      <PamSessionLogOutput content={log.output} />
                     </div>
                   </>
                 )}
diff --git a/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.utils.ts b/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.utils.ts
new file mode 100644
index 000000000..4696331fb
--- /dev/null
+++ b/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.utils.ts
@@ -0,0 +1,46 @@
+// This function trims top and bottom empty padding, as well as moves all relative text to the left while still respecting indentation
+export const formatLogContent = (text: string | null | undefined): string => {
+  if (!text) return "";
+
+  let lines = text.split("\n");
+
+  // Find the first and last non-empty lines to trim vertical padding
+  let firstLineIndex = -1;
+  for (let i = 0; i < lines.length; i += 1) {
+    if (lines[i].trim() !== "") {
+      firstLineIndex = i;
+      break;
+    }
+  }
+
+  if (firstLineIndex === -1) {
+    return "";
+  }
+
+  let lastLineIndex = -1;
+  for (let i = lines.length - 1; i >= 0; i -= 1) {
+    if (lines[i].trim() !== "") {
+      lastLineIndex = i;
+      break;
+    }
+  }
+
+  lines = lines.slice(firstLineIndex, lastLineIndex + 1);
+
+  // Determine the minimum indentation of non-empty lines
+  const indentations = lines
+    .filter((line) => line.trim() !== "")
+    .map((line) => {
+      const match = line.match(/^\s*/);
+      return match ? match[0].length : 0;
+    });
+
+  const minIndentation = Math.min(...indentations);
+
+  // Remove the common indentation from all lines
+  if (minIndentation > 0) {
+    lines = lines.map((line) => line.substring(minIndentation));
+  }
+
+  return lines.join("\n");
+};

From 39567116c840b55a30d60581e8a43286d71716e7 Mon Sep 17 00:00:00 2001
From: x032205 <x032205@gmail.com>
Date: Sat, 1 Nov 2025 04:17:59 -0400
Subject: [PATCH 4/7] check resource type

---
 .../components/PamSessionLogOutput.tsx        | 43 ++++++++++++-------
 .../components/PamSessionLogsSection.tsx      |  5 ++-
 2 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogOutput.tsx b/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogOutput.tsx
index 92d173f7e..ba2f38057 100644
--- a/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogOutput.tsx
+++ b/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogOutput.tsx
@@ -1,3 +1,4 @@
+import { PamResourceType } from "@app/hooks/api/pam";
 import { useState } from "react";
 
 type TableLog = {
@@ -6,26 +7,36 @@ type TableLog = {
   total_rows?: number;
 };
 
-export const PamSessionLogOutput = ({ content }: { content: string }) => {
+export const PamSessionLogOutput = ({
+  content,
+  resourceType
+}: {
+  content: string;
+  resourceType: PamResourceType;
+}) => {
   const [isRawView, setIsRawView] = useState(false);
 
   let parsedContent: TableLog | null = null;
-  try {
-    const parsed = JSON.parse(content);
-    if (
-      parsed &&
-      typeof parsed === "object" &&
-      !Array.isArray(parsed) &&
-      parsed.data_rows &&
-      Array.isArray(parsed.data_rows) &&
-      parsed.data_rows.length > 0 &&
-      typeof parsed.data_rows[0] === "object" &&
-      parsed.data_rows[0] !== null
-    ) {
-      parsedContent = parsed;
+
+  if (resourceType === PamResourceType.Postgres || resourceType === PamResourceType.MySQL) {
+    try {
+      const parsed = JSON.parse(content);
+
+      if (
+        parsed &&
+        typeof parsed === "object" &&
+        !Array.isArray(parsed) &&
+        parsed.data_rows &&
+        Array.isArray(parsed.data_rows) &&
+        parsed.data_rows.length > 0 &&
+        typeof parsed.data_rows[0] === "object" &&
+        parsed.data_rows[0] !== null
+      ) {
+        parsedContent = parsed;
+      }
+    } catch (error) {
+      // Not a valid JSON or doesn't match structure, will render as plain text
     }
-  } catch (error) {
-    // Not a valid JSON or doesn't match structure, will render as plain text
   }
 
   if (parsedContent) {
diff --git a/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.tsx b/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.tsx
index 9350f6cd9..413f379e2 100644
--- a/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.tsx
+++ b/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.tsx
@@ -68,7 +68,10 @@ export const PamSessionLogsSection = ({ session }: Props) => {
                       <div className="h-px w-full bg-mineshaft-400"></div>
                     </div>
                     <div className="pt-2 text-bunker-300">
-                      <PamSessionLogOutput content={log.output} />
+                      <PamSessionLogOutput
+                        content={log.output}
+                        resourceType={session.resourceType}
+                      />
                     </div>
                   </>
                 )}

From d870c047f9e7cd4c79a477ddb5a1e206aa25fc94 Mon Sep 17 00:00:00 2001
From: x032205 <x032205@gmail.com>
Date: Sat, 1 Nov 2025 04:34:32 -0400
Subject: [PATCH 5/7] animations and small tweaks

---
 .../components/PamSessionLogOutput.tsx        |  7 +--
 .../components/PamSessionLogsSection.tsx      | 50 ++++++++++++-------
 2 files changed, 36 insertions(+), 21 deletions(-)

diff --git a/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogOutput.tsx b/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogOutput.tsx
index ba2f38057..a0cfb6cb9 100644
--- a/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogOutput.tsx
+++ b/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogOutput.tsx
@@ -1,6 +1,7 @@
-import { PamResourceType } from "@app/hooks/api/pam";
 import { useState } from "react";
 
+import { PamResourceType } from "@app/hooks/api/pam";
+
 type TableLog = {
   command?: string;
   data_rows: Record<string, string | number | null>[];
@@ -34,7 +35,7 @@ export const PamSessionLogOutput = ({
       ) {
         parsedContent = parsed;
       }
-    } catch (error) {
+    } catch {
       // Not a valid JSON or doesn't match structure, will render as plain text
     }
   }
@@ -69,7 +70,7 @@ export const PamSessionLogOutput = ({
                       className="border-b border-mineshaft-700 bg-mineshaft-900 last:border-b-0 hover:bg-mineshaft-800/50"
                     >
                       {headers.map((header) => (
-                        <td key={`${header}-${rowIndex}`} className="p-2">
+                        <td key={header} className="p-2">
                           {String(row[header] ?? "")}
                         </td>
                       ))}
diff --git a/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.tsx b/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.tsx
index 413f379e2..b3c287380 100644
--- a/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.tsx
+++ b/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.tsx
@@ -1,8 +1,10 @@
 import { useState } from "react";
-import { faChevronDown, faChevronRight } from "@fortawesome/free-solid-svg-icons";
+import { faChevronRight } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
 
 import { TPamSession } from "@app/hooks/api/pam";
+
 import { PamSessionLogOutput } from "./PamSessionLogOutput";
 import { formatLogContent } from "./PamSessionLogsSection.utils";
 
@@ -45,8 +47,11 @@ export const PamSessionLogsSection = ({ session }: Props) => {
                 <div className="flex items-center justify-between text-bunker-400">
                   <div className="flex items-center gap-2 select-none">
                     <FontAwesomeIcon
-                      icon={isExpanded ? faChevronDown : faChevronRight}
-                      className="size-3 transition-transform duration-200"
+                      icon={faChevronRight}
+                      className={twMerge(
+                        "size-3 transition-transform duration-100 ease-in-out",
+                        isExpanded && "rotate-90"
+                      )}
                     />
                     <span>{new Date(log.timestamp).toLocaleString()}</span>
                   </div>
@@ -60,21 +65,30 @@ export const PamSessionLogsSection = ({ session }: Props) => {
                   {formattedInput}
                 </div>
 
-                {isExpanded && log.output && (
-                  <>
-                    <div className="mt-2 flex items-center gap-2">
-                      <div className="h-px w-full bg-mineshaft-400"></div>
-                      <span className="text-xs text-mineshaft-400">OUTPUT</span>
-                      <div className="h-px w-full bg-mineshaft-400"></div>
-                    </div>
-                    <div className="pt-2 text-bunker-300">
-                      <PamSessionLogOutput
-                        content={log.output}
-                        resourceType={session.resourceType}
-                      />
-                    </div>
-                  </>
-                )}
+                <div
+                  className={twMerge(
+                    "grid transition-all duration-100 ease-in-out",
+                    isExpanded && log.output ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+                  )}
+                >
+                  <div className="overflow-hidden">
+                    {log.output && (
+                      <>
+                        <div className="mt-2 flex items-center gap-2">
+                          <div className="h-px w-full bg-mineshaft-400" />
+                          <span className="text-xs text-mineshaft-400">OUTPUT</span>
+                          <div className="h-px w-full bg-mineshaft-400" />
+                        </div>
+                        <div className="pt-2 text-bunker-300">
+                          <PamSessionLogOutput
+                            content={log.output}
+                            resourceType={session.resourceType}
+                          />
+                        </div>
+                      </>
+                    )}
+                  </div>
+                </div>
               </button>
             );
           })

From 050bc2d66ba480e80d35b9d3f9e7e54f03ba5ef2 Mon Sep 17 00:00:00 2001
From: Andre <120525481+x032205@users.noreply.github.com>
Date: Sat, 1 Nov 2025 16:00:09 -0400
Subject: [PATCH 6/7] Update
 frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.utils.ts

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
---
 .../components/PamSessionLogsSection.utils.ts                   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.utils.ts b/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.utils.ts
index 4696331fb..d76145655 100644
--- a/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.utils.ts
+++ b/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.utils.ts
@@ -35,7 +35,7 @@ export const formatLogContent = (text: string | null | undefined): string => {
       return match ? match[0].length : 0;
     });
 
-  const minIndentation = Math.min(...indentations);
+  const minIndentation = indentations.length > 0 ? Math.min(...indentations) : 0;
 
   // Remove the common indentation from all lines
   if (minIndentation > 0) {

From dbd4a9ea516ac1614e08d6ebab5ef8cc509f2a20 Mon Sep 17 00:00:00 2001
From: x032205 <x032205@gmail.com>
Date: Mon, 3 Nov 2025 13:27:13 -0500
Subject: [PATCH 7/7] added log searching, improved minor styling

---
 .../v2/HighlightText/HighlightText.tsx        | 28 ++--------
 .../components/PamSessionLogOutput.tsx        | 19 +++++--
 .../components/PamSessionLogsSection.tsx      | 56 +++++++++++++++----
 .../components/PamSessionRow.tsx              | 34 ++++++-----
 4 files changed, 84 insertions(+), 53 deletions(-)

diff --git a/frontend/src/components/v2/HighlightText/HighlightText.tsx b/frontend/src/components/v2/HighlightText/HighlightText.tsx
index c81dab2df..92fdc1d6d 100644
--- a/frontend/src/components/v2/HighlightText/HighlightText.tsx
+++ b/frontend/src/components/v2/HighlightText/HighlightText.tsx
@@ -9,22 +9,10 @@ export const HighlightText = ({
 }) => {
   if (!text) return null;
 
-  const renderTextWithNewlines = (input: string, baseKeyPrefix: string = ""): React.ReactNode[] => {
-    if (!input) return [];
-    const lines = input.split("\n");
-    return lines.flatMap((line, index) => {
-      const nodes: React.ReactNode[] = [line];
-      if (index < lines.length - 1) {
-        nodes.push(<br key={`${baseKeyPrefix}-br-${line}`} />);
-      }
-      return nodes;
-    });
-  };
-
   const searchTerm = highlight.toLowerCase().trim();
 
   if (!searchTerm) {
-    return <span>{renderTextWithNewlines(text, "full-text")}</span>;
+    return <span>{text}</span>;
   }
 
   const parts: React.ReactNode[] = [];
@@ -36,16 +24,12 @@ export const HighlightText = ({
   text.replace(regex, (match: string, offset: number) => {
     if (offset > lastIndex) {
       const preMatchText = text.substring(lastIndex, offset);
-      parts.push(
-        <span key={`pre-${lastIndex}`}>
-          {renderTextWithNewlines(preMatchText, `pre-${lastIndex}`)}
-        </span>
-      );
+      parts.push(<span key={`pre-${lastIndex}`}>{preMatchText}</span>);
     }
 
     parts.push(
       <span key={`match-${offset}`} className={highlightClassName || "bg-yellow/30"}>
-        {renderTextWithNewlines(match, `match-${offset}`)}
+        {match}
       </span>
     );
 
@@ -56,11 +40,7 @@ export const HighlightText = ({
 
   if (lastIndex < text.length) {
     const postMatchText = text.substring(lastIndex);
-    parts.push(
-      <span key={`post-${lastIndex}`}>
-        {renderTextWithNewlines(postMatchText, `post-${lastIndex}`)}
-      </span>
-    );
+    parts.push(<span key={`post-${lastIndex}`}>{postMatchText}</span>);
   }
 
   return parts;
diff --git a/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogOutput.tsx b/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogOutput.tsx
index a0cfb6cb9..99e30627d 100644
--- a/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogOutput.tsx
+++ b/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogOutput.tsx
@@ -1,5 +1,6 @@
 import { useState } from "react";
 
+import { HighlightText } from "@app/components/v2/HighlightText";
 import { PamResourceType } from "@app/hooks/api/pam";
 
 type TableLog = {
@@ -10,10 +11,12 @@ type TableLog = {
 
 export const PamSessionLogOutput = ({
   content,
-  resourceType
+  resourceType,
+  search
 }: {
   content: string;
   resourceType: PamResourceType;
+  search: string;
 }) => {
   const [isRawView, setIsRawView] = useState(false);
 
@@ -45,7 +48,9 @@ export const PamSessionLogOutput = ({
     return (
       <div className="font-sans">
         {isRawView ? (
-          <div className="font-mono break-all whitespace-pre-wrap">{content}</div>
+          <div className="font-mono break-all whitespace-pre-wrap">
+            <HighlightText text={content} highlight={search} />
+          </div>
         ) : (
           <>
             {parsedContent.command && (
@@ -57,7 +62,7 @@ export const PamSessionLogOutput = ({
                   <tr className="border-b border-mineshaft-600">
                     {headers.map((header) => (
                       <th key={header} className="p-2 font-semibold text-mineshaft-200 capitalize">
-                        {header.replace(/_/g, " ")}
+                        <HighlightText text={header.replace(/_/g, " ")} highlight={search} />
                       </th>
                     ))}
                   </tr>
@@ -71,7 +76,7 @@ export const PamSessionLogOutput = ({
                     >
                       {headers.map((header) => (
                         <td key={header} className="p-2">
-                          {String(row[header] ?? "")}
+                          <HighlightText text={String(row[header] ?? "")} highlight={search} />
                         </td>
                       ))}
                     </tr>
@@ -103,5 +108,9 @@ export const PamSessionLogOutput = ({
     );
   }
 
-  return <div className="font-mono break-all whitespace-pre-wrap">{content}</div>;
+  return (
+    <div className="font-mono break-all whitespace-pre-wrap">
+      <HighlightText text={content} highlight={search} />
+    </div>
+  );
 };
diff --git a/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.tsx b/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.tsx
index b3c287380..0fbccbc9b 100644
--- a/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.tsx
+++ b/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.tsx
@@ -1,8 +1,10 @@
-import { useState } from "react";
-import { faChevronRight } from "@fortawesome/free-solid-svg-icons";
+import { useMemo, useState } from "react";
+import { faChevronRight, faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
 
+import { Input } from "@app/components/v2";
+import { HighlightText } from "@app/components/v2/HighlightText";
 import { TPamSession } from "@app/hooks/api/pam";
 
 import { PamSessionLogOutput } from "./PamSessionLogOutput";
@@ -14,6 +16,7 @@ type Props = {
 
 export const PamSessionLogsSection = ({ session }: Props) => {
   const [expandedLogTimestamps, setExpandedLogTimestamps] = useState<Set<string>>(new Set());
+  const [search, setSearch] = useState("");
 
   const toggleExpand = (timestamp: string) => {
     setExpandedLogTimestamps((prev) => {
@@ -24,15 +27,43 @@ export const PamSessionLogsSection = ({ session }: Props) => {
     });
   };
 
+  const filteredLogs = useMemo(
+    () =>
+      session.commandLogs.filter((log) => {
+        const { input, output } = log;
+
+        const searchValue = search.trim().toLowerCase();
+
+        return (
+          input.toLowerCase().includes(searchValue) || output.toLowerCase().includes(searchValue)
+        );
+      }),
+    [session.commandLogs, search]
+  );
+
   return (
     <div className="flex h-full w-full flex-col gap-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="flex items-center border-b border-mineshaft-400 pb-4">
         <h3 className="text-lg font-medium text-mineshaft-100">Session Logs</h3>
       </div>
-      <div className="flex flex-col gap-2 overflow-y-auto text-xs">
-        {session.commandLogs.length > 0 ? (
-          session.commandLogs.map((log) => {
-            const isExpanded = expandedLogTimestamps.has(log.timestamp);
+
+      <div className="flex gap-2">
+        <Input
+          value={search}
+          onChange={(e) => {
+            const newSearch = e.target.value;
+            setSearch(newSearch);
+          }}
+          leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+          placeholder="Search logs..."
+          className="flex-1 bg-mineshaft-800"
+          containerClassName="bg-transparent"
+        />
+      </div>
+      <div className="flex grow flex-col gap-2 overflow-y-auto text-xs">
+        {filteredLogs.length > 0 ? (
+          filteredLogs.map((log) => {
+            const isExpanded = search.length || expandedLogTimestamps.has(log.timestamp);
             const formattedInput = formatLogContent(log.input);
 
             return (
@@ -62,7 +93,7 @@ export const PamSessionLogsSection = ({ session }: Props) => {
                     isExpanded ? "break-all whitespace-pre-wrap" : "truncate"
                   }`}
                 >
-                  {formattedInput}
+                  <HighlightText text={formattedInput} highlight={search} />
                 </div>
 
                 <div
@@ -83,6 +114,7 @@ export const PamSessionLogsSection = ({ session }: Props) => {
                           <PamSessionLogOutput
                             content={log.output}
                             resourceType={session.resourceType}
+                            search={search}
                           />
                         </div>
                       </>
@@ -93,8 +125,12 @@ export const PamSessionLogsSection = ({ session }: Props) => {
             );
           })
         ) : (
-          <div className="flex w-full grow items-center justify-center text-bunker-300">
-            {session.startedAt && session.endedAt ? (
+          <div className="flex grow items-center justify-center text-bunker-300">
+            {search.length ? (
+              <div className="text-center">
+                <div className="mb-2">No logs match search criteria</div>
+              </div>
+            ) : (
               <div className="text-center">
                 <div className="mb-2">Session logs are not yet available</div>
                 <div className="text-xs text-bunker-400">
@@ -103,8 +139,6 @@ export const PamSessionLogsSection = ({ session }: Props) => {
                   If logs do not appear after some time, please contact your Gateway administrators.
                 </div>
               </div>
-            ) : (
-              "No session logs"
             )}
           </div>
         )}
diff --git a/frontend/src/pages/pam/PamSessionsPage/components/PamSessionRow.tsx b/frontend/src/pages/pam/PamSessionsPage/components/PamSessionRow.tsx
index f730e331d..8721560c4 100644
--- a/frontend/src/pages/pam/PamSessionsPage/components/PamSessionRow.tsx
+++ b/frontend/src/pages/pam/PamSessionsPage/components/PamSessionRow.tsx
@@ -27,6 +27,7 @@ import { HighlightText } from "@app/components/v2/HighlightText";
 import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
 import { PAM_RESOURCE_TYPE_MAP, TPamSession } from "@app/hooks/api/pam";
 
+import { formatLogContent } from "../../PamSessionsByIDPage/components/PamSessionLogsSection.utils";
 import { PamSessionStatusBadge } from "./PamSessionStatusBadge";
 
 type Props = {
@@ -159,21 +160,28 @@ export const PamSessionRow = ({ session, search, filteredCommandLogs }: Props) =
       {filteredCommandLogs.length > 0 && (
         <Tr>
           <Td colSpan={5} className="py-3 text-xs">
-            {logsToShow.map((log) => (
-              <div key={`${id}-log-${log.timestamp}`} className="mb-4 flex flex-col last:mb-0">
-                <div className="flex items-center gap-1.5 text-bunker-400">
-                  <FontAwesomeIcon icon={faTerminal} className="size-3" />
-                  <span>{new Date(log.timestamp).toLocaleString()}</span>
-                </div>
+            {logsToShow.map((log) => {
+              const formattedInput = formatLogContent(log.input);
 
-                <div className="font-mono">
-                  <HighlightText text={log.input.trim()} highlight={search} />
+              return (
+                <div
+                  key={`${id}-log-${log.timestamp}`}
+                  className="mb-4 flex flex-col gap-1 last:mb-0"
+                >
+                  <div className="flex items-center gap-1.5 text-bunker-400">
+                    <FontAwesomeIcon icon={faTerminal} className="size-3" />
+                    <span>{new Date(log.timestamp).toLocaleString()}</span>
+                  </div>
+
+                  <div className="font-mono break-all whitespace-pre-wrap">
+                    <HighlightText text={formattedInput} highlight={search} />
+                  </div>
+                  <div className="font-mono text-bunker-300">
+                    <HighlightText text={log.output.trim()} highlight={search} />
+                  </div>
                 </div>
-                <div className="font-mono text-bunker-300">
-                  <HighlightText text={log.output.trim()} highlight={search} />
-                </div>
-              </div>
-            ))}
+              );
+            })}
             {filteredCommandLogs.length > LOGS_TO_SHOW && (
               <div className="mt-2">
                 <Button