From f5f4c2cfb1e17868244a9b50eed26fb14d383c46 Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Mon, 27 Apr 2026 15:01:30 -0500
Subject: [PATCH] fix(tui): reserve overlay panel footers

Let overlay grid panels define footer content outside the clipped body so hints and pager controls stay visible under height caps.
---
 ui-tui/src/components/appOverlays.tsx    | 14 +++++++-------
 ui-tui/src/components/learningLedger.tsx |  2 +-
 ui-tui/src/components/overlayGrid.tsx    |  8 +++++++-
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/ui-tui/src/components/appOverlays.tsx b/ui-tui/src/components/appOverlays.tsx
index f85b1d3b60..2d0ff569ae 100644
--- a/ui-tui/src/components/appOverlays.tsx
+++ b/ui-tui/src/components/appOverlays.tsx
@@ -214,15 +214,15 @@ export function FloatingOverlays({
                       <Text key={i}>{line}</Text>
                     ))}
 
-                  <Box marginTop={1}>
-                    <OverlayHint t={ui.theme}>
-                      {overlay.pager.offset + pagerPageSize < overlay.pager.lines.length
-                        ? `↑↓/jk line · Enter/Space/PgDn page · b/PgUp back · g/G top/bottom · Esc/q close (${Math.min(overlay.pager.offset + pagerPageSize, overlay.pager.lines.length)}/${overlay.pager.lines.length})`
-                        : `end · ↑↓/jk · b/PgUp back · g top · Esc/q close (${overlay.pager.lines.length} lines)`}
-                    </OverlayHint>
-                  </Box>
                 </Box>
               ),
+              footer: (
+                <OverlayHint t={ui.theme}>
+                  {overlay.pager.offset + pagerPageSize < overlay.pager.lines.length
+                    ? `↑↓/jk line · Enter/Space/PgDn page · b/PgUp back · g/G top/bottom · Esc/q close (${Math.min(overlay.pager.offset + pagerPageSize, overlay.pager.lines.length)}/${overlay.pager.lines.length})`
+                    : `end · ↑↓/jk · b/PgUp back · g top · Esc/q close (${overlay.pager.lines.length} lines)`}
+                </OverlayHint>
+              ),
               id: 'pager',
               title: overlay.pager.title
             }
diff --git a/ui-tui/src/components/learningLedger.tsx b/ui-tui/src/components/learningLedger.tsx
index d8b378a709..0330fa0ede 100644
--- a/ui-tui/src/components/learningLedger.tsx
+++ b/ui-tui/src/components/learningLedger.tsx
@@ -152,6 +152,7 @@ export function LearningLedger({ borderColor, gw, maxHeight, onClose, t, width:
       panels={[
         {
           content: listPanel,
+          footer: <OverlayHint t={t}>↑/↓ select · Enter/Space details · 1-9,0 quick · Esc/q close</OverlayHint>,
           grow: 7,
           id: 'learning-list',
           title: 'Recent Learning'
@@ -205,7 +206,6 @@ function LearningList({ counts, items, ledger, offset, selectedIndex, t }: Learn
         <Text color={t.color.muted}> ↓ {(ledger?.items?.length ?? items.length) - offset - VISIBLE_ROWS} more</Text>
       )}
 
-      <OverlayHint t={t}>↑/↓ select · Enter/Space details · 1-9,0 quick · Esc/q close</OverlayHint>
     </Box>
   )
 }
diff --git a/ui-tui/src/components/overlayGrid.tsx b/ui-tui/src/components/overlayGrid.tsx
index ecb1fbc92a..a7e37c4d02 100644
--- a/ui-tui/src/components/overlayGrid.tsx
+++ b/ui-tui/src/components/overlayGrid.tsx
@@ -40,9 +40,14 @@ export function OverlayGrid({ borderColor, maxHeight, panels, t, width }: Overla
                   {panel.title}
                 </Text>
               ) : null}
-              <Box flexDirection="column" height={innerHeight ? Math.max(1, innerHeight - (panel.title ? 1 : 0)) : undefined} overflow="hidden">
+              <Box
+                flexDirection="column"
+                height={innerHeight ? Math.max(1, innerHeight - (panel.title ? 1 : 0) - (panel.footer ? 1 : 0)) : undefined}
+                overflow="hidden"
+              >
                 {panel.content}
               </Box>
+              {panel.footer ? <Box flexDirection="column">{panel.footer}</Box> : null}
             </Box>
             {!last ? <Box flexShrink={0} width={GAP} /> : null}
           </Box>
@@ -54,6 +59,7 @@ export function OverlayGrid({ borderColor, maxHeight, panels, t, width }: Overla
 
 export interface OverlayGridPanel {
   content: ReactNode
+  footer?: ReactNode
   grow?: number
   id: string
   title?: string