apteva 0.4.44 → 0.4.48

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

@@ -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

@@ -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} />
           )}

package/src/web/components/settings/SettingsPage.tsx

@@ -3,7 +3,7 @@ import { CheckIcon, CloseIcon, PlusIcon } from "../common/Icons";
 import { Modal, useConfirm } from "../common/Modal";
 import { Select } from "../common/Select";
 import { useProjects, useAuth, useTheme, type Project } from "../../context";
-import type { ThemeMode } from "../../themes";
+import type { ThemeMode, ThemeStyle } from "../../themes";
 import type { Provider } from "../../types";
 
 type SettingsTab = "general" | "providers" | "projects" | "channels" | "api-keys" | "account" | "updates" | "data" | "assistant";
@@ -101,7 +101,7 @@ function SettingsNavItem({
 
 function GeneralSettings() {
   const { authFetch } = useAuth();
-  const { mode, setMode } = useTheme();
+  const { mode, style, setMode, setStyle } = useTheme();
   const [instanceUrl, setInstanceUrl] = useState("");
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
@@ -149,6 +149,11 @@ function GeneralSettings() {
     { value: "light", label: "Light", description: "Light background" },
   ];
 
+  const styleOptions: { value: ThemeStyle; label: string; description: string }[] = [
+    { value: "classic", label: "Classic", description: "Terminal-inspired, sharp" },
+    { value: "professional", label: "Professional", description: "Polished, enterprise" },
+  ];
+
   return (
     <div className="max-w-4xl w-full">
       <div className="mb-6">
@@ -156,22 +161,23 @@ function GeneralSettings() {
         <p className="text-[var(--color-text-muted)]">Instance configuration and appearance.</p>
       </div>
 
-      {/* Theme */}
-      <div className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-4 mb-4">
-        <h3 className="font-medium mb-2">Theme</h3>
-        <p className="text-sm text-[var(--color-text-muted)] mb-4">
-          Choose your preferred color scheme. Auto follows your operating system setting.
-        </p>
-        <div className="flex gap-3">
+      {/* Appearance */}
+      <div className="bg-[var(--color-surface)] card p-4 mb-4">
+        <h3 className="font-medium mb-4">Appearance</h3>
+
+        {/* Color scheme */}
+        <p className="text-sm text-[var(--color-text-secondary)] mb-2">Color scheme</p>
+        <div className="flex gap-3 mb-5">
           {themeOptions.map(opt => (
             <button
               key={opt.value}
               onClick={() => setMode(opt.value)}
-              className={`flex-1 max-w-[160px] px-4 py-3 rounded-lg border text-left transition ${
+              className={`flex-1 max-w-[160px] px-4 py-3 border text-left transition ${
                 mode === opt.value
                   ? "border-[var(--color-accent)] bg-[var(--color-accent-10)]"
                   : "border-[var(--color-border-light)] bg-[var(--color-bg)] hover:border-[var(--color-scrollbar)]"
               }`}
+              style={{ borderRadius: "var(--radius-card)" }}
             >
               <div className="flex items-center gap-2 mb-1">
                 <div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center ${
@@ -185,9 +191,36 @@ function GeneralSettings() {
             </button>
           ))}
         </div>
+
+        {/* Style */}
+        <p className="text-sm text-[var(--color-text-secondary)] mb-2">Style</p>
+        <div className="flex gap-3">
+          {styleOptions.map(opt => (
+            <button
+              key={opt.value}
+              onClick={() => setStyle(opt.value)}
+              className={`flex-1 max-w-[200px] px-4 py-3 border text-left transition ${
+                style === opt.value
+                  ? "border-[var(--color-accent)] bg-[var(--color-accent-10)]"
+                  : "border-[var(--color-border-light)] bg-[var(--color-bg)] hover:border-[var(--color-scrollbar)]"
+              }`}
+              style={{ borderRadius: "var(--radius-card)" }}
+            >
+              <div className="flex items-center gap-2 mb-1">
+                <div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center ${
+                  style === opt.value ? "border-[var(--color-accent)]" : "border-[var(--color-scrollbar)]"
+                }`}>
+                  {style === opt.value && <div className="w-2 h-2 rounded-full bg-[var(--color-accent)]" />}
+                </div>
+                <span className="text-sm font-medium">{opt.label}</span>
+              </div>
+              <p className="text-xs text-[var(--color-text-muted)] ml-6">{opt.description}</p>
+            </button>
+          ))}
+        </div>
       </div>
 
-      <div className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-4">
+      <div className="bg-[var(--color-surface)] card p-4">
         <h3 className="font-medium mb-2">Instance URL</h3>
         <p className="text-sm text-[var(--color-text-muted)] mb-4">
           The public HTTPS URL for this instance. Used for webhook callbacks from external services like Composio.
@@ -548,7 +581,7 @@ function ProjectsSettings() {
           {projects.map(project => (
             <div
               key={project.id}
-              className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-4 flex items-center gap-4"
+              className="bg-[var(--color-surface)] card p-4 flex items-center gap-4"
             >
               <div
                 className="w-4 h-4 rounded-full flex-shrink-0"
@@ -818,7 +851,7 @@ function UpdatesSettings() {
           </div>
 
           {/* Current Version */}
-          <div className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-5">
+          <div className="bg-[var(--color-surface)] card p-5">
             <div className="flex items-center justify-between mb-4">
               <div>
                 <h3 className="font-medium text-lg">Current Version</h3>
@@ -881,7 +914,7 @@ function UpdatesSettings() {
           )}
 
           {/* Apteva App Version */}
-          <div className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-5">
+          <div className="bg-[var(--color-surface)] card p-5">
             <div className="flex items-center justify-between mb-4">
               <div>
                 <h3 className="font-medium text-lg">apteva</h3>
@@ -921,7 +954,7 @@ function UpdatesSettings() {
           </div>
 
           {/* Agent Binary Version */}
-          <div className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-5">
+          <div className="bg-[var(--color-surface)] card p-5">
             <div className="flex items-center justify-between mb-4">
               <div>
                 <h3 className="font-medium text-lg">Agent Binary</h3>
@@ -1783,7 +1816,7 @@ function ApiKeysSettings() {
 
       {/* Create Form */}
       {showCreate && !newKey && (
-        <div className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-4 mb-6">
+        <div className="bg-[var(--color-surface)] card p-4 mb-6">
           <h3 className="font-medium mb-4">Create new API key</h3>
           <div className="space-y-4 max-w-md">
             <div>
@@ -1880,7 +1913,7 @@ function ApiKeysSettings() {
 
       {/* Usage Info */}
       {keys.length > 0 && (
-        <div className="mt-6 bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-4">
+        <div className="mt-6 bg-[var(--color-surface)] card p-4">
           <h3 className="font-medium mb-2 text-sm">Usage</h3>
           <code className="block bg-[var(--color-bg)] px-3 py-2 rounded font-mono text-xs text-[var(--color-text-secondary)]">
             curl -H "X-API-Key: apt_..." http://localhost:4280/api/agents
@@ -1953,7 +1986,7 @@ function AccountSettings() {
 
       {/* User Info */}
       {user && (
-        <div className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-4 mb-6">
+        <div className="bg-[var(--color-surface)] card p-4 mb-6">
           <h3 className="font-medium mb-3">Profile</h3>
           <div className="space-y-2 text-sm">
             <div className="flex justify-between">
@@ -1975,7 +2008,7 @@ function AccountSettings() {
       )}
 
       {/* Change Password */}
-      <div className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-4">
+      <div className="bg-[var(--color-surface)] card p-4">
         <h3 className="font-medium mb-4">Change Password</h3>
 
         <div className="space-y-4 max-w-md">
@@ -2086,7 +2119,7 @@ function DataSettings() {
         <p className="text-[var(--color-text-muted)]">Manage stored data and telemetry.</p>
       </div>
 
-      <div className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-4">
+      <div className="bg-[var(--color-surface)] card p-4">
         <h3 className="font-medium mb-2">Telemetry Data</h3>
         <p className="text-sm text-[var(--color-text-muted)] mb-4">
           {eventCount !== null
@@ -2272,7 +2305,7 @@ function ChannelsSettings() {
 
       {/* Create form */}
       {showForm && (
-        <div className="mb-6 bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-4 space-y-3">
+        <div className="mb-6 bg-[var(--color-surface)] card p-4 space-y-3">
           <h3 className="text-sm font-medium text-[var(--color-text-secondary)] mb-2">New Telegram Channel</h3>
 
           <div>
@@ -2339,7 +2372,7 @@ function ChannelsSettings() {
       ) : (
         <div className="space-y-3">
           {channels.map(channel => (
-            <div key={channel.id} className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-4">
+            <div key={channel.id} className="bg-[var(--color-surface)] card p-4">
               <div className="flex items-start justify-between">
                 <div className="flex-1 min-w-0">
                   <div className="flex items-center gap-2 mb-1">

package/src/web/components/skills/SkillsPage.tsx

@@ -316,7 +316,7 @@ export function SkillsPage() {
           </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("installed")}
               className={`px-4 py-2 rounded text-sm font-medium transition ${
@@ -366,7 +366,7 @@ export function SkillsPage() {
                   </button>
                 </div>
               ) : filteredSkills.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 skills match this filter.</p>
                 </div>
               ) : (
@@ -478,7 +478,7 @@ export function SkillsPage() {
 
               {/* Empty State */}
               {!githubLoading && !githubRepoInfo && !githubError && (
-                <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">
                   <div className="text-4xl mb-4">📦</div>
                   <h3 className="text-lg font-medium mb-2">Browse Skills from GitHub</h3>
                   <p className="text-[var(--color-text-muted)] mb-6 max-w-md mx-auto">
@@ -563,7 +563,7 @@ export function SkillsPage() {
               )}
 
               {/* 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>
                   Skills are sourced from GitHub repositories. Each skill should be in its own directory with a{" "}
                   <code className="text-[var(--color-text-secondary)] bg-[var(--color-bg)] px-1 rounded">SKILL.md</code> file containing instructions.
@@ -895,7 +895,7 @@ function CreateSkillModal({
   return (
     <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4" onClick={onClose}>
       <div
-        className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg w-full max-w-2xl max-h-[90vh] overflow-auto"
+        className="bg-[var(--color-surface)] card w-full max-w-2xl max-h-[90vh] overflow-auto"
         onClick={(e) => e.stopPropagation()}
       >
         <div className="p-6 border-b border-[var(--color-border)]">
@@ -1029,7 +1029,7 @@ function ImportSkillModal({
   return (
     <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4" onClick={onClose}>
       <div
-        className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg w-full max-w-2xl max-h-[90vh] overflow-auto"
+        className="bg-[var(--color-surface)] card w-full max-w-2xl max-h-[90vh] overflow-auto"
         onClick={(e) => e.stopPropagation()}
       >
         <div className="p-6 border-b border-[var(--color-border)]">
@@ -1129,7 +1129,7 @@ function ViewSkillModal({
   return (
     <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4" onClick={onClose}>
       <div
-        className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg w-full max-w-3xl max-h-[90vh] overflow-auto"
+        className="bg-[var(--color-surface)] card w-full max-w-3xl max-h-[90vh] overflow-auto"
         onClick={(e) => e.stopPropagation()}
       >
         <div className="p-6 border-b border-[var(--color-border)] flex items-center justify-between">