feat(cockpit): add render and chat product sections

apps/cockpit/scripts/capability-registry.ts

@@ -4,7 +4,7 @@
  */
 export interface Capability {
   id: string;
-  product: 'langgraph' | 'deep-agents';
+  product: 'langgraph' | 'deep-agents' | 'render' | 'chat';
   topic: string;
   angularProject: string;
   port: number;
@@ -27,6 +27,24 @@ export const capabilities: readonly Capability[] = [
   { id: 'da-memory', product: 'deep-agents', topic: 'memory', angularProject: 'cockpit-deep-agents-memory-angular', port: 4313, pythonDir: 'cockpit/deep-agents/memory/python', graphName: 'da-memory' },
   { id: 'skills', product: 'deep-agents', topic: 'skills', angularProject: 'cockpit-deep-agents-skills-angular', port: 4314, pythonDir: 'cockpit/deep-agents/skills/python', graphName: 'skills' },
   { id: 'sandboxes', product: 'deep-agents', topic: 'sandboxes', angularProject: 'cockpit-deep-agents-sandboxes-angular', port: 4315, pythonDir: 'cockpit/deep-agents/sandboxes/python', graphName: 'sandboxes' },
+  // Render capabilities
+  { id: 'spec-rendering', product: 'render', topic: 'spec-rendering', angularProject: 'cockpit-render-spec-rendering-angular', port: 4401, pythonDir: 'cockpit/render/spec-rendering/python', graphName: 'spec-rendering' },
+  { id: 'element-rendering', product: 'render', topic: 'element-rendering', angularProject: 'cockpit-render-element-rendering-angular', port: 4402, pythonDir: 'cockpit/render/element-rendering/python', graphName: 'element-rendering' },
+  { id: 'state-management', product: 'render', topic: 'state-management', angularProject: 'cockpit-render-state-management-angular', port: 4403, pythonDir: 'cockpit/render/state-management/python', graphName: 'state-management' },
+  { id: 'r-registry', product: 'render', topic: 'registry', angularProject: 'cockpit-render-registry-angular', port: 4404, pythonDir: 'cockpit/render/registry/python', graphName: 'r-registry' },
+  { id: 'repeat-loops', product: 'render', topic: 'repeat-loops', angularProject: 'cockpit-render-repeat-loops-angular', port: 4405, pythonDir: 'cockpit/render/repeat-loops/python', graphName: 'repeat-loops' },
+  { id: 'computed-functions', product: 'render', topic: 'computed-functions', angularProject: 'cockpit-render-computed-functions-angular', port: 4406, pythonDir: 'cockpit/render/computed-functions/python', graphName: 'computed-functions' },
+  // Chat capabilities
+  { id: 'c-messages', product: 'chat', topic: 'messages', angularProject: 'cockpit-chat-messages-angular', port: 4501, pythonDir: 'cockpit/chat/messages/python', graphName: 'c-messages' },
+  { id: 'c-input', product: 'chat', topic: 'input', angularProject: 'cockpit-chat-input-angular', port: 4502, pythonDir: 'cockpit/chat/input/python', graphName: 'c-input' },
+  { id: 'c-interrupts', product: 'chat', topic: 'interrupts', angularProject: 'cockpit-chat-interrupts-angular', port: 4503, pythonDir: 'cockpit/chat/interrupts/python', graphName: 'c-interrupts' },
+  { id: 'c-tool-calls', product: 'chat', topic: 'tool-calls', angularProject: 'cockpit-chat-tool-calls-angular', port: 4504, pythonDir: 'cockpit/chat/tool-calls/python', graphName: 'c-tool-calls' },
+  { id: 'c-subagents', product: 'chat', topic: 'subagents', angularProject: 'cockpit-chat-subagents-angular', port: 4505, pythonDir: 'cockpit/chat/subagents/python', graphName: 'c-subagents' },
+  { id: 'c-threads', product: 'chat', topic: 'threads', angularProject: 'cockpit-chat-threads-angular', port: 4506, pythonDir: 'cockpit/chat/threads/python', graphName: 'c-threads' },
+  { id: 'c-timeline', product: 'chat', topic: 'timeline', angularProject: 'cockpit-chat-timeline-angular', port: 4507, pythonDir: 'cockpit/chat/timeline/python', graphName: 'c-timeline' },
+  { id: 'c-generative-ui', product: 'chat', topic: 'generative-ui', angularProject: 'cockpit-chat-generative-ui-angular', port: 4508, pythonDir: 'cockpit/chat/generative-ui/python', graphName: 'c-generative-ui' },
+  { id: 'c-debug', product: 'chat', topic: 'debug', angularProject: 'cockpit-chat-debug-angular', port: 4509, pythonDir: 'cockpit/chat/debug/python', graphName: 'c-debug' },
+  { id: 'c-theming', product: 'chat', topic: 'theming', angularProject: 'cockpit-chat-theming-angular', port: 4510, pythonDir: 'cockpit/chat/theming/python', graphName: 'c-theming' },
 ] as const;
 
 export function findCapability(id: string): Capability | undefined {

apps/cockpit/src/components/cockpit-shell.tsx

@@ -57,11 +57,11 @@ export function CockpitShell({
   return (
     <main
       aria-label="Cockpit shell"
-      className="grid md:grid-cols-[16rem_minmax(0,1fr)] min-h-screen"
+      className="grid md:grid-cols-[16rem_minmax(0,1fr)] h-screen overflow-hidden"
       data-hydrated={isHydrated ? 'true' : 'false'}
     >
       {/* Desktop sidebar — hidden on mobile */}
-      <div className="hidden md:block">
+      <div className="hidden md:block overflow-y-auto">
         <CockpitSidebar
           navigationTree={navigationTree}
           manifest={cockpitManifest}
@@ -94,7 +94,7 @@ export function CockpitShell({
         </>
       )}
 
-      <section className="grid grid-rows-[auto_1fr] gap-2 p-4 bg-[var(--ds-glass-bg)] backdrop-blur-[var(--ds-glass-blur)]">
+      <section className="grid grid-rows-[auto_1fr] gap-2 p-4 overflow-hidden bg-[var(--ds-glass-bg)] backdrop-blur-[var(--ds-glass-blur)]">
         <header className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
           <div className="flex items-center gap-3">
             <button

apps/cockpit/src/lib/cockpit-page.ts

@@ -1,4 +1,4 @@
-import { cockpitManifest } from '@cacheplane/cockpit-registry';
+import { cockpitManifest, type CockpitProduct, type CockpitSection, type CockpitPageId, type CockpitLanguage } from '@cacheplane/cockpit-registry';
 import {
   buildNavigationTree,
   getCapabilityPresentation,
@@ -27,11 +27,11 @@ const DEFAULT_COCKPIT_SLUG = [
 export function getCockpitPageModel(slug: string[] = []): CockpitPageModel {
   const resolvedEntry = resolveCockpitEntry({
     manifest: cockpitManifest,
-    product: (slug[0] ?? DEFAULT_COCKPIT_SLUG[0]) as 'deep-agents' | 'langgraph',
-    section: (slug[1] ?? DEFAULT_COCKPIT_SLUG[1]) as 'getting-started' | 'core-capabilities',
+    product: (slug[0] ?? DEFAULT_COCKPIT_SLUG[0]) as CockpitProduct,
+    section: (slug[1] ?? DEFAULT_COCKPIT_SLUG[1]) as CockpitSection,
     topic: slug[2] ?? DEFAULT_COCKPIT_SLUG[2],
-    page: (slug[3] ?? DEFAULT_COCKPIT_SLUG[3]) as 'overview' | 'build' | 'prompts' | 'code' | 'testing',
-    language: (slug[4] ?? DEFAULT_COCKPIT_SLUG[4]) as 'python' | 'typescript',
+    page: (slug[3] ?? DEFAULT_COCKPIT_SLUG[3]) as CockpitPageId,
+    language: (slug[4] ?? DEFAULT_COCKPIT_SLUG[4]) as CockpitLanguage,
   });
 
   return {

apps/cockpit/src/lib/route-resolution.spec.ts

@@ -47,12 +47,19 @@ describe('buildNavigationTree', () => {
   it('groups manifest entries by product and section', () => {
     const tree = buildNavigationTree(cockpitManifest);
 
+    expect(tree).toHaveLength(4);
     expect(tree[0]).toMatchObject({
       product: 'deep-agents',
     });
     expect(tree[1]).toMatchObject({
       product: 'langgraph',
     });
+    expect(tree[2]).toMatchObject({
+      product: 'render',
+    });
+    expect(tree[3]).toMatchObject({
+      product: 'chat',
+    });
   });
 });
 
@@ -125,6 +132,40 @@ describe('getCapabilityPresentation', () => {
     });
   });
 
+  it('presents render capabilities with module-backed metadata', () => {
+    const entry = resolveCockpitEntry({
+      manifest: cockpitManifest,
+      product: 'render',
+      section: 'core-capabilities',
+      topic: 'spec-rendering',
+      page: 'overview',
+      language: 'python',
+    });
+    const presentation = getCapabilityPresentation(entry);
+
+    expect(presentation).toMatchObject({
+      kind: 'capability',
+      docsPath: '/docs/render/core-capabilities/spec-rendering/overview/python',
+    });
+  });
+
+  it('presents chat capabilities with module-backed metadata', () => {
+    const entry = resolveCockpitEntry({
+      manifest: cockpitManifest,
+      product: 'chat',
+      section: 'core-capabilities',
+      topic: 'messages',
+      page: 'overview',
+      language: 'python',
+    });
+    const presentation = getCapabilityPresentation(entry);
+
+    expect(presentation).toMatchObject({
+      kind: 'capability',
+      docsPath: '/docs/chat/core-capabilities/messages/overview/python',
+    });
+  });
+
   it('resolves module-backed metadata for every implemented capability topic', () => {
     const capabilityEntries = cockpitManifest.filter(
       (entry) => entry.entryKind === 'capability'

apps/cockpit/src/lib/route-resolution.ts

@@ -17,6 +17,22 @@ import { deepAgentsFilesystemPythonModule } from '../../../../cockpit/deep-agent
 import { deepAgentsSubagentsPythonModule } from '../../../../cockpit/deep-agents/subagents/python/src/index';
 import { deepAgentsSkillsPythonModule } from '../../../../cockpit/deep-agents/skills/python/src/index';
 import { deepAgentsSandboxesPythonModule } from '../../../../cockpit/deep-agents/sandboxes/python/src/index';
+import { renderSpecRenderingPythonModule } from '../../../../cockpit/render/spec-rendering/python/src/index';
+import { renderElementRenderingPythonModule } from '../../../../cockpit/render/element-rendering/python/src/index';
+import { renderStateManagementPythonModule } from '../../../../cockpit/render/state-management/python/src/index';
+import { renderRegistryPythonModule } from '../../../../cockpit/render/registry/python/src/index';
+import { renderRepeatLoopsPythonModule } from '../../../../cockpit/render/repeat-loops/python/src/index';
+import { renderComputedFunctionsPythonModule } from '../../../../cockpit/render/computed-functions/python/src/index';
+import { chatMessagesPythonModule } from '../../../../cockpit/chat/messages/python/src/index';
+import { chatInputPythonModule } from '../../../../cockpit/chat/input/python/src/index';
+import { chatInterruptsPythonModule } from '../../../../cockpit/chat/interrupts/python/src/index';
+import { chatToolCallsPythonModule } from '../../../../cockpit/chat/tool-calls/python/src/index';
+import { chatSubagentsPythonModule } from '../../../../cockpit/chat/subagents/python/src/index';
+import { chatThreadsPythonModule } from '../../../../cockpit/chat/threads/python/src/index';
+import { chatTimelinePythonModule } from '../../../../cockpit/chat/timeline/python/src/index';
+import { chatGenerativeUiPythonModule } from '../../../../cockpit/chat/generative-ui/python/src/index';
+import { chatDebugPythonModule } from '../../../../cockpit/chat/debug/python/src/index';
+import { chatThemingPythonModule } from '../../../../cockpit/chat/theming/python/src/index';
 
 export interface ResolveCockpitEntryOptions {
   manifest: CockpitManifestEntry[];
@@ -70,6 +86,22 @@ const capabilityModules = [
   deepAgentsSubagentsPythonModule,
   deepAgentsSkillsPythonModule,
   deepAgentsSandboxesPythonModule,
+  renderSpecRenderingPythonModule,
+  renderElementRenderingPythonModule,
+  renderStateManagementPythonModule,
+  renderRegistryPythonModule,
+  renderRepeatLoopsPythonModule,
+  renderComputedFunctionsPythonModule,
+  chatMessagesPythonModule,
+  chatInputPythonModule,
+  chatInterruptsPythonModule,
+  chatToolCallsPythonModule,
+  chatSubagentsPythonModule,
+  chatThreadsPythonModule,
+  chatTimelinePythonModule,
+  chatGenerativeUiPythonModule,
+  chatDebugPythonModule,
+  chatThemingPythonModule,
 ];
 
 export const toCockpitPath = (entry: CockpitManifestEntry): string =>
@@ -135,7 +167,7 @@ export const resolveCockpitEntry = ({
 export const buildNavigationTree = (
   manifest: CockpitManifestEntry[]
 ): NavigationProduct[] => {
-  const products: CockpitManifestEntry['product'][] = ['deep-agents', 'langgraph'];
+  const products: CockpitManifestEntry['product'][] = ['deep-agents', 'langgraph', 'render', 'chat'];
   const sections: CockpitManifestEntry['section'][] = [
     'getting-started',
     'core-capabilities',

apps/website/content/docs/chat/core-capabilities/debug/python/build.mdx

@@ -0,0 +1,3 @@
+# Build Debug Workflows
+
+Design debug workflows around event logging and inspector panels that surface stream events, state changes, and rendering decisions.

apps/website/content/docs/chat/core-capabilities/debug/python/code.mdx

@@ -0,0 +1,3 @@
+# Debug Code
+
+Code examples for debug tools show how to enable event logging, attach inspector panels, and filter debug output by event type.

apps/website/content/docs/chat/core-capabilities/debug/python/overview.mdx

@@ -0,0 +1,5 @@
+# Debug Overview
+
+Debug tools provide visibility into message flow, stream events, tool call execution, and component rendering during development.
+
+Use this page when you need to diagnose issues in the chat pipeline or inspect runtime behavior.

apps/website/content/docs/chat/core-capabilities/debug/python/prompts.mdx

@@ -0,0 +1,3 @@
+# Debug Prompts
+
+Prompts for debug configuration should specify which event types to log, the verbosity level, and where debug output should appear.

apps/website/content/docs/chat/core-capabilities/debug/python/testing.mdx

@@ -0,0 +1,3 @@
+# Debug Testing
+
+Test debug tooling by triggering known events and verifying that the logger captures them with the correct type, payload, and timestamp.

apps/website/content/docs/chat/core-capabilities/generative-ui/python/build.mdx

@@ -0,0 +1,3 @@
+# Build Generative UI Workflows
+
+Design generative UI workflows around a component registry that maps response data types to Angular components rendered inline.

apps/website/content/docs/chat/core-capabilities/generative-ui/python/code.mdx

@@ -0,0 +1,3 @@
+# Generative UI Code
+
+Code examples for generative UI show how to register inline components, parse structured response data, and render widgets within messages.

apps/website/content/docs/chat/core-capabilities/generative-ui/python/overview.mdx

@@ -0,0 +1,5 @@
+# Generative UI Overview
+
+Generative UI renders dynamic Angular components inline within assistant messages based on structured data from the response stream.
+
+Use this page when you need to embed interactive widgets, charts, or forms directly in chat responses.

apps/website/content/docs/chat/core-capabilities/generative-ui/python/prompts.mdx

@@ -0,0 +1,3 @@
+# Generative UI Prompts
+
+Prompts for generative UI should define the data shapes that trigger component rendering and the expected visual output for each type.

apps/website/content/docs/chat/core-capabilities/generative-ui/python/testing.mdx

@@ -0,0 +1,3 @@
+# Generative UI Testing
+
+Test generative UI by sending structured response data and verifying that the correct inline component renders with the expected inputs.

apps/website/content/docs/chat/core-capabilities/input/python/build.mdx

@@ -0,0 +1,3 @@
+# Build Input Workflows
+
+Design input workflows around a single input component that handles text capture, validation, and submission events.

apps/website/content/docs/chat/core-capabilities/input/python/code.mdx

@@ -0,0 +1,3 @@
+# Input Code
+
+Code examples for input show how to configure the input component, handle submission events, and manage loading states.

apps/website/content/docs/chat/core-capabilities/input/python/overview.mdx

@@ -0,0 +1,5 @@
+# Input Overview
+
+The input system captures user text, handles submission, and manages input state like loading indicators and disabled states.
+
+Use this page when you need to customize input behavior or add features like file attachments or command detection.

apps/website/content/docs/chat/core-capabilities/input/python/prompts.mdx

@@ -0,0 +1,3 @@
+# Input Prompts
+
+Prompts for input configuration should specify placeholder text, validation rules, and any pre-processing before submission.

apps/website/content/docs/chat/core-capabilities/input/python/testing.mdx

@@ -0,0 +1,3 @@
+# Input Testing
+
+Test input handling by simulating user keystrokes and submissions, then verifying the emitted message content and input state transitions.

apps/website/content/docs/chat/core-capabilities/interrupts/python/build.mdx

@@ -0,0 +1,3 @@
+# Build Interrupt Workflows
+
+Design interrupt workflows around explicit pause points that present the user with a clear action and resume the stream on response.

apps/website/content/docs/chat/core-capabilities/interrupts/python/code.mdx

@@ -0,0 +1,3 @@
+# Interrupts Code
+
+Code examples for interrupts show how to emit an interrupt event, render a confirmation UI, and resume the response stream.

apps/website/content/docs/chat/core-capabilities/interrupts/python/overview.mdx

@@ -0,0 +1,5 @@
+# Interrupts Overview
+
+Interrupts pause the assistant response stream to collect user confirmation or additional input before continuing.
+
+Use this page when you need to add human-in-the-loop checkpoints to your chat workflows.

apps/website/content/docs/chat/core-capabilities/interrupts/python/prompts.mdx

@@ -0,0 +1,3 @@
+# Interrupts Prompts
+
+Prompts for interrupts should describe the pause condition, the user-facing question, and the expected response format.

apps/website/content/docs/chat/core-capabilities/interrupts/python/testing.mdx

@@ -0,0 +1,3 @@
+# Interrupts Testing
+
+Test interrupts by triggering a pause condition and verifying that the stream stops, the prompt renders, and resumption produces the correct continuation.

apps/website/content/docs/chat/core-capabilities/messages/python/build.mdx

@@ -0,0 +1,3 @@
+# Build Message Workflows
+
+Design message workflows around a clear message type hierarchy and consistent serialization for transport and storage.

apps/website/content/docs/chat/core-capabilities/messages/python/code.mdx

@@ -0,0 +1,3 @@
+# Messages Code
+
+Code examples for messages show how to create, send, receive, and render message objects in the chat component.

apps/website/content/docs/chat/core-capabilities/messages/python/overview.mdx

@@ -0,0 +1,5 @@
+# Messages Overview
+
+Messages are the core data unit in Chat, representing user inputs, assistant responses, and system instructions in a conversation.
+
+Use this page when you need to understand how messages flow through the chat pipeline and how they are stored and displayed.

apps/website/content/docs/chat/core-capabilities/messages/python/prompts.mdx

@@ -0,0 +1,3 @@
+# Messages Prompts
+
+Prompts for message handling should define the expected message roles, content formats, and any metadata attached to each message.

apps/website/content/docs/chat/core-capabilities/messages/python/testing.mdx

@@ -0,0 +1,3 @@
+# Messages Testing
+
+Test message handling by verifying that sent messages appear in the conversation thread with the correct role, content, and ordering.

apps/website/content/docs/chat/core-capabilities/subagents/python/build.mdx

@@ -0,0 +1,3 @@
+# Build Subagent Workflows
+
+Design subagent workflows around clear delegation boundaries where the parent agent routes to a child and merges the result.

apps/website/content/docs/chat/core-capabilities/subagents/python/code.mdx

@@ -0,0 +1,3 @@
+# Subagent Code
+
+Code examples for subagents show how to register child agents, route messages to them, and merge their responses into the main thread.

apps/website/content/docs/chat/core-capabilities/subagents/python/overview.mdx

@@ -0,0 +1,5 @@
+# Subagents Overview
+
+Subagents delegate parts of a conversation to specialized agents that handle domain-specific tasks and return results to the main thread.
+
+Use this page when you need to compose multiple agents within a single chat experience.

apps/website/content/docs/chat/core-capabilities/subagents/python/prompts.mdx

@@ -0,0 +1,3 @@
+# Subagent Prompts
+
+Prompts for subagents should define the delegation trigger, the child agent's role, and how its response integrates into the parent conversation.

apps/website/content/docs/chat/core-capabilities/subagents/python/testing.mdx

@@ -0,0 +1,3 @@
+# Subagent Testing
+
+Test subagent delegation by triggering a routing condition and verifying that the child agent handles the task and returns the expected result.

apps/website/content/docs/chat/core-capabilities/theming/python/build.mdx

@@ -0,0 +1,3 @@
+# Build Theming Workflows
+
+Design theming workflows around a set of CSS custom properties that cascade through all chat components for consistent styling.

apps/website/content/docs/chat/core-capabilities/theming/python/code.mdx

@@ -0,0 +1,3 @@
+# Theming Code
+
+Code examples for theming show how to set CSS custom properties, override component styles, and switch between light and dark modes.

apps/website/content/docs/chat/core-capabilities/theming/python/overview.mdx

@@ -0,0 +1,5 @@
+# Theming Overview
+
+Theming controls the visual appearance of the chat interface through CSS custom properties and component-level style overrides.
+
+Use this page when you need to match the chat UI to your application's design system or brand.

apps/website/content/docs/chat/core-capabilities/theming/python/prompts.mdx

@@ -0,0 +1,3 @@
+# Theming Prompts
+
+Prompts for theming should specify the design tokens, color palette, typography scale, and spacing values used across the chat UI.

apps/website/content/docs/chat/core-capabilities/theming/python/testing.mdx

@@ -0,0 +1,3 @@
+# Theming Testing
+
+Test theming by applying a custom theme and verifying that CSS custom property values propagate correctly to all chat components.

apps/website/content/docs/chat/core-capabilities/threads/python/build.mdx

@@ -0,0 +1,3 @@
+# Build Thread Workflows
+
+Design thread workflows around a thread store that persists messages and supports operations like resume, branch, and delete.

apps/website/content/docs/chat/core-capabilities/threads/python/code.mdx

@@ -0,0 +1,3 @@
+# Thread Code
+
+Code examples for threads show how to create, load, resume, and branch conversation threads using the thread store API.

apps/website/content/docs/chat/core-capabilities/threads/python/overview.mdx

@@ -0,0 +1,5 @@
+# Threads Overview
+
+Threads organize conversations into persistent sessions that can be resumed, branched, or archived.
+
+Use this page when you need to manage conversation history and multi-session continuity.

apps/website/content/docs/chat/core-capabilities/threads/python/prompts.mdx

@@ -0,0 +1,3 @@
+# Thread Prompts
+
+Prompts for thread management should specify how threads are created, resumed, and how context is carried across sessions.

apps/website/content/docs/chat/core-capabilities/threads/python/testing.mdx

@@ -0,0 +1,3 @@
+# Thread Testing
+
+Test thread management by creating threads, adding messages, resuming sessions, and verifying that conversation history is preserved correctly.

apps/website/content/docs/chat/core-capabilities/timeline/python/build.mdx

@@ -0,0 +1,3 @@
+# Build Timeline Workflows
+
+Design timeline workflows around a virtualized message list that handles large histories and smooth auto-scrolling during streaming.

apps/website/content/docs/chat/core-capabilities/timeline/python/code.mdx

@@ -0,0 +1,3 @@
+# Timeline Code
+
+Code examples for the timeline show how to configure the message list, add custom message templates, and control scroll behavior.

apps/website/content/docs/chat/core-capabilities/timeline/python/overview.mdx

@@ -0,0 +1,5 @@
+# Timeline Overview
+
+The timeline renders the conversation as a scrollable sequence of message bubbles with automatic scroll-to-bottom and streaming indicators.
+
+Use this page when you need to customize how messages are displayed or add features like timestamps and read receipts.

apps/website/content/docs/chat/core-capabilities/timeline/python/prompts.mdx

@@ -0,0 +1,3 @@
+# Timeline Prompts
+
+Prompts for timeline configuration should describe the desired message layout, grouping rules, and any custom rendering for specific message types.

apps/website/content/docs/chat/core-capabilities/timeline/python/testing.mdx

@@ -0,0 +1,3 @@
+# Timeline Testing
+
+Test the timeline by rendering a message sequence and verifying scroll position, message ordering, and streaming indicator behavior.