From f06cbeb255d6d314e3b5b5c4644c7f0df7033602 Mon Sep 17 00:00:00 2001
From: swear01 <stanley.yellow1@gmail.com>
Date: Mon, 15 Jun 2026 06:02:01 +0000
Subject: [PATCH 1/2] fix(web): persist file explorer expanded tree and scroll
 position across navigation

Expanded folder state and scroll position in the Directories tab were
stored only in local React state, so navigating to a file and back
would reset the tree to the root and scroll to top.

Now both are saved to sessionStorage (keyed by sessionId) on every
change and restored on remount, so the explorer resumes exactly where
the user left off.

Closes #910

via [HAPI](https://hapi.run)

Co-Authored-By: HAPI <noreply@hapi.run>
---
 .../components/SessionFiles/DirectoryTree.tsx | 31 +++++++++++++++++--
 web/src/routes/sessions/files.tsx             | 27 ++++++++++++++--
 2 files changed, 54 insertions(+), 4 deletions(-)

diff --git a/web/src/components/SessionFiles/DirectoryTree.tsx b/web/src/components/SessionFiles/DirectoryTree.tsx
index 80b1e532a2..4f282cb33d 100644
--- a/web/src/components/SessionFiles/DirectoryTree.tsx
+++ b/web/src/components/SessionFiles/DirectoryTree.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import type { ApiClient } from '@/api/client'
 import { FileIcon } from '@/components/FileIcon'
 import { useSessionDirectory } from '@/hooks/queries/useSessionDirectory'
@@ -171,13 +171,40 @@ function DirectoryNode(props: {
     )
 }
 
+const STORAGE_KEY_PREFIX = 'hapi-dir-expanded-'
+
+function readExpanded(sessionId: string): Set<string> {
+    try {
+        const raw = sessionStorage.getItem(STORAGE_KEY_PREFIX + sessionId)
+        if (raw) {
+            const parsed = JSON.parse(raw)
+            if (Array.isArray(parsed)) return new Set(parsed as string[])
+        }
+    } catch {
+        // ignore
+    }
+    return new Set([''])
+}
+
+function writeExpanded(sessionId: string, expanded: Set<string>) {
+    try {
+        sessionStorage.setItem(STORAGE_KEY_PREFIX + sessionId, JSON.stringify([...expanded]))
+    } catch {
+        // ignore
+    }
+}
+
 export function DirectoryTree(props: {
     api: ApiClient | null
     sessionId: string
     rootLabel: string
     onOpenFile: (path: string) => void
 }) {
-    const [expanded, setExpanded] = useState<Set<string>>(() => new Set(['']))
+    const [expanded, setExpanded] = useState<Set<string>>(() => readExpanded(props.sessionId))
+
+    useEffect(() => {
+        writeExpanded(props.sessionId, expanded)
+    }, [props.sessionId, expanded])
 
     const handleToggle = useCallback((path: string) => {
         setExpanded((prev) => {
diff --git a/web/src/routes/sessions/files.tsx b/web/src/routes/sessions/files.tsx
index f8c698d76d..4ae7892adb 100644
--- a/web/src/routes/sessions/files.tsx
+++ b/web/src/routes/sessions/files.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useNavigate, useParams, useSearch } from '@tanstack/react-router'
 import type { FileSearchItem, GitFileStatus } from '@/types/api'
 import { FileIcon } from '@/components/FileIcon'
@@ -236,6 +236,8 @@ function FileListSkeleton(props: { label: string; rows?: number }) {
     )
 }
 
+const SCROLL_KEY_PREFIX = 'hapi-dir-scroll-'
+
 export default function FilesPage() {
     const { api } = useAppContext()
     const { t } = useTranslation()
@@ -246,10 +248,31 @@ export default function FilesPage() {
     const search = useSearch({ from: '/sessions/$sessionId/files' })
     const { session } = useSession(api, sessionId)
     const [searchQuery, setSearchQuery] = useState('')
+    const scrollRef = useRef<HTMLDivElement>(null)
 
     const initialTab = search.tab === 'directories' ? 'directories' : 'changes'
     const [activeTab, setActiveTab] = useState<'changes' | 'directories'>(initialTab)
 
+    useEffect(() => {
+        const el = scrollRef.current
+        if (!el) return
+        const key = SCROLL_KEY_PREFIX + sessionId
+        try {
+            const saved = sessionStorage.getItem(key)
+            if (saved !== null) el.scrollTop = Number(saved)
+        } catch {
+            // ignore
+        }
+        return () => {
+            try {
+                sessionStorage.setItem(key, String(el.scrollTop))
+            } catch {
+                // ignore
+            }
+        }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [sessionId])
+
     const {
         status: gitStatus,
         error: gitError,
@@ -411,7 +434,7 @@ export default function FilesPage() {
                 </div>
             ) : null}
 
-            <div className="app-scroll-y flex-1 min-h-0">
+            <div ref={scrollRef} className="app-scroll-y flex-1 min-h-0">
                 <div className="mx-auto w-full max-w-content">
                     {showGitErrorBanner && activeTab === 'changes' ? (
                         <div className="border-b border-[var(--app-divider)] bg-amber-500/10 px-3 py-2 text-xs text-[var(--app-hint)]">

From cb6b3fdcbc688dc5f2bf192cf34ff98eb4d7c8e2 Mon Sep 17 00:00:00 2001
From: swear01 <stanley.yellow1@gmail.com>
Date: Mon, 15 Jun 2026 06:39:52 +0000
Subject: [PATCH 2/2] fix(web): key DirectoryTree by sessionId to prevent stale
 expanded state across sessions

When navigating between sessions, React can reuse the same DirectoryTree
instance. The useState lazy initializer only runs on first mount, so the
tree would hydrate with the wrong session's expanded set and then
overwrite the new session's storage key.

Adding key={sessionId} forces a fresh mount per session.

via [HAPI](https://hapi.run)

Co-Authored-By: HAPI <noreply@hapi.run>
---
 web/src/routes/sessions/files.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web/src/routes/sessions/files.tsx b/web/src/routes/sessions/files.tsx
index 4ae7892adb..a77e05b7a3 100644
--- a/web/src/routes/sessions/files.tsx
+++ b/web/src/routes/sessions/files.tsx
@@ -464,6 +464,7 @@ export default function FilesPage() {
                         )
                     ) : activeTab === 'directories' ? (
                         <DirectoryTree
+                            key={sessionId}
                             api={api}
                             sessionId={sessionId}
                             rootLabel={rootLabel}