style(ui): modern empty states; on-template onboarding tile; app-first copy

Final sweep of the design pass:
- Tools page empty state: replace the 📦-emoji block with the app's empty
  pattern — dashed card, tinted Compass tile, explanatory copy, CTA into
  Discover with a Lucide arrow (was inline SVG).
- Apps onboarding card: gradient icon tile → flat primary tint (the
  template language is flat tints + accent strips, no gradients); copy
  modernized ("Connect your first AI app", "AI app" not "IDE/client").

Naming decision (kept, deliberately): the built-in server stays
"Tool Optimization" — benefit-led ("keeps the AI's toolset lean") beats the
mechanism-led "Self-management", which reads ambiguous and scarier to an
approval-conscious newcomer. "Self-management" remains the mechanism term
in developer docs only; the descriptor copy in builtin.rs already explains
the behavior and the approval model.

Verified: vitest 174 passed, tsc clean, eslint 0 errors.

Signed-off-by: Mohammod Al Amin Ashik <maa.ashik00@gmail.com>

Author: its-mash

apps/desktop/src/features/clients/ClientsPage.tsx

@@ -904,14 +904,14 @@ function EmptyStateOnboarding({ gatewayStatus }: { gatewayStatus: GatewayStatus
       <Card data-testid="clients-empty-onboarding">
         <CardContent className="p-8">
           <div className="mb-1 flex items-start gap-4">
-            <div className="from-primary-500 to-primary-600 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br text-white shadow-[0_6px_16px_-4px_rgb(99_102_241/0.45)]">
+            <div className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-xl bg-[rgb(var(--primary))]/10 text-[rgb(var(--primary))]">
               <PlugZap className="h-6 w-6" />
             </div>
             <div>
-              <h2 className="text-xl font-semibold">Let&apos;s hook up your first IDE</h2>
+              <h2 className="text-xl font-semibold">Connect your first AI app</h2>
               <p className="mt-1 text-sm text-[rgb(var(--muted))]">
-                mcpmux is one connection your AI client uses to reach every MCP server. Three steps
-                and you&apos;re done:
+                McpMux is one connection your AI app uses to reach every tool. Three steps and
+                you&apos;re done:
               </p>
             </div>
           </div>

apps/desktop/src/features/servers/ServersPage.tsx

@@ -19,6 +19,8 @@ import {
   Clock,
   FileJson,
   FolderOpen,
+  Compass,
+  ArrowRight,
 } from 'lucide-react';
 import { PageHeader } from '@mcpmux/ui';
 import { ServerActionMenu } from './ServerActionMenu';
@@ -956,28 +958,22 @@ export function ServersPage() {
 
       {/* Server List */}
       {installedServers.length === 0 ? (
-        <div className="py-12 text-center text-[rgb(var(--muted))]">
-          <div className="mb-4 text-5xl">📦</div>
-          <p className="mb-2 text-lg">No servers installed</p>
+        <div className="flex flex-col items-center rounded-xl border border-dashed border-[rgb(var(--border))] bg-[rgb(var(--surface))] px-6 py-12 text-center">
+          <span className="flex h-12 w-12 items-center justify-center rounded-xl bg-[rgb(var(--primary))]/10 text-[rgb(var(--primary))]">
+            <Compass className="h-6 w-6" />
+          </span>
+          <p className="mt-4 text-base font-semibold">No tools in this Space yet</p>
+          <p className="mt-1 max-w-sm text-sm text-[rgb(var(--muted))]">
+            Install an MCP server from the registry and its tools become available to every
+            connected AI app.
+          </p>
           <button
             onClick={() => navigateTo('registry')}
-            className="mt-3 inline-flex items-center gap-2 rounded-lg bg-[rgb(var(--primary))] px-5 py-2.5 text-sm font-medium text-[rgb(var(--primary-foreground))] shadow-sm transition-all hover:bg-[rgb(var(--primary-hover))] hover:shadow"
+            className="mt-5 inline-flex items-center gap-2 rounded-lg bg-[rgb(var(--primary))] px-5 py-2.5 text-sm font-medium text-[rgb(var(--primary-foreground))] shadow-sm transition-all hover:bg-[rgb(var(--primary-hover))] hover:shadow"
             data-testid="discover-servers-btn"
           >
-            Discover MCP Servers
-            <svg
-              width="16"
-              height="16"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            >
-              <path d="M5 12h14" />
-              <path d="m12 5 7 7-7 7" />
-            </svg>
+            Browse Discover
+            <ArrowRight className="h-4 w-4" />
           </button>
         </div>
       ) : (