fix: make tab panels immediate on mobile

src/App.tsx

@@ -718,6 +718,18 @@ function App() {
         ))}
       </nav>
 
+      <aside className="secondary-nav card" aria-label="Secondary tools">
+        <div>
+          <span className="eyebrow">Local-first cockpit</span>
+          <p>Appwrite sync is infrastructure. Planning still belongs in the four v0.1 tabs.</p>
+        </div>
+        <button type="button" className={activeTab === 'status' ? 'ghost small active-secondary' : 'ghost small'} onClick={() => setActiveTab('status')}>
+          System Status
+        </button>
+      </aside>
+
+      {activeTab === 'feature-plan' && (
+        <>
       <header className="hero-card">
         <div>
           <p className="eyebrow">BuildPulse v0.1</p>
@@ -743,16 +755,6 @@ function App() {
         </div>
       </header>
 
-      <aside className="secondary-nav card" aria-label="Secondary tools">
-        <div>
-          <span className="eyebrow">Local-first cockpit</span>
-          <p>Appwrite sync is infrastructure. Planning still belongs in the four v0.1 tabs.</p>
-        </div>
-        <button type="button" className={activeTab === 'status' ? 'ghost small active-secondary' : 'ghost small'} onClick={() => setActiveTab('status')}>
-          System Status
-        </button>
-      </aside>
-
       <section className="project-card card">
         <div className="section-heading compact">
           <div>
@@ -805,6 +807,8 @@ function App() {
           Export
         </button>
       </div>
+        </>
+      )}
 
       {activeTab === 'status' && (
         <section className="view-stack">