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}`}>
-        {renderContent()}
+      <main className="content">
+        <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/Config.jsx

@@ -471,6 +471,10 @@ function PanelUpdates({ updates, checking, updating, needsUpdateCount, installed
 }
 
 function PanelLocale({ language, keyboard, layouts, api, t }) {
+  const { setLanguage, setKeyboard } = useI18n()
+  const [editLocale, setEditLocale] = useState(false)
+  const [draftLang, setDraftLang] = useState(language)
+  const [draftKbd, setDraftKbd] = useState(keyboard)
   const [saving, setSaving] = useState(false)
   const [toast, setToast] = useState(null)
 
@@ -482,7 +486,10 @@ function PanelLocale({ language, keyboard, layouts, api, t }) {
   const handleSave = async () => {
     setSaving(true)
     try {
-      await api.savePreferences({ language, keyboard_layout: keyboard })
+      await api.savePreferences({ language: draftLang, keyboard_layout: draftKbd })
+      setLanguage(draftLang)
+      setKeyboard(draftKbd)
+      setEditLocale(false)
       showToast(t('config.saved'))
     } catch (err) {
       showToast(`${t('config.error')}: ${err.message}`)
@@ -490,41 +497,67 @@ function PanelLocale({ language, keyboard, layouts, api, t }) {
     setSaving(false)
   }
 
+  const currentLang = LANGUAGES.find(l => l.id === language)
+  const currentKbd = layouts.find(l => l.id === keyboard)
+
   return (
-    <div className="config-card">
+    <div className="config-profile-center">
       {toast && <div className="config-toast">{toast}</div>}
-      <div className="config-card-group">
-        <span className="config-card-group-label">{t('config.language')}</span>
-        <div className="chip-row">
-          {LANGUAGES.map(lang => (
-            <div
-              key={lang.id}
-              className={`chip ${language === lang.id ? 'active' : ''}`}
-              onClick={() => setLanguage(lang.id)}
-            >
-              {lang.name}
-            </div>
-          ))}
+      <div className="config-card">
+        <div className="config-card-row">
+          <span className="config-card-label">{t('config.language')}</span>
+          <span className="config-card-value">{currentLang?.name || language}</span>
+        </div>
+        <div className="config-card-row">
+          <span className="config-card-label">{t('config.keyboardLayout')}</span>
+          <span className="config-card-value">{currentKbd?.name || keyboard}</span>
         </div>
       </div>
-      <div className="config-card-group">
-        <span className="config-card-group-label">{t('config.keyboardLayout')}</span>
-        <div className="chip-row">
-          {layouts.map(l => (
-            <div
-              key={l.id}
-              className={`chip ${keyboard === l.id ? 'active' : ''}`}
-              onClick={() => setKeyboard(l.id)}
-            >
-              {l.name}
+      {editLocale && (
+        <div className="config-card">
+          <div className="config-card-group">
+            <span className="config-card-group-label">{t('config.language')}</span>
+            <div className="chip-row">
+              {LANGUAGES.map(lang => (
+                <div
+                  key={lang.id}
+                  className={`chip ${draftLang === lang.id ? 'active' : ''}`}
+                  onClick={() => setDraftLang(lang.id)}
+                >
+                  {lang.name}
+                </div>
+              ))}
             </div>
-          ))}
+          </div>
+          <div className="config-card-group">
+            <span className="config-card-group-label">{t('config.keyboardLayout')}</span>
+            <div className="chip-row">
+              {layouts.map(l => (
+                <div
+                  key={l.id}
+                  className={`chip ${draftKbd === l.id ? 'active' : ''}`}
+                  onClick={() => setDraftKbd(l.id)}
+                >
+                  {l.name}
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+      <div className="config-card">
+        <div className="config-card-actions" style={{ justifyContent: 'center' }}>
+          {editLocale ? (
+            <>
+              <button className="primary sm" onClick={handleSave} disabled={saving}>
+                {saving ? t('config.saving') : t('config.save')}
+              </button>
+              <button className="ghost sm" onClick={() => setEditLocale(false)}>{t('config.cancel')}</button>
+            </>
+          ) : (
+            <button className="primary sm" onClick={() => { setDraftLang(language); setDraftKbd(keyboard); setEditLocale(true) }}>{t('config.editProfile')}</button>
+          )}
         </div>
-      </div>
-      <div className="config-card-actions">
-        <button className="primary sm" onClick={handleSave} disabled={saving}>
-          {saving ? t('config.saving') : t('config.save')}
-        </button>
       </div>
     </div>
   )

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)
-    return () => clearInterval(iv)
+    let active = true
+    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 */