feat: enhance Tetrate onboarding card with logo and updated copy

ui/desktop/src/components/ProviderGuard.tsx

@@ -10,7 +10,7 @@ import { toastService } from '../toasts';
 import { OllamaSetup } from './OllamaSetup';
 import { checkOllamaStatus } from '../utils/ollamaDetection';
 import { Goose } from './icons/Goose';
-import { OpenRouter, Ollama } from './icons';
+import { OpenRouter, Ollama, Tetrate } from './icons';
 
 interface ProviderGuardProps {
   children: React.ReactNode;
@@ -330,8 +330,9 @@ export default function ProviderGuard({ children }: ProviderGuardProps) {
                   >
                     <div className="flex items-start justify-between mb-3">
                       <div className="flex-1">
+                        <Tetrate className="w-5 h-5 sm:w-6 sm:h-6 mb-12 text-text-standard" />
                         <h3 className="font-medium text-text-standard text-sm sm:text-base">
-                          Automatic setup with Tetrate Agent Router
+                        Try for free using Tetrate
                         </h3>
                       </div>
                       <div className="text-text-muted group-hover:text-text-standard transition-colors">
@@ -361,10 +362,8 @@ export default function ProviderGuard({ children }: ProviderGuardProps) {
                 <div className="relative">
                   <div
                     onClick={handleOpenRouterSetup}
-                    className="relative w-full p-4 sm:p-6 bg-background-muted border border-background-hover rounded-xl hover:border-text-muted transition-all duration-200 cursor-pointer group overflow-hidden"
+                    className="relative w-full p-4 sm:p-6 bg-transparent border border-background-hover rounded-xl hover:border-text-muted transition-all duration-200 cursor-pointer group"
                   >
-                    {/* Subtle shimmer effect */}
-                    <div className="absolute inset-0 -translate-x-full animate-shimmer bg-gradient-to-r from-transparent via-white/8 to-transparent"></div>
 
                     <div className="relative flex items-start justify-between mb-3">
                       <div className="flex-1">

ui/desktop/src/components/icons/Tetrate.tsx

@@ -0,0 +1,17 @@
+export const Tetrate = ({ className }: { className?: string }) => (
+  <svg 
+    width="73" 
+    height="72" 
+    viewBox="0 0 73 72" 
+    fill="none" 
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path 
+      fillRule="evenodd" 
+      clipRule="evenodd" 
+      d="M52.1399 13.7815C55.4081 15.7135 59.2102 16.3131 62.8786 15.6469C70.1489 14.7142 75.418 22.6419 71.6829 28.9709C68.0813 35.3665 58.5432 34.7003 55.7418 27.9714C49.1386 10.9169 24.7263 10.9169 18.0563 27.9714C15.3216 34.7003 5.71687 35.3665 2.11508 28.9709C-1.55341 22.6419 3.71588 14.7142 10.9195 15.6469C14.588 16.3131 18.3898 15.6469 21.6582 13.7815C24.993 11.9162 27.3942 8.98486 28.6618 5.454C31.5964 -1.80758 42.2017 -1.80758 45.1365 5.454C46.4039 8.91824 48.8716 11.9162 52.1399 13.7815ZM36.9325 22.9751C44.2028 22.9751 48.4715 31.4359 44.0026 37.2983C41.6014 40.0964 40.2675 43.6937 40.2675 47.4913C40.2675 51.2219 41.6014 54.8195 44.0026 57.6842C48.5382 63.5466 44.2028 72.0741 36.9325 72.0074C29.6623 72.0074 25.3933 63.5466 29.8622 57.6842C32.2635 54.8862 33.5973 51.2886 33.5973 47.4913C33.5973 43.7606 32.2635 40.163 29.8622 37.2983C25.3267 31.4359 29.6623 22.9086 36.9325 22.9751Z" 
+      fill="currentColor"
+    />
+  </svg>
+);

ui/desktop/src/components/icons/index.tsx

@@ -39,6 +39,7 @@ import Settings from './Settings';
 import Time from './Time';
 import { Gear } from './Gear';
 import Youtube from './Youtube';
+import { Tetrate } from './Tetrate';
 import { Microphone } from './Microphone';
 import { Watch0 } from './Watch0';
 import { Watch1 } from './Watch1';
@@ -98,4 +99,4 @@ export {
   Watch5,
   Watch6,
   Youtube,
-};
+  Tetrate,};