Skip to content

feat(dashboard): shadcn/ui redesign — landing page, dashboard spacing, chat components#339

Merged
duyet merged 3 commits into
mainfrom
redesign/shadcn-ui
Jul 16, 2026
Merged

feat(dashboard): shadcn/ui redesign — landing page, dashboard spacing, chat components#339
duyet merged 3 commits into
mainfrom
redesign/shadcn-ui

Conversation

@duyet

@duyet duyet commented Jul 16, 2026

Copy link
Copy Markdown
Owner

Summary

Full visual redesign moving the dashboard to a clean shadcn/ui design language and removing the Anthropic-brand experiment.

  • Design tokens: shadcn semantic aliases (bg-background, bg-card, bg-muted, text-muted-foreground, border-border, bg-primary, …) mapped onto the existing token system via @theme inline, so light/dark theming keeps working and registry components drop in cleanly.
  • Landing page: rebuilt with shadcn-style blocks (inspired by shadcnblocks landing-page11) — split hero + live code demo, numbered workflow (01/02/03), feature grid, CTA band, rich footer. One consistent max-w-6xl px-6 container; Anthropic brand CSS/fonts (Poppins/Lora) removed.
  • Conversation rendering: new Message/Bubble primitives following the shadcn June 2026 chat-components API; user messages as end-aligned bubbles, assistant as full-width markdown, system/tool as labeled markers.
  • Dashboard spacing: normalized page shells (px-6 py-6 gap-6), bg-card border-border rounded-xl cards, consistent page headers across all routes.

Verification

  • bunx astro check: 0 errors
  • Dashboard production build: 15 pages built ✓
  • Biome pre-commit hook: pass

Related

Filed 24 audit issues ([dashboard]/[sdk]/[docs] prefixes) as follow-up backlog; API audit issues to follow.

https://claude.ai/code/session_017PYqoyRqbiJDp6rbABqshW

duyet and others added 3 commits July 17, 2026 02:22
Co-Authored-By: Duyet Le <me@duyet.net>
Co-Authored-By: duyetbot <bot@duyet.net>
Split hero with code demo, numbered workflow, feature grid, CTA band,
rich footer. Consistent max-w-6xl px-6 container across sections.
Drops the Anthropic-brand experiment (Poppins/Lora, warm palette).

Co-Authored-By: Duyet Le <me@duyet.net>
Co-Authored-By: duyetbot <bot@duyet.net>
…ormalization

New Message/Bubble primitives (shadcn June 2026 chat component API),
conversation view rebuilt on them; dashboard pages normalized to
consistent px-6/gap-6 shells and bg-card/border-border surfaces.

Co-Authored-By: Duyet Le <me@duyet.net>
Co-Authored-By: duyetbot <bot@duyet.net>
@gemini-code-assist

Copy link
Copy Markdown

Warning

You have reached your daily quota limit. Please wait up to 24 hours and I will start processing your requests again!

@sourcery-ai sourcery-ai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry @duyet, you have reached your weekly rate limit of 500000 diff characters.

Please try again later or upgrade to continue using Sourcery

@coderabbitai

coderabbitai Bot commented Jul 16, 2026

Copy link
Copy Markdown

Warning

Review limit reached

@duyet, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 45 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 82e67a8e-385d-4173-a1f1-08e65aa49f8a

📥 Commits

Reviewing files that changed from the base of the PR and between 42b30dc and 0f04d8e.

📒 Files selected for processing (28)
  • packages/dashboard/src/components/analytics/area-chart.tsx
  • packages/dashboard/src/components/analytics/summary-cards.tsx
  • packages/dashboard/src/components/dashboard/analytics/_metric-card.tsx
  • packages/dashboard/src/components/dashboard/analytics/_top-conversations.tsx
  • packages/dashboard/src/components/dashboard/analytics/analytics-page-content.tsx
  • packages/dashboard/src/components/dashboard/conversations/conversations-page.tsx
  • packages/dashboard/src/components/dashboard/domains/domains-content.tsx
  • packages/dashboard/src/components/dashboard/integrate/integrate-content.tsx
  • packages/dashboard/src/components/dashboard/keys/keys-page.tsx
  • packages/dashboard/src/components/dashboard/organizations/create/_create-org-loading.tsx
  • packages/dashboard/src/components/dashboard/organizations/create/create-org-content.tsx
  • packages/dashboard/src/components/dashboard/organizations/list/organizations-list-content.tsx
  • packages/dashboard/src/components/dashboard/organizations/members/members-content.tsx
  • packages/dashboard/src/components/dashboard/page-header.tsx
  • packages/dashboard/src/components/dashboard/project/_api-keys-table.tsx
  • packages/dashboard/src/components/dashboard/project/_conversation-message.tsx
  • packages/dashboard/src/components/dashboard/project/_conversation-row.tsx
  • packages/dashboard/src/components/dashboard/project/_loading-state.tsx
  • packages/dashboard/src/components/dashboard/project/_page-header.tsx
  • packages/dashboard/src/components/dashboard/project/project-content.tsx
  • packages/dashboard/src/components/dashboard/projects/projects-page.tsx
  • packages/dashboard/src/components/dashboard/traces/traces-page.tsx
  • packages/dashboard/src/components/home/code-tabs.astro
  • packages/dashboard/src/components/ui/card.tsx
  • packages/dashboard/src/components/ui/message.tsx
  • packages/dashboard/src/layouts/MarketingLayout.astro
  • packages/dashboard/src/pages/index.astro
  • packages/dashboard/src/styles/tokens.css
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch redesign/shadcn-ui

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@duyet
duyet merged commit ce9a1fa into main Jul 16, 2026
6 checks passed
@duyet
duyet deleted the redesign/shadcn-ui branch July 16, 2026 19:27
duyet added a commit that referenced this pull request Jul 17, 2026
PR #339 (shadcn redesign) dropped three content blocks from the landing
page that existed nowhere else: the five-primitives grid, the
memory-vs-AgentState comparison table, and the API-surface endpoint
table. Recover and restyle them for the new shadcn token system instead
of letting them stay lost in history.

- Landing page: add a "Five primitives" section (state, lease, claim,
  token, conversation) restyled with bg-card/border-border/hover:bg-muted,
  since the current feature grid had silently stopped mentioning three
  of the five core primitives.
- New /compare page: houses the memory-vs-AgentState comparison table,
  linked from header nav, footer, and the new primitives section.
- docs.astro: add an "API surface" reference section reusing the
  existing endpoint-list pattern and methodColor() helper already in
  that file, matching its (pre-#339) token conventions.

Closes #354

Co-Authored-By: Duyet Le <me@duyet.net>
Co-Authored-By: duyetbot <bot@duyet.net>
duyet added a commit that referenced this pull request Jul 17, 2026
…ce (#356)

* feat(dashboard): restore primitives grid, comparison table, API surface

PR #339 (shadcn redesign) dropped three content blocks from the landing
page that existed nowhere else: the five-primitives grid, the
memory-vs-AgentState comparison table, and the API-surface endpoint
table. Recover and restyle them for the new shadcn token system instead
of letting them stay lost in history.

- Landing page: add a "Five primitives" section (state, lease, claim,
  token, conversation) restyled with bg-card/border-border/hover:bg-muted,
  since the current feature grid had silently stopped mentioning three
  of the five core primitives.
- New /compare page: houses the memory-vs-AgentState comparison table,
  linked from header nav, footer, and the new primitives section.
- docs.astro: add an "API surface" reference section reusing the
  existing endpoint-list pattern and methodColor() helper already in
  that file, matching its (pre-#339) token conventions.

Closes #354

Co-Authored-By: Duyet Le <me@duyet.net>
Co-Authored-By: duyetbot <bot@duyet.net>

* fix(dashboard): use API_BASE_URL for docs API-surface base URL

Rebase fixup after #355 landed src/lib/site.ts (single source of truth
for the site origin, replacing hardcoded https://agentstate.app).
The new "API surface" section added by this branch had one hardcoded
URL in its footer note; switch it to API_BASE_URL to match every other
occurrence in docs.astro.

Co-Authored-By: Duyet Le <me@duyet.net>
Co-Authored-By: duyetbot <bot@duyet.net>

---------

Co-authored-by: duyetbot <bot@duyet.net>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant