From 5e8b3fd5c91ce448987e51246fe887efc98ccf30 Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Sun, 14 Dec 2025 13:24:47 +0000
Subject: [PATCH] Keep session chrome in info view

---
 .../components/instance/instance-shell2.tsx   | 122 ++++++++++--------
 1 file changed, 66 insertions(+), 56 deletions(-)

diff --git a/packages/ui/src/components/instance/instance-shell2.tsx b/packages/ui/src/components/instance/instance-shell2.tsx
index b95f5763..43747c15 100644
--- a/packages/ui/src/components/instance/instance-shell2.tsx
+++ b/packages/ui/src/components/instance/instance-shell2.tsx
@@ -924,28 +924,31 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
               </div>
             }
           >
-            <div class="session-toolbar-left flex items-center gap-3 min-w-0">
-              <IconButton
-                ref={setLeftToggleButtonEl}
-                color="inherit"
-                onClick={handleLeftAppBarButtonClick}
-                aria-label={leftAppBarButtonLabel()}
-                size="small"
-                aria-expanded={leftDrawerState() !== "floating-closed"}
-                disabled={leftDrawerState() === "pinned"}
-              >
-                {leftAppBarButtonIcon()}
-              </IconButton>
+             <div class="session-toolbar-left flex items-center gap-3 min-w-0">
+               <IconButton
+                 ref={setLeftToggleButtonEl}
+                 color="inherit"
+                 onClick={handleLeftAppBarButtonClick}
+                 aria-label={leftAppBarButtonLabel()}
+                 size="small"
+                 aria-expanded={leftDrawerState() !== "floating-closed"}
+                 disabled={leftDrawerState() === "pinned"}
+               >
+                 {leftAppBarButtonIcon()}
+               </IconButton>
+
+               <Show when={!showingInfoView()}>
+                 <div class="inline-flex items-center gap-1 rounded-full border border-base px-2 py-0.5 text-xs text-primary">
+                   <span class="uppercase text-[10px] tracking-wide text-primary/70">Used</span>
+                   <span class="font-semibold text-primary">{formattedUsedTokens()}</span>
+                 </div>
+                 <div class="inline-flex items-center gap-1 rounded-full border border-base px-2 py-0.5 text-xs text-primary">
+                   <span class="uppercase text-[10px] tracking-wide text-primary/70">Avail</span>
+                   <span class="font-semibold text-primary">{formattedAvailableTokens()}</span>
+                 </div>
+               </Show>
+             </div>
 
-              <div class="inline-flex items-center gap-1 rounded-full border border-base px-2 py-0.5 text-xs text-primary">
-                <span class="uppercase text-[10px] tracking-wide text-primary/70">Used</span>
-                <span class="font-semibold text-primary">{formattedUsedTokens()}</span>
-              </div>
-              <div class="inline-flex items-center gap-1 rounded-full border border-base px-2 py-0.5 text-xs text-primary">
-                <span class="uppercase text-[10px] tracking-wide text-primary/70">Avail</span>
-                <span class="font-semibold text-primary">{formattedAvailableTokens()}</span>
-              </div>
-            </div>
 
               <div class="session-toolbar-center flex-1 flex items-center justify-center gap-2 min-w-[160px]">
                 <button
@@ -1009,41 +1012,50 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
           class="content-area"
         >
           <Show
-            when={cachedSessionIds().length > 0 && activeSessionIdForInstance()}
+            when={showingInfoView()}
             fallback={
-              <div class="flex items-center justify-center h-full">
-                <div class="text-center text-gray-500 dark:text-gray-400">
-                  <p class="mb-2">No session selected</p>
-                  <p class="text-sm">Select a session to view messages</p>
-                </div>
-              </div>
+              <Show
+                when={cachedSessionIds().length > 0 && activeSessionIdForInstance()}
+                fallback={
+                  <div class="flex items-center justify-center h-full">
+                    <div class="text-center text-gray-500 dark:text-gray-400">
+                      <p class="mb-2">No session selected</p>
+                      <p class="text-sm">Select a session to view messages</p>
+                    </div>
+                  </div>
+                }
+              >
+                <For each={cachedSessionIds()}>
+                  {(sessionId) => {
+                    const isActive = () => activeSessionIdForInstance() === sessionId
+                    return (
+                      <div
+                        class="session-cache-pane flex flex-col flex-1 min-h-0"
+                        style={{ display: isActive() ? "flex" : "none" }}
+                        data-session-id={sessionId}
+                        aria-hidden={!isActive()}
+                      >
+                        <SessionView
+                          sessionId={sessionId}
+                          activeSessions={activeSessions()}
+                          instanceId={props.instance.id}
+                          instanceFolder={props.instance.folder}
+                          escapeInDebounce={props.escapeInDebounce}
+                          showSidebarToggle={showEmbeddedSidebarToggle()}
+                          onSidebarToggle={() => setLeftOpen(true)}
+                          forceCompactStatusLayout={showEmbeddedSidebarToggle()}
+                          isActive={isActive()}
+                        />
+                      </div>
+                    )
+                  }}
+                </For>
+              </Show>
             }
           >
-            <For each={cachedSessionIds()}>
-              {(sessionId) => {
-                const isActive = () => activeSessionIdForInstance() === sessionId
-                return (
-                  <div
-                    class="session-cache-pane flex flex-col flex-1 min-h-0"
-                    style={{ display: isActive() ? "flex" : "none" }}
-                    data-session-id={sessionId}
-                    aria-hidden={!isActive()}
-                  >
-                    <SessionView
-                      sessionId={sessionId}
-                      activeSessions={activeSessions()}
-                      instanceId={props.instance.id}
-                      instanceFolder={props.instance.folder}
-                      escapeInDebounce={props.escapeInDebounce}
-                      showSidebarToggle={showEmbeddedSidebarToggle()}
-                      onSidebarToggle={() => setLeftOpen(true)}
-                      forceCompactStatusLayout={showEmbeddedSidebarToggle()}
-                      isActive={isActive()}
-                    />
-                  </div>
-                )
-              }}
-            </For>
+            <div class="info-view-pane flex flex-col flex-1 min-h-0 overflow-y-auto">
+              <InfoView instanceId={props.instance.id} />
+            </div>
           </Show>
         </Box>
 
@@ -1056,9 +1068,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
     <>
       <div class="instance-shell2 flex flex-col flex-1 min-h-0">
         <Show when={hasSessions()} fallback={<InstanceWelcomeView instance={props.instance} />}>
-          <Show when={showingInfoView()} fallback={sessionLayout}>
-            <InfoView instanceId={props.instance.id} />
-          </Show>
+          {sessionLayout}
         </Show>
       </div>