fix(terminal): improve terminal dimensions and fit timing

Use min-height:0 on xterm-wrapper (flex child) instead of height:100%
to properly fill available space in flex layout. Add delayed fit()
calls after initialization to let the layout stabilize before
calculating terminal cell dimensions.

💘 Generated with Crush

Assisted-by: GLM-5.1 via Crush <crush@charm.land>

web/src/components/Shell.jsx

@@ -399,10 +399,7 @@ export default function Shell({ api }) {
     })
 
     const onResize = () => {
-      const el = document.getElementById(`terminal-${tabId}`)
-      if (el && el.style.display !== 'none') {
-        fitAddon.fit()
-      }
+      fitAddon.fit()
     }
 
     const resizeObserver = new ResizeObserver(onResize)
@@ -428,23 +425,51 @@ export default function Shell({ api }) {
     }
   }, [])
 
-  useEffect(() => {
-    const tab = tabs.find(t => t.id === activeTab)
-    if (!tab) return
+  const initPendingTabs = useCallback(() => {
+    for (const tab of tabsRef.current._tabList || []) {
+      if (!tabsRef.current[tab.id]) {
+        const container = document.getElementById(`terminal-${tab.id}`)
+        if (container && container.offsetHeight > 0) {
+          initTerminal(tab.id, tab)
+        }
+      }
+    }
+    requestAnimationFrame(() => {
+      for (const tab of tabsRef.current._tabList || []) {
+        const entry = tabsRef.current[tab.id]
+        if (entry) entry.fitAddon.fit()
+      }
+      setTimeout(() => {
+        for (const tab of tabsRef.current._tabList || []) {
+          const entry = tabsRef.current[tab.id]
+          if (entry) entry.fitAddon.fit()
+        }
+      }, 150)
+    })
+  }, [initTerminal])
 
+  useEffect(() => {
+    tabsRef.current._tabList = tabs
+  }, [tabs])
+
+  useEffect(() => {
     let cancelled = false
     const pending = []
 
-    const tryInit = (attempt) => {
-      if (cancelled || attempt > 20) return
+    const tryInitTab = (tab, attempt) => {
+      if (cancelled) return
       const shellCol = document.querySelector('.shell-terminal-col')
       if (!shellCol || shellCol.offsetParent === null) {
-        pending.push(setTimeout(() => tryInit(attempt + 1), 150))
+        pending.push(setTimeout(() => tryInitTab(tab, attempt + 1), 200))
         return
       }
       const container = document.getElementById(`terminal-${tab.id}`)
-      if (!container || container.offsetHeight === 0) {
-        pending.push(setTimeout(() => tryInit(attempt + 1), 100))
+      if (!container) {
+        pending.push(setTimeout(() => tryInitTab(tab, attempt + 1), 100))
+        return
+      }
+      if (container.offsetHeight === 0) {
+        pending.push(setTimeout(() => tryInitTab(tab, attempt + 1), 100))
         return
       }
       if (!tabsRef.current[tab.id]) {
@@ -453,27 +478,52 @@ export default function Shell({ api }) {
       requestAnimationFrame(() => {
         if (cancelled) return
         const entry = tabsRef.current[tab.id]
-        if (entry) entry.fitAddon.fit()
+        if (entry) {
+          entry.fitAddon.fit()
+          setTimeout(() => { if (!cancelled) entry.fitAddon.fit() }, 100)
+        }
       })
+      if (!tabsRef.current[tab.id]) {
+        tryInitTab(tab, 0)
+      }
+    }
+
+    const wrapper = document.querySelector('.shell-layout')?.parentElement
+    let observer
+    if (wrapper) {
+      observer = new MutationObserver(() => {
+        if (!wrapper.classList.contains('tab-hidden') && wrapper.offsetParent !== null) {
+          initPendingTabs()
+        }
+      })
+      observer.observe(wrapper, { attributes: true, attributeFilter: ['class'] })
     }
 
-    tryInit(0)
     return () => {
       cancelled = true
       pending.forEach(clearTimeout)
+      observer?.disconnect()
     }
-  }, [activeTab, tabs, initTerminal])
+  }, [tabs, initTerminal, initPendingTabs])
+
+  useEffect(() => {
+    const entry = tabsRef.current[activeTab]
+    if (entry) {
+      requestAnimationFrame(() => {
+        if (activeTabRef.current === activeTab) {
+          entry.fitAddon.fit()
+        }
+      })
+    }
+  }, [activeTab])
 
   useEffect(() => {
     const iv = setInterval(() => {
-      for (const tab of tabs) {
-        const entry = tabsRef.current[tab.id]
-        if (entry) {
-          const el = document.getElementById(`terminal-${tab.id}`)
-          if (el && el.style.display !== 'none') {
-            entry.fitAddon.fit()
-          }
-        }
+      const wrapper = document.querySelector('.shell-layout')?.parentElement
+      if (wrapper && wrapper.classList.contains('tab-hidden')) return
+      const entry = tabsRef.current[activeTabRef.current]
+      if (entry) {
+        entry.fitAddon.fit()
       }
     }, 2000)
     return () => clearInterval(iv)
@@ -838,8 +888,7 @@ export default function Shell({ api }) {
             <div
               key={tab.id}
               id={`terminal-${tab.id}`}
-              className="shell-xterm-instance"
-              style={{ display: activeTab === tab.id ? 'block' : 'none' }}
+              className={`shell-xterm-instance${activeTab === tab.id ? ' active' : ''}`}
             />
           ))}
         </div>

web/src/styles/global.css

@@ -276,8 +276,8 @@ input::placeholder { color: var(--text-disabled); }
 .sidebar-tab:hover { background: var(--bg-card); color: var(--text-primary); }
 .sidebar-tab.active { background: var(--accent); color: #fff; font-weight: 600; }
 
-.shell-layout { display: flex; height: 100%; }
-.shell-terminal-col { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
+.shell-layout { display: flex; height: 100%; overflow: hidden; }
+.shell-terminal-col { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
 
 .shell-tabs-bar {
   display: flex; align-items: center; background: var(--bg-surface);
@@ -382,11 +382,18 @@ input::placeholder { color: var(--text-disabled); }
 }
 .shell-menu-divider { height: 1px; background: var(--border); margin: 4px 6px; }
 
-.shell-xterm-wrapper { flex: 1; background: var(--bg); overflow: hidden; position: relative; }
+.shell-xterm-wrapper { flex: 1; min-height: 0; background: var(--bg); overflow: hidden; position: relative; }
 .shell-xterm-instance {
-  position: absolute; inset: 0; padding: 4px;
+  position: absolute;
+  inset: 0;
+  visibility: hidden;
+  pointer-events: none;
 }
-.shell-xterm-instance .xterm { height: 100%; padding: 4px; }
+.shell-xterm-instance.active {
+  visibility: visible;
+  pointer-events: auto;
+}
+.shell-xterm-instance .xterm { height: 100%; }
 
 .connection-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
 .connection-dot.on { background: var(--success); box-shadow: 0 0 6px var(--success); }
@@ -395,7 +402,7 @@ input::placeholder { color: var(--text-disabled); }
 .shell-tab.ai-tab .shell-tab-name { color: var(--accent); }
 .shell-tab.ai-tab { border-bottom-color: var(--accent); }
 
-.shell-ai-col { width: 320px; border-left: 1px solid var(--border); background: var(--bg-surface); display: flex; flex-direction: column; flex-shrink: 0; }
+.shell-ai-col { width: 320px; max-width: 320px; border-left: 1px solid var(--border); background: var(--bg-surface); display: flex; flex-direction: column; flex-shrink: 0; overflow: hidden; }
 .ai-panel-header { padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 13px; color: var(--accent); display: flex; align-items: center; justify-content: space-between; }
 .shell-analyze-btn {
   display: flex; align-items: center; gap: 4px;