refactor: codebase opschoning — type safety, error handling, central config, page splits

- categorie A: alle catch(e: any) → catch(e: unknown) met instanceof check
- categorie B: stille .catch() logging toegevoegd (SWRegister, admin, upload, auth)
- categorie C: hardcoded 192.168.1.176 IPs vervangen door env var defaults
- categorie D: page files >250L gesplitst (history, settings, explorer, admin/payment,
  ipns, users, upload, dashboard) in helpers/components
- categorie E: eslint-disable vervangen in SearchInput.tsx
- src/lib/config.ts centrale config module (localhost defaults)
- CSP in next.config.ts dynamisch via env var
- deploy.sh: geen hardcoded IP meer (REQUIRED arg)
- lib/api/ lib/auth/ lib/wallet/ lib/search-index/ lib/storage/ gesplitst in modules
- ongebruikte bestanden verwijderd: api.ts, auth.tsx, wallet.ts, search-index.ts,
  PaymentPanel.tsx, SearchBar.tsx, proxy.ts, serve-static.js

src/app/admin/page.tsx

@@ -3,7 +3,9 @@
 import { useEffect, useState } from 'react';
 import PortalLayout from '@/app/layout-portal';
 import AuthGuard from '@/components/AuthGuard';
-import { listUsers, getNodeInfo, checkHealth, type IPFSNodeInfo } from '@/lib/api';
+import { listUsers } from '@/lib/api/users';
+import { getNodeInfo, checkHealth } from '@/lib/api/gateway';
+import type { IPFSNodeInfo } from '@/lib/api/client';
 import { SkeletonCard, SkeletonTable } from '@/components/Skeleton';
 import Link from 'next/link';
 import {
@@ -22,14 +24,14 @@ export default function AdminPage() {
   useEffect(() => {
     listUsers()
       .then(setUsers)
-      .catch(() => {})
+      .catch((err) => { console.error('[Admin] listUsers failed:', err); })
       .finally(() => setLoadingUsers(false));
   }, []);
 
   useEffect(() => {
     checkHealth()
       .then((h: any) => setHealth(h))
-      .catch(() => {})
+      .catch((err) => { console.error('[Admin] checkHealth failed:', err); })
       .finally(() => setLoadingHealth(false));
   }, []);
 

src/app/admin/payment/components.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { Wallet, Loader2, CheckCircle, XCircle, AlertTriangle, LogOut } from "lucide-react";
+import type { ViewMode, TxStatus } from "./helpers";
+import { VIEW_LABELS } from "./helpers";
+
+/* ── Wallet Connection ── */
+interface WalletConnectProps {
+  connecting: boolean;
+  onConnect: () => void;
+}
+
+export function WalletConnect({ connecting, onConnect }: WalletConnectProps) {
+  return (
+    <div className="glass rounded-xl p-6 text-center space-y-4">
+      <Wallet className="w-8 h-8 text-surface-500 mx-auto" />
+      <p className="text-sm text-surface-400">Connect wallet to view admin panel</p>
+      <button onClick={onConnect} disabled={connecting}
+        className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-brand-500 hover:bg-brand-400 disabled:opacity-50 text-white text-sm font-medium transition-colors"
+      >
+        {connecting ? <><Loader2 className="w-4 h-4 animate-spin" /> Connecting...</> : <><Wallet className="w-4 h-4" /> Connect Wallet</>}
+      </button>
+    </div>
+  );
+}
+
+/* ── Wrong chain warning ── */
+export function WrongChainWarning() {
+  return (
+    <div className="flex items-center gap-2 px-4 py-3 rounded-lg bg-amber-500/10 border border-amber-500/20 text-amber-400 text-sm mb-4">
+      <AlertTriangle className="w-4 h-4 shrink-0" />
+      Please switch to zkSync Local (chain 270)
+    </div>
+  );
+}
+
+/* ── Wallet Info Header ── */
+interface WalletInfoProps {
+  address: string;
+  isOwner: boolean;
+  loading: boolean;
+  onRefresh: () => void;
+  onDisconnect: () => void;
+}
+
+export function WalletInfo({ address, isOwner, loading, onRefresh, onDisconnect }: WalletInfoProps) {
+  return (
+    <div className="flex items-center gap-3">
+      <span className="text-xs text-surface-400 hidden sm:inline font-mono">
+        {address.slice(0, 6)}...{address.slice(-4)}
+      </span>
+      <span className="text-xs text-surface-400 flex items-center gap-1.5">
+        <span className={`w-1.5 h-1.5 rounded-full ${isOwner ? "bg-accent-green" : "bg-surface-500"}`} />
+        {isOwner ? "Owner" : "Viewer"}
+      </span>
+      <button onClick={onDisconnect}
+        className="text-xs px-2.5 py-1.5 rounded-lg bg-surface-800 hover:bg-surface-700 text-surface-400 hover:text-red-400 transition-colors flex items-center gap-1"
+      >
+        <LogOut className="w-3 h-3" /> Disconnect
+      </button>
+      <button onClick={onRefresh} disabled={loading} className="p-2 rounded-lg bg-surface-800 hover:bg-surface-700 text-surface-400 transition-colors">
+        <Loader2 className={`w-4 h-4 ${loading ? "animate-spin" : ""}`} />
+      </button>
+    </div>
+  );
+}
+
+/* ── Navigation Tabs ── */
+interface NavTabsProps {
+  view: ViewMode;
+  onChange: (view: ViewMode) => void;
+}
+
+export function NavTabs({ view, onChange }: NavTabsProps) {
+  return (
+    <div className="flex gap-1 mb-6 p-1 rounded-lg bg-surface-800/50 w-fit">
+      {(Object.keys(VIEW_LABELS) as ViewMode[]).map((v) => (
+        <button key={v} onClick={() => onChange(v)}
+          className={`px-3 py-1.5 rounded-md text-xs font-medium capitalize transition-colors ${
+            view === v ? "bg-surface-700 text-white" : "text-surface-400 hover:text-surface-200"
+          }`}
+        >
+          {VIEW_LABELS[v]}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+/* ── TX Status Toast ── */
+interface TxStatusToastProps {
+  status: TxStatus;
+}
+
+export function TxStatusToast({ status }: TxStatusToastProps) {
+  if (!status) return null;
+  return (
+    <div className={`fixed bottom-6 right-6 flex items-center gap-2 px-4 py-3 rounded-xl shadow-lg text-sm animate-fade-in ${
+      status.ok
+        ? "bg-accent-green/10 border border-accent-green/20 text-accent-green"
+        : "bg-accent-rose/10 border border-accent-rose/20 text-accent-rose"
+    }`}>
+      {status.ok ? <CheckCircle className="w-4 h-4 shrink-0" /> : <XCircle className="w-4 h-4 shrink-0" />}
+      {status.msg}
+    </div>
+  );
+}

src/app/admin/payment/components/PricingView.tsx

@@ -2,9 +2,10 @@
 
 import { type Dispatch, type SetStateAction } from 'react';
 import { Settings } from 'lucide-react';
-import { paymentService, type TokenInfo } from '@/lib/payment';
+import { usePaymentService, type TokenInfo } from '@/lib/payment';
+import { formatBytes } from '@/lib/helpers';
 import type { WalletProvider } from '@/lib/wallet';
-import { formatWeiToETH, formatBytes } from '@/lib/wallet';
+import { formatWeiToETH } from '@/lib/wallet';
 
 /* ── Props ── */
 interface PricingViewProps {
@@ -29,6 +30,7 @@ export default function PricingView({
   priceInput, setPriceInput, freeInput, setFreeInput,
   doTx, provider, address,
 }: PricingViewProps) {
+  const paymentService = usePaymentService();
 
   return (
     <div className="max-w-2xl space-y-4">

src/app/admin/payment/components/TiersView.tsx

@@ -2,7 +2,7 @@
 
 import { type Dispatch, type SetStateAction } from 'react';
 import { Tags, Plus, Trash2 } from 'lucide-react';
-import { paymentService, type MAOSDiscountTier } from '@/lib/payment';
+import { usePaymentService, type MAOSDiscountTier } from '@/lib/payment';
 import type { WalletProvider } from '@/lib/wallet';
 import { formatWeiToETH } from '@/lib/wallet';
 
@@ -25,6 +25,7 @@ export default function TiersView({
   tierBalance, setTierBalance, tierBps, setTierBps,
   doTx, provider,
 }: TiersViewProps) {
+  const paymentService = usePaymentService();
 
   return (
     <div className="max-w-2xl space-y-4">

src/app/admin/payment/components/TokensView.tsx

@@ -2,7 +2,7 @@
 
 import { type Dispatch, type SetStateAction } from 'react';
 import { Coins, PiggyBank } from 'lucide-react';
-import { paymentService, type TokenInfo } from '@/lib/payment';
+import { usePaymentService, type TokenInfo } from '@/lib/payment';
 import type { WalletProvider } from '@/lib/wallet';
 import { formatWeiToETH } from '@/lib/wallet';
 
@@ -34,6 +34,7 @@ export default function TokensView({
   tokenDec, setTokenDec, tokenWei, setTokenWei,
   tokenEnabled, setTokenEnabled, doTx, provider, address,
 }: TokensViewProps) {
+  const paymentService = usePaymentService();
 
   return (
     <div className="max-w-2xl space-y-4">

src/app/admin/payment/helpers.ts

@@ -0,0 +1,12 @@
+/* ── Admin Payment Helpers ── */
+
+export type ViewMode = "overview" | "pricing" | "tokens" | "tiers";
+
+export type TxStatus = { ok: boolean; msg: string } | null;
+
+export const VIEW_LABELS: Record<ViewMode, string> = {
+  overview: "Overview",
+  pricing: "Pricing",
+  tokens: "Tokens",
+  tiers: "Discount Tiers",
+};

src/app/admin/payment/page.tsx

@@ -3,22 +3,20 @@
 import { useState, useEffect, useCallback } from 'react';
 import PortalLayout from '@/app/layout-portal';
 import AuthGuard from '@/components/AuthGuard';
-import { paymentService, type TokenInfo, type MAOSDiscountTier } from '@/lib/payment';
+import { paymentService, PaymentProvider, type TokenInfo, type MAOSDiscountTier } from '@/lib/payment';
 import {
-  connectWallet, switchToChain270, getInjectedProvider,
-  formatWeiToETH, formatBytes, type WalletProvider,
+  connectWallet, switchToChain270, getInjectedProvider, addWalletListener, disconnectWallet,
+  type WalletProvider,
 } from '@/lib/wallet';
-import {
-  Wallet, Loader2, CheckCircle, XCircle,
-  RefreshCw, AlertTriangle,
-} from 'lucide-react';
+import { SkeletonCard } from '@/components/Skeleton';
+import { useNotify } from '@/lib/notifications';
 import Overview from './components/Overview';
 import PricingView from './components/PricingView';
 import TokensView from './components/TokensView';
 import TiersView from './components/TiersView';
-
-type ViewMode = 'overview' | 'pricing' | 'tokens' | 'tiers';
-type TxStatus = { ok: boolean; msg: string } | null;
+import ErrorBoundary from '@/components/ErrorBoundary';
+import type { ViewMode, TxStatus } from './helpers';
+import { WalletConnect, WrongChainWarning, WalletInfo, NavTabs, TxStatusToast } from './components';
 
 export default function AdminPaymentPage() {
   const [address, setAddress] = useState<string | null>(null);
@@ -42,13 +40,14 @@ export default function AdminPaymentPage() {
   const [contractBalance, setContractBalance] = useState<Record<string, string>>({});
 
   const isOwner = !!(address && owner && address.toLowerCase() === owner.toLowerCase());
+  const { notify } = useNotify();
 
   // ── Load all contract state ──
   const refresh = useCallback(async () => {
     setLoading(true);
     setTxStatus(null);
     try {
-      paymentService.isDeployed().then(setDeployed).catch(() => setDeployed(false));
+      paymentService.isDeployed().then(setDeployed).catch((err) => { console.error('[AdminPayment] Deploy check failed:', err); setDeployed(false); });
       const [own, price, free, t, tiersData, uploads] = await Promise.all([
         paymentService.getOwner(),
         paymentService.getBasePricePerMB(),
@@ -62,7 +61,6 @@ export default function AdminPaymentPage() {
       setFreeTier(free);
       setTiers(tiersData);
 
-      // Deduplicate by symbol
       const seen = new Set<string>();
       const uniqueTokens = t.filter(tk => {
         if (seen.has(tk.symbol)) return false;
@@ -72,32 +70,29 @@ export default function AdminPaymentPage() {
       setTokens(uniqueTokens);
 
       const symbols = uniqueTokens.map(tk => tk.symbol);
-      const revEntries = await Promise.all(
-        symbols.map(s => paymentService.getTotalRevenue(s))
-      );
+      const revEntries = await Promise.all(symbols.map(s => paymentService.getTotalRevenue(s)));
       const revMap: Record<string, bigint> = {};
       symbols.forEach((s, i) => { revMap[s] = revEntries[i]; });
       setRevenues(revMap);
 
-      // Balances via RPC
       const balMap: Record<string, string> = {};
       for (const tk of t) {
         try {
-          const client = paymentService['getPublicClient']();
+          const client = (paymentService as any)['getPublicClient']();
           if (tk.symbol === 'ETH') {
-            const bal = await client.getBalance({ address: paymentService['contractAddress'] });
+            const bal = await client.getBalance({ address: (paymentService as any)['contractAddress'] });
             balMap['ETH'] = bal.toString();
           } else if (tk.address && tk.address !== '0x0000000000000000000000000000000000000000') {
-            const ERC20_BAL_ABI = [{ type: 'function', name: 'balanceOf', inputs: [{ type: 'address' }], outputs: [{ type: 'uint256' }], stateMutability: 'view' }] as const;
+            const ERC20_BAL_ABI = [{ type: 'function' as const, name: 'balanceOf', inputs: [{ type: 'address' as const }], outputs: [{ type: 'uint256' as const }], stateMutability: 'view' as const }];
             const bal = await client.readContract({
               address: tk.address as `0x${string}`,
               abi: ERC20_BAL_ABI,
               functionName: 'balanceOf',
-              args: [paymentService['contractAddress']],
+              args: [(paymentService as any)['contractAddress']],
             });
             balMap[tk.symbol] = (bal as bigint).toString();
           }
-        } catch { /* skip */ }
+        } catch (err) { console.error('[AdminPayment] Failed to fetch balance for token:', err); }
       }
       setContractBalance(balMap);
       setTotalUploads(uploads);
@@ -111,6 +106,22 @@ export default function AdminPaymentPage() {
 
   useEffect(() => { refresh(); }, [refresh]);
 
+  // ── Listen for external wallet disconnect ──
+  useEffect(() => {
+    if (!provider) return;
+    const cb = (accounts: string[]) => {
+      if (accounts.length === 0) {
+        setAddress(null);
+        setProvider(null);
+        setConnecting(false);
+        setWrongChain(false);
+        setWalletType(null);
+        notify({ type: 'info', title: 'Wallet disconnected' });
+      }
+    };
+    addWalletListener('accountsChanged', cb);
+  }, [provider, notify]);
+
   // ── Connect wallet ──
   async function handleConnect() {
     setConnecting(true);
@@ -129,14 +140,20 @@ export default function AdminPaymentPage() {
       else if (window.ethereum?.isRabby) setWalletType('Rabby');
       else if (window.ethereum?.isMetaMask) setWalletType('MetaMask');
       else setWalletType('Wallet');
-    } catch (e: any) {
-      setTxStatus({ ok: false, msg: e.message || 'Connect failed' });
+    } catch (e: unknown) {
+      setTxStatus({ ok: false, msg: e instanceof Error ? e.message : 'Connect failed' });
     } finally {
       setConnecting(false);
     }
   }
 
-  // ── Admin action helper ──
+  function handleDisconnect() {
+    disconnectWallet();
+    setAddress(null); setProvider(null); setConnecting(false);
+    setWrongChain(false); setWalletType(null);
+    notify({ type: 'success', title: 'Wallet disconnected' });
+  }
+
   async function doTx(label: string, fn: () => Promise<string>) {
     if (!provider) return;
     setTxStatus(null);
@@ -144,8 +161,8 @@ export default function AdminPaymentPage() {
       const hash = await fn();
       setTxStatus({ ok: true, msg: `${label} success: ${hash.slice(0, 10)}...` });
       await refresh();
-    } catch (e: any) {
-      setTxStatus({ ok: false, msg: `${label} failed: ${e.message || e}` });
+    } catch (e: unknown) {
+      setTxStatus({ ok: false, msg: `${label} failed: ${e instanceof Error ? e.message : String(e)}` });
     }
   }
 
@@ -164,64 +181,33 @@ export default function AdminPaymentPage() {
   return (
     <AuthGuard requireAdmin redirectTo="/dashboard">
     <PortalLayout>
-      {/* ── Header ── */}
+      <ErrorBoundary label="Betaalbeheer">
       <div className="flex items-center justify-between mb-6">
         <div>
           <h1 className="text-2xl font-bold text-white">Payment Admin</h1>
           <p className="text-sm text-surface-400 mt-1">Manage IPFS Portal payment contract</p>
         </div>
-        <div className="flex items-center gap-3">
-          {address && (
-            <span className="text-xs text-surface-400 flex items-center gap-1.5">
-              <span className={`w-1.5 h-1.5 rounded-full ${isOwner ? 'bg-accent-green' : 'bg-surface-500'}`} />
-              {isOwner ? 'Owner' : 'Viewer'}
-            </span>
-          )}
-          <button onClick={refresh} disabled={loading} className="p-2 rounded-lg bg-surface-800 hover:bg-surface-700 text-surface-400 transition-colors">
-            <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
-          </button>
-        </div>
+        {address && (
+          <WalletInfo
+            address={address}
+            isOwner={isOwner}
+            loading={loading}
+            onRefresh={refresh}
+            onDisconnect={handleDisconnect}
+          />
+        )}
       </div>
 
-      {/* ── Connect wallet ── */}
-      {!address && (
-        <div className="glass rounded-xl p-6 text-center space-y-4">
-          <Wallet className="w-8 h-8 text-surface-500 mx-auto" />
-          <p className="text-sm text-surface-400">Connect wallet to view admin panel</p>
-          <button onClick={handleConnect} disabled={connecting}
-            className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-brand-500 hover:bg-brand-400 disabled:opacity-50 text-white text-sm font-medium transition-colors"
-          >
-            {connecting ? <><Loader2 className="w-4 h-4 animate-spin" /> Connecting...</> : <><Wallet className="w-4 h-4" /> Connect Wallet</>}
-          </button>
-        </div>
-      )}
-
-      {wrongChain && (
-        <div className="flex items-center gap-2 px-4 py-3 rounded-lg bg-amber-500/10 border border-amber-500/20 text-amber-400 text-sm mb-4">
-          <AlertTriangle className="w-4 h-4 shrink-0" />
-          Please switch to zkSync Local (chain 270)
-        </div>
-      )}
+      {!address && <WalletConnect connecting={connecting} onConnect={handleConnect} />}
+      {wrongChain && <WrongChainWarning />}
 
       {address && (
-        <>
-          {/* ── Nav tabs ── */}
-          <div className="flex gap-1 mb-6 p-1 rounded-lg bg-surface-800/50 w-fit">
-            {(['overview', 'pricing', 'tokens', 'tiers'] as ViewMode[]).map(v => (
-              <button key={v} onClick={() => setView(v)}
-                className={`px-3 py-1.5 rounded-md text-xs font-medium capitalize transition-colors ${
-                  view === v ? 'bg-surface-700 text-white' : 'text-surface-400 hover:text-surface-200'
-                }`}
-              >
-                {v === 'overview' ? 'Overview' : v === 'pricing' ? 'Pricing' : v === 'tokens' ? 'Tokens' : 'Discount Tiers'}
-              </button>
-            ))}
-          </div>
+        <PaymentProvider>
+          <NavTabs view={view} onChange={setView} />
 
-          {/* ── Loading ── */}
           {loading ? (
-            <div className="flex items-center gap-2 text-surface-400 text-sm py-12 justify-center">
-              <Loader2 className="w-4 h-4 animate-spin" /> Loading contract state...
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 animate-fade-in">
+              {Array.from({ length: 6 }).map((_, i) => <SkeletonCard key={i} />)}
             </div>
           ) : (
             <>
@@ -231,7 +217,7 @@ export default function AdminPaymentPage() {
                   tokens={tokens}
                   revenues={revenues}
                   contractBalance={contractBalance}
-                  contractAddress={paymentService['contractAddress']}
+                  contractAddress={(paymentService as any)['contractAddress']}
                   owner={owner}
                   isOwner={isOwner}
                   address={address}
@@ -239,7 +225,6 @@ export default function AdminPaymentPage() {
                   onNavigate={(v: string) => setView(v as ViewMode)}
                 />
               )}
-
               {view === 'pricing' && (
                 <PricingView
                   basePrice={basePrice}
@@ -256,7 +241,6 @@ export default function AdminPaymentPage() {
                   address={address}
                 />
               )}
-
               {view === 'tokens' && (
                 <TokensView
                   tokens={tokens}
@@ -277,7 +261,6 @@ export default function AdminPaymentPage() {
                   address={address}
                 />
               )}
-
               {view === 'tiers' && (
                 <TiersView
                   tiers={tiers}
@@ -293,19 +276,10 @@ export default function AdminPaymentPage() {
             </>
           )}
 
-          {/* ── TX Status ── */}
-          {txStatus && (
-            <div className={`fixed bottom-6 right-6 flex items-center gap-2 px-4 py-3 rounded-xl shadow-lg text-sm animate-fade-in ${
-              txStatus.ok
-                ? 'bg-accent-green/10 border border-accent-green/20 text-accent-green'
-                : 'bg-accent-rose/10 border border-accent-rose/20 text-accent-rose'
-            }`}>
-              {txStatus.ok ? <CheckCircle className="w-4 h-4 shrink-0" /> : <XCircle className="w-4 h-4 shrink-0" />}
-              {txStatus.msg}
-            </div>
-          )}
-        </>
+          <TxStatusToast status={txStatus} />
+        </PaymentProvider>
       )}
+      </ErrorBoundary>
     </PortalLayout>
     </AuthGuard>
   );

src/app/api/[...path]/__tests__/route.test.ts

@@ -3,85 +3,9 @@ import { describe, it, expect } from 'vitest';
 /* ── Route matching & Kubo mapping tests ──
  *
  * These test the pure functions from route.ts in isolation.
- * We import the source directly since these functions have no
- * external dependencies (no fetch, no cookies, no process.env).
+ * They're now exported so we import directly instead of duplicating logic.
  */
-
-// Inline import — vitest resolves @/ alias via vitest.config.ts
-// We need to import the actual functions. Since they're not exported
-// (they're module-private), we duplicate the logic here for testing.
-// In a real project, consider exporting them for testability.
-
-function matchRoute(path: string[], method: string): { target: string; path: string; method: string } | null {
-  if (!path || path.length === 0) return null;
-  const [segment, ...rest] = path;
-
-  switch (segment) {
-    case 'health':
-      return { target: 'health', path: '/health', method };
-    case 'auth':
-      return { target: 'auth', path: '/' + (rest.length > 0 ? rest.join('/') : ''), method };
-    case 'users':
-      return { target: 'users', path: '/users' + (rest.length > 0 ? '/' + rest.join('/') : ''), method };
-    case 'explorer':
-    case 'ipns':
-      return { target: 'ipfs', path: '/' + path.join('/'), method };
-    default:
-      return { target: 'ipfs', path: '/' + path.join('/'), method };
-  }
-}
-
-function mapToKuboAPI(path: string, method: string): string {
-  const p = path.replace(/^\/+/, '').replace(/\/+$/, '');
-  switch (p) {
-    case 'node/info':
-      return '/api/v0/id';
-    case 'peers':
-      return '/api/v0/swarm/peers';
-    case 'pins':
-      return method === 'GET' ? '/api/v0/pin/ls' : '/api/v0/pin/add';
-    default:
-      if (p.startsWith('pins/')) {
-        const cid = p.slice(5);
-        return `/api/v0/pin/rm?arg=${encodeURIComponent(cid)}`;
-      }
-      if (p === 'files/upload') {
-        return '/api/v0/add?pin=true';
-      }
-      if (p.startsWith('files/')) {
-        return '/api/v0/ls';
-      }
-      if (p.startsWith('explorer/ls/')) {
-        const cid = p.slice('explorer/ls/'.length);
-        return `/api/v0/ls?arg=${encodeURIComponent(cid)}`;
-      }
-      if (p.startsWith('explorer/cat/')) {
-        const cid = p.slice('explorer/cat/'.length);
-        return `/api/v0/cat?arg=${encodeURIComponent(cid)}`;
-      }
-      if (p.startsWith('explorer/stat/')) {
-        const cid = p.slice('explorer/stat/'.length);
-        return `/api/v0/object/stat?arg=${encodeURIComponent(cid)}`;
-      }
-      if (p.startsWith('explorer/resolve/')) {
-        const name = p.slice('explorer/resolve/'.length);
-        return `/api/v0/resolve?arg=${encodeURIComponent(name)}`;
-      }
-      if (p === 'ipns/publish') return '/api/v0/name/publish';
-      if (p === 'ipns/keys') return '/api/v0/key/list';
-      if (p.startsWith('ipns/resolve/')) {
-        const name = p.slice('ipns/resolve/'.length);
-        return `/api/v0/name/resolve?arg=${encodeURIComponent(name)}`;
-      }
-      if (p.startsWith('ipns/keys/gen/')) {
-        const name = p.slice('ipns/keys/gen/'.length);
-        return `/api/v0/key/gen?arg=${encodeURIComponent(name)}`;
-      }
-      if (p === 'repo/stats') return '/api/v0/repo/stat';
-      if (p === 'bw/stats') return '/api/v0/bw/stats';
-      return '/api/v0/' + p;
-  }
-}
+import { matchRoute, mapToKuboAPI } from '../route';
 
 /* ════════════════════════ matchRoute ════════════════════════ */
 
@@ -96,37 +20,24 @@ describe('matchRoute', () => {
     expect(r?.path).toBe('/health');
   });
 
-  it('routes auth', () => {
-    const r = matchRoute(['auth'], 'GET');
-    expect(r?.target).toBe('auth');
-    expect(r?.path).toBe('/');
-  });
-
-  it('routes auth/me', () => {
-    const r = matchRoute(['auth', 'me'], 'GET');
-    expect(r?.target).toBe('auth');
-    expect(r?.path).toBe('/me');
-  });
-
-  it('routes auth/login with POST', () => {
-    const r = matchRoute(['auth', 'login'], 'POST');
-    expect(r?.target).toBe('auth');
-    expect(r?.path).toBe('/login');
-    expect(r?.method).toBe('POST');
-  });
-
   it('routes users', () => {
     const r = matchRoute(['users'], 'GET');
-    expect(r?.target).toBe('users');
+    expect(r?.target).toBe('user');
     expect(r?.path).toBe('/users');
   });
 
   it('routes users with subpath', () => {
     const r = matchRoute(['users', 'create'], 'POST');
-    expect(r?.target).toBe('users');
+    expect(r?.target).toBe('user');
     expect(r?.path).toBe('/users/create');
   });
 
+  it('routes node/info to user API', () => {
+    const r = matchRoute(['node', 'info'], 'GET');
+    expect(r?.target).toBe('user');
+    expect(r?.path).toBe('/node/info');
+  });
+
   it('routes explorer to ipfs', () => {
     const r = matchRoute(['explorer', 'ls', 'QmTest'], 'GET');
     expect(r?.target).toBe('ipfs');
@@ -212,7 +123,7 @@ describe('mapToKuboAPI', () => {
   });
 
   it('maps bw/stats', () => {
-    expect(mapToKuboAPI('bw/stats', 'GET')).toBe('/api/v0/bw/stats');
+    expect(mapToKuboAPI('bw/stats', 'GET')).toBe('/api/v0/bw');
   });
 
   it('falls through for unknown paths', () => {

src/app/api/[...path]/handlers.ts

@@ -0,0 +1,69 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { userApiBase, userApiAdminKey } from '@/lib/config';
+
+export async function handleHealth(req: NextRequest): Promise<NextResponse> {
+  // Check User API reachability
+  let userApiOk = false;
+  let userApiMsg = 'unknown';
+  try {
+    const r = await fetch(`${userApiBase()}/users`, {
+      headers: { 'X-Admin-Key': userApiAdminKey() },
+      signal: AbortSignal.timeout(5000),
+    });
+    if (r.ok) {
+      userApiOk = true;
+      userApiMsg = 'connected';
+    } else {
+      userApiMsg = `status ${r.status}`;
+    }
+  } catch (e: unknown) {
+    userApiMsg = e instanceof Error ? e.message.substring(0, 60) : 'error';
+  }
+
+  // Check Kubo API reachability
+  let kuboApiOk = false;
+  let kuboApiMsg = 'not configured';
+  const kuboSvc = process.env.KUBO_API_URL;
+  const kuboAuth = process.env.KUBO_BASIC_AUTH;
+  if (kuboSvc) {
+    try {
+      const headers: Record<string, string> = {};
+      if (kuboAuth) {
+        headers['Authorization'] = 'Basic ' + Buffer.from(kuboAuth).toString('base64');
+      }
+      const r = await fetch(kuboSvc.replace(/\/+$/, '') + '/api/v0/version', {
+        method: 'POST',
+        headers,
+        signal: AbortSignal.timeout(5000),
+      });
+      if (r.ok) {
+        const data = await r.json();
+        kuboApiOk = true;
+        kuboApiMsg = `v${data.Version || 'unknown'}`;
+      } else {
+        kuboApiMsg = `status ${r.status}`;
+      }
+    } catch (e: unknown) {
+      kuboApiMsg = e instanceof Error ? e.message.substring(0, 60) : 'error';
+    }
+  }
+
+  const overall = userApiOk || kuboApiOk ? 'ok' : 'degraded';
+
+  return NextResponse.json({
+    status: overall,
+    userApi: userApiMsg,
+    kuboApi: kuboApiMsg,
+    mode: process.env.KUBO_API_URL ? 'proxy' : 'minimal',
+  });
+}
+
+export async function proxyResult(res: Response): Promise<NextResponse> {
+  const text = await res.text();
+  return new NextResponse(text, {
+    status: res.status,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+}

src/app/api/[...path]/proxy-ipfs.ts

@@ -0,0 +1,132 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { kuboApiUrl, kuboBasicAuth } from '@/lib/config';
+
+export async function proxyIPFS(path: string, method: string, req: NextRequest): Promise<Response> {
+  // In dev, the Kubo API is behind nginx with Basic Auth.
+  // If no KUBO_API_URL is configured, return a clear error.
+  const kuboSvc = kuboApiUrl();
+  if (!kuboSvc) {
+    return NextResponse.json(
+      { error: 'IPFS proxy not configured', detail: 'Set KUBO_API_URL in env for dev, or use nginx routing in production' },
+      { status: 501 }
+    );
+  }
+
+  // Map /api/explorer/ls/<cid> → /api/v0/ls?arg=<cid>, etc.
+  const url = new URL(kuboSvc);
+  const kuboPath = mapToKuboAPI(path, method);
+  // Split pathname and query string — url.pathname encodes `?` as `%3F`
+  const [namePart, ...qsParts] = kuboPath.split('?');
+  url.pathname = namePart;
+  if (qsParts.length > 0) {
+    url.search = qsParts.join('?');
+  } else {
+    // Forward incoming query params (used by ipns/publish etc.)
+    const incomingSearch = req.nextUrl.search;
+    if (incomingSearch) {
+      url.search = incomingSearch;
+    }
+  }
+
+  const headers: Record<string, string> = {};
+  const auth = kuboBasicAuth();
+  if (auth) {
+    headers['Authorization'] = 'Basic ' + Buffer.from(auth).toString('base64');
+  }
+
+  // Forward Content-Type (preserves multipart boundary for file uploads)
+  const reqCt = req.headers.get('content-type');
+  if (reqCt) {
+    headers['Content-Type'] = reqCt;
+  }
+
+  // Kubo uses POST for everything
+  const body = method === 'POST' || method === 'DELETE' ? req.body : null;
+  const fetchOpts: RequestInit & { duplex?: string } = {
+    method: 'POST',
+    headers,
+    signal: AbortSignal.timeout(30000),
+  };
+  // Node.js fetch requires duplex: 'half' when streaming a body
+  if (body) {
+    fetchOpts.duplex = 'half';
+    fetchOpts.body = body;
+  }
+
+  let res: Response;
+  try {
+    res = await fetch(url.toString(), fetchOpts);
+  } catch (fetchErr: unknown) {
+    const msg = fetchErr instanceof Error ? fetchErr.message : String(fetchErr);
+    console.error('[proxyIPFS] fetch error:', msg);
+    return NextResponse.json(
+      { error: 'IPFS proxy fetch failed', detail: msg.substring(0, 200) },
+      { status: 502 },
+    );
+  }
+
+  const text = await res.text();
+
+  return new NextResponse(text, {
+    status: res.status,
+    headers: {
+      'Content-Type': res.headers.get('Content-Type') || 'application/json',
+    },
+  });
+}
+
+export function mapToKuboAPI(path: string, method: string): string {
+  // Normalize: /api/node/info → /api/v0/id, etc.
+  const p = path.replace(/^\/+/, '').replace(/\/+$/, '');
+  switch (p) {
+    case 'node/info':
+      return '/api/v0/id';
+    case 'peers':
+      return '/api/v0/swarm/peers';
+    case 'pins':
+      return method === 'GET' ? '/api/v0/pin/ls' : '/api/v0/pin/add';
+    default:
+      if (p.startsWith('pins/')) {
+        const cid = p.slice(5);
+        return `/api/v0/pin/rm?arg=${encodeURIComponent(cid)}`;
+      }
+      if (p === 'files/upload') {
+        return '/api/v0/add?pin=true';
+      }
+      if (p.startsWith('files/')) {
+        return '/api/v0/ls';
+      }
+      // Explorer routes: /explorer/ls/<cid>, /explorer/cat/<cid>, etc.
+      if (p.startsWith('explorer/ls/')) {
+        const cid = p.slice('explorer/ls/'.length);
+        return `/api/v0/ls?arg=${encodeURIComponent(cid)}`;
+      }
+      if (p.startsWith('explorer/cat/')) {
+        const cid = p.slice('explorer/cat/'.length);
+        return `/api/v0/cat?arg=${encodeURIComponent(cid)}`;
+      }
+      if (p.startsWith('explorer/stat/')) {
+        const cid = p.slice('explorer/stat/'.length);
+        return `/api/v0/object/stat?arg=${encodeURIComponent(cid)}`;
+      }
+      if (p.startsWith('explorer/resolve/')) {
+        const name = p.slice('explorer/resolve/'.length);
+        return `/api/v0/resolve?arg=${encodeURIComponent(name)}`;
+      }
+      // IPNS routes
+      if (p === 'ipns/publish') return '/api/v0/name/publish';
+      if (p === 'ipns/keys') return '/api/v0/key/list';
+      if (p.startsWith('ipns/resolve/')) {
+        const name = p.slice('ipns/resolve/'.length);
+        return `/api/v0/name/resolve?arg=${encodeURIComponent(name)}`;
+      }
+      if (p.startsWith('ipns/keys/gen/')) {
+        const name = p.slice('ipns/keys/gen/'.length);
+        return `/api/v0/key/gen?arg=${encodeURIComponent(name)}`;
+      }
+      // Dashboard routes
+      if (p === 'repo/stats') return '/api/v0/repo/stat';
+      if (p === 'bw/stats') return '/api/v0/bw';
+      return '/api/v0/' + p;
+  }
+}

src/app/api/[...path]/proxy-user.ts

@@ -0,0 +1,34 @@
+import { NextRequest } from 'next/server';
+import { verifySessionJWT, SESSION_COOKIE } from '@/lib/auth-server';
+import { userApiBase, userApiAdminKey } from '@/lib/config';
+
+async function getSessionToken(req: NextRequest): Promise<string | null> {
+  const token = req.cookies.get(SESSION_COOKIE)?.value;
+  if (!token) return null;
+  const session = await verifySessionJWT(token);
+  return session?.sessionToken ?? null;
+}
+
+export async function proxyUserAPI(path: string, method: string, body: ReadableStream<Uint8Array> | null, req: NextRequest): Promise<Response> {
+  const url = `${userApiBase()}${path}`;
+  const headers: Record<string, string> = {
+    'X-Admin-Key': userApiAdminKey(),
+  };
+
+  if (method === 'POST' || method === 'PUT') {
+    headers['Content-Type'] = 'application/json';
+  }
+
+  // Forward session token from JWT cookie to Python backend
+  const sessionToken = await getSessionToken(req);
+  if (sessionToken) {
+    headers['X-Session-Token'] = sessionToken;
+  }
+
+  return fetch(url, {
+    method,
+    headers,
+    body,
+    signal: AbortSignal.timeout(15000),
+  });
+}

src/app/api/[...path]/route.ts

@@ -11,24 +11,18 @@
  */
 
 import { NextRequest, NextResponse } from 'next/server';
-import { verifySessionJWT, SESSION_COOKIE } from '@/lib/auth-server';
+import type { RouteMatch } from './types';
+import { proxyUserAPI } from './proxy-user';
+import { proxyIPFS } from './proxy-ipfs';
+import { handleHealth, proxyResult } from './handlers';
+
+export { mapToKuboAPI } from './proxy-ipfs';
 
 export const dynamic = 'force-dynamic';
 
-/* ── Backend targets ── */
-
-const USER_API_BASE = process.env.USER_API_BASE || 'http://192.168.1.176:8444';
-const ADMIN_KEY = process.env.USER_API_ADMIN_KEY || 'maos-admin-2024';
-
 /* ── Route matching ── */
 
-interface RouteMatch {
-  target: 'user' | 'ipfs' | 'health';
-  path: string;       // path relative to the backend
-  method: string;
-}
-
-function matchRoute(path: string[], method: string): RouteMatch | null {
+export function matchRoute(path: string[], method: string): RouteMatch | null {
   if (!path || path.length === 0) return null;
 
   const [segment, ...rest] = path;
@@ -58,175 +52,6 @@ function matchRoute(path: string[], method: string): RouteMatch | null {
   }
 }
 
-/* ── Extract session token from JWT cookie ── */
-
-async function getSessionToken(req: NextRequest): Promise<string | null> {
-  const token = req.cookies.get(SESSION_COOKIE)?.value;
-  if (!token) return null;
-  const session = await verifySessionJWT(token);
-  return session?.sessionToken ?? null;
-}
-
-/* ── User API proxy ── */
-
-async function proxyUserAPI(path: string, method: string, body: ReadableStream<Uint8Array> | null, req: NextRequest): Promise<Response> {
-  const url = `${USER_API_BASE}${path}`;
-  const headers: Record<string, string> = {
-    'X-Admin-Key': ADMIN_KEY,
-  };
-
-  if (method === 'POST' || method === 'PUT') {
-    headers['Content-Type'] = 'application/json';
-  }
-
-  // Forward session token from JWT cookie to Python backend
-  const sessionToken = await getSessionToken(req);
-  if (sessionToken) {
-    headers['X-Session-Token'] = sessionToken;
-  }
-
-  return fetch(url, {
-    method,
-    headers,
-    body,
-    signal: AbortSignal.timeout(15000),
-  });
-}
-
-/* ── IPFS Kubo proxy (via nginx) ── */
-
-async function proxyIPFS(path: string, method: string, req: NextRequest): Promise<Response> {
-  // In dev, the Kubo API is behind nginx with Basic Auth.
-  // If no KUBO_API_URL is configured, return a clear error.
-  const kuboSvc = process.env.KUBO_API_URL || process.env.NEXT_PUBLIC_KUBO_API_URL;
-  if (!kuboSvc) {
-    return NextResponse.json(
-      { error: 'IPFS proxy not configured', detail: 'Set KUBO_API_URL in env for dev, or use nginx routing in production' },
-      { status: 501 }
-    );
-  }
-
-  // Map /api/explorer/ls/<cid> → /api/v0/ls?arg=<cid>, etc.
-  const url = new URL(kuboSvc);
-  const kuboPath = mapToKuboAPI(path, method);
-  // Split pathname and query string — url.pathname encodes `?` as `%3F`
-  const [namePart, ...qsParts] = kuboPath.split('?');
-  url.pathname = namePart;
-  if (qsParts.length > 0) {
-    url.search = qsParts.join('?');
-  } else {
-    // Forward incoming query params (used by ipns/publish etc.)
-    const incomingSearch = req.nextUrl.search;
-    if (incomingSearch) {
-      url.search = incomingSearch;
-    }
-  }
-
-  const headers: Record<string, string> = {};
-  const auth = process.env.KUBO_BASIC_AUTH;
-  if (auth) {
-    headers['Authorization'] = 'Basic ' + Buffer.from(auth).toString('base64');
-  }
-
-  // Forward Content-Type (preserves multipart boundary for file uploads)
-  const reqCt = req.headers.get('content-type');
-  if (reqCt) {
-    headers['Content-Type'] = reqCt;
-  }
-
-  // Kubo uses POST for everything
-  const fetchOpts: RequestInit & { duplex?: string } = {
-    method: 'POST',
-    headers,
-    signal: AbortSignal.timeout(30000),
-  };
-  // Node.js fetch requires duplex: 'half' when streaming a body
-  if (method === 'POST' && req.body) {
-    fetchOpts.duplex = 'half';
-  }
-
-  // Forward body for add/pin operations
-  if (method === 'POST' && req.body) {
-    fetchOpts.body = req.body;
-  }
-
-  let res: Response;
-  try {
-    res = await fetch(url.toString(), fetchOpts);
-  } catch (fetchErr: any) {
-    console.error('[proxyIPFS] fetch error:', fetchErr.message);
-    return NextResponse.json(
-      { error: 'IPFS proxy fetch failed', detail: fetchErr.message?.substring(0, 200) },
-      { status: 502 },
-    );
-  }
-
-  const text = await res.text();
-
-  return new NextResponse(text, {
-    status: res.status,
-    headers: {
-      'Content-Type': res.headers.get('Content-Type') || 'application/json',
-    },
-  });
-}
-
-function mapToKuboAPI(path: string, method: string): string {
-  // Normalize: /api/node/info → /api/v0/id, etc.
-  const p = path.replace(/^\/+/, '').replace(/\/+$/, '');
-  switch (p) {
-    case 'node/info':
-      return '/api/v0/id';
-    case 'peers':
-      return '/api/v0/swarm/peers';
-    case 'pins':
-      return method === 'GET' ? '/api/v0/pin/ls' : '/api/v0/pin/add';
-    default:
-      if (p.startsWith('pins/')) {
-        const cid = p.slice(5);
-        return `/api/v0/pin/rm?arg=${encodeURIComponent(cid)}`;
-      }
-      if (p === 'files/upload') {
-        return '/api/v0/add?pin=true';
-      }
-      if (p.startsWith('files/')) {
-        return '/api/v0/ls';
-      }
-      // Explorer routes: /explorer/ls/<cid>, /explorer/cat/<cid>, etc.
-      if (p.startsWith('explorer/ls/')) {
-        const cid = p.slice('explorer/ls/'.length);
-        return `/api/v0/ls?arg=${encodeURIComponent(cid)}`;
-      }
-      if (p.startsWith('explorer/cat/')) {
-        const cid = p.slice('explorer/cat/'.length);
-        return `/api/v0/cat?arg=${encodeURIComponent(cid)}`;
-      }
-      if (p.startsWith('explorer/stat/')) {
-        const cid = p.slice('explorer/stat/'.length);
-        return `/api/v0/object/stat?arg=${encodeURIComponent(cid)}`;
-      }
-      if (p.startsWith('explorer/resolve/')) {
-        const name = p.slice('explorer/resolve/'.length);
-        return `/api/v0/resolve?arg=${encodeURIComponent(name)}`;
-      }
-      // IPNS routes
-      if (p === 'ipns/publish') return '/api/v0/name/publish';
-      if (p === 'ipns/keys') return '/api/v0/key/list';
-      if (p.startsWith('ipns/resolve/')) {
-        const name = p.slice('ipns/resolve/'.length);
-        return `/api/v0/name/resolve?arg=${encodeURIComponent(name)}`;
-      }
-      if (p.startsWith('ipns/keys/gen/')) {
-        const name = p.slice('ipns/keys/gen/'.length);
-        return `/api/v0/key/gen?arg=${encodeURIComponent(name)}`;
-      }
-      // Dashboard routes
-      if (p === 'repo/stats') return '/api/v0/repo/stat';
-      if (p === 'bw/stats') return '/api/v0/bw/stats';
-      return '/api/v0/' + p;
-  }
-}
-
 /* ── Main handler ── */
 
 export async function GET(
@@ -282,74 +107,3 @@ export async function DELETE(
       return NextResponse.json({ error: 'Method not allowed' }, { status: 405 });
   }
 }
-
-/* ── Health check ── */
-
-async function handleHealth(req: NextRequest): Promise<NextResponse> {
-  // Check User API reachability
-  let userApiOk = false;
-  let userApiMsg = 'unknown';
-  try {
-    const r = await fetch(`${USER_API_BASE}/users`, {
-      headers: { 'X-Admin-Key': ADMIN_KEY },
-      signal: AbortSignal.timeout(5000),
-    });
-    if (r.ok) {
-      userApiOk = true;
-      userApiMsg = 'connected';
-    } else {
-      userApiMsg = `status ${r.status}`;
-    }
-  } catch (e: any) {
-    userApiMsg = e.message?.substring(0, 60) || 'error';
-  }
-
-  // Check Kubo API reachability
-  let kuboApiOk = false;
-  let kuboApiMsg = 'not configured';
-  const kuboSvc = process.env.KUBO_API_URL;
-  const kuboAuth = process.env.KUBO_BASIC_AUTH;
-  if (kuboSvc) {
-    try {
-      const headers: Record<string, string> = {};
-      if (kuboAuth) {
-        headers['Authorization'] = 'Basic ' + Buffer.from(kuboAuth).toString('base64');
-      }
-      const r = await fetch(kuboSvc.replace(/\/+$/, '') + '/api/v0/version', {
-        method: 'POST',
-        headers,
-        signal: AbortSignal.timeout(5000),
-      });
-      if (r.ok) {
-        const data = await r.json();
-        kuboApiOk = true;
-        kuboApiMsg = `v${data.Version || 'unknown'}`;
-      } else {
-        kuboApiMsg = `status ${r.status}`;
-      }
-    } catch (e: any) {
-      kuboApiMsg = e.message?.substring(0, 60) || 'error';
-    }
-  }
-
-  const overall = userApiOk || kuboApiOk ? 'ok' : 'degraded';
-
-  return NextResponse.json({
-    status: overall,
-    userApi: userApiMsg,
-    kuboApi: kuboApiMsg,
-    mode: process.env.KUBO_API_URL ? 'proxy' : 'minimal',
-  });
-}
-
-/* ── Helpers ── */
-
-async function proxyResult(res: Response): Promise<NextResponse> {
-  const text = await res.text();
-  return new NextResponse(text, {
-    status: res.status,
-    headers: {
-      'Content-Type': 'application/json',
-    },
-  });
-}

src/app/api/[...path]/types.ts

@@ -0,0 +1,5 @@
+export interface RouteMatch {
+  target: 'user' | 'ipfs' | 'health';
+  path: string;       // path relative to the backend
+  method: string;
+}

src/app/api/auth/challenge/route.ts

@@ -5,11 +5,10 @@
  */
 
 import { NextRequest, NextResponse } from 'next/server';
+import { userApiBase } from '@/lib/config';
 
 export const dynamic = 'force-dynamic';
 
-const USER_API_BASE = process.env.USER_API_BASE || 'http://192.168.1.176:8444';
-
 export async function POST(req: NextRequest) {
   try {
     const body = await req.json();
@@ -19,7 +18,7 @@ export async function POST(req: NextRequest) {
       return NextResponse.json({ error: 'Address required' }, { status: 400 });
     }
 
-    const res = await fetch(`${USER_API_BASE}/auth/challenge`, {
+    const res = await fetch(`${userApiBase()}/auth/challenge`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ address: address.toLowerCase() }),
@@ -28,9 +27,10 @@ export async function POST(req: NextRequest) {
 
     const data = await res.json();
     return NextResponse.json(data, { status: res.status });
-  } catch (e: any) {
+  } catch (e: unknown) {
+    const msg = e instanceof Error ? e.message : String(e);
     return NextResponse.json(
-      { error: e.message || 'Challenge failed' },
+      { error: msg || 'Challenge failed' },
       { status: 500 },
     );
   }

src/app/api/auth/login/route.ts

@@ -6,11 +6,10 @@
 
 import { NextRequest, NextResponse } from 'next/server';
 import { createSessionJWT, cookieOptions } from '@/lib/auth-server';
+import { userApiBase } from '@/lib/config';
 
 export const dynamic = 'force-dynamic';
 
-const USER_API_BASE = process.env.USER_API_BASE || 'http://192.168.1.176:8444';
-
 export async function POST(req: NextRequest) {
   try {
     const body = await req.json();
@@ -24,7 +23,7 @@ export async function POST(req: NextRequest) {
     }
 
     // Proxy login to Python User API
-    const res = await fetch(`${USER_API_BASE}/auth/login`, {
+    const res = await fetch(`${userApiBase()}/auth/login`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({
@@ -48,7 +47,7 @@ export async function POST(req: NextRequest) {
     // Determine role — Python backend returns role info via /auth/verify
     let role: 'admin' | 'user' = 'user';
     try {
-      const verifyRes = await fetch(`${USER_API_BASE}/auth/verify`, {
+      const verifyRes = await fetch(`${userApiBase()}/auth/verify`, {
         headers: { 'X-Session-Token': pythonSessionToken },
         signal: AbortSignal.timeout(3000),
       });
@@ -76,9 +75,10 @@ export async function POST(req: NextRequest) {
     response.cookies.set('ipfs-portal-session', jwt, cookieOptions());
 
     return response;
-  } catch (e: any) {
+  } catch (e: unknown) {
+    const msg = e instanceof Error ? e.message : String(e);
     return NextResponse.json(
-      { error: e.message || 'Login failed' },
+      { error: msg || 'Login failed' },
       { status: 500 },
     );
   }

src/app/api/auth/logout/route.ts

@@ -1,16 +1,16 @@
 /* ── POST /api/auth/logout ──
  *
  * Logt uit bij Python backend en wist JWT cookie.
+ * Best-effort: als Python backend niet bereikbaar is, cookie wordt altijd gewist.
  */
 
 import { cookies } from 'next/headers';
 import { NextResponse } from 'next/server';
 import { verifySessionJWT, SESSION_COOKIE } from '@/lib/auth-server';
+import { userApiBase } from '@/lib/config';
 
 export const dynamic = 'force-dynamic';
 
-const USER_API_BASE = process.env.USER_API_BASE || 'http://192.168.1.176:8444';
-
 export async function POST() {
   const cookieStore = await cookies();
   const jwt = cookieStore.get(SESSION_COOKIE)?.value;
@@ -27,16 +27,17 @@ export async function POST() {
   // Notify Python backend (best effort)
   if (sessionToken) {
     try {
-      await fetch(`${USER_API_BASE}/auth/logout`, {
+      await fetch(`${userApiBase()}/auth/logout`, {
         method: 'POST',
         headers: { 'X-Session-Token': sessionToken },
         signal: AbortSignal.timeout(3000),
       });
-    } catch {
-      // Non-critical
+    } catch (e) {
+      console.warn('[logout] Python backend unreachable:', e);
     }
   }
 
+  // Wipe cookie regardless
   const response = NextResponse.json({ authenticated: false });
   response.cookies.set(SESSION_COOKIE, '', {
     httpOnly: true,

src/app/api/auth/password/route.ts

@@ -6,9 +6,7 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { cookies } from 'next/headers';
 import { verifySessionJWT, SESSION_COOKIE } from '@/lib/auth-server';
-
-const USER_API_BASE = process.env.USER_API_BASE || 'http://192.168.1.176:8444';
-const ADMIN_KEY = process.env.USER_API_ADMIN_KEY || 'maos-admin-2024';
+import { userApiBase, userApiAdminKey } from '@/lib/config';
 
 export const dynamic = 'force-dynamic';
 
@@ -32,9 +30,9 @@ export async function POST(req: NextRequest) {
       return NextResponse.json({ error: 'Current and new password required' }, { status: 400 });
     }
 
-    const res = await fetch(`${USER_API_BASE}/auth/password`, {
+    const res = await fetch(`${userApiBase()}/auth/password`, {
       method: 'POST',
-      headers: { 'Content-Type': 'application/json', 'X-Admin-Key': ADMIN_KEY },
+      headers: { 'Content-Type': 'application/json', 'X-Admin-Key': userApiAdminKey() },
       body: JSON.stringify({
         address: session.address,
         currentPassword,
@@ -52,7 +50,8 @@ export async function POST(req: NextRequest) {
     }
 
     return NextResponse.json({ success: true });
-  } catch (e: any) {
-    return NextResponse.json({ error: e.message || 'Password change failed' }, { status: 500 });
+  } catch (e: unknown) {
+    const msg = e instanceof Error ? e.message : String(e);
+    return NextResponse.json({ error: msg || 'Password change failed' }, { status: 500 });
   }
 }

src/app/api/events/route.ts

@@ -9,11 +9,11 @@
  * Alternatief voor WebSocket (werkt door proxy heen).
  */
 
+import { kuboApiUrl, kuboBasicAuth } from '@/lib/config';
+
 export const dynamic = 'force-dynamic';
 export const runtime = 'nodejs';
 
-const KUBO_API = process.env.KUBO_API_URL || process.env.NEXT_PUBLIC_KUBO_API_URL;
-const KUBO_AUTH = process.env.KUBO_BASIC_AUTH;
 const POLL_INTERVAL = 3_000; // 3 seconden
 
 /* ── Helpers ── */
@@ -23,13 +23,15 @@ function encodeSSE(event: string, data: unknown): string {
 }
 
 async function kuboFetch(path: string): Promise<any> {
-  if (!KUBO_API) return null;
+  const api = kuboApiUrl();
+  if (!api) return null;
   try {
-    const url = new URL(KUBO_API);
+    const url = new URL(api);
     url.pathname = path;
     const headers: Record<string, string> = {};
-    if (KUBO_AUTH) {
-      headers['Authorization'] = 'Basic ' + Buffer.from(KUBO_AUTH).toString('base64');
+    const auth = kuboBasicAuth();
+    if (auth) {
+      headers['Authorization'] = 'Basic ' + Buffer.from(auth).toString('base64');
     }
     const res = await fetch(url.toString(), {
       method: 'POST',

src/app/api/payment/verify/route.ts

@@ -14,18 +14,12 @@
  */
 
 import { NextRequest, NextResponse } from 'next/server';
-import { createPublicClient, http, type Address, type Hash, type Chain } from 'viem';
-import { IPFS_PORTAL_PAYMENT_ABI } from '@/lib/payment';
+import { createPublicClient, http, type Address, type Hash } from 'viem';
+import { IPFS_PORTAL_PAYMENT_ABI, zkSyncLocal } from '@/lib/payment';
+import { zkSyncRpcUrl, paymentContractAddress } from '@/lib/config';
 
-const RPC_URL = process.env.ZKSYNC_RPC_URL || 'http://192.168.1.176:3050';
-const CONTRACT_ADDRESS = (process.env.PAYMENT_CONTRACT_ADDRESS || '0xCBc6b8aeea129c206F4836799621C833Bf8B9BDe') as Address;
-
-const zkSyncLocal: Chain = {
-  id: 270,
-  name: 'zkSync Local',
-  nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
-  rpcUrls: { default: { http: [RPC_URL] } },
-};
+const RPC_URL = zkSyncRpcUrl();
+const CONTRACT_ADDRESS = paymentContractAddress() as Address;
 
 const client = createPublicClient({
   chain: zkSyncLocal,
@@ -117,11 +111,12 @@ export async function GET(req: NextRequest) {
       })),
       verified: matchingUpload !== null,
     });
-  } catch (err: any) {
-    console.error('[payment/verify] Error:', err.message);
+  } catch (err: unknown) {
+    const msg = err instanceof Error ? err.message : String(err);
+    console.error('[payment/verify] Error:', msg);
     return NextResponse.json({
       error: 'Verification failed',
-      detail: err.message?.substring(0, 200),
+      detail: msg.substring(0, 200),
     }, { status: 500 });
   }
 }
@@ -159,12 +154,13 @@ export async function POST(req: NextRequest) {
       gasUsed: receipt.gasUsed?.toString(),
       effectiveGasPrice: receipt.effectiveGasPrice?.toString(),
     });
-  } catch (err: any) {
-    console.error('[payment/verify/tx] Error:', err.message);
+  } catch (err: unknown) {
+    const msg = err instanceof Error ? err.message : String(err);
+    console.error('[payment/verify/tx] Error:', msg);
     return NextResponse.json({
       confirmed: false,
       error: 'Verification failed',
-      detail: err.message?.substring(0, 200),
+      detail: msg.substring(0, 200),
     }, { status: 500 });
   }
 }

src/app/dashboard/helpers.ts

@@ -0,0 +1,19 @@
+/* ── Dashboard Page Helpers ── */
+
+import type { LucideIcon } from "lucide-react";
+
+export interface StatCard {
+  label: string;
+  value: string | number;
+  icon: LucideIcon;
+  color: string;
+  bg: string;
+}
+
+export function formatRepoSize(bytes: number): string {
+  return (bytes / 1e9).toFixed(2);
+}
+
+export function formatBandwidthMb(bytes: number): string {
+  return (bytes / 1e6).toFixed(1);
+}

src/app/dashboard/page.tsx

@@ -16,6 +16,9 @@ import {
   Fingerprint,
 } from 'lucide-react';
 
+import ErrorBoundary from '@/components/ErrorBoundary';
+import { formatRepoSize, formatBandwidthMb } from './helpers';
+
 export default function DashboardPage() {
   const { data, isValidating } = useDashboard();
   const realtime = useRealtime();
@@ -39,9 +42,9 @@ export default function DashboardPage() {
 
   const loading = isValidating && !data;
 
-  const repoSizeGb = repo ? (repo.repoSize / 1e9).toFixed(2) : '—';
-  const bwIn = bw ? (bw.totalIn / 1e6).toFixed(1) : '—';
-  const bwOut = bw ? (bw.totalOut / 1e6).toFixed(1) : '—';
+  const repoSizeGb = repo ? formatRepoSize(repo.repoSize) : '—';
+  const bwIn = bw ? formatBandwidthMb(bw.totalIn) : '—';
+  const bwOut = bw ? formatBandwidthMb(bw.totalOut) : '—';
 
   // Peer count from SSE (live) or SWR
   const peerCount = realtime.peers?.count ?? peers.length;
@@ -57,6 +60,7 @@ export default function DashboardPage() {
 
   return (
     <PortalLayout>
+      <ErrorBoundary label="Dashboard">
       {/* Page header */}
       <div className="mb-8 flex items-center justify-between">
         <div>
@@ -258,6 +262,7 @@ export default function DashboardPage() {
           )}
         </div>
       </div>
+      </ErrorBoundary>
     </PortalLayout>
   );
 }

src/app/explorer/components/DirectoryListing.tsx

@@ -1,8 +1,7 @@
 'use client';
 
 import { useState, useCallback } from 'react';
-import type { IPFSEntry } from '@/lib/api';
-import { explorerLs } from '@/lib/api';
+import { explorerLs, type IPFSEntry } from '@/lib/api/explorer';
 import FileIcon from './FileIcon';
 import { ChevronRight, CheckCircle, Download, Loader2 } from 'lucide-react';
 import { truncateCid } from '@/lib/helpers';
@@ -221,7 +220,8 @@ export default function DirectoryListing({
         try {
           const result = await explorerLs(cid);
           setSubdirEntries((e) => ({ ...e, [cid]: result }));
-        } catch {
+        } catch (err) {
+          console.error('[DirectoryListing] Failed to list subdirectory:', err);
           setSubdirEntries((e) => ({ ...e, [cid]: [] }));
         } finally {
           setLoadingSubdirs((l) => ({ ...l, [cid]: false }));

src/app/explorer/components/FilePreview.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect, useCallback } from 'react';
 import { X, Download, Maximize2 } from 'lucide-react';
 import { getSettings } from '@/lib/storage';
+import { gatewayUrl } from '@/lib/helpers';
 
 interface FilePreviewProps {
   cid: string;
@@ -12,11 +13,6 @@ interface FilePreviewProps {
   filename?: string;
 }
 
-function gatewayUrl(cid: string): string {
-  const { gatewayUrl: base } = getSettings();
-  return `${base}/${cid}`;
-}
-
 function detectFileType(
   filename: string | undefined,
 ): 'image' | 'markdown' | 'json' | 'text' | 'video' | 'audio' | 'pdf' | 'html' | 'other' {
@@ -60,7 +56,8 @@ function renderJson(text: string): string {
     const parsed = JSON.parse(text);
     const syntax = JSON.stringify(parsed, null, 2);
     return syntax;
-  } catch {
+  } catch (err) {
+    console.error('[FilePreview] JSON parse failed in renderJson:', err);
     return text;
   }
 }
@@ -69,13 +66,18 @@ function JsonDisplay({ text }: { text: string }) {
   let parsed: unknown;
   try {
     parsed = JSON.parse(text);
-  } catch {
+  } catch (err) {
+    console.error('[FilePreview] JSON parse failed in JsonDisplay:', err);
     return <pre className="text-sm font-mono whitespace-pre-wrap text-surface-300">{text}</pre>;
   }
 
   const formatted = JSON.stringify(parsed, null, 2);
+  const escaped = formatted
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
 
-  const colored = formatted.replace(
+  const colored = escaped.replace(
     /("(?:\\.|[^"\\])*")\s*:/g,
     '<span class="text-accent-cyan">$1</span>:',
   ).replace(
@@ -205,7 +207,7 @@ export default function FilePreview({ cid, content, loading, onClose, filename }
         if (content) {
           return (
             <iframe
-              sandbox="allow-same-origin"
+              sandbox="allow-scripts"
               className={`w-full ${fullScreen ? 'h-[80vh]' : 'h-96'} rounded-lg bg-white`}
               srcDoc={content}
               title="HTML preview"
@@ -214,7 +216,7 @@ export default function FilePreview({ cid, content, loading, onClose, filename }
         }
         return (
           <iframe
-            sandbox="allow-same-origin"
+            sandbox="allow-scripts"
             className={`w-full ${fullScreen ? 'h-[80vh]' : 'h-96'} rounded-lg bg-white`}
             src={gatewayUrl(cid)}
             title="HTML preview"

src/app/explorer/components/GatewayLink.tsx

@@ -17,8 +17,8 @@ export default function GatewayLink({ cid, filename }: GatewayLinkProps) {
       await navigator.clipboard.writeText(gatewayUrl);
       setCopied(true);
       setTimeout(() => setCopied(false), 2000);
-    } catch {
-      // clipboard write failed silently
+    } catch (err) {
+      console.error('[GatewayLink] Clipboard write failed:', err);
     }
   }
 

src/app/explorer/components/PinBadge.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from 'react';
 import { CheckCircle, Pin } from 'lucide-react';
-import { addPin } from '@/lib/api';
+import { addPin } from '@/lib/api/pins';
 
 interface PinBadgeProps {
   cid: string;
@@ -18,8 +18,8 @@ export default function PinBadge({ cid, isPinned, onPin }: PinBadgeProps) {
     try {
       await addPin(cid);
       onPin(cid);
-    } catch {
-      // pin failed silently
+    } catch (err) {
+      console.error('[PinBadge] Failed to pin CID:', err);
     } finally {
       setPinning(false);
     }

src/app/explorer/helpers.ts

@@ -0,0 +1,37 @@
+/* ── Explorer Page Helpers ── */
+
+import type { IPFSEntry } from "@/lib/api/explorer";
+
+export const RECENT_STORAGE_KEY = "ipfs-explorer-recent-cids";
+
+export interface BreadcrumbSegment {
+  cid: string;
+  name: string;
+}
+
+export type ExplorerState = "idle" | "loading" | "resolving" | "loaded" | "error";
+
+export function loadRecentCids(): string[] {
+  if (typeof window === "undefined") return [];
+  try {
+    const raw = localStorage.getItem(RECENT_STORAGE_KEY);
+    return raw ? (JSON.parse(raw) as string[]) : [];
+  } catch (err) {
+    console.error("[ExplorerPage] Failed to load recent CIDs from localStorage:", err);
+    return [];
+  }
+}
+
+export function saveRecentCid(cid: string) {
+  try {
+    const existing = loadRecentCids();
+    const updated = [cid, ...existing.filter((c) => c !== cid)].slice(0, 10);
+    localStorage.setItem(RECENT_STORAGE_KEY, JSON.stringify(updated));
+  } catch (err) {
+    console.error("[ExplorerPage] Failed to save recent CID to localStorage:", err);
+  }
+}
+
+export function findFilename(entries: IPFSEntry[], hash: string): string | undefined {
+  return entries.find((e) => e.hash === hash)?.name;
+}

src/app/explorer/page.tsx

@@ -2,47 +2,23 @@
 
 import { useState, useEffect, useCallback } from 'react';
 import PortalLayout from '@/app/layout-portal';
-import { explorerLs, explorerCat, listPins } from '@/lib/api';
-import type { IPFSEntry } from '@/lib/api';
+import { explorerLs, explorerCat, type IPFSEntry } from '@/lib/api/explorer';
+import { listPins } from '@/lib/api/pins';
 import CIDInput from './components/CIDInput';
 import DirectoryListing from './components/DirectoryListing';
 import FilePreview from './components/FilePreview';
 import Breadcrumbs from './components/Breadcrumbs';
 import PinBadge from './components/PinBadge';
 import GatewayLink from './components/GatewayLink';
-import SearchBar from '@/components/SearchBar';
+import SearchBar from '@/components/search';
 import type { SearchResult } from '@/lib/search-index';
 import { isTextFile, extractText, addToIndex, clearIndex, getIndexStats } from '@/lib/search-index';
 import { Search, AlertCircle, RefreshCw, Database, Loader2 } from 'lucide-react';
+import Skeleton from '@/components/Skeleton';
 
-const RECENT_STORAGE_KEY = 'ipfs-explorer-recent-cids';
+import ErrorBoundary from '@/components/ErrorBoundary';
 
-interface BreadcrumbSegment {
-  cid: string;
-  name: string;
-}
-
-function loadRecentCids(): string[] {
-  if (typeof window === 'undefined') return [];
-  try {
-    const raw = localStorage.getItem(RECENT_STORAGE_KEY);
-    return raw ? (JSON.parse(raw) as string[]) : [];
-  } catch {
-    return [];
-  }
-}
-
-function saveRecentCid(cid: string) {
-  try {
-    const existing = loadRecentCids();
-    const updated = [cid, ...existing.filter((c) => c !== cid)].slice(0, 10);
-    localStorage.setItem(RECENT_STORAGE_KEY, JSON.stringify(updated));
-  } catch {
-    // localStorage write failed silently
-  }
-}
-
-type ExplorerState = 'idle' | 'loading' | 'resolving' | 'loaded' | 'error';
+import { loadRecentCids, saveRecentCid, findFilename, type ExplorerState, type BreadcrumbSegment } from './helpers';
 
 export default function ExplorerPage() {
   const [cid, setCid] = useState('');
@@ -111,7 +87,8 @@ export default function ExplorerPage() {
     try {
       const content = await explorerCat(hash);
       setPreviewContent(content);
-    } catch {
+    } catch (err) {
+      console.error('[ExplorerPage] Failed to fetch preview content:', err);
       setPreviewContent(null);
     } finally {
       setPreviewLoading(false);
@@ -156,7 +133,8 @@ export default function ExplorerPage() {
               });
               indexed++;
             }
-          } catch {
+          } catch (err) {
+            console.error('[ExplorerPage] Failed to index pin:', err);
             failed++;
           }
         }
@@ -171,6 +149,7 @@ export default function ExplorerPage() {
 
   return (
     <PortalLayout>
+      <ErrorBoundary label="Verkenner">
       {/* Page header */}
       <div className="mb-6">
         <h1 className="text-2xl font-bold text-white">IPFS Explorer</h1>
@@ -234,11 +213,22 @@ export default function ExplorerPage() {
         </div>
       )}
 
-      {/* Resolving IPNS */}
+      {/* Resolving IPNS — skeleton */}
       {state === 'resolving' && (
-        <div className="glass rounded-xl p-8 flex flex-col items-center justify-center text-center animate-fade-in">
-          <RefreshCw className="w-5 h-5 text-accent-cyan animate-spin mb-3" />
-          <p className="text-sm text-surface-400">Resolving IPNS name...</p>
+        <div className="glass rounded-xl p-8 animate-fade-in">
+          <div className="flex items-center gap-3 mb-6">
+            <Skeleton className="h-5 w-48" />
+            <Skeleton className="h-5 w-28" />
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {Array.from({ length: 3 }).map((_, i) => (
+              <div key={i} className="glass rounded-xl p-5 space-y-3">
+                <Skeleton className="h-3 w-20" />
+                <Skeleton className="h-7 w-48" />
+                <Skeleton className="h-2 w-full" />
+              </div>
+            ))}
+          </div>
         </div>
       )}
 
@@ -300,10 +290,9 @@ export default function ExplorerPage() {
           )}
         </div>
       )}
+      </ErrorBoundary>
     </PortalLayout>
   );
 }
 
-function findFilename(entries: IPFSEntry[], hash: string): string | undefined {
-  return entries.find((e) => e.hash === hash)?.name;
-}
+

src/app/globals.css

@@ -138,3 +138,18 @@ html.theme-transitioning *::after {
 .animate-fade-in { animation: fade-in 0.4s ease-out both; }
 .animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }
 .animate-slide-up { animation: slide-up 0.3s ease-out both; }
+
+/* ── Button variants (used in IPNS page) ── */
+.btn-primary {
+  display: inline-flex; align-items: center; gap: 0.5rem;
+  background: var(--color-brand-600);
+  color: white;
+  font-weight: 500;
+  transition: background-color 0.15s;
+}
+.btn-primary:hover { background: var(--color-brand-500); }
+
+.btn-ghost {
+  display: inline-flex; align-items: center;
+  transition: color 0.15s;
+}

src/app/history/components.tsx

@@ -0,0 +1,374 @@
+"use client";
+
+import type { UploadRecord } from "@/lib/storage";
+import { formatBytes, truncateCid, gatewayLink } from "@/lib/helpers";
+import { downloadFile } from "@/lib/download";
+import { SkeletonTable } from "@/components/Skeleton";
+import Link from "next/link";
+import {
+  Clock, HardDrive, Copy, ExternalLink, Trash2, Search, Upload,
+  Database, Calendar, Filter, X, CheckCircle, Download,
+  Link as LinkIcon,
+} from "lucide-react";
+import { getMethodBadge, recordKey } from "./helpers";
+import BatchBar from "@/components/BatchBar";
+
+/* ── Header ── */
+interface HistoryHeaderProps {
+  totalUploads: number;
+  totalSize: number;
+  uniqueCids: number;
+  onClear: () => void;
+}
+
+export function HistoryHeader({ totalUploads, totalSize, uniqueCids, onClear }: HistoryHeaderProps) {
+  return (
+    <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
+      <div>
+        <h1 className="text-2xl font-bold text-white">Upload History</h1>
+        <p className="text-sm text-surface-400 mt-1">
+          {totalUploads > 0
+            ? `${totalUploads} upload${totalUploads !== 1 ? "s" : ""} · ${formatBytes(totalSize)} total · ${uniqueCids} unique file${uniqueCids !== 1 ? "s" : ""}`
+            : "Track your past uploads"}
+        </p>
+      </div>
+      {totalUploads > 0 && (
+        <button
+          onClick={onClear}
+          className="flex items-center gap-2 px-4 py-2 rounded-xl bg-accent-rose/10 text-accent-rose text-sm font-medium hover:bg-accent-rose/20 transition-colors self-start"
+        >
+          <Trash2 className="w-4 h-4" />
+          Clear History
+        </button>
+      )}
+    </div>
+  );
+}
+
+/* ── Search Bar ── */
+interface HistorySearchProps {
+  search: string;
+  onChange: (value: string) => void;
+}
+
+export function HistorySearch({ search, onChange }: HistorySearchProps) {
+  return (
+    <div className="relative mb-4">
+      <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-surface-500" />
+      <input
+        value={search}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder="Search by file name or CID…"
+        className="w-full pl-10 pr-10 py-2 rounded-lg bg-surface-900 border border-surface-700 text-sm text-surface-200 placeholder:text-surface-500 focus:outline-none focus:border-brand-500"
+      />
+      {search && (
+        <button
+          onClick={() => onChange("")}
+          className="absolute right-3 top-1/2 -translate-y-1/2 p-0.5 rounded hover:bg-surface-700 transition-colors"
+        >
+          <X className="w-4 h-4 text-surface-500" />
+        </button>
+      )}
+    </div>
+  );
+}
+
+/* ── Loading Skeleton ── */
+export function HistorySkeleton() {
+  return (
+    <div className="glass rounded-xl overflow-hidden">
+      <div className="px-1">
+        <SkeletonTable rows={8} cols={3} />
+      </div>
+    </div>
+  );
+}
+
+/* ── Empty State ── */
+export function HistoryEmpty() {
+  return (
+    <div className="glass rounded-xl p-12 text-center animate-fade-in">
+      <div className="flex justify-center mb-4">
+        <div className="p-3 rounded-xl bg-surface-800/50">
+          <Clock className="w-8 h-8 text-surface-500" />
+        </div>
+      </div>
+      <h3 className="text-lg font-semibold text-surface-300 mb-2">No upload history yet</h3>
+      <p className="text-sm text-surface-500 mb-6 max-w-md mx-auto">
+        Your uploaded files will appear here so you can easily copy CIDs, download files, or check upload details.
+      </p>
+      <Link
+        href="/upload"
+        className="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-brand-600 text-white text-sm font-medium hover:bg-brand-500 transition-colors"
+      >
+        <Upload className="w-4 h-4" />
+        Upload your first file
+      </Link>
+    </div>
+  );
+}
+
+/* ── Desktop Table ── */
+interface HistoryTableProps {
+  records: UploadRecord[];
+  selected: Set<string>;
+  copied: string | null;
+  onToggle: (key: string) => void;
+  onToggleAll: () => void;
+  allSelected: boolean;
+  onCopy: (text: string, key: string) => void;
+}
+
+export function HistoryTable({ records, selected, copied, onToggle, onToggleAll, allSelected, onCopy }: HistoryTableProps) {
+  return (
+    <div className="hidden sm:block glass rounded-xl overflow-hidden">
+      <table className="w-full">
+        <thead>
+          <tr className="border-b border-surface-800 text-left text-xs font-medium text-surface-500 uppercase tracking-wider">
+            <th className="px-5 py-3 w-10">
+              <input
+                type="checkbox"
+                checked={allSelected}
+                onChange={onToggleAll}
+                className="rounded border-surface-600 bg-surface-800 text-brand-500 focus:ring-brand-500"
+              />
+            </th>
+            <th className="px-5 py-3">File Name</th>
+            <th className="px-5 py-3">CID</th>
+            <th className="px-5 py-3">Size</th>
+            <th className="px-5 py-3">Date</th>
+            <th className="px-5 py-3">Method</th>
+            <th className="px-5 py-3 text-right">Actions</th>
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-surface-800">
+          {records.map((rec) => {
+            const badge = getMethodBadge(rec.method);
+            const gwLink = gatewayLink(rec.cid);
+            return (
+              <tr key={rec.cid + rec.date} className="hover:bg-surface-800/30 transition-colors">
+                <td className="px-5 py-3">
+                  <input
+                    type="checkbox"
+                    checked={selected.has(recordKey(rec))}
+                    onChange={() => onToggle(recordKey(rec))}
+                    className="rounded border-surface-600 bg-surface-800 text-brand-500 focus:ring-brand-500"
+                  />
+                </td>
+                <td className="px-5 py-3">
+                  <div className="flex items-center gap-2">
+                    <HardDrive className="w-3.5 h-3.5 text-surface-500 shrink-0" />
+                    <span className="text-sm text-surface-200 truncate max-w-[200px]" title={rec.name}>
+                      {rec.name}
+                    </span>
+                  </div>
+                </td>
+                <td className="px-5 py-3">
+                  <span className="text-xs font-mono text-surface-400 cursor-default" title={rec.cid}>
+                    {truncateCid(rec.cid)}
+                  </span>
+                </td>
+                <td className="px-5 py-3">
+                  <span className="text-xs text-surface-400">{formatBytes(rec.size)}</span>
+                </td>
+                <td className="px-5 py-3">
+                  <div className="text-xs text-surface-400">
+                    <div>{new Date(rec.date).toLocaleDateString()}</div>
+                    <div className="text-surface-500">{new Date(rec.date).toLocaleTimeString()}</div>
+                  </div>
+                </td>
+                <td className="px-5 py-3">
+                  <span className={`inline-block px-1.5 py-0.5 rounded text-[10px] font-medium ${badge.bg} ${badge.text}`}>
+                    {badge.label}
+                  </span>
+                </td>
+                <td className="px-5 py-3 text-right">
+                  <div className="flex items-center justify-end gap-1">
+                    <button
+                      onClick={() => onCopy(rec.cid, `cid-${rec.cid}`)}
+                      className="p-1.5 rounded-lg hover:bg-surface-700 transition-colors group"
+                      title="Copy CID"
+                    >
+                      {copied === `cid-${rec.cid}` ? (
+                        <CheckCircle className="w-3.5 h-3.5 text-accent-green" />
+                      ) : (
+                        <Copy className="w-3.5 h-3.5 text-surface-500 group-hover:text-surface-300" />
+                      )}
+                    </button>
+                    <button
+                      onClick={() => onCopy(gwLink, `gw-${rec.cid}`)}
+                      className="p-1.5 rounded-lg hover:bg-surface-700 transition-colors group"
+                      title="Copy gateway link"
+                    >
+                      {copied === `gw-${rec.cid}` ? (
+                        <CheckCircle className="w-3.5 h-3.5 text-accent-green" />
+                      ) : (
+                        <LinkIcon className="w-3.5 h-3.5 text-surface-500 group-hover:text-surface-300" />
+                      )}
+                    </button>
+                    <button
+                      onClick={() => downloadFile(rec.cid, rec.name).catch((err) => { console.error("[HistoryPage] Download failed:", err); })}
+                      className="p-1.5 rounded-lg hover:bg-surface-700 transition-colors group"
+                      title="Download file"
+                    >
+                      <Download className="w-3.5 h-3.5 text-surface-500 group-hover:text-surface-300" />
+                    </button>
+                    <a
+                      href={gwLink}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="p-1.5 rounded-lg hover:bg-surface-700 transition-colors group"
+                      title="Open in gateway"
+                    >
+                      <ExternalLink className="w-3.5 h-3.5 text-surface-500 group-hover:text-surface-300" />
+                    </a>
+                  </div>
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+/* ── Mobile Card ── */
+interface HistoryMobileCardProps {
+  rec: UploadRecord;
+  selected: Set<string>;
+  copied: string | null;
+  onToggle: (key: string) => void;
+  onCopy: (text: string, key: string) => void;
+}
+
+export function HistoryMobileCard({ rec, selected, copied, onToggle, onCopy }: HistoryMobileCardProps) {
+  const badge = getMethodBadge(rec.method);
+  const gwLink = gatewayLink(rec.cid);
+  return (
+    <div className="glass rounded-xl p-4 space-y-3">
+      <div className="flex items-start justify-between gap-2">
+        <div className="flex items-center gap-2 flex-1 min-w-0">
+          <input
+            type="checkbox"
+            checked={selected.has(recordKey(rec))}
+            onChange={() => onToggle(recordKey(rec))}
+            className="rounded border-surface-600 bg-surface-800 text-brand-500 focus:ring-brand-500 shrink-0 mt-0.5"
+          />
+          <HardDrive className="w-4 h-4 text-surface-500 shrink-0" />
+          <span className="text-sm text-surface-200 truncate" title={rec.name}>
+            {rec.name}
+          </span>
+        </div>
+        <span className={`shrink-0 px-1.5 py-0.5 rounded text-[10px] font-medium ${badge.bg} ${badge.text}`}>
+          {badge.label}
+        </span>
+      </div>
+      <div className="flex items-center gap-2">
+        <span className="text-xs font-mono text-surface-400 truncate" title={rec.cid}>
+          {truncateCid(rec.cid)}
+        </span>
+        <button
+          onClick={() => onCopy(rec.cid, `cid-${rec.cid}`)}
+          className="p-1 rounded-lg hover:bg-surface-700 transition-colors shrink-0"
+        >
+          {copied === `cid-${rec.cid}` ? (
+            <CheckCircle className="w-3 h-3 text-accent-green" />
+          ) : (
+            <Copy className="w-3 h-3 text-surface-500" />
+          )}
+        </button>
+      </div>
+      <div className="flex items-center gap-4 text-xs text-surface-500">
+        <span>{formatBytes(rec.size)}</span>
+        <span className="flex items-center gap-1">
+          <Calendar className="w-3 h-3" />
+          {new Date(rec.date).toLocaleDateString()}
+        </span>
+        <span className="flex items-center gap-1">
+          <Clock className="w-3 h-3" />
+          {new Date(rec.date).toLocaleTimeString()}
+        </span>
+      </div>
+      <div className="flex items-center gap-2 pt-1">
+        <button
+          onClick={() => onCopy(rec.cid, `cid-m-${rec.cid}`)}
+          className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-surface-800/50 hover:bg-surface-700 text-xs text-surface-400 hover:text-surface-200 transition-colors"
+        >
+          <Copy className="w-3 h-3" />
+          Copy CID
+        </button>
+        <button
+          onClick={() => onCopy(gwLink, `gw-m-${rec.cid}`)}
+          className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-surface-800/50 hover:bg-surface-700 text-xs text-surface-400 hover:text-surface-200 transition-colors"
+        >
+          <LinkIcon className="w-3 h-3" />
+          Copy Link
+        </button>
+        <button
+          onClick={() => downloadFile(rec.cid, rec.name).catch((err) => { console.error("[HistoryPage] Download failed:", err); })}
+          className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-surface-800/50 hover:bg-surface-700 text-xs text-surface-400 hover:text-surface-200 transition-colors"
+        >
+          <Download className="w-3 h-3" />
+          Download
+        </button>
+        <a
+          href={gwLink}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-surface-800/50 hover:bg-surface-700 text-xs text-surface-400 hover:text-surface-200 transition-colors"
+        >
+          <ExternalLink className="w-3 h-3" />
+          Open
+        </a>
+      </div>
+    </div>
+  );
+}
+
+/* ── No Results ── */
+interface HistoryNoResultsProps {
+  search: string;
+  onClear: () => void;
+}
+
+export function HistoryNoResults({ search, onClear }: HistoryNoResultsProps) {
+  return (
+    <div className="glass rounded-xl p-12 text-center">
+      <div className="flex justify-center mb-3">
+        <Search className="w-8 h-8 text-surface-500" />
+      </div>
+      <h3 className="text-base font-semibold text-surface-300 mb-1">No results found</h3>
+      <p className="text-sm text-surface-500">
+        No uploads match &ldquo;{search}&rdquo;
+      </p>
+      <button
+        onClick={onClear}
+        className="mt-4 text-sm text-brand-400 hover:text-brand-300 underline transition-colors"
+      >
+        Clear search
+      </button>
+    </div>
+  );
+}
+
+/* ── Results Count ── */
+interface HistoryResultsCountProps {
+  filtered: number;
+  total: number;
+  onClear: () => void;
+}
+
+export function HistoryResultsCount({ filtered, total, onClear }: HistoryResultsCountProps) {
+  return (
+    <div className="mt-3 text-center text-xs text-surface-500">
+      Showing {filtered} of {total} uploads
+      <button
+        onClick={onClear}
+        className="ml-2 text-brand-400 hover:text-brand-300 underline transition-colors"
+      >
+        Clear filter
+      </button>
+    </div>
+  );
+}

src/app/history/helpers.ts

@@ -0,0 +1,29 @@
+/* ── History Page Helpers ── */
+
+import type { UploadRecord } from "@/lib/storage";
+
+export function recordKey(r: UploadRecord) {
+  return `${r.cid}||${r.date}`;
+}
+
+export function getMethodBadge(method: UploadRecord["method"]): {
+  bg: string;
+  text: string;
+  label: string;
+} {
+  switch (method) {
+    case "free":
+      return { bg: "bg-accent-green/10", text: "text-accent-green", label: "free" };
+    case "eth":
+      return { bg: "bg-brand-500/10", text: "text-brand-400", label: "eth" };
+    case "token":
+      return { bg: "bg-accent-purple/10", text: "text-accent-purple", label: "token" };
+    case "quick":
+      return { bg: "bg-surface-700/50", text: "text-surface-400", label: "quick" };
+  }
+}
+
+export function parseRecordKey(key: string): { cid: string; date: string } {
+  const idx = key.lastIndexOf("||");
+  return { cid: key.slice(0, idx), date: key.slice(idx + 2) };
+}

src/app/history/page.tsx

@@ -2,28 +2,22 @@
 
 import { useEffect, useState, useMemo } from 'react';
 import { getHistory, clearHistory, removeMultipleFromHistory, type UploadRecord } from '@/lib/storage';
-import { formatBytes, gatewayLink, truncateCid } from '@/lib/helpers';
-import { downloadFile } from '@/lib/download';
 import { useNotify } from '@/lib/notifications';
-import { SkeletonTable } from '@/components/Skeleton';
-import BatchBar from '@/components/BatchBar';
 import ErrorBoundary from '@/components/ErrorBoundary';
 import PortalLayout from '@/app/layout-portal';
-import Link from 'next/link';
+import BatchBar from '@/components/BatchBar';
+import { Trash2 } from 'lucide-react';
+import { recordKey, parseRecordKey } from './helpers';
 import {
-  Clock, HardDrive, Copy, ExternalLink, Trash2, Search, Upload,
-  Database, Calendar, Filter, X, CheckCircle, Download,
-  Link as LinkIcon,
-} from 'lucide-react';
-
-function getMethodBadge(method: UploadRecord['method']): { bg: string; text: string; label: string } {
-  switch (method) {
-    case 'free':  return { bg: 'bg-accent-green/10', text: 'text-accent-green', label: 'free' };
-    case 'eth':   return { bg: 'bg-brand-500/10',    text: 'text-brand-400',   label: 'eth' };
-    case 'token': return { bg: 'bg-accent-purple/10', text: 'text-accent-purple', label: 'token' };
-    case 'quick': return { bg: 'bg-surface-700/50',   text: 'text-surface-400',   label: 'quick' };
-  }
-}
+  HistoryHeader,
+  HistorySearch,
+  HistorySkeleton,
+  HistoryEmpty,
+  HistoryTable,
+  HistoryMobileCard,
+  HistoryNoResults,
+  HistoryResultsCount,
+} from './components';
 
 /* ════════════════════════════ Page ════════════════════════════ */
 
@@ -34,8 +28,6 @@ export default function HistoryPage() {
   const [loading, setLoading] = useState(true);
   const [selected, setSelected] = useState<Set<string>>(new Set());
 
-  const recordKey = (r: UploadRecord) => `${r.cid}||${r.date}`;
-
   function load() {
     setHistory(getHistory());
     setLoading(false);
@@ -73,7 +65,7 @@ export default function HistoryPage() {
       await navigator.clipboard.writeText(text);
       setCopied(key);
       setTimeout(() => setCopied(null), 2000);
-    } catch { /* ignore */ }
+    } catch (err) { console.error('[HistoryPage] Clipboard write failed:', err); }
   }
 
   /* ── Selection ── */
@@ -100,12 +92,7 @@ export default function HistoryPage() {
   function handleBatchDelete() {
     const count = selected.size;
     if (!confirm(`Delete ${count} upload${count !== 1 ? 's' : ''} from history?`)) return;
-
-    const keys = Array.from(selected).map((key) => {
-      const idx = key.lastIndexOf('||');
-      return { cid: key.slice(0, idx), date: key.slice(idx + 2) };
-    });
-
+    const keys = Array.from(selected).map(parseRecordKey);
     removeMultipleFromHistory(keys);
     setHistory((prev) => prev.filter((r) => !selected.has(recordKey(r))));
     setSelected(new Set());
@@ -117,353 +104,60 @@ export default function HistoryPage() {
     <PortalLayout>
       <ErrorBoundary label="HistoryPage">
       <div className="animate-fade-in">
-        {/* ── Header ── */}
-        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
-          <div>
-            <h1 className="text-2xl font-bold text-white">Upload History</h1>
-            <p className="text-sm text-surface-400 mt-1">
-              {stats.totalUploads > 0
-                ? `${stats.totalUploads} upload${stats.totalUploads !== 1 ? 's' : ''} · ${formatBytes(stats.totalSize)} total · ${stats.uniqueCids} unique file${stats.uniqueCids !== 1 ? 's' : ''}`
-                : 'Track your past uploads'}
-            </p>
-          </div>
-          {history.length > 0 && (
-            <button
-              onClick={handleClear}
-              className="flex items-center gap-2 px-4 py-2 rounded-xl bg-accent-rose/10 text-accent-rose text-sm font-medium hover:bg-accent-rose/20 transition-colors self-start"
-            >
-              <Trash2 className="w-4 h-4" />
-              Clear History
-            </button>
-          )}
-        </div>
+        <HistoryHeader
+          totalUploads={stats.totalUploads}
+          totalSize={stats.totalSize}
+          uniqueCids={stats.uniqueCids}
+          onClear={handleClear}
+        />
 
-        {/* ── Search ── */}
         {history.length > 0 && (
-          <div className="relative mb-4">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-surface-500" />
-            <input
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-              placeholder="Search by file name or CID…"
-              className="w-full pl-10 pr-10 py-2 rounded-lg bg-surface-900 border border-surface-700 text-sm text-surface-200 placeholder:text-surface-500 focus:outline-none focus:border-brand-500"
-            />
-            {search && (
-              <button
-                onClick={() => setSearch('')}
-                className="absolute right-3 top-1/2 -translate-y-1/2 p-0.5 rounded hover:bg-surface-700 transition-colors"
-              >
-                <X className="w-4 h-4 text-surface-500" />
-              </button>
-            )}
-          </div>
+          <HistorySearch search={search} onChange={setSearch} />
         )}
 
-        {/* ── Loading skeleton ── */}
-        {loading && (
-          <div className="glass rounded-xl overflow-hidden">
-            <div className="px-1">
-              <SkeletonTable rows={8} cols={3} />
-            </div>
-          </div>
-        )}
+        {loading && <HistorySkeleton />}
 
-        {/* ── Empty state ── */}
-        {!loading && history.length === 0 && (
-          <div className="glass rounded-xl p-12 text-center animate-fade-in">
-            <div className="flex justify-center mb-4">
-              <div className="p-3 rounded-xl bg-surface-800/50">
-                <Clock className="w-8 h-8 text-surface-500" />
-              </div>
-            </div>
-            <h3 className="text-lg font-semibold text-surface-300 mb-2">No upload history yet</h3>
-            <p className="text-sm text-surface-500 mb-6 max-w-md mx-auto">
-              Your uploaded files will appear here so you can easily copy CIDs, download files, or check upload details.
-            </p>
-            <Link
-              href="/upload"
-              className="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-brand-600 text-white text-sm font-medium hover:bg-brand-500 transition-colors"
-            >
-              <Upload className="w-4 h-4" />
-              Upload your first file
-            </Link>
-          </div>
-        )}
+        {!loading && history.length === 0 && <HistoryEmpty />}
 
-        {/* ── Desktop table ── */}
         {filtered.length > 0 && (
           <>
-            {/* Desktop table — hidden on small screens */}
-            <div className="hidden sm:block glass rounded-xl overflow-hidden">
-              <table className="w-full">
-                <thead>
-                  <tr className="border-b border-surface-800 text-left text-xs font-medium text-surface-500 uppercase tracking-wider">
-                    <th className="px-5 py-3 w-10">
-                      <input
-                        type="checkbox"
-                        checked={selected.size === filtered.length && filtered.length > 0}
-                        onChange={toggleAll}
-                        className="rounded border-surface-600 bg-surface-800 text-brand-500 focus:ring-brand-500"
-                      />
-                    </th>
-                    <th className="px-5 py-3">File Name</th>
-                    <th className="px-5 py-3">CID</th>
-                    <th className="px-5 py-3">Size</th>
-                    <th className="px-5 py-3">Date</th>
-                    <th className="px-5 py-3">Method</th>
-                    <th className="px-5 py-3 text-right">Actions</th>
-                  </tr>
-                </thead>
-                <tbody className="divide-y divide-surface-800">
-                  {filtered.map((rec) => {
-                    const badge = getMethodBadge(rec.method);
-                    const gwLink = gatewayLink(rec.cid);
-                    return (
-                      <tr key={rec.cid + rec.date} className="hover:bg-surface-800/30 transition-colors">
-                        {/* Checkbox */}
-                        <td className="px-5 py-3">
-                          <input
-                            type="checkbox"
-                            checked={selected.has(recordKey(rec))}
-                            onChange={() => toggleSelection(recordKey(rec))}
-                            className="rounded border-surface-600 bg-surface-800 text-brand-500 focus:ring-brand-500"
-                          />
-                        </td>
-                        {/* File name */}
-                        <td className="px-5 py-3">
-                          <div className="flex items-center gap-2">
-                            <HardDrive className="w-3.5 h-3.5 text-surface-500 shrink-0" />
-                            <span className="text-sm text-surface-200 truncate max-w-[200px]" title={rec.name}>
-                              {rec.name}
-                            </span>
-                          </div>
-                        </td>
+            <HistoryTable
+              records={filtered}
+              selected={selected}
+              copied={copied}
+              onToggle={toggleSelection}
+              onToggleAll={toggleAll}
+              allSelected={selected.size === filtered.length}
+              onCopy={copyToClipboard}
+            />
 
-                        {/* CID */}
-                        <td className="px-5 py-3">
-                          <span
-                            className="text-xs font-mono text-surface-400 cursor-default"
-                            title={rec.cid}
-                          >
-                            {truncateCid(rec.cid)}
-                          </span>
-                        </td>
-
-                        {/* Size */}
-                        <td className="px-5 py-3">
-                          <span className="text-xs text-surface-400">{formatBytes(rec.size)}</span>
-                        </td>
-
-                        {/* Date */}
-                        <td className="px-5 py-3">
-                          <div className="text-xs text-surface-400">
-                            <div>{new Date(rec.date).toLocaleDateString()}</div>
-                            <div className="text-surface-500">{new Date(rec.date).toLocaleTimeString()}</div>
-                          </div>
-                        </td>
-
-                        {/* Method badge */}
-                        <td className="px-5 py-3">
-                          <span className={`inline-block px-1.5 py-0.5 rounded text-[10px] font-medium ${badge.bg} ${badge.text}`}>
-                            {badge.label}
-                          </span>
-                        </td>
-
-                        {/* Actions */}
-                        <td className="px-5 py-3 text-right">
-                          <div className="flex items-center justify-end gap-1">
-                            {/* Copy CID */}
-                            <button
-                              onClick={() => copyToClipboard(rec.cid, `cid-${rec.cid}`)}
-                              className="p-1.5 rounded-lg hover:bg-surface-700 transition-colors group"
-                              title="Copy CID"
-                            >
-                              {copied === `cid-${rec.cid}` ? (
-                                <CheckCircle className="w-3.5 h-3.5 text-accent-green" />
-                              ) : (
-                                <Copy className="w-3.5 h-3.5 text-surface-500 group-hover:text-surface-300" />
-                              )}
-                            </button>
-
-                            {/* Copy gateway link */}
-                            <button
-                              onClick={() => copyToClipboard(gwLink, `gw-${rec.cid}`)}
-                              className="p-1.5 rounded-lg hover:bg-surface-700 transition-colors group"
-                              title="Copy gateway link"
-                            >
-                              {copied === `gw-${rec.cid}` ? (
-                                <CheckCircle className="w-3.5 h-3.5 text-accent-green" />
-                              ) : (
-                                <LinkIcon className="w-3.5 h-3.5 text-surface-500 group-hover:text-surface-300" />
-                              )}
-                            </button>
-
-                            {/* Download */}
-                            <button
-                              onClick={() => downloadFile(rec.cid, rec.name).catch(() => {})}
-                              className="p-1.5 rounded-lg hover:bg-surface-700 transition-colors group"
-                              title="Download file"
-                            >
-                              <Download className="w-3.5 h-3.5 text-surface-500 group-hover:text-surface-300" />
-                            </button>
-
-                            {/* Open in gateway */}
-                            <a
-                              href={gwLink}
-                              target="_blank"
-                              rel="noopener noreferrer"
-                              className="p-1.5 rounded-lg hover:bg-surface-700 transition-colors group"
-                              title="Open in gateway"
-                            >
-                              <ExternalLink className="w-3.5 h-3.5 text-surface-500 group-hover:text-surface-300" />
-                            </a>
-                          </div>
-                        </td>
-                      </tr>
-                    );
-                  })}
-                </tbody>
-              </table>
-            </div>
-
-            {/* ── Mobile cards ── */}
             <div className="sm:hidden space-y-3">
-              {filtered.map((rec) => {
-                const badge = getMethodBadge(rec.method);
-                const gwLink = gatewayLink(rec.cid);
-                return (
-                  <div key={rec.cid + rec.date} className="glass rounded-xl p-4 space-y-3">
-                    {/* Checkbox + Name + method badge */}
-                    <div className="flex items-start justify-between gap-2">
-                      <div className="flex items-center gap-2 flex-1 min-w-0">
-                        <input
-                          type="checkbox"
-                          checked={selected.has(recordKey(rec))}
-                          onChange={() => toggleSelection(recordKey(rec))}
-                          className="rounded border-surface-600 bg-surface-800 text-brand-500 focus:ring-brand-500 shrink-0 mt-0.5"
-                        />
-                        <HardDrive className="w-4 h-4 text-surface-500 shrink-0" />
-                        <span className="text-sm text-surface-200 truncate" title={rec.name}>
-                          {rec.name}
-                        </span>
-                      </div>
-                      <span className={`shrink-0 px-1.5 py-0.5 rounded text-[10px] font-medium ${badge.bg} ${badge.text}`}>
-                        {badge.label}
-                      </span>
-                    </div>
-
-                    {/* CID */}
-                    <div className="flex items-center gap-2">
-                      <span
-                        className="text-xs font-mono text-surface-400 truncate"
-                        title={rec.cid}
-                      >
-                        {truncateCid(rec.cid)}
-                      </span>
-                      <button
-                        onClick={() => copyToClipboard(rec.cid, `cid-${rec.cid}`)}
-                        className="p-1 rounded-lg hover:bg-surface-700 transition-colors shrink-0"
-                      >
-                        {copied === `cid-${rec.cid}` ? (
-                          <CheckCircle className="w-3 h-3 text-accent-green" />
-                        ) : (
-                          <Copy className="w-3 h-3 text-surface-500" />
-                        )}
-                      </button>
-                    </div>
-
-                    {/* Size + date */}
-                    <div className="flex items-center gap-4 text-xs text-surface-500">
-                      <span>{formatBytes(rec.size)}</span>
-                      <span className="flex items-center gap-1">
-                        <Calendar className="w-3 h-3" />
-                        {new Date(rec.date).toLocaleDateString()}
-                      </span>
-                      <span className="flex items-center gap-1">
-                        <Clock className="w-3 h-3" />
-                        {new Date(rec.date).toLocaleTimeString()}
-                      </span>
-                    </div>
-
-                    {/* Actions row */}
-                    <div className="flex items-center gap-2 pt-1">
-                      {/* Copy CID */}
-                      <button
-                        onClick={() => copyToClipboard(rec.cid, `cid-m-${rec.cid}`)}
-                        className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-surface-800/50 hover:bg-surface-700 text-xs text-surface-400 hover:text-surface-200 transition-colors"
-                      >
-                        <Copy className="w-3 h-3" />
-                        Copy CID
-                      </button>
-
-                      {/* Copy link */}
-                      <button
-                        onClick={() => copyToClipboard(gwLink, `gw-m-${rec.cid}`)}
-                        className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-surface-800/50 hover:bg-surface-700 text-xs text-surface-400 hover:text-surface-200 transition-colors"
-                      >
-                        <LinkIcon className="w-3 h-3" />
-                        Copy Link
-                      </button>
-
-                      {/* Download */}
-                      <button
-                        onClick={() => downloadFile(rec.cid, rec.name).catch(() => {})}
-                        className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-surface-800/50 hover:bg-surface-700 text-xs text-surface-400 hover:text-surface-200 transition-colors"
-                      >
-                        <Download className="w-3 h-3" />
-                        Download
-                      </button>
-
-                      {/* Open */}
-                      <a
-                        href={gwLink}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-surface-800/50 hover:bg-surface-700 text-xs text-surface-400 hover:text-surface-200 transition-colors"
-                      >
-                        <ExternalLink className="w-3 h-3" />
-                        Open
-                      </a>
-                    </div>
-                  </div>
-                );
-              })}
+              {filtered.map((rec) => (
+                <HistoryMobileCard
+                  key={rec.cid + rec.date}
+                  rec={rec}
+                  selected={selected}
+                  copied={copied}
+                  onToggle={toggleSelection}
+                  onCopy={copyToClipboard}
+                />
+              ))}
             </div>
 
-            {/* ── Results count ── */}
             {search && filtered.length < history.length && (
-              <div className="mt-3 text-center text-xs text-surface-500">
-                Showing {filtered.length} of {history.length} uploads
-                <button
-                  onClick={() => setSearch('')}
-                  className="ml-2 text-brand-400 hover:text-brand-300 underline transition-colors"
-                >
-                  Clear filter
-                </button>
-              </div>
+              <HistoryResultsCount
+                filtered={filtered.length}
+                total={history.length}
+                onClear={() => setSearch('')}
+              />
             )}
           </>
         )}
 
-        {/* ── No search results ── */}
         {!loading && history.length > 0 && filtered.length === 0 && (
-          <div className="glass rounded-xl p-12 text-center">
-            <div className="flex justify-center mb-3">
-              <Search className="w-8 h-8 text-surface-500" />
-            </div>
-            <h3 className="text-base font-semibold text-surface-300 mb-1">No results found</h3>
-            <p className="text-sm text-surface-500">
-              No uploads match &ldquo;{search}&rdquo;
-            </p>
-            <button
-              onClick={() => setSearch('')}
-              className="mt-4 text-sm text-brand-400 hover:text-brand-300 underline transition-colors"
-            >
-              Clear search
-            </button>
-          </div>
+          <HistoryNoResults search={search} onClear={() => setSearch('')} />
         )}
-        {/* ── Batch bar ── */}
+
         <BatchBar
           count={selected.size}
           onClear={() => setSelected(new Set())}
@@ -472,7 +166,7 @@ export default function HistoryPage() {
               key: 'delete',
               label: 'Delete selected',
               icon: <Trash2 className="w-3.5 h-3.5" />,
-              variant: 'danger',
+              variant: 'danger' as const,
               onClick: handleBatchDelete,
             },
           ]}

src/app/ipns/helpers.ts

@@ -0,0 +1,3 @@
+/* ── IPNS Page Helpers ── */
+
+export type Status = "idle" | "loading" | "success" | "error";

src/app/ipns/page.tsx

@@ -1,11 +1,13 @@
 'use client';
 
 import { useState, useEffect, useCallback } from 'react';
-import { listIPNSKeys, ipnsPublish, ipnsResolve, ipnsGenKey, type IPNSKey } from '@/lib/api';
+import { listIPNSKeys, ipnsPublish, ipnsResolve, ipnsGenKey, type IPNSKey } from '@/lib/api/ipns';
 import PortalLayout from '@/app/layout-portal';
 import { RefreshCw, ExternalLink, Key, FileText, Plus } from 'lucide-react';
+import { SkeletonTable } from '@/components/Skeleton';
 
-type Status = 'idle' | 'loading' | 'success' | 'error';
+import ErrorBoundary from '@/components/ErrorBoundary';
+import type { Status } from './helpers';
 
 export default function IPNSPage() {
   const [keys, setKeys] = useState<IPNSKey[]>([]);
@@ -95,6 +97,7 @@ export default function IPNSPage() {
 
   return (
     <PortalLayout>
+      <ErrorBoundary label="IPNS">
       {/* Header */}
       <div className="flex items-center justify-between mb-6">
         <div>
@@ -123,9 +126,8 @@ export default function IPNSPage() {
         </div>
 
         {status === 'loading' && (
-          <div className="flex items-center gap-2 text-sm text-surface-400 py-4">
-            <RefreshCw className="w-3.5 h-3.5 animate-spin" />
-            Loading keys...
+          <div className="overflow-hidden">
+            <SkeletonTable rows={4} cols={3} />
           </div>
         )}
 
@@ -281,6 +283,7 @@ export default function IPNSPage() {
           )}
         </section>
       </div>
+      </ErrorBoundary>
     </PortalLayout>
   );
 }

src/app/layout-portal.tsx

@@ -3,12 +3,20 @@
 import PortalSidebar from '@/components/PortalSidebar';
 import PortalHeader from '@/components/PortalHeader';
 
-export default function PortalLayout({ children }: { children: React.ReactNode }) {
+interface PortalLayoutProps {
+  children: React.ReactNode;
+  /** Optional custom header. Defaults to <PortalHeader /> if omitted. */
+  header?: React.ReactNode;
+  /** Optional custom sidebar. Defaults to <PortalSidebar /> if omitted. */
+  sidebar?: React.ReactNode;
+}
+
+export default function PortalLayout({ children, header, sidebar }: PortalLayoutProps) {
   return (
     <div className="flex min-h-screen">
-      <PortalSidebar />
+      {sidebar ?? <PortalSidebar />}
       <div className="flex-1 flex flex-col ml-56">
-        <PortalHeader />
+        {header ?? <PortalHeader />}
         <main className="flex-1 p-6">{children}</main>
       </div>
     </div>

src/app/login/page.tsx

@@ -29,8 +29,8 @@ export default function LoginPage() {
       await loginWithWallet(address, dw.provider);
       notify({ type: 'success', title: 'Ingelogd', message: `Wallet ${address.slice(0, 6)}…${address.slice(-4)}` });
       router.push('/dashboard');
-    } catch (err: any) {
-      notify({ type: 'error', title: 'Login mislukt', message: err.message || 'Onbekende fout' });
+    } catch (err: unknown) {
+      notify({ type: 'error', title: 'Login mislukt', message: err instanceof Error ? err.message : 'Onbekende fout' });
     } finally {
       setBusy(false);
       setBusyWallet(null);

src/app/page.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from 'react';
 import { connectWallet, signMessage } from '@/lib/wallet';
-import { checkHealth } from '@/lib/api';
+import { checkHealth } from '@/lib/api/gateway';
 import { useRouter } from 'next/navigation';
 import { HardDrive, Globe, Lock, ArrowRight, Server, Zap } from 'lucide-react';
 
@@ -21,8 +21,8 @@ export default function LandingPage() {
       // Non-blocking health check — portal UI werkt ook zonder backend
       checkHealth().catch(() => {});
       router.push('/dashboard');
-    } catch (e: any) {
-      setError(e.message || 'Connection failed');
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : 'Connection failed');
     } finally {
       setLoading(false);
     }

src/app/peers/page.tsx

@@ -1,11 +1,13 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import { getPeers } from '@/lib/api';
+import { getPeers } from '@/lib/api/gateway';
 import PortalLayout from '@/app/layout-portal';
 import { SkeletonTable } from '@/components/Skeleton';
 import { Wifi, Globe, Clock } from 'lucide-react';
 
+import ErrorBoundary from '@/components/ErrorBoundary';
+
 export default function PeersPage() {
   const [peers, setPeers] = useState<{ id: string; addr: string; latency: string }[]>([]);
   const [loading, setLoading] = useState(true);
@@ -15,7 +17,7 @@ export default function PeersPage() {
       try {
         const items = await getPeers();
         setPeers(items);
-      } catch { /* ignore */ }
+      } catch (err) { console.error('[PeersPage] Failed to load peers:', err); }
       finally { setLoading(false); }
     }
     load();
@@ -25,6 +27,7 @@ export default function PeersPage() {
 
   return (
     <PortalLayout>
+      <ErrorBoundary label="Peers">
       <div className="mb-6">
         <h1 className="text-2xl font-bold text-white">Peers</h1>
         <p className="text-sm text-surface-400 mt-1">{peers.length} connected peers</p>
@@ -59,6 +62,7 @@ export default function PeersPage() {
           </div>
         )}
       </div>
+      </ErrorBoundary>
     </PortalLayout>
   );
 }

src/app/pins/page.tsx

@@ -1,13 +1,14 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import { listPins, addPin, removePin } from '@/lib/api';
+import { listPins, addPin, removePin } from '@/lib/api/pins';
 import PortalLayout from '@/app/layout-portal';
 import Link from 'next/link';
 import { HardDrive, Trash2, Plus, Search, Copy, CheckCircle, ExternalLink, Download } from 'lucide-react';
 import Skeleton, { SkeletonRow, SkeletonTable } from '@/components/Skeleton';
 import BatchBar, { type BatchAction } from '@/components/BatchBar';
 import { useNotify } from '@/lib/notifications';
+import ErrorBoundary from '@/components/ErrorBoundary';
 
 export default function PinsPage() {
   const [pins, setPins] = useState<{ cid: string; name: string; size: number; created: string }[]>([]);
@@ -25,7 +26,7 @@ export default function PinsPage() {
     try {
       const items = await listPins();
       setPins(items);
-    } catch { /* ignore */ }
+    } catch (err) { console.error('[PinsPage] Failed to load pins:', err); }
     finally { setLoading(false); }
   }
 
@@ -39,14 +40,14 @@ export default function PinsPage() {
       setNewName('');
       setShowAdd(false);
       await load();
-    } catch { /* ignore */ }
+    } catch (err) { console.error('[PinsPage] Failed to add pin:', err); }
   }
 
   async function handleRemove(cid: string) {
     try {
       await removePin(cid);
       setPins((p) => p.filter((x) => x.cid !== cid));
-    } catch { /* ignore */ }
+    } catch (err) { console.error('[PinsPage] Failed to remove pin:', err); }
   }
 
   async function copyCid(cid: string) {
@@ -54,7 +55,7 @@ export default function PinsPage() {
       await navigator.clipboard.writeText(cid);
       setCopied(cid);
       setTimeout(() => setCopied(null), 2000);
-    } catch { /* ignore */ }
+    } catch (err) { console.error('[PinsPage] Clipboard write failed:', err); }
   }
 
   function toggleSelect(cid: string) {
@@ -78,7 +79,8 @@ export default function PinsPage() {
       try {
         await removePin(cid);
         success++;
-      } catch {
+      } catch (err) {
+        console.error('[PinsPage] Batch unpin failed for CID:', err);
         fail++;
       }
     }
@@ -98,6 +100,7 @@ export default function PinsPage() {
 
   return (
     <PortalLayout>
+      <ErrorBoundary label="Pinnen">
       <div className="flex items-center justify-between mb-6">
         <div>
           <h1 className="text-2xl font-bold text-white">Pins</h1>
@@ -225,6 +228,7 @@ export default function PinsPage() {
         onClear={clearSelection}
         label="selected"
       />
+      </ErrorBoundary>
     </PortalLayout>
   );
 }

src/app/profile/page.tsx

@@ -53,8 +53,8 @@ export default function ProfilePage() {
       setCurrentPass('');
       setNewPass('');
       setConfirmPass('');
-    } catch (err: any) {
-      setError(err.message);
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : String(err));
     } finally {
       setBusy(false);
     }

src/app/register/page.tsx

@@ -52,8 +52,8 @@ export default function RegisterPage() {
         message: `Welkom, ${username.trim()}! Je kunt nu inloggen.`,
       });
       router.push('/login');
-    } catch (err: any) {
-      setError(err.message || 'Registratie mislukt');
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Registratie mislukt');
     } finally {
       setBusy(false);
     }

src/app/settings/components.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { Save, RotateCcw, Check, AlertTriangle } from "lucide-react";
+
+interface SettingsActionsProps {
+  dirty: boolean;
+  saved: boolean;
+  error: string | null;
+  onSave: () => void;
+  onReset: () => void;
+}
+
+export function errorMsg(field: string, validation: Record<string, string | null>): ReactNode {
+  return validation[field] ? (
+    <p className="mt-1 text-xs text-accent-rose">{validation[field]}</p>
+  ) : null;
+}
+
+export function SettingsActions({ dirty, saved, error, onSave, onReset }: SettingsActionsProps) {
+  return (
+    <div className="glass rounded-xl p-5 animate-fade-in">
+      <div className="flex flex-wrap items-center gap-3">
+        <button
+          onClick={onSave}
+          disabled={!dirty && !error}
+          className="flex items-center gap-2 px-5 py-2.5 rounded-xl bg-brand-600 hover:bg-brand-500 disabled:opacity-40 disabled:cursor-not-allowed text-white text-sm font-medium transition-colors"
+        >
+          {saved ? (
+            <><Check className="w-4 h-4 text-accent-green" /> Saved!</>
+          ) : (
+            <><Save className="w-4 h-4" /> Save Settings</>
+          )}
+        </button>
+
+        <button
+          onClick={onReset}
+          className="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-surface-800 hover:bg-surface-700 text-surface-300 text-sm font-medium transition-colors"
+        >
+          <RotateCcw className="w-4 h-4" />
+          Reset Defaults
+        </button>
+
+        {dirty && !saved && (
+          <span className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-accent-amber/10 text-accent-amber text-xs">
+            <AlertTriangle className="w-3 h-3" />
+            Unsaved changes
+          </span>
+        )}
+
+        {error && (
+          <span className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-accent-rose/10 text-accent-rose text-xs">
+            <AlertTriangle className="w-3 h-3" />
+            {error}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}

src/app/settings/helpers.ts

@@ -0,0 +1,44 @@
+/* ── Settings Page Helpers ── */
+
+import type { PortalSettings } from "@/lib/storage";
+
+export function formatStorageMB(mb: number): string {
+  if (mb >= 1024) return (mb / 1024).toFixed(0) + " GB";
+  return mb + " MB";
+}
+
+export function inputCls(field: string, validation: Record<string, string | null>): string {
+  return `w-full rounded-lg bg-surface-900 border ${
+    validation[field] ? "border-accent-rose/50" : "border-surface-700"
+  } px-3 py-2 text-sm text-surface-200 placeholder:text-surface-500 focus:outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500 transition-colors`;
+}
+
+export function validateSettings(
+  form: PortalSettings,
+): { valid: boolean; errors: Record<string, string | null> } {
+  const errors: Record<string, string | null> = {};
+  let valid = true;
+
+  if (!form.gatewayUrl.startsWith("http://") && !form.gatewayUrl.startsWith("https://")) {
+    errors.gatewayUrl = "Must start with http:// or https://";
+    valid = false;
+  }
+  if (form.gatewayUrl.length > 500) {
+    errors.gatewayUrl = "Too long (max 500 chars)";
+    valid = false;
+  }
+  if (form.apiEndpoint && !form.apiEndpoint.startsWith("/") && !form.apiEndpoint.startsWith("http")) {
+    errors.apiEndpoint = "Must be empty, a path (/…), or a URL";
+    valid = false;
+  }
+  if (form.storageMax < 1 || form.storageMax > 102400) {
+    errors.storageMax = "Must be 1–102400 MB";
+    valid = false;
+  }
+  if (form.refreshInterval < 5 || form.refreshInterval > 300) {
+    errors.refreshInterval = "Must be 5–300 seconds";
+    valid = false;
+  }
+
+  return { valid, errors };
+}

src/app/settings/page.tsx

@@ -3,25 +3,16 @@
 import { useState } from 'react';
 import { getSettings, saveSettings, resetSettings, type PortalSettings } from '@/lib/storage';
 import { useTheme } from '@/lib/theme';
+import { formatBytes } from '@/lib/helpers';
 import PortalLayout from '@/app/layout-portal';
 import {
-  Settings, Globe, Server, HardDrive, RefreshCw, Shield,
-  Sun, Moon, Save, RotateCcw, Check, AlertTriangle,
+  Globe, Server, HardDrive, RefreshCw, Shield,
+  Sun, Moon,
 } from 'lucide-react';
-
-/* ── Helpers ── */
-
-function formatStorageMB(mb: number): string {
-  if (mb >= 1024) return (mb / 1024).toFixed(0) + ' GB';
-  return mb + ' MB';
-}
-
-function formatBytes(bytes: number): string {
-  if (bytes === 0) return '0 B';
-  const units = ['B', 'KB', 'MB', 'GB'];
-  const i = Math.floor(Math.log(bytes) / Math.log(1024));
-  return (bytes / Math.pow(1024, i)).toFixed(i > 0 ? 1 : 0) + ' ' + units[i];
-}
+import ErrorBoundary from '@/components/ErrorBoundary';
+import { formatStorageMB, inputCls, validateSettings } from './helpers';
+import { errorMsg } from './components';
+import { SettingsActions } from './components';
 
 /* ════════════════════════════ Page ════════════════════════════ */
 
@@ -40,47 +31,19 @@ export default function SettingsPage() {
     setForm(prev => ({ ...prev, [key]: value }));
     setSaved(false);
     setError(null);
-
-    // Clear validation error on change
     if (validation[key]) {
       setValidation(prev => ({ ...prev, [key]: null }));
     }
   }
 
-  /* ── Validate ── */
-  function validate(): boolean {
-    const errs: Record<string, string | null> = {};
-    let valid = true;
-
-    if (!form.gatewayUrl.startsWith('http://') && !form.gatewayUrl.startsWith('https://')) {
-      errs.gatewayUrl = 'Must start with http:// or https://';
-      valid = false;
-    }
-    if (form.gatewayUrl.length > 500) {
-      errs.gatewayUrl = 'Too long (max 500 chars)';
-      valid = false;
-    }
-    if (form.apiEndpoint && !form.apiEndpoint.startsWith('/') && !form.apiEndpoint.startsWith('http')) {
-      errs.apiEndpoint = 'Must be empty, a path (/…), or a URL';
-      valid = false;
-    }
-    if (form.storageMax < 1 || form.storageMax > 102400) {
-      errs.storageMax = 'Must be 1–102400 MB';
-      valid = false;
-    }
-    if (form.refreshInterval < 5 || form.refreshInterval > 300) {
-      errs.refreshInterval = 'Must be 5–300 seconds';
-      valid = false;
-    }
-
-    setValidation(errs);
-    if (!valid) setError('Fix validation errors before saving');
-    return valid;
-  }
-
   /* ── Save ── */
   function handleSave() {
-    if (!validate()) return;
+    const result = validateSettings(form);
+    setValidation(result.errors);
+    if (!result.valid) {
+      setError('Fix validation errors before saving');
+      return;
+    }
     const merged = saveSettings(form);
     setForm(merged);
     setOriginal({ ...merged });
@@ -100,18 +63,6 @@ export default function SettingsPage() {
     setValidation({});
   }
 
-  /* ── Render helpers ── */
-
-  function inputCls(field: string): string {
-    return `w-full rounded-lg bg-surface-900 border ${validation[field] ? 'border-accent-rose/50' : 'border-surface-700'} px-3 py-2 text-sm text-surface-200 placeholder:text-surface-500 focus:outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500 transition-colors`;
-  }
-
-  function errorMsg(field: string) {
-    return validation[field] ? (
-      <p className="mt-1 text-xs text-accent-rose">{validation[field]}</p>
-    ) : null;
-  }
-
   /* ════════════ Sections ════════════ */
 
   const sections = [
@@ -126,9 +77,9 @@ export default function SettingsPage() {
             value={form.gatewayUrl}
             onChange={e => update('gatewayUrl', e.target.value)}
             placeholder="https://ipfs.io/ipfs"
-            className={inputCls('gatewayUrl')}
+            className={inputCls('gatewayUrl', validation)}
           />
-          {errorMsg('gatewayUrl')}
+          {errorMsg('gatewayUrl', validation)}
           <p className="mt-1.5 text-[11px] text-surface-500">
             Base URL for IPFS gateway links. Used in dashboard, history, and share links.
           </p>
@@ -146,9 +97,9 @@ export default function SettingsPage() {
             value={form.apiEndpoint}
             onChange={e => update('apiEndpoint', e.target.value)}
             placeholder="(same-origin)"
-            className={inputCls('apiEndpoint')}
+            className={inputCls('apiEndpoint', validation)}
           />
-          {errorMsg('apiEndpoint')}
+          {errorMsg('apiEndpoint', validation)}
           <p className="mt-1.5 text-[11px] text-surface-500">
             Leave empty to use the same origin. Set to a custom URL to proxy through another server.
           </p>
@@ -185,7 +136,7 @@ export default function SettingsPage() {
             />
             <span className="text-xs text-surface-500">MB</span>
           </div>
-          {errorMsg('storageMax')}
+          {errorMsg('storageMax', validation)}
           <p className="mt-1.5 text-[11px] text-surface-500">
             Maximum storage the IPFS node should use. Applied server-side.
           </p>
@@ -198,23 +149,20 @@ export default function SettingsPage() {
       iconColor: 'text-accent-rose',
       fields: (
         <div className="space-y-4">
-          {/* Allowed file types */}
           <div>
             <label className="text-xs text-surface-400 mb-1.5 block">Allowed File Extensions</label>
             <input
               value={form.allowedFileTypes}
               onChange={e => update('allowedFileTypes', e.target.value)}
               placeholder=".jpg,.png,.pdf,.mp4 (leave empty for all)"
-              className={inputCls('allowedFileTypes')}
+              className={inputCls('allowedFileTypes', validation)}
             />
-            {errorMsg('allowedFileTypes')}
+            {errorMsg('allowedFileTypes', validation)}
             <p className="mt-1.5 text-[11px] text-surface-500">
-              Comma-separated extensions. Empty = all file types accepted.
-              Extension check is case-insensitive.
+              Comma-separated extensions. Empty = all file types accepted. Extension check is case-insensitive.
             </p>
           </div>
 
-          {/* Max file size */}
           <div>
             <label className="text-xs text-surface-400 mb-1.5 block">
               Max File Size: <span className="text-surface-200 font-medium">{formatBytes(form.maxFileSize)}</span>
@@ -244,7 +192,6 @@ export default function SettingsPage() {
             </p>
           </div>
 
-          {/* Max files per batch */}
           <div>
             <label className="text-xs text-surface-400 mb-1.5 block">
               Max Files Per Upload: <span className="text-surface-200 font-medium">{form.maxFiles}</span>
@@ -306,7 +253,7 @@ export default function SettingsPage() {
             />
             <span className="text-xs text-surface-500">sec</span>
           </div>
-          {errorMsg('refreshInterval')}
+          {errorMsg('refreshInterval', validation)}
           <p className="mt-1.5 text-[11px] text-surface-500">
             How often the dashboard auto-refreshes peer/bandwidth data.
           </p>
@@ -346,13 +293,12 @@ export default function SettingsPage() {
 
   return (
     <PortalLayout>
-      {/* ── Header ── */}
+      <ErrorBoundary label="Instellingen">
       <div className="mb-6">
         <h1 className="text-2xl font-bold text-white">Settings</h1>
         <p className="text-sm text-surface-400 mt-1">IPFS Portal configuration</p>
       </div>
 
-      {/* ── Settings grid ── */}
       <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
         {sections.map((s) => (
           <div key={s.title} className="glass rounded-xl p-5 animate-fade-in">
@@ -365,48 +311,14 @@ export default function SettingsPage() {
         ))}
       </div>
 
-      {/* ── Actions + status ── */}
-      <div className="glass rounded-xl p-5 animate-fade-in">
-        <div className="flex flex-wrap items-center gap-3">
-          {/* Save */}
-          <button
-            onClick={handleSave}
-            disabled={!dirty && !error}
-            className="flex items-center gap-2 px-5 py-2.5 rounded-xl bg-brand-600 hover:bg-brand-500 disabled:opacity-40 disabled:cursor-not-allowed text-white text-sm font-medium transition-colors"
-          >
-            {saved ? (
-              <><Check className="w-4 h-4 text-accent-green" /> Saved!</>
-            ) : (
-              <><Save className="w-4 h-4" /> Save Settings</>
-            )}
-          </button>
-
-          {/* Reset */}
-          <button
-            onClick={handleReset}
-            className="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-surface-800 hover:bg-surface-700 text-surface-300 text-sm font-medium transition-colors"
-          >
-            <RotateCcw className="w-4 h-4" />
-            Reset Defaults
-          </button>
-
-          {/* Dirty indicator */}
-          {dirty && !saved && (
-            <span className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-accent-amber/10 text-accent-amber text-xs">
-              <AlertTriangle className="w-3 h-3" />
-              Unsaved changes
-            </span>
-          )}
-
-          {/* Error */}
-          {error && (
-            <span className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-accent-rose/10 text-accent-rose text-xs">
-              <AlertTriangle className="w-3 h-3" />
-              {error}
-            </span>
-          )}
-        </div>
-      </div>
+      <SettingsActions
+        dirty={dirty}
+        saved={saved}
+        error={error}
+        onSave={handleSave}
+        onReset={handleReset}
+      />
+      </ErrorBoundary>
     </PortalLayout>
   );
 }

src/app/upload/components/CryptoUpload.tsx

@@ -4,16 +4,8 @@ import { type RefObject } from 'react';
 import {
   File, CheckCircle, Copy, ExternalLink, Trash2, ArrowUp,
 } from 'lucide-react';
-import PaymentPanel from '@/components/PaymentPanel';
-
-/* ── Helpers ── */
-function formatBytes(b: number): string {
-  if (b === 0) return '0 B';
-  const units = ['B', 'KB', 'MB', 'GB'];
-  const i = Math.min(Math.floor(Math.log(b) / Math.log(1024)), units.length - 1);
-  const val = b / Math.pow(1024, i);
-  return (val < 10 ? val.toFixed(1) : Math.round(val)) + ' ' + units[i];
-}
+import { formatBytes } from '@/lib/helpers';
+import PaymentPanel from '@/components/payment';
 
 /* ── Props ── */
 interface CryptoUploadProps {

src/app/upload/components/QuickUpload.tsx

@@ -5,17 +5,9 @@ import {
   Upload, File, CheckCircle, XCircle, Loader2,
   Copy, ExternalLink, Trash2, Globe, AlertTriangle,
 } from 'lucide-react';
+import { formatBytes } from '@/lib/helpers';
 import { getSettings } from '@/lib/storage';
 
-/* ── Helpers ── */
-function formatBytes(b: number): string {
-  if (b === 0) return '0 B';
-  const units = ['B', 'KB', 'MB', 'GB'];
-  const i = Math.min(Math.floor(Math.log(b) / Math.log(1024)), units.length - 1);
-  const val = b / Math.pow(1024, i);
-  return (val < 10 ? val.toFixed(1) : Math.round(val)) + ' ' + units[i];
-}
-
 export interface FileEntry {
   id: string;
   file: File;

src/app/upload/helpers.ts

@@ -0,0 +1,3 @@
+/* ── Upload Page Helpers ── */
+
+export type TabMode = "quick" | "crypto";

src/app/upload/page.tsx

@@ -1,16 +1,17 @@
 'use client';
 
 import { useState, useRef, type DragEvent, useCallback, useMemo } from 'react';
-import { uploadFile } from '@/lib/api';
+import { uploadFile } from '@/lib/api/files';
 import { addToHistory, getSettings } from '@/lib/storage';
 import PortalLayout from '@/app/layout-portal';
 import { checkUploadAllowed } from '@/lib/limits';
 import { useNotify } from '@/lib/notifications';
+import { formatBytes, gatewayLink } from '@/lib/helpers';
 import { Zap, ArrowUp } from 'lucide-react';
 import QuickUpload, { type FileEntry } from './components/QuickUpload';
+import { PaymentProvider } from '@/lib/payment';
 import CryptoUpload from './components/CryptoUpload';
-
-type TabMode = 'quick' | 'crypto';
+import type { TabMode } from './helpers';
 
 /* ════════════════════════════ Page ════════════════════════════ */
 
@@ -145,9 +146,9 @@ export default function UploadPage() {
         setFiles(prev => prev.map(f =>
           f.id === entry.id ? { ...f, status: 'done' as const, result, date } : f
         ));
-      } catch (e: any) {
+      } catch (e: unknown) {
         setFiles(prev => prev.map(f =>
-          f.id === entry.id ? { ...f, status: 'error' as const, errorMsg: e.message || 'Upload failed' } : f
+          f.id === entry.id ? { ...f, status: 'error' as const, errorMsg: e instanceof Error ? e.message : 'Upload failed' } : f
         ));
       }
     }
@@ -184,22 +185,18 @@ export default function UploadPage() {
 
   /* ── Clipboard ── */
   function copyCid(cid: string) {
-    navigator.clipboard.writeText(cid).catch(() => {});
+    navigator.clipboard.writeText(cid).catch((err) => { console.error('[UploadPage] Clipboard CID failed:', err); });
     setCopied(cid);
     setTimeout(() => setCopied(null), 2000);
   }
 
   function copyShareLink(cid: string) {
     const link = gatewayLink(cid);
-    navigator.clipboard.writeText(link).catch(() => {});
+    navigator.clipboard.writeText(link).catch((err) => { console.error('[UploadPage] Clipboard share link failed:', err); });
     setCopied(`gw-${cid}`);
     setTimeout(() => setCopied(null), 2000);
   }
 
-  function gatewayLink(cid: string) {
-    return `https://ipfs.maos.dedyn.io/${cid}`;
-  }
-
   /* ════════════ Render ════════════ */
 
   return (
@@ -262,19 +259,21 @@ export default function UploadPage() {
 
       {/* Crypto Payment tab */}
       {tab === 'crypto' && (
-        <CryptoUpload
-          cryptoFile={cryptoFile}
-          cryptoResult={cryptoResult}
-          copied={copied}
-          cryptoInputRef={cryptoInputRef}
-          onCryptoSelect={onCryptoSelect}
-          onCryptoFileChange={onCryptoFileChange}
-          onCryptoClear={onCryptoClear}
-          onCryptoPaid={onCryptoPaid}
-          doCryptoUpload={doCryptoUpload}
-          onCopyCid={copyCid}
-          gatewayLink={gatewayLink}
-        />
+        <PaymentProvider>
+          <CryptoUpload
+            cryptoFile={cryptoFile}
+            cryptoResult={cryptoResult}
+            copied={copied}
+            cryptoInputRef={cryptoInputRef}
+            onCryptoSelect={onCryptoSelect}
+            onCryptoFileChange={onCryptoFileChange}
+            onCryptoClear={onCryptoClear}
+            onCryptoPaid={onCryptoPaid}
+            doCryptoUpload={doCryptoUpload}
+            onCopyCid={copyCid}
+            gatewayLink={gatewayLink}
+          />
+        </PaymentProvider>
       )}
     </PortalLayout>
   );

src/app/usage/page.tsx

@@ -2,8 +2,9 @@
 
 import { useEffect, useState } from 'react';
 import PortalLayout from '@/app/layout-portal';
-import { getRepoStats, getPeers, listPins } from '@/lib/api';
-import type { RepoStats } from '@/lib/api';
+import { getRepoStats, getPeers } from '@/lib/api/gateway';
+import { listPins } from '@/lib/api/pins';
+import type { RepoStats } from '@/lib/api/client';
 import { checkUploadAllowed, type UsageCheckResult } from '@/lib/limits';
 import { useAuth } from '@/lib/auth';
 import StorageGauge from '@/app/dashboard/components/StorageGauge';

src/app/users/helpers.ts

@@ -0,0 +1,6 @@
+/* ── Users Page Helpers ── */
+
+export function formatTimestamp(ts: bigint): string {
+  const d = new Date(Number(ts) * 1000);
+  return d.toLocaleDateString() + " " + d.toLocaleTimeString();
+}

src/app/users/page.tsx

@@ -1,18 +1,23 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import { listUsers, createUser, deleteUser } from '@/lib/api';
+import { listUsers, createUser, deleteUser } from '@/lib/api/users';
 import PortalLayout from '@/app/layout-portal';
 import { SkeletonTable } from '@/components/Skeleton';
-import { paymentService, type UserFullStats, type UploadRecord } from '@/lib/payment';
-import { formatWeiToETH, formatBytes } from '@/lib/wallet';
+import { usePaymentService, type UserFullStats, type UploadRecord } from '@/lib/payment';
+import { formatBytes } from '@/lib/helpers';
+import { formatWeiToETH } from '@/lib/wallet';
+import { formatTimestamp } from './helpers';
 import {
   Users, Plus, Trash2, UserPlus, Search, Wallet,
   HardDrive, Upload, Clock, ExternalLink, Copy,
   CheckCircle, Loader2, XCircle,
 } from 'lucide-react';
 
+import ErrorBoundary from '@/components/ErrorBoundary';
+
 export default function UsersPage() {
+  const paymentService = usePaymentService();
   // ── htpasswd users ──
   const [users, setUsers] = useState<{ username: string; created: string; active: boolean }[]>([]);
   const [loading, setLoading] = useState(true);
@@ -31,7 +36,7 @@ export default function UsersPage() {
     try {
       const items = await listUsers();
       setUsers(items);
-    } catch { /* ignore */ }
+    } catch (err) { console.error('[UsersPage] Failed to load users:', err); }
     finally { setLoading(false); }
   }
 
@@ -45,14 +50,14 @@ export default function UsersPage() {
       setNewPass('');
       setShowAdd(false);
       await load();
-    } catch { /* ignore */ }
+    } catch (err) { console.error('[UsersPage] Failed to create user:', err); }
   }
 
   async function handleDelete(username: string) {
     try {
       await deleteUser(username);
       setUsers((u) => u.filter((x) => x.username !== username));
-    } catch { /* ignore */ }
+    } catch (err) { console.error('[UsersPage] Failed to delete user:', err); }
   }
 
   // ── Wallet lookup ──
@@ -68,8 +73,8 @@ export default function UsersPage() {
     try {
       const stats = await paymentService.getUserUploads(addr as `0x${string}`);
       setWalletStats(stats);
-    } catch (e: any) {
-      setWalletError(e.message || 'Failed to fetch wallet stats');
+    } catch (e: unknown) {
+      setWalletError(e instanceof Error ? e.message : 'Failed to fetch wallet stats');
     } finally {
       setWalletLoading(false);
     }
@@ -80,16 +85,12 @@ export default function UsersPage() {
       await navigator.clipboard.writeText(cid);
       setCopiedCid(cid);
       setTimeout(() => setCopiedCid(null), 2000);
-    } catch { /* ignore */ }
-  }
-
-  function formatTimestamp(ts: bigint): string {
-    const d = new Date(Number(ts) * 1000);
-    return d.toLocaleDateString() + ' ' + d.toLocaleTimeString();
+    } catch (err) { console.error('[UsersPage] Clipboard write failed:', err); }
   }
 
   return (
     <PortalLayout>
+      <ErrorBoundary label="Gebruikers">
       {/* ── Header with count badge ── */}
       <div className="flex items-center justify-between mb-6">
         <div>
@@ -271,6 +272,7 @@ export default function UsersPage() {
           )}
         </div>
       </div>
+      </ErrorBoundary>
     </PortalLayout>
   );
 }

src/components/PaymentPanel.tsx

@@ -1,390 +0,0 @@
-'use client';
-
-import { useState, useEffect, useCallback } from 'react';
-import { paymentService, type PriceInfo, type TokenInfo, type MAOSDiscountTier, type UserUploadStats } from '@/lib/payment';
-import {
-  connectWallet, switchToChain270, getInjectedProvider,
-  formatWeiToETH, formatBytes, type WalletProvider,
-} from '@/lib/wallet';
-import {
-  Wallet, Coins, Loader2, CheckCircle, XCircle,
-  Zap, Shield, Tag, ArrowRight, ExternalLink, Copy,
-} from 'lucide-react';
-
-/* ── Token icons ── */
-const TOKEN_ICONS: Record<string, string> = {
-  ETH: '⟠',
-  MAOS: 'Ⓜ',
-  USDC: '⬡',
-};
-
-interface PaymentPanelProps {
-  fileSize: number;          // bytes
-  fileName?: string;
-  onPaid: (paymentInfo: { cid: string; txHash?: string; method: 'free' | 'eth' | 'token' }) => void;
-  onUpload: () => Promise<{ cid: string; size: number }>;
-  contractAddress?: string;
-}
-
-export default function PaymentPanel({
-  fileSize,
-  fileName,
-  onPaid,
-  onUpload,
-  contractAddress,
-}: PaymentPanelProps) {
-  // Wallet state
-  const [address, setAddress] = useState<string | null>(null);
-  const [provider, setProvider] = useState<WalletProvider | null>(null);
-  const [connecting, setConnecting] = useState(false);
-  const [walletType, setWalletType] = useState<string | null>(null);
-  const [wrongChain, setWrongChain] = useState(false);
-
-  // Contract state
-  const [deployed, setDeployed] = useState(false);
-  const [price, setPrice] = useState<PriceInfo | null>(null);
-  const [userStats, setUserStats] = useState<UserUploadStats | null>(null);
-  const [tokens, setTokens] = useState<TokenInfo[]>([]);
-  const [discountTiers, setDiscountTiers] = useState<MAOSDiscountTier[]>([]);
-  const [selectedToken, setSelectedToken] = useState('ETH');
-  const [freeTierBytes, setFreeTierBytes] = useState<bigint>(BigInt(0));
-
-  // Upload state
-  const [uploading, setUploading] = useState(false);
-  const [paying, setPaying] = useState(false);
-  const [status, setStatus] = useState<'idle' | 'paying' | 'uploading' | 'complete' | 'error'>('idle');
-  const [error, setError] = useState<string | null>(null);
-  const [txHash, setTxHash] = useState<string | null>(null);
-  const [uploadResult, setUploadResult] = useState<{ cid: string; size: number } | null>(null);
-  const [copied, setCopied] = useState(false);
-
-  // Init
-  useEffect(() => {
-    if (contractAddress) {
-      paymentService.setContractAddress(contractAddress);
-    }
-    paymentService.isDeployed().then(setDeployed).catch(() => setDeployed(false));
-  }, [contractAddress]);
-
-  // Refresh price + stats when address or fileSize changes
-  const refreshPricing = useCallback(async (addr: string, size: number) => {
-    if (!deployed) return;
-    try {
-      const [p, stats, t, tiers, freeBytes] = await Promise.all([
-        paymentService.getPrice(size, addr as `0x${string}`),
-        paymentService.getUserStats(addr as `0x${string}`),
-        paymentService.getSupportedTokens(),
-        paymentService.getMAOSDiscountTiers(),
-        paymentService.getFreeTierBytes(),
-      ]);
-      setPrice(p);
-      setUserStats(stats);
-      setTokens(t.filter(tk => tk.enabled || tk.symbol === 'ETH'));
-      setDiscountTiers(tiers);
-      setFreeTierBytes(freeBytes);
-    } catch (e) {
-      console.warn('Payment contract read failed:', e);
-    }
-  }, [deployed]);
-
-  // Connect wallet
-  async function handleConnect() {
-    setConnecting(true);
-    setError(null);
-    try {
-      const result = await connectWallet();
-      const prov = getInjectedProvider();
-      setAddress(result.address);
-      setProvider(prov);
-
-      // Detect wallet type
-      if (window.maosv6) setWalletType('MAOS Wallet');
-      else if (window.ethereum?.isRabby) setWalletType('Rabby');
-      else if (window.ethereum?.isMetaMask) setWalletType('MetaMask');
-      else setWalletType('Wallet');
-
-      // Check chain
-      if (result.chainId !== 270) {
-        setWrongChain(true);
-        const switched = await switchToChain270(prov || undefined);
-        if (switched) setWrongChain(false);
-      }
-
-      await refreshPricing(result.address, fileSize);
-    } catch (e: any) {
-      setError(e.message || 'Failed to connect wallet');
-    } finally {
-      setConnecting(false);
-    }
-  }
-
-  // Refresh when fileSize changes
-  useEffect(() => {
-    if (address && deployed) {
-      refreshPricing(address, fileSize);
-    }
-  }, [fileSize, address, deployed, refreshPricing]);
-
-  // Pay + Upload flow
-  async function handlePayAndUpload() {
-    if (!provider || !address) return;
-    setPaying(true);
-    setError(null);
-    setStatus('paying');
-
-    try {
-      // Step 1: Upload to IPFS
-      setStatus('uploading');
-      const upload = await onUpload();
-      setUploadResult(upload);
-
-      // Step 2: Pay (if not free)
-      if (price && !price.isFree && price.finalWei > BigInt(0)) {
-        if (selectedToken === 'ETH') {
-          const hash = await paymentService.payWithETH(provider, upload.cid, fileSize, price.finalWei);
-          setTxHash(hash);
-          onPaid({ cid: upload.cid, txHash: hash, method: 'eth' });
-        } else {
-          // Token payment — need to find token address
-          const token = tokens.find(t => t.symbol === selectedToken);
-          if (!token || token.address === '0x0000000000000000000000000000000000000000') {
-            throw new Error(`${selectedToken} not configured on contract`);
-          }
-          // Calculate token amount
-          const tokenAmount = (price.finalWei * BigInt(10 ** token.decimals)) / token.weiPerToken;
-          const result = await paymentService.approveAndPayWithToken(
-            provider, token.address as `0x${string}`,
-            upload.cid, fileSize, tokenAmount, selectedToken
-          );
-          setTxHash(result.payHash);
-          onPaid({ cid: upload.cid, txHash: result.payHash, method: 'token' });
-        }
-      } else {
-        // Free upload
-        onPaid({ cid: upload.cid, method: 'free' });
-      }
-
-      setStatus('complete');
-    } catch (e: any) {
-      setError(e.message || 'Payment/upload failed');
-      setStatus('error');
-    } finally {
-      setPaying(false);
-    }
-  }
-
-  async function copyCID() {
-    if (!uploadResult) return;
-    try {
-      await navigator.clipboard.writeText(uploadResult.cid);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch { /* ignore */ }
-  }
-
-  /* ── Render ── */
-  return (
-    <div className="glass rounded-xl p-5 space-y-5">
-      {/* ── Header ── */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <Wallet className="w-4 h-4 text-brand-400" />
-          <h3 className="text-sm font-semibold text-white">Crypto Payment</h3>
-        </div>
-        {address && walletType && (
-          <span className="text-[10px] px-2 py-0.5 rounded-full bg-surface-700 text-surface-400">
-            {walletType}
-          </span>
-        )}
-      </div>
-
-      {!deployed ? (
-        /* ── Not deployed ── */
-        <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-surface-800/50 text-surface-400 text-xs">
-          <Shield className="w-3.5 h-3.5" />
-          Payment contract not deployed — uploads are free
-        </div>
-      ) : !address ? (
-        /* ── Connect wallet ── */
-        <button
-          onClick={handleConnect}
-          disabled={connecting}
-          className="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg bg-brand-500 hover:bg-brand-400 disabled:opacity-50 text-white text-sm font-medium transition-colors"
-        >
-          {connecting ? (
-            <><Loader2 className="w-4 h-4 animate-spin" /> Connecting...</>
-          ) : (
-            <><Wallet className="w-4 h-4" /> Connect Wallet</>
-          )}
-        </button>
-      ) : wrongChain ? (
-        /* ── Wrong chain ── */
-        <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-amber-500/10 border border-amber-500/20 text-amber-400 text-xs">
-          <XCircle className="w-3.5 h-3.5 shrink-0" />
-          Please switch to zkSync Local (chain 270)
-        </div>
-      ) : (
-        /* ── Connected — show pricing ── */
-        <div className="space-y-4">
-          {/* Wallet address */}
-          <div className="flex items-center justify-between px-3 py-2 rounded-lg bg-surface-800/50">
-            <span className="text-xs text-surface-400">Connected</span>
-            <span className="text-xs font-mono text-surface-200">
-              {address.slice(0, 6)}...{address.slice(-4)}
-            </span>
-          </div>
-
-          {/* Free tier info */}
-          {userStats && (
-            <div className="flex items-center justify-between px-3 py-2 rounded-lg bg-surface-800/50">
-              <div className="flex items-center gap-2">
-                <Zap className="w-3.5 h-3.5 text-accent-cyan" />
-                <span className="text-xs text-surface-400">Free tier</span>
-              </div>
-              <span className="text-xs text-surface-300">
-                {formatBytes(userStats.remainingFree)} / {formatBytes(freeTierBytes)} remaining
-              </span>
-            </div>
-          )}
-
-          {/* Price info */}
-          {price && (
-            <div className="space-y-2">
-              <div className="flex items-center justify-between px-3 py-2 rounded-lg bg-surface-800/50">
-                <span className="text-xs text-surface-400">File size</span>
-                <span className="text-xs text-surface-200">{formatBytes(fileSize)}</span>
-              </div>
-
-              {price.isFree ? (
-                <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-accent-green/10 border border-accent-green/20 text-accent-green text-xs">
-                  <CheckCircle className="w-3.5 h-3.5" />
-                  Free upload (within free tier)
-                </div>
-              ) : (
-                <>
-                  <div className="flex items-center justify-between px-3 py-2 rounded-lg bg-surface-800/50">
-                    <span className="text-xs text-surface-400">Price</span>
-                    <span className="text-xs text-surface-200">{formatWeiToETH(price.totalWei, 6)} ETH</span>
-                  </div>
-
-                  {price.discountBps > 0 && (
-                    <div className="flex items-center justify-between px-3 py-2 rounded-lg bg-accent-cyan/10 border border-accent-cyan/20">
-                      <div className="flex items-center gap-2">
-                        <Tag className="w-3 h-3 text-accent-cyan" />
-                        <span className="text-xs text-accent-cyan">MAOS discount</span>
-                      </div>
-                      <span className="text-xs text-accent-cyan font-medium">-{price.discountBps / 100}%</span>
-                    </div>
-                  )}
-
-                  <div className="flex items-center justify-between px-3 py-2 rounded-lg bg-brand-500/10 border border-brand-500/20">
-                    <span className="text-xs font-medium text-surface-300">Final</span>
-                    <span className="text-sm font-bold text-brand-400">
-                      {formatWeiToETH(price.finalWei, 6)} ETH
-                    </span>
-                  </div>
-
-                  {/* Token selector */}
-                  {tokens.length > 1 && (
-                    <div>
-                      <label className="text-xs text-surface-400 mb-1.5 block">Pay with</label>
-                      <div className="flex gap-1.5">
-                        {tokens.filter(t => t.enabled || t.symbol === 'ETH').map(token => (
-                          <button
-                            key={token.symbol}
-                            onClick={() => setSelectedToken(token.symbol)}
-                            className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${
-                              selectedToken === token.symbol
-                                ? 'bg-brand-500/20 text-brand-400 border border-brand-500/30'
-                                : 'bg-surface-800 text-surface-400 border border-surface-700 hover:border-surface-500'
-                            }`}
-                          >
-                            <span>{TOKEN_ICONS[token.symbol] || '●'}</span>
-                            {token.symbol}
-                          </button>
-                        ))}
-                      </div>
-                    </div>
-                  )}
-                </>
-              )}
-            </div>
-          )}
-
-          {/* Action button */}
-          <button
-            onClick={handlePayAndUpload}
-            disabled={paying || uploading || status === 'complete'}
-            className="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg bg-brand-500 hover:bg-brand-400 disabled:opacity-50 text-white text-sm font-medium transition-colors"
-          >
-            {paying ? (
-              <><Loader2 className="w-4 h-4 animate-spin" /> Processing payment...</>
-            ) : uploading ? (
-              <><Loader2 className="w-4 h-4 animate-spin" /> Uploading to IPFS...</>
-            ) : status === 'complete' ? (
-              <><CheckCircle className="w-4 h-4" /> Complete</>
-            ) : (
-              <><ArrowRight className="w-4 h-4" /> {price?.isFree ? 'Upload Free' : `Pay & Upload`}</>
-            )}
-          </button>
-        </div>
-      )}
-
-      {/* ── Result ── */}
-      {uploadResult && status === 'complete' && (
-        <div className="space-y-2 p-3 rounded-lg bg-accent-green/10 border border-accent-green/20 animate-fade-in">
-          <div className="flex items-center gap-2 text-accent-green">
-            <CheckCircle className="w-4 h-4" />
-            <span className="text-xs font-medium">Upload + Payment successful</span>
-          </div>
-          <div className="flex items-center justify-between text-xs">
-            <span className="text-surface-400">CID</span>
-            <button onClick={copyCID} className="flex items-center gap-1 text-surface-300 hover:text-surface-100 font-mono">
-              {uploadResult.cid.slice(0, 12)}...
-              {copied ? <CheckCircle className="w-3 h-3 text-accent-green" /> : <Copy className="w-3 h-3" />}
-            </button>
-          </div>
-          {txHash && (
-            <div className="flex items-center justify-between text-xs">
-              <span className="text-surface-400">Tx</span>
-              <a
-                href={`http://192.168.1.176:3050/tx/${txHash}`}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="flex items-center gap-1 text-brand-400 hover:text-brand-300 font-mono"
-              >
-                {txHash.slice(0, 10)}...
-                <ExternalLink className="w-3 h-3" />
-              </a>
-            </div>
-          )}
-        </div>
-      )}
-
-      {/* ── Error ── */}
-      {error && (
-        <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-accent-rose/10 border border-accent-rose/20 text-accent-rose text-xs animate-fade-in">
-          <XCircle className="w-3.5 h-3.5 shrink-0" />
-          {error}
-        </div>
-      )}
-
-      {/* ── MAOS Discount tiers ── */}
-      {address && discountTiers.length > 0 && (
-        <details className="text-xs text-surface-500">
-          <summary className="cursor-pointer hover:text-surface-400 transition-colors">
-            MAOS discount tiers
-          </summary>
-          <div className="mt-2 space-y-1">
-            {discountTiers.map((tier, i) => (
-              <div key={i} className="flex justify-between px-2 py-1 rounded bg-surface-800/30">
-                <span>{formatWeiToETH(tier.minBalance, 0)} MAOS</span>
-                <span className="text-accent-cyan">{tier.discountBps / 100}% off</span>
-              </div>
-            ))}
-          </div>
-        </details>
-      )}
-    </div>
-  );
-}

src/components/PortalHeader.tsx

@@ -1,10 +1,13 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import { checkHealth } from '@/lib/api';
+import { checkHealth } from '@/lib/api/gateway';
 import { useAuth } from '@/lib/auth';
 import { Shield, LogOut } from 'lucide-react';
 
+// NOTE: PortalHeader fetches node status + auth internally via useEffect.
+// Pages that need a custom header can pass one via PortalLayout's `header` slot
+// instead of modifying this component. See layout-portal.tsx PortalLayoutProps.
 export default function PortalHeader() {
   const { user, logout } = useAuth();
   const [nodeStatus, setNodeStatus] = useState<'online' | 'offline' | 'checking'>('checking');
@@ -18,7 +21,8 @@ export default function PortalHeader() {
         if (!mounted) return;
         setNodeStatus('online');
         setNodeVersion(h.node);
-      } catch {
+      } catch (err) {
+        console.error('[PortalHeader] Health check failed:', err);
         if (!mounted) return;
         setNodeStatus('offline');
       }

src/components/PortalSidebar.tsx

@@ -20,7 +20,22 @@ import {
   Moon,
 } from 'lucide-react';
 
-const NAV_ITEMS = [
+interface NavItem {
+  href: string;
+  label: string;
+  icon: React.ComponentType<{ className?: string }>;
+}
+
+interface PortalSidebarProps {
+  /** Custom nav items. Defaults to full portal nav if omitted. */
+  navItems?: NavItem[];
+  /** Theme toggle callback. Falls back to internal useTheme if omitted. */
+  onThemeToggle?: () => void;
+  /** Disconnect callback. Falls back to window.location.href='/' if omitted. */
+  onDisconnect?: () => void;
+}
+
+const DEFAULT_NAV_ITEMS: NavItem[] = [
   { href: '/dashboard', label: 'Dashboard', icon: LayoutDashboard },
   { href: '/usage', label: 'Usage', icon: BarChart3 },
   { href: '/upload', label: 'Upload', icon: Upload },
@@ -34,13 +49,13 @@ const NAV_ITEMS = [
   { href: '/settings', label: 'Settings', icon: Settings },
 ];
 
-export default function PortalSidebar() {
+export default function PortalSidebar({ navItems, onThemeToggle, onDisconnect }: PortalSidebarProps = {}) {
   const pathname = usePathname();
   const { theme, toggle: toggleTheme } = useTheme();
 
-  function handleDisconnect() {
-    window.location.href = '/';
-  }
+  const items = navItems ?? DEFAULT_NAV_ITEMS;
+  const handleThemeToggle = onThemeToggle ?? toggleTheme;
+  const handleDisconnect = onDisconnect ?? (() => { window.location.href = '/'; });
 
   return (
     <aside aria-label="Main navigation" className="fixed left-0 top-0 bottom-0 w-56 flex flex-col glass border-r border-surface-800 z-50">
@@ -54,7 +69,7 @@ export default function PortalSidebar() {
 
       {/* Nav */}
       <nav className="flex-1 p-3 space-y-1 overflow-y-auto">
-        {NAV_ITEMS.map((item) => {
+        {items.map((item) => {
           const active = pathname === item.href;
           return (
             <Link
@@ -76,7 +91,7 @@ export default function PortalSidebar() {
       {/* Theme toggle + Disconnect */}
       <div className="p-3 border-t border-surface-800 space-y-1">
         <button
-          onClick={toggleTheme}
+          onClick={handleThemeToggle}
           className="flex items-center gap-3 w-full px-3 py-2 rounded-lg text-sm text-surface-500 hover:text-surface-200 hover:bg-surface-800/50 transition-all duration-150"
         >
           {theme === 'dark' ? <Sun className="w-4 h-4 shrink-0" /> : <Moon className="w-4 h-4 shrink-0" />}

src/components/SWRegister.tsx

@@ -9,8 +9,8 @@ import { useEffect } from 'react';
 export default function SWRegister() {
   useEffect(() => {
     if ('serviceWorker' in navigator) {
-      navigator.serviceWorker.register('/sw.js').catch(() => {
-        // SW registratie mislukt — geen offline, app werkt gewoon
+      navigator.serviceWorker.register('/sw.js').catch((err) => {
+        console.error('[SWRegister] Registration failed:', err);
       });
     }
   }, []);

src/components/SearchBar.tsx

@@ -1,234 +0,0 @@
-'use client';
-
-/* ════════════════════════════ SearchBar ════════════════════════════
- *
- * Reusable search bar met debounce, resultaten dropdown, en toetsenbordnavigatie.
- * Gebruikt de client-side search index (search-index.ts) of een custom onSearch callback.
- */
-
-import { useState, useRef, useEffect, useCallback } from 'react';
-import { Search, X, FileIcon, FolderIcon, Loader2 } from 'lucide-react';
-import { searchIndex, type SearchResult } from '@/lib/search-index';
-
-/* ════════════════════════════ Types ════════════════════════════ */
-
-export interface SearchBarProps {
-  /** External search handler (optioneel — gebruikt search-index.ts anders) */
-  onSearch?: (query: string) => Promise<SearchResult[]> | SearchResult[];
-  /** Called when user selects a result */
-  onSelect: (result: SearchResult) => void;
-  /** Placeholder text */
-  placeholder?: string;
-  /** Auto-focus on mount */
-  autoFocus?: boolean;
-  /** Extra CSS classes */
-  className?: string;
-}
-
-/* ════════════════════════════ Component ════════════════════════════ */
-
-export default function SearchBar({
-  onSearch,
-  onSelect,
-  placeholder = 'Search files, CIDs, and content…',
-  autoFocus = false,
-  className = '',
-}: SearchBarProps) {
-  const [query, setQuery] = useState('');
-  const [results, setResults] = useState<SearchResult[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [showResults, setShowResults] = useState(false);
-  const [selectedIdx, setSelectedIdx] = useState(-1);
-
-  const inputRef = useRef<HTMLInputElement>(null);
-  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const panelRef = useRef<HTMLDivElement>(null);
-
-  /* ── Search logic ── */
-
-  const doSearch = useCallback(async (q: string) => {
-    if (!q || q.trim().length < 2) {
-      setResults([]);
-      setShowResults(false);
-      return;
-    }
-
-    setLoading(true);
-    try {
-      const hits = onSearch
-        ? await onSearch(q)
-        : searchIndex(q);
-      setResults(hits);
-      setShowResults(true);
-      setSelectedIdx(-1);
-    } finally {
-      setLoading(false);
-    }
-  }, [onSearch]);
-
-  /* ── Debounced input ── */
-
-  function handleChange(value: string) {
-    setQuery(value);
-    if (debounceRef.current) clearTimeout(debounceRef.current);
-    debounceRef.current = setTimeout(() => doSearch(value), 250);
-  }
-
-  /* ── Keyboard navigation ── */
-
-  function handleKeyDown(e: React.KeyboardEvent) {
-    if (!showResults || results.length === 0) return;
-
-    switch (e.key) {
-      case 'ArrowDown':
-        e.preventDefault();
-        setSelectedIdx((prev) => Math.min(prev + 1, results.length - 1));
-        break;
-      case 'ArrowUp':
-        e.preventDefault();
-        setSelectedIdx((prev) => Math.max(prev - 1, 0));
-        break;
-      case 'Enter':
-        e.preventDefault();
-        if (selectedIdx >= 0 && selectedIdx < results.length) {
-          handleSelect(results[selectedIdx]);
-        }
-        break;
-      case 'Escape':
-        setShowResults(false);
-        inputRef.current?.blur();
-        break;
-    }
-  }
-
-  /* ── Select ── */
-
-  function handleSelect(result: SearchResult) {
-    setShowResults(false);
-    setQuery('');
-    onSelect(result);
-  }
-
-  /* ── Click outside ── */
-
-  useEffect(() => {
-    function handleClick(e: MouseEvent) {
-      if (panelRef.current && !panelRef.current.contains(e.target as Node)) {
-        setShowResults(false);
-      }
-    }
-    document.addEventListener('mousedown', handleClick);
-    return () => document.removeEventListener('mousedown', handleClick);
-  }, []);
-
-  /* ── Cleanup ── */
-
-  useEffect(() => {
-    if (autoFocus) inputRef.current?.focus();
-    return () => {
-      if (debounceRef.current) clearTimeout(debounceRef.current);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  /* ════════════════════════════ Render ════════════════════════════ */
-
-  return (
-    <div ref={panelRef} className={`relative ${className}`}>
-      {/* Input */}
-      <div className="relative">
-        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-surface-500 pointer-events-none" />
-        <input
-          ref={inputRef}
-          value={query}
-          onChange={(e) => handleChange(e.target.value)}
-          onKeyDown={handleKeyDown}
-          onFocus={() => { if (results.length > 0) setShowResults(true); }}
-          placeholder={placeholder}
-          className="w-full pl-10 pr-10 py-2.5 rounded-xl bg-surface-900 border border-surface-700 text-sm text-surface-200 placeholder:text-surface-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/50 focus-visible:border-brand-500 transition-colors"
-          autoFocus={autoFocus}
-          role="combobox"
-          aria-expanded={showResults}
-          aria-haspopup="listbox"
-          aria-autocomplete="list"
-          aria-controls="search-results-listbox"
-        />
-        {loading && (
-          <Loader2 className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-surface-500 animate-spin" />
-        )}
-        {!loading && query && (
-          <button
-            onClick={() => { setQuery(''); setResults([]); setShowResults(false); inputRef.current?.focus(); }}
-            className="absolute right-3 top-1/2 -translate-y-1/2 p-0.5 rounded hover:bg-surface-700 transition-colors"
-          >
-            <X className="w-4 h-4 text-surface-500" />
-          </button>
-        )}
-      </div>
-
-      {/* Live region for screen readers */}
-      <div aria-live="polite" aria-atomic="true" className="sr-only">
-        {showResults ? `${results.length} resultaten` : ''}
-      </div>
-
-      {/* Results dropdown */}
-      {showResults && (
-        <div
-          id="search-results-listbox"
-          role="listbox"
-          className="absolute top-full left-0 right-0 mt-2 glass rounded-xl overflow-hidden shadow-xl z-50 max-h-72 overflow-y-auto animate-fade-in">
-          {results.length === 0 && !loading ? (
-            <div className="p-4 text-sm text-surface-500 text-center">No results found</div>
-          ) : (
-            results.map((result, idx) => (
-              <button
-                key={result.entry.cid + result.matchField}
-                id={`search-result-${idx}`}
-                role="option"
-                aria-selected={idx === selectedIdx}
-                onClick={() => handleSelect(result)}
-                onMouseEnter={() => setSelectedIdx(idx)}
-                className={`w-full flex items-start gap-3 px-4 py-3 text-left text-sm transition-colors ${
-                  idx === selectedIdx ? 'bg-surface-700/50' : 'hover:bg-surface-800/50'
-                }`}
-              >
-                {result.entry.type === 'dir'
-                  ? <FolderIcon className="w-4 h-4 text-accent-amber shrink-0 mt-0.5" />
-                  : <FileIcon className="w-4 h-4 text-accent-blue shrink-0 mt-0.5" />
-                }
-                <div className="flex-1 min-w-0">
-                  <div className="flex items-center gap-2">
-                    <span className="text-surface-200 font-medium truncate">
-                      {result.entry.name || result.entry.cid.slice(0, 20) + '…'}
-                    </span>
-                    {result.matchField === 'name' && (
-                      <span className="text-[10px] text-brand-400 bg-brand-500/10 px-1.5 py-0.5 rounded-full shrink-0">Name</span>
-                    )}
-                    {result.matchField === 'cid' && (
-                      <span className="text-[10px] text-accent-cyan bg-accent-cyan/10 px-1.5 py-0.5 rounded-full shrink-0">CID</span>
-                    )}
-                  </div>
-                  {result.entry.text && (
-                    <p className="text-xs text-surface-500 mt-0.5 line-clamp-1">
-                      {result.entry.text.slice(0, 120)}
-                    </p>
-                  )}
-                  <p className="text-[11px] text-surface-600 font-mono mt-0.5">
-                    {result.entry.cid.slice(0, 16)}…
-                  </p>
-                </div>
-                <span className="text-[11px] text-surface-500 shrink-0">
-                  {result.entry.size > 0
-                    ? result.entry.size < 1024
-                      ? `${result.entry.size} B`
-                      : `${(result.entry.size / 1024).toFixed(1)} KB`
-                    : ''}
-                </span>
-              </button>
-            ))
-          )}
-        </div>
-      )}
-    </div>
-  );
-}

src/components/payment/PaymentHeader.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import { Wallet, Loader2, XCircle, Shield } from 'lucide-react';
+
+interface PaymentHeaderProps {
+  deployed: boolean;
+  address: string | null;
+  walletType: string | null;
+  connecting: boolean;
+  wrongChain: boolean;
+  onConnect: () => void;
+}
+
+export default function PaymentHeader({
+  deployed,
+  address,
+  walletType,
+  connecting,
+  wrongChain,
+  onConnect,
+}: PaymentHeaderProps) {
+  return (
+    <>
+      {/* ── Header ── */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Wallet className="w-4 h-4 text-brand-400" />
+          <h3 className="text-sm font-semibold text-white">Crypto Payment</h3>
+        </div>
+        {address && walletType && (
+          <span className="text-[10px] px-2 py-0.5 rounded-full bg-surface-700 text-surface-400">
+            {walletType}
+          </span>
+        )}
+      </div>
+
+      {!deployed ? (
+        /* ── Not deployed ── */
+        <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-surface-800/50 text-surface-400 text-xs">
+          <Shield className="w-3.5 h-3.5" />
+          Payment contract not deployed — uploads are free
+        </div>
+      ) : !address ? (
+        /* ── Connect wallet ── */
+        <button
+          onClick={onConnect}
+          disabled={connecting}
+          className="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg bg-brand-500 hover:bg-brand-400 disabled:opacity-50 text-white text-sm font-medium transition-colors"
+        >
+          {connecting ? (
+            <><Loader2 className="w-4 h-4 animate-spin" /> Connecting...</>
+          ) : (
+            <><Wallet className="w-4 h-4" /> Connect Wallet</>
+          )}
+        </button>
+      ) : wrongChain ? (
+        /* ── Wrong chain ── */
+        <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-amber-500/10 border border-amber-500/20 text-amber-400 text-xs">
+          <XCircle className="w-3.5 h-3.5 shrink-0" />
+          Please switch to zkSync Local (chain 270)
+        </div>
+      ) : (
+        /* ── Connected wallet address ── */
+        <div className="flex items-center justify-between px-3 py-2 rounded-lg bg-surface-800/50">
+          <span className="text-xs text-surface-400">Connected</span>
+          <span className="text-xs font-mono text-surface-200">
+            {address.slice(0, 6)}...{address.slice(-4)}
+          </span>
+        </div>
+      )}
+    </>
+  );
+}

src/components/payment/PaymentPanel.tsx

@@ -0,0 +1,206 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { usePaymentService, type PriceInfo, type TokenInfo, type MAOSDiscountTier, type UserUploadStats } from '@/lib/payment';
+import {
+  connectWallet, switchToChain270, getInjectedProvider,
+  type WalletProvider,
+} from '@/lib/wallet';
+import PaymentHeader from './PaymentHeader';
+import PricingDisplay from './PricingDisplay';
+import PaymentResult from './PaymentResult';
+
+interface PaymentPanelProps {
+  fileSize: number;          // bytes
+  fileName?: string;
+  onPaid: (paymentInfo: { cid: string; txHash?: string; method: 'free' | 'eth' | 'token' }) => void;
+  onUpload: () => Promise<{ cid: string; size: number }>;
+  contractAddress?: string;
+}
+
+export default function PaymentPanel({
+  fileSize,
+  fileName,
+  onPaid,
+  onUpload,
+  contractAddress,
+}: PaymentPanelProps) {
+  const paymentService = usePaymentService();
+  // Wallet state
+  const [address, setAddress] = useState<string | null>(null);
+  const [provider, setProvider] = useState<WalletProvider | null>(null);
+  const [connecting, setConnecting] = useState(false);
+  const [walletType, setWalletType] = useState<string | null>(null);
+  const [wrongChain, setWrongChain] = useState(false);
+
+  // Contract state
+  const [deployed, setDeployed] = useState(false);
+  const [price, setPrice] = useState<PriceInfo | null>(null);
+  const [userStats, setUserStats] = useState<UserUploadStats | null>(null);
+  const [tokens, setTokens] = useState<TokenInfo[]>([]);
+  const [discountTiers, setDiscountTiers] = useState<MAOSDiscountTier[]>([]);
+  const [selectedToken, setSelectedToken] = useState('ETH');
+  const [freeTierBytes, setFreeTierBytes] = useState<bigint>(BigInt(0));
+
+  // Upload state
+  const [uploading, setUploading] = useState(false);
+  const [paying, setPaying] = useState(false);
+  const [status, setStatus] = useState<'idle' | 'paying' | 'uploading' | 'complete' | 'error'>('idle');
+  const [error, setError] = useState<string | null>(null);
+  const [txHash, setTxHash] = useState<string | null>(null);
+  const [uploadResult, setUploadResult] = useState<{ cid: string; size: number } | null>(null);
+
+  // Init
+  useEffect(() => {
+    if (contractAddress) {
+      paymentService.setContractAddress(contractAddress);
+    }
+    paymentService.isDeployed().then(setDeployed).catch((err) => { console.error('[PaymentPanel] Deploy check failed:', err); setDeployed(false); });
+  }, [contractAddress]);
+
+  // Refresh price + stats when address or fileSize changes
+  const refreshPricing = useCallback(async (addr: string, size: number) => {
+    if (!deployed) return;
+    try {
+      const [p, stats, t, tiers, freeBytes] = await Promise.all([
+        paymentService.getPrice(size, addr as `0x${string}`),
+        paymentService.getUserStats(addr as `0x${string}`),
+        paymentService.getSupportedTokens(),
+        paymentService.getMAOSDiscountTiers(),
+        paymentService.getFreeTierBytes(),
+      ]);
+      setPrice(p);
+      setUserStats(stats);
+      setTokens(t.filter(tk => tk.enabled || tk.symbol === 'ETH'));
+      setDiscountTiers(tiers);
+      setFreeTierBytes(freeBytes);
+    } catch (e) {
+      console.warn('Payment contract read failed:', e);
+    }
+  }, [deployed]);
+
+  // Connect wallet
+  async function handleConnect() {
+    setConnecting(true);
+    setError(null);
+    try {
+      const result = await connectWallet();
+      const prov = getInjectedProvider();
+      setAddress(result.address);
+      setProvider(prov);
+
+      // Detect wallet type
+      if (window.maosv6) setWalletType('MAOS Wallet');
+      else if (window.ethereum?.isRabby) setWalletType('Rabby');
+      else if (window.ethereum?.isMetaMask) setWalletType('MetaMask');
+      else setWalletType('Wallet');
+
+      // Check chain
+      if (result.chainId !== 270) {
+        setWrongChain(true);
+        const switched = await switchToChain270(prov || undefined);
+        if (switched) setWrongChain(false);
+      }
+
+      await refreshPricing(result.address, fileSize);
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : 'Failed to connect wallet');
+    } finally {
+      setConnecting(false);
+    }
+  }
+
+  // Refresh when fileSize changes
+  useEffect(() => {
+    if (address && deployed) {
+      refreshPricing(address, fileSize);
+    }
+  }, [fileSize, address, deployed, refreshPricing]);
+
+  // Pay + Upload flow
+  async function handlePayAndUpload() {
+    if (!provider || !address) return;
+    setPaying(true);
+    setError(null);
+    setStatus('paying');
+
+    try {
+      // Step 1: Upload to IPFS
+      setStatus('uploading');
+      const upload = await onUpload();
+      setUploadResult(upload);
+
+      // Step 2: Pay (if not free)
+      if (price && !price.isFree && price.finalWei > BigInt(0)) {
+        if (selectedToken === 'ETH') {
+          const hash = await paymentService.payWithETH(provider, upload.cid, fileSize, price.finalWei);
+          setTxHash(hash);
+          onPaid({ cid: upload.cid, txHash: hash, method: 'eth' });
+        } else {
+          // Token payment — need to find token address
+          const token = tokens.find(t => t.symbol === selectedToken);
+          if (!token || token.address === '0x0000000000000000000000000000000000000000') {
+            throw new Error(`${selectedToken} not configured on contract`);
+          }
+          // Calculate token amount
+          const tokenAmount = (price.finalWei * BigInt(10) ** BigInt(token.decimals)) / token.weiPerToken;
+          const result = await paymentService.approveAndPayWithToken(
+            provider, token.address as `0x${string}`,
+            upload.cid, fileSize, tokenAmount, selectedToken
+          );
+          setTxHash(result.payHash);
+          onPaid({ cid: upload.cid, txHash: result.payHash, method: 'token' });
+        }
+      } else {
+        // Free upload
+        onPaid({ cid: upload.cid, method: 'free' });
+      }
+
+      setStatus('complete');
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : 'Payment/upload failed');
+      setStatus('error');
+    } finally {
+      setPaying(false);
+    }
+  }
+
+  /* ── Render ── */
+  return (
+    <div className="glass rounded-xl p-5 space-y-5">
+      <PaymentHeader
+        deployed={deployed}
+        address={address}
+        walletType={walletType}
+        connecting={connecting}
+        wrongChain={wrongChain}
+        onConnect={handleConnect}
+      />
+
+      {deployed && address && !wrongChain && (
+        <PricingDisplay
+          price={price}
+          userStats={userStats}
+          tokens={tokens}
+          discountTiers={discountTiers}
+          selectedToken={selectedToken}
+          freeTierBytes={freeTierBytes}
+          fileSize={fileSize}
+          status={status}
+          paying={paying}
+          uploading={uploading}
+          address={address}
+          onSelectToken={setSelectedToken}
+          onPayAndUpload={handlePayAndUpload}
+        />
+      )}
+
+      <PaymentResult
+        uploadResult={uploadResult}
+        txHash={txHash}
+        status={status}
+        error={error}
+      />
+    </div>
+  );
+}

src/components/payment/PaymentResult.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import { useState } from 'react';
+import { CheckCircle, XCircle, Copy, ExternalLink } from 'lucide-react';
+import { zkSyncExplorerUrl } from '@/lib/config';
+
+interface PaymentResultProps {
+  uploadResult: { cid: string; size: number } | null;
+  txHash: string | null;
+  status: 'idle' | 'paying' | 'uploading' | 'complete' | 'error';
+  error: string | null;
+}
+
+export default function PaymentResult({
+  uploadResult,
+  txHash,
+  status,
+  error,
+}: PaymentResultProps) {
+  const [copied, setCopied] = useState(false);
+
+  async function copyCID() {
+    if (!uploadResult) return;
+    try {
+      await navigator.clipboard.writeText(uploadResult.cid);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) { console.error('[PaymentPanel] Clipboard write failed:', err); }
+  }
+
+  return (
+    <>
+      {/* ── Success ── */}
+      {uploadResult && status === 'complete' && (
+        <div className="space-y-2 p-3 rounded-lg bg-accent-green/10 border border-accent-green/20 animate-fade-in">
+          <div className="flex items-center gap-2 text-accent-green">
+            <CheckCircle className="w-4 h-4" />
+            <span className="text-xs font-medium">Upload + Payment successful</span>
+          </div>
+          <div className="flex items-center justify-between text-xs">
+            <span className="text-surface-400">CID</span>
+            <button onClick={copyCID} className="flex items-center gap-1 text-surface-300 hover:text-surface-100 font-mono">
+              {uploadResult.cid.slice(0, 12)}...
+              {copied ? <CheckCircle className="w-3 h-3 text-accent-green" /> : <Copy className="w-3 h-3" />}
+            </button>
+          </div>
+          {txHash && (
+            <div className="flex items-center justify-between text-xs">
+              <span className="text-surface-400">Tx</span>
+              <a
+                href={`${zkSyncExplorerUrl()}/tx/${txHash}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center gap-1 text-brand-400 hover:text-brand-300 font-mono"
+              >
+                {txHash.slice(0, 10)}...
+                <ExternalLink className="w-3 h-3" />
+              </a>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* ── Error ── */}
+      {error && (
+        <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-accent-rose/10 border border-accent-rose/20 text-accent-rose text-xs animate-fade-in">
+          <XCircle className="w-3.5 h-3.5 shrink-0" />
+          {error}
+        </div>
+      )}
+    </>
+  );
+}

src/components/payment/PricingDisplay.tsx

@@ -0,0 +1,160 @@
+'use client';
+
+import { formatBytes } from '@/lib/helpers';
+import { formatWeiToETH } from '@/lib/wallet';
+import { Zap, CheckCircle, Tag, ArrowRight, Loader2 } from 'lucide-react';
+import type { PriceInfo, TokenInfo, MAOSDiscountTier, UserUploadStats } from '@/lib/payment';
+
+/* ── Token icons ── */
+const TOKEN_ICONS: Record<string, string> = {
+  ETH: '⟠',
+  MAOS: 'Ⓜ',
+  USDC: '⬡',
+};
+
+interface PricingDisplayProps {
+  price: PriceInfo | null;
+  userStats: UserUploadStats | null;
+  tokens: TokenInfo[];
+  discountTiers: MAOSDiscountTier[];
+  selectedToken: string;
+  freeTierBytes: bigint;
+  fileSize: number;
+  status: 'idle' | 'paying' | 'uploading' | 'complete' | 'error';
+  paying: boolean;
+  uploading: boolean;
+  address: string | null;
+  onSelectToken: (symbol: string) => void;
+  onPayAndUpload: () => void;
+}
+
+export default function PricingDisplay({
+  price,
+  userStats,
+  tokens,
+  discountTiers,
+  selectedToken,
+  freeTierBytes,
+  fileSize,
+  status,
+  paying,
+  uploading,
+  address,
+  onSelectToken,
+  onPayAndUpload,
+}: PricingDisplayProps) {
+  return (
+    <div className="space-y-4">
+      {/* Free tier info */}
+      {userStats && (
+        <div className="flex items-center justify-between px-3 py-2 rounded-lg bg-surface-800/50">
+          <div className="flex items-center gap-2">
+            <Zap className="w-3.5 h-3.5 text-accent-cyan" />
+            <span className="text-xs text-surface-400">Free tier</span>
+          </div>
+          <span className="text-xs text-surface-300">
+            {formatBytes(userStats.remainingFree)} / {formatBytes(freeTierBytes)} remaining
+          </span>
+        </div>
+      )}
+
+      {/* Price info */}
+      {price && (
+        <div className="space-y-2">
+          <div className="flex items-center justify-between px-3 py-2 rounded-lg bg-surface-800/50">
+            <span className="text-xs text-surface-400">File size</span>
+            <span className="text-xs text-surface-200">{formatBytes(fileSize)}</span>
+          </div>
+
+          {price.isFree ? (
+            <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-accent-green/10 border border-accent-green/20 text-accent-green text-xs">
+              <CheckCircle className="w-3.5 h-3.5" />
+              Free upload (within free tier)
+            </div>
+          ) : (
+            <>
+              <div className="flex items-center justify-between px-3 py-2 rounded-lg bg-surface-800/50">
+                <span className="text-xs text-surface-400">Price</span>
+                <span className="text-xs text-surface-200">{formatWeiToETH(price.totalWei, 6)} ETH</span>
+              </div>
+
+              {price.discountBps > 0 && (
+                <div className="flex items-center justify-between px-3 py-2 rounded-lg bg-accent-cyan/10 border border-accent-cyan/20">
+                  <div className="flex items-center gap-2">
+                    <Tag className="w-3 h-3 text-accent-cyan" />
+                    <span className="text-xs text-accent-cyan">MAOS discount</span>
+                  </div>
+                  <span className="text-xs text-accent-cyan font-medium">-{price.discountBps / 100}%</span>
+                </div>
+              )}
+
+              <div className="flex items-center justify-between px-3 py-2 rounded-lg bg-brand-500/10 border border-brand-500/20">
+                <span className="text-xs font-medium text-surface-300">Final</span>
+                <span className="text-sm font-bold text-brand-400">
+                  {formatWeiToETH(price.finalWei, 6)} ETH
+                </span>
+              </div>
+
+              {/* Token selector */}
+              {tokens.length > 1 && (
+                <div>
+                  <label className="text-xs text-surface-400 mb-1.5 block">Pay with</label>
+                  <div className="flex gap-1.5">
+                    {tokens.filter(t => t.enabled || t.symbol === 'ETH').map(token => (
+                      <button
+                        key={token.symbol}
+                        onClick={() => onSelectToken(token.symbol)}
+                        className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${
+                          selectedToken === token.symbol
+                            ? 'bg-brand-500/20 text-brand-400 border border-brand-500/30'
+                            : 'bg-surface-800 text-surface-400 border border-surface-700 hover:border-surface-500'
+                        }`}
+                      >
+                        <span>{TOKEN_ICONS[token.symbol] || '●'}</span>
+                        {token.symbol}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </>
+          )}
+        </div>
+      )}
+
+      {/* Action button */}
+      <button
+        onClick={onPayAndUpload}
+        disabled={paying || uploading || status === 'complete'}
+        className="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg bg-brand-500 hover:bg-brand-400 disabled:opacity-50 text-white text-sm font-medium transition-colors"
+      >
+        {paying ? (
+          <><Loader2 className="w-4 h-4 animate-spin" /> Processing payment...</>
+        ) : uploading ? (
+          <><Loader2 className="w-4 h-4 animate-spin" /> Uploading to IPFS...</>
+        ) : status === 'complete' ? (
+          <><CheckCircle className="w-4 h-4" /> Complete</>
+        ) : (
+          <><ArrowRight className="w-4 h-4" /> {price?.isFree ? 'Upload Free' : 'Pay & Upload'}</>
+        )}
+      </button>
+
+      {/* ── MAOS Discount tiers ── */}
+      {address && discountTiers.length > 0 && (
+        <details className="text-xs text-surface-500">
+          <summary className="cursor-pointer hover:text-surface-400 transition-colors">
+            MAOS discount tiers
+          </summary>
+          <div className="mt-2 space-y-1">
+            {discountTiers.map((tier, i) => (
+              <div key={i} className="flex justify-between px-2 py-1 rounded bg-surface-800/30">
+                <span>{formatWeiToETH(tier.minBalance, 0)} MAOS</span>
+                <span className="text-accent-cyan">{tier.discountBps / 100}% off</span>
+              </div>
+            ))}
+          </div>
+        </details>
+      )}
+    </div>
+  );
+}

src/components/payment/index.ts

@@ -0,0 +1,4 @@
+import PaymentPanel from './PaymentPanel';
+
+export default PaymentPanel;
+export { PaymentPanel };

src/components/search/SearchBar.tsx

@@ -0,0 +1,147 @@
+'use client';
+
+/* ════════════════════════════ SearchBar ════════════════════════════
+ *
+ * Orchestrator — composes SearchInput + SearchResultsList.
+ * Owns search state and wires callbacks between child components.
+ */
+
+import { useState, useRef, useCallback, useEffect } from "react";
+import { searchIndex, type SearchResult } from "@/lib/search-index";
+import SearchInput, { type SearchInputHandle } from "./SearchInput";
+import SearchResultsList from "./SearchResultsList";
+
+/* ════════════════════════════ Types ════════════════════════════ */
+
+export interface SearchBarProps {
+  /** External search handler (optioneel — gebruikt search-index.ts anders) */
+  onSearch?: (query: string) => Promise<SearchResult[]> | SearchResult[];
+  /** Called when user selects a result */
+  onSelect: (result: SearchResult) => void;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Auto-focus on mount */
+  autoFocus?: boolean;
+  /** Extra CSS classes */
+  className?: string;
+}
+
+/* ════════════════════════════ Component ════════════════════════════ */
+
+export default function SearchBar({
+  onSearch,
+  onSelect,
+  placeholder,
+  autoFocus,
+  className = "",
+}: SearchBarProps) {
+  const [results, setResults] = useState<SearchResult[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [showResults, setShowResults] = useState(false);
+  const [selectedIdx, setSelectedIdx] = useState(-1);
+
+  const searchInputRef = useRef<SearchInputHandle>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  /* ── Search logic ── */
+
+  const doSearch = useCallback(async (q: string) => {
+    if (!q || q.trim().length < 2) {
+      setResults([]);
+      setShowResults(false);
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const hits = onSearch
+        ? await onSearch(q)
+        : searchIndex(q);
+      setResults(hits);
+      setShowResults(true);
+      setSelectedIdx(-1);
+    } finally {
+      setLoading(false);
+    }
+  }, [onSearch]);
+
+  /* ── Keyboard navigation ── */
+
+  function handleKeyDown(e: React.KeyboardEvent) {
+    if (!showResults || results.length === 0) return;
+
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        setSelectedIdx((prev) => Math.min(prev + 1, results.length - 1));
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setSelectedIdx((prev) => Math.max(prev - 1, 0));
+        break;
+      case "Enter":
+        e.preventDefault();
+        if (selectedIdx >= 0 && selectedIdx < results.length) {
+          handleSelect(results[selectedIdx]);
+        }
+        break;
+      case "Escape":
+        setShowResults(false);
+        searchInputRef.current?.blur();
+        break;
+    }
+  }
+
+  /* ── Select ── */
+
+  function handleSelect(result: SearchResult) {
+    setShowResults(false);
+    searchInputRef.current?.clear();
+    onSelect(result);
+  }
+
+  /* ── Click outside ── */
+
+  useEffect(() => {
+    function handleClick(e: MouseEvent) {
+      if (panelRef.current && !panelRef.current.contains(e.target as Node)) {
+        setShowResults(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, []);
+
+  /* ── Render ── */
+
+  return (
+    <div ref={panelRef} className={`relative ${className}`}>
+      <SearchInput
+        ref={searchInputRef}
+        onSearch={doSearch}
+        onKeyDown={handleKeyDown}
+        onFocus={() => { if (results.length > 0) setShowResults(true); }}
+        loading={loading}
+        hasResults={showResults}
+        placeholder={placeholder}
+        autoFocus={autoFocus}
+      />
+
+      {/* Live region for screen readers */}
+      <div aria-live="polite" aria-atomic="true" className="sr-only">
+        {showResults ? `${results.length} resultaten` : ""}
+      </div>
+
+      {/* Results dropdown */}
+      {showResults && (
+        <SearchResultsList
+          results={results}
+          selectedIdx={selectedIdx}
+          loading={loading}
+          onSelect={handleSelect}
+          onMouseEnter={setSelectedIdx}
+        />
+      )}
+    </div>
+  );
+}

src/components/search/SearchInput.tsx

@@ -0,0 +1,119 @@
+'use client';
+
+/* ── SearchInput ──
+ *
+ * Controlled search input with search icon, debounced search,
+ * loading spinner, clear button, and keyboard navigation handler.
+ */
+
+import { useState, useRef, useEffect, forwardRef, useImperativeHandle } from "react";
+import { Search, X, Loader2 } from "lucide-react";
+
+/* ── Types ── */
+
+export interface SearchInputHandle {
+  clear: () => void;
+  focus: () => void;
+  blur: () => void;
+}
+
+interface SearchInputProps {
+  /** Called (debounced) when the user types */
+  onSearch: (query: string) => void;
+  /** Keyboard navigation handler (from parent orchestrator) */
+  onKeyDown: (e: React.KeyboardEvent) => void;
+  /** Called when input receives focus */
+  onFocus?: () => void;
+  /** Whether a search is in progress */
+  loading: boolean;
+  /** Whether there are results to show on focus */
+  hasResults: boolean;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Auto-focus on mount */
+  autoFocus?: boolean;
+}
+
+/* ── Component ── */
+
+const SearchInput = forwardRef<SearchInputHandle, SearchInputProps>(function SearchInput(
+  { onSearch, onKeyDown, onFocus, loading, hasResults, placeholder = "Search files, CIDs, and content…", autoFocus = false },
+  ref,
+) {
+  const [query, setQuery] = useState("");
+
+  const inputRef = useRef<HTMLInputElement>(null);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  /* Expose clear + focus to parent */
+  useImperativeHandle(ref, () => ({
+    clear() {
+      setQuery("");
+    },
+    focus() {
+      inputRef.current?.focus();
+    },
+    blur() {
+      inputRef.current?.blur();
+    },
+  }));
+
+  /* ── Debounced input ── */
+
+  function handleChange(value: string) {
+    setQuery(value);
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => onSearch(value), 250);
+  }
+
+  /* ── Cleanup ── */
+
+  useEffect(() => {
+    if (autoFocus) inputRef.current?.focus();
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, [autoFocus]);
+
+  /* ── Render ── */
+
+  return (
+    <div className="relative">
+      <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-surface-500 pointer-events-none" />
+      <input
+        ref={inputRef}
+        value={query}
+        onChange={(e) => handleChange(e.target.value)}
+        onKeyDown={onKeyDown}
+        onFocus={() => {
+          if (hasResults) onFocus?.();
+        }}
+        placeholder={placeholder}
+        className="w-full pl-10 pr-10 py-2.5 rounded-xl bg-surface-900 border border-surface-700 text-sm text-surface-200 placeholder:text-surface-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/50 focus-visible:border-brand-500 transition-colors"
+        autoFocus={autoFocus}
+        role="combobox"
+        aria-expanded={hasResults}
+        aria-haspopup="listbox"
+        aria-autocomplete="list"
+        aria-controls="search-results-listbox"
+      />
+      {loading && (
+        <Loader2 className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-surface-500 animate-spin" />
+      )}
+      {!loading && query && (
+        <button
+          onClick={() => {
+            setQuery("");
+            if (debounceRef.current) clearTimeout(debounceRef.current);
+            inputRef.current?.focus();
+          }}
+          className="absolute right-3 top-1/2 -translate-y-1/2 p-0.5 rounded hover:bg-surface-700 transition-colors"
+        >
+          <X className="w-4 h-4 text-surface-500" />
+        </button>
+      )}
+    </div>
+  );
+});
+
+export default SearchInput;

src/components/search/SearchResultItem.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+/* ── SearchResultItem ──
+ *
+ * Single search result row: icon, name with match badge, text excerpt,
+ * CID, and file size.
+ */
+
+import { FileIcon, FolderIcon } from "lucide-react";
+import type { SearchResult } from "@/lib/search-index";
+
+/* ── Types ── */
+
+export interface SearchResultItemProps {
+  result: SearchResult;
+  selected: boolean;
+  onSelect: (result: SearchResult) => void;
+  onMouseEnter: () => void;
+  index: number;
+}
+
+/* ── Component ── */
+
+export default function SearchResultItem({
+  result,
+  selected,
+  onSelect,
+  onMouseEnter,
+  index,
+}: SearchResultItemProps) {
+  return (
+    <button
+      key={result.entry.cid + result.matchField}
+      id={`search-result-${index}`}
+      role="option"
+      aria-selected={selected}
+      onClick={() => onSelect(result)}
+      onMouseEnter={onMouseEnter}
+      className={`w-full flex items-start gap-3 px-4 py-3 text-left text-sm transition-colors ${
+        selected ? "bg-surface-700/50" : "hover:bg-surface-800/50"
+      }`}
+    >
+      {result.entry.type === "dir"
+        ? <FolderIcon className="w-4 h-4 text-accent-amber shrink-0 mt-0.5" />
+        : <FileIcon className="w-4 h-4 text-accent-blue shrink-0 mt-0.5" />
+      }
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2">
+          <span className="text-surface-200 font-medium truncate">
+            {result.entry.name || result.entry.cid.slice(0, 20) + "…"}
+          </span>
+          {result.matchField === "name" && (
+            <span className="text-[10px] text-brand-400 bg-brand-500/10 px-1.5 py-0.5 rounded-full shrink-0">Name</span>
+          )}
+          {result.matchField === "cid" && (
+            <span className="text-[10px] text-accent-cyan bg-accent-cyan/10 px-1.5 py-0.5 rounded-full shrink-0">CID</span>
+          )}
+        </div>
+        {result.entry.text && (
+          <p className="text-xs text-surface-500 mt-0.5 line-clamp-1">
+            {result.entry.text.slice(0, 120)}
+          </p>
+        )}
+        <p className="text-[11px] text-surface-600 font-mono mt-0.5">
+          {result.entry.cid.slice(0, 16)}…
+        </p>
+      </div>
+      <span className="text-[11px] text-surface-500 shrink-0">
+        {result.entry.size > 0
+          ? result.entry.size < 1024
+            ? `${result.entry.size} B`
+            : `${(result.entry.size / 1024).toFixed(1)} KB`
+          : ""}
+      </span>
+    </button>
+  );
+}

src/components/search/SearchResultsList.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+/* ── SearchResultsList ──
+ *
+ * Results dropdown with keyboard highlighting and aria roles.
+ * Click-outside is handled by the parent orchestrator via onClose.
+ */
+
+import SearchResultItem from "./SearchResultItem";
+import type { SearchResult } from "@/lib/search-index";
+
+/* ── Types ── */
+
+export interface SearchResultsListProps {
+  results: SearchResult[];
+  selectedIdx: number;
+  loading: boolean;
+  onSelect: (result: SearchResult) => void;
+  onMouseEnter: (idx: number) => void;
+}
+
+/* ── Component ── */
+
+export default function SearchResultsList({
+  results,
+  selectedIdx,
+  loading,
+  onSelect,
+  onMouseEnter,
+}: SearchResultsListProps) {
+  return (
+    <div
+      id="search-results-listbox"
+      role="listbox"
+      className="absolute top-full left-0 right-0 mt-2 glass rounded-xl overflow-hidden shadow-xl z-50 max-h-72 overflow-y-auto animate-fade-in"
+    >
+      {results.length === 0 && !loading ? (
+        <div className="p-4 text-sm text-surface-500 text-center">No results found</div>
+      ) : (
+        results.map((result, idx) => (
+          <SearchResultItem
+            key={result.entry.cid + result.matchField}
+            result={result}
+            selected={idx === selectedIdx}
+            onSelect={onSelect}
+            onMouseEnter={() => onMouseEnter(idx)}
+            index={idx}
+          />
+        ))
+      )}
+    </div>
+  );
+}

src/components/search/index.ts

@@ -0,0 +1,10 @@
+/* ── Search barrel ── */
+
+export { default } from "./SearchBar";
+export { default as SearchInput } from "./SearchInput";
+export { default as SearchResultsList } from "./SearchResultsList";
+export { default as SearchResultItem } from "./SearchResultItem";
+export type { SearchBarProps } from "./SearchBar";
+export type { SearchInputHandle } from "./SearchInput";
+export type { SearchResultsListProps } from "./SearchResultsList";
+export type { SearchResultItemProps } from "./SearchResultItem";

src/lib/__tests__/api.test.ts

@@ -0,0 +1,483 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import {
+  getNodeInfo,
+  getPeers,
+  listPins,
+  addPin,
+  removePin,
+  uploadFile,
+  listFiles,
+  listUsers,
+  createUser,
+  deleteUser,
+  explorerLs,
+  explorerCat,
+  explorerStat,
+  listIPNSKeys,
+  ipnsPublish,
+  ipnsResolve,
+  ipnsGenKey,
+  getRepoStats,
+  getBWStats,
+  checkHealth,
+} from '../api';
+
+function mockFetch(response: unknown, ok = true, status = 200, statusText = 'OK') {
+  return vi.fn().mockResolvedValue({
+    ok,
+    status,
+    statusText,
+    json: vi.fn().mockResolvedValue(response),
+    text: vi.fn().mockResolvedValue(typeof response === 'string' ? response : JSON.stringify(response)),
+  });
+}
+
+function mockFetchText(text: string, ok = true) {
+  return vi.fn().mockResolvedValue({
+    ok,
+    json: vi.fn().mockRejectedValue(new Error('not json')),
+    text: vi.fn().mockResolvedValue(text),
+  });
+}
+
+describe('getNodeInfo', () => {
+  beforeEach(() => { globalThis.fetch = vi.fn(); });
+  afterEach(() => vi.restoreAllMocks());
+
+  it('calls /api/node/info and returns mapped response', async () => {
+    const data = { version: '1.0', peerId: '12D3Koo...', peers: 5, storageUsed: '1.2 GB', storageMax: '30 GB', uptime: '2h' };
+    globalThis.fetch = mockFetch(data);
+    const result = await getNodeInfo();
+    expect(result).toEqual(data);
+    expect(globalThis.fetch).toHaveBeenCalledWith('/api/node/info', expect.objectContaining({ credentials: 'include' }));
+  });
+
+  it('throws on non-ok response', async () => {
+    globalThis.fetch = mockFetch({ error: 'not found' }, false, 404, 'Not Found');
+    await expect(getNodeInfo()).rejects.toThrow('404');
+  });
+});
+
+describe('getPeers', () => {
+  beforeEach(() => { globalThis.fetch = vi.fn(); });
+  afterEach(() => vi.restoreAllMocks());
+
+  it('transforms Peers array to flat objects', async () => {
+    globalThis.fetch = mockFetch({
+      Peers: [
+        { Peer: 'peer1', Addr: '/ip4/1.2.3.4', Latency: '10ms' },
+        { Peer: 'peer2', Addr: '/ip4/5.6.7.8', Latency: '' },
+      ],
+    });
+    const result = await getPeers();
+    expect(result).toEqual([
+      { id: 'peer1', addr: '/ip4/1.2.3.4', latency: '10ms' },
+      { id: 'peer2', addr: '/ip4/5.6.7.8', latency: '—' },
+    ]);
+  });
+
+  it('returns empty array when no Peers key', async () => {
+    globalThis.fetch = mockFetch({});
+    const result = await getPeers();
+    expect(result).toEqual([]);
+  });
+});
+
+describe('listPins', () => {
+  beforeEach(() => { globalThis.fetch = vi.fn(); });
+  afterEach(() => vi.restoreAllMocks());
+
+  it('transforms Keys object to IPFSPin array', async () => {
+    globalThis.fetch = mockFetch({
+      Keys: {
+        QmA: { Type: 'recursive' },
+        QmB: { Type: 'direct' },
+      },
+    });
+    const result = await listPins();
+    expect(result).toHaveLength(2);
+    expect(result[0]).toEqual({ cid: 'QmA', name: '', size: 0, created: 'recursive' });
+    expect(result[1]).toEqual({ cid: 'QmB', name: '', size: 0, created: 'direct' });
+  });
+
+  it('returns empty array when no Keys', async () => {
+    globalThis.fetch = mockFetch({});
+    const result = await listPins();
+    expect(result).toEqual([]);
+  });
+});
+
+describe('addPin', () => {
+  beforeEach(() => { globalThis.fetch = vi.fn(); });
+  afterEach(() => vi.restoreAllMocks());
+
+  it('POSTs with cid and name in body', async () => {
+    globalThis.fetch = mockFetch({ cid: 'QmNew' });
+    const result = await addPin('QmNew', 'myfile.txt');
+    expect(result).toEqual({ cid: 'QmNew' });
+    expect(globalThis.fetch).toHaveBeenCalledWith(
+      '/api/pins',
+      expect.objectContaining({
+        method: 'POST',
+        body: JSON.stringify({ cid: 'QmNew', name: 'myfile.txt' }),
+      }),
+    );
+  });
+
+  it('POSTs with cid only when no name', async () => {
+    globalThis.fetch = mockFetch({ cid: 'QmNew' });
+    const result = await addPin('QmNew');
+    expect(result).toEqual({ cid: 'QmNew' });
+    expect(globalThis.fetch).toHaveBeenCalledWith(
+      '/api/pins',
+      expect.objectContaining({
+        body: JSON.stringify({ cid: 'QmNew', name: undefined }),
+      }),
+    );
+  });
+});
+
+describe('removePin', () => {
+  beforeEach(() => { globalThis.fetch = vi.fn(); });
+  afterEach(() => vi.restoreAllMocks());
+
+  it('sends DELETE request', async () => {
+    globalThis.fetch = mockFetch({});
+    await removePin('QmToRemove');
+    expect(globalThis.fetch).toHaveBeenCalledWith(
+      '/api/pins/QmToRemove',
+      expect.objectContaining({ method: 'DELETE' }),
+    );
+  });
+});
+
+describe('uploadFile', () => {
+  beforeEach(() => { globalThis.fetch = vi.fn(); });
+  afterEach(() => vi.restoreAllMocks());
+
+  it('sends FormData and normalizes Kubo-style response', async () => {
+    globalThis.fetch = mockFetch({ Hash: 'QmUploaded', Size: 12345 });
+    const file = new File(['test'], 'test.txt');
+    const result = await uploadFile(file);
+    expect(result).toEqual({ cid: 'QmUploaded', size: 12345 });
+    expect(globalThis.fetch).toHaveBeenCalledWith(
+      '/api/files/upload',
+      expect.objectContaining({ method: 'POST', credentials: 'include' }),
+    );
+    const callArgs = (globalThis.fetch as any).mock.calls[0];
+    expect(callArgs[1].body).toBeInstanceOf(FormData);
+  });
+
+  it('normalizes cid/hash fields', async () => {
+    globalThis.fetch = mockFetch({ cid: 'QmCid', size: 999 });
+    const file = new File(['test'], 'test.txt');
+    const result = await uploadFile(file);
+    expect(result).toEqual({ cid: 'QmCid', size: 999 });
+  });
+
+  it('throws on upload failure', async () => {
+    globalThis.fetch = mockFetch({}, false, 500, 'Server Error');
+    const file = new File(['test'], 'test.txt');
+    await expect(uploadFile(file)).rejects.toThrow('Upload failed');
+  });
+});
+
+describe('listFiles', () => {
+  beforeEach(() => { globalThis.fetch = vi.fn(); });
+  afterEach(() => vi.restoreAllMocks());
+
+  it('returns file list from API', async () => {
+    const files = [
+      { name: 'a.txt', cid: 'QmA', size: 100, modified: '2025-01-01' },
+    ];
+    globalThis.fetch = mockFetch(files);
+    const result = await listFiles();
+    expect(result).toEqual(files);
+  });
+});
+
+describe('listUsers', () => {
+  beforeEach(() => { globalThis.fetch = vi.fn(); });
+  afterEach(() => vi.restoreAllMocks());
+
+  it('handles array response format', async () => {
+    const users = [{ username: 'alice', created: '2025-01-01', active: true }];
+    globalThis.fetch = mockFetch(users);
+    const result = await listUsers();
+    expect(result).toEqual(users);
+  });
+
+  it('handles {users: [...]} response format', async () => {
+    const users = [{ username: 'bob', created: '2025-02-01', active: false }];
+    globalThis.fetch = mockFetch({ users });
+    const result = await listUsers();
+    expect(result).toEqual(users);
+  });
+
+  it('returns empty array for unknown format', async () => {
+    globalThis.fetch = mockFetch({ notUsers: 'nope' });
+    const result = await listUsers();
+    expect(result).toEqual([]);
+  });
+});
+
+describe('createUser', () => {
+  beforeEach(() => { globalThis.fetch = vi.fn(); });
+  afterEach(() => vi.restoreAllMocks());
+
+  it('POSTs username and password', async () => {
+    globalThis.fetch = mockFetch({ username: 'newuser' });
+    const result = await createUser('newuser', 'secret123');
+    expect(result).toEqual({ username: 'newuser' });
+    expect(globalThis.fetch).toHaveBeenCalledWith(
+      '/api/users',
+      expect.objectContaining({
+        method: 'POST',
+        body: JSON.stringify({ username: 'newuser', password: 'secret123' }),
+      }),
+    );
+  });
+});
+
+describe('deleteUser', () => {
+  beforeEach(() => { globalThis.fetch = vi.fn(); });
+  afterEach(() => vi.restoreAllMocks());
+
+  it('sends DELETE request', async () => {
+    globalThis.fetch = mockFetch({});
+    await deleteUser('alice');
+    expect(globalThis.fetch).toHaveBeenCalledWith(
+      '/api/users/alice',
+      expect.objectContaining({ method: 'DELETE' }),
+    );
+  });
+
+  it('encodes special characters in username', async () => {
+    globalThis.fetch = mockFetch({});
+    await deleteUser('user@name');
+    expect(globalThis.fetch).toHaveBeenCalledWith(
+      '/api/users/user%40name',
+      expect.anything(),
+    );
+  });
+});
+
+describe('explorerLs', () => {
+  beforeEach(() => { globalThis.fetch = vi.fn(); });
+  afterEach(() => vi.restoreAllMocks());
+
+  it('POSTs to explorer/ls endpoint', async () => {
+    const entries = [{ name: 'file.txt', type: 'file', size: 100, hash: 'QmX' }];
+    globalThis.fetch = mockFetch(entries);
+    const result = await explorerLs('QmDir');
+    expect(result).toEqual(entries);
+    expect(globalThis.fetch).toHaveBeenCalledWith(
+      '/api/explorer/ls/QmDir',
+      expect.objectContaining({ method: 'POST' }),
+    );
+  });
+});
+
+describe('explorerCat', () => {
+  beforeEach(() => { globalThis.fetch = vi.fn(); });
+  afterEach(() => vi.restoreAllMocks());
+
+  it('returns text content (not JSON)', async () => {
+    globalThis.fetch = mockFetchText('hello world');
+    const result = await explorerCat('QmFile');
+    expect(result).toBe('hello world');
+    expect(globalThis.fetch).toHaveBeenCalledWith(
+      '/api/explorer/cat/QmFile',
+      expect.objectContaining({ method: 'POST', credentials: 'include' }),
+    );
+  });
+
+  it('throws on non-ok response', async () => {
+    globalThis.fetch = mockFetchText('not found', false);
+    await expect(explorerCat('QmFile')).rejects.toThrow();
+  });
+});
+
+describe('explorerStat', () => {
+  beforeEach(() => { globalThis.fetch = vi.fn(); });
+  afterEach(() => vi.restoreAllMocks());
+
+  it('POSTs to explorer/stat endpoint', async () => {
+    globalThis.fetch = mockFetch({ Size: 1234, Type: 'file' });
+    const result = await explorerStat('QmFile');
+    expect(result).toEqual({ Size: 1234, Type: 'file' });
+  });
+});
+
+describe('listIPNSKeys', () => {
+  beforeEach(() => { globalThis.fetch = vi.fn(); });
+  afterEach(() => vi.restoreAllMocks());
+
+  it('transforms Keys array to IPNSKey[]', async () => {
+    globalThis.fetch = mockFetch({
+      Keys: [
+        { Name: 'self', Id: 'k51...' },
+        { Name: 'mykey', Id: 'k52...' },
+      ],
+    });
+    const result = await listIPNSKeys();
+    expect(result).toEqual([
+      { name: 'self', id: 'k51...' },
+      { name: 'mykey', id: 'k52...' },
+    ]);
+  });
+
+  it('returns empty array when no Keys', async () => {
+    globalThis.fetch = mockFetch({});
+    const result = await listIPNSKeys();
+    expect(result).toEqual([]);
+  });
+
+  it('handles missing fields', async () => {
+    globalThis.fetch = mockFetch({ Keys: [{ Id: 'k51...' }, { Name: 'onlyname' }] });
+    const result = await listIPNSKeys();
+    expect(result).toEqual([
+      { name: '', id: 'k51...' },
+      { name: 'onlyname', id: '' },
+    ]);
+  });
+});
+
+describe('ipnsPublish', () => {
+  beforeEach(() => { globalThis.fetch = vi.fn(); });
+  afterEach(() => vi.restoreAllMocks());
+
+  it('POSTs with cid and default key', async () => {
+    globalThis.fetch = mockFetch({ name: 'self', value: '/ipfs/QmX' });
+    const result = await ipnsPublish('QmX');
+    expect(result).toEqual({ name: 'self', value: '/ipfs/QmX' });
+    expect(globalThis.fetch).toHaveBeenCalledWith(
+      '/api/ipns/publish?arg=QmX&key=self',
+      expect.objectContaining({ method: 'POST' }),
+    );
+  });
+
+  it('uses custom key when provided', async () => {
+    globalThis.fetch = mockFetch({ name: 'mykey', value: '/ipfs/QmY' });
+    const result = await ipnsPublish('QmY', 'mykey');
+    expect(result).toEqual({ name: 'mykey', value: '/ipfs/QmY' });
+    expect(globalThis.fetch).toHaveBeenCalledWith(
+      '/api/ipns/publish?arg=QmY&key=mykey',
+      expect.anything(),
+    );
+  });
+});
+
+describe('ipnsResolve', () => {
+  beforeEach(() => { globalThis.fetch = vi.fn(); });
+  afterEach(() => vi.restoreAllMocks());
+
+  it('returns Path from response', async () => {
+    globalThis.fetch = mockFetch({ Path: '/ipfs/QmResolved' });
+    const result = await ipnsResolve('k51...');
+    expect(result).toBe('/ipfs/QmResolved');
+  });
+
+  it('returns empty string when no Path', async () => {
+    globalThis.fetch = mockFetch({});
+    const result = await ipnsResolve('k51...');
+    expect(result).toBe('');
+  });
+});
+
+describe('ipnsGenKey', () => {
+  beforeEach(() => { globalThis.fetch = vi.fn(); });
+  afterEach(() => vi.restoreAllMocks());
+
+  it('POSTs to gen endpoint', async () => {
+    globalThis.fetch = mockFetch({ name: 'newkey', id: 'k51...' });
+    const result = await ipnsGenKey('newkey');
+    expect(result).toEqual({ name: 'newkey', id: 'k51...' });
+    expect(globalThis.fetch).toHaveBeenCalledWith(
+      '/api/ipns/keys/gen/newkey',
+      expect.objectContaining({ method: 'POST' }),
+    );
+  });
+});
+
+describe('getRepoStats', () => {
+  beforeEach(() => { globalThis.fetch = vi.fn(); });
+  afterEach(() => vi.restoreAllMocks());
+
+  it('maps RepoSize/StorageMax etc.', async () => {
+    globalThis.fetch = mockFetch({
+      RepoSize: 1000000,
+      StorageMax: 10000000000,
+      NumObjects: 500,
+      RepoPath: '/ipfs/repo',
+      Version: '0.18.0',
+    });
+    const result = await getRepoStats();
+    expect(result).toEqual({
+      repoSize: 1000000,
+      storageMax: 10000000000,
+      numObjects: 500,
+      repoPath: '/ipfs/repo',
+      version: '0.18.0',
+    });
+  });
+
+  it('defaults missing fields to 0 or empty', async () => {
+    globalThis.fetch = mockFetch({});
+    const result = await getRepoStats();
+    expect(result).toEqual({
+      repoSize: 0,
+      storageMax: 0,
+      numObjects: 0,
+      repoPath: '',
+      version: '',
+    });
+  });
+});
+
+describe('getBWStats', () => {
+  beforeEach(() => { globalThis.fetch = vi.fn(); });
+  afterEach(() => vi.restoreAllMocks());
+
+  it('maps TotalIn/TotalOut etc.', async () => {
+    globalThis.fetch = mockFetch({
+      TotalIn: 5000,
+      TotalOut: 3000,
+      RateIn: 100,
+      RateOut: 50,
+    });
+    const result = await getBWStats();
+    expect(result).toEqual({
+      totalIn: 5000,
+      totalOut: 3000,
+      rateIn: 100,
+      rateOut: 50,
+    });
+  });
+
+  it('defaults missing fields to 0', async () => {
+    globalThis.fetch = mockFetch({});
+    const result = await getBWStats();
+    expect(result).toEqual({
+      totalIn: 0,
+      totalOut: 0,
+      rateIn: 0,
+      rateOut: 0,
+    });
+  });
+});
+
+describe('checkHealth', () => {
+  beforeEach(() => { globalThis.fetch = vi.fn(); });
+  afterEach(() => vi.restoreAllMocks());
+
+  it('returns status and node info', async () => {
+    globalThis.fetch = mockFetch({ status: 'ok', node: 'online' });
+    const result = await checkHealth();
+    expect(result).toEqual({ status: 'ok', node: 'online' });
+    expect(globalThis.fetch).toHaveBeenCalledWith(
+      '/api/health',
+      expect.objectContaining({ credentials: 'include' }),
+    );
+  });
+});

src/lib/__tests__/helpers.test.ts

@@ -1,17 +1,29 @@
 import { describe, it, expect } from 'vitest';
-import { formatBytes, gatewayLink, truncateCid } from '../helpers';
+import { formatBytes, gatewayLink, gatewayUrl, truncateCid } from '../helpers';
 
 describe('formatBytes', () => {
-  it('formats 0 bytes', () => {
+  it('formats 0 as "0 B"', () => {
     expect(formatBytes(0)).toBe('0 B');
   });
 
-  it('formats bytes without decimal', () => {
-    expect(formatBytes(512)).toBe('512 B');
+  it('formats bigint 0n as "0 B"', () => {
+    expect(formatBytes(0n)).toBe('0 B');
+  });
+
+  it('formats bytes >= 10 as integer', () => {
+    expect(formatBytes(500)).toBe('500 B');
+  });
+
+  it('formats bytes < 10 with one decimal', () => {
+    expect(formatBytes(5)).toBe('5.0 B');
   });
 
   it('formats KB with one decimal when < 10', () => {
-    expect(formatBytes(1536)).toBe('1.5 KB');
+    expect(formatBytes(1024)).toBe('1.0 KB');
+  });
+
+  it('formats 1500 bytes as 1.5 KB', () => {
+    expect(formatBytes(1500)).toBe('1.5 KB');
   });
 
   it('formats KB as integer when >= 10', () => {
@@ -22,23 +34,36 @@ describe('formatBytes', () => {
     expect(formatBytes(1048576)).toBe('1.0 MB');
   });
 
+  it('formats 3MB as 3.0 MB', () => {
+    expect(formatBytes(3145728)).toBe('3.0 MB');
+  });
+
+  it('formats large MB as integer when >= 10', () => {
+    expect(formatBytes(11534336)).toBe('11 MB');
+  });
+
   it('formats GB with one decimal when < 10', () => {
     expect(formatBytes(1073741824)).toBe('1.0 GB');
   });
 
+  it('formats 2GB as 2.0 GB', () => {
+    expect(formatBytes(2147483648)).toBe('2.0 GB');
+  });
+
   it('formats TB with one decimal when < 10', () => {
     expect(formatBytes(1099511627776)).toBe('1.0 TB');
   });
 
-  it('formats large value as integer when >= 10', () => {
-    // 10+ MB → integer, no decimal
-    expect(formatBytes(11534336)).toBe('11 MB');
+  it('handles bigint input', () => {
+    expect(formatBytes(500n)).toBe('500 B');
   });
 
-  it('handles negative values gracefully', () => {
-    const result = formatBytes(-100);
-    expect(result).toBeTruthy();
-    expect(typeof result).toBe('string');
+  it('handles bigint zero', () => {
+    expect(formatBytes(0n)).toBe('0 B');
+  });
+
+  it('handles bigint large value', () => {
+    expect(formatBytes(1073741824n)).toBe('1.0 GB');
   });
 });
 
@@ -48,11 +73,27 @@ describe('gatewayLink', () => {
     expect(gatewayLink(cid)).toBe('https://ipfs.maos.dedyn.io/QmTest123');
   });
 
+  it('handles bafy CIDs', () => {
+    const cid = 'bafybeigdyrzt5xxyjaz6k3w3h3y7a7q7q7q7q7q7q7q7q7q7q7q7q7q';
+    expect(gatewayLink(cid)).toBe('https://ipfs.maos.dedyn.io/bafybeigdyrzt5xxyjaz6k3w3h3y7a7q7q7q7q7q7q7q7q7q7q7q7q7q');
+  });
+
   it('handles empty string', () => {
     expect(gatewayLink('')).toBe('https://ipfs.maos.dedyn.io/');
   });
 });
 
+describe('gatewayUrl (alias for gatewayLink)', () => {
+  it('returns same result as gatewayLink', () => {
+    const cid = 'QmTest123';
+    expect(gatewayUrl(cid)).toBe(gatewayLink(cid));
+  });
+
+  it('is a reference to gatewayLink', () => {
+    expect(gatewayUrl).toBe(gatewayLink);
+  });
+});
+
 describe('truncateCid', () => {
   it('returns full CID when shorter than chars', () => {
     expect(truncateCid('abc', 12)).toBe('abc');
@@ -72,6 +113,10 @@ describe('truncateCid', () => {
     expect(truncateCid('abcdef', 6)).toBe('abcdef');
   });
 
+  it('uses default of 12 chars', () => {
+    expect(truncateCid('abcdefghijklm')).toBe('abcdefghijkl...');
+  });
+
   it('handles empty string', () => {
     expect(truncateCid('')).toBe('');
   });

src/lib/__tests__/storage.test.ts

@@ -0,0 +1,339 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import {
+  getSettings,
+  saveSettings,
+  resetSettings,
+  getHistory,
+  addToHistory,
+  clearHistory,
+  removeMultipleFromHistory,
+  type PortalSettings,
+  type UploadRecord,
+} from '../storage';
+
+const DEFAULT_SETTINGS: PortalSettings = {
+  gatewayUrl: 'https://ipfs.maos.dedyn.io',
+  apiEndpoint: '',
+  storageMax: 30720,
+  refreshInterval: 15,
+  theme: 'dark',
+  allowedFileTypes: '',
+  maxFileSize: 100 * 1024 * 1024,
+  maxFiles: 20,
+};
+
+function createMockStore(): Record<string, string> {
+  return {};
+}
+
+let originalWindow: Window | undefined;
+
+function setupLocalStorage(store: Record<string, string>) {
+  // Node environment has no window — set it so storage functions don't SSR-short-circuit
+  originalWindow = globalThis.window;
+  if (typeof globalThis.window === 'undefined') {
+    globalThis.window = {} as any;
+  }
+  globalThis.localStorage = {
+    getItem: vi.fn((key: string) => store[key] ?? null),
+    setItem: vi.fn((key: string, val: string) => { store[key] = val; }),
+    removeItem: vi.fn((key: string) => { delete store[key]; }),
+    clear: vi.fn(() => { for (const k of Object.keys(store)) delete store[k]; }),
+    get length() { return Object.keys(store).length; },
+    key: vi.fn((_: number) => null),
+  } as unknown as Storage;
+}
+
+function restoreWindow() {
+  if (originalWindow === undefined) {
+    delete (globalThis as any).window;
+  } else {
+    globalThis.window = originalWindow as Window & typeof globalThis;
+  }
+}
+
+describe('getSettings', () => {
+  let store: Record<string, string>;
+
+  beforeEach(() => {
+    store = createMockStore();
+    setupLocalStorage(store);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    restoreWindow();
+  });
+
+  it('returns defaults when localStorage is empty', () => {
+    const result = getSettings();
+    expect(result).toEqual(DEFAULT_SETTINGS);
+  });
+
+  it('merges partial saved settings with defaults', () => {
+    store['ipfs-portal-settings'] = JSON.stringify({ theme: 'light', storageMax: 5000 });
+    const result = getSettings();
+    expect(result.theme).toBe('light');
+    expect(result.storageMax).toBe(5000);
+    expect(result.gatewayUrl).toBe(DEFAULT_SETTINGS.gatewayUrl);
+    expect(result.refreshInterval).toBe(DEFAULT_SETTINGS.refreshInterval);
+  });
+
+  it('returns defaults when stored JSON is corrupt', () => {
+    store['ipfs-portal-settings'] = '{broken json';
+    const result = getSettings();
+    expect(result).toEqual(DEFAULT_SETTINGS);
+  });
+
+  it('returns defaults when typeof window is undefined (SSR)', () => {
+    const origWindow = globalThis.window;
+    (globalThis as any).window = undefined;
+    const result = getSettings();
+    expect(result).toEqual(DEFAULT_SETTINGS);
+    expect(localStorage.getItem).not.toHaveBeenCalled();
+    (globalThis as any).window = origWindow;
+  });
+});
+
+describe('saveSettings', () => {
+  let store: Record<string, string>;
+
+  beforeEach(() => {
+    store = createMockStore();
+    setupLocalStorage(store);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    restoreWindow();
+  });
+
+  it('persists partial update to localStorage', () => {
+    const result = saveSettings({ theme: 'light', refreshInterval: 30 });
+    expect(result.theme).toBe('light');
+    expect(result.refreshInterval).toBe(30);
+    expect(result.gatewayUrl).toBe(DEFAULT_SETTINGS.gatewayUrl);
+
+    const saved = JSON.parse(store['ipfs-portal-settings']);
+    expect(saved.theme).toBe('light');
+    expect(saved.refreshInterval).toBe(30);
+  });
+
+  it('merges with existing saved settings', () => {
+    store['ipfs-portal-settings'] = JSON.stringify({ theme: 'light', storageMax: 5000 });
+    const result = saveSettings({ refreshInterval: 60 });
+    expect(result.theme).toBe('light');
+    expect(result.storageMax).toBe(5000);
+    expect(result.refreshInterval).toBe(60);
+  });
+
+  it('returns merged result (not just partial)', () => {
+    const result = saveSettings({ maxFiles: 5 });
+    expect(result.maxFiles).toBe(5);
+    expect(result.gatewayUrl).toBe(DEFAULT_SETTINGS.gatewayUrl);
+    expect(result.theme).toBe(DEFAULT_SETTINGS.theme);
+  });
+});
+
+describe('resetSettings', () => {
+  let store: Record<string, string>;
+
+  beforeEach(() => {
+    store = createMockStore();
+    setupLocalStorage(store);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    restoreWindow();
+  });
+
+  it('removes settings key from localStorage', () => {
+    store['ipfs-portal-settings'] = JSON.stringify({ theme: 'light' });
+    resetSettings();
+    expect(store['ipfs-portal-settings']).toBeUndefined();
+  });
+
+  it('returns default settings', () => {
+    const result = resetSettings();
+    expect(result).toEqual(DEFAULT_SETTINGS);
+  });
+});
+
+describe('getHistory', () => {
+  let store: Record<string, string>;
+
+  beforeEach(() => {
+    store = createMockStore();
+    setupLocalStorage(store);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    restoreWindow();
+  });
+
+  it('returns empty array when no history stored', () => {
+    expect(getHistory()).toEqual([]);
+  });
+
+  it('parses valid JSON array', () => {
+    const records: UploadRecord[] = [
+      { cid: 'Qm1', name: 'a.txt', size: 100, date: '2025-01-01', method: 'free' },
+    ];
+    store['ipfs-portal-history'] = JSON.stringify(records);
+    expect(getHistory()).toEqual(records);
+  });
+
+  it('handles corrupt JSON by removing key and returning empty', () => {
+    store['ipfs-portal-history'] = 'not json';
+    const result = getHistory();
+    expect(result).toEqual([]);
+    expect(store['ipfs-portal-history']).toBeUndefined();
+  });
+
+  it('handles non-array JSON by removing key and returning empty', () => {
+    store['ipfs-portal-history'] = JSON.stringify({ cid: 'Qm1' });
+    const result = getHistory();
+    expect(result).toEqual([]);
+    expect(store['ipfs-portal-history']).toBeUndefined();
+  });
+
+  it('returns empty array when typeof window is undefined (SSR)', () => {
+    const origWindow = globalThis.window;
+    (globalThis as any).window = undefined;
+    const result = getHistory();
+    expect(result).toEqual([]);
+    expect(localStorage.getItem).not.toHaveBeenCalled();
+    (globalThis as any).window = origWindow;
+  });
+});
+
+describe('addToHistory', () => {
+  let store: Record<string, string>;
+
+  beforeEach(() => {
+    store = createMockStore();
+    setupLocalStorage(store);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    restoreWindow();
+  });
+
+  it('adds record to front of history', () => {
+    const record: UploadRecord = { cid: 'Qm1', name: 'a.txt', size: 100, date: '2025-01-01', method: 'free' };
+    const result = addToHistory(record);
+    expect(result).toHaveLength(1);
+    expect(result[0]).toEqual(record);
+  });
+
+  it('deduplicates by cid + name', () => {
+    const existing: UploadRecord = { cid: 'Qm1', name: 'a.txt', size: 100, date: '2025-01-01', method: 'free' };
+    store['ipfs-portal-history'] = JSON.stringify([existing]);
+
+    const duplicate: UploadRecord = { cid: 'Qm1', name: 'a.txt', size: 200, date: '2025-02-01', method: 'eth' };
+    const result = addToHistory(duplicate);
+    expect(result).toHaveLength(1);
+    expect(result[0]).toEqual(duplicate);
+  });
+
+  it('keeps non-duplicate entries', () => {
+    const existing: UploadRecord = { cid: 'Qm1', name: 'a.txt', size: 100, date: '2025-01-01', method: 'free' };
+    store['ipfs-portal-history'] = JSON.stringify([existing]);
+
+    const newRecord: UploadRecord = { cid: 'Qm2', name: 'b.txt', size: 200, date: '2025-02-01', method: 'eth' };
+    const result = addToHistory(newRecord);
+    expect(result).toHaveLength(2);
+    expect(result[0]).toEqual(newRecord);
+    expect(result[1]).toEqual(existing);
+  });
+
+  it('trims to 500 entries', () => {
+    const manyRecords: UploadRecord[] = Array.from({ length: 500 }, (_, i) => ({
+      cid: `Qm${i}`, name: `${i}.txt`, size: i, date: `2025-01-${String(i + 1).padStart(2, '0')}`, method: 'free' as const,
+    }));
+    store['ipfs-portal-history'] = JSON.stringify(manyRecords);
+
+    const newRecord: UploadRecord = { cid: 'QmNew', name: 'new.txt', size: 999, date: '2025-06-01', method: 'quick' };
+    const result = addToHistory(newRecord);
+    expect(result).toHaveLength(500);
+    expect(result[0]).toEqual(newRecord);
+    // The last entry (index 499) should be the 499th from original (since we sliced 0..500)
+    expect(result[result.length - 1].cid).toBe('Qm498');
+  });
+});
+
+describe('clearHistory', () => {
+  let store: Record<string, string>;
+
+  beforeEach(() => {
+    store = createMockStore();
+    setupLocalStorage(store);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    restoreWindow();
+  });
+
+  it('removes history key from localStorage', () => {
+    store['ipfs-portal-history'] = JSON.stringify([{ cid: 'Qm1', name: 'a.txt', size: 100, date: '2025-01-01', method: 'free' }]);
+    clearHistory();
+    expect(store['ipfs-portal-history']).toBeUndefined();
+  });
+});
+
+describe('removeMultipleFromHistory', () => {
+  let store: Record<string, string>;
+
+  beforeEach(() => {
+    store = createMockStore();
+    setupLocalStorage(store);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    restoreWindow();
+  });
+
+  it('removes matching entries by cid+date combo', () => {
+    const records: UploadRecord[] = [
+      { cid: 'QmA', name: 'a.txt', size: 100, date: '2025-01-01', method: 'free' },
+      { cid: 'QmB', name: 'b.txt', size: 200, date: '2025-02-01', method: 'eth' },
+      { cid: 'QmC', name: 'c.txt', size: 300, date: '2025-03-01', method: 'token' },
+    ];
+    store['ipfs-portal-history'] = JSON.stringify(records);
+
+    const result = removeMultipleFromHistory([
+      { cid: 'QmA', date: '2025-01-01' },
+      { cid: 'QmC', date: '2025-03-01' },
+    ]);
+    expect(result).toHaveLength(1);
+    expect(result[0].cid).toBe('QmB');
+  });
+
+  it('keeps all entries when no ids match', () => {
+    const records: UploadRecord[] = [
+      { cid: 'QmA', name: 'a.txt', size: 100, date: '2025-01-01', method: 'free' },
+    ];
+    store['ipfs-portal-history'] = JSON.stringify(records);
+
+    const result = removeMultipleFromHistory([{ cid: 'QmX', date: '2025-99-99' }]);
+    expect(result).toHaveLength(1);
+  });
+
+  it('persists filtered result to localStorage', () => {
+    const records: UploadRecord[] = [
+      { cid: 'QmA', name: 'a.txt', size: 100, date: '2025-01-01', method: 'free' },
+      { cid: 'QmB', name: 'b.txt', size: 200, date: '2025-02-01', method: 'eth' },
+    ];
+    store['ipfs-portal-history'] = JSON.stringify(records);
+
+    removeMultipleFromHistory([{ cid: 'QmA', date: '2025-01-01' }]);
+    const saved = JSON.parse(store['ipfs-portal-history']);
+    expect(saved).toHaveLength(1);
+    expect(saved[0].cid).toBe('QmB');
+  });
+});

src/lib/__tests__/wallet.test.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect } from 'vitest';
-import { formatWeiToETH, formatBytes, CHAIN_IDS } from '../wallet';
+import { formatWeiToETH, CHAIN_IDS } from '../wallet';
+import { formatBytes } from '../helpers';
 
 describe('formatWeiToETH', () => {
   it('formats 0 wei', () => {
@@ -31,7 +32,7 @@ describe('formatWeiToETH', () => {
   });
 });
 
-describe('formatBytes (wallet)', () => {
+describe('formatBytes (helpers)', () => {
   it('formats 0 bytes', () => {
     expect(formatBytes(0n)).toBe('0 B');
   });
@@ -49,7 +50,7 @@ describe('formatBytes (wallet)', () => {
   });
 
   it('formats GB', () => {
-    expect(formatBytes(2n * 1024n * 1024n * 1024n)).toBe('2.00 GB');
+    expect(formatBytes(2n * 1024n * 1024n * 1024n)).toBe('2.0 GB');
   });
 
   it('accepts number input', () => {

src/lib/api.ts.bak

@@ -84,7 +84,11 @@ export async function uploadFile(file: File): Promise<{ cid: string; size: numbe
     body: form,
     credentials: 'include',
   });
-  if (!res.ok) throw new Error(`Upload failed: ${res.statusText}`);
+  if (!res.ok) {
+    let errMsg = res.statusText;
+    try { const d = await res.json(); errMsg = d.error || d.Message || errMsg; } catch {}
+    throw new Error(`Upload failed: ${errMsg}`);
+  }
   const data = await res.json();
   // Kubo API returns { Hash, Size, Name }, normalize to { cid, size }
   return {

src/lib/api/client.ts

@@ -0,0 +1,44 @@
+/* ── IPFS Portal API — Client / shared types ── */
+
+export const API_BASE = '';  // nginx proxy /api/* → backend
+
+/* ── Shared types ── */
+
+export interface IPFSNodeInfo {
+  version: string;
+  peerId: string;
+  peers: number;
+  storageUsed: string;
+  storageMax: string;
+  uptime: string;
+}
+
+export interface RepoStats {
+  repoSize: number;
+  storageMax: number;
+  numObjects: number;
+  repoPath: string;
+  version: string;
+}
+
+export interface BWStats {
+  totalIn: number;
+  totalOut: number;
+  rateIn: number;
+  rateOut: number;
+}
+
+/* ── Generic fetch wrapper ── */
+
+export async function apiFetch<T>(path: string, options?: RequestInit): Promise<T> {
+  const res = await fetch(`${API_BASE}/api${path}`, {
+    headers: { 'Content-Type': 'application/json', ...options?.headers },
+    ...options,
+    credentials: 'include',
+  });
+  if (!res.ok) {
+    const text = await res.text().catch(() => '');
+    throw new Error(`${res.status} ${res.statusText}: ${text.slice(0, 200)}`);
+  }
+  return res.json();
+}

src/lib/api/explorer.ts

@@ -0,0 +1,30 @@
+/* ── IPFS Portal API — IPFS Explorer ── */
+
+import { apiFetch, API_BASE } from './client';
+
+export interface IPFSEntry {
+  name: string;
+  type: 'file' | 'dir';
+  size: number;
+  hash: string;
+}
+
+export async function explorerLs(cid: string): Promise<IPFSEntry[]> {
+  return apiFetch(`/explorer/ls/${encodeURIComponent(cid)}`, { method: 'POST' });
+}
+
+export async function explorerCat(cid: string): Promise<string> {
+  const res = await fetch(`${API_BASE}/api/explorer/cat/${encodeURIComponent(cid)}`, {
+    method: 'POST',
+    credentials: 'include',
+  });
+  if (!res.ok) {
+    const text = await res.text().catch(() => '');
+    throw new Error(`${res.status} ${res.statusText}: ${text.slice(0, 200)}`);
+  }
+  return res.text();
+}
+
+export async function explorerStat(cid: string): Promise<Record<string, unknown>> {
+  return apiFetch(`/explorer/stat/${encodeURIComponent(cid)}`, { method: 'POST' });
+}

src/lib/api/files.ts

@@ -0,0 +1,28 @@
+/* ── IPFS Portal API — Files ── */
+
+import { apiFetch, API_BASE } from './client';
+
+export async function uploadFile(file: File): Promise<{ cid: string; size: number }> {
+  const form = new FormData();
+  form.append('file', file);
+  const res = await fetch(`${API_BASE}/api/files/upload`, {
+    method: 'POST',
+    body: form,
+    credentials: 'include',
+  });
+  if (!res.ok) {
+    let errMsg = res.statusText;
+    try { const d = await res.json(); errMsg = d.error || d.Message || errMsg; } catch {}
+    throw new Error(`Upload failed: ${errMsg}`);
+  }
+  const data = await res.json();
+  // Kubo API returns { Hash, Size, Name }, normalize to { cid, size }
+  return {
+    cid: data.cid || data.Hash || data.hash || '',
+    size: data.size || data.Size || 0,
+  };
+}
+
+export async function listFiles(): Promise<{ name: string; cid: string; size: number; modified: string }[]> {
+  return apiFetch('/files');
+}

src/lib/api/gateway.ts

@@ -0,0 +1,52 @@
+/* ── IPFS Portal API — Gateway / Node / Health ── */
+
+import { apiFetch, type IPFSNodeInfo, type RepoStats, type BWStats } from './client';
+
+/* ── Node info ── */
+
+export async function getNodeInfo(): Promise<IPFSNodeInfo> {
+  return apiFetch('/node/info');
+}
+
+export async function getPeers(): Promise<{ id: string; addr: string; latency: string }[]> {
+  const raw = await apiFetch<{ Peers?: { Peer: string; Addr: string; Latency: string }[] }>('/peers');
+  return (raw.Peers || []).map((p: { Peer: string; Addr: string; Latency: string }) => ({
+    id: p.Peer,
+    addr: p.Addr,
+    latency: p.Latency || '—',
+  }));
+}
+
+/* ── Repo / Bandwidth Stats ── */
+
+export async function getRepoStats(): Promise<RepoStats> {
+  const raw = await apiFetch<{
+    RepoSize?: number; StorageMax?: number; NumObjects?: number;
+    RepoPath?: string; Version?: string;
+  }>('/repo/stats');
+  return {
+    repoSize: raw.RepoSize ?? 0,
+    storageMax: raw.StorageMax ?? 0,
+    numObjects: raw.NumObjects ?? 0,
+    repoPath: raw.RepoPath ?? '',
+    version: raw.Version ?? '',
+  };
+}
+
+export async function getBWStats(): Promise<BWStats> {
+  const raw = await apiFetch<{
+    TotalIn?: number; TotalOut?: number; RateIn?: number; RateOut?: number;
+  }>('/bw/stats');
+  return {
+    totalIn: raw.TotalIn ?? 0,
+    totalOut: raw.TotalOut ?? 0,
+    rateIn: raw.RateIn ?? 0,
+    rateOut: raw.RateOut ?? 0,
+  };
+}
+
+/* ── Health ── */
+
+export async function checkHealth(): Promise<{ status: string; node: string }> {
+  return apiFetch('/health');
+}

src/lib/api/index.ts

@@ -0,0 +1,9 @@
+/* ── Barrel: IPFS Portal API ── */
+
+export * from './client';
+export * from './gateway';
+export * from './pins';
+export * from './files';
+export * from './users';
+export * from './explorer';
+export * from './ipns';

src/lib/api/ipns.ts

@@ -0,0 +1,32 @@
+/* ── IPFS Portal API — IPNS ── */
+
+import { apiFetch } from './client';
+
+export interface IPNSKey {
+  name: string;
+  id: string;
+}
+
+export async function listIPNSKeys(): Promise<IPNSKey[]> {
+  const res = await apiFetch<{ Keys: { Name?: string; Id?: string }[] }>('/ipns/keys');
+  if (!res.Keys) return [];
+  return res.Keys.map((k: { Name?: string; Id?: string }) => ({
+    name: k.Name ?? '',
+    id: k.Id ?? '',
+  }));
+}
+
+export async function ipnsPublish(cid: string, key = 'self'): Promise<{ name: string; value: string }> {
+  return apiFetch(`/ipns/publish?arg=${encodeURIComponent(cid)}&key=${encodeURIComponent(key)}`, {
+    method: 'POST',
+  });
+}
+
+export async function ipnsResolve(name: string): Promise<string> {
+  const res = await apiFetch<{ Path: string }>(`/ipns/resolve/${encodeURIComponent(name)}`);
+  return res.Path || '';
+}
+
+export async function ipnsGenKey(name: string): Promise<IPNSKey> {
+  return apiFetch(`/ipns/keys/gen/${encodeURIComponent(name)}`, { method: 'POST' });
+}

src/lib/api/pins.ts

@@ -0,0 +1,32 @@
+/* ── IPFS Portal API — Pins ── */
+
+import { apiFetch } from './client';
+
+export interface IPFSPin {
+  cid: string;
+  name: string;
+  size: number;
+  created: string;
+}
+
+export async function listPins(): Promise<IPFSPin[]> {
+  const raw = await apiFetch<{ Keys?: Record<string, { Type: string }> }>('/pins');
+  if (!raw.Keys) return [];
+  return Object.entries(raw.Keys).map(([cid, info]) => ({
+    cid,
+    name: '',
+    size: 0,
+    created: info.Type || '',
+  }));
+}
+
+export async function addPin(cid: string, name?: string): Promise<{ cid: string }> {
+  return apiFetch('/pins', {
+    method: 'POST',
+    body: JSON.stringify({ cid, name }),
+  });
+}
+
+export async function removePin(cid: string): Promise<void> {
+  await apiFetch(`/pins/${cid}`, { method: 'DELETE' });
+}

src/lib/api/users.ts

@@ -0,0 +1,28 @@
+/* ── IPFS Portal API — Users (admin) ── */
+
+import { apiFetch } from './client';
+
+export interface IPFSUser {
+  username: string;
+  created: string;
+  active: boolean;
+}
+
+export async function listUsers(): Promise<IPFSUser[]> {
+  const raw = await apiFetch<IPFSUser[] | { users: IPFSUser[] }>('/users');
+  // Handle both [{...}] and {users: [{...}]} response formats
+  if (Array.isArray(raw)) return raw;
+  if (raw && Array.isArray(raw.users)) return raw.users;
+  return [];
+}
+
+export async function createUser(username: string, password: string): Promise<{ username: string }> {
+  return apiFetch('/users', {
+    method: 'POST',
+    body: JSON.stringify({ username, password }),
+  });
+}
+
+export async function deleteUser(username: string): Promise<void> {
+  await apiFetch(`/users/${encodeURIComponent(username)}`, { method: 'DELETE' });
+}

src/lib/auth-server.ts

@@ -13,8 +13,14 @@ export const SESSION_COOKIE = 'ipfs-portal-session';
 export const SESSION_MAX_AGE_SEC = 24 * 60 * 60; // 24 uur
 
 function getSecret(): Uint8Array {
-  const secret = process.env.JWT_SECRET || 'ipfs-portal-dev-secret-change-in-production';
-  return new TextEncoder().encode(secret);
+  const secret = process.env.JWT_SECRET;
+  if (!secret) {
+    if (process.env.NODE_ENV === 'production') {
+      throw new Error('JWT_SECRET environment variable is required in production');
+    }
+    console.warn('[auth-server] ⚠️  Using dev-only JWT secret. Set JWT_SECRET for production.');
+  }
+  return new TextEncoder().encode(secret || 'ipfs-portal-dev-secret-change-in-production');
 }
 
 /* ════════════════════════════ Types ════════════════════════════ */

src/lib/auth.tsx

@@ -1,133 +0,0 @@
-'use client';
-
-import { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from 'react';
-import type { WalletProvider } from '@/lib/wallet';
-
-/* ── Types ── */
-
-export interface AuthUser {
-  address: string;
-  role: 'admin' | 'user';
-}
-
-export interface WalletOption {
-  name: string;
-  icon?: string;
-  provider: WalletProvider;
-}
-
-interface AuthContextValue {
-  user: AuthUser | null;
-  loading: boolean;
-  loginWithWallet: (address: string, provider: WalletProvider) => Promise<void>;
-  logout: () => Promise<void>;
-  isAdmin: boolean;
-  connectError: string | null;
-}
-
-/* ── Context ── */
-
-const AuthContext = createContext<AuthContextValue | null>(null);
-
-/* ── Provider ── */
-
-export function AuthProvider({ children }: { children: ReactNode }) {
-  const [user, setUser] = useState<AuthUser | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [connectError, setConnectError] = useState<string | null>(null);
-
-  /* Check session on mount */
-  useEffect(() => {
-    fetch('/api/auth/me')
-      .then((r) => (r.ok ? r.json() : null))
-      .then((data) => {
-        if (data?.authenticated) {
-          setUser({ address: data.address, role: data.role });
-        }
-      })
-      .catch(() => {
-        /* server unreachable — stay logged out */
-      })
-      .finally(() => setLoading(false));
-  }, []);
-
-  const loginWithWallet = useCallback(async (address: string, provider: WalletProvider) => {
-    setConnectError(null);
-
-    // 1. Get SIWE challenge message
-    let challengeRes: Response;
-    try {
-      challengeRes = await fetch('/api/auth/challenge', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ address }),
-      });
-    } catch {
-      setConnectError('Kan geen verbinding maken met de server');
-      throw new Error('Network error');
-    }
-
-    if (!challengeRes.ok) {
-      const data = await challengeRes.json().catch(() => ({}));
-      const msg = data.error || 'Challenge mislukt';
-      setConnectError(msg);
-      throw new Error(msg);
-    }
-
-    const { message, nonce } = await challengeRes.json();
-
-    // 2. Sign the message with the wallet
-    let signature: string;
-    try {
-      signature = await provider.request({
-        method: 'personal_sign',
-        params: [message, address],
-      });
-    } catch {
-      setConnectError('Signatuur geweigerd in wallet');
-      throw new Error('User rejected signature');
-    }
-
-    // 3. Send signed message to backend for verification
-    let loginRes: Response;
-    try {
-      loginRes = await fetch('/api/auth/login', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ address, signature, nonce }),
-      });
-    } catch {
-      setConnectError('Login request mislukt');
-      throw new Error('Login network error');
-    }
-
-    if (!loginRes.ok) {
-      const data = await loginRes.json().catch(() => ({}));
-      const msg = data.error || 'Verificatie mislukt';
-      setConnectError(msg);
-      throw new Error(msg);
-    }
-
-    const data = await loginRes.json();
-    setUser({ address: data.address, role: data.role });
-  }, []);
-
-  const logout = useCallback(async () => {
-    await fetch('/api/auth/logout', { method: 'POST' }).catch(() => {});
-    setUser(null);
-  }, []);
-
-  return (
-    <AuthContext.Provider value={{ user, loading, loginWithWallet, logout, isAdmin: user?.role === 'admin', connectError }}>
-      {children}
-    </AuthContext.Provider>
-  );
-}
-
-/* ── Hook ── */
-
-export function useAuth(): AuthContextValue {
-  const ctx = useContext(AuthContext);
-  if (!ctx) throw new Error('useAuth must be used within <AuthProvider>');
-  return ctx;
-}

src/lib/auth/context.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { createContext, useState, useEffect, useCallback, type ReactNode } from "react";
+import type { WalletProvider } from "@/lib/wallet";
+import type { AuthUser, AuthContextValue } from "./types";
+
+export const AuthContext = createContext<AuthContextValue | null>(null);
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [user, setUser] = useState<AuthUser | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [connectError, setConnectError] = useState<string | null>(null);
+
+  /* Check session on mount */
+  useEffect(() => {
+    fetch("/api/auth/me")
+      .then((r) => (r.ok ? r.json() : null))
+      .then((data) => {
+        if (data?.authenticated) {
+          setUser({ address: data.address, role: data.role });
+        }
+      })
+      .catch((err) => {
+        console.error("[AuthProvider] Session check failed:", err);
+      })
+      .finally(() => setLoading(false));
+  }, []);
+
+  const loginWithWallet = useCallback(async (address: string, provider: WalletProvider) => {
+    setConnectError(null);
+
+    // 1. Get SIWE challenge message
+    let challengeRes: Response;
+    try {
+      challengeRes = await fetch("/api/auth/challenge", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ address }),
+      });
+    } catch (err) {
+      console.error("[AuthProvider] Challenge request failed:", err);
+      setConnectError("Kan geen verbinding maken met de server");
+      throw new Error("Network error");
+    }
+
+    if (!challengeRes.ok) {
+      const data = await challengeRes.json().catch(() => ({}));
+      const msg = data.error || "Challenge mislukt";
+      setConnectError(msg);
+      throw new Error(msg);
+    }
+
+    const { message, nonce } = await challengeRes.json();
+
+    // 2. Sign the message with the wallet
+    let signature: string;
+    try {
+      signature = await provider.request({
+        method: "personal_sign",
+        params: [message, address],
+      });
+    } catch (err) {
+      console.error("[AuthProvider] Signature request failed:", err);
+      setConnectError("Signatuur geweigerd in wallet");
+      throw new Error("User rejected signature");
+    }
+
+    // 3. Send signed message to backend for verification
+    let loginRes: Response;
+    try {
+      loginRes = await fetch("/api/auth/login", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ address, signature, nonce }),
+      });
+    } catch (err) {
+      console.error("[AuthProvider] Login request failed:", err);
+      setConnectError("Login request mislukt");
+      throw new Error("Login network error");
+    }
+
+    if (!loginRes.ok) {
+      const data = await loginRes.json().catch(() => ({}));
+      const msg = data.error || "Verificatie mislukt";
+      setConnectError(msg);
+      throw new Error(msg);
+    }
+
+    const data = await loginRes.json();
+    setUser({ address: data.address, role: data.role });
+  }, []);
+
+  const logout = useCallback(async () => {
+    await fetch("/api/auth/logout", { method: "POST" }).catch((err) => {
+      console.error("[AuthProvider] Logout request failed:", err);
+    });
+    setUser(null);
+  }, []);
+
+  return (
+    <AuthContext.Provider value={{ user, loading, loginWithWallet, logout, isAdmin: user?.role === "admin", connectError }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}

src/lib/auth/hooks.ts

@@ -0,0 +1,11 @@
+"use client";
+
+import { useContext } from "react";
+import { AuthContext } from "./context";
+import type { AuthContextValue } from "./types";
+
+export function useAuth(): AuthContextValue {
+  const ctx = useContext(AuthContext);
+  if (!ctx) throw new Error("useAuth must be used within <AuthProvider>");
+  return ctx;
+}

src/lib/auth/index.ts

@@ -0,0 +1,3 @@
+export type { AuthUser, WalletOption, AuthContextValue } from "./types";
+export { AuthProvider } from "./context";
+export { useAuth } from "./hooks";

src/lib/auth/types.ts

@@ -0,0 +1,21 @@
+import type { WalletProvider } from "@/lib/wallet";
+
+export interface AuthUser {
+  address: string;
+  role: "admin" | "user";
+}
+
+export interface WalletOption {
+  name: string;
+  icon?: string;
+  provider: WalletProvider;
+}
+
+export interface AuthContextValue {
+  user: AuthUser | null;
+  loading: boolean;
+  loginWithWallet: (address: string, provider: WalletProvider) => Promise<void>;
+  logout: () => Promise<void>;
+  isAdmin: boolean;
+  connectError: string | null;
+}

src/lib/config.ts

@@ -0,0 +1,54 @@
+/* ── IPFS Portal Environment Config ──
+ *
+ * Central defaults for every env-dependent value.
+ * Override any via .env.local / .env.production.
+ * Server-only vars (without NEXT_PUBLIC_) work in API routes + server components.
+ * NEXT_PUBLIC_* vars work everywhere (inlined at build for client bundles).
+ */
+
+// ── User API (Python backend) ──
+/** Base URL of the Python User Management API. Server-only. */
+export const userApiBase = (): string =>
+  process.env.USER_API_BASE || "http://localhost:8444";
+
+/** Admin key for User API admin endpoints. Server-only. */
+export const userApiAdminKey = (): string =>
+  process.env.USER_API_ADMIN_KEY || "maos-admin-2024";
+
+// ── Kubo RPC API ──
+/** Kubo API URL (e.g. http://localhost:5001 or behind nginx). Server-only. */
+export const kuboApiUrl = (): string | undefined =>
+  process.env.KUBO_API_URL || process.env.NEXT_PUBLIC_KUBO_API_URL;
+
+/** Basic auth credentials in "user:password" format. Server-only. */
+export const kuboBasicAuth = (): string | undefined =>
+  process.env.KUBO_BASIC_AUTH;
+
+// ── zkSync chain 270 (local) ──
+/** zkSync RPC URL for server-side reads (e.g. verify route). */
+export const zkSyncRpcUrl = (): string =>
+  process.env.ZKSYNC_RPC_URL || "http://localhost:3050";
+
+/** zkSync RPC URL exposed to the browser (wallet_addEthereumChain, etc.). */
+export const zkSyncPublicRpcUrl = (): string =>
+  process.env.NEXT_PUBLIC_ZKSYNC_RPC_URL || "http://localhost:3050";
+
+/** Block-explorer URL for tx links. */
+export const zkSyncExplorerUrl = (): string =>
+  process.env.NEXT_PUBLIC_ZKSYNC_EXPLORER_URL || "http://localhost:3050";
+
+// ── Payment contract ──
+/** On-chain IPFS Portal payment contract address. */
+export const paymentContractAddress = (): string =>
+  process.env.PAYMENT_CONTRACT_ADDRESS || "0xCBc6b8aeea129c206F4836799621C833Bf8B9BDe";
+
+// ── IPFS Gateway ──
+/** Public gateway URL for share links (e.g. https://ipfs.maos.dedyn.io). */
+export const gatewayUrl = (): string =>
+  process.env.NEXT_PUBLIC_GATEWAY_URL || "https://ipfs.maos.dedyn.io";
+
+// ── Composite helpers ──
+
+/** Resolve zkSync chain RPC preferring the public (NEXT_PUBLIC_) value. */
+export const zkSyncEffectiveRpcUrl = (): string =>
+  zkSyncPublicRpcUrl() || zkSyncRpcUrl();

src/lib/download.ts

@@ -41,4 +41,5 @@ export function downloadViaGateway(cid: string, filename?: string) {
   a.target = '_blank';
   a.rel = 'noopener noreferrer';
   a.click();
+  console.warn('[download] Gateway download — no programmatic feedback');
 }

src/lib/helpers.ts

@@ -1,9 +1,10 @@
 /* ── Format bytes to human-readable size ── */
-export function formatBytes(bytes: number): string {
-  if (bytes === 0) return '0 B';
+export function formatBytes(bytes: number | bigint): string {
+  const b = typeof bytes === 'bigint' ? Number(bytes) : bytes;
+  if (b === 0) return '0 B';
   const units = ['B', 'KB', 'MB', 'GB', 'TB'];
-  const i = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
-  const val = bytes / Math.pow(1024, i);
+  const i = Math.min(Math.floor(Math.log(b) / Math.log(1024)), units.length - 1);
+  const val = b / Math.pow(1024, i);
   return val < 10 ? val.toFixed(1) + ' ' + units[i] : Math.round(val) + ' ' + units[i];
 }
 
@@ -12,6 +13,9 @@ export function gatewayLink(cid: string): string {
   return `https://ipfs.maos.dedyn.io/${cid}`;
 }
 
+/** Alias for gatewayLink — used in FilePreview */
+export const gatewayUrl = gatewayLink;
+
 /* ── Truncate CID for display ── */
 export function truncateCid(cid: string, chars: number = 12): string {
   if (cid.length <= chars) return cid;

src/lib/limits.ts

@@ -61,16 +61,18 @@ export async function checkUploadAllowed(
     const repo = await getRepoStats();
     current.storageUsedMB = Math.round(repo.repoSize / (1024 * 1024));
     current.pinCount = repo.numObjects;
-  } catch {
+  } catch (e) {
     // Kubo unreachable — allow through, log elsewhere
+    console.warn('[limits] getRepoStats failed:', e);
   }
 
   // 2. Pin count
   try {
     const pins = await listPins();
     current.pinCount = pins.length;
-  } catch {
+  } catch (e) {
     // ignore
+    console.warn('[limits] listPins failed:', e);
   }
 
   // 3. On-chain upload count (if wallet provided)
@@ -87,8 +89,9 @@ export async function checkUploadAllowed(
       current.todayUploadCount = stats.uploads.filter(
         (u) => u.timestamp >= todayTs,
       ).length;
-    } catch {
+    } catch (e) {
       // Contract unreachable — assume wallet has no on-chain data
+      console.warn('[limits] getUserUploads failed:', e);
     }
   }
 

src/lib/payment/abi.ts

@@ -1,17 +1,19 @@
 /* ── IPFS Portal Payment ABI & Constants ── */
 
 import { type Chain } from 'viem';
+import { zkSyncRpcUrl } from '@/lib/config';
 
 /* ── Chain 270 (zkSync Local) ── */
+const ZKSYNC_RPC = zkSyncRpcUrl();
 export const zkSyncLocal: Chain = {
   id: 270,
   name: 'zkSync Local',
   nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
   rpcUrls: {
-    default: { http: ['http://192.168.1.176:3050'] },
+    default: { http: [ZKSYNC_RPC] },
   },
   blockExplorers: {
-    default: { name: 'Explorer', url: 'http://192.168.1.176:3050' },
+    default: { name: 'Explorer', url: ZKSYNC_RPC },
   },
 };
 

src/lib/payment/context.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { createContext, useContext, type ReactNode } from 'react';
+import type { IPaymentService } from './service-types';
+import { paymentService } from './service';
+
+const PaymentContext = createContext<IPaymentService>(paymentService);
+
+export function PaymentProvider({
+  children,
+  service = paymentService,
+}: {
+  children: ReactNode;
+  service?: IPaymentService;
+}) {
+  return (
+    <PaymentContext.Provider value={service}>
+      {children}
+    </PaymentContext.Provider>
+  );
+}
+
+export function usePaymentService(): IPaymentService {
+  return useContext(PaymentContext);
+}

src/lib/payment/index.ts

@@ -2,6 +2,8 @@
 
 export { IPFS_PORTAL_PAYMENT_ABI, DEFAULT_CONTRACT_ADDRESS, ERC20_ABI, zkSyncLocal } from './abi';
 export type { PriceInfo, UserUploadStats, TokenInfo, MAOSDiscountTier, UploadRecord, UserFullStats } from './types';
+export type { IPaymentService } from './service-types';
 export { PaymentService } from './write-service';
 export { PaymentReadService } from './read-service';
 export { paymentService } from './service';
+export { PaymentProvider, usePaymentService } from './context';

src/lib/payment/read-service.ts

@@ -25,43 +25,37 @@ export class PaymentReadService {
   /* ── READ: Get price for upload ── */
   async getPrice(bytesSize: number, userAddress: Address): Promise<PriceInfo> {
     const client = this.getPublicClient();
-    const result = await client.readContract({
+    const [totalWei, discountBps, finalWei, isFree] = await client.readContract({
       address: this.contractAddress, abi: IPFS_PORTAL_PAYMENT_ABI,
       functionName: 'getPrice', args: [BigInt(bytesSize), userAddress],
     });
-    return {
-      totalWei: result[0] as bigint, discountBps: Number(result[1]),
-      finalWei: result[2] as bigint, isFree: result[3] as boolean,
-    };
+    return { totalWei, discountBps: Number(discountBps), finalWei, isFree };
   }
 
   /* ── READ: Get user upload stats ── */
   async getUserStats(userAddress: Address): Promise<UserUploadStats> {
     const client = this.getPublicClient();
-    const result = await client.readContract({
+    const [totalBytes, uploadCount, remainingFree] = await client.readContract({
       address: this.contractAddress, abi: IPFS_PORTAL_PAYMENT_ABI,
       functionName: 'getUserStats', args: [userAddress],
     });
-    return {
-      totalBytes: result[0] as bigint, uploadCount: Number(result[1]),
-      remainingFree: result[2] as bigint,
-    };
+    return { totalBytes, uploadCount: Number(uploadCount), remainingFree };
   }
 
   /* ── READ: Get full user stats including upload records ── */
   async getUserUploads(userAddress: Address): Promise<UserFullStats> {
     const client = this.getPublicClient();
-    const result = await client.readContract({
+    const [totalBytes, uploadCount, remainingFree, rawRecords] = await client.readContract({
       address: this.contractAddress, abi: IPFS_PORTAL_PAYMENT_ABI,
       functionName: 'getUserStats', args: [userAddress],
-    }) as unknown as readonly [bigint, bigint, bigint, readonly (readonly [string, bigint, string, bigint, bigint])[]];
+    });
 
-    const records = result[3] ?? [];
+    const records = rawRecords ?? [];
     const uploads: UploadRecord[] = Array.from(records).map(rec => ({
       cid: rec[0], bytesSize: rec[1], tokenSymbol: rec[2], amountPaid: rec[3], timestamp: rec[4],
     }));
 
-    return { totalBytes: result[0], uploadCount: Number(result[1]), remainingFree: result[2], uploads };
+    return { totalBytes, uploadCount: Number(uploadCount), remainingFree, uploads };
   }
 
   /* ── READ: Get supported tokens ── */
@@ -70,19 +64,15 @@ export class PaymentReadService {
     const symbols = await client.readContract({
       address: this.contractAddress, abi: IPFS_PORTAL_PAYMENT_ABI,
       functionName: 'getSupportedTokens', args: [],
-    }) as string[];
+    });
 
     const tokens: TokenInfo[] = [];
     for (const symbol of symbols) {
-      const config = await client.readContract({
+      const [tokenAddr, decimals, weiPerToken, enabled] = await client.readContract({
         address: this.contractAddress, abi: IPFS_PORTAL_PAYMENT_ABI,
         functionName: 'tokenConfigs', args: [symbol],
       });
-      tokens.push({
-        symbol, address: (config as any)[0] as Address,
-        decimals: (config as any)[1] as number, weiPerToken: (config as any)[2] as bigint,
-        enabled: (config as any)[3] as boolean,
-      });
+      tokens.push({ symbol, address: tokenAddr, decimals, weiPerToken, enabled });
     }
     return tokens;
   }
@@ -93,7 +83,7 @@ export class PaymentReadService {
     const result = await client.readContract({
       address: this.contractAddress, abi: IPFS_PORTAL_PAYMENT_ABI,
       functionName: 'getMAOSDiscountTiers', args: [],
-    }) as unknown as readonly (readonly [bigint, bigint])[];
+    });
 
     return Array.from(result).map(([minBalance, discountBps]) => ({ minBalance, discountBps: Number(discountBps) }));
   }
@@ -104,7 +94,7 @@ export class PaymentReadService {
     return client.readContract({
       address: this.contractAddress, abi: IPFS_PORTAL_PAYMENT_ABI,
       functionName: 'freeTierBytes', args: [],
-    }) as Promise<bigint>;
+    });
   }
 
   /* ── READ: Get base price per MB ── */
@@ -113,7 +103,7 @@ export class PaymentReadService {
     return client.readContract({
       address: this.contractAddress, abi: IPFS_PORTAL_PAYMENT_ABI,
       functionName: 'basePricePerMB', args: [],
-    }) as Promise<bigint>;
+    });
   }
 
   /* ── READ: Get contract owner ── */
@@ -122,7 +112,7 @@ export class PaymentReadService {
     return client.readContract({
       address: this.contractAddress, abi: IPFS_PORTAL_PAYMENT_ABI,
       functionName: 'owner', args: [],
-    }) as Promise<Address>;
+    });
   }
 
   /* ── READ: Get total revenue for a token ── */
@@ -131,7 +121,7 @@ export class PaymentReadService {
     return client.readContract({
       address: this.contractAddress, abi: IPFS_PORTAL_PAYMENT_ABI,
       functionName: 'totalRevenue', args: [tokenSymbol],
-    }) as Promise<bigint>;
+    });
   }
 
   /* ── READ: Get total upload count ── */
@@ -140,15 +130,16 @@ export class PaymentReadService {
     return client.readContract({
       address: this.contractAddress, abi: IPFS_PORTAL_PAYMENT_ABI,
       functionName: 'totalUploads', args: [],
-    }) as Promise<bigint>;
+    });
   }
 
   /* ── READ: Get supported token symbols ── */
   async getTokenSymbols(): Promise<string[]> {
     const client = this.getPublicClient();
-    return client.readContract({
+    const result = await client.readContract({
       address: this.contractAddress, abi: IPFS_PORTAL_PAYMENT_ABI,
       functionName: 'getSupportedTokens', args: [],
-    }) as Promise<string[]>;
+    });
+    return [...result];
   }
 }

src/lib/payment/service-types.ts

@@ -0,0 +1,37 @@
+/* ── IPFS Portal Payment Service Types ── */
+
+import type { Address, Hash } from 'viem';
+import type { WalletProvider } from '../wallet';
+import type { PriceInfo, UserUploadStats, TokenInfo, MAOSDiscountTier, UserFullStats } from './types';
+
+/* ── IPaymentService interface for dependency injection ── */
+export interface IPaymentService {
+  // Read operations (from PaymentReadService)
+  setContractAddress(address: string): void;
+  getPrice(bytesSize: number, userAddress: Address): Promise<PriceInfo>;
+  getUserStats(userAddress: Address): Promise<UserUploadStats>;
+  getUserUploads(userAddress: Address): Promise<UserFullStats>;
+  getSupportedTokens(): Promise<TokenInfo[]>;
+  getMAOSDiscountTiers(): Promise<MAOSDiscountTier[]>;
+  getFreeTierBytes(): Promise<bigint>;
+  getBasePricePerMB(): Promise<bigint>;
+  getOwner(): Promise<Address>;
+  getTotalRevenue(tokenSymbol: string): Promise<bigint>;
+  getTotalUploads(): Promise<bigint>;
+  getTokenSymbols(): Promise<string[]>;
+
+  // Write operations (from PaymentService)
+  payWithETH(provider: WalletProvider, cid: string, bytesSize: number, priceWei: bigint): Promise<Hash>;
+  approveAndPayWithToken(provider: WalletProvider, tokenAddress: Address, cid: string, bytesSize: number, tokenAmount: bigint, tokenSymbol: string): Promise<{ approveHash?: Hash; payHash: Hash }>;
+  adminSetPricePerMB(provider: WalletProvider, priceWei: bigint): Promise<Hash>;
+  adminSetFreeTierBytes(provider: WalletProvider, bytes: bigint): Promise<Hash>;
+  adminSetDiscountTier(provider: WalletProvider, minBalance: bigint, discountBps: number): Promise<Hash>;
+  adminRemoveDiscountTier(provider: WalletProvider, index: number): Promise<Hash>;
+  adminConfigureToken(provider: WalletProvider, symbol: string, tokenAddress: Address, decimals: number, weiPerToken: bigint, enabled: boolean): Promise<Hash>;
+  adminWithdrawETH(provider: WalletProvider, to: Address): Promise<Hash>;
+  adminWithdrawToken(provider: WalletProvider, tokenSymbol: string, to: Address): Promise<Hash>;
+  adminTransferOwnership(provider: WalletProvider, newOwner: Address): Promise<Hash>;
+  isDeployed(): Promise<boolean>;
+}
+
+export type WriteFn = 'payWithETH' | 'payWithToken' | 'setPricePerMB' | 'setFreeTierBytes' | 'setMAOSDiscountTier' | 'removeMAOSDiscountTier' | 'configureToken' | 'setMAOSTokenAddress' | 'withdrawETH' | 'withdrawToken' | 'transferOwnership';

src/lib/payment/write-service.ts

@@ -2,13 +2,15 @@
 
 import {
   createWalletClient, custom, encodeFunctionData,
-  type Address, type Hash,
+  type Address, type ContractFunctionArgs, type Hash,
 } from 'viem';
 import { zkSyncLocal, IPFS_PORTAL_PAYMENT_ABI, ERC20_ABI, DEFAULT_CONTRACT_ADDRESS } from './abi';
 import type { WalletProvider } from '../wallet';
+import type { PriceInfo, UserUploadStats, TokenInfo, MAOSDiscountTier, UserFullStats } from './types';
 import { PaymentReadService } from './read-service';
+import type { IPaymentService, WriteFn } from './service-types';
 
-export class PaymentService extends PaymentReadService {
+export class PaymentService extends PaymentReadService implements IPaymentService {
   private getWalletClient(provider: WalletProvider) {
     return createWalletClient({ chain: zkSyncLocal, transport: custom(provider) });
   }
@@ -35,7 +37,7 @@ export class PaymentService extends PaymentReadService {
     const allowance = await publicClient.readContract({
       address: tokenAddress, abi: ERC20_ABI, functionName: 'allowance',
       args: [address, this.contractAddress],
-    }) as bigint;
+    });
 
     let approveHash: Hash | undefined;
     if (allowance < tokenAmount) {
@@ -101,16 +103,20 @@ export class PaymentService extends PaymentReadService {
     return this.execWrite(provider, 'transferOwnership', [newOwner]);
   }
 
-  private async execWrite(
+  private async execWrite<Fn extends WriteFn>(
     provider: WalletProvider,
-    fn: 'payWithETH' | 'payWithToken' | 'setPricePerMB' | 'setFreeTierBytes' | 'setMAOSDiscountTier' | 'removeMAOSDiscountTier' | 'configureToken' | 'setMAOSTokenAddress' | 'withdrawETH' | 'withdrawToken' | 'transferOwnership',
-    args: readonly unknown[],
+    fn: Fn,
+    args: ContractFunctionArgs<typeof IPFS_PORTAL_PAYMENT_ABI, 'payable' | 'nonpayable', Fn>,
   ): Promise<Hash> {
     const walletClient = this.getWalletClient(provider);
     const [address] = await walletClient.getAddresses();
-    return walletClient.writeContract({
-      account: address, address: this.contractAddress,
-      abi: IPFS_PORTAL_PAYMENT_ABI, functionName: fn, args: args as any,
+    const data = encodeFunctionData({
+      abi: IPFS_PORTAL_PAYMENT_ABI as readonly unknown[],
+      functionName: fn as string,
+      args: args as readonly unknown[],
+    });
+    return walletClient.sendTransaction({
+      account: address, to: this.contractAddress, data,
     });
   }
 

src/lib/search-index.ts

@@ -1,207 +0,0 @@
-/* ── Search Index — Client-side full-text search voor IPFS ──
- *
- * Bewaart een miniatuur search index in localStorage.
- * Periodiek te updaten door gepinde files te crawlen en te indexeren.
- *
- * Beperking: alleen tekstuele content (.txt, .md, .json, .html)
- */
-
-'use client';
-
-/* ════════════════════════════ Types ════════════════════════════ */
-
-export interface IndexedEntry {
-  cid: string;
-  name: string;
-  type: 'file' | 'dir';
-  text: string;          // geëxtraheerde tekst (max 2048 chars)
-  size: number;
-  indexedAt: number;     // timestamp
-}
-
-export interface SearchResult {
-  entry: IndexedEntry;
-  score: number;         // relevance (higher = better)
-  matchField: 'name' | 'text' | 'cid';
-}
-
-/* ════════════════════════════ Storage ════════════════════════════ */
-
-const STORAGE_KEY = 'ipfs-search-index';
-
-function loadIndex(): IndexedEntry[] {
-  if (typeof window === 'undefined') return [];
-  try {
-    const raw = localStorage.getItem(STORAGE_KEY);
-    return raw ? JSON.parse(raw) : [];
-  } catch {
-    return [];
-  }
-}
-
-function saveIndex(entries: IndexedEntry[]) {
-  if (typeof window === 'undefined') return;
-  try {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(entries));
-  } catch {
-    // localStorage vol of blocked — silently fail
-  }
-}
-
-/* ════════════════════════════ Tekst extractie ════════════════════════════ */
-
-const TEXT_EXTENSIONS = new Set(['.txt', '.md', '.json', '.html', '.htm', '.csv', '.log', '.xml', '.yaml', '.yml', '.toml', '.ini', '.cfg']);
-
-export function isTextFile(name: string): boolean {
-  const ext = name.toLowerCase().slice(name.lastIndexOf('.'));
-  return TEXT_EXTENSIONS.has(ext);
-}
-
-export function extractText(raw: string): string {
-  return raw
-    .replace(/<[^>]*>/g, ' ')     // strip HTML tags
-    .replace(/\s+/g, ' ')          // collapse whitespace
-    .replace(/[{}\[\]]/g, ' ')     // strip JSON braces
-    .trim()
-    .slice(0, 2048);
-}
-
-/* ════════════════════════════ Index beheer ════════════════════════════ */
-
-export function addToIndex(entry: IndexedEntry) {
-  const index = loadIndex();
-  // Remove oud voor deze CID
-  const filtered = index.filter((e) => e.cid !== entry.cid);
-  filtered.push(entry);
-  saveIndex(filtered);
-}
-
-export function removeFromIndex(cid: string) {
-  const index = loadIndex().filter((e) => e.cid !== cid);
-  saveIndex(index);
-}
-
-export function clearIndex() {
-  if (typeof window !== 'undefined') {
-    localStorage.removeItem(STORAGE_KEY);
-  }
-}
-
-export function getIndexStats() {
-  const index = loadIndex();
-  const totalSize = index.reduce((sum, e) => sum + e.text.length, 0);
-  return {
-    entries: index.length,
-    totalChars: totalSize,
-    lastIndexed: index.length > 0 ? Math.max(...index.map((e) => e.indexedAt)) : 0,
-  };
-}
-
-/* ════════════════════════════ Zoeken ════════════════════════════ */
-
-const STOP_WORDS = new Set([
-  'de', 'het', 'een', 'van', 'en', 'in', 'is', 'te', 'met', 'op',
-  'voor', 'aan', 'dat', 'die', 'door', 'bij', 'ook', 'maar', 'uit',
-  'naar', 'om', 'al', 'als', 'nog', 'dan', 'of', 'er', 'niet', 'dit',
-  'the', 'a', 'an', 'and', 'or', 'in', 'on', 'at', 'to', 'for',
-  'of', 'is', 'it', 'be', 'by', 'as', 'are', 'was', 'were', 'been',
-]);
-
-function tokenize(text: string): string[] {
-  return text
-    .toLowerCase()
-    .split(/[^a-z0-9]+/)
-    .filter((t) => t.length > 1 && !STOP_WORDS.has(t));
-}
-
-function scoreEntry(queryTokens: string[], entry: IndexedEntry): number {
-  let score = 0;
-  const nameLower = entry.name.toLowerCase();
-  const textLower = entry.text.toLowerCase();
-  const cidLower = entry.cid.toLowerCase();
-
-  for (const token of queryTokens) {
-    // Exact match in name = hoogste score
-    if (nameLower.includes(token)) {
-      score += token.length * 10;
-      if (nameLower === token) score += 20; // exact match bonus
-    }
-    // Match in text
-    if (textLower.includes(token)) {
-      score += token.length * 3;
-    }
-    // Match in CID (prefix)
-    if (cidLower.startsWith(token)) {
-      score += token.length * 8;
-    }
-    // Frequentie in text
-    const count = (textLower.match(new RegExp(token.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g')) || []).length;
-    score += count;
-  }
-
-  return score;
-}
-
-export function searchIndex(query: string, maxResults = 20): SearchResult[] {
-  if (!query || query.trim().length < 2) return [];
-
-  const queryTokens = tokenize(query);
-  if (queryTokens.length === 0) return [];
-
-  const index = loadIndex();
-  const scored: SearchResult[] = [];
-
-  for (const entry of index) {
-    const score = scoreEntry(queryTokens, entry);
-    if (score > 0) {
-      // Bepaal het beste match veld
-      const nameLower = entry.name.toLowerCase();
-      const cidLower = entry.cid.toLowerCase();
-      let matchField: 'name' | 'text' | 'cid' = 'text';
-      if (queryTokens.some((t) => nameLower.includes(t))) matchField = 'name';
-      else if (queryTokens.some((t) => cidLower.startsWith(t))) matchField = 'cid';
-
-      scored.push({ entry, score, matchField });
-    }
-  }
-
-  return scored.sort((a, b) => b.score - a.score).slice(0, maxResults);
-}
-
-/* ════════════════════════════ Crawler ════════════════════════════ */
-
-export async function rebuildIndex(
-  cids: { cid: string; name: string }[],
-  fetchContent: (cid: string) => Promise<string>,
-  onProgress?: (done: number, total: number) => void,
-): Promise<{ indexed: number; failed: number }> {
-  let indexed = 0;
-  let failed = 0;
-
-  // Filter op text files
-  const textFiles = cids.filter((c) => isTextFile(c.name));
-
-  for (let i = 0; i < textFiles.length; i++) {
-    const file = textFiles[i];
-    try {
-      const raw = await fetchContent(file.cid);
-      const text = extractText(raw);
-      if (text.length > 0) {
-        addToIndex({
-          cid: file.cid,
-          name: file.name,
-          type: 'file',
-          text,
-          size: raw.length,
-          indexedAt: Date.now(),
-        });
-        indexed++;
-      }
-    } catch {
-      failed++;
-    }
-    onProgress?.(i + 1, textFiles.length);
-  }
-
-  return { indexed, failed };
-}

src/lib/search-index/crawler.ts

@@ -0,0 +1,44 @@
+/* ── Search Index — Client-side full-text search voor IPFS ──
+ *
+ * Crawler
+ */
+
+import { isTextFile, extractText } from "./extract";
+import { addToIndex } from "./index-manager";
+
+export async function rebuildIndex(
+  cids: { cid: string; name: string }[],
+  fetchContent: (cid: string) => Promise<string>,
+  onProgress?: (done: number, total: number) => void,
+): Promise<{ indexed: number; failed: number }> {
+  let indexed = 0;
+  let failed = 0;
+
+  // Filter op text files
+  const textFiles = cids.filter((c) => isTextFile(c.name));
+
+  for (let i = 0; i < textFiles.length; i++) {
+    const file = textFiles[i];
+    try {
+      const raw = await fetchContent(file.cid);
+      const text = extractText(raw);
+      if (text.length > 0) {
+        addToIndex({
+          cid: file.cid,
+          name: file.name,
+          type: "file",
+          text,
+          size: raw.length,
+          indexedAt: Date.now(),
+        });
+        indexed++;
+      }
+    } catch (err) {
+      console.error("[search-index] rebuildIndex fetch failed:", err);
+      failed++;
+    }
+    onProgress?.(i + 1, textFiles.length);
+  }
+
+  return { indexed, failed };
+}

src/lib/search-index/extract.ts

@@ -0,0 +1,24 @@
+/* ── Search Index — Client-side full-text search voor IPFS ──
+ *
+ * Text extraction
+ */
+
+const TEXT_EXTENSIONS = new Set([
+  ".txt", ".md", ".json", ".html", ".htm",
+  ".csv", ".log", ".xml", ".yaml", ".yml",
+  ".toml", ".ini", ".cfg",
+]);
+
+export function isTextFile(name: string): boolean {
+  const ext = name.toLowerCase().slice(name.lastIndexOf("."));
+  return TEXT_EXTENSIONS.has(ext);
+}
+
+export function extractText(raw: string): string {
+  return raw
+    .replace(/<[^>]*>/g, " ")     // strip HTML tags
+    .replace(/\s+/g, " ")          // collapse whitespace
+    .replace(/[{}\[\]]/g, " ")     // strip JSON braces
+    .trim()
+    .slice(0, 2048);
+}

src/lib/search-index/index-manager.ts

@@ -0,0 +1,36 @@
+/* ── Search Index — Client-side full-text search voor IPFS ──
+ *
+ * Index management
+ */
+
+import type { IndexedEntry } from "./types";
+import { STORAGE_KEY, loadIndex, saveIndex } from "./storage";
+
+export function addToIndex(entry: IndexedEntry) {
+  const index = loadIndex();
+  // Remove oud voor deze CID
+  const filtered = index.filter((e) => e.cid !== entry.cid);
+  filtered.push(entry);
+  saveIndex(filtered);
+}
+
+export function removeFromIndex(cid: string) {
+  const index = loadIndex().filter((e) => e.cid !== cid);
+  saveIndex(index);
+}
+
+export function clearIndex() {
+  if (typeof window !== "undefined") {
+    localStorage.removeItem(STORAGE_KEY);
+  }
+}
+
+export function getIndexStats() {
+  const index = loadIndex();
+  const totalSize = index.reduce((sum, e) => sum + e.text.length, 0);
+  return {
+    entries: index.length,
+    totalChars: totalSize,
+    lastIndexed: index.length > 0 ? Math.max(...index.map((e) => e.indexedAt)) : 0,
+  };
+}

src/lib/search-index/index.ts

@@ -0,0 +1,17 @@
+/* ── Search Index — Client-side full-text search voor IPFS ──
+ *
+ * Bewaart een miniatuur search index in localStorage.
+ * Periodiek te updaten door gepinde files te crawlen en te indexeren.
+ *
+ * Beperking: alleen tekstuele content (.txt, .md, .json, .html)
+ *
+ * Barrel — re-exports all public symbols
+ */
+
+"use client";
+
+export type { IndexedEntry, SearchResult } from "./types";
+export { isTextFile, extractText } from "./extract";
+export { addToIndex, removeFromIndex, clearIndex, getIndexStats } from "./index-manager";
+export { searchIndex } from "./search";
+export { rebuildIndex } from "./crawler";

src/lib/search-index/search.ts

@@ -0,0 +1,76 @@
+/* ── Search Index — Client-side full-text search voor IPFS ──
+ *
+ * Search
+ */
+
+import type { IndexedEntry, SearchResult } from "./types";
+import { loadIndex } from "./storage";
+
+const STOP_WORDS = new Set([
+  "de", "het", "een", "van", "en", "in", "is", "te", "met", "op",
+  "voor", "aan", "dat", "die", "door", "bij", "ook", "maar", "uit",
+  "naar", "om", "al", "als", "nog", "dan", "of", "er", "niet", "dit",
+  "the", "a", "an", "and", "or", "in", "on", "at", "to", "for",
+  "of", "is", "it", "be", "by", "as", "are", "was", "were", "been",
+]);
+
+function tokenize(text: string): string[] {
+  return text
+    .toLowerCase()
+    .split(/[^a-z0-9]+/)
+    .filter((t) => t.length > 1 && !STOP_WORDS.has(t));
+}
+
+function scoreEntry(queryTokens: string[], entry: IndexedEntry): number {
+  let score = 0;
+  const nameLower = entry.name.toLowerCase();
+  const textLower = entry.text.toLowerCase();
+  const cidLower = entry.cid.toLowerCase();
+
+  for (const token of queryTokens) {
+    // Exact match in name = hoogste score
+    if (nameLower.includes(token)) {
+      score += token.length * 10;
+      if (nameLower === token) score += 20; // exact match bonus
+    }
+    // Match in text
+    if (textLower.includes(token)) {
+      score += token.length * 3;
+    }
+    // Match in CID (prefix)
+    if (cidLower.startsWith(token)) {
+      score += token.length * 8;
+    }
+    // Frequentie in text
+    const count = (textLower.match(new RegExp(token.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "g")) || []).length;
+    score += count;
+  }
+
+  return score;
+}
+
+export function searchIndex(query: string, maxResults = 20): SearchResult[] {
+  if (!query || query.trim().length < 2) return [];
+
+  const queryTokens = tokenize(query);
+  if (queryTokens.length === 0) return [];
+
+  const index = loadIndex();
+  const scored: SearchResult[] = [];
+
+  for (const entry of index) {
+    const score = scoreEntry(queryTokens, entry);
+    if (score > 0) {
+      // Bepaal het beste match veld
+      const nameLower = entry.name.toLowerCase();
+      const cidLower = entry.cid.toLowerCase();
+      let matchField: "name" | "text" | "cid" = "text";
+      if (queryTokens.some((t) => nameLower.includes(t))) matchField = "name";
+      else if (queryTokens.some((t) => cidLower.startsWith(t))) matchField = "cid";
+
+      scored.push({ entry, score, matchField });
+    }
+  }
+
+  return scored.sort((a, b) => b.score - a.score).slice(0, maxResults);
+}