fix(cockpit-examples): use CSS sidebar widths

blove · web-flow · commit 496db8e81cb6 · 2026-07-07T22:32:25.000-07:00
Fix cockpit render/chat example width props and add regression coverage for render example latent bug classes.
diff --git a/cockpit/chat/input/angular/src/app/input.component.ts b/cockpit/chat/input/angular/src/app/input.component.ts
@@ -33,7 +33,7 @@ import { injectAgent } from '@threadplane/langgraph';
     ExampleChatLayoutComponent,
   ],
   template: `
-    <example-chat-layout sidebarWidth="w-72">
+    <example-chat-layout sidebarWidth="18rem">
       <div main class="flex-1 flex flex-col min-w-0">
         <header class="px-4 py-3 border-b" style="border-color: var(--tplane-chat-separator); background: var(--tplane-chat-bg);">
           <h1 class="text-sm font-semibold" style="color: var(--tplane-chat-text);">Chat Input Demo</h1>
diff --git a/cockpit/chat/interrupts/angular/src/app/interrupts.component.ts b/cockpit/chat/interrupts/angular/src/app/interrupts.component.ts
@@ -50,7 +50,7 @@ const SUGGESTIONS = [
     ExampleChatLayoutComponent,
   ],
   template: `
-    <example-chat-layout sidebarWidth="w-80">
+    <example-chat-layout sidebarWidth="20rem">
       <chat main [agent]="agent" class="flex-1 min-w-0">
         <div chatWelcomeSuggestions>
           @for (s of suggestions; track s.value) {
diff --git a/cockpit/chat/messages/angular/src/app/messages.component.ts b/cockpit/chat/messages/angular/src/app/messages.component.ts
@@ -39,7 +39,7 @@ import { MESSAGES_AGENT, type MessagesState } from './agent-ref';
     ExampleChatLayoutComponent,
   ],
   template: `
-    <example-chat-layout sidebarWidth="w-72">
+    <example-chat-layout sidebarWidth="18rem">
       <div main class="flex-1 flex flex-col min-w-0">
         <header class="px-4 py-3 border-b" style="border-color: var(--tplane-chat-separator); background: var(--tplane-chat-bg);">
           <h1 class="text-sm font-semibold" style="color: var(--tplane-chat-text);">Chat Messages Primitives</h1>
diff --git a/cockpit/chat/subagents/angular/src/app/subagents.component.ts b/cockpit/chat/subagents/angular/src/app/subagents.component.ts
@@ -35,7 +35,7 @@ const SUGGESTIONS = [
     ExampleChatLayoutComponent,
   ],
   template: `
-    <example-chat-layout sidebarWidth="w-80">
+    <example-chat-layout sidebarWidth="20rem">
       <chat main [agent]="agent" class="flex-1 min-w-0">
         <div chatWelcomeSuggestions>
           @for (s of suggestions; track s.value) {
diff --git a/cockpit/chat/theming/angular/src/app/theming.component.ts b/cockpit/chat/theming/angular/src/app/theming.component.ts
@@ -50,7 +50,7 @@ const THEMES: Record<string, Record<string, string>> = {
   standalone: true,
   imports: [ChatComponent, ExampleChatLayoutComponent, TitleCasePipe],
   template: `
-    <example-chat-layout sidebarWidth="w-72">
+    <example-chat-layout sidebarWidth="18rem">
       <chat main [agent]="agent" class="flex-1 min-w-0" />
       <div sidebar class="p-4 space-y-4" style="background: var(--tplane-chat-bg); color: var(--tplane-chat-text);">
         <h3 class="text-xs font-semibold uppercase tracking-wide"
diff --git a/cockpit/chat/threads/angular/src/app/threads.component.ts b/cockpit/chat/threads/angular/src/app/threads.component.ts
@@ -44,7 +44,7 @@ const activeThreadIdState = signal<string | null>(null);
     }),
   ],
   template: `
-    <example-chat-layout sidebarPosition="left" sidebarWidth="w-64">
+    <example-chat-layout sidebarPosition="left" sidebarWidth="16rem">
       <chat main
         [agent]="agent"
         [threads]="threadsSvc.threads()"
diff --git a/cockpit/chat/timeline/angular/src/app/timeline.component.ts b/cockpit/chat/timeline/angular/src/app/timeline.component.ts
@@ -14,7 +14,7 @@ import { injectAgent } from '@threadplane/langgraph';
   standalone: true,
   imports: [ChatComponent, ChatTimelineSliderComponent, ExampleChatLayoutComponent],
   template: `
-    <example-chat-layout sidebarWidth="w-80">
+    <example-chat-layout sidebarWidth="20rem">
       <chat main [agent]="agent" class="flex-1 min-w-0" />
       <div sidebar class="p-4 space-y-4" style="background: var(--tplane-chat-bg); color: var(--tplane-chat-text);">
         <h3 class="text-xs font-semibold uppercase tracking-wide"
diff --git a/cockpit/chat/tool-calls/angular/src/app/tool-calls.component.ts b/cockpit/chat/tool-calls/angular/src/app/tool-calls.component.ts
@@ -35,7 +35,7 @@ const SUGGESTIONS = [
     ExampleChatLayoutComponent,
   ],
   template: `
-    <example-chat-layout sidebarWidth="w-80">
+    <example-chat-layout sidebarWidth="20rem">
       <chat main [agent]="agent" class="flex-1 min-w-0">
         <div chatWelcomeSuggestions>
           @for (s of suggestions; track s.value) {
diff --git a/cockpit/deep-agents/filesystem/angular/src/app/filesystem.component.ts b/cockpit/deep-agents/filesystem/angular/src/app/filesystem.component.ts
@@ -31,7 +31,7 @@ interface FileOperation {
   standalone: true,
   imports: [ChatComponent, ExampleChatLayoutComponent],
   template: `
-    <example-chat-layout sidebarWidth="w-72">
+    <example-chat-layout sidebarWidth="18rem">
       <chat main [agent]="agent" [views]="ui" [store]="uiStore" class="flex-1 min-w-0" />
       <div sidebar class="p-4 space-y-2" style="background: var(--tplane-chat-bg); color: var(--tplane-chat-text);">
         <h3 class="text-xs font-semibold uppercase tracking-wide"
diff --git a/cockpit/deep-agents/memory/angular/src/app/memory.component.ts b/cockpit/deep-agents/memory/angular/src/app/memory.component.ts
@@ -20,7 +20,7 @@ import { injectAgent } from '@threadplane/langgraph';
   standalone: true,
   imports: [ChatComponent, ExampleChatLayoutComponent],
   template: `
-    <example-chat-layout sidebarWidth="w-72">
+    <example-chat-layout sidebarWidth="18rem">
       <chat main [agent]="agent" class="flex-1 min-w-0" />
       <div sidebar class="p-4 space-y-2" style="background: var(--tplane-chat-bg); color: var(--tplane-chat-text);">
         <h3 class="text-xs font-semibold uppercase tracking-wide"
diff --git a/cockpit/deep-agents/planning/angular/src/app/planning.component.ts b/cockpit/deep-agents/planning/angular/src/app/planning.component.ts
@@ -32,7 +32,7 @@ interface PlanStep {
   standalone: true,
   imports: [ChatComponent, ExampleChatLayoutComponent],
   template: `
-    <example-chat-layout sidebarWidth="w-72">
+    <example-chat-layout sidebarWidth="18rem">
       <chat main [agent]="agent" [views]="ui" [store]="uiStore" class="flex-1 min-w-0" />
       <div sidebar class="p-4 space-y-2" style="background: var(--tplane-chat-bg); color: var(--tplane-chat-text);">
         <h3 class="text-xs font-semibold uppercase tracking-wide"
diff --git a/cockpit/deep-agents/sandboxes/angular/src/app/sandboxes.component.ts b/cockpit/deep-agents/sandboxes/angular/src/app/sandboxes.component.ts
@@ -29,7 +29,7 @@ interface CodeExecution {
   standalone: true,
   imports: [ChatComponent, ExampleChatLayoutComponent],
   template: `
-    <example-chat-layout sidebarWidth="w-80">
+    <example-chat-layout sidebarWidth="20rem">
       <chat main [agent]="agent" [views]="ui" [store]="uiStore" class="flex-1 min-w-0" />
       <div sidebar class="p-4 space-y-3" style="background: var(--tplane-chat-bg); color: var(--tplane-chat-text);">
         <h3 class="text-xs font-semibold uppercase tracking-wide"
diff --git a/cockpit/deep-agents/skills/angular/src/app/skills.component.ts b/cockpit/deep-agents/skills/angular/src/app/skills.component.ts
@@ -31,7 +31,7 @@ interface SkillInvocation {
   standalone: true,
   imports: [ChatComponent, ExampleChatLayoutComponent],
   template: `
-    <example-chat-layout sidebarWidth="w-72">
+    <example-chat-layout sidebarWidth="18rem">
       <chat main [agent]="agent" [views]="ui" [store]="uiStore" class="flex-1 min-w-0" />
       <div sidebar class="p-4 space-y-3" style="background: var(--tplane-chat-bg); color: var(--tplane-chat-text);">
         <h3 class="text-xs font-semibold uppercase tracking-wide"
diff --git a/cockpit/deep-agents/subagents/angular/src/app/subagents.component.ts b/cockpit/deep-agents/subagents/angular/src/app/subagents.component.ts
@@ -29,7 +29,7 @@ interface Delegation {
   standalone: true,
   imports: [ChatComponent, ExampleChatLayoutComponent],
   template: `
-    <example-chat-layout sidebarWidth="w-72">
+    <example-chat-layout sidebarWidth="18rem">
       <chat main [agent]="agent" class="flex-1 min-w-0" />
       <div sidebar class="p-4 space-y-2" style="background: var(--tplane-chat-bg); color: var(--tplane-chat-text);">
         <h3 class="text-xs font-semibold uppercase tracking-wide"
diff --git a/cockpit/render/shared/render-examples-display-coercion.spec.ts b/cockpit/render/shared/render-examples-display-coercion.spec.ts
@@ -4,7 +4,7 @@
 // bindings dropped, PR #773 "[object Object]" flash for unresolved bindings).
 //
 // The demo view components in every render/* example bind element props
-// (`content`, `value`) that resolve — via $state/$fn — to non-string values
+// (`content`, `value`) that resolve — via $state/$computed — to non-string values
 // (numbers, or, mid-stream, unresolved objects). Displaying those raw either
 // dropped the value (string-only coercion) or rendered "[object Object]".
 // The fix routes them through the shared `toDisplayText` helper.
diff --git a/cockpit/render/shared/render-examples-latent-bugs.spec.ts b/cockpit/render/shared/render-examples-latent-bugs.spec.ts
@@ -0,0 +1,96 @@
+// SPDX-License-Identifier: MIT
+import { existsSync, readdirSync, readFileSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const WORKSPACE_ROOT = resolve(dirname(fileURLToPath(import.meta.url)), '../../..');
+const RENDER_DIR = resolve(WORKSPACE_ROOT, 'cockpit/render');
+const ANGULAR_EXAMPLE_DIRS = ['cockpit', 'examples'];
+const SUPPORTED_RENDER_DIRECTIVES = new Set([
+  '$and',
+  '$bindItem',
+  '$bindState',
+  '$computed',
+  '$cond',
+  '$else',
+  '$index',
+  '$item',
+  '$or',
+  '$state',
+  '$template',
+  '$then',
+]);
+
+function renderSpecFiles(): string[] {
+  return readdirSync(RENDER_DIR, { withFileTypes: true })
+    .filter((entry) => entry.isDirectory() && entry.name !== 'shared')
+    .map((entry) => resolve(RENDER_DIR, entry.name, 'angular/src/app/specs.ts'))
+    .filter((file) => existsSync(file));
+}
+
+function angularSourceFiles(dir: string): string[] {
+  const out: string[] = [];
+  for (const entry of readdirSync(dir, { withFileTypes: true })) {
+    const path = resolve(dir, entry.name);
+    if (entry.isDirectory()) {
+      out.push(...angularSourceFiles(path));
+    } else if (entry.name.endsWith('.ts') || entry.name.endsWith('.html')) {
+      out.push(path);
+    }
+  }
+  return out;
+}
+
+function collectDirectiveNames(value: unknown, out = new Set<string>()): Set<string> {
+  if (!value || typeof value !== 'object') return out;
+  if (Array.isArray(value)) {
+    for (const item of value) collectDirectiveNames(item, out);
+    return out;
+  }
+  for (const [key, nested] of Object.entries(value)) {
+    if (/^\$[A-Za-z][A-Za-z0-9_]*$/.test(key)) out.add(key);
+    collectDirectiveNames(nested, out);
+  }
+  return out;
+}
+
+function parseJsonRenderSpecs(source: string): unknown[] {
+  const specs: unknown[] = [];
+  const pattern = /json:\s*JSON\.stringify\(([\s\S]*?),\s*null,\s*2\)/g;
+  for (const match of source.matchAll(pattern)) {
+    specs.push(Function(`"use strict"; return (${match[1]});`)());
+  }
+  return specs;
+}
+
+describe('cockpit examples latent bug sweep guards', () => {
+  it('uses only render directives supported by @json-render/core', () => {
+    const unsupported: string[] = [];
+    for (const file of renderSpecFiles()) {
+      const rel = file.slice(WORKSPACE_ROOT.length + 1);
+      for (const spec of parseJsonRenderSpecs(readFileSync(file, 'utf8'))) {
+        for (const directive of collectDirectiveNames(spec)) {
+          if (!SUPPORTED_RENDER_DIRECTIVES.has(directive)) {
+            unsupported.push(`${rel}: ${directive}`);
+          }
+        }
+      }
+    }
+
+    expect(unsupported).toEqual([]);
+  });
+
+  it('passes CSS lengths, not Tailwind width classes, to example-chat-layout sidebarWidth', () => {
+    const offenders: string[] = [];
+    for (const root of ANGULAR_EXAMPLE_DIRS) {
+      for (const file of angularSourceFiles(resolve(WORKSPACE_ROOT, root))) {
+        const source = readFileSync(file, 'utf8');
+        if (/sidebarWidth="w-\d+"/.test(source)) {
+          offenders.push(file.slice(WORKSPACE_ROOT.length + 1));
+        }
+      }
+    }
+
+    expect(offenders).toEqual([]);
+  });
+});
diff --git a/cockpit/render/shared/render-examples-streaming-harness.spec.ts b/cockpit/render/shared/render-examples-streaming-harness.spec.ts
@@ -0,0 +1,95 @@
+// SPDX-License-Identifier: MIT
+import { TestBed } from '@angular/core/testing';
+import { provideRender } from '@threadplane/render';
+
+import { COMPUTED_FUNCTIONS_SPECS } from '../computed-functions/angular/src/app/specs';
+import { ComputedFunctionsComponent } from '../computed-functions/angular/src/app/computed-functions.component';
+import { ELEMENT_RENDERING_SPECS } from '../element-rendering/angular/src/app/specs';
+import { ElementRenderingComponent } from '../element-rendering/angular/src/app/element-rendering.component';
+import { REGISTRY_SPECS } from '../registry/angular/src/app/specs';
+import { RegistryComponent } from '../registry/angular/src/app/registry.component';
+import { REPEAT_LOOPS_SPECS } from '../repeat-loops/angular/src/app/specs';
+import { RepeatLoopsComponent } from '../repeat-loops/angular/src/app/repeat-loops.component';
+import { SPEC_RENDERING_SPECS } from '../spec-rendering/angular/src/app/specs';
+import { SpecRenderingComponent } from '../spec-rendering/angular/src/app/spec-rendering.component';
+import { STATE_MANAGEMENT_SPECS } from '../state-management/angular/src/app/specs';
+import { StateManagementComponent } from '../state-management/angular/src/app/state-management.component';
+import { StreamingSimulator } from './streaming-simulator';
+
+interface DemoSpec {
+  label: string;
+  json: string;
+}
+
+interface RenderExampleHarness {
+  simulator: StreamingSimulator;
+}
+
+const COMPUTED_FUNCTIONS = {
+  formatDate: (args: Record<string, unknown>) => new Date(args['value'] as string).toLocaleDateString(),
+  uppercase: (args: Record<string, unknown>) => (args['value'] as string).toUpperCase(),
+  multiply: (args: Record<string, unknown>) => (args['a'] as number) * (args['b'] as number),
+  reverse: (args: Record<string, unknown>) => (args['value'] as string).split('').reverse().join(''),
+};
+
+const EXAMPLES = [
+  { name: 'registry', component: RegistryComponent, specs: REGISTRY_SPECS },
+  { name: 'spec-rendering', component: SpecRenderingComponent, specs: SPEC_RENDERING_SPECS },
+  { name: 'element-rendering', component: ElementRenderingComponent, specs: ELEMENT_RENDERING_SPECS },
+  { name: 'state-management', component: StateManagementComponent, specs: STATE_MANAGEMENT_SPECS },
+  { name: 'repeat-loops', component: RepeatLoopsComponent, specs: REPEAT_LOOPS_SPECS },
+  { name: 'computed-functions', component: ComputedFunctionsComponent, specs: COMPUTED_FUNCTIONS_SPECS },
+];
+
+describe('render example streaming fixtures', () => {
+  for (const example of EXAMPLES) {
+    describe(example.name, () => {
+      beforeEach(async () => {
+        await TestBed.configureTestingModule({
+          imports: [example.component],
+          providers: [provideRender({ functions: COMPUTED_FUNCTIONS })],
+        }).compileComponents();
+      });
+
+      for (const spec of example.specs as DemoSpec[]) {
+        it(`${spec.label} fully streams without object flash text`, async () => {
+          const fixture = TestBed.createComponent(example.component);
+          const component = fixture.componentInstance as unknown as RenderExampleHarness;
+          component.simulator.setSource(spec.json);
+          component.simulator.seek(spec.json.length);
+
+          fixture.detectChanges();
+          await fixture.whenStable();
+          fixture.detectChanges();
+
+          const text = (fixture.nativeElement as HTMLElement).textContent ?? '';
+          expect(text).not.toContain('[object Object]');
+          expect(text).not.toContain('object Object');
+          expect(text.trim()).not.toBe('');
+        });
+      }
+    });
+  }
+
+  it('renders non-string primitive state and computed values as display text', async () => {
+    await TestBed.configureTestingModule({
+      imports: [StateManagementComponent, ComputedFunctionsComponent],
+      providers: [provideRender({ functions: COMPUTED_FUNCTIONS })],
+    }).compileComponents();
+
+    const stateFixture = TestBed.createComponent(StateManagementComponent);
+    const stateComponent = stateFixture.componentInstance as unknown as RenderExampleHarness;
+    stateComponent.simulator.setSource(STATE_MANAGEMENT_SPECS[1].json);
+    stateComponent.simulator.seek(STATE_MANAGEMENT_SPECS[1].json.length);
+    stateFixture.detectChanges();
+
+    const computedFixture = TestBed.createComponent(ComputedFunctionsComponent);
+    const computedComponent = computedFixture.componentInstance as unknown as RenderExampleHarness;
+    computedComponent.simulator.setSource(COMPUTED_FUNCTIONS_SPECS[1].json);
+    computedComponent.simulator.seek(COMPUTED_FUNCTIONS_SPECS[1].json.length);
+    computedFixture.detectChanges();
+
+    expect((stateFixture.nativeElement as HTMLElement).textContent).toContain('30');
+    expect((computedFixture.nativeElement as HTMLElement).textContent).toContain('42');
+  });
+});
diff --git a/cockpit/render/shared/to-display-text.ts b/cockpit/render/shared/to-display-text.ts
@@ -5,7 +5,7 @@
  * for an unresolved/object binding — something else) into display text.
  *
  * Demo view components bind props like `content`/`value` that can resolve to
- * non-string primitives via `$state`/`$fn` bindings (e.g. a numeric
+ * non-string primitives via `$state`/`$computed` bindings (e.g. a numeric
  * `/user/age`). Returning `''` only for strings silently dropped those values;
  * this renders any primitive and treats objects/null as "no text".
  */
diff --git a/cockpit/render/tsconfig.spec.json b/cockpit/render/tsconfig.spec.json
@@ -0,0 +1,24 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "module": "preserve",
+    "emitDeclarationOnly": false,
+    "composite": false,
+    "declaration": false,
+    "lib": ["es2022", "dom"],
+    "types": ["vitest/globals"]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  },
+  "include": [
+    "shared/**/*.ts",
+    "*/angular/src/**/*.ts",
+    "../../libs/render/src/**/*.ts"
+  ]
+}
diff --git a/cockpit/render/vite.config.mts b/cockpit/render/vite.config.mts
@@ -0,0 +1,14 @@
+import angular from '@analogjs/vite-plugin-angular';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [angular({ tsconfig: './tsconfig.spec.json' }), nxViteTsPaths()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    include: ['shared/**/*.spec.ts'],
+    setupFiles: ['../../libs/render/src/test-setup.ts'],
+    pool: 'forks',
+  },
+});
