ServiceHealthBanner component exists but is never rendered — `ServiceHealthIndicator` is in the navbar (small dot) but the banner (full message) is wired nowhere, so service-down users see a small indicator with no explanation #230

New issue

Closed

opened 2026-10-04 02:13:58 +00:00 by Mark · 1 comment

Mark commented

2026-10-04 02:13:58 +00:00

Owner

Finding

src/components/ServiceHealthBanner.tsx:5 defines an exported ServiceHealthBanner function. The file exists. grep -n 'ServiceHealthBanner' src/pages/ returns 0 hits. No page renders the banner.

ServiceHealthIndicator (line 4 of Navbar.tsx) is the small dot indicator in the navbar. The user sees a green/red dot but no explanation when the service is down.

A user who lands on the Workspace with the easystitch-service offline:

Tries to auto-digitize
The request fails (per easystitch-client.ts:481: "easystitch-service responded ${response.status}")
The error toast appears (if wired)
The service health indicator goes red
The user has no in-page explanation: "Service is down, try again in a few minutes" / "Check your internet connection" / etc.

The banner is the right surface for this — it shows a full message at the top of the page when the service is degraded.

Where

Banner component: src/components/ServiceHealthBanner.tsx (exists, never rendered)
Indicator: src/components/ServiceHealthIndicator.tsx (in the navbar)
Client: src/lib/easystitch-client.ts:289 (the health check)

Suggested fix shape

Render <ServiceHealthBanner /> at the top of each page that uses the easystitch-service:

// In Workspace.tsx and Editor.tsx
<>
  <ServiceHealthBanner />
  <motion.div ...>
    {/* existing page content */}
  </motion.div>
</>

The banner shows only when serviceStatus === 'down' or 'degraded'. The styles are already defined in the component (likely, since the file exists and is exported).

The indicator (small dot) stays in the navbar; the banner is the loud, in-page version.

Severity

Medium. The user sees a red dot but no message; the failure reason is opaque.

Discovered by

Gap analysis (2026-10-02) of error state UX.

The easystitch-client.ts:481 error message is generic. The banner can show more user-friendly copy.
The ServiceHealthIndicator in the navbar is the small version; the banner is the loud version. The pattern is: dot is the always-visible hint, banner is the click-through-to-details.

## Finding `src/components/ServiceHealthBanner.tsx:5` defines an exported `ServiceHealthBanner` function. The file exists. `grep -n 'ServiceHealthBanner' src/pages/` returns 0 hits. No page renders the banner. `ServiceHealthIndicator` (line 4 of `Navbar.tsx`) is the small dot indicator in the navbar. The user sees a green/red dot but no explanation when the service is down. A user who lands on the Workspace with the easystitch-service offline: - Tries to auto-digitize - The request fails (per `easystitch-client.ts:481`: "easystitch-service responded ${response.status}") - The error toast appears (if wired) - The service health indicator goes red - The user has no in-page explanation: "Service is down, try again in a few minutes" / "Check your internet connection" / etc. The banner is the right surface for this — it shows a full message at the top of the page when the service is degraded. ## Where - Banner component: `src/components/ServiceHealthBanner.tsx` (exists, never rendered) - Indicator: `src/components/ServiceHealthIndicator.tsx` (in the navbar) - Client: `src/lib/easystitch-client.ts:289` (the health check) ## Suggested fix shape Render `<ServiceHealthBanner />` at the top of each page that uses the easystitch-service: ```tsx // In Workspace.tsx and Editor.tsx <> <ServiceHealthBanner /> <motion.div ...> {/* existing page content */} </motion.div> </> ``` The banner shows only when `serviceStatus === 'down'` or `'degraded'`. The styles are already defined in the component (likely, since the file exists and is exported). The indicator (small dot) stays in the navbar; the banner is the loud, in-page version. ## Severity Medium. The user sees a red dot but no message; the failure reason is opaque. ## Discovered by Gap analysis (2026-10-02) of error state UX. ## Related - The `easystitch-client.ts:481` error message is generic. The banner can show more user-friendly copy. - The `ServiceHealthIndicator` in the navbar is the small version; the banner is the loud version. The pattern is: dot is the always-visible hint, banner is the click-through-to-details.

Mark added the

feature-request

triage-approved

labels

2026-10-04 02:13:58 +00:00

Mark referenced this issue

2026-10-04 02:36:16 +00:00

Gallery's RightClickMenu component exists but is not used anywhere — DesignCard's onContextMenu only calls e.preventDefault(), so the menu never opens, the user has no right-click affordance on designs #242

Mark commented

2026-10-04 06:21:34 +00:00

Author

Owner

This finding is already addressed on the current main branch — no fix needed.

The grep in the report (grep -n 'ServiceHealthBanner' src/pages/) returned 0 because the banner is rendered one level up: src/components/Layout.tsx imports and mounts <ServiceHealthBanner /> as a sibling of <Navbar /> and <main>. Every page in the app is wrapped by Layout via src/App.tsx (which wraps the <Routes> element), so the banner appears on Home, Workspace, Editor, Gallery, Help, About, Privacy, Terms, and NotFound.

Wiring reference:

src/components/Layout.tsx:5 (import { ServiceHealthBanner } from './ServiceHealthBanner';)
src/components/Layout.tsx:17 (<ServiceHealthBanner /> between Navbar and main)
src/App.tsx:16 and :103 (<Layout> ... </Layout> wrapping all routes)

The banner already shows only when status === 'unhealthy' (see ServiceHealthBanner.tsx:9: if (status !== "unhealthy") return null;), so a service-down user sees the full "Service unavailable — auto-digitize and export are temporarily offline." message at the top of any page, with a dismiss affordance.

Adding <ServiceHealthBanner /> directly to individual pages (as the suggested fix proposes) would duplicate the banner — Layout already renders it once site-wide. Closing this as already-resolved by existing Layout wiring.

This finding is already addressed on the current `main` branch — no fix needed. The grep in the report (`grep -n 'ServiceHealthBanner' src/pages/`) returned 0 because the banner is rendered one level up: `src/components/Layout.tsx` imports and mounts `<ServiceHealthBanner />` as a sibling of `<Navbar />` and `<main>`. Every page in the app is wrapped by Layout via `src/App.tsx` (which wraps the `<Routes>` element), so the banner appears on Home, Workspace, Editor, Gallery, Help, About, Privacy, Terms, and NotFound. Wiring reference: - `src/components/Layout.tsx:5` (`import { ServiceHealthBanner } from './ServiceHealthBanner';`) - `src/components/Layout.tsx:17` (`<ServiceHealthBanner />` between Navbar and main) - `src/App.tsx:16` and `:103` (`<Layout>` ... `</Layout>` wrapping all routes) The banner already shows only when `status === 'unhealthy'` (see `ServiceHealthBanner.tsx:9`: `if (status !== "unhealthy") return null;`), so a service-down user sees the full "Service unavailable — auto-digitize and export are temporarily offline." message at the top of any page, with a dismiss affordance. Adding `<ServiceHealthBanner />` directly to individual pages (as the suggested fix proposes) would duplicate the banner — Layout already renders it once site-wide. Closing this as already-resolved by existing Layout wiring.

Mark closed this issue

2026-10-04 06:21:39 +00:00