Agent Styling Clean Up- Interface Styling Redesign

[twblack88]

#241 — Agent Styling Clean Up: Interface Styling Redesign

Umbrella for the visual redesign of the agentic-chat prompt interface. Sub-issues are tracked separately and link below — this body is the cross-cutting context: stack, branching policy, visual references, and the design-system principles every sub-issue should follow.

Branching

All work integrates on epic/agent-styling. Each sub-issue's PR forks from and targets that branch. #248 (glass spike) does the same but can be rebased out and tabled separately if it fails its perf criteria, the epic doesn't need it to ship. epic/agent-styling merges to main as a unit once the polish package reads cohesively end-to-end.

Goal

Softer, more inviting first impression. Better hierarchy and info display. Visual language leans on Linear's mobile inbox aesthetic — restrained low-blur glass on floating surfaces, larger radii on primary surfaces, dark neutral palette.

Visual references

Reference screenshots are attached to this Linear issue (Linear inbox + Telegram chats). Inspiration only — match the feel, do not copy the layouts.

Stack context (read before touching anything)

• AI framework: Vercel AI SDK end to end. @ai-sdk/react (useChat) on the client, @ai-sdk/anthropic + Hono on the server (apps/agentic-server). Langchain has been fully removed in PR shapeshift/agentic-chat#36 any prompt context, old comment, or stale branch referencing @langchain/* is wrong and should be ignored.
• Styling: Tailwind CSS v4 + shadcn/ui (Radix primitives). cn() helper at apps/agentic-chat/src/lib/utils.ts.
• Design tokens: all token values live in apps/agentic-chat/src/styles.css inside the @theme inline { ... } block. Tailwind v4 idiom — tokens are CSS custom properties, not JS config. tailwind.config.ts stays minimal.
• Wallet: Dynamic Labs SDK (useDynamicContext, setShowAuthFlow). Surface: apps/agentic-chat/src/components/CustomConnectButton.tsx. (Migrated from Reown/AppKit per the Dec 11 2025 project update.)
• Mobile detection: useIsMobile hook at apps/agentic-chat/src/hooks/use-mobile.ts (768px breakpoint) — use this anywhere a glass treatment needs graceful degradation on mobile.

Design-system principles (apply to every sub-issue)

1. Token-first. Every radius/color/spacing value lives in @theme inline. No rgba(...) literals in components. No rounded-[Xpx] arbitrary values. No blur-[Xpx] arbitrary values. If a sub-issue needs a new token, extend the @theme inline block — don't inline it at the call site.
2. Reuse the whiteAlpha-* ramp. --color-whiteAlpha-50..900 is already declared and used throughout (Composer, DrawerListItem, ToolCard, TxStepCard, ReceiveUI). Use it for translucent surface backgrounds and for glass treatments (per [Spike] Liquid glass styling exploration #248). No parallel rgba(...) palette.
3. Mobile-conscious glass. Per [Spike] Liquid glass styling exploration #248 — backdrop-filter is expensive on low-end devices. Default pattern is backdrop-blur-none md:backdrop-blur-md (or similar). Always test on physical mobile.
4. Don't repeat work. Soften border radii across primary surfaces #242 owns the global radius bump — other sub-issues consume the new radii, they don't redefine them locally. Fix wallet nested-asset contrast #243 owns the nested-row contrast fix. [Spike] Liquid glass styling exploration #248 owns the glass utility application. If two sub-issues land in different order they should merge cleanly because each owns a distinct concern.

Surface map (single source of truth for file paths, confirmed against current main)

Surface	File
Prompt bar / composer	apps/agentic-chat/src/components/Composer.tsx
Connect Wallet button	apps/agentic-chat/src/components/CustomConnectButton.tsx
New Chat button	apps/agentic-chat/src/components/ConversationList.tsx:53-62
Hardcoded chat suggestions	apps/agentic-chat/src/components/Chat.tsx:14-18 (array), :118-134 (render)
Landing empty-state	apps/agentic-chat/src/components/Chat.tsx:91-144
Wallet drawer (shell)	apps/agentic-chat/src/components/Portfolio/PortfolioDrawer.tsx
Nested asset rows (the whiteAlpha-50 problem)	apps/agentic-chat/src/components/ui/DrawerListItem.tsx:18-22 (parent wrapper) + apps/agentic-chat/src/components/Portfolio/GroupedAssetRow.tsx (nested render via expandedChildren)
Tokens	apps/agentic-chat/src/styles.css (@theme inline { ... } block)
Button variants (CVA)	apps/agentic-chat/src/components/ui/Button.tsx

Verification (per repo CLAUDE.md)

bun run lint
bun run type-check
bun test

Visual verification (required per PR):

• Before/after screenshots of every changed surface in the PR description.
• Both mobile (<768px) and desktop screenshots.
• [Spike] Liquid glass styling exploration #248 specifically: physical mobile perf test, no frame drops, graceful degradation on low-end devices.

TODOs

• Visual references attached to this Linear issue
• Branching policy declared
• Stack context confirmed against current main (AI SDK, Dynamic, Tailwind v4 + shadcn)
• Surface map confirmed against current main
• Sub-issues split out: Soften border radii across primary surfaces #242, Fix wallet nested-asset contrast #243, Landing experience: ambient background + welcome treatment #244, Replace hardcoded suggestions with "popular actions" carousel #247, [Spike] Liquid glass styling exploration #248, Bring back asset icons in swaps and limits #249
• Decision on Landing experience: ambient background + welcome treatment #244's 3a / 3b paths (animated bubble field, shader background) — split into separate Linear issues if pursued