🎃 Add a shared EmptyState component and use it for the "No … yet" screens

Start with the reference empty state in packages/frontend/src/app/connectors/page.tsx:390-420, then read components/ui/stat-card.tsx for tone tokens and components/ui/button.tsx for CTA patterns. Build the shared component at components/ui/empty-state.tsx and convert the listed pages, preserving role and deployment branches. Run lint and the specified Playwright tests; done means all listed states use the component and the mobile test and CTA spec pass.

Part of the October Challenge #846.

Why

Each page writes its own empty state. The Connectors page has a well-designed one (icon, title, explanation, three actions), while most other pages show a single grey line such as "No custom roles yet." with no next step. A new user on a fresh instance hits most of these screens, so they are effectively onboarding. One shared EmptyState (icon + title + description + action) makes them consistent and gives every one of them a next step. Linear, Vercel and GitHub all use one pattern for this.

Self-hosted vs Cloud

• Self-hosted: frontend-only, same in Community and Business.
• Cloud (DEPLOYMENT_MODE=cloud): same. No data or API changes. Keep the Cloud/self-hosted branches that already exist (e.g. License page: "Start 7-Day Free Trial" on Cloud vs a key form on self-hosted).
• Who can use it: everyone. Keep the existing role checks on actions. If a page already shows an admin-only action (isAdmin in Skills and Knowledge graph), keep it admin-only, and show the "ask an admin" text to everyone else. Never show a CTA that leads to a 403.

What to build

1. Create packages/frontend/src/components/ui/empty-state.tsx:

   <EmptyState
     icon={<ServerIcon />}          // optional ReactNode; inline SVGs like the rest of the app
     tone="emerald"                  // optional, reuse the Tone tokens from ui/badge + stat-card.tsx
     title="No MCP servers yet"
     description="Group connectors into an endpoint your AI client can connect to."
     action={<Button onClick={…}>Create your first MCP server</Button>}   // optional, 0..n actions
     variant="card" | "dashed" | "inline"   // inline = compact, for use inside a card/table
   />
   

   It must work in light and dark themes (use the CSS variables only), be responsive, and use semantic markup (a heading + paragraph is enough).
2. Replace these inline empty states with it:
   • app/mcp-server/page.tsx:170-175: "No MCP servers configured yet." (already has icon + button: convert it).
   • app/mcp-server/page.tsx:176-178: "No MCP servers match your search." → add a "Clear search" action.
   • app/logs/page.tsx:290-313: the three states (end of log / filters / nothing yet). Link the "nothing yet" one to /mcp-server.
   • app/settings/roles/page.tsx:295-297: "No custom roles yet." → CTA opens the existing create form.
   • app/knowledge-graph/skills/page.tsx:235-250: "No skills yet" (keep the admin/non-admin text).
   • app/knowledge-graph/page.tsx:322-326: "No graph yet" (keep the admin/non-admin text).
   • app/settings/license/page.tsx:229-233: "No license registered yet." (keep the Cloud/self-hosted branch).
   • app/connectors/store/page.tsx:462-463: "No adapters available yet."
   • app/mcp-server/[id]/page.tsx:795-796: "No connectors available. Create a connector first." → link to /connectors/new.
   • app/analytics/page.tsx:226 and :281: "No data in range." (inline variant).
   • app/page.tsx:290: dashboard "No health data yet" (inline variant).
   • app/connectors/page.tsx:390-420: the existing rich one. Rebuild it with the component without changing how it looks.
3. Do not convert components/tool-editor/index.tsx:976 ("No parameters yet") or the emptyMessage strings passed to MultiSelect. Those are form hints, not page empty states.

Where to look

• packages/frontend/src/app/connectors/page.tsx:390-420: the reference design.
• packages/frontend/src/components/ui/stat-card.tsx:5-13: tone → color mapping to reuse.
• packages/frontend/src/components/ui/button.tsx: Button / buttonVariants for Link CTAs.
• packages/frontend/tests/e2e/mobile.spec.ts:295-299: asserts "No connectors yet" sits inside an ancestor with class border-dashed. Keep that class on the dashed variant, or update the test in the same PR.
• app/admin/roles/page.tsx:262-264 is a duplicate of the settings roles page with no nav link. Leave it alone.

Acceptance criteria

• EmptyState exists with icon, title, description, action, variant, and is used in all the places listed above.
• No CTA shown to a role that can't use it. Existing Cloud/self-hosted branches are preserved.
• Light/dark and phone width look right (attach before/after screenshots of 3+ pages).
• Playwright: mobile.spec.ts still passes. Add one spec that renders /mcp-server with a stubbed empty list (pattern: redesign.spec.ts) and clicks the CTA. Run with cd packages/frontend && npm run test:e2e. npm run lint is clean.
• No docs change needed. Add a short JSDoc on the component.

Out of scope

• Illustrations or new icon libraries (lucide-react is installed but unused; stay with inline SVGs for consistency).
• Rewriting copy beyond what the new layout needs.
• Loading skeletons and error states.

Size

M (1–2 days)

How to claim

Comment "I'd like to work on this" and we'll assign you. Rules in #846.