apteva 0.4.44 → 0.4.51

package/src/web/components/common/Modal.tsx

@@ -8,7 +8,7 @@ interface ModalProps {
 export function Modal({ children, onClose }: ModalProps) {
   return (
     <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 p-4">
-      <div className="bg-[var(--color-surface)] rounded p-6 w-full max-w-xl lg:max-w-2xl border border-[var(--color-border)] max-h-[90vh] overflow-y-auto">
+      <div className="bg-[var(--color-surface)] card p-6 w-full max-w-xl lg:max-w-2xl max-h-[90vh] overflow-y-auto">
         {children}
       </div>
     </div>
@@ -37,19 +37,19 @@ export function ConfirmModal({
 }: ConfirmModalProps) {
   return (
     <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
-      <div className="bg-[var(--color-surface)] border border-[var(--color-border-light)] rounded-lg p-6 w-full max-w-sm">
+      <div className="bg-[var(--color-surface)] card p-6 w-full max-w-sm">
         {title && <h3 className="font-medium mb-2">{title}</h3>}
         <p className="text-sm text-[var(--color-text)] mb-4">{message}</p>
         <div className="flex gap-2">
           <button
             onClick={onCancel}
-            className="flex-1 text-sm bg-[var(--color-surface-raised)] hover:bg-[var(--color-surface-raised)] border border-[var(--color-border-light)] px-4 py-2 rounded transition"
+            className="flex-1 text-sm bg-[var(--color-surface-raised)] hover:bg-[var(--color-surface-raised)] border border-[var(--color-border-light)] btn px-4 py-2 transition"
           >
             {cancelText}
           </button>
           <button
             onClick={onConfirm}
-            className={`flex-1 text-sm text-white px-4 py-2 rounded transition ${
+            className={`flex-1 text-sm text-white px-4 py-2 btn transition ${
               confirmVariant === "danger"
                 ? "bg-red-500 hover:bg-red-600"
                 : "bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)]"
@@ -93,7 +93,7 @@ export function AlertModal({
 
   return (
     <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
-      <div className="bg-[var(--color-surface)] border border-[var(--color-border-light)] rounded-lg p-6 w-full max-w-sm text-center">
+      <div className="bg-[var(--color-surface)] card p-6 w-full max-w-sm text-center">
         <div
           className={`w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3 ${iconColors[variant]}`}
         >
@@ -103,7 +103,7 @@ export function AlertModal({
         <p className="text-sm text-[var(--color-text)] mb-4">{message}</p>
         <button
           onClick={onClose}
-          className="w-full text-sm bg-[var(--color-surface-raised)] hover:bg-[var(--color-surface-raised)] border border-[var(--color-border-light)] px-4 py-2 rounded transition"
+          className="w-full text-sm bg-[var(--color-surface-raised)] hover:bg-[var(--color-surface-raised)] border border-[var(--color-border-light)] px-4 py-2 btn transition"
         >
           {buttonText}
         </button>

package/src/web/components/common/Select.tsx

@@ -35,7 +35,7 @@ export function Select({ value, options, onChange, placeholder = "Select...", co
       <button
         type="button"
         onClick={() => setIsOpen(!isOpen)}
-        className={`w-full bg-[var(--color-bg)] border border-[var(--color-border-light)] rounded ${compact ? "px-2.5 py-1.5 text-sm" : "px-3 py-2"} text-left flex items-center justify-between focus:outline-none focus:border-[var(--color-accent)] text-[var(--color-text)] hover:border-[var(--color-border-light)] transition`}
+        className={`w-full bg-[var(--color-bg)] border border-[var(--color-border-light)] btn ${compact ? "px-2.5 py-1.5 text-sm" : "px-3 py-2"} text-left flex items-center justify-between focus:outline-none focus:border-[var(--color-accent)] text-[var(--color-text)] hover:border-[var(--color-border-light)] transition`}
       >
         <span className={selectedOption ? "text-[var(--color-text)]" : "text-[var(--color-text-muted)]"}>
           {selectedOption ? (
@@ -51,7 +51,7 @@ export function Select({ value, options, onChange, placeholder = "Select...", co
       </button>
 
       {isOpen && (
-        <div className="absolute z-50 w-full min-w-max mt-1 bg-[var(--color-surface)] border border-[var(--color-border-light)] rounded shadow-lg max-h-60 overflow-y-auto scrollbar-hide">
+        <div className="absolute z-50 w-full min-w-max mt-1 bg-[var(--color-surface)] border border-[var(--color-border-light)] shadow-lg max-h-60 overflow-y-auto scrollbar-hide" style={{ borderRadius: "var(--radius-button)" }}>
           {options.map((option) => (
             <button
               key={option.value}

package/src/web/components/connections/ConnectionsPage.tsx

@@ -28,7 +28,7 @@ export function ConnectionsPage() {
         </div>
 
         {/* Tabs */}
-        <div className="flex gap-1 mb-6 bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-1 w-fit">
+        <div className="flex gap-1 mb-6 bg-[var(--color-surface)] card p-1 w-fit">
           {tabs.map(tab => (
             <button
               key={tab.id}

package/src/web/components/connections/IntegrationsTab.tsx

@@ -74,7 +74,7 @@ export function IntegrationsTab() {
       {providers.length > 1 && (
         <div className="flex items-center gap-2 mb-4">
           <span className="text-xs text-[var(--color-text-muted)]">Provider:</span>
-          <div className="flex gap-1 bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-0.5">
+          <div className="flex gap-1 bg-[var(--color-surface)] card p-0.5">
             {providers.map(p => (
               <button
                 key={p.id}
@@ -93,7 +93,7 @@ export function IntegrationsTab() {
       )}
 
       {providers.length === 0 ? (
-        <div className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-8 text-center">
+        <div className="bg-[var(--color-surface)] card p-8 text-center">
           <p className="text-[var(--color-text-muted)]">No integration providers configured.</p>
           <p className="text-sm text-[var(--color-text-faint)] mt-1">Add API keys for Composio or AgentDojo in Settings.</p>
         </div>
@@ -133,7 +133,7 @@ export function IntegrationsTab() {
               ) : (
                 <div className="space-y-2">
                   {triggerTypes.map(tt => (
-                    <div key={tt.slug} className="bg-[var(--color-bg)] border border-[var(--color-border)] rounded-lg p-3">
+                    <div key={tt.slug} className="bg-[var(--color-bg)] card p-3">
                       <div className="flex items-start gap-3">
                         {tt.logo ? (
                           <img src={tt.logo} alt={tt.toolkit_name} className="w-6 h-6 rounded object-contain flex-shrink-0 mt-0.5" />

package/src/web/components/connections/OverviewTab.tsx

@@ -75,7 +75,7 @@ export function OverviewTab() {
       <section>
         <h3 className="text-sm font-medium text-[var(--color-text-secondary)] mb-3">Subscriptions ({subscriptions.length})</h3>
         {subscriptions.length === 0 ? (
-          <div className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-6 text-center text-[var(--color-text-muted)] text-sm">
+          <div className="bg-[var(--color-surface)] card p-6 text-center text-[var(--color-text-muted)] text-sm">
             No subscriptions yet. Go to the Triggers tab to create one.
           </div>
         ) : (
@@ -83,7 +83,7 @@ export function OverviewTab() {
             {subscriptions.map(sub => {
               const agent = agentMap.get(sub.agent_id);
               return (
-                <div key={sub.id} className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-3 flex items-center gap-3">
+                <div key={sub.id} className="bg-[var(--color-surface)] card p-3 flex items-center gap-3">
                   <div className={`w-2 h-2 rounded-full flex-shrink-0 ${sub.enabled ? "bg-green-400" : "bg-[var(--color-text-faint)]"}`} />
                   <div className="flex-1 min-w-0">
                     <div className="text-sm font-medium truncate">
@@ -127,7 +127,7 @@ function StatCard({
   valueColor?: string;
 }) {
   return (
-    <div className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-4">
+    <div className="bg-[var(--color-surface)] card p-4">
       <div className="text-xs text-[var(--color-text-muted)] mb-1">{label}</div>
       <div className={`text-2xl font-bold ${valueColor || "text-[var(--color-text)]"}`}>
         {value}

package/src/web/components/connections/TriggersTab.tsx

@@ -594,7 +594,7 @@ export function TriggersTab() {
 
   if (providers.length === 0 && !triggersLoading) {
     return (
-      <div className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-8 text-center">
+      <div className="bg-[var(--color-surface)] card p-8 text-center">
         <p className="text-[var(--color-text-muted)]">No trigger providers configured.</p>
         <p className="text-sm text-[var(--color-text-faint)] mt-1">Add API keys for Composio or AgentDojo in Settings to enable triggers.</p>
       </div>
@@ -615,7 +615,7 @@ export function TriggersTab() {
       {providers.length > 1 && (
         <div className="flex items-center gap-2">
           <span className="text-xs text-[var(--color-text-muted)]">Provider:</span>
-          <div className="flex gap-1 bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-0.5">
+          <div className="flex gap-1 bg-[var(--color-surface)] card p-0.5">
             {providers.map(p => (
               <button
                 key={p.id}
@@ -654,7 +654,7 @@ export function TriggersTab() {
         </div>
 
         {subscriptions.length === 0 ? (
-          <div className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-6 text-center text-[var(--color-text-muted)] text-sm">
+          <div className="bg-[var(--color-surface)] card p-6 text-center text-[var(--color-text-muted)] text-sm">
             No subscriptions yet. Add one to route trigger events to an agent.
           </div>
         ) : (
@@ -662,7 +662,7 @@ export function TriggersTab() {
             {subscriptions.map(sub => {
               const agent = agentMap.get(sub.agent_id);
               return (
-                <div key={sub.id} className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-3 flex items-center gap-3">
+                <div key={sub.id} className="bg-[var(--color-surface)] card p-3 flex items-center gap-3">
                   <div className={`w-2 h-2 rounded-full flex-shrink-0 ${sub.enabled ? "bg-green-400" : "bg-[var(--color-text-muted)]"}`} />
                   <div className="flex-1 min-w-0">
                     <div className="text-sm font-medium truncate">
@@ -712,13 +712,13 @@ export function TriggersTab() {
           {triggersLoading ? (
             <div className="text-center py-6 text-[var(--color-text-muted)] text-sm">Loading triggers...</div>
           ) : triggers.length === 0 ? (
-            <div className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-6 text-center text-[var(--color-text-muted)] text-sm">
+            <div className="bg-[var(--color-surface)] card p-6 text-center text-[var(--color-text-muted)] text-sm">
               No trigger instances. Browse trigger types below to create one.
             </div>
           ) : (
             <div className="space-y-2">
               {triggers.map(trigger => (
-                <div key={trigger.id} className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-3 flex items-center gap-3">
+                <div key={trigger.id} className="bg-[var(--color-surface)] card p-3 flex items-center gap-3">
                   <div className={`w-2 h-2 rounded-full flex-shrink-0 ${trigger.status === "active" ? "bg-green-400" : "bg-[var(--color-text-muted)]"}`} />
                   <div className="flex-1 min-w-0">
                     <div className="text-sm font-medium truncate">
@@ -770,7 +770,7 @@ export function TriggersTab() {
           {triggersLoading ? (
             <div className="text-center py-6 text-[var(--color-text-muted)] text-sm">Loading subscriptions...</div>
           ) : triggers.length === 0 ? (
-            <div className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-6 text-center text-[var(--color-text-muted)] text-sm">
+            <div className="bg-[var(--color-surface)] card p-6 text-center text-[var(--color-text-muted)] text-sm">
               No active subscriptions. Browse trigger types below to create one.
             </div>
           ) : (
@@ -779,7 +779,7 @@ export function TriggersTab() {
                 const localSub = subscriptions.find(s => s.trigger_instance_id === trigger.id);
                 const agent = localSub ? agentMap.get(localSub.agent_id) : null;
                 return (
-                  <div key={trigger.id} className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-3 flex items-center gap-3">
+                  <div key={trigger.id} className="bg-[var(--color-surface)] card p-3 flex items-center gap-3">
                     <div className={`w-2 h-2 rounded-full flex-shrink-0 ${trigger.status === "active" ? "bg-green-400" : "bg-[var(--color-text-muted)]"}`} />
                     <div className="flex-1 min-w-0">
                       <div className="text-sm font-medium truncate">

package/src/web/components/dashboard/Dashboard.tsx

@@ -181,8 +181,8 @@ export function Dashboard({
         {/* Activity Feed */}
         <DashboardCard
           title="Activity"
-          actionLabel="Telemetry"
-          onAction={() => onNavigate("telemetry")}
+          actionLabel="Analytics"
+          onAction={() => onNavigate("analytics")}
         >
           {activities.length === 0 ? (
             <div className="p-4 text-center text-[var(--color-text-muted)]">
@@ -454,12 +454,12 @@ function QuickMessageModal({ agent, onClose }: { agent: Agent; onClose: () => vo
               onKeyDown={e => e.key === "Enter" && handleSend()}
               placeholder={`Message ${agent.name}...`}
               disabled={sending}
-              className="flex-1 bg-[var(--color-bg)] border border-[var(--color-border-light)] rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-[var(--color-accent)] placeholder-[#444] disabled:opacity-50"
+              className="flex-1 bg-[var(--color-bg)] border border-[var(--color-border-light)] btn px-3 py-2.5 text-sm focus:outline-none focus:border-[var(--color-accent)] placeholder-[#444] disabled:opacity-50"
             />
             <button
               onClick={handleSend}
               disabled={sending || !message.trim()}
-              className="px-4 py-2.5 bg-[var(--color-accent)] text-black rounded-lg text-sm font-medium hover:bg-[var(--color-accent-hover)] transition disabled:opacity-30"
+              className="px-4 py-2.5 bg-[var(--color-accent)] text-black btn text-sm font-medium hover:bg-[var(--color-accent-hover)] transition disabled:opacity-30"
             >
               {sending ? "..." : "Send"}
             </button>

package/src/web/components/layout/Header.tsx

@@ -161,7 +161,7 @@ export function Header({ onMenuClick, agents = [] }: HeaderProps) {
             <div className="relative ml-2 md:ml-4">
               <button
                 onClick={() => setShowProjectMenu(!showProjectMenu)}
-                className="flex items-center gap-2 px-3 py-1.5 rounded transition text-sm"
+                className="flex items-center gap-2 px-3 py-1.5 btn transition text-sm"
                 style={{ border: "1px solid var(--color-border-light)", backgroundColor: "var(--color-surface)" }}
               >
                 <span
@@ -174,7 +174,7 @@ export function Header({ onMenuClick, agents = [] }: HeaderProps) {
                 <ChevronDownIcon />
               </button>
               {showProjectMenu && (
-                <div className="absolute left-0 top-full mt-1 w-56 rounded-lg shadow-xl z-50" style={{ backgroundColor: "var(--color-surface)", border: "1px solid var(--color-border-light)" }}>
+                <div className="absolute left-0 top-full mt-1 w-56 card shadow-xl z-50" style={{ backgroundColor: "var(--color-surface)" }}>
                   <div className="py-1 max-h-64 overflow-y-auto">
                     <button
                       onClick={() => handleProjectSelect(null)}
@@ -262,7 +262,7 @@ export function Header({ onMenuClick, agents = [] }: HeaderProps) {
             {showNotifications && (
               <>
                 <div className="fixed inset-0 z-40" onClick={() => setShowNotifications(false)} />
-                <div className="absolute right-0 top-full mt-1 w-80 rounded-lg shadow-xl z-50 max-h-96 overflow-y-auto" style={{ backgroundColor: "var(--color-surface)", border: "1px solid var(--color-border-light)" }}>
+                <div className="absolute right-0 top-full mt-1 w-80 card shadow-xl z-50 max-h-96 overflow-y-auto" style={{ backgroundColor: "var(--color-surface)" }}>
                   <div className="px-4 py-3 flex items-center justify-between" style={{ borderBottom: "1px solid var(--color-border-light)" }}>
                     <span className="text-sm font-medium">Notifications</span>
                     {notifications.length > 0 && (

package/src/web/components/layout/Sidebar.tsx

@@ -119,9 +119,9 @@ export function Sidebar({ route, agentCount, taskCount, onNavigate, isOpen, onCl
           />
           <NavButton
             icon={<TelemetryIcon />}
-            label="Telemetry"
-            active={route === "telemetry"}
-            onClick={() => handleNavigate("telemetry")}
+            label="Analytics"
+            active={route === "analytics"}
+            onClick={() => handleNavigate("analytics")}
           />
           <NavButton
             icon={<ApiIcon />}
@@ -158,7 +158,7 @@ export function Sidebar({ route, agentCount, taskCount, onNavigate, isOpen, onCl
             {showUserMenu && (
               <>
                 <div className="fixed inset-0 z-40" onClick={() => setShowUserMenu(false)} />
-                <div className="absolute left-3 bottom-full mb-1 w-48 rounded-lg shadow-xl z-50" style={{ backgroundColor: "var(--color-surface)", border: "1px solid var(--color-border-light)" }}>
+                <div className="absolute left-3 bottom-full mb-1 w-48 card shadow-xl z-50" style={{ backgroundColor: "var(--color-surface)" }}>
                   <button
                     onClick={handleLogout}
                     className="w-full px-4 py-2.5 text-left text-sm text-red-400 transition rounded-lg"
@@ -189,8 +189,9 @@ function NavButton({ icon, label, active, onClick, badge }: NavButtonProps) {
   return (
     <button
       onClick={onClick}
-      className="w-full flex items-center gap-3 px-3 py-2 rounded font-medium transition"
+      className="w-full flex items-center gap-3 px-3 py-2 font-medium transition"
       style={{
+        borderRadius: "var(--radius-button)",
         backgroundColor: active ? "var(--color-surface)" : "transparent",
         color: active ? "var(--color-text)" : "var(--color-text-muted)",
       }}

package/src/web/components/mcp/McpPage.tsx

@@ -156,7 +156,7 @@ export function McpPage() {
         </div>
 
         {/* Tabs */}
-        <div className="flex gap-1 mb-6 bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-1 w-fit">
+        <div className="flex gap-1 mb-6 bg-[var(--color-surface)] card p-1 w-fit">
           <button
             onClick={() => setActiveTab("servers")}
             className={`px-4 py-2 rounded text-sm font-medium transition ${
@@ -199,7 +199,7 @@ export function McpPage() {
 
             {/* Empty State */}
             {!loading && filteredServers.length === 0 && servers.length === 0 && (
-              <div className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-8 text-center">
+              <div className="bg-[var(--color-surface)] card p-8 text-center">
                 <McpIcon className="w-12 h-12 text-[var(--color-border-light)] mx-auto mb-4" />
                 <h3 className="text-lg font-medium mb-2">No MCP servers configured</h3>
                 <p className="text-[var(--color-text-muted)] mb-6 max-w-md mx-auto">
@@ -225,7 +225,7 @@ export function McpPage() {
 
             {/* Empty filter state */}
             {!loading && filteredServers.length === 0 && servers.length > 0 && (
-              <div className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-6 text-center">
+              <div className="bg-[var(--color-surface)] card p-6 text-center">
                 <p className="text-[var(--color-text-muted)]">No servers match this filter.</p>
               </div>
             )}
@@ -298,7 +298,7 @@ export function McpPage() {
 
         {/* Info - only show on servers tab */}
         {activeTab === "servers" && (
-          <div className="mt-8 p-4 bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg">
+          <div className="mt-8 p-4 bg-[var(--color-surface)] card">
             <h3 className="font-medium mb-2">Quick Start</h3>
             <p className="text-sm text-[var(--color-text-muted)] mb-3">
               Add an MCP server by providing its npm package name. For example:
@@ -523,7 +523,7 @@ function ToolsPanel({
   }, [server.id, authFetch]);
 
   return (
-    <div className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg overflow-hidden">
+    <div className="bg-[var(--color-surface)] card overflow-hidden">
       {/* Header */}
       <div className="p-4 border-b border-[var(--color-border)] flex items-center justify-between">
         <div>
@@ -859,7 +859,7 @@ function RegistryBrowser({
           {servers.map((server) => (
             <div
               key={server.id}
-              className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-4 hover:border-[var(--color-border-light)] transition"
+              className="bg-[var(--color-surface)] card p-4 hover:border-[var(--color-border-light)] transition"
             >
               <div className="flex items-start justify-between gap-3">
                 <div className="flex-1 min-w-0">
@@ -913,7 +913,7 @@ function RegistryBrowser({
       )}
 
       {/* Registry info */}
-      <div className="p-4 bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg text-sm text-[var(--color-text-muted)]">
+      <div className="p-4 bg-[var(--color-surface)] card text-sm text-[var(--color-text-muted)]">
         <p>
           Servers are sourced from the{" "}
           <a
@@ -1060,7 +1060,7 @@ function HostedServices({ onServerAdded, projectId }: { onServerAdded?: () => vo
 
   if (!hasAnyConnection) {
     return (
-      <div className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-8 text-center">
+      <div className="bg-[var(--color-surface)] card p-8 text-center">
         <p className="text-[var(--color-text-secondary)] mb-2">No hosted MCP services connected</p>
         <p className="text-sm text-[var(--color-text-muted)] mb-4">
           Connect Composio, Smithery, or AgentDojo in Settings to access cloud-based MCP servers.
@@ -1206,7 +1206,7 @@ function HostedServices({ onServerAdded, projectId }: { onServerAdded?: () => vo
               {loadingConfigs ? (
                 <div className="text-center py-6 text-[var(--color-text-muted)]">Loading configs...</div>
               ) : composioConfigs.length === 0 ? (
-                <div className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-4 text-center">
+                <div className="bg-[var(--color-surface)] card p-4 text-center">
                   <p className="text-sm text-[var(--color-text-muted)]">No MCP configs found</p>
                   <p className="text-xs text-[var(--color-text-faint)] mt-2">
                     First <button onClick={() => setSubTab("connect")} className="text-[var(--color-accent)] hover:text-[var(--color-accent-hover)]">connect some apps</button>, then create a config.
@@ -1310,7 +1310,7 @@ function HostedServices({ onServerAdded, projectId }: { onServerAdded?: () => vo
               Browse Smithery →
             </a>
           </div>
-          <div className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-4 text-center">
+          <div className="bg-[var(--color-surface)] card p-4 text-center">
             <p className="text-sm text-[var(--color-text-muted)]">
               Smithery servers can be added from the <strong>Browse Registry</strong> tab.
             </p>
@@ -1498,7 +1498,7 @@ function AgentDojoContent({
             {loadingConfigs ? (
               <div className="text-center py-6 text-[var(--color-text-muted)]">Loading servers...</div>
             ) : configs.length === 0 ? (
-              <div className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-4 text-center">
+              <div className="bg-[var(--color-surface)] card p-4 text-center">
                 <p className="text-sm text-[var(--color-text-muted)]">No MCP servers found</p>
                 <p className="text-xs text-[var(--color-text-faint)] mt-2">
                   <button onClick={() => setSubTab("toolkits")} className="text-[var(--color-accent)] hover:text-[var(--color-accent-hover)]">
@@ -1845,7 +1845,7 @@ function AddServerModal({
 
   return (
     <div className="fixed inset-0 bg-black/50 backdrop-blur-[2px] z-50 flex items-center justify-center p-4">
-      <div className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg w-full max-w-lg max-h-[90vh] overflow-y-auto">
+      <div className="bg-[var(--color-surface)] card w-full max-w-lg max-h-[90vh] overflow-y-auto">
         <div className="p-4 border-b border-[var(--color-border)] flex items-center justify-between sticky top-0 bg-[var(--color-surface)]">
           <h2 className="text-lg font-semibold">Add MCP Server</h2>
           <button onClick={onClose} className="text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]">
@@ -2303,7 +2303,7 @@ function EditServerModal({
 
   return (
     <div className="fixed inset-0 bg-black/50 backdrop-blur-[2px] z-50 flex items-center justify-center p-4">
-      <div className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg w-full max-w-lg max-h-[90vh] overflow-y-auto">
+      <div className="bg-[var(--color-surface)] card w-full max-w-lg max-h-[90vh] overflow-y-auto">
         <div className="p-4 border-b border-[var(--color-border)] flex items-center justify-between sticky top-0 bg-[var(--color-surface)]">
           <h2 className="text-lg font-semibold">Edit MCP Server</h2>
           <button onClick={onClose} className="text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]">

package/src/web/components/onboarding/OnboardingWizard.tsx

@@ -125,7 +125,7 @@ export function OnboardingWizard({ onComplete, needsAccount = false }: Onboardin
   const currentStep = needsAccount ? step : step - 1;
 
   return (
-    <div className="min-h-screen bg-[var(--color-bg)] text-[var(--color-text)] font-mono flex items-center justify-center p-8">
+    <div className="min-h-screen bg-[var(--color-bg)] text-[var(--color-text)] flex items-center justify-center p-8">
       <div className="w-full max-w-2xl">
         {/* Logo */}
         <div className="text-center mb-8">
@@ -149,7 +149,7 @@ export function OnboardingWizard({ onComplete, needsAccount = false }: Onboardin
           <div className={`w-3 h-3 rounded-full ${step >= 2 ? 'bg-[var(--color-accent)]' : 'bg-[var(--color-surface-raised)]'}`} />
         </div>
 
-        <div className="bg-[var(--color-surface)] rounded-lg border border-[var(--color-border)] p-8">
+        <div className="bg-[var(--color-surface)] card p-8">
           {step === 0 && needsAccount && (
             <CreateAccountStep onComplete={handleAccountCreated} />
           )}