Spaces:

DataEyond
/

E2E-Frontend-Data-Eyond

Sleeping

harryagasi commited on Jul 1

Commit

0b6365f

1 Parent(s): 919f480

feat: polish workspace navigation and PWA branding

- add PWA manifest, service worker, and install icons
- improve mobile navigation and report panel behavior
- update login and sidebar branding to use public logo
- remove admin diagnostics from home dashboard
- rename package scope to @btech /dataeyond

Files changed (19) hide show

.gitattributes +1 -0
index.html +21 -14
package-lock.json +3 -3
package.json +2 -2
public/logo.png +0 -0
public/manifest.webmanifest +26 -0
public/pwa-icon-192.png +0 -0
public/pwa-icon-512.png +0 -0
public/sw.js +51 -0
specs/001-unified-analysis-chat/quickstart.md +3 -5
src/app/components/KnowledgeManagement.tsx +24 -13
src/app/components/Login.tsx +9 -4
src/app/components/analysis/AnalysisShell.tsx +89 -9
src/app/components/analysis/AppNavigation.tsx +2 -2
src/app/components/analysis/BackendDiagnostics.tsx +0 -127
src/app/components/analysis/HomeDashboard.tsx +1 -5
src/assets/logo.png +0 -0
src/main.tsx +12 -5
src/services/agenticApi.ts +0 -53

.gitattributes CHANGED Viewed

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text

 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+public/logo.png filter=lfs diff=lfs merge=lfs -text

index.html CHANGED Viewed

@@ -1,16 +1,23 @@
-  <!DOCTYPE html>
-  <html lang="en">
-    <head>
-      <meta charset="UTF-8" />
-      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      <link rel="icon" type="image/png" href="/logo.png" />
-      <title>Chatbot application</title>
-    </head>
-    <body>
-      <div id="root"></div>
-      <script type="module" src="/src/main.tsx"></script>
-    </body>
-  </html>

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <meta name="description" content="Data Eyond workspace for knowledge setup, AI analysis, and report generation." />
+    <meta name="theme-color" content="#0f172a" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta name="apple-mobile-web-app-title" content="Data Eyond" />
+    <link rel="manifest" href="/manifest.webmanifest" />
+    <link rel="icon" href="/logo.png" />
+    <link rel="apple-touch-icon" href="/pwa-icon-192.png" />
+    <title>Data Eyond</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package-lock.json CHANGED Viewed

@@ -1,11 +1,11 @@
 {
-  "name": "@figma/my-make-file",
   "version": "0.0.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "@figma/my-make-file",
       "version": "0.0.1",
       "dependencies": {
         "@emotion/react": "11.14.0",
@@ -7301,4 +7301,4 @@
       }
     }
   }
-}

 {
+  "name": "@btech/dataeyond",
   "version": "0.0.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
+      "name": "@btech/dataeyond",
       "version": "0.0.1",
       "dependencies": {
         "@emotion/react": "11.14.0",
       }
     }
   }
+}

package.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
-  "name": "@figma/my-make-file",
   "private": true,
   "version": "0.0.1",
   "type": "module",
@@ -93,4 +93,4 @@
     },
     "onlyBuiltDependencies": ["@tailwindcss/oxide", "esbuild"]
   }
-}

 {
+  "name": "@btech/dataeyond",
   "private": true,
   "version": "0.0.1",
   "type": "module",
     },
     "onlyBuiltDependencies": ["@tailwindcss/oxide", "esbuild"]
   }
+}

public/logo.png CHANGED Viewed

Git LFS Details

SHA256: f00b18f668b1a782791ade3230c889dc091269ad7c9a6a203a84c2ac14f49880
Pointer size: 131 Bytes
Size of remote file: 248 kB

public/manifest.webmanifest ADDED Viewed

	@@ -0,0 +1,26 @@

+{
+  "name": "Data Eyond Analysis Workspace",
+  "short_name": "Data Eyond",
+  "description": "Data Eyond workspace for knowledge setup, AI analysis, and report generation.",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "orientation": "portrait-primary",
+  "background_color": "#f8fafc",
+  "theme_color": "#0f172a",
+  "categories": ["business", "productivity", "utilities"],
+  "icons": [
+    {
+      "src": "/pwa-icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/pwa-icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ]
+}

public/pwa-icon-192.png ADDED Viewed

public/pwa-icon-512.png ADDED Viewed

public/sw.js ADDED Viewed

	@@ -0,0 +1,51 @@

+const CACHE_NAME = "dataeyond-pwa-v1";
+const APP_SHELL = ["/", "/index.html", "/manifest.webmanifest", "/pwa-icon-192.png", "/pwa-icon-512.png"];
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => cache.addAll(APP_SHELL)).then(() => self.skipWaiting())
+  );
+});
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    caches
+      .keys()
+      .then((keys) => Promise.all(keys.filter((key) => key !== CACHE_NAME).map((key) => caches.delete(key))))
+      .then(() => self.clients.claim())
+  );
+});
+self.addEventListener("fetch", (event) => {
+  const request = event.request;
+  if (request.method !== "GET") return;
+  const url = new URL(request.url);
+  if (url.origin !== self.location.origin) return;
+  if (request.mode === "navigate") {
+    event.respondWith(
+      fetch(request)
+        .then((response) => {
+          const copy = response.clone();
+          caches.open(CACHE_NAME).then((cache) => cache.put("/index.html", copy));
+          return response;
+        })
+        .catch(() => caches.match("/index.html"))
+    );
+    return;
+  }
+  event.respondWith(
+    caches.match(request).then((cached) => {
+      if (cached) return cached;
+      return fetch(request).then((response) => {
+        if (response.ok) {
+          const copy = response.clone();
+          caches.open(CACHE_NAME).then((cache) => cache.put(request, copy));
+        }
+        return response;
+      });
+    })
+  );
+});

specs/001-unified-analysis-chat/quickstart.md CHANGED Viewed

@@ -108,8 +108,6 @@ npm run build
 - 2026-06-30 service smoke check: Python service at `http://localhost:7860` is reachable, but its OpenAPI exposes legacy `/api/v1/chat/stream` and room endpoints, not the required `/api/v2/chat/stream`, `/api/v1/tools/help`, `/api/v1/tools/report`, or `/api/v1/observability`; set `VITE_AGENTIC_API_BASE_URL` to the agentic service that matches `API_CONTRACT_BE_PYTHON.md` before validating chat/help/report/traceability.- 2026-06-30 credential validation: Login and refresh passed with the provided test account; Golang returned `data.user`, `access_token`, `refresh_token`, `expires_in`, and `refresh_expires_in` as expected.
 - 2026-06-30 knowledge validation: Golang document type listing, database type listing, protected document listing, document upload, document process, and user catalog rebuild were exercised successfully. A smoke `.txt` document reached `completed` status.
 - 2026-06-30 analysis validation blocker: `POST /api/v1/analyses` failed with `400` and message `pq: unsupported jsonb version number 91 (XX000)` for a contract-shaped raw JSON payload containing `analysis_title`, `objective`, `business_questions`, and `data_bind`. New Analysis, message persistence, analysis history, chat, Help, report, and traceability validation remain blocked until the Golang analysis create endpoint is fixed.
-- 2026-06-30 frontend hardening: Home now includes backend diagnostics for Golang auth/protected endpoints and Python agentic OpenAPI contract paths; New Analysis now translates the JSONB backend failure into an actionable UI error.- Manual backend flow validation remains pending until the Golang and Python services are running with real credentials and data sources.

 - 2026-06-30 service smoke check: Python service at `http://localhost:7860` is reachable, but its OpenAPI exposes legacy `/api/v1/chat/stream` and room endpoints, not the required `/api/v2/chat/stream`, `/api/v1/tools/help`, `/api/v1/tools/report`, or `/api/v1/observability`; set `VITE_AGENTIC_API_BASE_URL` to the agentic service that matches `API_CONTRACT_BE_PYTHON.md` before validating chat/help/report/traceability.- 2026-06-30 credential validation: Login and refresh passed with the provided test account; Golang returned `data.user`, `access_token`, `refresh_token`, `expires_in`, and `refresh_expires_in` as expected.
 - 2026-06-30 knowledge validation: Golang document type listing, database type listing, protected document listing, document upload, document process, and user catalog rebuild were exercised successfully. A smoke `.txt` document reached `completed` status.
 - 2026-06-30 analysis validation blocker: `POST /api/v1/analyses` failed with `400` and message `pq: unsupported jsonb version number 91 (XX000)` for a contract-shaped raw JSON payload containing `analysis_title`, `objective`, `business_questions`, and `data_bind`. New Analysis, message persistence, analysis history, chat, Help, report, and traceability validation remain blocked until the Golang analysis create endpoint is fixed.
+- 2026-06-30 frontend hardening: New Analysis now translates the JSONB backend failure into an actionable UI error.
+- 2026-06-30 UX update: backend diagnostics were removed from Home because they are admin-facing and should not appear in the user workspace.
+- Manual backend flow validation remains pending until the Golang and Python services are running with real credentials and data sources.

src/app/components/KnowledgeManagement.tsx CHANGED Viewed

@@ -350,37 +350,48 @@ export default function KnowledgeManagement({
   const renderStatus = (doc: ApiDocument) => {
     if (doc.status === "processed" || doc.status === "completed") {
       return (
-        <div className="flex items-center gap-1.5 text-green-600">
-          <Check className="w-3.5 h-3.5" />
-          <span className="text-xs font-medium">Processed</span>
         </div>
       );
     }
     if (doc.status === "processing" || processing === doc.id) {
       return (
-        <div className="flex items-center gap-1.5 text-blue-600">
-          <Loader2 className="w-3.5 h-3.5 animate-spin" />
-          <span className="text-xs">Processing...</span>
         </div>
       );
     }
     return (
       <button
         onClick={() => {
           const userId = getUserId();
           if (userId) processDocumentById(userId, doc.id);
         }}
         disabled={processing === doc.id}
-        className="flex items-center gap-1.5 bg-gradient-to-r from-[#00C853] to-[#00A843] text-white px-3 py-1.5 rounded-lg hover:from-[#00A843] hover:to-[#00962B] transition disabled:opacity-50 disabled:cursor-not-allowed text-xs"
       >
-        <Database className="w-3.5 h-3.5" />
-        {doc.status === "failed" ? "Retry Process" : "Process to Knowledge"}
       </button>
     );
   };
   const loadCatalog = async (uid: string, rebuild = false) => {
     setLoadingCatalog(true);
     try {
@@ -603,7 +614,7 @@ export default function KnowledgeManagement({
                           <button
                             onClick={() => handleDeleteClient(client.id)}
                             disabled={deletingClient === client.id}
-                            className="opacity-0 group-hover:opacity-100 text-slate-300 hover:text-red-500 transition disabled:opacity-30"
                             title="Delete connection"
                           >
                             {deletingClient === client.id ? (
@@ -668,12 +679,12 @@ export default function KnowledgeManagement({
                             {formatFileSize(doc.file_size)} · {formatDate(doc.created_at)}
                           </p>
                         </div>
-                        <div className="flex items-center gap-2 flex-shrink-0">
                           {renderStatus(doc)}
                           <button
                             onClick={() => handleDeleteDocument(doc.id)}
                             disabled={deleting === doc.id}
-                            className="opacity-0 group-hover:opacity-100 text-slate-300 hover:text-red-500 transition disabled:opacity-30"
                             title="Delete"
                           >
                             {deleting === doc.id ? (

   const renderStatus = (doc: ApiDocument) => {
     if (doc.status === "processed" || doc.status === "completed") {
       return (
+        <div
+          title="Document is processed and ready for analysis"
+          aria-label="Document processed"
+          className="flex h-8 w-8 items-center justify-center rounded-lg bg-green-50 text-green-600 sm:w-auto sm:gap-1.5 sm:px-2"
+        >
+          <Check className="h-3.5 w-3.5" />
+          <span className="hidden text-xs font-medium sm:inline">Processed</span>
         </div>
       );
     }
     if (doc.status === "processing" || processing === doc.id) {
       return (
+        <div
+          title="Document is being processed"
+          aria-label="Document processing"
+          className="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-50 text-blue-600 sm:w-auto sm:gap-1.5 sm:px-2"
+        >
+          <Loader2 className="h-3.5 w-3.5 animate-spin" />
+          <span className="hidden text-xs sm:inline">Processing</span>
         </div>
       );
     }
+    const isRetry = doc.status === "failed";
     return (
       <button
+        type="button"
+        title={isRetry ? "Retry document processing" : "Process document to knowledge"}
+        aria-label={isRetry ? "Retry document processing" : "Process document to knowledge"}
         onClick={() => {
           const userId = getUserId();
           if (userId) processDocumentById(userId, doc.id);
         }}
         disabled={processing === doc.id}
+        className="flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-600 text-white transition hover:bg-emerald-700 disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto sm:gap-1.5 sm:px-2.5"
       >
+        <Database className="h-3.5 w-3.5" />
+        <span className="hidden text-xs font-medium sm:inline">{isRetry ? "Retry" : "Process"}</span>
       </button>
     );
   };
   const loadCatalog = async (uid: string, rebuild = false) => {
     setLoadingCatalog(true);
     try {
                           <button
                             onClick={() => handleDeleteClient(client.id)}
                             disabled={deletingClient === client.id}
+                            className="flex h-8 w-8 items-center justify-center rounded-lg text-slate-300 opacity-100 transition hover:bg-red-50 hover:text-red-500 disabled:opacity-30 sm:h-auto sm:w-auto sm:opacity-0 sm:group-hover:opacity-100"
                             title="Delete connection"
                           >
                             {deletingClient === client.id ? (
                             {formatFileSize(doc.file_size)} · {formatDate(doc.created_at)}
                           </p>
                         </div>
+                        <div className="flex flex-shrink-0 items-center gap-1.5 sm:gap-2">
                           {renderStatus(doc)}
                           <button
                             onClick={() => handleDeleteDocument(doc.id)}
                             disabled={deleting === doc.id}
+                            className="flex h-8 w-8 items-center justify-center rounded-lg text-slate-300 opacity-100 transition hover:bg-red-50 hover:text-red-500 disabled:opacity-30 sm:h-auto sm:w-auto sm:opacity-0 sm:group-hover:opacity-100"
                             title="Delete"
                           >
                             {deleting === doc.id ? (

src/app/components/Login.tsx CHANGED Viewed

@@ -1,8 +1,9 @@
-import { useState } from "react";
 import { useNavigate } from "react-router";
 import { Loader2, LogIn } from "lucide-react";
 import { login, persistAuthData } from "@/services/orchestrationApi";
-import logoUrl from "../../assets/logo.png";
 export default function Login() {
   const [email, setEmail] = useState("");
@@ -42,7 +43,9 @@ export default function Login() {
       <section className="grid w-full max-w-5xl overflow-hidden rounded-lg border border-slate-200 bg-white shadow-xl md:grid-cols-[1fr_24rem]">
         <div className="hidden bg-slate-950 p-10 text-white md:flex md:flex-col md:justify-between">
           <div className="flex items-center gap-3">
-            <img src={logoUrl} alt="Data Eyond" className="h-9 w-9 object-contain" />
             <div>
               <p className="text-sm font-semibold">Data Eyond</p>
               <p className="text-xs text-slate-400">Analysis workspace</p>
@@ -56,7 +59,9 @@ export default function Login() {
         <div className="p-6 sm:p-8">
           <div className="mb-8 flex items-center gap-3 md:hidden">
-            <img src={logoUrl} alt="Data Eyond" className="h-9 w-9 object-contain" />
             <div>
               <p className="text-sm font-semibold text-slate-900">Data Eyond</p>
               <p className="text-xs text-slate-500">Analysis workspace</p>

+import { useState } from "react";
 import { useNavigate } from "react-router";
 import { Loader2, LogIn } from "lucide-react";
 import { login, persistAuthData } from "@/services/orchestrationApi";
+const logoUrl = "/logo.png";
 export default function Login() {
   const [email, setEmail] = useState("");
       <section className="grid w-full max-w-5xl overflow-hidden rounded-lg border border-slate-200 bg-white shadow-xl md:grid-cols-[1fr_24rem]">
         <div className="hidden bg-slate-950 p-10 text-white md:flex md:flex-col md:justify-between">
           <div className="flex items-center gap-3">
+            <span className="flex h-12 w-12 shrink-0 items-center justify-center rounded-md border border-slate-200 bg-white p-2 shadow-sm">
+              <img src={logoUrl} alt="Data Eyond" className="h-full w-full object-contain" />
+            </span>
             <div>
               <p className="text-sm font-semibold">Data Eyond</p>
               <p className="text-xs text-slate-400">Analysis workspace</p>
         <div className="p-6 sm:p-8">
           <div className="mb-8 flex items-center gap-3 md:hidden">
+            <span className="flex h-12 w-12 shrink-0 items-center justify-center rounded-md border border-slate-200 bg-white p-2 shadow-sm">
+              <img src={logoUrl} alt="Data Eyond" className="h-full w-full object-contain" />
+            </span>
             <div>
               <p className="text-sm font-semibold text-slate-900">Data Eyond</p>
               <p className="text-xs text-slate-500">Analysis workspace</p>

src/app/components/analysis/AnalysisShell.tsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 import { useNavigate } from "react-router";
-import { PanelRightOpen } from "lucide-react";
 import { toast } from "sonner";
 import KnowledgeManagement from "../KnowledgeManagement";
 import {
@@ -45,6 +45,8 @@ export function AnalysisShell() {
   const navigate = useNavigate();
   const session = useMemo(() => getCurrentSession(), []);
   const [activeMenu, setActiveMenu] = useState<AppMenuKey>("home");
   const [analyses, setAnalyses] = useState<Analysis[]>([]);
   const [activeAnalysis, setActiveAnalysis] = useState<Analysis | null>(null);
   const [messages, setMessages] = useState<UiMessage[]>([]);
@@ -278,6 +280,15 @@ export function AnalysisShell() {
     navigate("/login", { replace: true });
   };
   const renderAnalysisAgent = () => (
     <div className={cx("grid min-h-screen grid-cols-1", reportCollapsed ? "lg:grid-cols-[18rem_minmax(0,1fr)_3.5rem]" : "lg:grid-cols-[18rem_minmax(0,1fr)_23rem]")}>
       <AnalysisSidebar
@@ -314,7 +325,7 @@ export function AnalysisShell() {
           </button>
         </aside>
       ) : (
-        <aside className="min-h-0 overflow-y-auto border-l border-slate-200 bg-white p-4">
           <ReportSidebar analysis={activeAnalysis} userId={session?.user_id} onCollapse={() => setReportCollapsed(true)} />
         </aside>
       )}
@@ -322,16 +333,85 @@ export function AnalysisShell() {
   );
   return (
-    <div className="grid min-h-screen grid-cols-1 bg-slate-100 text-slate-900 lg:grid-cols-[16rem_minmax(0,1fr)]">
-      <AppNavigation active={activeMenu} userName={session?.name} onChange={setActiveMenu} onLogout={logout} />
-      <div className="min-w-0">
-        {activeMenu === "home" && <HomeDashboard hasAnalyses={analyses.length > 0} onNavigate={setActiveMenu} />}
-        {activeMenu === "knowledge" && <KnowledgeManagement open onClose={() => setActiveMenu("home")} variant="page" />}
-        {activeMenu === "analysis-agent" && renderAnalysisAgent()}
       </div>
       <NewAnalysisDialog open={newAnalysisOpen} onClose={() => setNewAnalysisOpen(false)} onCreated={handleCreated} />
     </div>
   );
-}

 import { useEffect, useMemo, useState } from "react";
 import { useNavigate } from "react-router";
+import { FileText, Menu, PanelRightOpen, X } from "lucide-react";
 import { toast } from "sonner";
 import KnowledgeManagement from "../KnowledgeManagement";
 import {
   const navigate = useNavigate();
   const session = useMemo(() => getCurrentSession(), []);
   const [activeMenu, setActiveMenu] = useState<AppMenuKey>("home");
+  const [mobileNavOpen, setMobileNavOpen] = useState(false);
+  const [mobileReportOpen, setMobileReportOpen] = useState(false);
   const [analyses, setAnalyses] = useState<Analysis[]>([]);
   const [activeAnalysis, setActiveAnalysis] = useState<Analysis | null>(null);
   const [messages, setMessages] = useState<UiMessage[]>([]);
     navigate("/login", { replace: true });
   };
+  const changeMenu = (menu: AppMenuKey) => {
+    setActiveMenu(menu);
+    setMobileNavOpen(false);
+    setMobileReportOpen(false);
+  };
+  const activeMenuLabel =
+    activeMenu === "analysis-agent" ? "Analysis Agent" : activeMenu === "knowledge" ? "Knowledge" : "Home";
   const renderAnalysisAgent = () => (
     <div className={cx("grid min-h-screen grid-cols-1", reportCollapsed ? "lg:grid-cols-[18rem_minmax(0,1fr)_3.5rem]" : "lg:grid-cols-[18rem_minmax(0,1fr)_23rem]")}>
       <AnalysisSidebar
           </button>
         </aside>
       ) : (
+        <aside className="hidden min-h-0 overflow-y-auto border-l border-slate-200 bg-white p-4 lg:block">
           <ReportSidebar analysis={activeAnalysis} userId={session?.user_id} onCollapse={() => setReportCollapsed(true)} />
         </aside>
       )}
   );
   return (
+    <div className="min-h-screen bg-slate-100 text-slate-900">
+      <header className="sticky top-0 z-40 flex h-14 items-center justify-between border-b border-slate-200 bg-white px-3 lg:hidden">
+        <button
+          type="button"
+          title="Open workspace menu"
+          aria-label="Open workspace menu"
+          onClick={() => setMobileNavOpen(true)}
+          className="flex h-10 w-10 items-center justify-center rounded-md text-slate-600 hover:bg-slate-100 hover:text-slate-950"
+        >
+          <Menu className="h-5 w-5" />
+        </button>
+        <div className="min-w-0 text-center">
+          <p className="truncate text-sm font-semibold text-slate-950">{activeMenuLabel}</p>
+          <p className="text-xs text-slate-500">Data Eyond</p>
+        </div>
+        {activeMenu === "analysis-agent" ? (
+          <button
+            type="button"
+            title="Open report panel"
+            aria-label="Open report panel"
+            onClick={() => setMobileReportOpen(true)}
+            className="flex h-10 w-10 items-center justify-center rounded-md text-slate-600 hover:bg-slate-100 hover:text-slate-950"
+          >
+            <FileText className="h-5 w-5" />
+          </button>
+        ) : (
+          <div className="h-10 w-10" />
+        )}
+      </header>
+      {mobileNavOpen && (
+        <div className="fixed inset-0 z-50 lg:hidden" role="dialog" aria-modal="true" aria-label="Workspace navigation">
+          <button
+            type="button"
+            aria-label="Close workspace menu overlay"
+            onClick={() => setMobileNavOpen(false)}
+            className="absolute inset-0 bg-slate-950/40"
+          />
+          <div className="relative h-full w-72 max-w-[86vw] bg-white shadow-2xl">
+            <AppNavigation active={activeMenu} userName={session?.name} onChange={changeMenu} onLogout={logout} />
+            <button
+              type="button"
+              title="Close workspace menu"
+              aria-label="Close workspace menu"
+              onClick={() => setMobileNavOpen(false)}
+              className="absolute right-3 top-3 flex h-9 w-9 items-center justify-center rounded-md text-slate-500 hover:bg-slate-100 hover:text-slate-950"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          </div>
+        </div>
+      )}
+      {mobileReportOpen && activeMenu === "analysis-agent" && (
+        <div className="fixed inset-0 z-50 lg:hidden" role="dialog" aria-modal="true" aria-label="Report panel">
+          <button
+            type="button"
+            aria-label="Close report panel overlay"
+            onClick={() => setMobileReportOpen(false)}
+            className="absolute inset-0 bg-slate-950/40"
+          />
+          <div className="absolute inset-x-0 bottom-0 max-h-[86vh] overflow-y-auto rounded-t-xl bg-white p-4 shadow-2xl">
+            <ReportSidebar analysis={activeAnalysis} userId={session?.user_id} onCollapse={() => setMobileReportOpen(false)} />
+          </div>
+        </div>
+      )}
+      <div className="lg:grid lg:min-h-screen lg:grid-cols-[16rem_minmax(0,1fr)]">
+        <div className="hidden lg:block">
+          <AppNavigation active={activeMenu} userName={session?.name} onChange={setActiveMenu} onLogout={logout} />
+        </div>
+        <div className="min-w-0">
+          {activeMenu === "home" && <HomeDashboard hasAnalyses={analyses.length > 0} onNavigate={changeMenu} />}
+          {activeMenu === "knowledge" && <KnowledgeManagement open onClose={() => changeMenu("home")} variant="page" />}
+          {activeMenu === "analysis-agent" && renderAnalysisAgent()}
+        </div>
       </div>
       <NewAnalysisDialog open={newAnalysisOpen} onClose={() => setNewAnalysisOpen(false)} onCreated={handleCreated} />
     </div>
   );
+}

src/app/components/analysis/AppNavigation.tsx CHANGED Viewed

@@ -42,8 +42,8 @@ export function AppNavigation({ active, userName, onChange, onLogout }: AppNavig
   return (
     <aside className="flex min-h-screen w-full flex-col border-r border-slate-200 bg-white px-3 py-4 text-slate-900">
       <div className="flex items-center gap-3 px-2 pb-5">
-        <div className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg bg-slate-950 text-sm font-semibold text-white">
-          DE
         </div>
         <div className="min-w-0">
           <p className="truncate text-sm font-semibold leading-none">Data Eyond</p>

   return (
     <aside className="flex min-h-screen w-full flex-col border-r border-slate-200 bg-white px-3 py-4 text-slate-900">
       <div className="flex items-center gap-3 px-2 pb-5">
+        <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md border border-slate-200 bg-white p-1.5 shadow-sm">
+          <img src="/logo.png" alt="Data Eyond" className="h-full w-full object-contain" />
         </div>
         <div className="min-w-0">
           <p className="truncate text-sm font-semibold leading-none">Data Eyond</p>

src/app/components/analysis/BackendDiagnostics.tsx DELETED Viewed

@@ -1,127 +0,0 @@
-import { useEffect, useState } from "react";
-import { AlertTriangle, CheckCircle2, Loader2, Server, XCircle } from "lucide-react";
-import { getDocumentTypes, listAnalyses } from "@/services/orchestrationApi";
-import { inspectAgenticContract, type AgenticContractStatus } from "@/services/agenticApi";
-import { getCurrentSession } from "./session";
-import { cx } from "./utils";
-type CheckState = "loading" | "ok" | "warning" | "error";
-interface CheckItem {
-  label: string;
-  state: CheckState;
-  detail: string;
-}
-function StateIcon({ state }: { state: CheckState }) {
-  if (state === "loading") return <Loader2 className="h-4 w-4 animate-spin text-slate-400" />;
-  if (state === "ok") return <CheckCircle2 className="h-4 w-4 text-emerald-600" />;
-  if (state === "warning") return <AlertTriangle className="h-4 w-4 text-amber-600" />;
-  return <XCircle className="h-4 w-4 text-red-600" />;
-}
-function summarizeAgentic(status: AgenticContractStatus): CheckItem {
-  if (!status.reachable) {
-    return {
-      label: "Python agentic backend",
-      state: "error",
-      detail: status.error ? `Not reachable: ${status.error}` : "Not reachable from the browser.",
-    };
-  }
-  if (!status.matchesContract) {
-    const legacy = status.legacyPaths.length > 0 ? ` Legacy paths detected: ${status.legacyPaths.join(", ")}.` : "";
-    return {
-      label: "Python agentic backend",
-      state: "warning",
-      detail: `Contract mismatch. Missing: ${status.missingPaths.join(", ")}.${legacy}`,
-    };
-  }
-  return {
-    label: "Python agentic backend",
-    state: "ok",
-    detail: "Required chat, Help, report, and observability endpoints are exposed.",
-  };
-}
-export function BackendDiagnostics() {
-  const [checks, setChecks] = useState<CheckItem[]>([
-    { label: "Golang orchestration", state: "loading", detail: "Checking protected orchestration endpoints." },
-    { label: "Python agentic backend", state: "loading", detail: "Checking OpenAPI contract paths." },
-  ]);
-  useEffect(() => {
-    let cancelled = false;
-    const run = async () => {
-      const session = getCurrentSession();
-      const next: CheckItem[] = [];
-      if (!session?.access_token) {
-        next.push({
-          label: "Golang orchestration",
-          state: "warning",
-          detail: "Login is required before protected orchestration endpoints can be checked.",
-        });
-      } else {
-        try {
-          await Promise.all([getDocumentTypes(), listAnalyses({ status: "active", page: 1, limit: 1 })]);
-          next.push({
-            label: "Golang orchestration",
-            state: "ok",
-            detail: "Auth, knowledge metadata, and analysis listing endpoints are reachable.",
-          });
-        } catch (err) {
-          next.push({
-            label: "Golang orchestration",
-            state: "error",
-            detail: err instanceof Error ? err.message : "Protected orchestration check failed.",
-          });
-        }
-      }
-      next.push(summarizeAgentic(await inspectAgenticContract()));
-      if (!cancelled) setChecks(next);
-    };
-    run();
-    return () => {
-      cancelled = true;
-    };
-  }, []);
-  return (
-    <section className="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
-      <div className="mb-4 flex items-center gap-2">
-        <Server className="h-4 w-4 text-slate-500" />
-        <div>
-          <h2 className="text-sm font-semibold text-slate-950">Backend diagnostics</h2>
-          <p className="mt-1 text-xs text-slate-500">Quick read on whether the current `.env` matches the frontend flow.</p>
-        </div>
-      </div>
-      <div className="space-y-2">
-        {checks.map((check) => (
-          <div
-            key={check.label}
-            className={cx(
-              "rounded-md border px-3 py-3",
-              check.state === "ok" && "border-emerald-200 bg-emerald-50",
-              check.state === "warning" && "border-amber-200 bg-amber-50",
-              check.state === "error" && "border-red-200 bg-red-50",
-              check.state === "loading" && "border-slate-200 bg-slate-50"
-            )}
-          >
-            <div className="flex items-start gap-2">
-              <StateIcon state={check.state} />
-              <div className="min-w-0">
-                <p className="text-sm font-medium text-slate-900">{check.label}</p>
-                <p className="mt-1 break-words text-xs leading-5 text-slate-600">{check.detail}</p>
-              </div>
-            </div>
-          </div>
-        ))}
-      </div>
-    </section>
-  );
-}

src/app/components/analysis/HomeDashboard.tsx CHANGED Viewed

@@ -1,6 +1,5 @@
 import { ArrowRight, BarChart3, BookOpen, FileText, PlayCircle } from "lucide-react";
 import type { AppMenuKey } from "./AppNavigation";
-import { BackendDiagnostics } from "./BackendDiagnostics";
 interface HomeDashboardProps {
   hasAnalyses: boolean;
@@ -67,8 +66,6 @@ export function HomeDashboard({ hasAnalyses, onNavigate }: HomeDashboardProps) {
           </div>
         </section>
-        <BackendDiagnostics />
         <section className="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
           <div className="mb-4 flex items-center justify-between gap-3">
             <div>
@@ -102,5 +99,4 @@ export function HomeDashboard({ hasAnalyses, onNavigate }: HomeDashboardProps) {
       </div>
     </main>
   );
-}

 import { ArrowRight, BarChart3, BookOpen, FileText, PlayCircle } from "lucide-react";
 import type { AppMenuKey } from "./AppNavigation";
 interface HomeDashboardProps {
   hasAnalyses: boolean;
           </div>
         </section>
         <section className="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
           <div className="mb-4 flex items-center justify-between gap-3">
             <div>
       </div>
     </main>
   );
+}

src/assets/logo.png DELETED Viewed

Binary file (10.2 kB)

src/main.tsx CHANGED Viewed

@@ -1,7 +1,14 @@
-  import { createRoot } from "react-dom/client";
-  import App from "./app/App.tsx";
-  import "./styles/index.css";
-  import "katex/dist/katex.min.css";
-  createRoot(document.getElementById("root")!).render(<App />);

+import { createRoot } from "react-dom/client";
+import App from "./app/App.tsx";
+import "./styles/index.css";
+import "katex/dist/katex.min.css";
+createRoot(document.getElementById("root")!).render(<App />);
+if ("serviceWorker" in navigator && import.meta.env.PROD) {
+  window.addEventListener("load", () => {
+    navigator.serviceWorker.register("/sw.js").catch((error) => {
+      console.error("Service worker registration failed", error);
+    });
+  });
+}

src/services/agenticApi.ts CHANGED Viewed

@@ -217,57 +217,4 @@ export const listReportVersions = (analysisId: string): Promise<ReportSummary[]>
 export const getReportVersion = (analysisId: string, version: number): Promise<ReportDetail> =>
   agenticJson(`/api/v1/tools/report/${encodeURIComponent(analysisId)}/${encodeURIComponent(String(version))}`);
-export interface AgenticContractStatus {
-  reachable: boolean;
-  matchesContract: boolean;
-  missingPaths: string[];
-  legacyPaths: string[];
-  error?: string;
-}
-const requiredAgenticPaths = [
-  "/api/v2/chat/stream",
-  "/api/v1/tools/help",
-  "/api/v1/tools/report",
-  "/api/v1/tools/report/{analysis_id}",
-  "/api/v1/tools/report/{analysis_id}/{version}",
-  "/api/v1/observability",
-];
-const legacyAgenticPaths = ["/api/v1/chat/stream", "/api/v1/room/create", "/api/v1/rooms/{user_id}"];
-export async function inspectAgenticContract(): Promise<AgenticContractStatus> {
-  try {
-    const res = await fetch(`${AGENTIC_BASE_URL}/openapi.json`);
-    if (!res.ok) {
-      return {
-        reachable: false,
-        matchesContract: false,
-        missingPaths: requiredAgenticPaths,
-        legacyPaths: [],
-        error: `HTTP ${res.status}`,
-      };
-    }
-    const openapi = (await res.json()) as { paths?: Record<string, unknown> };
-    const paths = new Set(Object.keys(openapi.paths ?? {}));
-    const missingPaths = requiredAgenticPaths.filter((path) => !paths.has(path));
-    const detectedLegacyPaths = legacyAgenticPaths.filter((path) => paths.has(path));
-    return {
-      reachable: true,
-      matchesContract: missingPaths.length === 0,
-      missingPaths,
-      legacyPaths: detectedLegacyPaths,
-    };
-  } catch (err) {
-    return {
-      reachable: false,
-      matchesContract: false,
-      missingPaths: requiredAgenticPaths,
-      legacyPaths: [],
-      error: err instanceof Error ? err.message : "Unable to inspect agentic backend",
-    };
-  }
-}


217
218	export const getReportVersion = (analysisId: string, version: number): Promise<ReportDetail> =>
219	agenticJson(`/api/v1/tools/report/${encodeURIComponent(analysisId)}/${encodeURIComponent(String(version))}`);





















































220