feat(schedule-details): PR01a — App Router route shell + tab content component

Add the Next.js App Router pages for the schedule detail route and the
ScheduleDetailPageTabContent component in its own directory:

Route group (Schedule):
- layout.tsx → ScheduleDetailPage (minimal shell, renders children only for now)
- page.tsx → redirect bare [scheduleId] to default tab (overview) with replace
- [scheduleTab]/page.tsx → ScheduleDetailPageTabContent
- [scheduleTab]/loading.tsx — SectionLoadingIndicator
- [scheduleTab]/error.tsx — inline error panel (tabs-error component ships in PR01c)

Views (each component in its own sibling directory under domain-schedules/):
- schedule-detail-page/: tabs config (4 tabs: overview/backfills/input/runs),
  page types, and minimal layout shell (header + tabs wired in subsequent PRs)
- schedule-detail-page-tab-content/: notFound() for unknown slugs, placeholder
  per valid tab, styles, types, tests

Browser tests: all 4 valid tabs render, unknown tab → notFound()

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: Assem-Uber

src/app/(Home)/(Schedule)/domains/[domain]/[cluster]/schedules/[scheduleId]/[scheduleTab]/error.tsx

@@ -0,0 +1,23 @@
+'use client';
+import React from 'react';
+
+import ErrorPanel from '@/components/error-panel/error-panel';
+import PanelSection from '@/components/panel-section/panel-section';
+
+type Props = {
+  error: Error;
+  reset: () => void;
+};
+
+export default function ScheduleDetailPageError({ error, reset }: Props) {
+  return (
+    <PanelSection>
+      <ErrorPanel
+        error={error}
+        message="Failed to load schedule content"
+        actions={[{ kind: 'retry', label: 'Retry' }]}
+        reset={reset}
+      />
+    </PanelSection>
+  );
+}

src/app/(Home)/(Schedule)/domains/[domain]/[cluster]/schedules/[scheduleId]/[scheduleTab]/loading.tsx

@@ -0,0 +1,3 @@
+import SectionLoadingIndicator from '@/components/section-loading-indicator/section-loading-indicator';
+
+export default SectionLoadingIndicator;

src/app/(Home)/(Schedule)/domains/[domain]/[cluster]/schedules/[scheduleId]/[scheduleTab]/page.tsx

@@ -0,0 +1,3 @@
+import ScheduleDetailPageTabContent from '@/views/domain-schedules/schedule-detail-page-tab-content/schedule-detail-page-tab-content';
+
+export default ScheduleDetailPageTabContent;

src/app/(Home)/(Schedule)/domains/[domain]/[cluster]/schedules/[scheduleId]/layout.tsx

@@ -0,0 +1,3 @@
+import ScheduleDetailPage from '@/views/domain-schedules/schedule-detail-page/schedule-detail-page';
+
+export default ScheduleDetailPage;

src/app/(Home)/(Schedule)/domains/[domain]/[cluster]/schedules/[scheduleId]/page.tsx

@@ -0,0 +1,17 @@
+import { redirect } from 'next/navigation';
+
+import { DEFAULT_SCHEDULE_DETAIL_TAB } from '@/views/domain-schedules/schedule-detail-page/schedule-detail-tabs.config';
+
+type Props = {
+  params: {
+    domain: string;
+    cluster: string;
+    scheduleId: string;
+  };
+};
+
+export default function ScheduleDetailRedirectPage({ params }: Props) {
+  redirect(
+    `/domains/${encodeURIComponent(params.domain)}/${encodeURIComponent(params.cluster)}/schedules/${encodeURIComponent(params.scheduleId)}/${DEFAULT_SCHEDULE_DETAIL_TAB}`
+  );
+}

src/views/domain-schedules/schedule-detail-page-tab-content/__tests__/schedule-detail-page-tab-content.test.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+
+import { render, screen } from '@/test-utils/rtl';
+
+import { type ScheduleDetailPageParams } from '../../schedule-detail-page/schedule-detail-page.types';
+import ScheduleDetailPageTabContent from '../schedule-detail-page-tab-content';
+
+jest.mock('next/navigation', () => ({
+  ...jest.requireActual('next/navigation'),
+  notFound: jest.fn(() => {
+    throw new Error('NEXT_NOT_FOUND');
+  }),
+}));
+
+describe(ScheduleDetailPageTabContent.name, () => {
+  it('renders placeholder for overview tab', () => {
+    setup({ scheduleTab: 'overview' });
+    expect(screen.getByText(/Overview/i)).toBeInTheDocument();
+  });
+
+  it('renders placeholder for backfills tab', () => {
+    setup({ scheduleTab: 'backfills' });
+    expect(screen.getByText(/Backfills/i)).toBeInTheDocument();
+  });
+
+  it('renders placeholder for input tab', () => {
+    setup({ scheduleTab: 'input' });
+    expect(screen.getByText(/Input/i)).toBeInTheDocument();
+  });
+
+  it('renders placeholder for runs tab', () => {
+    setup({ scheduleTab: 'runs' });
+    expect(screen.getByText(/Runs/i)).toBeInTheDocument();
+  });
+
+  it('calls notFound for unknown tab slug', () => {
+    const { notFound } = jest.requireMock('next/navigation');
+    expect(() =>
+      setup({
+        scheduleTab: 'unknown-tab' as ScheduleDetailPageParams['scheduleTab'],
+      })
+    ).toThrow('NEXT_NOT_FOUND');
+    expect(notFound).toHaveBeenCalled();
+  });
+});
+
+function setup({
+  scheduleTab = 'overview',
+}: {
+  scheduleTab?: ScheduleDetailPageParams['scheduleTab'];
+} = {}) {
+  render(
+    <ScheduleDetailPageTabContent
+      params={{
+        domain: 'test-domain',
+        cluster: 'test-cluster',
+        scheduleId: 'my-schedule',
+        scheduleTab,
+      }}
+    />
+  );
+}

src/views/domain-schedules/schedule-detail-page-tab-content/schedule-detail-page-tab-content.styles.ts

@@ -0,0 +1,17 @@
+import type {
+  StyletronCSSObject,
+  StyletronCSSObjectOf,
+} from '@/hooks/use-styletron-classes';
+
+const cssStylesObj = {
+  tabContentContainer: (theme) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    marginTop: theme.sizing.scale900,
+    marginBottom: theme.sizing.scale900,
+    flex: 1,
+  }),
+} satisfies StyletronCSSObject;
+
+export const cssStyles: StyletronCSSObjectOf<typeof cssStylesObj> =
+  cssStylesObj;

src/views/domain-schedules/schedule-detail-page-tab-content/schedule-detail-page-tab-content.tsx

@@ -0,0 +1,29 @@
+'use client';
+import React from 'react';
+
+import { notFound } from 'next/navigation';
+
+import useStyletronClasses from '@/hooks/use-styletron-classes';
+import decodeUrlParams from '@/utils/decode-url-params';
+
+import scheduleDetailTabsConfig from '../schedule-detail-page/schedule-detail-tabs.config';
+import { type ScheduleDetailPageParams } from '../schedule-detail-page/schedule-detail-page.types';
+
+import { cssStyles } from './schedule-detail-page-tab-content.styles';
+import { type Props } from './schedule-detail-page-tab-content.types';
+
+export default function ScheduleDetailPageTabContent({ params }: Props) {
+  const { cls } = useStyletronClasses(cssStyles);
+  const decodedParams = decodeUrlParams(params) as ScheduleDetailPageParams;
+  const tabConfig = scheduleDetailTabsConfig[decodedParams.scheduleTab];
+
+  if (!tabConfig) {
+    return notFound();
+  }
+
+  return (
+    <div className={cls.tabContentContainer}>
+      <div>{tabConfig.title} — coming soon</div>
+    </div>
+  );
+}

src/views/domain-schedules/schedule-detail-page-tab-content/schedule-detail-page-tab-content.types.ts

@@ -0,0 +1,5 @@
+import { type ScheduleDetailPageParams } from '@/views/domain-schedules/schedule-detail-page/schedule-detail-page.types';
+
+export type Props = {
+  params: ScheduleDetailPageParams;
+};

src/views/domain-schedules/schedule-detail-page/schedule-detail-page.tsx

@@ -0,0 +1,5 @@
+import { type Props } from './schedule-detail-page.types';
+
+export default function ScheduleDetailPage({ children }: Props) {
+  return <>{children}</>;
+}