feat(chat): production-ready visual redesign (0.0.3) by blove · Pull Request #157 · cacheplane/angular-agent-framework

blove · 2026-05-01T17:54:20Z

Summary

Coordinated rewrite of @ngaf/chat for production-grade visual quality. Three new layout modes (embedded/popup/sidebar), asymmetric message pattern (user bubble + assistant inline), shared chat-trace primitive driving tool calls/subagents/timeline, complete Tailwind removal in favor of component-encapsulated styles + optional @ngaf/chat/chat.css.

Closes the v0.0.2 publish friction this PR originally documented: consumers no longer need any Tailwind setup. `npm install @ngaf/chat` + drop `` in a template = working chat.

Spec & Plan

What changed

New components:

`` (floating bottom-right launcher + window)
`` (slide-in right panel, optional push-content)
`` (collapsible inline label with left-border indent — drives tool calls, subagents, timeline)
`` (header/body/footer layout shell)
`` (asymmetric user-bubble / assistant-inline variants + hover controls + streaming caret)
``, ``

Rewrites:

`` — asymmetric message pattern, traces inline above markdown, restyled empty state
`` — pill design, absolute send button, content-projection slots, focus-on-pill-click
`` — 3-dot animation
``, ``, ``, `` — all restyled, no Tailwind
``, `` — rewritten on ``
`` — vertical history walk
``, `` (+8 helpers) — restyled

Renamed:

`` → `` (`ChatMessagesComponent` → `ChatMessageListComponent`)

Removed:

`CHAT_THEME_STYLES`, `CHAT_MARKDOWN_STYLES` exports (replaced by component-encapsulated styles + optional `@ngaf/chat/chat.css`)
All Tailwind utility-class usage in chat library output

Token namespace renamed: `--chat-` → `--ngaf-chat-`

Updated downstream:

`libs/example-layouts` (both layouts rewritten without Tailwind)
3 cockpit demos required code changes (input, messages, theming); 16 already compatible
Website docs: install/quickstart/theming rewritten; new pages for chat-popup, chat-sidebar, chat-trace, layout-modes guide

Migration

```css
/* Before (0.0.2) — required */
@import "tailwindcss";
@source "../node_modules/@ngaf/chat";

/* After (0.0.3) — optional /
@import '@ngaf/chat/chat.css'; / only if you want :root token / global-class overrides */
```

```ts
// Before
import { ChatMessagesComponent, CHAT_THEME_STYLES } from '@ngaf/chat';
// After
import { ChatMessageListComponent } from '@ngaf/chat';
// CHAT_THEME_STYLES removed; tokens auto-apply via component encapsulation.
```

CSS variable consumers: rename `--chat-` → `--ngaf-chat-` (e.g., `--chat-bg` → `--ngaf-chat-bg`).

Test plan

All chat unit + conformance tests pass
All 19 cockpit chat + langgraph Angular demos build cleanly
example-layouts tests pass
Website builds (82 static pages, no MDX errors)
`dist/libs/chat/chat.css` ships in build output

🤖 Generated with Claude Code

The 0.0.2 publish workflow run failed with 'error retrieving identity token' on @ngaf/licensing and @ngaf/partial-json, and a 404 on @ngaf/a2ui. Root cause: actions/setup-node@v6.3.0 with node-version: 22 ships npm 10.9.2, which has partial OIDC code paths but doesn't fully implement the trusted-publishing flow against npm registry's OIDC endpoint. npm 11.5.1+ is required for trusted publishing. Adding 'npm install -g npm@latest' before the publish step bumps the runner to a current release. Sources: - https://philna.sh/blog/2026/01/28/trusted-publishing-npm/ - npm/cli#8730 - https://docs.npmjs.com/trusted-publishers/ Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

@source

Verified against a fresh-install consumer of @ngaf/chat@0.0.2: without Tailwind configured (and without `@source "../node_modules/@ngaf/chat"`), ChatComponent's utility classes (flex, gap-3, max-w-[75%], md:flex, ...) are tree-shaken away and the chat collapses to a column of unstyled full-width blocks. The library does not ship a precompiled stylesheet, so this is a hard consumer-side requirement. Surface it explicitly: - Quickstart gets a Tailwind setup step between install and provider config. - Installation Requirements step calls out Tailwind v4 alongside Angular 20+ and Node 18+. - Tailwind CSS section is rewritten with concrete steps (postcss config, @import, @source) rather than just an `npm install` line. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

vercel · 2026-05-01T17:54:24Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
cacheplane	Ready	Preview, Comment	May 1, 2026 9:45pm
cacheplane-minting-service	Error		May 1, 2026 9:45pm

Design for production-ready chat UI overhaul: asymmetric message pattern (user bubble + assistant inline), three layout modes (embedded, popup, sidebar), shared chat-trace primitive driving tool calls / subagents / timeline, complete Tailwind removal with encapsulated component styles + optional global chat.css. Settled architecture decisions: - Three separate compositions over a unified mode-switching one. - Hybrid styling: component-encapsulated + CSS vars + optional global stylesheet for deep overrides. - In-place rewrite of <chat>; coordinated breaking-change PR updates all 19 cockpit demos + libs/example-layouts + website docs in one shot. Ships as 0.0.3 (patch-only policy). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

56-task plan covering tokens (Phase 1), new primitives (Phase 2), existing primitive rewrites (Phase 3), trace-based card rewrites (Phase 4), top-level compositions (Phase 5), debug + interrupt panel (Phase 6), library cleanup + 0.0.3 bump (Phase 7), example-layouts (Phase 8), 19 cockpit demos (Phase 9), website docs (Phase 10), and verification + PR (Phase 11). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Renames the ChatMessagesComponent primitive to ChatMessageListComponent with selector chat-message-list, adds dedicated host styles, and updates all consumers (chat composition, chat-debug composition, public-api). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…ents

Replaces Tailwind-based layout + inline avatar markup with CSS-custom-property shell layout; wraps each message role in <chat-message> inside the per-role templates; adds <chat-tool-calls> and <chat-subagents> inside the assistant wrapper; introduces prevRole() helper for spacing context. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Replace Tailwind utility classes with hand-written BEM CSS, rename all --chat-* tokens to --ngaf-chat-*, and add CHAT_HOST_TOKENS to styles array. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Replace all Tailwind utility classes with hand-written BEM CSS, rename --chat-* tokens to --ngaf-chat-* across all 8 debug component files, and add CHAT_HOST_TOKENS to every styles array. Inline markdown styles in chat-debug updated to use new token names. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…ration) - cockpit-chat-input: ChatMessagesComponent → ChatMessageListComponent, <chat-messages> → <chat-message-list>, --chat-* → --ngaf-chat-* - cockpit-chat-messages: same rename + token migration; e2e selector chat-messages → chat-message-list - cockpit-chat-theming: THEMES map and template updated to --ngaf-chat-* token names Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Remove Tailwind requirement, update peer deps, add optional chat.css import, rewrite quickstart to 3-step no-setup flow, and rewrite theming guide with full --ngaf-chat-* token table, light/dark switching, three override paths, and migration note for old --chat-* tokens. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…es guide - Rename chat-messages.mdx → chat-message-list.mdx; update selector and class name throughout - Add chat-popup.mdx, chat-sidebar.mdx, chat-trace.mdx component pages - Add guides/layout-modes.mdx comparing embedded/popup/sidebar modes - Update --chat-* token references to --ngaf-chat-* in all existing component pages (chat-input, chat-interrupt-panel, chat-subagent-card, chat-tool-call-card) - Drop CHAT_THEME_STYLES/CHAT_MARKDOWN_STYLES from chat.mdx; note asymmetric message pattern - Add new pages and layout-modes to docs-config.ts navigation Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

The click handler on the pill div violated angular-eslint's template/click-events-have-key-events and template/interactive-supports-focus rules. The textarea inside the pill receives focus natively when its visible area is clicked, so the handler was a redundant convenience. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

@source

* chore(workflow): upgrade npm CLI for trusted publishing OIDC support The 0.0.2 publish workflow run failed with 'error retrieving identity token' on @ngaf/licensing and @ngaf/partial-json, and a 404 on @ngaf/a2ui. Root cause: actions/setup-node@v6.3.0 with node-version: 22 ships npm 10.9.2, which has partial OIDC code paths but doesn't fully implement the trusted-publishing flow against npm registry's OIDC endpoint. npm 11.5.1+ is required for trusted publishing. Adding 'npm install -g npm@latest' before the publish step bumps the runner to a current release. Sources: - https://philna.sh/blog/2026/01/28/trusted-publishing-npm/ - npm/cli#8730 - https://docs.npmjs.com/trusted-publishers/ Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * docs(chat): document Tailwind v4 requirement for compositions Verified against a fresh-install consumer of @ngaf/chat@0.0.2: without Tailwind configured (and without `@source "../node_modules/@ngaf/chat"`), ChatComponent's utility classes (flex, gap-3, max-w-[75%], md:flex, ...) are tree-shaken away and the chat collapses to a column of unstyled full-width blocks. The library does not ship a precompiled stylesheet, so this is a hard consumer-side requirement. Surface it explicitly: - Quickstart gets a Tailwind setup step between install and provider config. - Installation Requirements step calls out Tailwind v4 alongside Angular 20+ and Node 18+. - Tailwind CSS section is rewritten with concrete steps (postcss config, @import, @source) rather than just an `npm install` line. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * docs(specs): add chat library redesign design doc Design for production-ready chat UI overhaul: asymmetric message pattern (user bubble + assistant inline), three layout modes (embedded, popup, sidebar), shared chat-trace primitive driving tool calls / subagents / timeline, complete Tailwind removal with encapsulated component styles + optional global chat.css. Settled architecture decisions: - Three separate compositions over a unified mode-switching one. - Hybrid styling: component-encapsulated + CSS vars + optional global stylesheet for deep overrides. - In-place rewrite of <chat>; coordinated breaking-change PR updates all 19 cockpit demos + libs/example-layouts + website docs in one shot. Ships as 0.0.3 (patch-only policy). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * docs(plans): add chat redesign implementation plan 56-task plan covering tokens (Phase 1), new primitives (Phase 2), existing primitive rewrites (Phase 3), trace-based card rewrites (Phase 4), top-level compositions (Phase 5), debug + interrupt panel (Phase 6), library cleanup + 0.0.3 bump (Phase 7), example-layouts (Phase 8), 19 cockpit demos (Phase 9), website docs (Phase 10), and verification + PR (Phase 11). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * feat(chat): add CHAT_HOST_TOKENS design-token constant * feat(chat): ship optional chat.css global stylesheet * feat(chat): add chat-trace primitive Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(chat): add chat-window primitive * feat(chat): add chat-launcher-button primitive * feat(chat): add chat-suggestions primitive * feat(chat): add chat-message primitive (asymmetric user/assistant) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * refactor(chat): rename chat-messages -> chat-message-list Renames the ChatMessagesComponent primitive to ChatMessageListComponent with selector chat-message-list, adds dedicated host styles, and updates all consumers (chat composition, chat-debug composition, public-api). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * refactor(chat): rewrite chat-input with new pill design * refactor(chat): restyle chat-typing-indicator as 3-dot animation * refactor(chat): restyle chat-error * refactor(chat): restyle chat-interrupt * refactor(chat): restyle chat-thread-list, add optional new-thread button * refactor(chat): restyle chat-generative-ui wrapper * refactor(chat): rewrite chat-tool-call-card on chat-trace * refactor(chat): rewrite chat-subagent-card on chat-trace * refactor(chat): rewrite chat-timeline-slider as vertical history walk * feat(chat): default-render trace-based cards for tool-calls and subagents * refactor(chat): rewrite <chat> composition for new asymmetric design Replaces Tailwind-based layout + inline avatar markup with CSS-custom-property shell layout; wraps each message role in <chat-message> inside the per-role templates; adds <chat-tool-calls> and <chat-subagents> inside the assistant wrapper; introduces prevRole() helper for spacing context. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(chat): add chat-popup floating composition * feat(chat): add chat-sidebar slide-in composition * refactor(chat): restyle chat-interrupt-panel Replace Tailwind utility classes with hand-written BEM CSS, rename all --chat-* tokens to --ngaf-chat-*, and add CHAT_HOST_TOKENS to styles array. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * refactor(chat): restyle chat-debug + helpers (no Tailwind, new tokens) Replace all Tailwind utility classes with hand-written BEM CSS, rename --chat-* tokens to --ngaf-chat-* across all 8 debug component files, and add CHAT_HOST_TOKENS to every styles array. Inline markdown styles in chat-debug updated to use new token names. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * refactor(chat): drop legacy chat-theme/chat-markdown style modules * refactor(chat): update public-api for new components * chore(release): bump @ngaf/chat to 0.0.3 * refactor(example-layouts): rewrite example-chat-layout without Tailwind * refactor(example-layouts): rewrite example-split-layout without Tailwind * chore(cockpit): update demos for @ngaf/chat 0.0.3 (rename + token migration) - cockpit-chat-input: ChatMessagesComponent → ChatMessageListComponent, <chat-messages> → <chat-message-list>, --chat-* → --ngaf-chat-* - cockpit-chat-messages: same rename + token migration; e2e selector chat-messages → chat-message-list - cockpit-chat-theming: THEMES map and template updated to --ngaf-chat-* token names Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * docs(chat): rewrite install/quickstart/theming for 0.0.3 Remove Tailwind requirement, update peer deps, add optional chat.css import, rewrite quickstart to 3-step no-setup flow, and rewrite theming guide with full --ngaf-chat-* token table, light/dark switching, three override paths, and migration note for old --chat-* tokens. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * docs(chat): add chat-popup/chat-sidebar/chat-trace pages + layout-modes guide - Rename chat-messages.mdx → chat-message-list.mdx; update selector and class name throughout - Add chat-popup.mdx, chat-sidebar.mdx, chat-trace.mdx component pages - Add guides/layout-modes.mdx comparing embedded/popup/sidebar modes - Update --chat-* token references to --ngaf-chat-* in all existing component pages (chat-input, chat-interrupt-panel, chat-subagent-card, chat-tool-call-card) - Drop CHAT_THEME_STYLES/CHAT_MARKDOWN_STYLES from chat.mdx; note asymmetric message pattern - Add new pages and layout-modes to docs-config.ts navigation Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix(chat): drop click-to-focus on input pill (a11y lint) The click handler on the pill div violated angular-eslint's template/click-events-have-key-events and template/interactive-supports-focus rules. The textarea inside the pill receives focus natively when its visible area is clicked, so the handler was a redundant convenience. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>

blove and others added 2 commits May 1, 2026 10:10

blove and others added 27 commits May 1, 2026 11:25

feat(chat): add CHAT_HOST_TOKENS design-token constant

c4d5d38

feat(chat): ship optional chat.css global stylesheet

1db7ec8

feat(chat): add chat-trace primitive

a0a0093

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

feat(chat): add chat-window primitive

8362d7f

feat(chat): add chat-launcher-button primitive

29446c2

feat(chat): add chat-suggestions primitive

59ec087

feat(chat): add chat-message primitive (asymmetric user/assistant)

448df26

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

refactor(chat): rewrite chat-input with new pill design

6cab3ea

refactor(chat): restyle chat-typing-indicator as 3-dot animation

dcd3013

refactor(chat): restyle chat-error

2ea7ee2

refactor(chat): restyle chat-interrupt

3924af5

refactor(chat): restyle chat-thread-list, add optional new-thread button

88b2ec6

refactor(chat): restyle chat-generative-ui wrapper

fd274be

refactor(chat): rewrite chat-tool-call-card on chat-trace

6fe07b5

refactor(chat): rewrite chat-subagent-card on chat-trace

83ea6ba

refactor(chat): rewrite chat-timeline-slider as vertical history walk

27f8d0f

feat(chat): default-render trace-based cards for tool-calls and subag…

0258555

…ents

feat(chat): add chat-popup floating composition

207f157

feat(chat): add chat-sidebar slide-in composition

968c9fd

refactor(chat): restyle chat-interrupt-panel

e8cde56

Replace Tailwind utility classes with hand-written BEM CSS, rename all --chat-* tokens to --ngaf-chat-*, and add CHAT_HOST_TOKENS to styles array. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

refactor(chat): drop legacy chat-theme/chat-markdown style modules

f6fd430

refactor(chat): update public-api for new components

5cc226d

blove and others added 6 commits May 1, 2026 14:16

chore(release): bump @ngaf/chat to 0.0.3

5258fda

refactor(example-layouts): rewrite example-chat-layout without Tailwind

0e1da61

refactor(example-layouts): rewrite example-split-layout without Tailwind

82447ce

blove changed the title ~~docs(chat): document Tailwind v4 requirement for compositions~~ feat(chat): production-ready visual redesign (0.0.3) May 1, 2026

blove merged commit b054ff9 into main May 1, 2026
11 of 13 checks passed

blove mentioned this pull request May 1, 2026

fix(chat): critical message-rendering bugs (0.0.4) #161

Closed

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(chat): production-ready visual redesign (0.0.3)#157

feat(chat): production-ready visual redesign (0.0.3)#157
blove merged 36 commits into
mainfrom
claude/dazzling-dewdney-887eac

blove commented May 1, 2026 •

edited

Loading

Uh oh!

vercel Bot commented May 1, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

blove commented May 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Spec & Plan

What changed

Migration

Test plan

Uh oh!

vercel Bot commented May 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

blove commented May 1, 2026 •

edited

Loading

vercel Bot commented May 1, 2026 •

edited

Loading