From 837c1b3b2b56c2307b0c8f1c12f29a8914d24cf8 Mon Sep 17 00:00:00 2001
From: x032205 <x032205@gmail.com>
Date: Sat, 4 Oct 2025 04:09:03 -0400
Subject: [PATCH] improve PAM session log rows

---
 .../PamSessionByIDPage.tsx                    |  6 +-
 .../components/PamSessionLogsSection.tsx      | 68 ++++++++++++++-----
 2 files changed, 55 insertions(+), 19 deletions(-)

diff --git a/frontend/src/pages/pam/PamSessionsByIDPage/PamSessionByIDPage.tsx b/frontend/src/pages/pam/PamSessionsByIDPage/PamSessionByIDPage.tsx
index 12574a054..b82c6b6e7 100644
--- a/frontend/src/pages/pam/PamSessionsByIDPage/PamSessionByIDPage.tsx
+++ b/frontend/src/pages/pam/PamSessionsByIDPage/PamSessionByIDPage.tsx
@@ -21,16 +21,16 @@ const Page = () => {
   return (
     <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
       {session && (
-        <div className="mx-auto mb-6 w-full max-w-7xl">
+        <div className="mx-auto mb-6 flex w-full max-w-7xl flex-col">
           <PageHeader
             title={`${session.accountName} Session`}
             description={`View details for this ${session.accountName} session.`}
           />
           <div className="flex">
-            <div className="mr-4 w-96">
+            <div className="mr-4 flex h-fit w-96">
               <PamSessionDetailsSection session={session} />
             </div>
-            <div className="w-full">
+            <div className="flex w-full min-w-0">
               <PamSessionLogsSection session={session} />
             </div>
           </div>
diff --git a/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.tsx b/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.tsx
index a25db4c3c..b0a2f9890 100644
--- a/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.tsx
+++ b/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.tsx
@@ -1,5 +1,6 @@
-import { faTerminal } from "@fortawesome/free-solid-svg-icons";
+import { faChevronRight, faChevronDown } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useState } from "react";
 
 import { TPamSession } from "@app/hooks/api/pam";
 
@@ -8,28 +9,63 @@ type Props = {
 };
 
 export const PamSessionLogsSection = ({ session }: Props) => {
+  const [expandedLogTimestamps, setExpandedLogTimestamps] = useState<Set<string>>(new Set());
+
+  const toggleExpand = (timestamp: string) => {
+    setExpandedLogTimestamps((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(timestamp)) {
+        newSet.delete(timestamp);
+      } else {
+        newSet.add(timestamp);
+      }
+      return newSet;
+    });
+  };
+
   return (
-    <div className="flex h-full flex-col gap-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <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-semibold text-mineshaft-100">Session Logs</h3>
       </div>
-      <div className="flex grow flex-col gap-8 overflow-y-auto text-xs">
+      <div className="flex flex-col gap-2 overflow-y-auto text-xs">
         {session.commandLogs.length > 0 ? (
-          session.commandLogs.map((log) => (
-            <div key={log.timestamp} className="flex flex-col">
-              <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>
+          session.commandLogs.map((log) => {
+            const isExpanded = expandedLogTimestamps.has(log.timestamp);
+            return (
+              <div
+                key={log.timestamp}
+                className={`flex cursor-pointer flex-col rounded-md border border-mineshaft-700 p-3 ${
+                  isExpanded ? "bg-mineshaft-700" : "bg-mineshaft-800"
+                }`}
+                onClick={() => toggleExpand(log.timestamp)}
+              >
+                <div className="flex items-center justify-between text-bunker-400">
+                  <div className="flex select-none items-center gap-2">
+                    <FontAwesomeIcon
+                      icon={isExpanded ? faChevronDown : faChevronRight}
+                      className="size-3 transition-transform duration-200"
+                    />
+                    <span>{new Date(log.timestamp).toLocaleString()}</span>
+                  </div>
+                </div>
 
-              <div className="overflow-hidden whitespace-pre-wrap break-all font-mono">
-                {log.input}
+                <div
+                  className={`mt-2 font-mono ${
+                    isExpanded ? "whitespace-pre-wrap break-all" : "truncate"
+                  }`}
+                >
+                  {log.input}
+                </div>
+
+                {isExpanded && log.output && (
+                  <div className="mt-2 whitespace-pre-wrap break-all border-t border-mineshaft-700 pt-2 font-mono text-bunker-300">
+                    {log.output}
+                  </div>
+                )}
               </div>
-              <div className="overflow-hidden whitespace-pre-wrap break-all font-mono text-bunker-300">
-                {log.output}
-              </div>
-            </div>
-          ))
+            );
+          })
         ) : (
           <div className="flex w-full grow items-center justify-center text-bunker-300">
             No session logs