Generated with Hive: Build tabbed Context page and migrate Learn, Calls, Agent Logs routes

src/__tests__/e2e/specs/calls/calls-navigation.spec.ts

@@ -31,25 +31,20 @@ test.describe('Calls Navigation', () => {
   });
 
   test('should navigate to calls page via sidebar', async ({ page }) => {
-    // Expand Context section first if needed
+    // Click the single Context sidebar link
     const contextButton = page.locator('[data-testid="nav-context"]');
-    const callsLink = page.locator(selectors.navigation.callsLink);
+    await contextButton.click();
+    await page.waitForURL(/\/w\/.*\/context\/learn/, { timeout: 30000 });
 
-    const isCallsVisible = await callsLink.isVisible().catch(() => false);
-    if (!isCallsVisible) {
-      await contextButton.click();
-      await callsLink.waitFor({ state: 'visible', timeout: 5000 });
-    }
-
-    // Click the calls navigation link
-    await callsLink.click();
+    // Click the Calls tab
+    await page.locator('a[href*="/context/calls"]').first().click();
 
     // Wait for URL to change to calls page
-    await page.waitForURL(/\/w\/.*\/calls/, { timeout: 10000 });
+    await page.waitForURL(/\/w\/.*\/context\/calls/, { timeout: 10000 });
 
     // Verify we're on the calls page
     await expect(page.locator(selectors.pageTitle.calls)).toBeVisible();
-    expect(page.url()).toContain('/calls');
+    expect(page.url()).toContain('/context/calls');
   });
 
   test('should display calls page title', async ({ page }) => {

src/__tests__/e2e/specs/capture-learn.spec.ts

@@ -12,7 +12,7 @@ test('Capture /learn documentation viewer UI', async ({ page }) => {
   console.log('Workspace slug:', workspaceSlug);
 
   // Navigate to learn page
-  await page.goto(`http://localhost:3000/w/${workspaceSlug}/learn`);
+  await page.goto(`http://localhost:3000/w/${workspaceSlug}/context/learn`);
   await page.waitForLoadState('networkidle');
   await page.waitForTimeout(3000);
 

src/__tests__/e2e/specs/context/context-learn-message.spec.ts

@@ -36,7 +36,7 @@ test.describe('Context Learn Documentation Viewer', () => {
     await contextLearnPage.navigateViaNavigation();
 
     // Verify we're on the Context Learn page
-    await expect(page).toHaveURL(/\/w\/.*\/learn/, { timeout: 30000 });
+    await expect(page).toHaveURL(/\/w\/.*\/context\/learn/, { timeout: 30000 });
 
     // Verify the page loaded (either docs or concepts section visible)
     const isLoaded = await contextLearnPage.isLoaded();
@@ -91,7 +91,7 @@ test.describe('Context Learn Documentation Viewer', () => {
     await contextLearnPage.navigateViaNavigation();
 
     // Verify we're on Context Learn page
-    await expect(page).toHaveURL(/\/w\/.*\/learn/);
+    await expect(page).toHaveURL(/\/w\/.*\/context\/learn/);
 
     // Verify docs section is present
     await expect(page.locator(selectors.learn.docsSection)).toBeVisible();

src/__tests__/e2e/support/page-objects/CallsPage.ts

@@ -12,7 +12,7 @@ export class CallsPage {
    * Navigate to calls page for a specific workspace
    */
   async goto(workspaceSlug: string): Promise<void> {
-    await this.page.goto(`http://localhost:3000/w/${workspaceSlug}/calls`);
+    await this.page.goto(`http://localhost:3000/w/${workspaceSlug}/context/calls`);
     await this.waitForLoad();
   }
 
@@ -56,19 +56,14 @@ export class CallsPage {
    * Navigate to calls page via sidebar
    */
   async navigateViaNavigation(): Promise<void> {
-    // First, expand Context section if it's not already expanded
-    const contextButton = this.page.locator(selectors.navigation.contextButton);
-    const callsLink = this.page.locator(selectors.navigation.callsLink);
+    // Click the single Context link in the sidebar — it redirects to /context/learn,
+    // then navigate directly to /context/calls via the tab bar
+    const contextLink = this.page.locator(selectors.navigation.contextButton);
+    await contextLink.click();
+    await this.page.waitForURL(/\/w\/.*\/context\/learn/, { timeout: 10000 });
 
-    // Check if calls link is visible, if not, click context to expand
-    const isCallsVisible = await callsLink.isVisible().catch(() => false);
-    if (!isCallsVisible) {
-      await contextButton.click();
-      // Wait for calls link to become visible after expanding
-      await callsLink.waitFor({ state: 'visible', timeout: 5000 });
-    }
-
-    await callsLink.click();
-    await this.page.waitForURL(/\/w\/.*\/calls/, { timeout: 10000 });
+    // Click the Calls tab
+    await this.page.locator('a[href*="/context/calls"]').first().click();
+    await this.page.waitForURL(/\/w\/.*\/context\/calls/, { timeout: 10000 });
   }
 }

src/__tests__/e2e/support/page-objects/ContextLearnPage.ts

@@ -12,7 +12,7 @@ export class ContextLearnPage {
    * Navigate to Context Learn page for a specific workspace
    */
   async goto(workspaceSlug: string): Promise<void> {
-    await this.page.goto(`http://localhost:3000/w/${workspaceSlug}/learn`);
+    await this.page.goto(`http://localhost:3000/w/${workspaceSlug}/context/learn`);
     await this.waitForLoad();
   }
 
@@ -32,35 +32,22 @@ export class ContextLearnPage {
    * Navigate to Context Learn page via sidebar navigation
    */
   async navigateViaNavigation(): Promise<void> {
-    // First expand the Context section if not already expanded
-    const contextButton = this.page.locator(selectors.navigation.contextButton);
-    const learnLink = this.page.locator(selectors.navigation.learnLink).first();
-
-    // Check if learn link is visible, if not, click Context to expand
-    const isLearnVisible = await learnLink.isVisible().catch(() => false);
-    if (!isLearnVisible) {
-      await contextButton.click();
-      await learnLink.waitFor({ state: 'visible', timeout: 15000 });
-    }
+    // Click the single Context link in the sidebar
+    const contextLink = this.page.locator(selectors.navigation.contextButton);
 
     // Ensure page is fully loaded and network is idle before navigation
     await this.page.waitForLoadState('networkidle', { timeout: 30000 }).catch(() => {
-      // If networkidle times out, fall back to domcontentloaded
       return this.page.waitForLoadState('domcontentloaded');
     });
-
-    // Wait for the link to be attached and stable
-    await learnLink.waitFor({ state: 'attached', timeout: 15000 });
-
-    // Small delay to ensure link is fully interactive (reduces race conditions)
-    await this.page.waitForTimeout(100);
-
-    // Wait for navigation to complete after clicking (using Promise.all for coordination)
+
+    await contextLink.waitFor({ state: 'attached', timeout: 15000 });
+
+    // Wait for navigation to complete after clicking
     await Promise.all([
-      this.page.waitForURL(/\/w\/.*\/learn/, { timeout: 30000 }),
-      learnLink.click()
+      this.page.waitForURL(/\/w\/.*\/context\/learn/, { timeout: 30000 }),
+      contextLink.click()
     ]);
-    
+
     await this.waitForLoad();
   }
 

src/__tests__/unit/components/Sidebar.test.tsx

@@ -238,17 +238,7 @@ describe('Sidebar - Graph Explorer Context item', () => {
     } as any);
   });
 
-  // Helper: find the Context child "Graph" link (href = /context/graph)
-  // Note: there are 2 sidebars rendered (mobile + desktop) so use getAllBy
-  function findContextGraphLinks() {
-    return screen.queryAllByRole('link', { name: /^Graph$/i }).filter(
-      (el) => el.getAttribute('href') === '/w/test-workspace/context/graph',
-    );
-  }
-
-  it('shows Graph item under Context when canAdmin is true', async () => {
-    const user = userEvent.setup();
-
+  it('Context is a direct link to /w/[slug]/context (no expandable children in sidebar)', () => {
     vi.mocked(useWorkspaceAccessModule.useWorkspaceAccess).mockReturnValue({
       canRead: true,
       canWrite: true,
@@ -260,18 +250,15 @@ describe('Sidebar - Graph Explorer Context item', () => {
 
     render(<Sidebar user={mockUser} />);
 
-    // Expand Context section (first sidebar instance = desktop)
-    const contextButtons = screen.getAllByTestId('nav-context');
-    await user.click(contextButtons[0]);
-
-    await waitFor(() => {
-      expect(findContextGraphLinks().length).toBeGreaterThan(0);
-    });
+    // nav-context should be an <a> link, not an expandable button
+    const contextItems = screen.getAllByTestId('nav-context');
+    expect(contextItems.length).toBeGreaterThan(0);
+    // Since it has no children it renders as a Link (asChild Button wrapping an <a>)
+    const contextLink = contextItems[0].querySelector('a');
+    expect(contextLink).toHaveAttribute('href', '/w/test-workspace/context');
   });
 
-  it('Graph item href points to /context/graph', async () => {
-    const user = userEvent.setup();
-
+  it('Context link href points to /w/[slug]/context for admin users', () => {
     vi.mocked(useWorkspaceAccessModule.useWorkspaceAccess).mockReturnValue({
       canRead: true,
       canWrite: true,
@@ -283,19 +270,12 @@ describe('Sidebar - Graph Explorer Context item', () => {
 
     render(<Sidebar user={mockUser} />);
 
-    const contextButtons = screen.getAllByTestId('nav-context');
-    await user.click(contextButtons[0]);
-
-    await waitFor(() => {
-      const links = findContextGraphLinks();
-      expect(links.length).toBeGreaterThan(0);
-      expect(links[0]).toHaveAttribute('href', '/w/test-workspace/context/graph');
-    });
+    const contextItems = screen.getAllByTestId('nav-context');
+    const contextLink = contextItems[0].querySelector('a');
+    expect(contextLink).toHaveAttribute('href', '/w/test-workspace/context');
   });
 
-  it('hides Graph item under Context when canAdmin is false', async () => {
-    const user = userEvent.setup();
-
+  it('Context link is present for non-admin users', () => {
     vi.mocked(useWorkspaceAccessModule.useWorkspaceAccess).mockReturnValue({
       canRead: true,
       canWrite: true,
@@ -307,21 +287,15 @@ describe('Sidebar - Graph Explorer Context item', () => {
 
     render(<Sidebar user={mockUser} />);
 
-    const contextButtons = screen.getAllByTestId('nav-context');
-    await user.click(contextButtons[0]);
-
-    // Wait for other context children to appear
-    await waitFor(() => {
-      expect(screen.getAllByTestId('nav-learn').length).toBeGreaterThan(0);
-    });
-
-    // Context/graph link must NOT be present
-    expect(findContextGraphLinks()).toHaveLength(0);
+    const contextItems = screen.getAllByTestId('nav-context');
+    expect(contextItems.length).toBeGreaterThan(0);
+    // No sub-items (Learn/Calls/Agent Logs) rendered in sidebar — they live in the context layout
+    expect(screen.queryByTestId('nav-learn')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('nav-calls')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('nav-agent-logs')).not.toBeInTheDocument();
   });
 
-  it('still shows Learn, Calls, Agent Logs for non-admin users', async () => {
-    const user = userEvent.setup();
-
+  it('Context sidebar link is present for viewer role', () => {
     vi.mocked(useWorkspaceAccessModule.useWorkspaceAccess).mockReturnValue({
       canRead: true,
       canWrite: false,
@@ -333,14 +307,10 @@ describe('Sidebar - Graph Explorer Context item', () => {
 
     render(<Sidebar user={mockUser} />);
 
-    const contextButtons = screen.getAllByTestId('nav-context');
-    await user.click(contextButtons[0]);
-
-    await waitFor(() => {
-      expect(screen.getAllByTestId('nav-learn').length).toBeGreaterThan(0);
-      expect(screen.getAllByTestId('nav-calls').length).toBeGreaterThan(0);
-      expect(screen.getAllByTestId('nav-agent-logs').length).toBeGreaterThan(0);
-    });
+    const contextItems = screen.getAllByTestId('nav-context');
+    expect(contextItems.length).toBeGreaterThan(0);
+    const contextLink = contextItems[0].querySelector('a');
+    expect(contextLink).toHaveAttribute('href', '/w/test-workspace/context');
   });
 });
 
@@ -1026,85 +996,56 @@ describe('Sidebar - Graph Explorer Nav Item', () => {
     } as any);
   });
 
-  // Context child "Graph" is an <a> with href containing /context/graph
-  function contextGraphLinks() {
-    return screen.queryAllByRole('link').filter(
-      (el) => el.getAttribute('href') === '/w/test-workspace/context/graph',
-    );
-  }
-
-  it('should show Graph item under Context when user is admin', async () => {
-    const user = userEvent.setup();
-
+  it('should render Context as a direct sidebar link to /context for admin users', () => {
     vi.mocked(useWorkspaceAccessModule.useWorkspaceAccess).mockReturnValue({
       canRead: true, canWrite: true, canAdmin: true, isOwner: false, hasAccess: true, role: 'ADMIN',
     } as any);
 
     render(<Sidebar user={mockUser} />);
 
-    // Both mobile + desktop sidebars render; click the first Context button
-    const contextButtons = screen.getAllByTestId('nav-context');
-    await user.click(contextButtons[0]);
-
-    await waitFor(() => {
-      expect(contextGraphLinks().length).toBeGreaterThan(0);
-    });
+    const contextItems = screen.getAllByTestId('nav-context');
+    expect(contextItems.length).toBeGreaterThan(0);
+    const contextLink = contextItems[0].querySelector('a');
+    expect(contextLink).toHaveAttribute('href', '/w/test-workspace/context');
   });
 
-  it('should NOT show Graph item under Context when user is not admin', async () => {
-    const user = userEvent.setup();
-
+  it('should render Context as a direct sidebar link to /context for non-admin users', () => {
     vi.mocked(useWorkspaceAccessModule.useWorkspaceAccess).mockReturnValue({
       canRead: true, canWrite: true, canAdmin: false, isOwner: false, hasAccess: true, role: 'DEVELOPER',
     } as any);
 
     render(<Sidebar user={mockUser} />);
 
-    const contextButtons = screen.getAllByTestId('nav-context');
-    await user.click(contextButtons[0]);
-
-    // Wait for other children to render
-    await waitFor(() => {
-      expect(screen.getAllByTestId('nav-learn').length).toBeGreaterThan(0);
-    });
-
-    expect(contextGraphLinks()).toHaveLength(0);
+    const contextItems = screen.getAllByTestId('nav-context');
+    expect(contextItems.length).toBeGreaterThan(0);
+    const contextLink = contextItems[0].querySelector('a');
+    expect(contextLink).toHaveAttribute('href', '/w/test-workspace/context');
   });
 
-  it('should show Graph item for OWNER role', async () => {
-    const user = userEvent.setup();
-
+  it('should render Context as a direct sidebar link for OWNER role', () => {
     vi.mocked(useWorkspaceAccessModule.useWorkspaceAccess).mockReturnValue({
       canRead: true, canWrite: true, canAdmin: true, isOwner: true, hasAccess: true, role: 'OWNER',
     } as any);
 
     render(<Sidebar user={mockUser} />);
 
-    const contextButtons = screen.getAllByTestId('nav-context');
-    await user.click(contextButtons[0]);
-
-    await waitFor(() => {
-      expect(contextGraphLinks().length).toBeGreaterThan(0);
-    });
+    const contextItems = screen.getAllByTestId('nav-context');
+    expect(contextItems.length).toBeGreaterThan(0);
+    const contextLink = contextItems[0].querySelector('a');
+    expect(contextLink).toHaveAttribute('href', '/w/test-workspace/context');
   });
 
-  it('should NOT show Graph item for VIEWER role', async () => {
-    const user = userEvent.setup();
-
+  it('should render Context as a direct sidebar link for VIEWER role', () => {
     vi.mocked(useWorkspaceAccessModule.useWorkspaceAccess).mockReturnValue({
       canRead: true, canWrite: false, canAdmin: false, isOwner: false, hasAccess: true, role: 'VIEWER',
     } as any);
 
     render(<Sidebar user={mockUser} />);
 
-    const contextButtons = screen.getAllByTestId('nav-context');
-    await user.click(contextButtons[0]);
-
-    await waitFor(() => {
-      expect(screen.getAllByTestId('nav-learn').length).toBeGreaterThan(0);
-    });
-
-    expect(contextGraphLinks()).toHaveLength(0);
+    const contextItems = screen.getAllByTestId('nav-context');
+    expect(contextItems.length).toBeGreaterThan(0);
+    const contextLink = contextItems[0].querySelector('a');
+    expect(contextLink).toHaveAttribute('href', '/w/test-workspace/context');
   });
 });
 

src/__tests__/unit/pages/agent-logs.test.tsx

@@ -110,7 +110,7 @@ vi.mock("lucide-react", () => ({
 }));
 
 // --- Import page after all mocks are set up ---
-import AgentLogsPage from "@/app/w/[slug]/agent-logs/page";
+import AgentLogsPage from "@/app/w/[slug]/context/agent-logs/page";
 
 // Helper: reset fetch to return an empty log list
 function mockEmptyFetch() {