fix: keep all tabs mounted, switch via CSS display instead of unmount

All 4 tabs (Dashboard, Studio, Shell, Config) are now always mounted
and toggled via .tab-hidden (display:none). This preserves:
- Dashboard graph history across tab switches
- Terminal session state and progress
- Studio chat context
- Config form state

Dashboard polling pauses after 3 ticks when hidden to save resources
and auto-resumes when the tab becomes visible again.

💘 Generated with Crush

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

web/src/components/App.jsx

@@ -92,16 +92,6 @@ export default function App() {
     config: [],
   }), [layout, t])
 
-  const renderContent = () => {
-    switch (activeTab) {
-      case 'dash': return <Dashboard api={api} refreshRef={dashRefreshRef} />
-      case 'studio': return <Studio api={api} />
-      case 'shell': return <Shell api={api} />
-      case 'config': return <Config api={api} />
-      default: return null
-    }
-  }
-
   return (
     <div className="app-layout">
       <header className="header">
@@ -143,8 +133,11 @@ export default function App() {
         </span>
       </header>
 
-      <main className="content fade-in" key={`${activeTab}-${TABS.length}`}>
+      <main className="content">
-        {renderContent()}
+        <div className={activeTab === 'dash' ? '' : 'tab-hidden'}><Dashboard api={api} refreshRef={dashRefreshRef} /></div>
+        <div className={activeTab === 'studio' ? '' : 'tab-hidden'}><Studio api={api} /></div>
+        <div className={activeTab === 'shell' ? '' : 'tab-hidden'}><Shell api={api} /></div>
+        <div className={activeTab === 'config' ? '' : 'tab-hidden'}><Config api={api} /></div>
       </main>
 
       <footer className="statusbar">

web/src/components/Dashboard.jsx

@@ -3,6 +3,9 @@ import { useI18n } from '../i18n'
 
 const MAX_POINTS = 30
 
+const POLL_INTERVAL = 5000
+const MAX_IDLE_POLLS = 3
+
 function MiniGraph({ data, max, color, label, unit }) {
   if (!data || data.length < 2) return <div className="dash-graph-empty">collecting...</div>
   const m = max || Math.max(...data, 1)
@@ -71,8 +74,19 @@ export default function Dashboard({ api, refreshRef }) {
   useEffect(() => {
     loadData()
     if (refreshRef) refreshRef.current = loadData
-    const iv = setInterval(loadData, 5000)
+    let active = true
-    return () => clearInterval(iv)
+    let idleTicks = 0
+    const iv = setInterval(() => {
+      const hidden = document.querySelector('.dash-grid')?.closest('.tab-hidden')
+      if (hidden) {
+        idleTicks++
+        if (idleTicks >= MAX_IDLE_POLLS) return
+      } else {
+        idleTicks = 0
+      }
+      if (active) loadData()
+    }, POLL_INTERVAL)
+    return () => { active = false; clearInterval(iv) }
   }, [loadData, refreshRef])
 
   const minimax = (quota || []).find(p => p.name === 'minimax')

web/src/styles/global.css

@@ -154,7 +154,8 @@ input::placeholder { color: var(--text-disabled); }
 
 .header-clock { font-family: var(--font-mono); font-size: 12px; color: var(--accent); font-weight: 600; }
 
-.content { flex: 1; overflow: hidden; }
+.content { flex: 1; overflow: hidden; position: relative; }
+.tab-hidden { display: none; }
 
 .statusbar {
   height: 28px;
@@ -606,10 +607,10 @@ input::placeholder { color: var(--text-disabled); }
 }
 .dash-proc-name {
   font-size: 11px; font-weight: 600; color: var(--text-primary);
-  font-family: var(--font-mono);
+  font-family: var(--font-mono); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
 .dash-proc-res {
-  font-size: 10px; font-family: var(--font-mono); color: var(--text-tertiary);
+  font-size: 10px; font-family: var(--font-mono); color: var(--text-tertiary); flex-shrink: 0;
 }
 
 /* Commands */