UX-1338 - Registry updates and misc for the RPCN branch use

[SpicyPete]

UX-1338 — Registry updates, shared UI & RPCN bug fixes

Supporting changes split out of the RPCN Visual Editor PR (#2553) to keep that review focused. Merging this first lets #2553 shrink once master is pulled back in.

Registry & shared UI

• use-scroll-shadow.ts — reworked the hook: now takes a ref and an
  orientation ('vertical' | 'horizontal', default vertical) and returns
  { start, end } edge flags, recomputing on scroll/resize and re-rendering only
  when an edge actually flips. (API change from the old sentinel-based
  useScrollShadow(enabled); the in-repo consumer — DialogBody — is updated here.)
• drag-scroll-area.tsx (new) — horizontal click-and-drag scroll container
  with alpha edge-fades and keyboard-focus-into-view, built on the hook.
• tabs.tsx — adds ScrollableTabsList (a TabsList wrapped in
  DragScrollArea) so an overflowing tab strip drag-scrolls with edge fades
  instead of wrapping.
• dialog.tsx — DialogBody gains optional fading top/bottom scroll shadows
  (scrollShadow, default on) when its content overflows.
• dropdown-menu.tsx — adds closeOnClick and deprecates onSelect (Base UI
  menu items have no onSelect; use onClick, add closeOnClick={false} to keep
  the menu open).

AI

• ai-elements/prompt-input.tsx — the "Add attachments" menu item now uses
  onClick + closeOnClick={false} so the menu stays open when the file dialog
  opens, matching the dropdown-menu API change above.

Bug fixes

• Logs table overflow (log-explorer.tsx) — drop the nested
  min-h-0/overflow-auto wrappers and scroll the table container directly, so
  wide log rows no longer overflow / clip the pagination controls.
• Cancel a starting pipeline (pipeline-status-toggle.tsx) — a STARTING
  pipeline now stays interactiv to Stopped (matching
  STOPPABLE_STATES), rescuing one stuck mid-start; the confirm toast reads
  ""Canceling pipeline start". Only STOPPING stays locked while it settles.
  Adds explicit aria-labels. Covered by a new test.

Dev & config

• **`debug-helper/connect-config ex Connect config
  fixtures (heavy branching, omni-channel platform, resource indirection) for
  exercising the pipeline visua
• debug-helper/feature-flag-overrides.ts — sort flag keys alphabetically in
  the overrides UI.
• __root.tsx — gate the TanStack Router devtools on IsDev rather than
  process.env.NODE_ENV.
• .gitignore — ignore the .tanstack/ router temp cache.

Testing

• bun run type:check and `bun
• New pipeline-status-toggle.test.tsx (STARTING stays interactive & cancellable;
  STOPPING stays locked) passes

Risk

Low. Registry files mirror upstream registry components; the only API change
(useScrollShadow) has its sole in-repo consumer updated in the same PR.

[github-actions]

✅ Clean — no registry drift, off-token colours, or ad-hoc classes

App: frontend · Scope: diff vs origin/master · Files: 12

	Count
⚠️ Outdated registry components	0
🛠 Locally-modified components	0
❓ Unknown to registry	0
🎨 Off-token palette colours	0
🔢 Ad-hoc utility classes	0

Generated by lookout audit-changes.

[SpicyPete]

@claude review

[github-actions]

Claude finished @SpicyPete's task in 5m 22s —— View job

---

Claude PR Review — UX-1338

• Gather context (CLAUDE.md + all 13 changed files)
• Review registry / shared UI changes
• Review bug fixes (log-explorer, pipeline-status-toggle)
• Review dev/config changes
• Post review feedback

Overall this is a clean, well-documented PR. The code comments explaining the why (LTR assumption, drag-vs-click threshold, keyboard detail === 0, underline baseline preservation) are excellent and make review easy. useScrollShadow's single in-repo consumer (DialogBody) is correctly migrated, and I verified the onSelect deprecation doesn't break existing consumers (DeleteResourceMenuItem defines its own onSelect prop and already routes through onClick). Nothing blocking. A few notes below.

---

🔶 Worth a look

1. log-explorer.tsx — behavior change from overflow-auto → overflow-x-auto
frontend/src/components/ui/connect/log-explorer.tsx:431

The old inner wrapper was overflow-auto (both axes); the new container is overflow-x-auto only, and min-h-0 was dropped from the outer flex column. This is the intended fix (scroll the table container directly so pagination isn't clipped), but it does remove any vertical self-scroll of the table region — vertical overflow now flows to the page scroll instead. Please confirm visually with a long, live-updating log list that:

• the sticky header (if any) still behaves as desired, and
• a tall table doesn't push the pagination controls off-screen in constrained-height contexts.

If the table was never meant to scroll internally, this is fine as-is — just flagging the changed axis.

2. __root.tsx — dev-gate now inconsistent with DebugHelper
frontend/src/routes/__root.tsx:57-60

The devtools now gate on IsDev, but two lines up DebugHelper still uses process.env.NODE_ENV === 'development'. IsDev is broader (!NODE_ENV || 'development' || REACT_APP_DEV_HINT), so the two dev-only widgets can now toggle under different conditions. For consistency, consider using IsDev for both.

{IsDev && <DebugHelper />}

Fix this →

---

💬 Minor / non-blocking

3. PR description vs. code: the body says dropdown-menu.tsx "adds closeOnClick", but the diff only adds the onSelect?: never deprecation. closeOnClick is actually provided natively by Base UI's Menu.Item and flows through via React.ComponentProps<typeof DropdownMenuPrimitive.Item>. Code is correct — just the changelog wording overstates it.

4. drag-scroll-area.tsx — pointer capture vs. onPointerLeave: once a real drag calls setPointerCapture, pointerleave generally won't fire mid-drag, so the onPointerLeave={onPointerEnd} guard mainly covers the pre-capture case. pointerup releases capture and ends the drag correctly, and onClickCapture always resets dragged, so there's no stuck state — just noting the leave handler is largely a no-op during an active drag.

5. tabs.tsx:5 — import type React → import React: the runtime import appears unnecessary if React is only used as a type here (React.useState/JSX aren't newly introduced in this file). Harmless since lint passes; revert to import type if it's genuinely type-only.

---

✅ Nice work

• pipeline-status-toggle.tsx: the STARTING-stays-cancellable logic is correct, isStarting is properly a dep of performStop, and the aria-labels + confirm-copy branching are a good touch. The new .test.tsx (correct extension for a JSDOM component test) covers both the interactive-STARTING and locked-STOPPING paths well.
• use-scroll-shadow.ts: re-rendering only when an edge flips, and observing children via ResizeObserver + MutationObserver, is a solid, leak-safe implementation.

I did not run type:check/lint/test locally (review-only); the PR notes they pass and the registry audit came back clean.
· UX-1338/registry-updates-and-bugs