bloby-bot 0.51.4 → 0.52.0

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/harnesses/claude.ts

@@ -77,6 +77,9 @@ interface LiveConversation {
   onMessage: (type: string, data: any) => void;
   /** True while the model is actively processing (between message push and result) */
   busy: boolean;
+  /** Messages pushed but not yet completed (1 result per message). Used to know when
+   *  the session is truly idle — i.e. no queued message — so it's safe to recycle. */
+  pendingCount: number;
 }
 
 const liveConversations = new Map<string, LiveConversation>();
@@ -217,6 +220,12 @@ async function buildConversationOptions(
     mcpServers,
     agents,
     agentProgressSummaries: true,
+    // Auto-compaction: the live conversation is a single long-lived query() whose
+    // context grows every turn (messages + tool results + sub-agent transcripts).
+    // Enable it explicitly via inline settings so it does NOT depend on filesystem
+    // settings.json being present — when context fills, the SDK summarizes older
+    // history and continues instead of hitting the hard context wall.
+    settings: { autoCompactEnabled: true },
     env: {
       ...process.env as Record<string, string>,
       CLAUDE_CODE_OAUTH_TOKEN: oauthToken,
@@ -297,6 +306,7 @@ export async function startConversation(
     queryHandle: null,
     onMessage,
     busy: false,
+    pendingCount: 0,
   };
   liveConversations.set(conversationId, conv);
 
@@ -369,7 +379,26 @@ export async function startConversation(
             // Signal turn complete — backend restart + UI update
             const FILE_TOOLS = ['Write', 'Edit'];
             const usedFileTools = FILE_TOOLS.some((t) => usedTools.has(t));
-            onMessage('bot:turn-complete', { conversationId, usedFileTools });
+
+            // Context-size signal for the orchestrator's proactive session recycling.
+            // Prefer modelUsage (carries the per-model contextWindow); fall back to raw usage.
+            let contextTokens = 0;
+            let contextWindow = 0;
+            const modelUsage = (msg as any).modelUsage as Record<string, any> | undefined;
+            if (modelUsage) {
+              for (const mu of Object.values(modelUsage)) {
+                const used = (mu?.inputTokens || 0) + (mu?.cacheReadInputTokens || 0) + (mu?.cacheCreationInputTokens || 0);
+                if (used > contextTokens) { contextTokens = used; contextWindow = mu?.contextWindow || 0; }
+              }
+            }
+            if (!contextTokens) {
+              const u = (msg as any).usage || {};
+              contextTokens = (u.input_tokens || 0) + (u.cache_read_input_tokens || 0) + (u.cache_creation_input_tokens || 0);
+            }
+            // One result per pushed message → decrement; idle when nothing else is queued.
+            conv.pendingCount = Math.max(0, (conv.pendingCount || 0) - 1);
+            const idle = conv.pendingCount === 0;
+            onMessage('bot:turn-complete', { conversationId, usedFileTools, contextTokens, contextWindow, idle });
 
             // Reset per-turn state
             usedTools.clear();
@@ -482,6 +511,7 @@ export function pushMessage(
 
   const userMessage = buildUserMessage(content, attachments, savedFiles);
   conv.busy = true;
+  conv.pendingCount = (conv.pendingCount || 0) + 1;
   conv.inputQueue.push(userMessage);
 
   // Emit typing indicator

package/supervisor/harnesses/codex.ts

@@ -483,7 +483,16 @@ function handleNotification(conv: CodexConversation, n: { method: string; params
         conv.onMessage('bot:done', { conversationId: conv.id, usedFileTools: conv.usedFileTools });
         teardownConversation(conv.id);
       } else {
-        conv.onMessage('bot:turn-complete', { conversationId: conv.id, usedFileTools: conv.usedFileTools });
+        // Context-size signal for the orchestrator's proactive session recycling.
+        // The codex app-server reports token usage on turn/completed; field names vary
+        // across versions, so probe defensively (0 if absent → falls back to codex's
+        // own built-in auto-compaction).
+        const tu: any = p.turn?.usage || p.usage || {};
+        const contextTokens = tu.input_tokens ?? tu.inputTokens ?? tu.total_tokens ?? tu.totalTokens ?? tu.tokens ?? 0;
+        const contextWindow = tu.context_window ?? tu.contextWindow ?? 0;
+        // idle = no message queued behind this turn (the drain happens just below).
+        const idle = conv.pendingInputs.length === 0;
+        conv.onMessage('bot:turn-complete', { conversationId: conv.id, usedFileTools: conv.usedFileTools, contextTokens, contextWindow, idle });
 
         // Drain any messages that were submitted while we were busy.
         const next = conv.pendingInputs.shift();
@@ -558,6 +567,11 @@ async function spawnAndInitialize(
     log.info(`[codex] init conversation ${conversationId} (model=${modelId}${effort ? `, effort=${effort}` : ''})`);
     await rpc.request('initialize', { clientInfo: CLIENT_INFO });
     rpc.notify('initialized', {});
+    // Context auto-compaction is ON by default in the codex app-server: when the
+    // thread's token count crosses the model's threshold it compacts history in
+    // place (emitting a `contextCompaction` item) and continues — no flag needed
+    // here. A manual trigger also exists (`thread/compact/start`) if we ever want
+    // to force it from the UI.
     const startResult = await rpc.request<{ thread: { id: string } }>('thread/start', {
       cwd: WORKSPACE_DIR,
       model: modelId,

package/supervisor/index.ts

@@ -31,6 +31,19 @@ import { ChannelManager } from './channels/manager.js';
 const DIST_BLOBY = path.join(PKG_DIR, 'dist-bloby');
 const SUPERVISOR_PUBLIC = path.join(PKG_DIR, 'supervisor', 'public');
 
+// Proactive context recycling. The chat runs as one long-lived agent session per
+// conversation (so the user can keep talking while the agent works). That session's
+// context grows every turn and would eventually hit the wall. But continuity does NOT
+// live in that session — every fresh session re-injects the recent messages + memory
+// files — so when the context grows large AND the agent is idle, we end the session;
+// the next message starts a clean one. This keeps heavy/long chats off the wall
+// without lossy compaction, while preserving mid-turn responsiveness (we only recycle
+// between turns). When the harness reports the model's context window we recycle at
+// RECYCLE_FRACTION of it (adaptive to 200k vs 1M windows); otherwise we fall back to a
+// fixed token budget. Auto-compaction stays on as the in-turn safety net.
+const CONTEXT_RECYCLE_TOKENS = Number(process.env.BLOBY_CONTEXT_RECYCLE_TOKENS) || 140_000;
+const CONTEXT_RECYCLE_FRACTION = Number(process.env.BLOBY_CONTEXT_RECYCLE_FRACTION) || 0.7;
+
 // Platform assets that must survive workspace swaps — served directly by supervisor
 const PLATFORM_ASSETS = new Set([
   '/spritesheet.webp',
@@ -502,7 +515,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 +534,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 +546,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 +575,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 +587,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 +993,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 +1011,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 +1029,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 +1040,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}
 
@@ -1429,7 +1442,7 @@ mint();
             try {
               const [status, recentRaw] = await Promise.all([
                 workerApi('/api/onboard/status'),
-                workerApi(`/api/conversations/${convId}/messages/recent?limit=20`),
+                workerApi(`/api/conversations/${convId}/messages/recent?limit=30`),
               ]);
               botName = status.agentName || 'Bloby';
               humanName = status.userName || 'Human';
@@ -1894,6 +1907,22 @@ mint();
           endConversation(convId);
           runDeferredUpdate();
         }
+
+        // Proactive session recycling (see CONTEXT_RECYCLE_TOKENS). Only when the
+        // harness reports the session idle (no queued message) — and this handler runs
+        // synchronously from the harness callback, so nothing can be pushed between the
+        // idle check and endConversation. Recycling here therefore never drops a queued
+        // message; the next user message re-injects recent history + memory.
+        if (eventData.idle && hasConversation(convId)) {
+          const used = typeof eventData.contextTokens === 'number' ? eventData.contextTokens : 0;
+          const window = typeof eventData.contextWindow === 'number' ? eventData.contextWindow : 0;
+          const recycleAt = window > 0 ? Math.floor(window * CONTEXT_RECYCLE_FRACTION) : CONTEXT_RECYCLE_TOKENS;
+          if (used > recycleAt) {
+            log.info(`[orchestrator] Context ~${used} tok > ${recycleAt} (window=${window || 'n/a'}) — recycling session ${convId}; next message re-injects recent + memory.`);
+            endConversation(convId);
+          }
+        }
+
         broadcastBloby('bot:idle', { conversationId: convId });
         return;
       }
@@ -2227,7 +2256,7 @@ mint();
             try {
               const [status, recentRaw] = await Promise.all([
                 workerApi('/api/onboard/status') as Promise<any>,
-                workerApi(`/api/conversations/${convId}/messages/recent?limit=20`) as Promise<any[]>,
+                workerApi(`/api/conversations/${convId}/messages/recent?limit=30`) as Promise<any[]>,
               ]);
               botName = status.agentName || 'Bloby';
               humanName = status.userName || 'Human';

package/worker/prompts/bloby-system-prompt.txt

@@ -279,7 +279,7 @@ If your human asks you to update a skill's behavior, edit the files INSIDE `skil
 You can communicate through several surfaces at once. The two built-in ones are:
 
 - **`[PWA]`** — the chat bubble in the dashboard (web app / PWA). This is the main one: the floating Bloby widget your human clicks open, the conversation you're reading right now if no other tag is present. Treat it as your home base.
-- **`[Mac]`** — the Morphy native Mac app living in the MacBook notch. Your human held a hotkey, spoke, and Morphy sent the transcript here. Screenshots of their screen may be attached. Keep replies concise — they'll be spoken aloud via TTS. No markdown, no bullet lists — plain spoken sentences only.
+- **`[Mac]`** — the Morphy native Mac app living in the MacBook notch. Your human held a hotkey, spoke, and Morphy sent the transcript here. Screenshots of their screen may be attached. Keep replies concise — they'll be spoken aloud via TTS. No markdown, no bullet lists — plain spoken sentences only. You may **optionally** accompany the reply with a small visual card in the notch, two ways: **(1) a PRESET (preferred)** — send structured data and Morphy renders a beautiful, on-brand card for you: `<notch_card type="email">{ "from": "...", "subject": "...", "time": "...", "body": "..." }</notch_card>`. Preset types: `email`, `list`, `calendar`, `weather`, `ticker`, `stat`, `info`, `text`, `comparison` (full schemas in `skills/mac/presets/PRESETS.md`). The body is one JSON object; you never write CSS. **(2) CUSTOM (escape hatch)** — for a bespoke *visual layout* you hand-build with real markup, use `<notch_html>…</notch_html>` (lowercase, exactly that spelling — NOT `<NotchHTML>`, NOT `<notch>`). For long prose / a "read me this" / a summary, use the `text` PRESET instead — never dump plain paragraphs into `<notch_html>`, it's HTML (not a text box) and renders unstyled and edge-to-edge. Send **at most one** card block per reply (a `<notch_card>` OR a `<notch_html>`, never both). Both tags are stripped from TTS, so card contents are **never** spoken. Canvas is **fixed 383 × 147 pt, transparent over BLACK**; custom cards use light/white text, no external assets (no `<img src>`, no fonts, no JS network) and no interactive elements (clicks do nothing) — though long content IS scrollable, the user scrolls it with the trackpad, so letting content overflow is fine. **CRITICAL: never speak the contents of your card.** If the card carries a list / calendar / email / news / comparison / any structured answer, the spoken text MUST be a short lead-in ONLY ("Here are today's top five, Bruno.") and then stop — do not recite the items, the human is already looking at them. If the answer fits in one spoken sentence, send NO card. Voice and card are complementary, never redundant — pick which one carries the detail per reply, and let the other be brief or absent. When in doubt, **open `skills/mac/SKILL.md` and follow it** — it has the preset catalog, examples (including the canonical bad/good comparison of the speak-the-card duplication failure), custom templates under `skills/mac/frequentSnippets/`, and a pre-send checklist. **Mis-spelling a tag means the markup reaches TTS and gets spoken at the human** — that's a visible failure, not a silent one.
 - **`[workspace]`** — a chat-shaped widget your human placed somewhere inside their dashboard *workspace*. It mirrors the main chat, but the context is whatever the human (or you) built it into. It could be a magic-mirror panel on a tablet on the wall, a kiosk/DAC by the front door, a desk dashboard, a car-mounted display, a kitchen screen during cooking — anything you've ever helped them assemble on the workspace that has a chat-style entry point. **Check `MEMORY.md` and the workspace files** to learn the actual purpose of the device this message came from: is this the kitchen tablet asking for a recipe? The hallway mirror asking what's on today's schedule? The garage panel asking about the car? Tailor tone, brevity, and content to that role. A magic mirror should get a short ambient answer, not a long technical paragraph. If you don't yet know what the workspace surface is for, ask once and write it to memory so future `[workspace]` turns are grounded.
 
 Beyond those, your human can install additional channels (WhatsApp, Telegram, Discord, Alexa…) as **skills** from the Bloby Marketplace. Each channel skill teaches you the conventions for that surface.

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/Sidebar.tsx

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