fix(ui): align project rail focus order (#3167)

* fix(ui): align project rail focus order

Generated-by: Codex

* test(ui): cover directly nested button start tags

parseHTML auto-closes a <button> that opens directly inside another, so
the structural assertion alone cannot see that shape. Count start and end
tags on the raw markup as well; a single-token match keeps it linear.

Generated-by: Claude Code

Author: ARE404

apps/desktop/e2e/sidebar-project-row.spec.ts

@@ -10,7 +10,7 @@ function sessionRow(sidebar: Locator, sessionId: string): Locator {
   return sidebar.locator(`[data-session-id*=${JSON.stringify(sessionId)}]`);
 }
 
-test('project navigation and actions remain adjacent keyboard controls', async ({
+test('project navigation and actions follow their visual keyboard order', async ({
   projectSidebarWindow: page,
 }) => {
   await page.keyboard.press('Escape');
@@ -47,9 +47,9 @@ test('project navigation and actions remain adjacent keyboard controls', async (
   await expect(projectRow.locator('button button')).toHaveCount(0);
   await expect(navigation).toHaveAttribute('aria-expanded', 'true');
 
-  await action.focus();
+  await navigation.focus();
   await page.keyboard.press('Tab');
-  await expect(navigation).toBeFocused();
+  await expect(action).toBeFocused();
   await page.keyboard.press('Tab');
   await expect(firstSessionControl).toBeFocused();
 

apps/desktop/src/renderer/styles/sidebar.css

@@ -340,9 +340,10 @@
   }
 }
 
-/* SideNavItem owns each row button and only supports non-interactive
- * endContent. Action menus occupy a reserved trailing slot visually, but stay
- * siblings in the DOM so neither control contains the other. */
+/* SideNavItem owns each row button; interactive actions use its trailingAction
+ * sibling slot instead of non-interactive endContent. Menus occupy a reserved
+ * trailing slot visually, but stay siblings in the DOM so neither control
+ * contains the other. */
 .maka-session-row-action {
   position: absolute;
   inset-block-start: calc(
@@ -361,6 +362,7 @@
  * gutter + disclosure + SideNavItem gap. Empty projects have no disclosure and
  * use the default trailing inset above. */
 .maka-project-row
+  > div
   > .maka-session-row-action[data-position="before-disclosure"] {
   inset-inline-end: calc(var(--space-2) + var(--space-6) + var(--space-2));
 }
@@ -370,14 +372,14 @@
  * feedback only while the direct project action is targeted; a plain wrapper
  * :hover selector would also light the header over nested session rows. */
 @media (hover: hover) {
-  .maka-project-row:has(> .maka-session-row-action:hover)
+  .maka-project-row:has(> div > .maka-session-row-action:hover)
     > div
     > .astryx-side-nav-item {
     background-color: var(--color-overlay-hover);
   }
 }
 
-.maka-project-row:has(> .maka-session-row-action button:active)
+.maka-project-row:has(> div > .maka-session-row-action button:active)
   > div
   > .astryx-side-nav-item {
   background-color: var(--color-overlay-pressed);

packages/ui/src/__tests__/session-history-row-actions.test.tsx

@@ -49,6 +49,28 @@ const projectActions: ProjectRowActions = {
   onRestore: () => undefined,
 };
 
+function assertNoNestedButtons(markup: string): void {
+  // Structural check. A real regression here moves the action menu inside the
+  // navigation control, and the menu always ships wrapped in
+  // `.maka-session-row-action`, so the nesting survives parsing and is caught.
+  const { document } = parseHTML(markup);
+  assert.equal(
+    document.querySelector('button button') === null,
+    true,
+    'navigation and action controls must stay siblings',
+  );
+
+  // `parseHTML` auto-closes a `<button>` that opens directly inside another,
+  // which the structural check above then cannot see. Count start and end tags
+  // on the raw markup to cover that shape too. Single-token match, so this
+  // stays linear and cannot backtrack the way an enclosing-pair regex would.
+  let depth = 0;
+  for (const [, slash] of markup.matchAll(/<(\/?)button\b/g)) {
+    depth += slash === '/' ? -1 : 1;
+    assert.ok(depth <= 1, 'markup must not open a <button> inside another');
+  }
+}
+
 test('renders session navigation and row actions as sibling controls', () => {
   const markup = renderToStaticMarkup(
     <LocaleProvider locale="en">
@@ -62,7 +84,7 @@ test('renders session navigation and row actions as sibling controls', () => {
 
   assert.equal((markup.match(/<button\b/g) ?? []).length, 2);
   assert.match(markup, /class="maka-session-row-action"/);
-  assert.doesNotMatch(markup, /<button\b(?:(?!<\/button>)[\s\S])*<button\b/);
+  assertNoNestedButtons(markup);
 });
 
 test('renders Runtime Host live runs without requiring renderer-local streaming', () => {
@@ -167,7 +189,11 @@ test('renders collapsible project navigation and row actions as sibling controls
   assert.equal(metadata.textContent, '1');
   assert.equal(controlledGroup.getAttribute('aria-hidden'), 'false');
   const projectButtons = [...projectRow.querySelectorAll('button')];
-  assert.equal(projectButtons[0], action);
-  assert.equal(projectButtons[1], navigation);
-  assert.doesNotMatch(markup, /<button\b(?:(?!<\/button>)[\s\S])*<button\b/);
+  assert.equal(
+    projectButtons.indexOf(navigation),
+    0,
+    'project navigation precedes its auxiliary action',
+  );
+  assert.equal(projectButtons.indexOf(action), 1, 'project action precedes nested tasks');
+  assertNoNestedButtons(markup);
 });

packages/ui/src/session-history-list.tsx

@@ -323,15 +323,6 @@ function ProjectNavRow(props: {
   const hasActions = props.project !== undefined && props.projectActions !== undefined;
   return (
     <div data-project-id={props.groupKey} className="maka-project-row">
-      {props.project && props.projectActions ? (
-        <ProjectItemActions
-          key="actions"
-          project={props.project}
-          actions={props.projectActions}
-          onStartRename={props.onStartRename}
-          position={hasSessions ? 'before-disclosure' : 'trailing'}
-        />
-      ) : null}
       <SideNavItem
         key="navigation"
         label={props.label}
@@ -344,6 +335,16 @@ function ProjectNavRow(props: {
             reserveAction={hasActions}
           />
         }
+        trailingAction={
+          props.project && props.projectActions ? (
+            <ProjectItemActions
+              project={props.project}
+              actions={props.projectActions}
+              onStartRename={props.onStartRename}
+              position={hasSessions ? 'before-disclosure' : 'trailing'}
+            />
+          ) : undefined
+        }
       >
         {/* sidebar.css preserves one SideNav nesting step for project hierarchy. */}
         {hasSessions ? (
@@ -527,8 +528,9 @@ function ProjectItemActions(props: {
     })();
   }
 
-  // Projects keep a permanent MoreMenu. It is a sibling of SideNavItem so the
-  // row's collapse button and the menu remain separate interactive controls.
+  // Projects keep a permanent MoreMenu. SideNavItem's trailingAction slot puts
+  // it after the collapse button and before the nested tasks, so visual and
+  // keyboard order agree without nesting either interactive control.
   const menuItems = project.archivedAt !== undefined
     ? [
         {

patches/@astryxdesign+core+0.4.0.patch

@@ -692,6 +692,53 @@ index 867ed5a..4b8f835 100644
  }
  Markdown.displayName = 'Markdown';
 \ No newline at end of file
+diff --git a/node_modules/@astryxdesign/core/dist/SideNav/SideNavItem.d.ts b/node_modules/@astryxdesign/core/dist/SideNav/SideNavItem.d.ts
+index 16107cf..57aeb6c 100644
+--- a/node_modules/@astryxdesign/core/dist/SideNav/SideNavItem.d.ts
++++ b/node_modules/@astryxdesign/core/dist/SideNav/SideNavItem.d.ts
+@@ -61,6 +61,12 @@ export interface SideNavItemProps extends BaseProps<HTMLElement> {
+      * Right-side content (badges, counts).
+      */
+     endContent?: ReactNode;
++    /**
++     * Interactive trailing control rendered after the navigation control and
++     * before any nested items. Unlike `endContent`, this is a sibling rather
++     * than content inside the navigation control.
++     */
++    trailingAction?: ReactNode;
+     /**
+      * Sub-items for nesting.
+      */
+@@ -107,7 +113,7 @@ export interface SideNavItemProps extends BaseProps<HTMLElement> {
+  * </SideNavItem>
+  * ```
+  */
+-export declare function SideNavItem({ as, label, icon, selectedIcon, isSelected, isDisabled, href, onClick, endContent, children, collapsible: itemCollapsible, size, 'data-testid': testId, ref, xstyle, }: SideNavItemProps): import("react").JSX.Element | null;
++export declare function SideNavItem({ as, label, icon, selectedIcon, isSelected, isDisabled, href, onClick, endContent, trailingAction, children, collapsible: itemCollapsible, size, 'data-testid': testId, ref, xstyle, }: SideNavItemProps): import("react").JSX.Element | null;
+ export declare namespace SideNavItem {
+     var displayName: string;
+ }
+diff --git a/node_modules/@astryxdesign/core/dist/SideNav/SideNavItem.js b/node_modules/@astryxdesign/core/dist/SideNav/SideNavItem.js
+index a72d264..c65bd32 100644
+--- a/node_modules/@astryxdesign/core/dist/SideNav/SideNavItem.js
++++ b/node_modules/@astryxdesign/core/dist/SideNav/SideNavItem.js
+@@ -159,6 +159,7 @@ export function SideNavItem({
+   href,
+   onClick,
+   endContent,
++  trailingAction,
+   children,
+   collapsible: itemCollapsible,
+   size = 'md',
+@@ -447,7 +448,7 @@ export function SideNavItem({
+   const item = /*#__PURE__*/_jsxs("div", {
+     ref: itemRef,
+     ...stylex.props(styles.root, xstyle),
+-    children: [itemElement, hasChildren && !isCollapsed && /*#__PURE__*/_jsx("div", {
++    children: [itemElement, trailingAction, hasChildren && !isCollapsed && /*#__PURE__*/_jsx("div", {
+       id: `${id}-children`,
+       role: "group",
+       "aria-labelledby": `${id}-label`,
 diff --git a/node_modules/@astryxdesign/core/dist/hooks/useHotkeys.js b/node_modules/@astryxdesign/core/dist/hooks/useHotkeys.js
 index 65f9278..f7515e2 100644
 --- a/node_modules/@astryxdesign/core/dist/hooks/useHotkeys.js
@@ -1012,6 +1059,39 @@ index a6f850b..b6e0f2a 100644
    return rendered;
  }
 
+diff --git a/node_modules/@astryxdesign/core/src/SideNav/SideNavItem.tsx b/node_modules/@astryxdesign/core/src/SideNav/SideNavItem.tsx
+index 41ccdb5..90b2406 100644
+--- a/node_modules/@astryxdesign/core/src/SideNav/SideNavItem.tsx
++++ b/node_modules/@astryxdesign/core/src/SideNav/SideNavItem.tsx
+@@ -292,6 +292,12 @@ export interface SideNavItemProps extends BaseProps<HTMLElement> {
+    * Right-side content (badges, counts).
+    */
+   endContent?: ReactNode;
++  /**
++   * Interactive trailing control rendered after the navigation control and
++   * before any nested items. Unlike `endContent`, this is a sibling rather
++   * than content inside the navigation control.
++   */
++  trailingAction?: ReactNode;
+   /**
+    * Sub-items for nesting.
+    */
+@@ -355,6 +361,7 @@ export function SideNavItem({
+   href,
+   onClick,
+   endContent,
++  trailingAction,
+   children,
+   collapsible: itemCollapsible,
+   size = 'md',
+@@ -681,6 +688,7 @@ export function SideNavItem({
+   const item = (
+     <div ref={itemRef} {...stylex.props(styles.root, xstyle)}>
+       {itemElement}
++      {trailingAction}
+       {hasChildren && !isCollapsed && (
+         <div
+           id={`${id}-children`}
 diff --git a/node_modules/@astryxdesign/core/src/hooks/useStreamingText.ts b/node_modules/@astryxdesign/core/src/hooks/useStreamingText.ts
 index 55b441e..7aa4174 100644
 --- a/node_modules/@astryxdesign/core/src/hooks/useStreamingText.ts

patches/README.md

@@ -28,7 +28,7 @@ Delete when that guard passes against an unpatched package.
 
 ## `@astryxdesign/core@0.4.0`
 
-Five published component seams drop host-owned state or semantics:
+Six published component seams drop host-owned state or semantics:
 
 - `ChatLayout` needs a conversation identity that resets scroll/unread state
   without remounting its composer slot and discarding the live draft.
@@ -50,6 +50,11 @@ Five published component seams drop host-owned state or semantics:
   `inlineCompletion` / `inlineCompletionLabel` draw the offer inside the editor,
   excluded from `serialize`, so the preview and the insertion are one layout.
   Upstream ask: [facebook/astryx#4822](https://github.com/facebook/astryx/issues/4822).
+- `SideNavItem` needs an interactive `trailingAction` sibling between its
+  navigation control and nested items. `endContent` renders inside the primary
+  control, while a sibling outside `SideNavItem` can only come before the
+  project control or after all of its tasks; neither produces the visual Tab
+  order used by the task rail.
 
 Blank UA-CH `navigator.userAgentData.platform` must also not mean "not Apple".
 Electron builds with a rewritten identity ship `platform: ''`, which made every