cacheplane
diff --git a/‎apps/cockpit/src/app/[...slug]/page.spec.tsx‎
Lines changed: 72 additions & 0 deletions b/‎apps/cockpit/src/app/[...slug]/page.spec.tsx‎
Lines changed: 72 additions & 0 deletions
diff --git a/‎apps/cockpit/src/app/[...slug]/page.tsx‎
Lines changed: 2 additions & 0 deletions b/‎apps/cockpit/src/app/[...slug]/page.tsx‎
Lines changed: 2 additions & 0 deletions
diff --git a/‎apps/cockpit/src/app/cockpit.css‎
Lines changed: 46 additions & 2 deletions b/‎apps/cockpit/src/app/cockpit.css‎
Lines changed: 46 additions & 2 deletions
@@ -0,0 +1,72 @@
+/** @vitest-environment jsdom */
+import { describe, expect, it, vi } from 'vitest';
+
+vi.mock('next/navigation', () => ({
+  redirect: vi.fn(() => {
+    throw new Error('redirect() should not be called for a canonical slug');
+  }),
+}));
+
+vi.mock('../../lib/content-bundle', () => ({
+  getContentBundle: vi.fn().mockResolvedValue({
+    codeFiles: {},
+    promptFiles: {},
+    runtimeUrl: null,
+    docSections: [],
+    narrativeDocs: [],
+  }),
+}));
+
+import CockpitRoutePage from './page';
+import { getCockpitPageModel } from '../../lib/cockpit-page';
+
+describe('CockpitRoutePage', () => {
+  it('keys the rendered CockpitShell on the canonical path', async () => {
+    const slug = [
+      'langgraph',
+      'core-capabilities',
+      'streaming',
+      'overview',
+      'python',
+    ];
+    const { canonicalPath } = getCockpitPageModel(slug);
+
+    const element = await CockpitRoutePage({
+      params: Promise.resolve({ slug }),
+    });
+
+    expect(element.key).toBe(canonicalPath);
+  });
+
+  it('gives two different capabilities two different keys', async () => {
+    const streamingSlug = [
+      'langgraph',
+      'core-capabilities',
+      'streaming',
+      'overview',
+      'python',
+    ];
+    const persistenceSlug = [
+      'langgraph',
+      'core-capabilities',
+      'persistence',
+      'overview',
+      'python',
+    ];
+
+    const streamingElement = await CockpitRoutePage({
+      params: Promise.resolve({ slug: streamingSlug }),
+    });
+    const persistenceElement = await CockpitRoutePage({
+      params: Promise.resolve({ slug: persistenceSlug }),
+    });
+
+    expect(streamingElement.key).not.toBe(persistenceElement.key);
+    expect(streamingElement.key).toBe(
+      getCockpitPageModel(streamingSlug).canonicalPath
+    );
+    expect(persistenceElement.key).toBe(
+      getCockpitPageModel(persistenceSlug).canonicalPath
+    );
+  });
+});
@@ -1,3 +1,4 @@
+import React from 'react';
 import { redirect } from 'next/navigation';
 import { CockpitShell } from '../../components/cockpit-shell';
 import { getContentBundle } from '../../lib/content-bundle';
@@ -27,6 +28,7 @@ export default async function CockpitRoutePage({
 
   return (
     <CockpitShell
+      key={canonicalPath}
       navigationTree={navigationTree}
       presentation={presentation}
       entryTitle={entry.title}
 
@@ -363,6 +363,7 @@ pre.shiki {
 .cockpit-control-plane {
   --cockpit-state-error: #b42318;
   --cockpit-state-success: #1a7a40;
+  --cockpit-state-working: #9a6700;
   display: grid;
   grid-template-columns: 56px minmax(0, 272px);
   height: 100%;
@@ -373,6 +374,7 @@ pre.shiki {
 [data-theme="dark"] .cockpit-control-plane {
   --cockpit-state-error: #ff6369;
   --cockpit-state-success: #4cc38a;
+  --cockpit-state-working: #e0a02f;
 }
 .cockpit-control-plane [data-control-plane-rail] {
   min-width: 0;
@@ -387,9 +389,28 @@ pre.shiki {
   flex-direction: column;
   gap: 4px;
 }
-.cockpit-control-plane [data-control-plane-rail-group="utilities"] { margin-top: auto; }
+.cockpit-control-plane [data-control-plane-rail-group="utilities"] {
+  margin-top: auto;
+  padding-top: 8px;
+  /* --ds-border is a 1-value difference from --ds-surface-tinted (the rail
+     background) in dark mode -- rgb(45,45,45) on rgb(44,44,44), effectively
+     invisible. --ds-border-strong is the token the pane divider already
+     uses for the same reason (cockpit.css ~L460). */
+  border-top: 1px solid var(--ds-border-strong);
+}
+.cockpit-control-plane [data-control-plane-rail-group-label] {
+  display: block;
+  padding-bottom: 4px;
+  color: var(--ds-text-secondary);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+  text-align: center;
+}
 .cockpit-control-plane-utility-anchor { display: contents; }
 .cockpit-control-plane [data-control-plane-rail-item] {
+  --cockpit-rail-status-ring: var(--ds-surface-tinted);
   position: relative;
   min-height: 48px;
   padding: 6px 2px;
@@ -400,13 +421,14 @@ pre.shiki {
   align-items: center;
   justify-content: center;
   gap: 4px;
-  color: var(--ds-text-muted);
+  color: var(--ds-text-secondary);
   background: transparent;
   text-decoration: none;
   cursor: pointer;
   transition: background 120ms ease, color 120ms ease;
 }
 .cockpit-control-plane [data-control-plane-rail-item]:hover {
+  --cockpit-rail-status-ring: var(--ds-surface);
   color: var(--ds-text-primary);
   background: var(--ds-surface);
 }
@@ -419,6 +441,24 @@ pre.shiki {
   line-height: 1;
   font-weight: 600;
 }
+.cockpit-control-plane [data-control-plane-rail-status] {
+  position: absolute;
+  top: 7px;
+  right: 11px;
+  width: 7px;
+  height: 7px;
+  border: 2px solid var(--cockpit-rail-status-ring);
+  border-radius: 999px;
+}
+.cockpit-control-plane [data-control-plane-rail-status="success"] {
+  background: var(--cockpit-state-success);
+}
+.cockpit-control-plane [data-control-plane-rail-status="working"] {
+  background: var(--cockpit-state-working);
+}
+.cockpit-control-plane [data-control-plane-rail-status="error"] {
+  background: var(--cockpit-state-error);
+}
 .cockpit-control-plane [data-control-plane-rail-icon],
 [data-cockpit-activity-icon] {
   display: inline-flex;
@@ -950,6 +990,10 @@ pre.shiki {
     color: CanvasText;
     background: Canvas;
   }
+  .cockpit-control-plane [data-control-plane-rail-status] {
+    border: 1px solid CanvasText;
+    background: Canvas;
+  }
   .cockpit-control-plane [data-control-plane-overflow-menu] {
     border: 1px solid CanvasText;
     color: CanvasText;