From ff190e395b33375583b80722699062dd97490b2d Mon Sep 17 00:00:00 2001
From: Tyler Koenig <tyler@lerkolabs.com>
Date: Sat, 16 May 2026 20:46:23 -0400
Subject: [PATCH] feat(ui): context-sensitive z key (focus mode)

- Nothing selected: z toggles zen (hide both panels)
- Item selected: z expands peek to full width (focus mode)
- z again or Esc exits focus mode and deselects
- j/k still cycle items while in focus mode
---
 web/app.js    | 23 +++++++++++++++++++++++
 web/style.css |  5 +++++
 2 files changed, 28 insertions(+)

diff --git a/web/app.js b/web/app.js
index 76cda7c..a34351d 100644
--- a/web/app.js
+++ b/web/app.js
@@ -1451,6 +1451,14 @@
       return;
     }
 
+    if (ev.key === 'Escape' && $('main').classList.contains('focus-peek')) {
+      exitFocusPeek();
+      state.selectedIndex = -1;
+      renderEntityList();
+      renderDetailPane();
+      return;
+    }
+
     const sel = state.entities[state.selectedIndex];
 
     switch (ev.key) {
@@ -1534,6 +1542,17 @@
 
   function toggleZen() {
     const m = $('main');
+
+    if (m.classList.contains('focus-peek')) {
+      exitFocusPeek();
+      return;
+    }
+
+    if (state.selectedIndex >= 0) {
+      m.classList.add('focus-peek');
+      return;
+    }
+
     const isZen = m.classList.contains('hide-rail') && m.classList.contains('hide-peek');
     if (isZen) {
       m.classList.remove('hide-rail', 'hide-peek');
@@ -1546,6 +1565,10 @@
     }
   }
 
+  function exitFocusPeek() {
+    $('main').classList.remove('focus-peek');
+  }
+
   (function restorePanels() {
     const m = $('main');
     if (localStorage.getItem('nib:hide-rail')) m.classList.add('hide-rail');
diff --git a/web/style.css b/web/style.css
index 3c8f362..2e3863a 100644
--- a/web/style.css
+++ b/web/style.css
@@ -193,6 +193,11 @@ main.hide-peek #detail-pane { overflow: hidden; border-left: none; min-width: 0;
 main.hide-rail .resize-handle[data-panel="rail"] { visibility: hidden; }
 main.hide-peek .resize-handle[data-panel="peek"] { visibility: hidden; }
 
+main.focus-peek { grid-template-columns: 0px 0px 0px 0px 1fr; }
+main.focus-peek #tag-rail { overflow: hidden; border-right: none; min-width: 0; }
+main.focus-peek #entity-panel { overflow: hidden; min-width: 0; }
+main.focus-peek .resize-handle { visibility: hidden; }
+
 .resize-handle {
     cursor: col-resize;
     background: transparent;