From 272c9433d81b1ee8e23746a3f36f63504a2fa9ee Mon Sep 17 00:00:00 2001 From: Claude Code Agent Date: Wed, 28 Jan 2026 14:09:44 +0000 Subject: [PATCH 1/3] Story RHOAIENG-45393: Add left panel hide and resize capabilities This commit implements the left panel improvements requested in the Jira story: Features implemented: 1. Hide/Show functionality: - Users can hide the left panel by clicking a button at the bottom - Panel visibility state persists in localStorage (session-left-panel-visible) - Floating show button appears when panel is hidden - Mobile view remains unchanged with existing overlay behavior 2. Resizable width: - Uses react-resizable-panels library for smooth resize experience - Drag the resize handle between left panel and messages area - Width constraints: Min 20%, Max 50%, Default 30% - Width preference persists in localStorage (session-left-panel-size) - Text intelligently wraps/truncates as width changes 3. Implementation details: - Added ChevronLeft and ChevronRight icons from lucide-react - Integrated Panel, PanelGroup, and PanelResizeHandle from react-resizable-panels - Desktop uses resizable panels, mobile maintains overlay behavior - All state persists across page refreshes using localStorage Technical notes: - react-resizable-panels was already installed (v3.0.6) - Frontend builds successfully without errors - SSR-safe with proper window checks for localStorage - Clean separation between desktop and mobile layouts Jira: https://issues.redhat.com/browse/RHOAIENG-45393 Co-Authored-By: Claude (claude-sonnet-4-5) --- .../[name]/sessions/[sessionName]/page.tsx | 617 +++++++++++++++++- 1 file changed, 594 insertions(+), 23 deletions(-) diff --git a/components/frontend/src/app/projects/[name]/sessions/[sessionName]/page.tsx b/components/frontend/src/app/projects/[name]/sessions/[sessionName]/page.tsx index 1776504c9..f0be277d3 100644 --- a/components/frontend/src/app/projects/[name]/sessions/[sessionName]/page.tsx +++ b/components/frontend/src/app/projects/[name]/sessions/[sessionName]/page.tsx @@ -18,7 +18,10 @@ import { Download, SlidersHorizontal, ArrowLeft, + ChevronLeft, + ChevronRight, } from "lucide-react"; +import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels"; import { useRouter } from "next/navigation"; import { cn } from "@/lib/utils"; @@ -156,6 +159,18 @@ export default function ProjectSessionDetailPage({ const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const [userHasInteracted, setUserHasInteracted] = useState(false); + // Left panel visibility and size state + const [leftPanelVisible, setLeftPanelVisible] = useState(() => { + if (typeof window === 'undefined') return true; + const saved = localStorage.getItem('session-left-panel-visible'); + return saved === null ? true : saved === 'true'; + }); + const [leftPanelSize, setLeftPanelSize] = useState(() => { + if (typeof window === 'undefined') return 30; + const saved = localStorage.getItem('session-left-panel-size'); + return saved ? parseFloat(saved) : 30; + }); + // Directory browser state (unified for artifacts, repos, and workflow) const [selectedDirectory, setSelectedDirectory] = useState({ type: "artifacts", @@ -182,6 +197,16 @@ export default function ProjectSessionDetailPage({ }); }, [params]); + // Persist left panel visibility + useEffect(() => { + localStorage.setItem('session-left-panel-visible', String(leftPanelVisible)); + }, [leftPanelVisible]); + + // Persist left panel size + useEffect(() => { + localStorage.setItem('session-left-panel-size', String(leftPanelSize)); + }, [leftPanelSize]); + // Session queue hook (localStorage-backed) const sessionQueue = useSessionQueue(projectName, sessionName); @@ -1408,33 +1433,42 @@ export default function ProjectSessionDetailPage({ {/* Main content area */}
-
+
{/* Mobile sidebar overlay */} {mobileMenuOpen && ( -
setMobileMenuOpen(false)} /> )} - {/* Left Column - Accordions */} -
- {/* Mobile close button */} -
- -
-
+ {/* Floating show button when panel is hidden (desktop only) */} + {!leftPanelVisible && !mobileMenuOpen && ( + + )} + + {/* Desktop resizable panels */} + + {leftPanelVisible && ( + <> + setLeftPanelSize(size)} + className="relative" + > + {/* Left Column - Accordions */} +
+
-
- {/* Right Column - Messages */} -
+ {/* Hide panel button at bottom */} +
+ +
+
+ + + + )} + + {/* Right Column - Messages */} + +
{/* Repository change overlay */} @@ -1931,6 +1983,525 @@ export default function ProjectSessionDetailPage({
+
+ + + + {/* Mobile view (unchanged) */} +
+ + + {repoChanging && ( +
+ + + Updating Repositories... + +
+

+ Please wait while repositories are being + updated. This may take 10-20 seconds... +

+
+ + +
+ )} + +
+ Promise.resolve(sendChat())} + onInterrupt={aguiInterrupt} + onEndSession={() => Promise.resolve(handleEndSession())} + onGoToResults={() => {}} + onContinue={handleContinue} + workflowMetadata={workflowMetadata} + onCommandClick={handleCommandClick} + isRunActive={isRunActive} + showWelcomeExperience={true} + activeWorkflow={workflowManagement.activeWorkflow} + userHasInteracted={userHasInteracted} + queuedMessages={sessionQueue.messages} + hasRealMessages={hasRealMessages} + welcomeExperienceComponent={ + setUserHasInteracted(true)} + userHasInteracted={userHasInteracted} + sessionPhase={session?.status?.phase} + hasRealMessages={hasRealMessages} + onLoadWorkflow={() => setCustomWorkflowDialogOpen(true)} + selectedWorkflow={workflowManagement.selectedWorkflow} + /> + } + /> +
+ + +
+ + {/* Mobile left panel sidebar */} +
+ {/* Mobile close button */} +
+ +
+
+ + + + ({ + name: f.name, + path: f.path, + size: f.size, + }))} + onAddRepository={() => setContextModalOpen(true)} + onRemoveRepository={(repoName) => + removeRepoMutation.mutate(repoName) + } + onRemoveFile={(fileName) => + removeFileMutation.mutate(fileName) + } + /> + + + + + + {/* File Explorer */} + + +
+ + File Explorer + + EXPERIMENTAL + + {gitOps.gitStatus?.hasChanges && ( +
+ {(gitOps.gitStatus?.totalAdded ?? 0) > 0 && ( + + +{gitOps.gitStatus.totalAdded} + + )} + {(gitOps.gitStatus?.totalRemoved ?? 0) > 0 && ( + + -{gitOps.gitStatus.totalRemoved} + + )} +
+ )} +
+ + +
+

+ Browse, view, and manage files in your workspace + directories. Track changes and sync with Git for + version control. +

+ + {/* Directory Selector */} +
+ + +
+ + {/* File Browser */} +
+
+
+ {(fileOps.currentSubPath || + fileOps.viewingFile) && ( + + )} + + + + {selectedDirectory.path} + {fileOps.currentSubPath && + `/${fileOps.currentSubPath}`} + {fileOps.viewingFile && + `/${fileOps.viewingFile.path}`} + +
+ + {fileOps.viewingFile ? ( +
+ + + + + + + + Sync to Jira - Coming soon + + + Sync to GDrive - Coming soon + + + +
+ ) : ( +
+ + +
+ )} +
+ +
+ {fileOps.loadingFile ? ( +
+ +
+ ) : fileOps.viewingFile ? ( +
+ 
+                                    {fileOps.viewingFile.content}
+
+
+ ) : directoryFiles.length === 0 ? ( +
+ +

No files yet

+

+ Files will appear here +

+
+ ) : ( + ({ + name: item.name, + path: item.path, + type: item.isDir ? "folder" : "file", + sizeKb: item.size + ? item.size / 1024 + : undefined, + }), + )} + onSelect={fileOps.handleFileOrFolderSelect} + /> + )} +
+
+ + {/* Remote Configuration */} + {!currentRemote ? ( +
+ + Set up Git remote for version control + + +
+ ) : ( +
+
+
+ + + {currentRemote?.url + ?.split("/") + .slice(-2) + .join("/") + .replace(".git", "") || ""} + /{currentRemote?.branch || "main"} + +
+ +
+ + {mergeStatus && !mergeStatus.canMergeClean ? ( +
+ + + conflict + +
+ ) : gitOps.gitStatus?.hasChanges || + mergeStatus?.remoteCommitsAhead ? ( +
+ {mergeStatus?.remoteCommitsAhead ? ( + + ↓{mergeStatus.remoteCommitsAhead} + + ) : null} + {gitOps.gitStatus?.hasChanges ? ( + + {gitOps.gitStatus?.uncommittedFiles ?? + 0}{" "} + uncommitted + + ) : null} +
+ ) : null} + + + + + + + +

+ {gitOps.gitStatus?.hasChanges + ? "Commit changes first" + : `Sync with origin/${currentRemote?.branch || "main"}`} +

+ + + + + + + + + + setRemoteDialogOpen(true)} + > + + Manage Remote + + + setCommitModalOpen(true)} + disabled={!gitOps.gitStatus?.hasChanges} + > + + Commit Changes + + + gitOps.handleGitPull(refetchMergeStatus) + } + disabled={ + !mergeStatus?.canMergeClean || + gitOps.isPulling + } + > + + Pull + + + gitOps.handleGitPush(refetchMergeStatus) + } + disabled={ + !mergeStatus?.canMergeClean || + gitOps.isPushing || + gitOps.gitStatus?.hasChanges + } + > + + Push + + + { + const newRemotes = { + ...directoryRemotes, + }; + delete newRemotes[ + selectedDirectory.path + ]; + setDirectoryRemotes(newRemotes); + successToast("Git remote disconnected"); + }} + > + + Disconnect + + + +
+
+ )} +
+ + + +
From d2b6b1250fe7845be540edda7d9dffe15d34730e Mon Sep 17 00:00:00 2001 From: Jeremy Eder Date: Thu, 29 Jan 2026 00:02:54 -0500 Subject: [PATCH 2/3] fix: Remove duplicate import lines causing ESLint parse error --- .../src/app/projects/[name]/sessions/[sessionName]/page.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/components/frontend/src/app/projects/[name]/sessions/[sessionName]/page.tsx b/components/frontend/src/app/projects/[name]/sessions/[sessionName]/page.tsx index 394c78f0d..739486f7e 100644 --- a/components/frontend/src/app/projects/[name]/sessions/[sessionName]/page.tsx +++ b/components/frontend/src/app/projects/[name]/sessions/[sessionName]/page.tsx @@ -2567,8 +2567,4 @@ export default function ProjectSessionDetailPage({ /> ); -} ChevronLeft, - ChevronRight, - AlertTriangle, - X, - MoreVertical, +} From e67c31d69fe57d619cd469c17ce6ff55c27b758e Mon Sep 17 00:00:00 2001 From: Jeremy Eder Date: Thu, 29 Jan 2026 00:06:05 -0500 Subject: [PATCH 3/3] fix: Add missing imports and FeedbackProvider wrapper - Add missing lucide-react icons: RefreshCw, Edit, CloudDownload - Add missing UI components: Tooltip, TooltipProvider, TooltipTrigger, TooltipContent, DropdownMenuSeparator - Wrap MessagesTab with FeedbackProvider for both desktop and mobile views - Fix unused variable warnings by using currentUser and langfuseTraceId in FeedbackProvider --- .../[name]/sessions/[sessionName]/page.tsx | 156 +++++++++++------- 1 file changed, 94 insertions(+), 62 deletions(-) diff --git a/components/frontend/src/app/projects/[name]/sessions/[sessionName]/page.tsx b/components/frontend/src/app/projects/[name]/sessions/[sessionName]/page.tsx index 739486f7e..05dd9cc4c 100644 --- a/components/frontend/src/app/projects/[name]/sessions/[sessionName]/page.tsx +++ b/components/frontend/src/app/projects/[name]/sessions/[sessionName]/page.tsx @@ -18,6 +18,9 @@ import { AlertTriangle, X, MoreVertical, + RefreshCw, + Edit, + CloudDownload, } from "lucide-react"; import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels"; import { useRouter } from "next/navigation"; @@ -49,8 +52,15 @@ import { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, + DropdownMenuSeparator, } from "@/components/ui/dropdown-menu"; import { Label } from "@/components/ui/label"; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "@/components/ui/tooltip"; import { Breadcrumbs } from "@/components/breadcrumbs"; import { SessionHeader } from "./session-header"; import { getPhaseColor } from "@/utils/session-helpers"; @@ -1993,37 +2003,48 @@ export default function ProjectSessionDetailPage({ )}
- Promise.resolve(sendChat())} - onInterrupt={aguiInterrupt} - onEndSession={() => Promise.resolve(handleEndSession())} - onGoToResults={() => {}} - onContinue={handleContinue} - workflowMetadata={workflowMetadata} - onCommandClick={handleCommandClick} - isRunActive={isRunActive} - showWelcomeExperience={true} - activeWorkflow={workflowManagement.activeWorkflow} - userHasInteracted={userHasInteracted} - queuedMessages={sessionQueue.messages} - hasRealMessages={hasRealMessages} - welcomeExperienceComponent={ - setUserHasInteracted(true)} - userHasInteracted={userHasInteracted} - sessionPhase={session?.status?.phase} - hasRealMessages={hasRealMessages} - onLoadWorkflow={() => setCustomWorkflowDialogOpen(true)} - selectedWorkflow={workflowManagement.selectedWorkflow} - /> - } - /> + + Promise.resolve(sendChat())} + onInterrupt={aguiInterrupt} + onEndSession={() => Promise.resolve(handleEndSession())} + onGoToResults={() => {}} + onContinue={handleContinue} + workflowMetadata={workflowMetadata} + onCommandClick={handleCommandClick} + isRunActive={isRunActive} + showWelcomeExperience={true} + activeWorkflow={workflowManagement.activeWorkflow} + userHasInteracted={userHasInteracted} + queuedMessages={sessionQueue.messages} + hasRealMessages={hasRealMessages} + welcomeExperienceComponent={ + setUserHasInteracted(true)} + userHasInteracted={userHasInteracted} + sessionPhase={session?.status?.phase} + hasRealMessages={hasRealMessages} + onLoadWorkflow={() => setCustomWorkflowDialogOpen(true)} + selectedWorkflow={workflowManagement.selectedWorkflow} + /> + } + /> +
@@ -2056,37 +2077,48 @@ export default function ProjectSessionDetailPage({ )}
- Promise.resolve(sendChat())} - onInterrupt={aguiInterrupt} - onEndSession={() => Promise.resolve(handleEndSession())} - onGoToResults={() => {}} - onContinue={handleContinue} - workflowMetadata={workflowMetadata} - onCommandClick={handleCommandClick} - isRunActive={isRunActive} - showWelcomeExperience={true} - activeWorkflow={workflowManagement.activeWorkflow} - userHasInteracted={userHasInteracted} - queuedMessages={sessionQueue.messages} - hasRealMessages={hasRealMessages} - welcomeExperienceComponent={ - setUserHasInteracted(true)} - userHasInteracted={userHasInteracted} - sessionPhase={session?.status?.phase} - hasRealMessages={hasRealMessages} - onLoadWorkflow={() => setCustomWorkflowDialogOpen(true)} - selectedWorkflow={workflowManagement.selectedWorkflow} - /> - } - /> + + Promise.resolve(sendChat())} + onInterrupt={aguiInterrupt} + onEndSession={() => Promise.resolve(handleEndSession())} + onGoToResults={() => {}} + onContinue={handleContinue} + workflowMetadata={workflowMetadata} + onCommandClick={handleCommandClick} + isRunActive={isRunActive} + showWelcomeExperience={true} + activeWorkflow={workflowManagement.activeWorkflow} + userHasInteracted={userHasInteracted} + queuedMessages={sessionQueue.messages} + hasRealMessages={hasRealMessages} + welcomeExperienceComponent={ + setUserHasInteracted(true)} + userHasInteracted={userHasInteracted} + sessionPhase={session?.status?.phase} + hasRealMessages={hasRealMessages} + onLoadWorkflow={() => setCustomWorkflowDialogOpen(true)} + selectedWorkflow={workflowManagement.selectedWorkflow} + /> + } + /> +