feat(screenshots): replace ai mockups with actual application screenshots and enable package publishing

src/App.tsx

@@ -30,9 +30,36 @@ import type {
 } from './types/index.js';
 
 export const App: React.FC = () => {
-  const [currentTab, setCurrentTab] = useState('overview');
+  const getInitialTab = () => {
+    if (typeof window !== 'undefined') {
+      const hash = window.location.hash.replace('#', '');
+      if (hash) return hash;
+      const params = new URLSearchParams(window.location.search);
+      const tab = params.get('tab');
+      if (tab) return tab;
+    }
+    return 'overview';
+  };
+
+  const [currentTab, setCurrentTab] = useState(getInitialTab);
   const [showRebuildModal, setShowRebuildModal] = useState(false);
 
+  useEffect(() => {
+    const onHashChange = () => {
+      const hash = window.location.hash.replace('#', '');
+      if (hash) setCurrentTab(hash);
+    };
+    window.addEventListener('hashchange', onHashChange);
+    return () => window.removeEventListener('hashchange', onHashChange);
+  }, []);
+
+  const selectTab = (tab: string) => {
+    setCurrentTab(tab);
+    if (typeof window !== 'undefined') {
+      window.location.hash = tab;
+    }
+  };
+
   // Application state
   const [status, setStatus] = useState<SystemStatus | null>(null);
   const [pools, setPools] = useState<ZfsPool[]>([]);
@@ -161,7 +188,7 @@ export const App: React.FC = () => {
 
   return (
     <div className="flex h-screen w-screen overflow-hidden bg-slate-950 text-slate-100 font-sans">
-      <Sidebar currentTab={currentTab} onSelectTab={setCurrentTab} />
+      <Sidebar currentTab={currentTab} onSelectTab={selectTab} />
 
       <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
         <Topbar
@@ -177,7 +204,7 @@ export const App: React.FC = () => {
               status={status}
               pools={pools}
               apps={installedApps}
-              onNavigate={setCurrentTab}
+              onNavigate={selectTab}
             />
           )}