Skip to content

Add branding, generative UI polish, and architecture docs#7

Merged
jpr5 merged 11 commits into
mainfrom
feat/add-branding
Mar 12, 2026
Merged

Add branding, generative UI polish, and architecture docs#7
jpr5 merged 11 commits into
mainfrom
feat/add-branding

Conversation

@jerelvelarde

@jerelvelarde jerelvelarde commented Mar 11, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Summary

  • Branding & theming: Glassmorphism design, updated header/metadata, CTA banner linking to Agent Spec docs and blog, and an explainer section for Portable Agents with Generative UI.
  • UI polish: Redesigned welcome screen, fixed light-mode text readability, scoped dark-mode color overrides, improved chat session rendering, and refined calendar/inbox/email component styles.
  • README updates: Replaced static demo.gif with an inline GitHub-hosted MP4 video and added an Architecture table documenting Agent Spec, AG-UI Protocol, and A2UI layers.
  • Review fixes: Addressed review findings R-001 through R-006.
v5.portable.agents.with.generative.ui.mp4

Test plan

  • Verify the embedded video renders on the GitHub README page
  • Confirm the architecture table renders correctly with working links
  • Check CTA banner links resolve to Agent Spec docs and blog
  • Run npm run dev and verify calendar, inbox, email compose, and daily brief surfaces render correctly

Made with Cursor

@jerelvelarde
Add Agent Spec x CopilotKit branding with glassmorphism design
6b8c469 
Introduce full brand identity matching CopilotKit's lilac/mint color
palette with animated blob backgrounds, glassmorphism glass containers,
Plus Jakarta Sans typography, branded header, favicon, and softened
message/component styling for seamless glass integration.
@jerelvelarde
Add CTA banner for Agent Spec docs and blog
cbda9b4 
Adds a call-to-action banner below the header with links to the
Agent Spec documentation and a placeholder for the blog post.
Styled with the existing glassmorphism brand tokens and responsive
for mobile.

Made-with: Cursor
@jerelvelarde
Update CTA button labels to Get Started and Read More
1eafa3c 
Made-with: Cursor
@jerelvelarde
Refine glassmorphism theming and update metadata
d52cef3 
- Update page metadata to Scheduling Assistant Demo branding
- Fix dark mode muted variable for CopilotKit glass container
- Switch tool result card surfaces to direct utility classes for
  Turbopack compatibility

Made-with: Cursor
@jerelvelarde
Update header branding to Agent Spec UI with larger typography
e3945b0 
Made-with: Cursor
@jerelvelarde
Add explainer section and update branding to Portable Agents with Gen…
e89e12e 
…erative UI

Renames title/metadata across layout and header. Adds ExplainerSection
component with 3-column card grid explaining Agent Spec, CopilotKit, and
A2UI — shown below the chat input in non-canvas mode.

Made-with: Cursor
@jerelvelarde
Redesign welcome screen layout and fix chat session rendering
d556af3 
Move branded title and explainer cards into the CopilotChat children
render prop to create a centered welcome experience with suggestion
chips. Fix scrollView deadlock where messageView.children was never
called because scrollView was conditionally unmounted — now always
mounted via a hidden wrapper that becomes visible when messages arrive.
Polish input area spacing and background consistency.

Made-with: Cursor
@jerelvelarde
Fix light mode text readability by scoping dark-mode color overrides
16bf9ed 
Near-white text colors on .a2ui-chat-container and welcome screen were
applied globally instead of inside @media (prefers-color-scheme: dark),
making text invisible against light backgrounds.

Made-with: Cursor
@jerelvelarde
Fix review findings R-001 through R-006
20b292b 
- R-001: Replace render-time microtask setState with MessageTracker useEffect component
- R-002: Stabilize useAgent/useCopilotKit refs via useRef for stable submitSuggestion callback
- R-003: Use visibility:hidden with full dimensions instead of zero-sized scrollView container
- R-004: Remove duplicate Plus Jakarta Sans CSS @import (keep HTML link only)
- R-005: Add CopilotKit selector dependency comment block for !important overrides
- R-006: Replace background-clip:text on dark mode messages with direct color values

Made-with: Cursor
@jerelvelarde
Replace demo.gif with GitHub-hosted video and add architecture table
99023db 
Swap the static GIF for an inline MP4 video player and add an
Architecture section with a summary table for Agent Spec, AG-UI
Protocol, and A2UI.

Made-with: Cursor
@jerelvelarde

jerelvelarde commented Mar 11, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

Chalk Agent Self-Review

Verdict: No merge blockers — P0=0, P1=0 (all P1s resolved)

Resolved (R-001 → R-006)

ID Sev Category Summary
R-001 P1 Correctness Fixed React anti-pattern: Promise.resolve().then(setState) in render → moved to useEffect
R-002 P1 Reliability Fixed unstable useAgent/useCopilotKit refs in useCallback deps
R-003 P1 Correctness Fixed zero-sized scroll container when hasMessages=false
R-004 P2 Reliability Removed duplicate Plus Jakarta Sans font load (CSS @import + <link>)
R-005 P2 Reliability Documented CopilotKit internal selector overrides with !important
R-006 P2 Correctness Scoped dark-mode background-clip: text to avoid invisible nested elements

Open (P2–P3, non-blocking for demo)

ID Sev Category Summary
R-007 P2 Correctness BLOG_URL = "#" placeholder — "Read More" CTA links nowhere
R-008 P3 Performance Continuous CSS blob animations may drain battery on low-end devices
R-009 P3 Reliability background-clip: text on suggestion chips targets CopilotKit internals
R-010 P3 Testing ExplainerSection has no data-testid attrs

Smoke Test Checklist

  • Welcome screen → first message transition works without flicker
  • Calendar, inbox, email compose, and daily brief surfaces render correctly
  • Dark mode text is readable (no invisible text in chat messages)

@jerelvelarde

jerelvelarde commented Mar 11, 2026

Copy link
Copy Markdown
Contributor Author

Requesting review @jpr5 @blove

(Blog link will be published tomorrow and I'll update a link for R-007)

@jerelvelarde

jerelvelarde commented Mar 12, 2026

Copy link
Copy Markdown
Contributor Author

Self-Review Update

R-007 resolved in 875e8cb — added blog link to "Read More" CTA button.

Resolved (R-001 → R-007)

ID Sev Category Summary
R-001 P1 Correctness Fixed React anti-pattern: Promise.resolve().then(setState) in render → moved to useEffect
R-002 P1 Reliability Fixed unstable useAgent/useCopilotKit refs in useCallback deps
R-003 P1 Correctness Fixed zero-sized scroll container when hasMessages=false
R-004 P2 Reliability Removed duplicate Plus Jakarta Sans font load (CSS @import + <link>)
R-005 P2 Reliability Documented CopilotKit internal selector overrides with !important
R-006 P2 Correctness Scoped dark-mode background-clip: text to avoid invisible nested elements
R-007 P2 Correctness ✅ Added blog link to "Read More" CTA (875e8cb)

Remaining Open (P3, non-blocking)

ID Sev Category Summary
R-008 P3 Performance Continuous CSS blob animations may drain battery on low-end devices
R-009 P3 Reliability background-clip: text on suggestion chips targets CopilotKit internals
R-010 P3 Testing ExplainerSection has no data-testid attrs

@jpr5
jpr5 merged commit 38b5379 into main Mar 12, 2026
This was referenced Mar 12, 2026
Open
Open
Open
@jerelvelarde
jerelvelarde deleted the feat/add-branding branch March 12, 2026 16:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@jerelvelarde @jpr5