From 51be05d588cf5af2a00ae6b7dccd5fc796d5a982 Mon Sep 17 00:00:00 2001
From: Hermes Agent <hermes@local>
Date: Sat, 19 Sep 2026 13:55:34 +0200
Subject: [PATCH] =?UTF-8?q?ui:=20semantic=20window=20layout=20=E2=80=94=20?=
 =?UTF-8?q?header/nav/main/footer=20(custom=20markup,=20body=20flex-stretc?=
 =?UTF-8?q?hed)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/ui.tsx | 63 ++++++++++++++++++++++++++----------------------------
 1 file changed, 30 insertions(+), 33 deletions(-)

diff --git a/src/ui.tsx b/src/ui.tsx
index 12b5b69..8742cd4 100644
--- a/src/ui.tsx
+++ b/src/ui.tsx
@@ -6,8 +6,6 @@ import {
   VerticalSpace,
   Divider,
   Stack,
-  Columns,
-  Inline,
   Modal,
   IconButton,
   IconExpand24,
@@ -323,38 +321,37 @@ function Plugin () {
   return (
     <div className="plugin-root" style={{ position: 'relative', width: '100%', height: '100%' }}>
       <Container space="medium" style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
-        {/* Top: header + divider (Stack == vertical rhythm, divider is part of it) */}
-        <Stack space="small">
-          <Columns space="medium">
-            <Text style={{ fontSize: '13px', fontWeight: 600 }}>Settings</Text>
-            <div style={{ flex: 1 }} />
-            <Inline space="small">
-              <IconButton title="Stub action" onClick={function () {}}>
-                <IconWand24 />
-              </IconButton>
-              <IconButton title="Stub action" onClick={function () {}}>
-                <IconComponent24 />
-              </IconButton>
-              <IconButton
-                title={isMaximized ? 'Restore window' : 'Maximize window'}
-                onClick={toggleWindowSize}
-              >
-                {isMaximized ? <IconCollapse24 /> : <IconExpand24 />}
-              </IconButton>
-              <IconButton title="More" onClick={function () { setMoreOpen(true) }}>
-                <IconMore24 />
-              </IconButton>
-            </Inline>
-          </Columns>
-          <Divider />
-        </Stack>
-        {/* Body — stretches (flex child of the Container column); empty placeholder for now */}
-        <div style={{ flex: 1 }} />
-        {/* Bottom: divider + footer status bar (Stack) */}
-        <Stack space="small">
-          <Divider />
+        {/* Header — navigation bar */}
+        <header style={{ display: 'flex', alignItems: 'center', flex: '0 0 auto' }}>
+          <Text style={{ fontSize: '13px', fontWeight: 600 }}>Settings</Text>
+          <nav style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-4)', marginLeft: 'auto' }}>
+            <IconButton title="Stub action" onClick={function () {}}>
+              <IconWand24 />
+            </IconButton>
+            <IconButton title="Stub action" onClick={function () {}}>
+              <IconComponent24 />
+            </IconButton>
+            <IconButton
+              title={isMaximized ? 'Restore window' : 'Maximize window'}
+              onClick={toggleWindowSize}
+            >
+              {isMaximized ? <IconCollapse24 /> : <IconExpand24 />}
+            </IconButton>
+            <IconButton title="More" onClick={function () { setMoreOpen(true) }}>
+              <IconMore24 />
+            </IconButton>
+          </nav>
+        </header>
+        <Divider />
+        {/* Body — semantic <main>, stretches via flex child of the column */}
+        <main style={{ flex: '1 1 auto', overflow: 'auto' }}>
+          {/* empty placeholder for now */}
+        </main>
+        {/* Footer — status bar */}
+        <Divider />
+        <footer style={{ display: 'flex', alignItems: 'center', flex: '0 0 auto' }}>
           <Muted style={{ fontSize: '11px' }}>Version {PLUGIN_VERSION}</Muted>
-        </Stack>
+        </footer>
       </Container>
       {/* More-menu modal — old-plugin style: library Modal + Container + Stack of MenuItem */}
       <Modal open={moreOpen} onClose={function () { setMoreOpen(false) }} onOverlayClick={function () { setMoreOpen(false) }}>