move to design system components, fix user verifier and auth flows#6
Merged
teallarson merged 13 commits intomainfrom Mar 3, 2026
Merged
move to design system components, fix user verifier and auth flows#6teallarson merged 13 commits intomainfrom
teallarson merged 13 commits intomainfrom
Conversation
- Add @arcadeai/design-system ^3.30.0 to ai-sdk and mastra package.json - Remove shadcn devDependency (no longer needed) - Swap @import "shadcn/tailwind.css" → @import "@arcadeai/design-system/index.css" in globals.css - Update all component imports from @/components/ui/<name> to @arcadeai/design-system - Delete 9 local shadcn component copies (accordion, badge, button, card, input, label, separator, sheet, skeleton) - Remove components.json (shadcn CLI config, no longer needed) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
teallarson
force-pushed
the
teallarson/ui-polish-brand-assets
branch
from
f710460 to
e2ad664
Compare
Replace generic Lucide icons (MessageSquare, Calendar, etc.) with real brand icons from @arcadeai/design-system/components/ui/atoms/icons: Slack, GoogleCalendar, Linear, Github, Gmail. Removed text-color overrides from source badges since brand icons render their own brand colors rather than inheriting currentColor. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- New GET /api/health route checks for ANTHROPIC_API_KEY/OPENAI_API_KEY and ARCADE_GATEWAY_URL, returning actionable warnings if missing - ConfigWarningBanner component renders amber banner below the header in both the connection gate and connected dashboard states - Fix: add font-sans to globals.css @layer base body rule and layout.tsx body className to override the GT Sectra serif font embedded in @arcadeai/design-system/index.css Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- README: add bun prerequisite, fix npm→bun for generated project commands, update generated project structure tree (dashboard, health, sources routes) - ai-sdk + mastra README.md.hbs: replace chat page with dashboard page, update project structure tree and How It Works section, fix localhost port - ai-sdk + mastra CLAUDE.md: fix app/chat/page.tsx → app/dashboard/page.tsx, update frontend tech stack to mention @arcadeai/design-system, add "Claude Code Notes" section with safe/caution edit guidance - agent-playbook.md.hbs: fix npm→bun in verification commands - Root CLAUDE.md: add "Notes for agents" section covering package manager split, template system overview, UI component library, and e2e testing - Prettier: reformat langchain HTML/JS templates and shared nextjs-ui files Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
tool-status.tsx was still using generic Lucide icons (MessageSquare, GitPullRequest, Mail, etc.) for the source status pills. Switch to the same brand icons from @arcadeai/design-system/components/ui/atoms/icons already used in task-card.tsx and stats-bar.tsx. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- stats-bar: replace CardHeader+CardAction grid with explicit flexbox so icon and label sit side-by-side; add activeSource/onSourceClick props; clicking a source card filters the task list, clicking it again (or Total) clears the filter - header: remove onChatToggle/chatOpen props and MessageSquare button (chat UI was removed; icon was a leftover) - dashboard: wire activeSource state to StatsBar + filteredItems; remove ChatPanel import and render; simplify Header call sites Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Tailwind v4 doesn't scan node_modules by default, so compound/arbitrary classes used only by @arcadeai/design-system components (e.g. @container/card-header, grid-rows-[auto_auto], auto-rows-min, has-data-[slot=card-action]:grid-cols-[1fr_auto]) were never generated. Adding @source tells Tailwind to scan the package and emit those classes. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Replace the hardcoded "Other" / Globe fallback with a dynamic label derived from the source key (underscores → spaces, title-cased), so unknown sources like "my_tool" show as "My Tool" rather than "Other". Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
muted-foreground (~#9a9a9a) on muted background (~#363636 dark / #f5f5f5 light) is ~4.2:1 and ~4.4:1 respectively — both under the 4.5:1 AA threshold for 12px text. Adding text-foreground to each pill overrides the inherited muted-foreground, giving white-on-dark (~14:1) and near-black-on-light (~13:1) in all states. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Source badges used light-only tints (bg-red-100, bg-blue-100, etc.) — white text from the outline Badge variant on those light backgrounds is ~1.5:1. Added explicit dark: variants (950 bg, 900 border, 200 text) for each source so both modes get readable colored-badge text (~7:1+). Also fixed P1 badge (hardcoded text-amber-800 with no dark variant) and scheduled-time text (text-blue-600 → dark:text-blue-400 for ~3:1 → ~5:1 on dark card backgrounds). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
The regex ^(google|calendar)[._] failed to match Arcade's actual tool naming convention: GoogleCalendar.WhoAmI has no separator between the words, so the regex saw 'google' followed by 'C' (not [._]) and fell through to "other". New approach: split on '.' to extract the service prefix, then match exact service names including "googlecalendar". Also replace the "other" fallback with the actual lowercase service prefix so unrecognized tools (e.g. Notion.WhoAmI → "notion") show their real name in the UI instead of the unhelpful generic label. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Add SourceAuthGate component: blocks dashboard on first load until all tools are either authorized or skipped; shows per-source Authorize/Skip buttons with a Continue button enabled only when no tools are pending - Add "skipped" status to SourceStatus type and tool-status components - Fix verify route: redirect to /dashboard?error=verify_session_required (instead of silent redirect to /) with detailed console logging - Strip debug console.log added during verifier testing - Document cookie domain mismatch gotcha (must access app via ngrok URL, not localhost, when using ARCADE_CUSTOM_VERIFIER) - Document stale flow_id fix (delete .arcade-auth/, restart, re-auth) in coat-security partial, env-vars-table, CLAUDE.md, and README Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
teallarson
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
@arcadeai/design-system@^3.30.0as a dependency in bothai-sdkandmastraNext.js templatesshadcndevDependency (no longer needed as a CLI tool)@import "shadcn/tailwind.css"→@import "@arcadeai/design-system/index.css"inglobals.css@arcadeai/design-systeminstead of local@/components/ui/<name>pathscomponents.json(shadcn CLI config, no longer needed)Test plan
ai-sdktemplate and verifynpm installresolves@arcadeai/design-systemnext buildon scaffolded ai-sdk project — should compile without TypeScript errorsmastratemplate and repeat build check🤖 Generated with Claude Code