From dac22ff8dfd385709048c84ad3f67668902e7a7c Mon Sep 17 00:00:00 2001
From: QPan <qpan@tetrascience.com>
Date: Tue, 16 Jun 2026 20:33:13 -0400
Subject: [PATCH 1/5] feat(data-app-shell): update breadcrumb labels in stories

Replace the demo breadcrumb trail with generic placeholder labels
(All Projects / Project Name / worksession name).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../composed/DataAppShell/DataAppShell.stories.tsx     | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/composed/DataAppShell/DataAppShell.stories.tsx b/src/components/composed/DataAppShell/DataAppShell.stories.tsx
index 190ff766..f0deb744 100644
--- a/src/components/composed/DataAppShell/DataAppShell.stories.tsx
+++ b/src/components/composed/DataAppShell/DataAppShell.stories.tsx
@@ -382,9 +382,8 @@ const htsWorkflowSteps: WorkflowStep[] = [
 
 const htsBreadcrumbs = [
   { label: "All Projects", onClick: () => console.log("All Projects") },
-  { label: "DUX4", onClick: () => console.log("DUX4") },
-  { label: "Primary Screening", onClick: () => console.log("Primary Screening") },
-  { label: "Data Overview" },
+  { label: "Project Name", onClick: () => console.log("Project Name") },
+  { label: "worksession name" },
 ];
 
 // =============================================================================
@@ -585,9 +584,8 @@ const InteractiveShell = () => {
       userMenu={<UserMenuButton name="Emily Liu" userRole="ADMIN" />}
       breadcrumbs={[
         { label: "All Projects", onClick: () => setActivePageId("explorer") },
-        { label: "DUX4" },
-        { label: "Primary Screening" },
-        { label: activeStep?.label ?? "Data Overview" },
+        { label: "Project Name" },
+        { label: "worksession name" },
       ]}
       headerActions={
         isProjectPage && (

From 20f19ab3fde2e788a050d8e42439d0150c818adf Mon Sep 17 00:00:00 2001
From: QPan <qpan@tetrascience.com>
Date: Tue, 16 Jun 2026 20:35:02 -0400
Subject: [PATCH 2/5] feat(data-app-shell): add collapsible nav rail
 (navRailHidden)

Add a `navRailHidden` prop to DataAppShell. When true, the desktop
icon nav rail is not rendered, so collapsing the sidebar panel can
hide both the rail and the panel, giving the content full width.

Wired in the Default story to the panel's collapsed state, with a
play-test asserting the rail is hidden when collapsed.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../composed/DataAppShell/DataAppShell.stories.tsx         | 7 +++++++
 src/components/composed/DataAppShell/DataAppShell.tsx      | 7 +++++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/composed/DataAppShell/DataAppShell.stories.tsx b/src/components/composed/DataAppShell/DataAppShell.stories.tsx
index f0deb744..2e0ab367 100644
--- a/src/components/composed/DataAppShell/DataAppShell.stories.tsx
+++ b/src/components/composed/DataAppShell/DataAppShell.stories.tsx
@@ -435,6 +435,7 @@ const DefaultShell = ({ initialCollapsed = false }: { initialCollapsed?: boolean
           </Button>
         </>
       }
+      navRailHidden={collapsed}
       sidebarPanel={<WorkflowPanel steps={steps} collapsed={collapsed} onCollapseChange={setCollapsed} />}
     >
       <div className="flex items-center justify-center h-full">
@@ -488,6 +489,12 @@ export const CollapsedWorkflow: Story = {
       expect(canvas.queryByText("Global Filtering")).not.toBeInTheDocument();
       expect(canvas.queryByText("Workflow")).not.toBeInTheDocument();
     });
+
+    await step("Collapsed workflow — app nav rail is hidden", async () => {
+      expect(
+        canvasElement.querySelector("[data-slot='data-app-sidebar-rail']")
+      ).not.toBeInTheDocument();
+    });
   },
   parameters: {
     zephyr: { testCaseId: "SW-T4666" },
diff --git a/src/components/composed/DataAppShell/DataAppShell.tsx b/src/components/composed/DataAppShell/DataAppShell.tsx
index a9714f64..34373b5b 100644
--- a/src/components/composed/DataAppShell/DataAppShell.tsx
+++ b/src/components/composed/DataAppShell/DataAppShell.tsx
@@ -104,6 +104,8 @@ export interface DataAppShellProps {
   // -- Shell --
   /** Slot rendered between the icon rail and the content (e.g. WorkflowPanel) */
   sidebarPanel?: React.ReactNode;
+  /** Hide the desktop icon nav rail (e.g. when the sidebar panel is collapsed) */
+  navRailHidden?: boolean;
   /** Main content area */
   children: React.ReactNode;
   /** Additional className for the root container */
@@ -492,6 +494,7 @@ function DataAppShell({
   onHelpClick,
   headerActions,
   sidebarPanel,
+  navRailHidden = false,
   children,
   className,
 }: DataAppShellProps) {
@@ -515,8 +518,8 @@ function DataAppShell({
         data-slot="data-app-shell"
         className={cn("flex flex-row w-full h-screen overflow-hidden", className)}
       >
-        {/* Desktop icon rail (hidden on mobile) */}
-        <IconRailSidebar {...sidebarProps} />
+        {/* Desktop icon rail (hidden on mobile, or when navRailHidden) */}
+        {!navRailHidden && <IconRailSidebar {...sidebarProps} />}
 
         {/* Mobile sidebar Sheet */}
         <SheetContent

From a84f94bd10e538117b5cf5c1a7af538047ee0d52 Mon Sep 17 00:00:00 2001
From: QPan <qpan@tetrascience.com>
Date: Tue, 16 Jun 2026 20:36:35 -0400
Subject: [PATCH 3/5] feat(data-app-shell): refine side nav rail + workflow
 step styling

Side nav rail (component):
- Narrow rail 60px -> 48px; icon-only nav buttons (label moved to
  aria-label + tooltip); button box 36px -> 30px; glyphs 20px -> 16px.
- Remove divider under the app logo; nudge logo up 4px.
- Unify breadcrumb text size to text-sm.

Workflow step panel (story demo):
- Rename demo steps to generic "Step N Name"; drop per-step counts.
- Step card height -> 40px; step name uses the text-title-sm token;
  inactive steps lightened (font-light).
- Remove the INPUT/OUTPUT data-count pills and dead helpers.
- Add an outline Back button next to Next from step 2 onward.

Play-tests updated to query nav buttons by accessible name and the
new labels/sizes.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../DataAppShell/DataAppShell.stories.tsx     | 159 ++++--------------
 .../composed/DataAppShell/DataAppShell.tsx    |  32 ++--
 2 files changed, 48 insertions(+), 143 deletions(-)

diff --git a/src/components/composed/DataAppShell/DataAppShell.stories.tsx b/src/components/composed/DataAppShell/DataAppShell.stories.tsx
index 2e0ab367..f1fc0ffb 100644
--- a/src/components/composed/DataAppShell/DataAppShell.stories.tsx
+++ b/src/components/composed/DataAppShell/DataAppShell.stories.tsx
@@ -85,7 +85,7 @@ function UserMenuButton({ name, userRole, expanded = false }: UserMenuButtonProp
         ) : (
           <button type="button" className="cursor-pointer bg-transparent border-none p-0">
             <Avatar size="sm" className="bg-primary cursor-pointer hover:opacity-85 transition-opacity">
-              <AvatarFallback className="bg-primary text-primary-foreground text-xs font-semibold">
+              <AvatarFallback className="bg-primary text-primary-foreground group-data-[size=sm]/avatar:text-[10px] font-semibold">
                 {initials}
               </AvatarFallback>
             </Avatar>
@@ -132,17 +132,8 @@ interface WorkflowStep {
   onClick?: () => void;
 }
 
-const MILLION = 1_000_000;
-const THOUSAND = 1_000;
-
-function formatCount(n: number): string {
-  if (n >= MILLION) return `${(n / MILLION).toFixed(n % MILLION === 0 ? 0 : 1)}M`;
-  if (n >= THOUSAND) return `${(n / THOUSAND).toFixed(n % THOUSAND === 0 ? 0 : 1)}K`;
-  return n.toLocaleString();
-}
-
 const stepItemVariants = cva(
-  "flex items-center gap-2 py-3.5 px-2.5 text-xs font-normal transition-colors duration-150 whitespace-nowrap leading-tight cursor-pointer border-l-[5px] w-full bg-transparent border-r-0 border-t-0 border-b-0",
+  "flex items-center gap-2 py-2 px-2.5 font-normal transition-colors duration-150 whitespace-nowrap leading-tight cursor-pointer border-l-[5px] w-full bg-transparent border-r-0 border-t-0 border-b-0",
   {
     variants: {
       active: {
@@ -198,7 +189,7 @@ function WorkflowPanel({
                     disabled={step.disabled}
                   >
                     {Icon ? (
-                      <Icon className={cn("w-5 h-5", step.isActive ? "text-primary" : "text-muted-foreground")} />
+                      <Icon className={cn("w-4 h-4", step.isActive ? "text-primary" : "text-muted-foreground")} />
                     ) : (
                       <div
                         className={cn(
@@ -261,18 +252,11 @@ function WorkflowPanel({
                     step.isActive ? "text-primary" : "text-muted-foreground",
                   )}
                 >
-                  <Icon className="w-5 h-5" />
+                  <Icon className="w-4 h-4" />
                 </span>
               )}
-              <span className="flex flex-col items-start gap-0.5 min-w-0">
-                <span className="truncate">{step.label}</span>
-                {(step.inputCount != null || step.outputCount != null) && (
-                  <span className="text-[10px] text-muted-foreground font-normal tabular-nums">
-                    {step.inputCount != null && <span>{formatCount(step.inputCount)}</span>}
-                    {step.inputCount != null && step.outputCount != null && <span className="mx-0.5">{"\u2192"}</span>}
-                    {step.outputCount != null && <span>{formatCount(step.outputCount)}</span>}
-                  </span>
-                )}
+              <span className={cn("text-title-sm truncate min-w-0", !step.isActive && "font-light")}>
+                {step.label}
               </span>
             </button>
           );
@@ -282,62 +266,6 @@ function WorkflowPanel({
   );
 }
 
-// ── Data count pills ─────────────────────────────────────────────────────────
-
-interface DataCount {
-  label: string;
-  count: number;
-  variant?: "default" | "outline" | "primary";
-  onClick?: () => void;
-}
-
-const countPillVariants = cva(
-  "inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium tabular-nums transition-colors",
-  {
-    variants: {
-      variant: {
-        default: "bg-muted text-muted-foreground",
-        outline: "bg-transparent border border-border text-foreground",
-        primary: "bg-primary/10 border border-primary/30 text-primary",
-      },
-      clickable: {
-        true: "cursor-pointer hover:bg-primary/15",
-        false: "cursor-default",
-      },
-    },
-    defaultVariants: { variant: "default", clickable: false },
-  },
-);
-
-function DataCountPills({ dataCounts }: { dataCounts: DataCount[] }) {
-  if (dataCounts.length === 0) return null;
-  return (
-    <div className="flex items-center gap-1.5">
-      {dataCounts.map((dc, i) => {
-        const pillClass = cn(countPillVariants({ variant: dc.variant ?? "outline", clickable: !!dc.onClick }));
-        const pillContent = (
-          <>
-            <span className="text-muted-foreground text-[10px] uppercase tracking-wide font-medium">{dc.label}</span>
-            <span className="font-semibold text-sm">{dc.count.toLocaleString()}</span>
-          </>
-        );
-        return (
-          <React.Fragment key={`${dc.label}-${i}`}>
-            {i > 0 && <span className="text-muted-foreground/50 text-xs">{"\u2192"}</span>}
-            {dc.onClick ? (
-              <button type="button" className={pillClass} onClick={dc.onClick}>
-                {pillContent}
-              </button>
-            ) : (
-              <div className={pillClass}>{pillContent}</div>
-            )}
-          </React.Fragment>
-        );
-      })}
-    </div>
-  );
-}
-
 // =============================================================================
 // Meta
 // =============================================================================
@@ -368,16 +296,14 @@ const htsNavGroups: NavGroup[] = [
 const htsWorkflowSteps: WorkflowStep[] = [
   {
     id: "data-overview",
-    label: "Data Overview",
+    label: "Step 1 Name",
     icon: LayoutGrid,
     isActive: true,
-    inputCount: 649568,
-    outputCount: 645396,
   },
-  { id: "global-filtering", label: "Global Filtering", icon: Filter, inputCount: 645396, outputCount: 4803 },
-  { id: "explore-clusters", label: "Explore Clusters", icon: Library, inputCount: 3917, outputCount: 20 },
-  { id: "review-compound", label: "Review Selection", icon: Search, inputCount: 20, outputCount: 15 },
-  { id: "export-list", label: "Export Primary List", icon: Download, inputCount: 15 },
+  { id: "global-filtering", label: "Step 2 Name", icon: Filter },
+  { id: "explore-clusters", label: "Step 3 Name", icon: Library },
+  { id: "review-compound", label: "Step 4 Name", icon: Search },
+  { id: "export-list", label: "Step 5 Name", icon: Download },
 ];
 
 const htsBreadcrumbs = [
@@ -400,17 +326,9 @@ const DefaultShell = ({ initialCollapsed = false }: { initialCollapsed?: boolean
     onClick: () => setActiveStepId(s.id),
   }));
 
-  const activeStep = steps.find((s) => s.isActive);
   const activeStepIndex = steps.findIndex((s) => s.isActive);
   const isLastStep = activeStepIndex === steps.length - 1;
-
-  const dataCounts: DataCount[] =
-    activeStep?.inputCount == null || activeStep?.outputCount == null
-      ? []
-      : [
-          { label: "INPUT", count: activeStep.inputCount, variant: "outline" },
-          { label: "Output", count: activeStep.outputCount, variant: "primary" },
-        ];
+  const isFirstStep = activeStepIndex <= 0;
 
   return (
     <DataAppShell
@@ -424,7 +342,16 @@ const DefaultShell = ({ initialCollapsed = false }: { initialCollapsed?: boolean
       breadcrumbs={htsBreadcrumbs}
       headerActions={
         <>
-          <DataCountPills dataCounts={dataCounts} />
+          {!isFirstStep && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setActiveStepId(htsWorkflowSteps[activeStepIndex - 1].id)}
+              className="gap-1"
+            >
+              Back
+            </Button>
+          )}
           <Button
             size="sm"
             disabled={isLastStep}
@@ -453,12 +380,11 @@ export const Default: Story = {
 
     await step("Shell renders all regions", async () => {
       expect(canvas.getByText("HTS")).toBeInTheDocument();
-      expect(canvas.getByText("Project")).toBeInTheDocument();
-      expect(canvas.getByText("Explorer")).toBeInTheDocument();
+      expect(canvas.getByRole("button", { name: "Project" })).toBeInTheDocument();
+      expect(canvas.getByRole("button", { name: "Explorer" })).toBeInTheDocument();
       expect(canvas.getByText("Workflow")).toBeInTheDocument();
-      expect(canvas.getAllByText("Data Overview").length).toBeGreaterThan(0);
+      expect(canvas.getAllByText("Step 1 Name").length).toBeGreaterThan(0);
       expect(canvas.getAllByText("All Projects").length).toBeGreaterThan(0);
-      expect(canvas.getByText("649,568")).toBeInTheDocument();
       expect(canvas.getByText("Next")).toBeInTheDocument();
       expect(canvas.getByText("Main content area")).toBeInTheDocument();
     });
@@ -486,7 +412,7 @@ export const CollapsedWorkflow: Story = {
     const canvas = within(canvasElement);
 
     await step("Collapsed workflow — step labels hidden", async () => {
-      expect(canvas.queryByText("Global Filtering")).not.toBeInTheDocument();
+      expect(canvas.queryByText("Step 2 Name")).not.toBeInTheDocument();
       expect(canvas.queryByText("Workflow")).not.toBeInTheDocument();
     });
 
@@ -571,16 +497,6 @@ const InteractiveShell = () => {
   const activeStep = steps.find((s) => s.isActive);
   const isProjectPage = activePageId === "project";
 
-  const dataCounts: DataCount[] =
-    activeStep?.inputCount == null
-      ? []
-      : [
-          { label: "INPUT", count: activeStep.inputCount, variant: "outline" },
-          ...(activeStep.outputCount == null
-            ? []
-            : [{ label: "Output", count: activeStep.outputCount, variant: "primary" as const }]),
-        ];
-
   return (
     <DataAppShell
       appName="HTS"
@@ -597,7 +513,6 @@ const InteractiveShell = () => {
       headerActions={
         isProjectPage && (
           <>
-            <DataCountPills dataCounts={dataCounts} />
             <Button size="sm">Next</Button>
           </>
         )
@@ -627,7 +542,7 @@ export const Interactive: Story = {
 
     await step("Interactive shell renders", async () => {
       expect(canvas.getByText("HTS")).toBeInTheDocument();
-      expect(canvas.getAllByText("Data Overview").length).toBeGreaterThan(0);
+      expect(canvas.getAllByText("Step 1 Name").length).toBeGreaterThan(0);
     });
   },
   parameters: {
@@ -916,8 +831,8 @@ export const MultipleNavGroups: Story = {
     const canvas = within(canvasElement);
 
     await step("All pages from both groups are visible", async () => {
-      expect(canvas.getByText("Project")).toBeInTheDocument();
-      expect(canvas.getByText("Explorer")).toBeInTheDocument();
+      expect(canvas.getByRole("button", { name: "Project" })).toBeInTheDocument();
+      expect(canvas.getByRole("button", { name: "Explorer" })).toBeInTheDocument();
       expect(canvas.getAllByText("Filters").length).toBeGreaterThan(0);
     });
 
@@ -1228,16 +1143,16 @@ export const CompactProperty: Story = {
     await step("Compact icon rail renders on desktop (hidden on mobile)", async () => {
       const rail = canvasElement.querySelector("[data-slot='data-app-sidebar-rail']");
       expect(rail).toBeInTheDocument();
-      // Icon rail should have width of 60px
-      expect(rail).toHaveClass("w-[60px]");
+      // Icon rail should have width of 48px
+      expect(rail).toHaveClass("w-12");
     });
 
-    await step("Icon rail displays icons and labels stacked vertically", async () => {
+    await step("Icon rail displays icon-only nav buttons labelled via aria-label", async () => {
       const rail = canvasElement.querySelector("[data-slot='data-app-sidebar-rail']");
-      // Labels should be present
-      expect(within(rail!).getByText("Project")).toBeInTheDocument();
-      expect(within(rail!).getByText("Explorer")).toBeInTheDocument();
-      expect(within(rail!).getByText("Filters")).toBeInTheDocument();
+      // Labels are exposed as accessible names (aria-label), not visible text
+      expect(within(rail!).getByRole("button", { name: "Project" })).toBeInTheDocument();
+      expect(within(rail!).getByRole("button", { name: "Explorer" })).toBeInTheDocument();
+      expect(within(rail!).getByRole("button", { name: "Filters" })).toBeInTheDocument();
     });
 
     await step("Group labels are hidden in compact icon rail", async () => {
@@ -1249,7 +1164,7 @@ export const CompactProperty: Story = {
 
     await step("Active page has primary background highlight in compact mode", async () => {
       const rail = canvasElement.querySelector("[data-slot='data-app-sidebar-rail']");
-      const projectBtn = within(rail!).getByText("Project").closest("button");
+      const projectBtn = within(rail!).getByRole("button", { name: "Project" });
       const iconDiv = projectBtn?.querySelector(".bg-primary\\/10");
       expect(iconDiv).toBeInTheDocument();
     });
diff --git a/src/components/composed/DataAppShell/DataAppShell.tsx b/src/components/composed/DataAppShell/DataAppShell.tsx
index 34373b5b..748c6dd5 100644
--- a/src/components/composed/DataAppShell/DataAppShell.tsx
+++ b/src/components/composed/DataAppShell/DataAppShell.tsx
@@ -130,7 +130,7 @@ interface SidebarBodyProps
     | "userMenu"
   > {
   /**
-   * compact=true  → narrow icon rail (60px): icons + tiny labels stacked, tooltips on hover
+   * compact=true  → narrow icon rail (48px): icon-only nav buttons, tooltips on hover
    * compact=false → expanded mobile sheet (220px): icon + label side-by-side rows
    */
   compact: boolean;
@@ -147,7 +147,7 @@ const pageIconVariants = cva(
         false: "bg-transparent",
       },
       compact: {
-        true: "w-9 h-9 hover:bg-muted",
+        true: "w-[30px] h-[30px] hover:bg-muted",
         false: "w-8 h-8",
       },
     },
@@ -173,8 +173,8 @@ function SidebarBody({
       {/* ── Header: app icon / name + version ──────────────────────────────── */}
       <div
         className={cn(
-          "shrink-0 border-b border-sidebar-border",
-          compact ? "flex justify-center py-2" : "flex px-3 py-2.5"
+          "shrink-0",
+          compact ? "flex justify-center pt-1 pb-2" : "flex px-3 py-2.5"
         )}
       >
         <DropdownMenu>
@@ -189,8 +189,7 @@ function SidebarBody({
               {/* Icon */}
               <span
                 className={cn(
-                  "flex items-center justify-center rounded-lg bg-sidebar-accent border border-sidebar-border font-bold text-foreground shrink-0",
-                  compact ? "w-9 h-9 text-[11px]" : "w-8 h-8 text-[10px]"
+                  "flex items-center justify-center rounded-lg bg-sidebar-accent border border-sidebar-border font-bold text-foreground shrink-0 w-8 h-8 text-[10px]"
                 )}
               >
                 {appIcon ?? appName}
@@ -291,7 +290,7 @@ function SidebarBody({
                 const iconEl = Icon ? (
                   <Icon
                     className={cn(
-                      "w-5 h-5",
+                      "w-4 h-4",
                       page.isActive ? "text-primary" : "text-muted-foreground"
                     )}
                   />
@@ -315,22 +314,13 @@ function SidebarBody({
                       <TooltipTrigger asChild>
                         <button
                           type="button"
-                          className="flex flex-col items-center gap-0.5 cursor-pointer bg-transparent border-none p-0 w-full"
+                          aria-label={page.label}
+                          className="flex flex-col items-center cursor-pointer bg-transparent border-none p-0 w-full"
                           onClick={handleClick}
                         >
                           <div className={cn(pageIconVariants({ active: page.isActive ?? false, compact: true }))}>
                             {iconEl}
                           </div>
-                          <span
-                            className={cn(
-                              "text-[10px] font-medium leading-tight text-center",
-                              page.isActive
-                                ? "text-foreground font-semibold"
-                                : "text-muted-foreground"
-                            )}
-                          >
-                            {page.label}
-                          </span>
                         </button>
                       </TooltipTrigger>
                       <TooltipContent side="right">{page.label}</TooltipContent>
@@ -387,7 +377,7 @@ function IconRailSidebar(props: Omit<SidebarBodyProps, "compact" | "onAfterNavCl
     <nav
       data-slot="data-app-sidebar-rail"
       aria-label="Application navigation"
-      className="hidden md:flex w-[60px] flex-col shrink-0 bg-sidebar border-r border-sidebar-border h-full z-50"
+      className="hidden md:flex w-12 flex-col shrink-0 bg-sidebar border-r border-sidebar-border h-full z-50"
     >
       <SidebarBody compact {...props} />
     </nav>
@@ -434,13 +424,13 @@ function TopNav({
                   ) : isClickable && item.onClick ? (
                     <button
                       type="button"
-                      className="text-[13px] text-primary hover:underline cursor-pointer bg-transparent border-none p-0 font-normal"
+                      className="text-sm text-primary hover:underline cursor-pointer bg-transparent border-none p-0 font-normal"
                       onClick={item.onClick}
                     >
                       {item.label}
                     </button>
                   ) : (
-                    <span className="text-[13px] text-muted-foreground">{item.label}</span>
+                    <span className="text-sm text-muted-foreground">{item.label}</span>
                   )}
                 </BreadcrumbItem>
               </React.Fragment>

From 62fb4b755a377b2367d670645c6563309edf4171 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 23 Jun 2026 22:27:30 +0000
Subject: [PATCH 4/5] Initial plan


From c5f20a33842b6ab89b33bc83f6d5a0ed74fb2afe Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 23 Jun 2026 22:34:47 +0000
Subject: [PATCH 5/5] fix(data-app-shell): fix 3 stale Storybook E2E test
 assertions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Commit a84f94b narrowed the sidebar rail (60px→48px), made nav buttons
icon-only (labels moved to aria-label + tooltip), and removed count
pills from WorkflowPanel — but left 3 play-test assertions stale:

- WorkflowPanelInteractions: remove getByText("1K") — counts no longer rendered
- MultipleNavGroups: use getByRole("button", {name:"Filters"}) instead of
  getByText("Filters") — nav items are icon-only with aria-label
- CompactProperty: change expected rail width "60px" → "48px"
---
 .../composed/DataAppShell/DataAppShell.stories.tsx       | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/composed/DataAppShell/DataAppShell.stories.tsx b/src/components/composed/DataAppShell/DataAppShell.stories.tsx
index f1fc0ffb..7ab95557 100644
--- a/src/components/composed/DataAppShell/DataAppShell.stories.tsx
+++ b/src/components/composed/DataAppShell/DataAppShell.stories.tsx
@@ -751,11 +751,10 @@ export const WorkflowPanelInteractions: Story = {
   play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
 
-    await step("Expanded panel shows step labels and counts", async () => {
+    await step("Expanded panel shows step labels", async () => {
       expect(canvas.getByText("Step Alpha")).toBeInTheDocument();
       expect(canvas.getByText("Step Beta")).toBeInTheDocument();
       expect(canvas.getByText("Disabled")).toBeInTheDocument();
-      expect(canvas.getByText("1K")).toBeInTheDocument();
     });
 
     await step("Clicking Step Beta makes it the active step", async () => {
@@ -833,7 +832,7 @@ export const MultipleNavGroups: Story = {
     await step("All pages from both groups are visible", async () => {
       expect(canvas.getByRole("button", { name: "Project" })).toBeInTheDocument();
       expect(canvas.getByRole("button", { name: "Explorer" })).toBeInTheDocument();
-      expect(canvas.getAllByText("Filters").length).toBeGreaterThan(0);
+      expect(canvas.getByRole("button", { name: "Filters" })).toBeInTheDocument();
     });
 
     await step("A separator divides the two groups in the icon rail", async () => {
@@ -846,7 +845,7 @@ export const MultipleNavGroups: Story = {
     await step("Active page icon has primary highlight", async () => {
       // Filters page is isActive — its icon container has bg-primary/10
       const rail = canvasElement.querySelector("[data-slot='data-app-sidebar-rail']");
-      const activePage = within(rail!).getByText("Filters").closest("button");
+      const activePage = within(rail!).getByRole("button", { name: "Filters" });
       const iconContainer = activePage?.querySelector(".bg-primary\\/10");
       expect(iconContainer).toBeInTheDocument();
     });
@@ -1183,7 +1182,7 @@ export const CompactProperty: Story = {
       // Icon rail has md:flex which means it's hidden on mobile
       expect(rail).toHaveClass("hidden", "md:flex");
       const railStyles = window.getComputedStyle(rail!);
-      expect(railStyles.width).toBe("60px");
+      expect(railStyles.width).toBe("48px");
     });
 
     await step("User menu is visible at bottom of icon rail", async () => {