From 3f4b95579e66c2721a58fac2ee91c556db599d7e Mon Sep 17 00:00:00 2001
From: Adam Moussa <adam@seahavenind.com>
Date: Wed, 24 Jun 2026 14:04:38 -0400
Subject: [PATCH] perf+a11y(agent-team): split vendor bundle + GPT-4.1 review
 fixes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

GPT-4.1 cross-family review verdict: SHIP-WITH-FIXES, no BLOCKs (read-only,
XSS-safe, no-backend, gate-vs-inert all confirmed). Applied:
- a11y: aria-label on the Board/Pipeline Tabs; drawer collapsible section labels
  are now semantic <h3> headings.
- Bundle: function-based rollup manualChunks splits react/flow/markdown/radix/
  vendor so the 614 kB single chunk is gone (largest now ~142 kB react); app
  code drops to ~30 kB. Clears the 500 kB Vite warning. CSS splits too.

(Skipped GPT's .prose-sm finding — incorrect; index.css uses a hand-written .md
block, not Tailwind Typography. Roving-tabindex left out by design for this
read-only view.)

Typecheck + 36 tests + build all green.
---
 agent-team/web/src/App.tsx                   |  1 +
 agent-team/web/src/components/TaskDrawer.tsx |  4 +--
 agent-team/web/vite.config.ts                | 30 ++++++++++++++++++++
 3 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/agent-team/web/src/App.tsx b/agent-team/web/src/App.tsx
index 56b1d9b..bd9e5ba 100644
--- a/agent-team/web/src/App.tsx
+++ b/agent-team/web/src/App.tsx
@@ -127,6 +127,7 @@ export default function App() {
             value={view}
             onValueChange={(v) => setView(v as View)}
             className="flex min-w-0 flex-1 flex-col"
+            aria-label="Main view"
           >
             <div className="flex items-center gap-3 border-b border-border px-3 py-2">
               <TabsList>
diff --git a/agent-team/web/src/components/TaskDrawer.tsx b/agent-team/web/src/components/TaskDrawer.tsx
index 7abfe8d..0470e82 100644
--- a/agent-team/web/src/components/TaskDrawer.tsx
+++ b/agent-team/web/src/components/TaskDrawer.tsx
@@ -264,9 +264,9 @@ function CollapsibleSection({
   return (
     <Collapsible defaultOpen={defaultOpen}>
       <CollapsibleTrigger className="flex items-center justify-between w-full group">
-        <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
+        <h3 className="m-0 text-xs font-semibold text-muted-foreground uppercase tracking-wide">
           {title}
-        </span>
+        </h3>
         <ChevronDown className="h-3.5 w-3.5 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" />
       </CollapsibleTrigger>
       <CollapsibleContent>
diff --git a/agent-team/web/vite.config.ts b/agent-team/web/vite.config.ts
index c5a5e62..cbc3927 100644
--- a/agent-team/web/vite.config.ts
+++ b/agent-team/web/vite.config.ts
@@ -18,6 +18,36 @@ export default defineConfig({
     outDir: "dist",
     emptyOutDir: true,
     sourcemap: false,
+    rollupOptions: {
+      output: {
+        // Split heavy vendors into their own chunks so the app/UI code isn't
+        // re-downloaded when only a component changes, and to clear the 500 kB
+        // single-chunk warning. Function form (not object) so react-dom and
+        // transitive deps bucket precisely instead of collapsing into a stub.
+        manualChunks(id) {
+          if (!id.includes("node_modules")) return;
+          if (/[\\/]node_modules[\\/](react|react-dom|scheduler)[\\/]/.test(id))
+            return "react";
+          if (id.includes("reactflow") || id.includes("dagre")) return "flow";
+          if (id.includes("@radix-ui")) return "radix";
+          if (
+            id.includes("react-markdown") ||
+            id.includes("micromark") ||
+            id.includes("mdast") ||
+            id.includes("hast") ||
+            id.includes("unist") ||
+            id.includes("unified") ||
+            id.includes("remark") ||
+            id.includes("vfile") ||
+            id.includes("property-information") ||
+            id.includes("/decode-named-character-reference/") ||
+            id.includes("character-entities")
+          )
+            return "markdown";
+          return "vendor";
+        },
+      },
+    },
   },
   server: {
     proxy: {