feat(example-layouts): shared responsive layout library for 30 cockpit apps

apps/website/src/components/shared/Nav.tsx

@@ -195,7 +195,6 @@ export function Nav() {
             {(mobileTab === 'docs' && isDocsPage && currentLib) && (
               <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                 {currentLib.sections.map((section) => {
-                  const headerColor = section.color === 'red' ? tokens.colors.angularRed : tokens.colors.accent;
                   return (
                     <div key={section.id}>
                       <button

cockpit/chat/debug/angular/src/app/debug.component.ts

@@ -2,6 +2,7 @@
 import { Component } from '@angular/core';
 import { ChatDebugComponent } from '@cacheplane/chat';
 import { agent } from '@cacheplane/angular';
+import { ExampleChatLayoutComponent } from '@cacheplane/example-layouts';
 import { environment } from '../environments/environment';
 
 /**
@@ -12,11 +13,11 @@ import { environment } from '../environments/environment';
 @Component({
   selector: 'app-debug',
   standalone: true,
-  imports: [ChatDebugComponent],
+  imports: [ChatDebugComponent, ExampleChatLayoutComponent],
   template: `
-    <div class="h-screen">
-      <chat-debug [ref]="stream" />
-    </div>
+    <example-chat-layout>
+      <chat-debug main [ref]="stream" />
+    </example-chat-layout>
   `,
 })
 export class DebugPageComponent {

cockpit/chat/generative-ui/angular/src/app/generative-ui.component.ts

@@ -2,6 +2,7 @@
 import { Component } from '@angular/core';
 import { ChatComponent, views } from '@cacheplane/chat';
 import { agent } from '@cacheplane/angular';
+import { ExampleChatLayoutComponent } from '@cacheplane/example-layouts';
 import { environment } from '../environments/environment';
 import { WeatherCardComponent } from './views/weather-card.component';
 import { StatCardComponent } from './views/stat-card.component';
@@ -16,8 +17,12 @@ const myViews = views({
 @Component({
   selector: 'app-generative-ui',
   standalone: true,
-  imports: [ChatComponent],
-  template: `<chat [ref]="agentRef" [views]="myViews" class="block h-screen" />`,
+  imports: [ChatComponent, ExampleChatLayoutComponent],
+  template: `
+    <example-chat-layout>
+      <chat main [ref]="agentRef" [views]="myViews" class="flex-1 min-w-0" />
+    </example-chat-layout>
+  `,
 })
 export class GenerativeUiComponent {
   protected readonly agentRef = agent({

cockpit/chat/input/angular/src/app/input.component.ts

@@ -2,6 +2,7 @@
 import { Component, computed } from '@angular/core';
 import { ChatInputComponent as ChatInputPrimitive } from '@cacheplane/chat';
 import { ChatMessagesComponent } from '@cacheplane/chat';
+import { ExampleChatLayoutComponent } from '@cacheplane/example-layouts';
 import { agent } from '@cacheplane/angular';
 import { environment } from '../environments/environment';
 
@@ -13,10 +14,10 @@ import { environment } from '../environments/environment';
 @Component({
   selector: 'app-input',
   standalone: true,
-  imports: [ChatInputPrimitive, ChatMessagesComponent],
+  imports: [ChatInputPrimitive, ChatMessagesComponent, ExampleChatLayoutComponent],
   template: `
-    <div class="flex h-screen">
-      <div class="flex-1 flex flex-col min-w-0">
+    <example-chat-layout sidebarWidth="w-72">
+      <div main class="flex-1 flex flex-col min-w-0">
         <header class="px-4 py-3 border-b" style="border-color: var(--chat-border, #333); background: var(--chat-bg, #171717);">
           <h1 class="text-sm font-semibold" style="color: var(--chat-text, #e0e0e0);">Chat Input Demo</h1>
         </header>
@@ -27,8 +28,7 @@ import { environment } from '../environments/environment';
           <chat-input [ref]="stream" placeholder="Try typing here..." (send)="submitMessage($event)" />
         </div>
       </div>
-      <aside class="w-72 shrink-0 border-l overflow-y-auto p-4 space-y-4"
-             style="border-color: var(--chat-border, #333); background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
+      <div sidebar class="p-4 space-y-4" style="background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
         <h3 class="text-xs font-semibold uppercase tracking-wide"
             style="color: var(--chat-text-muted, #777);">Input State</h3>
         <dl class="text-xs space-y-2" style="color: var(--chat-text-muted, #777);">
@@ -47,8 +47,8 @@ import { environment } from '../environments/environment';
             <li>Auto-disable while streaming</li>
           </ul>
         </div>
-      </aside>
-    </div>
+      </div>
+    </example-chat-layout>
   `,
 })
 export class InputComponent {

cockpit/chat/interrupts/angular/src/app/interrupts.component.ts

@@ -2,6 +2,7 @@
 import { Component, computed } from '@angular/core';
 import { JsonPipe } from '@angular/common';
 import { ChatComponent, ChatInterruptPanelComponent } from '@cacheplane/chat';
+import { ExampleChatLayoutComponent } from '@cacheplane/example-layouts';
 import { agent } from '@cacheplane/angular';
 import { environment } from '../environments/environment';
 
@@ -14,12 +15,11 @@ import { environment } from '../environments/environment';
 @Component({
   selector: 'app-interrupts',
   standalone: true,
-  imports: [ChatComponent, ChatInterruptPanelComponent, JsonPipe],
+  imports: [ChatComponent, ChatInterruptPanelComponent, JsonPipe, ExampleChatLayoutComponent],
   template: `
-    <div class="flex h-screen">
-      <chat [ref]="stream" class="flex-1 min-w-0" />
-      <aside class="w-80 shrink-0 border-l overflow-y-auto p-4 space-y-4"
-             style="border-color: var(--chat-border, #333); background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
+    <example-chat-layout sidebarWidth="w-80">
+      <chat main [ref]="stream" class="flex-1 min-w-0" />
+      <div sidebar class="p-4 space-y-4" style="background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
         <h3 class="text-xs font-semibold uppercase tracking-wide"
             style="color: var(--chat-text-muted, #777);">Interrupt Panel</h3>
         <chat-interrupt-panel [ref]="stream" />
@@ -28,8 +28,8 @@ import { environment } from '../environments/environment';
               style="color: var(--chat-text-muted, #777);">Stream Status</h4>
           <p class="text-xs font-mono" style="color: var(--chat-text-muted, #777);">{{ streamStatus() }}</p>
         </div>
-      </aside>
-    </div>
+      </div>
+    </example-chat-layout>
   `,
 })
 export class InterruptsComponent {

cockpit/chat/messages/angular/src/app/messages.component.ts

@@ -5,6 +5,7 @@ import {
   ChatInputComponent,
   ChatTypingIndicatorComponent,
 } from '@cacheplane/chat';
+import { ExampleChatLayoutComponent } from '@cacheplane/example-layouts';
 import { agent } from '@cacheplane/angular';
 import { environment } from '../environments/environment';
 
@@ -18,10 +19,10 @@ import { environment } from '../environments/environment';
 @Component({
   selector: 'app-messages',
   standalone: true,
-  imports: [ChatMessagesComponent, ChatInputComponent, ChatTypingIndicatorComponent],
+  imports: [ChatMessagesComponent, ChatInputComponent, ChatTypingIndicatorComponent, ExampleChatLayoutComponent],
   template: `
-    <div class="flex h-screen">
-      <div class="flex-1 flex flex-col min-w-0">
+    <example-chat-layout sidebarWidth="w-72">
+      <div main class="flex-1 flex flex-col min-w-0">
         <header class="px-4 py-3 border-b" style="border-color: var(--chat-border, #333); background: var(--chat-bg, #171717);">
           <h1 class="text-sm font-semibold" style="color: var(--chat-text, #e0e0e0);">Chat Messages Primitives</h1>
         </header>
@@ -33,17 +34,16 @@ import { environment } from '../environments/environment';
           <chat-input [ref]="stream" (send)="submitMessage($event)" />
         </div>
       </div>
-      <aside class="w-72 shrink-0 border-l overflow-y-auto p-4 space-y-4"
-             style="border-color: var(--chat-border, #333); background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
+      <div sidebar class="p-4 space-y-4" style="background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
         <h3 class="text-xs font-semibold uppercase tracking-wide"
             style="color: var(--chat-text-muted, #777);">Primitives Used</h3>
         <ul class="text-xs space-y-2" style="color: var(--chat-text-muted, #777);">
           <li>ChatMessagesComponent</li>
           <li>ChatInputComponent</li>
           <li>ChatTypingIndicatorComponent</li>
         </ul>
-      </aside>
-    </div>
+      </div>
+    </example-chat-layout>
   `,
 })
 export class MessagesComponent {

cockpit/chat/subagents/angular/src/app/subagents.component.ts

@@ -5,6 +5,7 @@ import {
   ChatSubagentsComponent,
   ChatSubagentCardComponent,
 } from '@cacheplane/chat';
+import { ExampleChatLayoutComponent } from '@cacheplane/example-layouts';
 import { agent } from '@cacheplane/angular';
 import { environment } from '../environments/environment';
 
@@ -16,12 +17,11 @@ import { environment } from '../environments/environment';
 @Component({
   selector: 'app-subagents',
   standalone: true,
-  imports: [ChatComponent, ChatSubagentsComponent, ChatSubagentCardComponent],
+  imports: [ChatComponent, ChatSubagentsComponent, ChatSubagentCardComponent, ExampleChatLayoutComponent],
   template: `
-    <div class="flex h-screen">
-      <chat [ref]="stream" class="flex-1 min-w-0" />
-      <aside class="w-80 shrink-0 border-l overflow-y-auto p-4 space-y-4"
-             style="border-color: var(--chat-border, #333); background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
+    <example-chat-layout sidebarWidth="w-80">
+      <chat main [ref]="stream" class="flex-1 min-w-0" />
+      <div sidebar class="p-4 space-y-4" style="background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
         <h3 class="text-xs font-semibold uppercase tracking-wide"
             style="color: var(--chat-text-muted, #777);">Active Subagents</h3>
         <chat-subagents [ref]="stream" />
@@ -35,8 +35,8 @@ import { environment } from '../environments/environment';
             <li>Summary Agent</li>
           </ol>
         </div>
-      </aside>
-    </div>
+      </div>
+    </example-chat-layout>
   `,
 })
 export class SubagentsComponent {

cockpit/chat/theming/angular/src/app/theming.component.ts

@@ -1,6 +1,8 @@
 // SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
 import { Component, signal } from '@angular/core';
+import { TitleCasePipe } from '@angular/common';
 import { ChatComponent } from '@cacheplane/chat';
+import { ExampleChatLayoutComponent } from '@cacheplane/example-layouts';
 import { agent } from '@cacheplane/angular';
 import { environment } from '../environments/environment';
 
@@ -47,12 +49,11 @@ const THEMES: Record<string, Record<string, string>> = {
 @Component({
   selector: 'app-theming',
   standalone: true,
-  imports: [ChatComponent],
+  imports: [ChatComponent, ExampleChatLayoutComponent, TitleCasePipe],
   template: `
-    <div class="flex h-screen">
-      <chat [ref]="stream" class="flex-1 min-w-0" />
-      <aside class="w-72 shrink-0 border-l overflow-y-auto p-4 space-y-4"
-             style="border-color: var(--chat-border, #333); background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
+    <example-chat-layout sidebarWidth="w-72">
+      <chat main [ref]="stream" class="flex-1 min-w-0" />
+      <div sidebar class="p-4 space-y-4" style="background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
         <h3 class="text-xs font-semibold uppercase tracking-wide"
             style="color: var(--chat-text-muted, #777);">Theme Picker</h3>
         <div class="space-y-2">
@@ -78,8 +79,8 @@ const THEMES: Record<string, Record<string, string>> = {
             <li>--chat-text-muted</li>
           </ul>
         </div>
-      </aside>
-    </div>
+      </div>
+    </example-chat-layout>
   `,
 })
 export class ThemingComponent {

cockpit/chat/threads/angular/src/app/threads.component.ts

@@ -2,6 +2,7 @@
 import { Component, signal } from '@angular/core';
 import { ChatComponent, ChatThreadListComponent, type Thread } from '@cacheplane/chat';
 import { agent } from '@cacheplane/angular';
+import { ExampleChatLayoutComponent } from '@cacheplane/example-layouts';
 import { environment } from '../environments/environment';
 
 /**
@@ -11,20 +12,20 @@ import { environment } from '../environments/environment';
 @Component({
   selector: 'app-threads',
   standalone: true,
-  imports: [ChatComponent, ChatThreadListComponent],
+  imports: [ChatComponent, ChatThreadListComponent, ExampleChatLayoutComponent],
   template: `
-    <div class="flex h-screen">
-      <aside class="w-64 shrink-0 border-r overflow-y-auto p-4 space-y-4"
-             style="border-color: var(--chat-border, #333); background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
+    <example-chat-layout sidebarPosition="left" sidebarWidth="w-64">
+      <chat main [ref]="stream" [threads]="threads()" [activeThreadId]="activeThreadId()" (threadSelected)="onThreadSelected($event)" class="flex-1 min-w-0" />
+      <div sidebar class="p-4 space-y-4"
+           style="background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
         <h3 class="text-xs font-semibold uppercase tracking-wide"
             style="color: var(--chat-text-muted, #777);">Threads</h3>
         <chat-thread-list
           [threads]="threads()"
           [activeThreadId]="activeThreadId()"
           (threadSelected)="onThreadSelected($event)" />
-      </aside>
-      <chat [ref]="stream" [threads]="threads()" [activeThreadId]="activeThreadId()" (threadSelected)="onThreadSelected($event)" class="flex-1 min-w-0" />
-    </div>
+      </div>
+    </example-chat-layout>
   `,
 })
 export class ThreadsComponent {

cockpit/chat/timeline/angular/src/app/timeline.component.ts

@@ -1,6 +1,7 @@
 // SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
 import { Component } from '@angular/core';
 import { ChatComponent, ChatTimelineSliderComponent } from '@cacheplane/chat';
+import { ExampleChatLayoutComponent } from '@cacheplane/example-layouts';
 import { agent } from '@cacheplane/angular';
 import { environment } from '../environments/environment';
 
@@ -12,12 +13,11 @@ import { environment } from '../environments/environment';
 @Component({
   selector: 'app-timeline',
   standalone: true,
-  imports: [ChatComponent, ChatTimelineSliderComponent],
+  imports: [ChatComponent, ChatTimelineSliderComponent, ExampleChatLayoutComponent],
   template: `
-    <div class="flex h-screen">
-      <chat [ref]="stream" class="flex-1 min-w-0" />
-      <aside class="w-80 shrink-0 border-l overflow-y-auto p-4 space-y-4"
-             style="border-color: var(--chat-border, #333); background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
+    <example-chat-layout sidebarWidth="w-80">
+      <chat main [ref]="stream" class="flex-1 min-w-0" />
+      <div sidebar class="p-4 space-y-4" style="background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
         <h3 class="text-xs font-semibold uppercase tracking-wide"
             style="color: var(--chat-text-muted, #777);">Timeline</h3>
         <chat-timeline-slider [ref]="stream" />
@@ -29,8 +29,8 @@ import { environment } from '../environments/environment';
             through conversation history and branch from any point.
           </p>
         </div>
-      </aside>
-    </div>
+      </div>
+    </example-chat-layout>
   `,
 })
 export class TimelineComponent {

cockpit/chat/tool-calls/angular/src/app/tool-calls.component.ts

@@ -5,6 +5,7 @@ import {
   ChatToolCallsComponent,
   ChatToolCallCardComponent,
 } from '@cacheplane/chat';
+import { ExampleChatLayoutComponent } from '@cacheplane/example-layouts';
 import { agent } from '@cacheplane/angular';
 import { environment } from '../environments/environment';
 
@@ -15,12 +16,11 @@ import { environment } from '../environments/environment';
 @Component({
   selector: 'app-tool-calls',
   standalone: true,
-  imports: [ChatComponent, ChatToolCallsComponent, ChatToolCallCardComponent],
+  imports: [ChatComponent, ChatToolCallsComponent, ChatToolCallCardComponent, ExampleChatLayoutComponent],
   template: `
-    <div class="flex h-screen">
-      <chat [ref]="stream" class="flex-1 min-w-0" />
-      <aside class="w-80 shrink-0 border-l overflow-y-auto p-4 space-y-4"
-             style="border-color: var(--chat-border, #333); background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
+    <example-chat-layout sidebarWidth="w-80">
+      <chat main [ref]="stream" class="flex-1 min-w-0" />
+      <div sidebar class="p-4 space-y-4" style="background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
         <h3 class="text-xs font-semibold uppercase tracking-wide"
             style="color: var(--chat-text-muted, #777);">Tool Calls</h3>
         <chat-tool-calls [ref]="stream" />
@@ -33,8 +33,8 @@ import { environment } from '../environments/environment';
             <li>weather — City weather</li>
           </ul>
         </div>
-      </aside>
-    </div>
+      </div>
+    </example-chat-layout>
   `,
 })
 export class ToolCallsComponent {

cockpit/deep-agents/filesystem/angular/src/app/filesystem.component.ts

@@ -1,5 +1,6 @@
 import { Component, computed } from '@angular/core';
 import { ChatComponent, views } from '@cacheplane/chat';
+import { ExampleChatLayoutComponent } from '@cacheplane/example-layouts';
 import { agent } from '@cacheplane/angular';
 import { signalStateStore } from '@cacheplane/render';
 import { environment } from '../environments/environment';
@@ -29,12 +30,11 @@ interface FileOperation {
 @Component({
   selector: 'app-filesystem',
   standalone: true,
-  imports: [ChatComponent],
+  imports: [ChatComponent, ExampleChatLayoutComponent],
   template: `
-    <div class="flex h-screen">
-      <chat [ref]="stream" [views]="ui" [store]="uiStore" class="flex-1 min-w-0" />
-      <aside class="w-72 shrink-0 border-l overflow-y-auto p-4 space-y-2"
-             style="border-color: var(--chat-border, #333); background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
+    <example-chat-layout sidebarWidth="w-72">
+      <chat main [ref]="stream" [views]="ui" [store]="uiStore" class="flex-1 min-w-0" />
+      <div sidebar class="p-4 space-y-2" style="background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
         <h3 class="text-xs font-semibold uppercase tracking-wide"
             style="color: var(--chat-text-muted, #777);">File Operations</h3>
         @if (fileOps().length === 0) {
@@ -56,8 +56,8 @@ interface FileOperation {
             }
           </div>
         }
-      </aside>
-    </div>
+      </div>
+    </example-chat-layout>
   `,
 })
 export class FilesystemComponent {