Fix TZ Fabric frontend UI regressions and search/image analysis polish

frontend/.env.sample

@@ -1,4 +1,5 @@
 VITE_API_URL="http://localhost:8002"
 VITE_API_PREFIX="/api/v1"
-GROQ_API_KEY="your_groq_key_here"
 VITE_AWS_PUBLIC_URL="https://assets.threadzip.com"
+VITE_ANALYTICS_ENABLED="false"
+VITE_GA_MEASUREMENT_ID=""

frontend/README.md

@@ -1,12 +1,36 @@
-# TZ-Fabric
+# TZ-Fabric frontend
 
-![Node Version](https://badgen.net/badge/Node/20+/blue)
+## Requirements
+
+- Node.js `^20.19.0` or `>=22.12.0`
+- npm 10 or newer
+
+## Development
 
 ```sh
-npm install
+npm ci
 npm run dev
 ```
 
-Note: create `.env` file and put content from `.env.sample` file
+Copy `.env.sample` to `.env` and configure the documented `VITE_` variables.
+The development proxy target can be changed with `VITE_API_PROXY_TARGET`.
+
+## Quality checks
+
+```sh
+npm run lint
+npm test
+npm run build
+```
+
+## Production preview process
+
+Build first, then serve the generated `dist` directory on port 5173:
+
+```sh
+npm run build
+npm start
+```
 
-NOTE: the `VITE_API_URL` and it should be same as _vite.config.ts_
+`npm start` is intended for the repository's existing PM2 deployment workflow.
+A dedicated static web server or CDN is preferable for a larger production setup.

frontend/biome.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/2.3.10/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.5.4/schema.json",
   "vcs": {
     "enabled": false,
     "clientKind": "git",
@@ -24,8 +24,21 @@
   "linter": {
     "enabled": true,
     "rules": {
-      "recommended": true,
-      "a11y": "off",
+      "preset": "recommended",
+      "a11y": {
+        "recommended": true,
+        "useButtonType": "off",
+        "noSvgWithoutTitle": "off",
+        "useSemanticElements": "off",
+        "useKeyWithClickEvents": "off",
+        "noStaticElementInteractions": "off",
+        "useMediaCaption": "off",
+        "useFocusableInteractive": "off",
+        "noLabelWithoutControl": "off",
+        "noRedundantAlt": "off",
+        "noNoninteractiveElementToInteractiveRole": "off",
+        "noInteractiveElementToNoninteractiveRole": "off"
+      },
       "suspicious": {
         "noArrayIndexKey": "off",
         "noExplicitAny": "warn"
@@ -52,5 +65,22 @@
         "organizeImports": "on"
       }
     }
-  }
-}
+  },
+  "overrides": [
+    {
+      "includes": [
+        "src/**/*.css"
+      ],
+      "linter": {
+        "rules": {
+          "style": {
+            "noDescendingSpecificity": "off"
+          },
+          "suspicious": {
+            "noDuplicateProperties": "off"
+          }
+        }
+      }
+    }
+  ]
+}

frontend/index.html

@@ -5,6 +5,7 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="referrer" content="strict-origin-when-cross-origin" />
   <title>Fabric AI</title>
 
   <link rel="canonical" href="https://pro.threadzip.com" />
@@ -69,11 +70,158 @@
   <!-- <link rel="alternate" type="application/rss+xml" title="fabric AI" href="/rss.xml" /> -->
 
   <meta name="robots" content="index,follow" />
+
+  <style>
+    #app-boot-fallback {
+      position: fixed;
+      box-sizing: border-box;
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    }
+
+    #app-boot-fallback[hidden],
+    #app-boot-viewport-note[hidden] {
+      display: none;
+    }
+
+    #app-boot-fallback {
+      inset: 0;
+      z-index: 2147483646;
+      display: grid;
+      place-items: center;
+      padding: 24px;
+      overflow: auto;
+      background: #0e1322;
+      color: #f8fafc;
+    }
+
+    #app-boot-fallback .boot-fallback__card {
+      width: min(560px, 100%);
+      padding: clamp(22px, 5vw, 40px);
+      border: 1px solid rgba(248, 113, 113, 0.58);
+      border-radius: 22px;
+      background: linear-gradient(145deg, #dc2626, #991b1b);
+      box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
+      text-align: center;
+    }
+
+    #app-boot-fallback h1 {
+      margin: 0 0 12px;
+      font-size: clamp(24px, 6vw, 36px);
+      line-height: 1.1;
+    }
+
+    #app-boot-fallback p {
+      margin: 0;
+      line-height: 1.55;
+    }
+
+    #app-boot-fallback .boot-fallback__steps {
+      margin: 18px auto 0;
+      padding-left: 22px;
+      max-width: 440px;
+      text-align: left;
+      line-height: 1.55;
+    }
+
+    #app-boot-fallback button {
+      margin-top: 22px;
+      min-height: 44px;
+      padding: 0 22px;
+      border: 2px solid rgba(255, 255, 255, 0.9);
+      border-radius: 999px;
+      background: transparent;
+      color: #ffffff;
+      font: inherit;
+      font-weight: 800;
+      cursor: pointer;
+    }
+
+    #app-boot-fallback .boot-fallback__viewport-note {
+      margin-top: 14px;
+      padding: 10px 12px;
+      border: 1px solid rgba(255, 255, 255, 0.34);
+      border-radius: 12px;
+      background: rgba(15, 23, 42, 0.28);
+      font-size: 13px;
+      line-height: 1.45;
+    }
+
+    @media (max-width: 360px), (max-height: 420px) {
+      #app-boot-fallback {
+        place-items: start center;
+        padding: 10px;
+      }
+
+      #app-boot-fallback .boot-fallback__card {
+        padding: 18px 14px;
+        border-radius: 16px;
+      }
+
+      #app-boot-fallback h1 {
+        font-size: 22px;
+      }
+
+      #app-boot-fallback .boot-fallback__steps {
+        margin-top: 12px;
+        padding-left: 18px;
+        font-size: 13px;
+      }
+
+      #app-boot-fallback button {
+        width: 100%;
+        margin-top: 14px;
+      }
+    }
+  </style>
 </head>
 
 <body>
   <div id="root"></div>
-  <script type="module" src="/src/main.tsx"></script>
+
+  <section id="app-boot-fallback" role="alert" aria-live="assertive" hidden>
+    <div class="boot-fallback__card">
+      <h1>Application scripts did not start</h1>
+      <p>
+        The JavaScript entry file did not finish loading. Restore the network or
+        disable any DevTools Request Blocking rule, then reload the page.
+      </p>
+      <ol class="boot-fallback__steps">
+        <li>Open DevTools and check Network request blocking.</li>
+        <li>Remove rules that block main.tsx, scripts, icons, or route files.</li>
+        <li>Reload after the requests are allowed again.</li>
+      </ol>
+      <p id="app-boot-viewport-note" class="boot-fallback__viewport-note" hidden></p>
+      <button id="app-boot-reload" type="button">Reload page</button>
+    </div>
+  </section>
+
+  <script>
+    (() => {
+      const fallback = document.getElementById("app-boot-fallback");
+      const viewportNote = document.getElementById("app-boot-viewport-note");
+      const reloadButton = document.getElementById("app-boot-reload");
+
+      const showFallback = () => {
+        if (document.documentElement.dataset.appBooted === "true") return;
+
+        if (viewportNote && window.innerHeight < 320) {
+          viewportNote.textContent = `Current viewport: ${window.innerWidth} × ${window.innerHeight}. Increase the emulated height for meaningful UI testing.`;
+          viewportNote.hidden = false;
+        }
+
+        if (fallback) fallback.hidden = false;
+      };
+
+      window.__showAppBootFallback = showFallback;
+      reloadButton?.addEventListener("click", () => window.location.reload());
+      window.setTimeout(showFallback, 10000);
+    })();
+  </script>
+  <script
+    type="module"
+    src="/src/main.tsx"
+    onerror="window.__showAppBootFallback?.()"
+  ></script>
 </body>
 
-</html>
+</html>