hotfix: stabilize v0.0.8 UI and performance

Author: 248Tech

CHANGELOG.md

@@ -11,7 +11,7 @@ All notable changes are documented here. The project uses [Semantic Versioning](
 - **0.0.5** - In-app updater and extension fallback import release
 - **0.0.6** - UI foundation and layout redesign release
 - **0.0.7** - Projects-first workflow and operations tooling release
-- **0.0.8** - Navigation, admin backup, and UX polish release
+- **0.0.8** - Navigation, admin backup, UX polish, and hotfix stabilization release
 
 ---
 
@@ -22,18 +22,25 @@ All notable changes are documented here. The project uses [Semantic Versioning](
 - **Directory workspace** - Added a dedicated Directory page that groups Leads and Vendors under one navigation entry.
 - **Dedicated settings subpages** - Added Inventory Settings and Message Settings pages with persisted settings scaffolding for inventory display and outbound messaging preferences.
 - **Global crash fallback** - Added a top-level React `ErrorBoundary` with a user-facing reload recovery screen.
+- **Verbose error diagnostics toggle** - Added the `verbose_errors` setting so operators can temporarily expose detailed server and crash-screen error messages while debugging.
 
 ### Changed
 - **Sidebar information architecture** - Reworked navigation into grouped sections with collapsible mode, hover flyouts, unread/pending badges, and live team presence context.
 - **Inventory and leads loading/search UX** - Replaced spinner-only states with skeleton loaders, added contextual empty-search messages with reset actions, and lazy-loaded inventory thumbnails.
 - **Quote builder polish** - Added add-to-project flash feedback and refined line-item spacing/thumbnail treatment.
 - **Theme consistency pass** - Replaced remaining hardcoded accent/focus colors with theme tokens, fixed the Files page elevated-surface token mismatch, and added a max-width constraint to the main layout.
 - **Dashboard polish** - Updated KPI accent styling to use theme variables and improved loading presentation during data fetches.
+- **Route-level bundle loading** - Converted heavy operator and public screens to lazy-loaded routes so the initial client payload is smaller and secondary pages only load when visited.
+- **Quote detail editing safety** - Quote detail now tracks dirty form state, blocks in-app navigation when edits are unsaved, and warns on browser reload/close.
+- **Messages mobile layout** - The Messages workspace now swaps to a focused single-pane detail flow on smaller screens instead of forcing the desktop split-pane layout.
 
 ### Fixed
 - **Public quote browser tab title** - Public quote pages now set `document.title` from the active quote name.
 - **Toast accessibility** - Toast notifications now announce through `role="status"` and `aria-live`.
 - **Inventory card action labels** - Icon-only item card actions now expose accessible names for assistive technologies.
+- **Spreadsheet import title validation** - Sheets import now rejects numeric-only item titles, preventing Excel date serials and bare numeric IDs from being imported as inventory names.
+- **Item API metadata parity** - Item create/update/bulk upsert flows now preserve `contract_description` consistently while also rejecting numeric-only titles.
+- **Quote creation failure handling** - Quote creation now returns a structured API error instead of bubbling an unhandled server failure.
 
 ---
 

README.md

@@ -23,13 +23,16 @@ BadShuffle is a self-hosted event rental software platform for project-centric q
 
 ## What’s New In v0.0.8
 
-`v0.0.8` is the navigation, admin continuity, and UX polish release. It reorganizes the operator experience around workflow-based navigation, adds in-app database backup/restore, introduces dedicated directory/settings surfaces, and tightens resilience through better loading, accessibility, and error handling.
+`v0.0.8` is the navigation, admin continuity, UX polish, and Windows host packaging release, now followed by a hotfix pass that focuses on performance, mobile behavior, editing safety, and import resilience. It reorganizes the operator experience around workflow-based navigation, adds in-app database backup/restore, ships packaged Windows `.exe` artifacts for self-hosted deployments, and tightens daily operator workflows with better loading, error handling, and guardrails.
 
 - **Navigation architecture refresh** — The sidebar is now grouped around workflows (Projects, Inventory, Messages, Directory, Settings), supports collapse + flyout behavior, and surfaces unread-message plus pending-admin counts alongside live team presence.
 - **Admin continuity tooling** — Admin now includes SQLite backup export/import so operators can migrate or restore data without leaving the app.
 - **New workspace surfaces** — Added a Directory hub for Leads/Vendors plus dedicated Inventory Settings and Message Settings screens for operational preferences.
-- **UX resilience pass** — Added skeleton loading states, contextual empty-search feedback, a global React error boundary, toast screen-reader announcements, and lazy-loaded inventory imagery.
-- **Theme and builder polish** — Replaced more hardcoded UI colors with theme tokens, fixed remaining surface-token mismatches, tightened quote-builder item presentation, and constrained the main content width for better wide-screen balance.
+- **Windows host packaging** — The project is packaged for Windows hosts with separate server, client, and updater `.exe` artifacts so operators can run BadShuffle without a manual Node deployment.
+- **Performance hotfixes** — Heavy operator and public routes now lazy-load on first navigation, reducing the initial client bundle cost for day-to-day use.
+- **Workflow safety hotfixes** — Quote detail editing now warns before reload or navigation when there are unsaved changes, making large project edits harder to lose accidentally.
+- **Responsive messaging polish** — Messages now behaves as a focused single-pane experience on smaller screens, with cleaner thread/detail transitions during mobile use.
+- **Debugging and import hardening** — Settings can enable verbose error output for debugging, quote creation failures now return cleaner API errors, and sheet/item imports reject numeric-only titles that commonly come from spreadsheet date serials or malformed source data.
 
 ## Core Features
 
@@ -51,9 +54,9 @@ BadShuffle is a self-hosted event rental software platform for project-centric q
 
 ## Near-Term Roadmap
 
-- **Cross-theme QA + responsive pass** — Finish theme verification and close remaining mobile layout gaps across quote editing, messages, and modal-heavy views.
-- **Performance follow-up** — Lazy-load heavy pages and finish image lazy loading on the remaining public/files surfaces.
-- **Workflow safety** — Add unsaved-changes warnings plus better inline confirmation patterns for destructive actions.
+- **Cross-theme QA + responsive pass** — Finish theme verification and close the remaining mobile layout gaps across quote editing, messages, and modal-heavy views.
+- **Performance follow-up** — Finish image lazy loading on the remaining public/files surfaces and review post-split route chunk sizes.
+- **Workflow safety** — Extend unsaved-change protection to other high-risk forms and replace destructive browser confirms with better inline confirmation patterns.
 - **Operations depth** — Send preview, pull sheets, and richer warehouse workflows.
 
 More context lives in [ai/KNOWN_GAPS.md](ai/KNOWN_GAPS.md) and [ai/TODO.md](ai/TODO.md).

client/src/App.jsx

@@ -1,35 +1,48 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState, useRef, lazy, Suspense } from 'react';
 import { BrowserRouter, Routes, Route, Navigate, useNavigate, useLocation } from 'react-router-dom';
 import Layout from './components/Layout.jsx';
-import InventoryPage from './pages/InventoryPage.jsx';
-import ImportPage from './pages/ImportPage.jsx';
-import QuotePage from './pages/QuotePage.jsx';
-import QuoteDetailPage from './pages/QuoteDetailPage.jsx';
-import StatsPage from './pages/StatsPage.jsx';
-import ExtensionPage from './pages/ExtensionPage.jsx';
-import ItemDetailPage from './pages/ItemDetailPage.jsx';
-import SettingsPage from './pages/SettingsPage.jsx';
-import LeadsPage from './pages/LeadsPage.jsx';
-import AdminPage from './pages/AdminPage.jsx';
-import LoginPage from './pages/LoginPage.jsx';
-import SetupPage from './pages/SetupPage.jsx';
-import ForgotPage from './pages/ForgotPage.jsx';
-import ResetPage from './pages/ResetPage.jsx';
-import PublicQuotePage from './pages/PublicQuotePage.jsx';
-import PublicCatalogPage from './pages/PublicCatalogPage.jsx';
-import PublicItemPage from './pages/PublicItemPage.jsx';
-import TemplatesPage from './pages/TemplatesPage.jsx';
-import DashboardPage from './pages/DashboardPage.jsx';
-import FilesPage from './pages/FilesPage.jsx';
-import MessagesPage from './pages/MessagesPage.jsx';
-import BillingPage from './pages/BillingPage.jsx';
-import VendorsPage from './pages/VendorsPage.jsx';
-import DirectoryPage from './pages/DirectoryPage.jsx';
-import InventorySettingsPage from './pages/InventorySettingsPage.jsx';
-import MessageSettingsPage from './pages/MessageSettingsPage.jsx';
 import { ToastProvider } from './components/Toast.jsx';
 import { api, getToken, setToken, clearToken } from './api';
 
+// ── Auth-path pages — eager (shown before JS bundle is fully parsed) ──────────
+import LoginPage  from './pages/LoginPage.jsx';
+import SetupPage  from './pages/SetupPage.jsx';
+import ForgotPage from './pages/ForgotPage.jsx';
+import ResetPage  from './pages/ResetPage.jsx';
+
+// ── App pages — lazy (only parsed when first navigated to) ────────────────────
+const DashboardPage          = lazy(() => import('./pages/DashboardPage.jsx'));
+const InventoryPage          = lazy(() => import('./pages/InventoryPage.jsx'));
+const ItemDetailPage         = lazy(() => import('./pages/ItemDetailPage.jsx'));
+const ImportPage             = lazy(() => import('./pages/ImportPage.jsx'));
+const QuotePage              = lazy(() => import('./pages/QuotePage.jsx'));
+const QuoteDetailPage        = lazy(() => import('./pages/QuoteDetailPage.jsx'));
+const BillingPage            = lazy(() => import('./pages/BillingPage.jsx'));
+const StatsPage              = lazy(() => import('./pages/StatsPage.jsx'));
+const ExtensionPage          = lazy(() => import('./pages/ExtensionPage.jsx'));
+const LeadsPage              = lazy(() => import('./pages/LeadsPage.jsx'));
+const FilesPage              = lazy(() => import('./pages/FilesPage.jsx'));
+const MessagesPage           = lazy(() => import('./pages/MessagesPage.jsx'));
+const AdminPage              = lazy(() => import('./pages/AdminPage.jsx'));
+const TemplatesPage          = lazy(() => import('./pages/TemplatesPage.jsx'));
+const VendorsPage            = lazy(() => import('./pages/VendorsPage.jsx'));
+const SettingsPage           = lazy(() => import('./pages/SettingsPage.jsx'));
+const DirectoryPage          = lazy(() => import('./pages/DirectoryPage.jsx'));
+const InventorySettingsPage  = lazy(() => import('./pages/InventorySettingsPage.jsx'));
+const MessageSettingsPage    = lazy(() => import('./pages/MessageSettingsPage.jsx'));
+// Public pages — lazy (most users never visit these from inside the app)
+const PublicQuotePage        = lazy(() => import('./pages/PublicQuotePage.jsx'));
+const PublicCatalogPage      = lazy(() => import('./pages/PublicCatalogPage.jsx'));
+const PublicItemPage         = lazy(() => import('./pages/PublicItemPage.jsx'));
+
+function PageSpinner() {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: 200 }}>
+      <div className="spinner" />
+    </div>
+  );
+}
+
 function ProtectedRoute({ children }) {
   if (!getToken()) return <Navigate to="/login" replace />;
   return children;
@@ -45,14 +58,11 @@ function AuthGate({ children, setRole }) {
     let cancelled = false;
 
     const doAuth = async () => {
-      // Dev mode: auto-login with hardcoded admin account, no setup/login required
       if (import.meta.env.DEV && !getToken()) {
         try {
           const data = await api.auth.devLogin();
           if (data.token) setToken(data.token);
-        } catch (e) {
-          // server not ready yet or non-dev build; fall through to normal flow
-        }
+        } catch (e) {}
       }
 
       let setup = true;
@@ -85,7 +95,6 @@ function AuthGate({ children, setRole }) {
         if (cancelled) return;
         clearToken();
         setRole('');
-        // If already at /login, try dev auto-login immediately (stale token case after DB clear)
         if (import.meta.env.DEV && location.pathname === '/login') {
           try {
             const data = await api.auth.devLogin();
@@ -94,7 +103,7 @@ function AuthGate({ children, setRole }) {
               const me = await api.auth.me();
               if (!cancelled) { setRole(me.role); setState('authed'); }
             }
-          } catch { /* fall through to show login page */ }
+          } catch {}
           if (!cancelled) setState('unauthed');
           return;
         }
@@ -110,7 +119,6 @@ function AuthGate({ children, setRole }) {
     return () => { cancelled = true; };
   }, [navigate, setRole, location.pathname]);
 
-  // When pathname changes to /login (e.g. after logout), allow redirect again in future
   useEffect(() => {
     if (location.pathname === '/login') hasRedirectedToLogin.current = false;
   }, [location.pathname]);
@@ -125,47 +133,49 @@ export default function App() {
   return (
     <ToastProvider>
       <BrowserRouter>
-        <Routes>
-          {/* Public routes — no auth required */}
-          <Route path="/quote/public/:token" element={<PublicQuotePage />} />
-          <Route path="/catalog" element={<PublicCatalogPage />} />
-          <Route path="/catalog/item/:id" element={<PublicItemPage />} />
-
-          {/* App routes (auth required except login/setup) */}
-          <Route path="*" element={
-            <AuthGate setRole={setRole}>
-              <Routes>
-                <Route path="/login" element={<LoginPage />} />
-                <Route path="/setup" element={<SetupPage />} />
-                <Route path="/forgot" element={<ForgotPage />} />
-                <Route path="/reset" element={<ResetPage />} />
-
-                <Route path="/" element={<ProtectedRoute><Layout role={role} /></ProtectedRoute>}>
-                  <Route index element={<Navigate to="/dashboard" replace />} />
-                  <Route path="dashboard" element={<DashboardPage />} />
-                  <Route path="inventory" element={<InventoryPage />} />
-                  <Route path="inventory/:id" element={<ItemDetailPage />} />
-                  <Route path="import" element={<ImportPage />} />
-                  <Route path="quotes" element={<QuotePage />} />
-                  <Route path="quotes/:id" element={<QuoteDetailPage />} />
-                  <Route path="billing" element={<BillingPage />} />
-                  <Route path="stats" element={<StatsPage />} />
-                  <Route path="extension" element={<ExtensionPage />} />
-                  <Route path="leads" element={<LeadsPage />} />
-                  <Route path="files" element={<FilesPage />} />
-                  <Route path="messages" element={<MessagesPage />} />
-                  <Route path="admin" element={<AdminPage />} />
-                  <Route path="templates" element={<TemplatesPage />} />
-                  <Route path="vendors" element={<VendorsPage />} />
-                  <Route path="settings" element={<SettingsPage />} />
-                  <Route path="directory" element={<DirectoryPage />} />
-                  <Route path="inventory-settings" element={<InventorySettingsPage />} />
-                  <Route path="message-settings" element={<MessageSettingsPage />} />
-                </Route>
-              </Routes>
-            </AuthGate>
-          } />
-        </Routes>
+        <Suspense fallback={<PageSpinner />}>
+          <Routes>
+            {/* Public routes */}
+            <Route path="/quote/public/:token" element={<PublicQuotePage />} />
+            <Route path="/catalog"             element={<PublicCatalogPage />} />
+            <Route path="/catalog/item/:id"    element={<PublicItemPage />} />
+
+            {/* App routes */}
+            <Route path="*" element={
+              <AuthGate setRole={setRole}>
+                <Routes>
+                  <Route path="/login"  element={<LoginPage />} />
+                  <Route path="/setup"  element={<SetupPage />} />
+                  <Route path="/forgot" element={<ForgotPage />} />
+                  <Route path="/reset"  element={<ResetPage />} />
+
+                  <Route path="/" element={<ProtectedRoute><Layout role={role} /></ProtectedRoute>}>
+                    <Route index element={<Navigate to="/dashboard" replace />} />
+                    <Route path="dashboard"          element={<DashboardPage />} />
+                    <Route path="inventory"          element={<InventoryPage />} />
+                    <Route path="inventory/:id"      element={<ItemDetailPage />} />
+                    <Route path="import"             element={<ImportPage />} />
+                    <Route path="quotes"             element={<QuotePage />} />
+                    <Route path="quotes/:id"         element={<QuoteDetailPage />} />
+                    <Route path="billing"            element={<BillingPage />} />
+                    <Route path="stats"              element={<StatsPage />} />
+                    <Route path="extension"          element={<ExtensionPage />} />
+                    <Route path="leads"              element={<LeadsPage />} />
+                    <Route path="files"              element={<FilesPage />} />
+                    <Route path="messages"           element={<MessagesPage />} />
+                    <Route path="admin"              element={<AdminPage />} />
+                    <Route path="templates"          element={<TemplatesPage />} />
+                    <Route path="vendors"            element={<VendorsPage />} />
+                    <Route path="settings"           element={<SettingsPage />} />
+                    <Route path="directory"          element={<DirectoryPage />} />
+                    <Route path="inventory-settings" element={<InventorySettingsPage />} />
+                    <Route path="message-settings"   element={<MessageSettingsPage />} />
+                  </Route>
+                </Routes>
+              </AuthGate>
+            } />
+          </Routes>
+        </Suspense>
       </BrowserRouter>
     </ToastProvider>
   );

client/src/components/AISuggestModal.module.css

@@ -6,6 +6,7 @@
   align-items: center;
   justify-content: center;
   z-index: 900;
+  padding: 16px;
 }
 
 .modal {