bloby-bot 0.51.3 → 0.51.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bloby-bot",
-  "version": "0.51.3",
+  "version": "0.51.5",
   "releaseNotes": [
     "1. New Morphy animation system: config-driven sprites loaded from /morphy/*.json",
     "2. Swapped teleporting (splash) and headphones (bubble + chat) to the new format",

package/supervisor/chat/OnboardWizard.tsx

@@ -51,7 +51,7 @@ const ACCESS_LABELS: Record<AccessMethod, string> = {
 // visual weight. Default base is 30px; pass undefined to inherit it.
 const BASE_ICON_HEIGHT = 30;
 const PROVIDERS = [
-  { id: 'bloby',     name: 'Bloby',  subtitle: 'Coming Soon..',         icon: '/bloby.png',        comingSoon: true,  iconHeight: 30 },
+  { id: 'bloby',     name: 'Bloby',  subtitle: 'Coming Soon..',         icon: '/morphy.png',        comingSoon: true,  iconHeight: 30 },
   { id: 'anthropic', name: 'Claude', subtitle: 'By\nAnthropic',         icon: '/icons/claude.png', comingSoon: false, iconHeight: 30 },
   { id: 'openai',    name: 'Codex',  subtitle: 'By\nOpenAI',            icon: '/codex.svg',        comingSoon: false, iconHeight: 34 },
   { id: 'pi',        name: 'Pi',     subtitle: 'Bring your\nown model', icon: '/pi-logo.svg',      comingSoon: false, iconHeight: 33 },
@@ -81,7 +81,7 @@ const MODELS: Record<string, { id: string; label: string }[]> = {
 
 const HANDLES = [
   { tier: 'at', prefix: 'open.bloby.bot/', label: (n: string) => `open.bloby.bot/${n}`, badge: 'Free', badgeCls: 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20', highlight: false },
-  { tier: 'premium', prefix: 'bloby.bot/', label: (n: string) => `bloby.bot/${n}`, badge: '$5', badgeCls: 'bg-[#AF27E3]/15 text-[#AF27E3] border-[#AF27E3]/20', highlight: true },
+  { tier: 'premium', prefix: 'bloby.bot/', label: (n: string) => `bloby.bot/${n}`, badge: '$5', badgeCls: 'bg-[#0069FE]/15 text-[#0069FE] border-[#0069FE]/20', highlight: true },
 ] as const;
 
 /* ── Dropdown ── */
@@ -123,7 +123,7 @@ function ModelDropdown({ models, value, onChange }: { models: { id: string; labe
         ref={btnRef}
         type="button"
         onClick={() => setOpen((o) => !o)}
-        className="w-full flex items-center justify-between gap-2 bg-white/[0.03] border border-white/[0.08] text-white rounded-xl px-4 py-2.5 text-[13px] outline-none hover:border-white/15 focus:border-[#AF27E3]/30 transition-colors overflow-hidden"
+        className="w-full flex items-center justify-between gap-2 bg-white/[0.03] border border-white/[0.08] text-white rounded-xl px-4 py-2.5 text-[13px] outline-none hover:border-white/15 focus:border-[#0069FE]/30 transition-colors overflow-hidden"
       >
         <span className={`min-w-0 truncate text-left ${selected ? 'text-white' : 'text-white/20'}`}>
           {selected ? selected.label : 'Choose a model...'}
@@ -142,7 +142,7 @@ function ModelDropdown({ models, value, onChange }: { models: { id: string; labe
               onClick={() => { onChange(m.id); setOpen(false); }}
               className={`w-full text-left px-4 py-2 text-[13px] transition-colors ${
                 value === m.id
-                  ? 'text-[#AF27E3] bg-[#AF27E3]/10'
+                  ? 'text-[#0069FE] bg-[#0069FE]/10'
                   : 'text-white/70 hover:bg-white/[0.04] hover:text-white'
               }`}
             >
@@ -1340,7 +1340,7 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
                       {handleStatus && botName.length > 0 && !registered && (
                         <div className="absolute right-4 top-1/2 -translate-y-1/2">
                           {handleStatus === 'checking' && (
-                            <div className="w-5 h-5 border-2 border-white/10 border-t-[#04D1FE] rounded-full animate-spin" />
+                            <div className="w-5 h-5 border-2 border-white/10 border-t-[#0069FE] rounded-full animate-spin" />
                           )}
                           {handleStatus === 'invalid' && (
                             <div className="w-6 h-6 rounded-full bg-amber-500/15 flex items-center justify-center">
@@ -1374,7 +1374,7 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
                                 freeTaken
                                   ? 'border-white/[0.04] opacity-50 cursor-not-allowed'
                                   : freeSelected
-                                    ? 'border-[#AF27E3]/30 bg-white/[0.04]'
+                                    ? 'border-[#0069FE]/30 bg-white/[0.04]'
                                     : 'border-white/[0.06] hover:border-white/10 hover:bg-white/[0.02]'
                               }`}
                             >
@@ -1401,17 +1401,17 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
                           return (
                             <div className={`rounded-xl border transition-all duration-200 text-left px-4 py-3 ${
                               premReserved
-                                ? 'border-[#AF27E3]/20'
+                                ? 'border-[#0069FE]/20'
                                 : 'border-white/[0.06]'
                             }`}>
                               <div className="flex items-center justify-between">
                                 <div className="flex items-center gap-2">
                                   <span className="text-[12px] font-semibold text-white/60 uppercase tracking-wider">Premium</span>
-                                  <span className="text-[11px] font-medium px-2.5 py-0.5 rounded-full border bg-[#AF27E3]/15 text-[#AF27E3] border-[#AF27E3]/20">$5</span>
+                                  <span className="text-[11px] font-medium px-2.5 py-0.5 rounded-full border bg-[#0069FE]/15 text-[#0069FE] border-[#0069FE]/20">$5</span>
                                 </div>
                                 <span className={`text-[11px] font-medium px-2.5 py-0.5 rounded-full border ${
                                   premReserved
-                                    ? 'bg-[#AF27E3]/10 text-[#AF27E3] border-[#AF27E3]/20'
+                                    ? 'bg-[#0069FE]/10 text-[#0069FE] border-[#0069FE]/20'
                                     : premTaken
                                       ? 'bg-red-500/10 text-red-400 border-red-500/20'
                                       : 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20'
@@ -1431,7 +1431,7 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
                                     href="https://www.bloby.bot/#reserve"
                                     target="_blank"
                                     rel="noopener noreferrer"
-                                    className="text-[12px] font-medium text-[#AF27E3] hover:text-[#c44df7] transition-colors"
+                                    className="text-[12px] font-medium text-[#0069FE] hover:text-[#3391FF] transition-colors"
                                   >
                                     Purchase
                                   </a>
@@ -1440,13 +1440,13 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
 
                               {/* Premium taken but reserved by user — activation */}
                               {premReserved && (
-                                <div className="mt-3 pt-3 border-t border-[#AF27E3]/10">
+                                <div className="mt-3 pt-3 border-t border-[#0069FE]/10">
                                   {!showClaimInput ? (
                                     <div className="flex items-center justify-between">
                                       <p className="text-[12px] text-white/40">Is that yours?</p>
                                       <button
                                         onClick={() => { setShowClaimInput(true); setClaimCode(''); setClaimError(''); }}
-                                        className="text-[12px] font-medium text-[#AF27E3] hover:text-[#c44df7] transition-colors"
+                                        className="text-[12px] font-medium text-[#0069FE] hover:text-[#3391FF] transition-colors"
                                       >
                                         Activate
                                       </button>
@@ -1466,7 +1466,7 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
                                           spellCheck={false}
                                           autoComplete="off"
                                           autoFocus
-                                          className="flex-1 bg-white/[0.05] border border-white/[0.08] text-white rounded-lg px-3 py-2 text-[13px] font-mono outline-none focus:border-[#AF27E3]/30 transition-colors placeholder:text-white/20 tracking-widest text-center"
+                                          className="flex-1 bg-white/[0.05] border border-white/[0.08] text-white rounded-lg px-3 py-2 text-[13px] font-mono outline-none focus:border-[#0069FE]/30 transition-colors placeholder:text-white/20 tracking-widest text-center"
                                         />
                                         <button
                                           onClick={onClaimReserved}
@@ -1498,7 +1498,7 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
                           onClick={() => { setHandleChoice('tunnel'); setSelectedTier('skip'); }}
                           className={`w-full rounded-xl border transition-all duration-200 text-left px-4 py-3 ${
                             selectedTier === 'skip'
-                              ? 'border-[#AF27E3]/30 bg-white/[0.04]'
+                              ? 'border-[#0069FE]/30 bg-white/[0.04]'
                               : 'border-white/[0.06] hover:border-white/10 hover:bg-white/[0.02]'
                           }`}
                         >
@@ -2244,7 +2244,7 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
                       onClick={() => handleProviderChange(p.id)}
                       className={`flex-1 relative rounded-xl border transition-all duration-200 p-3 text-left ${
                         provider === p.id
-                          ? 'bg-white/[0.04] border-[#AF27E3]/40'
+                          ? 'bg-white/[0.04] border-[#0069FE]/40'
                           : 'bg-transparent border-white/[0.06] hover:border-white/10 hover:bg-white/[0.02]'
                       }`}
                     >
@@ -2767,7 +2767,7 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
                   onClick={() => setWhisperEnabled((v) => !v)}
                   className={`w-full mt-3 rounded-xl border transition-all duration-200 p-4 text-left ${
                     whisperEnabled
-                      ? 'bg-white/[0.04] border-[#AF27E3]/40'
+                      ? 'bg-white/[0.04] border-[#0069FE]/40'
                       : 'bg-transparent border-white/[0.06] hover:border-white/10 hover:bg-white/[0.02]'
                   }`}
                 >
@@ -2807,7 +2807,7 @@ export default function OnboardWizard({ onComplete, isInitialSetup = false, onSa
                       <p className="text-amber-400/70 text-[11px] mt-1">Key looks too short</p>
                     )}
                     <div className="flex items-start gap-2.5 mt-3 bg-white/[0.02] border border-white/[0.06] rounded-xl px-4 py-3">
-                      <Mic className="h-4 w-4 text-[#AF27E3]/60 mt-0.5 shrink-0" />
+                      <Mic className="h-4 w-4 text-[#0069FE]/60 mt-0.5 shrink-0" />
                       <p className="text-white/35 text-[12px] leading-relaxed">
                         Whisper provides more accurate transcription and works in all browsers including Firefox.
                       </p>

package/supervisor/chat/src/components/Chat/MessageBubble.tsx

@@ -344,7 +344,7 @@ export default function MessageBubble({ role, content, timestamp, hasAttachments
               href={href}
               target="_blank"
               rel="noopener noreferrer"
-              className="text-[#4C89F2] underline decoration-[#4C89F2]/30 underline-offset-2 hover:decoration-[#4C89F2] transition-colors"
+              className="text-[#0069FE] underline decoration-[#0069FE]/30 underline-offset-2 hover:decoration-[#0069FE] transition-colors"
             >
               {children}
             </a>

package/supervisor/chat/src/components/LoginScreen.tsx

@@ -193,8 +193,8 @@ export default function LoginScreen({ onLogin, totpEnabled }: Props) {
               transition={{ duration: 0.2 }}
               className="w-full flex flex-col items-center"
             >
-              <div className="w-14 h-14 rounded-2xl bg-[#AF27E3]/10 border border-[#AF27E3]/20 flex items-center justify-center mb-5">
-                <Shield className="h-6 w-6 text-[#AF27E3]" />
+              <div className="w-14 h-14 rounded-2xl bg-[#0069FE]/10 border border-[#0069FE]/20 flex items-center justify-center mb-5">
+                <Shield className="h-6 w-6 text-[#0069FE]" />
               </div>
 
               <h1 className="text-xl font-bold text-white tracking-tight mb-1">
@@ -235,7 +235,7 @@ export default function LoginScreen({ onLogin, totpEnabled }: Props) {
                   onClick={() => setTrustDevice(v => !v)}
                   className={`w-5 h-5 rounded-md border flex items-center justify-center transition-all ${
                     trustDevice
-                      ? 'bg-[#AF27E3] border-[#AF27E3]'
+                      ? 'bg-[#0069FE] border-[#0069FE]'
                       : 'bg-white/[0.04] border-white/[0.12]'
                   }`}
                 >

package/supervisor/chat/src/styles/globals.css

@@ -22,7 +22,7 @@
   --color-accent-foreground: #EBEBEB;
 
   /* ── Primary ── */
-  --color-primary: #4C89F2;
+  --color-primary: #0069FE;
   --color-primary-foreground: #ffffff;
 
   /* ── Danger ── */
@@ -32,10 +32,10 @@
   /* ── Borders & inputs ── */
   --color-border: #333333;
   --color-input: #333333;
-  --color-ring: #4C89F2;
+  --color-ring: #0069FE;
 
   /* ── Charts ── */
-  --color-chart-1: #4C89F2;
+  --color-chart-1: #0069FE;
   --color-chart-2: #F04D68;
   --color-chart-3: #F59E0B;
   --color-chart-4: #8B5CF6;
@@ -44,12 +44,12 @@
   /* ── Code blocks (Streamdown uses bg-sidebar / bg-background) ── */
   --color-sidebar: #222222;
   --color-sidebar-foreground: #EBEBEB;
-  --color-sidebar-primary: #4C89F2;
+  --color-sidebar-primary: #0069FE;
   --color-sidebar-primary-foreground: #ffffff;
   --color-sidebar-accent: #2A2A2A;
   --color-sidebar-accent-foreground: #EBEBEB;
   --color-sidebar-border: #333333;
-  --color-sidebar-ring: #4C89F2;
+  --color-sidebar-ring: #0069FE;
 
   --radius: 0.75rem;
 }
@@ -68,7 +68,7 @@ body {
 }
 
 ::selection {
-  background-color: rgba(175, 39, 227, 0.25);
+  background-color: rgba(0, 105, 254, 0.25);
 }
 
 ::-webkit-scrollbar { width: 6px; }
@@ -81,16 +81,16 @@ body {
   -webkit-background-clip: text;
   color: transparent;
   -webkit-text-fill-color: transparent;
-  background-image: linear-gradient(135deg, #04D1FE, #AF27E3, #FB4072);
+  background-image: linear-gradient(135deg, #0166FF, #009AFE, #4AEEFF);
 }
 
 .bg-gradient-brand {
-  background-image: linear-gradient(135deg, #04D1FE, #AF27E3, #FB4072);
+  background-image: linear-gradient(135deg, #0166FF, #009AFE, #4AEEFF);
 }
 
 .glow-border {
-  box-shadow: 0 0 0 1px rgba(175, 39, 227, 0.1),
-              0 0 20px -5px rgba(175, 39, 227, 0.15);
+  box-shadow: 0 0 0 1px rgba(0, 105, 254, 0.1),
+              0 0 20px -5px rgba(0, 105, 254, 0.15);
 }
 
 .animated-border {
@@ -103,10 +103,10 @@ body {
   inset: -150%;
   background: conic-gradient(
     from 0deg,
-    #04D1FE,
-    #AF27E3,
-    #FB4072,
-    #04D1FE
+    #0166FF,
+    #009AFE,
+    #4AEEFF,
+    #0166FF
   );
   animation: border-spin 3s linear infinite;
 }
@@ -120,10 +120,10 @@ body {
 }
 
 .input-glow:focus {
-  border-color: rgba(175, 39, 227, 0.4);
-  box-shadow: 0 0 0 1px rgba(175, 39, 227, 0.15),
-              0 0 20px -5px rgba(175, 39, 227, 0.25),
-              0 0 4px -1px rgba(4, 209, 254, 0.1);
+  border-color: rgba(0, 105, 254, 0.4);
+  box-shadow: 0 0 0 1px rgba(0, 105, 254, 0.15),
+              0 0 20px -5px rgba(0, 105, 254, 0.25),
+              0 0 4px -1px rgba(74, 238, 255, 0.1);
 }
 
 @keyframes border-spin {

package/supervisor/index.ts

@@ -35,12 +35,12 @@ const SUPERVISOR_PUBLIC = path.join(PKG_DIR, 'supervisor', 'public');
 const PLATFORM_ASSETS = new Set([
   '/spritesheet.webp',
   '/headphones_spritesheet.webp',
-  '/bloby-icon-192.png',
-  '/bloby-icon-512.png',
-  '/bloby-badge.png',
-  '/bloby-favicon.png',
-  '/bloby_frame1.png',
-  '/bloby.png',
+  '/morphy-icon-192.png',
+  '/morphy-icon-512.png',
+  '/morphy-badge.png',
+  '/morphy-favicon.png',
+  '/morphy_frame1.png',
+  '/morphy.png',
   '/pi-logo.svg',
   '/codex.svg',
   '/manifest.json',
@@ -193,8 +193,8 @@ self.addEventListener('push', function(event) {
   event.waitUntil(
     self.registration.showNotification(data.title || 'Bloby', {
       body: data.body || '',
-      icon: '/bloby-icon-192.png',
-      badge: '/bloby-badge.png',
+      icon: '/morphy-icon-192.png',
+      badge: '/morphy-badge.png',
       vibrate: [100, 50, 100],
       tag: data.tag || 'bloby-default',
       data: { url: data.url || '/' },
@@ -220,7 +220,7 @@ self.addEventListener('notificationclick', function(event) {
 const RECOVERING_HTML = `<!DOCTYPE html><html style="background:#222122"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Bloby</title>
 <style>@keyframes _fs{to{transform:rotate(360deg)}}body{background:#222122;margin:0}</style></head>
 <body><div style="background:#222122;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100dvh;width:100vw;font-family:system-ui,-apple-system,sans-serif">
-<img src="/bloby-icon-192.png" width="56" height="56" style="border-radius:14px;margin-bottom:20px" alt="" />
+<img src="/morphy-icon-192.png" width="56" height="56" style="border-radius:14px;margin-bottom:20px" alt="" />
 <div style="width:18px;height:18px;border:2px solid rgba(255,255,255,0.12);border-top-color:rgba(255,255,255,0.7);border-radius:50%;animation:_fs .6s linear infinite"></div>
 </div><script>setTimeout(function(){location.reload()},3000)</script>
 <script src="/bloby/widget.js"></script></body></html>`;
@@ -502,7 +502,7 @@ export async function startSupervisor() {
         const connected = status?.connected || false;
         res.writeHead(200);
         const confettiHTML = Array.from({ length: 30 }, (_, i) => {
-          const colors = ['#04D1FE', '#AF27E3', '#FB4072', '#4ade80', '#facc15', '#818cf8'];
+          const colors = ['#0166FF', '#009AFE', '#4AEEFF', '#4ade80', '#facc15', '#818cf8'];
           const color = colors[Math.floor(Math.random() * colors.length)];
           const left = Math.random() * 100;
           const delay = i * 0.04;
@@ -521,7 +521,7 @@ export async function startSupervisor() {
   body{background:#212121;color:#f5f5f5;font-family:'Inter',system-ui,-apple-system,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100dvh;margin:0;overflow-x:hidden}
   .container{display:flex;flex-direction:column;align-items:center;max-width:360px;width:100%;padding:20px}
 
-  .qr-card{background:#2a2a2a;border:1px solid rgba(255,255,255,0.08);border-radius:20px;padding:28px;width:100%;box-shadow:0 0 0 1px rgba(175,39,227,0.1),0 0 20px -5px rgba(175,39,227,0.15);animation:fade-up .5s ease-out both}
+  .qr-card{background:#2a2a2a;border:1px solid rgba(255,255,255,0.08);border-radius:20px;padding:28px;width:100%;box-shadow:0 0 0 1px rgba(0, 105, 254,0.1),0 0 20px -5px rgba(0, 105, 254,0.15);animation:fade-up .5s ease-out both}
   .qr-inner{background:#fff;border-radius:12px;padding:16px}
   .qr-inner svg{width:100%;height:auto;display:block}
 
@@ -533,22 +533,22 @@ export async function startSupervisor() {
 
   .phone-section{width:100%;animation:fade-up .5s ease-out .4s both}
   .phone-toggle{background:none;border:none;color:#888;font-size:13px;cursor:pointer;font-family:inherit;padding:4px 0;transition:color .2s;width:100%;text-align:center}
-  .phone-toggle:hover{color:#AF27E3}
+  .phone-toggle:hover{color:#0069FE}
 
   .phone-form{display:none;width:100%;margin-top:16px;animation:fade-up .3s ease-out both}
   .phone-form.visible{display:flex;flex-direction:column;align-items:center;gap:12px}
   .phone-input-wrap{display:flex;gap:8px;width:100%}
   .phone-input{flex:1;background:#2a2a2a;border:1px solid rgba(255,255,255,0.1);border-radius:10px;padding:12px 14px;color:#f5f5f5;font-size:15px;font-family:inherit;outline:none;transition:border-color .2s}
-  .phone-input:focus{border-color:#AF27E3}
+  .phone-input:focus{border-color:#0069FE}
   .phone-input::placeholder{color:#555}
-  .phone-btn{background:linear-gradient(135deg,#AF27E3,#FB4072);border:none;border-radius:10px;padding:12px 20px;color:#fff;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;transition:opacity .2s}
+  .phone-btn{background:linear-gradient(135deg, #0166FF, #009AFE);border:none;border-radius:10px;padding:12px 20px;color:#fff;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;transition:opacity .2s}
   .phone-btn:hover{opacity:.9}
   .phone-btn:disabled{opacity:.5;cursor:not-allowed}
   .phone-hint{font-size:12px;color:#555;text-align:center}
 
   .code-display{display:none;width:100%;margin-top:16px;text-align:center;animation:fade-up .3s ease-out both}
   .code-display.visible{display:block}
-  .code-value{font-family:'Space Grotesk',monospace;font-size:32px;font-weight:700;letter-spacing:6px;background:linear-gradient(135deg,#04D1FE,#AF27E3);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:12px 0}
+  .code-value{font-family:'Space Grotesk',monospace;font-size:32px;font-weight:700;letter-spacing:6px;background:linear-gradient(135deg, #0166FF, #009AFE);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:12px 0}
   .code-steps{font-size:12px;color:#666;line-height:1.8;text-align:left;margin-top:12px;padding:0 8px}
   .code-steps li{margin-bottom:2px}
   .code-error{color:#FB4072;font-size:13px;margin-top:8px}
@@ -562,7 +562,7 @@ export async function startSupervisor() {
   @keyframes pop-in{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}
 
   .text-wrap{text-align:center;animation:fade-up .5s ease-out .3s both}
-  .title{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;background:linear-gradient(135deg,#04D1FE,#AF27E3,#FB4072);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px}
+  .title{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;background:linear-gradient(135deg, #0166FF, #009AFE, #4AEEFF);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px}
   .subtitle{font-size:14px;color:#999;line-height:1.5}
 
   .loading{font-size:14px;color:#999;animation:pulse 2s ease-in-out infinite}
@@ -574,7 +574,7 @@ ${connected
   ? `<div class="confetti-wrap">${confettiHTML}</div>
 <div class="video-wrap"><video autoplay muted playsinline><source src="/bloby_happy_reappearing.mov" type='video/mp4; codecs="hvc1"'><source src="/bloby_happy_reappearing.webm" type="video/webm"></video></div>
 <div class="text-wrap"><div class="title">Connected!</div><p class="subtitle">WhatsApp is linked. You can close this page.</p>
-<button onclick="relink()" style="margin-top:20px;padding:10px 24px;background:#2a2a2a;border:1px solid rgba(255,255,255,0.15);border-radius:10px;color:#999;font-size:13px;cursor:pointer;font-family:inherit;transition:all .2s" onmouseover="this.style.borderColor='#AF27E3';this.style.color='#f5f5f5'" onmouseout="this.style.borderColor='rgba(255,255,255,0.15)';this.style.color='#999'">Relink to a different number</button>
+<button onclick="relink()" style="margin-top:20px;padding:10px 24px;background:#2a2a2a;border:1px solid rgba(255,255,255,0.15);border-radius:10px;color:#999;font-size:13px;cursor:pointer;font-family:inherit;transition:all .2s" onmouseover="this.style.borderColor='#0069FE';this.style.color='#f5f5f5'" onmouseout="this.style.borderColor='rgba(255,255,255,0.15)';this.style.color='#999'">Relink to a different number</button>
 </div>
 <script>async function relink(){await fetch('/api/channels/whatsapp/logout',{method:'POST'});await fetch('/api/channels/whatsapp/connect',{method:'POST'});setTimeout(()=>location.reload(),2000)}</script>`
   : qr
@@ -980,7 +980,7 @@ ${!connected ? `<script>
         const alexaStatus = channelManager.getStatus('alexa');
         const alreadyLinked = !!(alexaStatus?.info as any)?.linked;
         const confettiHTML = Array.from({ length: 30 }, (_, i) => {
-          const colors = ['#04D1FE', '#AF27E3', '#FB4072', '#4ade80', '#facc15', '#818cf8'];
+          const colors = ['#0166FF', '#009AFE', '#4AEEFF', '#4ade80', '#facc15', '#818cf8'];
           const color = colors[Math.floor(Math.random() * colors.length)];
           const left = Math.random() * 100;
           const delay = i * 0.04;
@@ -998,17 +998,17 @@ ${!connected ? `<script>
   body{background:#212121;color:#f5f5f5;font-family:'Inter',system-ui,-apple-system,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100dvh;margin:0;overflow-x:hidden}
   .container{display:flex;flex-direction:column;align-items:center;max-width:380px;width:100%;padding:20px}
 
-  .card{background:#2a2a2a;border:1px solid rgba(255,255,255,0.08);border-radius:20px;padding:28px 24px;width:100%;box-shadow:0 0 0 1px rgba(175,39,227,0.1),0 0 20px -5px rgba(175,39,227,0.15);animation:fade-up .5s ease-out both;text-align:center}
+  .card{background:#2a2a2a;border:1px solid rgba(255,255,255,0.08);border-radius:20px;padding:28px 24px;width:100%;box-shadow:0 0 0 1px rgba(0, 105, 254,0.1),0 0 20px -5px rgba(0, 105, 254,0.15);animation:fade-up .5s ease-out both;text-align:center}
 
   .header{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:18px}
   .badge-alexa{display:inline-flex;align-items:center;gap:6px;background:#1a1a1a;border:1px solid rgba(255,255,255,0.08);border-radius:9999px;padding:4px 10px;font-size:11px;color:#888;text-transform:uppercase;letter-spacing:0.6px}
-  .badge-alexa::before{content:'';width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,#04D1FE,#AF27E3);box-shadow:0 0 8px rgba(4,209,254,0.5)}
-  .title{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;background:linear-gradient(135deg,#04D1FE,#AF27E3,#FB4072);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-top:6px}
+  .badge-alexa::before{content:'';width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg, #0166FF, #009AFE);box-shadow:0 0 8px rgba(74, 238, 255,0.5)}
+  .title{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;background:linear-gradient(135deg, #0166FF, #009AFE, #4AEEFF);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-top:6px}
   .sub{font-size:13px;color:#999;line-height:1.6;margin-top:6px}
 
   .code-block{margin:18px 0 6px;animation:fade-up .5s ease-out .15s both}
   .code-label{font-size:11px;color:#666;text-transform:uppercase;letter-spacing:0.8px;margin-bottom:8px}
-  .code-value{font-family:'Space Grotesk',monospace;font-size:36px;font-weight:700;letter-spacing:8px;background:linear-gradient(135deg,#04D1FE,#AF27E3);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.1}
+  .code-value{font-family:'Space Grotesk',monospace;font-size:36px;font-weight:700;letter-spacing:8px;background:linear-gradient(135deg, #0166FF, #009AFE);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.1}
   .countdown{font-size:12px;color:#666;margin-top:10px;display:inline-flex;align-items:center;gap:6px}
   .countdown.warn{color:#FB4072}
   .countdown .dot{width:6px;height:6px;border-radius:50%;background:currentColor;animation:pulse 1.6s ease-in-out infinite;opacity:.6}
@@ -1016,8 +1016,8 @@ ${!connected ? `<script>
   .quote-card{background:#1a1a1a;border:1px solid rgba(255,255,255,0.06);border-radius:12px;padding:14px 16px;margin:18px 0 6px;animation:fade-up .5s ease-out .25s both}
   .quote-label{font-size:11px;color:#666;text-transform:uppercase;letter-spacing:0.6px;margin-bottom:6px}
   .quote{font-size:15px;color:#f5f5f5;line-height:1.5;font-style:italic}
-  .quote .invocation{color:#04D1FE;font-style:normal;font-weight:600}
-  .quote .num{background:linear-gradient(135deg,#04D1FE,#AF27E3);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-style:normal;font-weight:700;letter-spacing:2px}
+  .quote .invocation{color:#0069FE;font-style:normal;font-weight:600}
+  .quote .num{background:linear-gradient(135deg, #0166FF, #009AFE);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-style:normal;font-weight:700;letter-spacing:2px}
 
   .steps{text-align:left;margin-top:20px;animation:fade-up .5s ease-out .35s both}
   .steps-title{font-size:11px;color:#666;text-transform:uppercase;letter-spacing:0.6px;margin-bottom:10px;text-align:center}
@@ -1027,11 +1027,11 @@ ${!connected ? `<script>
 
   .btn-row{display:flex;gap:10px;margin-top:20px;width:100%;animation:fade-up .5s ease-out .45s both}
   .btn{flex:1;display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:10px;padding:11px 16px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s}
-  .btn-primary{background:linear-gradient(135deg,#AF27E3,#FB4072);color:#fff}
+  .btn-primary{background:linear-gradient(135deg, #0166FF, #009AFE);color:#fff}
   .btn-primary:hover{opacity:.9}
   .btn-primary:disabled{opacity:.5;cursor:not-allowed}
   .btn-ghost{background:#1a1a1a;border:1px solid rgba(255,255,255,0.1);color:#999}
-  .btn-ghost:hover{border-color:rgba(175,39,227,0.4);color:#f5f5f5}
+  .btn-ghost:hover{border-color:rgba(0, 105, 254,0.4);color:#f5f5f5}
 
   .err{color:#FB4072;font-size:13px;margin-top:14px;min-height:1.2em}
 

package/supervisor/public/manifest.json

@@ -8,13 +8,13 @@
   "theme_color": "#212121",
   "icons": [
     {
-      "src": "/bloby-icon-192.png",
+      "src": "/morphy-icon-192.png",
       "sizes": "192x192",
       "type": "image/png",
       "purpose": "any maskable"
     },
     {
-      "src": "/bloby-icon-512.png",
+      "src": "/morphy-icon-512.png",
       "sizes": "512x512",
       "type": "image/png",
       "purpose": "any maskable"

package/workspace/client/index.html

@@ -7,8 +7,8 @@
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
     <meta name="apple-mobile-web-app-title" content="Bloby" />
-    <link rel="icon" type="image/png" href="/bloby-favicon.png" />
-    <link rel="apple-touch-icon" href="/bloby-icon-192.png" />
+    <link rel="icon" type="image/png" href="/morphy-favicon.png" />
+    <link rel="apple-touch-icon" href="/morphy-icon-192.png" />
     <link rel="manifest" href="/manifest.json" />
     <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
     <title>Bloby - AI agent with its own workspace</title>
@@ -30,7 +30,7 @@
         if (root && root.children.length === 0) {
           root.innerHTML =
             '<div style="background:#0A0A0A;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100dvh;width:100vw;position:fixed;inset:0;z-index:50;font-family:system-ui,-apple-system,sans-serif;text-align:center;padding:24px">' +
-            '<img src="/bloby_frame1.png" style="height:120px;width:120px;border-radius:50%;object-fit:cover;margin-bottom:32px" alt="Bloby" />' +
+            '<img src="/morphy_frame1.png" style="height:120px;width:120px;border-radius:50%;object-fit:cover;margin-bottom:32px" alt="Bloby" />' +
             '<h1 style="font-size:20px;font-weight:600;margin-bottom:8px">Your app crashed</h1>' +
             '<p style="font-size:14px;color:rgba(255,255,255,0.5);max-width:320px;line-height:1.5">Ask the agent to fix it using the chat.</p>' +
             '</div>';

package/workspace/client/public/manifest.json

@@ -8,13 +8,13 @@
   "theme_color": "#212121",
   "icons": [
     {
-      "src": "/bloby-icon-192.png",
+      "src": "/morphy-icon-192.png",
       "sizes": "192x192",
       "type": "image/png",
       "purpose": "any maskable"
     },
     {
-      "src": "/bloby-icon-512.png",
+      "src": "/morphy-icon-512.png",
       "sizes": "512x512",
       "type": "image/png",
       "purpose": "any maskable"

package/workspace/client/public/sw.js

@@ -111,8 +111,8 @@ self.addEventListener('push', (event) => {
   event.waitUntil(
     self.registration.showNotification(data.title || 'Bloby', {
       body: data.body || '',
-      icon: '/bloby-icon-192.png',
-      badge: '/bloby-badge.png',
+      icon: '/morphy-icon-192.png',
+      badge: '/morphy-badge.png',
       vibrate: [100, 50, 100],
       tag: data.tag || 'bloby-default',
       data: { url: data.url || '/' },

package/workspace/client/src/components/Dashboard/DashboardPage.tsx

@@ -1,7 +1,7 @@
 import { Search, Mail, DollarSign, TrendingUp } from 'lucide-react';
 import { AreaChart, Area, BarChart, Bar, ResponsiveContainer } from 'recharts';
 
-const GRADIENT = 'linear-gradient(to right, #4FF2FE 10%, #BC20DE 55%, #FF6B8A 100%)';
+const GRADIENT = 'linear-gradient(to right, #0166FF 10%, #009AFE 55%, #4AEEFF 100%)';
 const CARD = 'relative rounded-xl overflow-hidden';
 const BORDER = 'absolute inset-0 rounded-xl bg-gradient-to-b from-white/[0.08] via-white/[0.02] to-transparent pointer-events-none';
 const INNER = 'relative rounded-xl bg-[#141414] m-px p-3.5 h-full';
@@ -52,8 +52,8 @@ export default function DashboardPage() {
               <ResponsiveContainer width="100%" height={48}>
                 <AreaChart data={rev}>
                   <defs>
-                    <linearGradient id="sg" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stopColor="#4FF2FE" /><stop offset="50%" stopColor="#BC20DE" /><stop offset="100%" stopColor="#FE546B" /></linearGradient>
-                    <linearGradient id="sf" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor="#BC20DE" stopOpacity={0.12} /><stop offset="100%" stopColor="#BC20DE" stopOpacity={0} /></linearGradient>
+                    <linearGradient id="sg" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stopColor="#0166FF" /><stop offset="50%" stopColor="#009AFE" /><stop offset="100%" stopColor="#4AEEFF" /></linearGradient>
+                    <linearGradient id="sf" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor="#009AFE" stopOpacity={0.12} /><stop offset="100%" stopColor="#009AFE" stopOpacity={0} /></linearGradient>
                   </defs>
                   <Area type="monotone" dataKey="v" stroke="url(#sg)" strokeWidth={1.5} fill="url(#sf)" />
                 </AreaChart>
@@ -79,7 +79,7 @@ export default function DashboardPage() {
               <ResponsiveContainer width="100%" height={40}>
                 <BarChart data={fol} barCategoryGap="25%">
                   <defs>
-                    <linearGradient id="xg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor="#BC20DE" stopOpacity={0.3} /><stop offset="100%" stopColor="#4FF2FE" stopOpacity={0.05} /></linearGradient>
+                    <linearGradient id="xg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor="#009AFE" stopOpacity={0.3} /><stop offset="100%" stopColor="#0166FF" stopOpacity={0.05} /></linearGradient>
                   </defs>
                   <Bar dataKey="v" fill="url(#xg)" radius={[2, 2, 0, 0]} />
                 </BarChart>

package/workspace/client/src/components/Layout/DashboardLayout.tsx

@@ -36,7 +36,7 @@ export default function DashboardLayout({ children, userName, botName = 'Bloby'
       <header className="flex items-center justify-between px-4 py-3 md:hidden">
         <MobileNav userName={userName} botName={botName} backendStatus={status} />
         <div className="flex items-center gap-2">
-          <img src="/bloby.png" alt={botName} className="h-6 w-auto" />
+          <img src="/morphy.png" alt={botName} className="h-6 w-auto" />
           <span className="font-semibold text-base">{botName}</span>
         </div>
         <div className="w-10" />

package/workspace/client/src/components/Layout/Sidebar.tsx

@@ -27,7 +27,7 @@ export default function Sidebar({ userName, botName = 'Bloby', backendStatus = '
     <aside className="flex flex-col h-full w-64 bg-transparent p-5 pt-8">
       {/* Logo */}
       <div className="flex items-center gap-2.5 mb-8">
-        <img src="/bloby.png" alt={botName} className="h-7 w-auto" />
+        <img src="/morphy.png" alt={botName} className="h-7 w-auto" />
         <span className="font-bold text-lg" style={{ fontFamily: "'Space Grotesk', sans-serif" }}>{botName}</span>
       </div>
 
@@ -40,7 +40,7 @@ export default function Sidebar({ userName, botName = 'Bloby', backendStatus = '
           <h2
             className="text-4xl font-bold mt-0.5 tracking-tight leading-[1.08] w-fit"
             style={{
-              backgroundImage: 'linear-gradient(to right, #4FF2FE, #BC20DE, #FE546B)',
+              backgroundImage: 'linear-gradient(to right, #0166FF, #009AFE, #4AEEFF)',
               WebkitBackgroundClip: 'text',
               WebkitTextFillColor: 'transparent',
               backgroundClip: 'text',

package/workspace/client/src/components/deleteme_onboarding/tour-theme.css

@@ -28,7 +28,7 @@
 }
 
 .bloby-tour-popover .driver-popover-next-btn {
-  background: linear-gradient(to right, #4FF2FE, #BC20DE, #FE546B) !important;
+  background: linear-gradient(to right, #0166FF, #009AFE, #4AEEFF) !important;
   color: #fff !important;
   border: none !important;
   border-radius: 8px !important;

package/workspace/client/src/styles/globals.css

@@ -10,7 +10,7 @@
   --color-card-foreground: #f5f5f5;
   --color-popover: #2a2a2a;
   --color-popover-foreground: #f5f5f5;
-  --color-primary: #3C8FFF;
+  --color-primary: #0069FE;
   --color-primary-foreground: #ffffff;
   --color-secondary: #333333;
   --color-secondary-foreground: #f5f5f5;
@@ -22,20 +22,20 @@
   --color-destructive-foreground: #ffffff;
   --color-border: #3a3a3a;
   --color-input: #3a3a3a;
-  --color-ring: #3C8FFF;
-  --color-chart-1: #3C8FFF;
+  --color-ring: #0069FE;
+  --color-chart-1: #0069FE;
   --color-chart-2: #FD486B;
   --color-chart-3: #F59E0B;
   --color-chart-4: #8B5CF6;
   --color-chart-5: #10B981;
   --color-sidebar: #1c1c1c;
   --color-sidebar-foreground: #f5f5f5;
-  --color-sidebar-primary: #3C8FFF;
+  --color-sidebar-primary: #0069FE;
   --color-sidebar-primary-foreground: #ffffff;
   --color-sidebar-accent: #282828;
   --color-sidebar-accent-foreground: #f5f5f5;
   --color-sidebar-border: #3a3a3a;
-  --color-sidebar-ring: #3C8FFF;
+  --color-sidebar-ring: #0069FE;
   --radius: 0.75rem;
 }
 
@@ -55,7 +55,7 @@ body {
 }
 
 ::selection {
-  background-color: rgba(175, 39, 227, 0.25);
+  background-color: rgba(0, 105, 254, 0.25);
 }
 
 ::-webkit-scrollbar { width: 6px; }
@@ -68,16 +68,16 @@ body {
   -webkit-background-clip: text;
   color: transparent;
   -webkit-text-fill-color: transparent;
-  background-image: linear-gradient(135deg, #04D1FE, #AF27E3, #FB4072);
+  background-image: linear-gradient(135deg, #0166FF, #009AFE, #4AEEFF);
 }
 
 .bg-gradient-brand {
-  background-image: linear-gradient(135deg, #04D1FE, #AF27E3, #FB4072);
+  background-image: linear-gradient(135deg, #0166FF, #009AFE, #4AEEFF);
 }
 
 .glow-border {
-  box-shadow: 0 0 0 1px rgba(175, 39, 227, 0.1),
-              0 0 20px -5px rgba(175, 39, 227, 0.15);
+  box-shadow: 0 0 0 1px rgba(0, 105, 254, 0.1),
+              0 0 20px -5px rgba(0, 105, 254, 0.15);
 }
 
 .animated-border {
@@ -90,10 +90,10 @@ body {
   inset: -150%;
   background: conic-gradient(
     from 0deg,
-    #04D1FE,
-    #AF27E3,
-    #FB4072,
-    #04D1FE
+    #0166FF,
+    #009AFE,
+    #4AEEFF,
+    #0166FF
   );
   animation: border-spin 3s linear infinite;
 }
@@ -107,10 +107,10 @@ body {
 }
 
 .input-glow:focus {
-  border-color: rgba(175, 39, 227, 0.4);
-  box-shadow: 0 0 0 1px rgba(175, 39, 227, 0.15),
-              0 0 20px -5px rgba(175, 39, 227, 0.25),
-              0 0 4px -1px rgba(4, 209, 254, 0.1);
+  border-color: rgba(0, 105, 254, 0.4);
+  box-shadow: 0 0 0 1px rgba(0, 105, 254, 0.15),
+              0 0 20px -5px rgba(0, 105, 254, 0.25),
+              0 0 4px -1px rgba(74, 238, 255, 0.1);
 }
 
 @keyframes border-spin {

package/workspace/skills/mac/SKILL.md

@@ -0,0 +1,222 @@
+# Mac (Morphy notch)
+
+## What This Is
+
+A channel for replying to your human **on their Mac**, through the **Morphy companion app** that lives in the MacBook notch. You speak a short reply (TTS) and *optionally* push a small HTML+CSS card into the notch — same beat as the audio. No pull, no schedule, no state to maintain. Pure output channel.
+
+The notch's bottom slot is rendered with a sandboxed `WKWebView`. You're not building a webpage; you're hand-rolling a single ~9.4 cm² glance card.
+
+---
+
+## When To Use This Skill
+
+Activate when the **user message starts with `[Mac]`**. Don't apply it to other inbound traffic (WhatsApp, Alexa, web chat). Specifically:
+
+- `[Mac] what's on my calendar today?` → activate
+- `[Mac] what time is it in Tokyo?` → activate
+- `what's on my calendar today?` (no tag) → ignore this skill, reply as usual
+
+The tag is injected by the Morphy app itself when the human pushes-to-talk through Morphy, so by the time you see `[Mac]` it means **your reply will be spoken back at them**. Optimize for the ear, supplement with the eye.
+
+---
+
+## Output Format
+
+Your full reply lives inside the conversation; Morphy will:
+
+1. Strip any `<notch_html>…</notch_html>` block before TTS — the HTML is **never** spoken.
+2. Send the remaining text to ElevenLabs and play it through the Mac.
+3. Set the snippet on `NotchSnippetManager`, which auto-opens the notch downward **at the same moment** the audio starts. Visual + audio land together — that's the whole point.
+
+So a reply has up to two parts:
+
+```
+<concise spoken sentence>
+<notch_html>
+  <single rendered card>
+</notch_html>
+```
+
+### Spoken text rules
+
+- **One or two sentences max.** It's audio, not prose. The human is mid-task when this plays — don't make them stand still for a paragraph.
+- **No markdown, no bullet lists, no enumerations.** TTS reads symbols literally and it sounds awful.
+- **Refer the human by name** if you know it ("Here's your calendar for today, Bruno.") — sounds personal, doesn't add length.
+- **Acknowledge the card when you send one.** Otherwise the visual feels disconnected from the voice. "Here it is.", "I put the details up top.", "Tap to glance.".
+
+### The optional `<notch_html>` block
+
+- **Sometimes useful, sometimes not.** Decide per reply. A time-of-day answer doesn't need a card. A calendar, a list, a comparison, a status — those benefit from one.
+- **Discuss with your human** which question categories *always* deserve a card, and pin those as files in `frequentSnippets/` so you can copy-swap-send instead of regenerating.
+- **The card is read-only.** Morphy's notch window ignores mouse events. Don't put buttons, links, hover states, or "click to expand". It's a glance surface.
+
+---
+
+## The Canvas
+
+| Constraint | Value |
+|---|---|
+| **Width** | **383 points** (fixed) |
+| **Height** | **~147 points** (fixed; bottom is inset to clear the pill's rounded corners) |
+| **Background** | **Transparent**. Sits directly on a **black** pill. Plan accordingly — black is your canvas. |
+| **Font** | System (`-apple-system, BlinkMacSystemFont, system-ui`) is preloaded. Override only if you need a monospaced number or display weight. |
+| **Color** | White or light. Use `rgba(255,255,255,0.x)` for tints — opacity tints read better than gray on black. |
+| **Allowed** | HTML, CSS (incl. flexbox, grid, gradients, transitions, animations), unicode glyphs / emoji. |
+| **Forbidden** | JS that does network or file access, `<img src="https://...">`, `<iframe>`, anything that loads external resources. The view has no network. |
+| **Interactivity** | None. No clicks, no hovers, no scroll. Pretend it's a printed sticker. |
+
+**383 × 147 is small.** Roughly the size of two stacked Spotlight rows. Treat each card as a single coherent idea — date + time, one event, one fact, one comparison. If you can't fit it, paginate via speech ("here's the first, ask 'next' for the rest"), don't shrink the type.
+
+### Space tips
+
+- **Two-column grids** with `display: flex; gap: 8px` are very effective at ~190pt per column.
+- **A divider line** (`rgba(255,255,255,0.08)`, 1px) under a header separates regions without visually crowding.
+- **Tabs / pagination** can be visual-only (a row of dots indicating "1 of 3"); say "next" in the audio and resend a fresh snippet for page 2.
+- **Don't outline the card.** The black pill is already the frame.
+- **12–14px is the smallest comfortable size** on a Retina notch. Below that, antialiasing makes white text on black smear.
+
+---
+
+## Frequent Snippets
+
+`workspace/skills/mac/frequentSnippets/*.html` — pre-built cards. When your human asks something you've answered before, **don't regenerate** the markup. Read the file, replace placeholders, paste into `<notch_html>…</notch_html>`. Saves tokens, lowers latency, lets the visual feel land at the same beat as the voice.
+
+**Workflow:**
+
+1. First time the human asks "what's on my calendar today?" — generate a card from scratch, show it, ask: *"Want me to save this as a template for next time?"*
+2. If yes, write it to `frequentSnippets/calendar-today.html` with `{{placeholders}}` for the dynamic bits.
+3. Next time the same question comes in, `Read` the file, do a simple string-replace on the placeholders, paste the result into `<notch_html>…</notch_html>`.
+
+Use `{{double_curly}}` placeholders so they're easy to grep and unambiguous. Keep file names kebab-cased and intent-named (`calendar-today.html`, `weather-now.html`, `pomodoro-status.html`).
+
+Starter snippets in this skill (read them to see the style):
+
+- `frequentSnippets/calendar-today.html` — day + date hero, event list, "no events" empty state.
+- `frequentSnippets/info-card.html` — two-column key/value card.
+- `frequentSnippets/single-stat.html` — one big number, one supporting line.
+
+You're encouraged to **discuss the snippet design with your human** — they see it every day, they'll have opinions on density, accent color, what to lead with. Keep the file in sync with what they tell you. Treat each `.html` as a small product surface.
+
+---
+
+## Examples
+
+### Example 1 — Calendar (with card)
+
+> **Human:** `[Mac] what's on my calendar today?`
+> **You (full reply):**
+> ```
+> Here's your day, Bruno. Stand-up at 10, design review at 2, nothing after 4.
+> <notch_html>
+> <div style="padding:12px 16px;display:flex;flex-direction:column;gap:8px;height:100%;box-sizing:border-box">
+>   <div style="display:flex;align-items:baseline;gap:8px">
+>     <div style="font-size:22px;font-weight:700">Thu</div>
+>     <div style="font-size:13px;opacity:0.55">May 28</div>
+>   </div>
+>   <div style="height:1px;background:rgba(255,255,255,0.08)"></div>
+>   <div style="display:flex;justify-content:space-between;font-size:11px">
+>     <span style="opacity:0.7">10:00 · Stand-up</span>
+>     <span style="opacity:0.4">30m</span>
+>   </div>
+>   <div style="display:flex;justify-content:space-between;font-size:11px">
+>     <span style="opacity:0.7">14:00 · Design review</span>
+>     <span style="opacity:0.4">1h</span>
+>   </div>
+> </div>
+> </notch_html>
+> ```
+
+Morphy speaks "Here's your day, Bruno…" while the card slides into the notch.
+
+### Example 2 — Quick fact (no card)
+
+> **Human:** `[Mac] what time is it in Tokyo?`
+> **You (full reply):**
+> ```
+> It's 8:14 PM in Tokyo.
+> ```
+
+A bare fact doesn't earn screen real estate. Speak it, move on.
+
+### Example 3 — Comparison (card with two columns)
+
+> **Human:** `[Mac] which is better for our use case, Postgres or SQLite?`
+> **You:**
+> ```
+> For your use case, Bruno, Postgres edges it out for the concurrent writes. Quick side-by-side up top.
+> <notch_html>
+> <div style="padding:12px 16px;display:flex;gap:10px;height:100%;box-sizing:border-box">
+>   <div style="flex:1;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,0.05)">
+>     <div style="font-size:10px;opacity:0.5;text-transform:uppercase;letter-spacing:.5px">Postgres</div>
+>     <div style="font-size:13px;font-weight:700;margin-top:2px">Concurrent ✓</div>
+>     <div style="font-size:10px;opacity:0.5;margin-top:4px">Heavier setup</div>
+>   </div>
+>   <div style="flex:1;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,0.05)">
+>     <div style="font-size:10px;opacity:0.5;text-transform:uppercase;letter-spacing:.5px">SQLite</div>
+>     <div style="font-size:13px;font-weight:700;margin-top:2px">Single-writer</div>
+>     <div style="font-size:10px;opacity:0.5;margin-top:4px">Zero setup</div>
+>   </div>
+> </div>
+> </notch_html>
+> ```
+
+### Example 4 — Pagination via voice (long list)
+
+> **Human:** `[Mac] read me my unread emails.`
+> **You:** *(reply 1)*
+> ```
+> Three of seven worth a glance, Bruno. First: Alex about the migration. Say "next" for the rest.
+> <notch_html>
+> <div style="padding:10px 14px;display:flex;flex-direction:column;gap:6px;height:100%;box-sizing:border-box">
+>   <div style="display:flex;justify-content:space-between;align-items:baseline">
+>     <div style="font-size:13px;font-weight:700">Unread mail</div>
+>     <div style="font-size:9px;opacity:0.45">1 / 3</div>
+>   </div>
+>   <div style="height:1px;background:rgba(255,255,255,0.08)"></div>
+>   <div style="font-size:11px"><b>Alex Chen</b> · Migration plan</div>
+>   <div style="font-size:10px;opacity:0.6">"…can we move the cutover to Tue?"</div>
+> </div>
+> </notch_html>
+> ```
+> *(human says "next" → reply 2 with `1 / 3` swapped for `2 / 3` and the next email's body)*
+
+---
+
+## What Not To Do
+
+- ❌ **No long monologues.** If you can't say it in two sentences, you're either over-explaining or you should make the card carry it.
+- ❌ **No reading the card aloud.** The card and the speech complement each other; don't make them redundant.
+- ❌ **No external assets.** `<img src="https://…">`, `<link href="…">`, Google Fonts, none of it loads.
+- ❌ **No interactive elements.** Buttons render but do nothing — they read as broken UI. Drop them.
+- ❌ **No light backgrounds.** The pill is black. White text on a white card looks like a missing texture.
+- ❌ **No emoji as primary content** unless it's the answer. They render small at 12px and lose meaning.
+- ❌ **Don't send a card "just because"** if the answer is a bare fact. The card should add something the voice can't carry — structure, list, comparison, status.
+
+---
+
+## Reply Checklist
+
+Before you send:
+
+1. **Did I open with the `[Mac]` recognition?** (Tag matched → use this skill.)
+2. **Is the spoken text ≤ 2 sentences and free of markdown?**
+3. **If I'm sending a card, does it add structure the voice can't carry?**
+4. **Does my voice acknowledge the card if I sent one?** ("Here it is.", "Pinned it up top.", etc.)
+5. **Did I check `frequentSnippets/` for a template that matches?**
+6. **Is the card ≤ 383×147pt, transparent-on-black, white text, no external assets?**
+7. **If I'm offering to save the snippet for next time, did I say so plainly?**
+
+---
+
+## Quick Reference
+
+| Thing | Where / how |
+|---|---|
+| Tag that activates this skill | `[Mac]` at the start of the user message |
+| Snippet wrapping tag | `<notch_html>…</notch_html>` (singular, anywhere in your reply) |
+| Canvas size | **383 × 147 pt**, transparent over **black** |
+| Snippet library | `workspace/skills/mac/frequentSnippets/*.html` |
+| TTS engine | ElevenLabs (Morphy handles it; you just write the words) |
+| Stripped from speech | Anything inside `<notch_html>…</notch_html>` (case-insensitive, multi-line) |
+| Auto-opens notch? | Yes — set snippet ⇒ notch slides down automatically as audio starts |
+| Auto-clears? | When the human triggers the next push-to-talk, or after 30 s |

package/workspace/skills/mac/frequentSnippets/calendar-today.html

@@ -0,0 +1,22 @@
+<!--
+  calendar-today.html
+  Placeholders:
+    {{weekday_short}}   e.g. "Thu"
+    {{date_label}}      e.g. "May 28"
+    {{events_html}}     a sequence of <div>…</div> rows OR the empty-state div.
+  Empty-state row:
+    <div style="font-size:11px;opacity:0.45;text-align:center;margin-top:14px">No events today.</div>
+  Event row (repeat):
+    <div style="display:flex;justify-content:space-between;font-size:11px">
+      <span style="opacity:0.75">{{time}} · {{title}}</span>
+      <span style="opacity:0.4">{{duration}}</span>
+    </div>
+-->
+<div style="padding:12px 16px;display:flex;flex-direction:column;gap:8px;height:100%;box-sizing:border-box">
+  <div style="display:flex;align-items:baseline;gap:8px">
+    <div style="font-size:22px;font-weight:700">{{weekday_short}}</div>
+    <div style="font-size:13px;opacity:0.55">{{date_label}}</div>
+  </div>
+  <div style="height:1px;background:rgba(255,255,255,0.08)"></div>
+  {{events_html}}
+</div>

package/workspace/skills/mac/frequentSnippets/info-card.html

@@ -0,0 +1,27 @@
+<!--
+  info-card.html  —  generic two-column key/value glance card.
+  Placeholders:
+    {{title}}        bold header, e.g. "Connection"
+    {{subtitle}}     small muted line under header, OPTIONAL ("" if none)
+    {{left_label}}   e.g. "Latency"
+    {{left_value}}   e.g. "42 ms"
+    {{right_label}}  e.g. "Loss"
+    {{right_value}}  e.g. "0%"
+-->
+<div style="padding:12px 16px;display:flex;flex-direction:column;gap:8px;height:100%;box-sizing:border-box">
+  <div>
+    <div style="font-size:13px;font-weight:700">{{title}}</div>
+    <div style="font-size:10px;opacity:0.5;margin-top:1px">{{subtitle}}</div>
+  </div>
+  <div style="height:1px;background:rgba(255,255,255,0.08)"></div>
+  <div style="display:flex;gap:10px">
+    <div style="flex:1;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,0.05)">
+      <div style="font-size:9px;opacity:0.5;text-transform:uppercase;letter-spacing:.5px">{{left_label}}</div>
+      <div style="font-size:14px;font-weight:700;margin-top:2px">{{left_value}}</div>
+    </div>
+    <div style="flex:1;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,0.05)">
+      <div style="font-size:9px;opacity:0.5;text-transform:uppercase;letter-spacing:.5px">{{right_label}}</div>
+      <div style="font-size:14px;font-weight:700;margin-top:2px">{{right_value}}</div>
+    </div>
+  </div>
+</div>

package/workspace/skills/mac/frequentSnippets/single-stat.html

@@ -0,0 +1,13 @@
+<!--
+  single-stat.html  —  one big number, one supporting line. Use for time,
+  countdown, temperature, percent, exchange rate, etc.
+  Placeholders:
+    {{label}}        small uppercase tag at top, e.g. "TOKYO"
+    {{value}}        the hero number/string, e.g. "20:14"
+    {{caption}}      muted line under value, e.g. "Thu, May 28"
+-->
+<div style="padding:14px 18px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:4px;height:100%;box-sizing:border-box">
+  <div style="font-size:9px;opacity:0.5;text-transform:uppercase;letter-spacing:1px">{{label}}</div>
+  <div style="font-size:38px;font-weight:200;line-height:1;font-feature-settings:'tnum' on">{{value}}</div>
+  <div style="font-size:11px;opacity:0.55">{{caption}}</div>
+</div>

package/workspace/skills/mac/skill.json

@@ -0,0 +1,15 @@
+{
+  "name": "mac",
+  "version": "1.0.0",
+  "type": "skill",
+  "bloby_human": "Bruno Bertapeli",
+  "bloby": "bloby-bruno",
+  "author": "newbot-official",
+  "description": "Morphy native macOS companion. Activates on the [Mac] tag. Output is a concise spoken reply (TTS); optionally accompany it with a <notch_html>…</notch_html> visual card rendered inside the MacBook notch (383×147pt, transparent over black). Frequent snippets are cached in workspace/skills/mac/frequentSnippets/ for instant re-use.",
+  "depends": [],
+  "env_keys": [],
+  "has_telemetry": false,
+  "size": "8KB",
+  "contains_binaries": false,
+  "tags": ["mac", "morphy", "notch", "macos", "voice", "tts", "visual", "html"]
+}