polish: accessibility, consistency, error boundary, title casing

- Add ErrorBoundary wrapping all views (graceful crash recovery)
- Fix document title casing: "Tls" to "TLS", "Dns" to "DNS" (proper acronyms)
- Remove em dash from titles (use pipe separator per style guide)
- Add aria-label to CopyButton, status bar dots, loading spinner
- Add role="progressbar" with aria-valuenow/min/max to server resource bars
- Add disabled + spinner state to health check button during mutation
- Add loading text to Trust CA ("Trusting...") and Rotate ("Rotating...") buttons
- Fix status bar: show "No services" instead of "0/0 up" when empty
- Standardize hover states: brightness-110 for colored buttons, bg-primary/90 for primary
- Clean up stale .js build artifacts from ui/src/
- Add *.tsbuildinfo to .gitignore

Author: bradleygauthier

.gitignore

@@ -59,3 +59,4 @@ ui/dist/
 # TypeScript/Vite build artifacts
 ui/src/**/*.js
 !ui/src/**/*.config.js
+*.tsbuildinfo

ui/src/app.tsx

@@ -1,6 +1,6 @@
 import { AppShell } from "@/components/layout/app-shell";
 import { useAppStore } from "@/stores/app-store";
-import { lazy, Suspense } from "react";
+import { Component, lazy, Suspense, type ReactNode, type ErrorInfo } from "react";
 
 const DashboardView = lazy(
   () => import("@/components/views/dashboard/dashboard-view"),
@@ -28,21 +28,63 @@ const views = {
 
 function Loading() {
   return (
-    <div className="flex h-full items-center justify-center">
+    <div className="flex h-full items-center justify-center" role="status">
       <div className="h-6 w-6 animate-spin rounded-full border-2 border-border border-t-primary" />
+      <span className="sr-only">Loading...</span>
     </div>
   );
 }
 
+interface ErrorBoundaryState {
+  error: Error | null;
+}
+
+class ErrorBoundary extends Component<{ children: ReactNode }, ErrorBoundaryState> {
+  state: ErrorBoundaryState = { error: null };
+
+  static getDerivedStateFromError(error: Error) {
+    return { error };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    console.error("View crashed:", error, info.componentStack);
+  }
+
+  render() {
+    if (this.state.error) {
+      return (
+        <div className="flex h-full flex-col items-center justify-center gap-3 p-8 text-center">
+          <h2 className="text-lg font-semibold text-text-1">Something went wrong</h2>
+          <p className="max-w-sm text-sm text-text-3">
+            The view encountered an error. Try refreshing or switching to a different view.
+          </p>
+          <button
+            onClick={() => {
+              this.setState({ error: null });
+              useAppStore.getState().setView("dashboard");
+            }}
+            className="mt-2 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-primary/90"
+          >
+            Back to Dashboard
+          </button>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
 export function App() {
   const view = useAppStore((s) => s.view);
   const View = views[view];
 
   return (
     <AppShell>
-      <Suspense fallback={<Loading />}>
-        <View />
-      </Suspense>
+      <ErrorBoundary>
+        <Suspense fallback={<Loading />}>
+          <View />
+        </Suspense>
+      </ErrorBoundary>
     </AppShell>
   );
 }

ui/src/components/layout/status-bar.tsx

@@ -13,6 +13,7 @@ interface StatusBarProps {
 }
 
 function Dot({ ok, loading }: { ok?: boolean; loading?: boolean }) {
+  const label = loading ? "checking" : ok ? "healthy" : "unhealthy";
   return (
     <span
       className={cn(
@@ -21,6 +22,8 @@ function Dot({ ok, loading }: { ok?: boolean; loading?: boolean }) {
         !loading && ok && "bg-success shadow-[0_0_4px_var(--color-success)]",
         !loading && !ok && "bg-error",
       )}
+      role="img"
+      aria-label={label}
     />
   );
 }
@@ -67,10 +70,14 @@ export function StatusBar({
         <Pill><Dot ok={dnsOk} /> DNS</Pill>
         <Pill><Dot ok={caddyOk} /> Caddy</Pill>
         <Sep />
-        <Pill>
-          <Dot ok={allServicesUp} loading={!allServicesUp && servicesUp > 0} />
-          {servicesUp}/{servicesTotal} up
-        </Pill>
+        {servicesTotal > 0 ? (
+          <Pill>
+            <Dot ok={allServicesUp} loading={!allServicesUp && servicesUp > 0} />
+            {servicesUp}/{servicesTotal} up
+          </Pill>
+        ) : (
+          <Pill><Dot ok={false} /> No services</Pill>
+        )}
         <Pill>
           <Dot ok={certsValid > 0} />
           {certsValid} cert{certsValid !== 1 ? "s" : ""} valid

ui/src/components/shared/copy-button.tsx

@@ -28,6 +28,7 @@ export function CopyButton({ text, label, className }: CopyButtonProps) {
         className,
       )}
       title="Copy"
+      aria-label={copied ? "Copied" : "Copy to clipboard"}
     >
       {copied ? <Check size={11} /> : <Copy size={11} />}
       {label && <span>{copied ? "Copied!" : label}</span>}

ui/src/components/views/dashboard/blank-slate.tsx

@@ -338,7 +338,7 @@ function CapabilityCard({
               "flex items-center gap-2 rounded-lg px-3 py-2 text-xs font-semibold transition-all",
               cap.bgColor,
               cap.color,
-              "hover:brightness-125",
+              "hover:brightness-110",
             )}
           >
             Open {cap.label}
@@ -450,7 +450,7 @@ export function BlankSlate() {
           <div>
             <button
               onClick={() => setView("services")}
-              className="inline-flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-white transition-all hover:brightness-110"
+              className="inline-flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-primary/90"
             >
               <Layers size={14} />
               Register a Service

ui/src/components/views/servers/servers-view.tsx

@@ -260,7 +260,14 @@ function ResourceCard({
       <p className="text-lg font-bold tabular-nums text-text-1">{main}</p>
       {sub && <p className="mt-0.5 text-[11px] text-text-muted">{sub}</p>}
       {percent != null && (
-        <div className="mt-2 h-1.5 rounded-full bg-surface-3">
+        <div
+          className="mt-2 h-1.5 rounded-full bg-surface-3"
+          role="progressbar"
+          aria-valuenow={Math.round(percent)}
+          aria-valuemin={0}
+          aria-valuemax={100}
+          aria-label={`${label} ${Math.round(percent)}%`}
+        >
           <div
             className={cn(
               "h-full rounded-full transition-all",

ui/src/components/views/services/services-view.tsx

@@ -208,9 +208,10 @@ export default function ServicesView() {
                 <div className="flex items-center gap-2 border-t border-border pt-3">
                   <button
                     onClick={() => healthCheckMut.mutate(svc.name)}
-                    className="flex items-center gap-1 rounded-md border border-border px-2 py-1 text-[11px] font-medium text-text-3 transition-colors hover:bg-surface-2"
+                    disabled={healthCheckMut.isPending}
+                    className="flex items-center gap-1 rounded-md border border-border px-2 py-1 text-[11px] font-medium text-text-3 transition-colors hover:bg-surface-2 disabled:opacity-50"
                   >
-                    <RefreshCw size={11} /> Check
+                    <RefreshCw size={11} className={cn(healthCheckMut.isPending && "animate-spin")} /> Check
                   </button>
                   <button
                     onClick={() => handleDeregister(svc)}

ui/src/components/views/tls/tls-view.tsx

@@ -65,7 +65,7 @@ export default function TlsView() {
             disabled={trustCaMut.isPending}
             className="flex items-center gap-1.5 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-primary/90 disabled:opacity-50"
           >
-            <ShieldCheck size={14} /> Trust CA
+            <ShieldCheck size={14} /> {trustCaMut.isPending ? "Trusting..." : "Trust CA"}
           </button>
         </div>
 
@@ -253,7 +253,7 @@ function CertCard({
           disabled={rotating}
           className="ml-auto flex items-center gap-1 rounded-md border border-primary/30 px-2 py-1 text-[11px] font-medium text-primary transition-colors hover:bg-primary/10 disabled:opacity-50"
         >
-          <RefreshCw size={11} /> Rotate
+          <RefreshCw size={11} className={cn(rotating && "animate-spin")} /> {rotating ? "Rotating..." : "Rotate"}
         </button>
       </div>
     </div>

ui/src/stores/app-store.test.ts

@@ -62,8 +62,7 @@ describe("app-store", () => {
 
     it("updates document title for non-dashboard views", () => {
       useAppStore.getState().setView("tls");
-      expect(document.title).toContain("Tls");
-      expect(document.title).toContain("QP Conduit");
+      expect(document.title).toBe("TLS | QP Conduit");
     });
 
     it("sets title to 'QP Conduit' for dashboard", () => {

ui/src/stores/app-store.ts

@@ -50,6 +50,15 @@ const VIEW_TO_PATH: Record<View, string> = {
   routing: "/routing",
 };
 
+const VIEW_TITLES: Record<View, string> = {
+  dashboard: "Dashboard",
+  services: "Services",
+  dns: "DNS",
+  tls: "TLS",
+  servers: "Servers",
+  routing: "Routing",
+};
+
 function viewFromPath(): View {
   return PATH_TO_VIEW[window.location.pathname] ?? "dashboard";
 }
@@ -73,7 +82,7 @@ export const useAppStore = create<AppState>((set) => ({
     if (window.location.pathname !== path) {
       window.history.pushState(null, "", path);
     }
-    document.title = view === "dashboard" ? "QP Conduit" : `${view.charAt(0).toUpperCase() + view.slice(1)} — QP Conduit`;
+    document.title = view === "dashboard" ? "QP Conduit" : `${VIEW_TITLES[view]} | QP Conduit`;
     set({ view });
   },
 
@@ -98,6 +107,6 @@ export const useAppStore = create<AppState>((set) => ({
 // Listen for browser back/forward (set state without pushing history again)
 window.addEventListener("popstate", () => {
   const view = viewFromPath();
-  document.title = view === "dashboard" ? "QP Conduit" : `${view.charAt(0).toUpperCase() + view.slice(1)} — QP Conduit`;
+  document.title = view === "dashboard" ? "QP Conduit" : `${VIEW_TITLES[view]} | QP Conduit`;
   useAppStore.setState({ view });
 });