From fccf0d946e7f95f7e0de9d8acb16024cb31254df Mon Sep 17 00:00:00 2001
From: Oscar Hong <oscar.hong2015@gmail.com>
Date: Tue, 2 Jun 2026 00:12:47 -0700
Subject: [PATCH 01/15] refactor: simplify message and push presentation

---
 apps/web/app/(app)/post/new/CopyCommand.tsx   |  44 +--
 apps/web/components/app/feed/FeedList.tsx     |  12 +-
 .../app/messages/MessagePresentation.tsx      | 227 +++++++++++++++
 .../components/app/messages/MessagesInbox.tsx | 274 ++----------------
 .../components/app/messages/message-utils.ts  |  46 +++
 .../components/app/profile/InviteButton.tsx   |  13 +-
 apps/web/components/landing/Hero.tsx          |  29 +-
 apps/web/lib/utils/useClipboardFeedback.ts    |  34 +++
 packages/cli/src/commands/push-output.ts      |  67 +++++
 packages/cli/src/commands/push.ts             |  51 +---
 10 files changed, 438 insertions(+), 359 deletions(-)
 create mode 100644 apps/web/components/app/messages/MessagePresentation.tsx
 create mode 100644 apps/web/components/app/messages/message-utils.ts
 create mode 100644 apps/web/lib/utils/useClipboardFeedback.ts
 create mode 100644 packages/cli/src/commands/push-output.ts

diff --git a/apps/web/app/(app)/post/new/CopyCommand.tsx b/apps/web/app/(app)/post/new/CopyCommand.tsx
index 1c99f6c8..0b203486 100644
--- a/apps/web/app/(app)/post/new/CopyCommand.tsx
+++ b/apps/web/app/(app)/post/new/CopyCommand.tsx
@@ -1,50 +1,26 @@
 "use client";
 
-import { useCallback, useState } from "react";
+import { Check, Copy } from "lucide-react";
+import { useClipboardFeedback } from "@/lib/utils/useClipboardFeedback";
 
 export function CopyCommand({ command }: { command: string }) {
-  const [copied, setCopied] = useState(false);
-
-  const copy = useCallback(() => {
-    navigator.clipboard.writeText(command).then(() => {
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    });
-  }, [command]);
+  const { copied, copyText } = useClipboardFeedback();
 
   return (
     <button
-      onClick={copy}
+      type="button"
+      onClick={() => void copyText(command)}
       className="group/copy inline-flex items-center gap-2 rounded border border-border bg-subtle px-4 py-2 font-[family-name:var(--font-mono)] text-sm transition-[border-color,background-color] duration-150 hover:border-foreground/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-background"
     >
       <span>{command}</span>
       {copied ? (
-        <svg
-          className="h-4 w-4 text-accent"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-          strokeWidth={2}
-          aria-hidden="true"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            d="M5 13l4 4L19 7"
-          />
-        </svg>
+        <Check size={16} className="text-accent" aria-hidden="true" />
       ) : (
-        <svg
-          className="h-4 w-4 opacity-50 transition-opacity group-hover/copy:opacity-100"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-          strokeWidth={2}
+        <Copy
+          size={16}
+          className="opacity-50 transition-opacity group-hover/copy:opacity-100"
           aria-hidden="true"
-        >
-          <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
-          <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" />
-        </svg>
+        />
       )}
     </button>
   );
diff --git a/apps/web/components/app/feed/FeedList.tsx b/apps/web/components/app/feed/FeedList.tsx
index b1ced9c2..850c3c9a 100644
--- a/apps/web/components/app/feed/FeedList.tsx
+++ b/apps/web/components/app/feed/FeedList.tsx
@@ -6,19 +6,13 @@ import { ChevronDown, Copy, Check } from "lucide-react";
 import { ActivityCard } from "./ActivityCard";
 import { PendingPostsNudge } from "./PendingPostsNudge";
 import { cn } from "@/lib/utils/cn";
+import { useClipboardFeedback } from "@/lib/utils/useClipboardFeedback";
 import type { Post } from "@/types";
 
 const SYNC_COMMAND = "npx straude@latest";
 
 function SyncCommandHint() {
-  const [copied, setCopied] = useState(false);
-
-  function handleCopy() {
-    navigator.clipboard.writeText(SYNC_COMMAND).then(() => {
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    });
-  }
+  const { copied, copyText } = useClipboardFeedback();
 
   return (
     <div className="hidden items-center gap-2.5 sm:flex">
@@ -27,7 +21,7 @@ function SyncCommandHint() {
       </span>
       <button
         type="button"
-        onClick={handleCopy}
+        onClick={() => void copyText(SYNC_COMMAND)}
         className="flex items-center gap-2 rounded border border-border bg-background px-3 py-1 font-mono text-xs text-foreground hover:border-accent hover:text-accent transition-colors"
         aria-label="Copy sync command"
       >
diff --git a/apps/web/components/app/messages/MessagePresentation.tsx b/apps/web/components/app/messages/MessagePresentation.tsx
new file mode 100644
index 00000000..3ec5a102
--- /dev/null
+++ b/apps/web/components/app/messages/MessagePresentation.tsx
@@ -0,0 +1,227 @@
+"use client";
+
+import Image from "next/image";
+import { FileText, Loader2, X } from "lucide-react";
+import { cn } from "@/lib/utils/cn";
+import { timeAgo } from "@/lib/utils/format";
+import type { MessageAttachment } from "@/types";
+import {
+  formatFileSize,
+  isImageMime,
+  type LocalDirectMessage,
+  type PendingAttachment,
+} from "./message-utils";
+
+function AttachmentLink({
+  attachment,
+  mine,
+}: {
+  attachment: MessageAttachment;
+  mine: boolean;
+}) {
+  return (
+    <a
+      href={attachment.url}
+      target="_blank"
+      rel="noopener noreferrer"
+      download={attachment.name}
+      className={cn(
+        "flex items-center gap-2 rounded-lg px-3 py-2 text-sm",
+        mine ? "bg-white/15 hover:bg-white/25" : "bg-subtle hover:bg-subtle/80",
+      )}
+    >
+      <FileText size={16} className="shrink-0" aria-hidden="true" />
+      <span className="min-w-0 truncate">{attachment.name}</span>
+      <span className={cn("shrink-0 text-xs", mine ? "text-white/70" : "text-muted")}>
+        {formatFileSize(attachment.size)}
+      </span>
+    </a>
+  );
+}
+
+export function MessageBubble({
+  message,
+  currentUserId,
+  onOpenImage,
+}: {
+  message: LocalDirectMessage;
+  currentUserId: string | null;
+  onOpenImage: (url: string) => void;
+}) {
+  const mine = message.sender_id === currentUserId;
+  const attachments = message.attachments ?? [];
+  const imageAttachments = attachments.filter((attachment) =>
+    isImageMime(attachment.type, attachment.name),
+  );
+  const fileAttachments = attachments.filter((attachment) =>
+    !isImageMime(attachment.type, attachment.name),
+  );
+
+  return (
+    <div className={cn("flex", mine ? "justify-end" : "justify-start")}>
+      <div
+        className={cn(
+          "rounded-2xl px-4 py-3",
+          mine ? "bg-accent text-accent-foreground" : "border border-border bg-background",
+        )}
+        style={{ maxWidth: "var(--app-messages-bubble-max-width)" }}
+      >
+        {imageAttachments.length > 0 && (
+          <div className={cn("flex flex-wrap gap-1.5", message.content && "mb-2")}>
+            {imageAttachments.map((attachment) => (
+              <button
+                key={attachment.url}
+                type="button"
+                onClick={() => onOpenImage(attachment.url)}
+                className="relative block overflow-hidden rounded-lg"
+                aria-label={`View ${attachment.name}`}
+              >
+                <Image
+                  src={attachment.url}
+                  alt={attachment.name}
+                  width={96}
+                  height={96}
+                  className="h-[var(--app-messages-attachment-size)] w-[var(--app-messages-attachment-size)] rounded-lg object-cover"
+                  sizes="(max-width: 879px) 80px, 96px"
+                />
+              </button>
+            ))}
+          </div>
+        )}
+
+        {fileAttachments.length > 0 && (
+          <div className={cn("space-y-1.5", message.content && "mb-2")}>
+            {fileAttachments.map((attachment) => (
+              <AttachmentLink key={attachment.url} attachment={attachment} mine={mine} />
+            ))}
+          </div>
+        )}
+
+        {message.content && (
+          <p className="whitespace-pre-wrap text-sm leading-relaxed">
+            {message.content}
+          </p>
+        )}
+
+        <div className={cn("mt-2 flex items-center gap-2 text-xs", mine ? "text-white/70" : "text-muted")}>
+          <span suppressHydrationWarning>{timeAgo(message.created_at)}</span>
+          {mine && message.delivery_status && (
+            <span className="capitalize">{message.delivery_status}</span>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function PendingAttachmentList({
+  attachments,
+  onRemove,
+}: {
+  attachments: PendingAttachment[];
+  onRemove: (index: number) => void;
+}) {
+  if (attachments.length === 0) return null;
+
+  return (
+    <div className="mb-3 flex flex-wrap gap-2">
+      {attachments.map((attachment, index) => (
+        <div key={index} className="group relative">
+          {attachment.preview ? (
+            <div className="relative">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img
+                src={attachment.preview}
+                alt={attachment.file.name}
+                className={cn(
+                  "h-[var(--app-messages-attachment-size)] w-[var(--app-messages-attachment-size)] rounded-lg border border-border object-cover",
+                  attachment.uploading && "opacity-50",
+                )}
+              />
+              {attachment.uploading && (
+                <div className="absolute inset-0 flex items-center justify-center">
+                  <Loader2 size={16} className="animate-spin text-accent" />
+                </div>
+              )}
+            </div>
+          ) : (
+            <div
+              className={cn(
+                "flex h-[var(--app-messages-attachment-size)] items-center gap-2 rounded-lg border border-border bg-subtle px-3",
+                attachment.uploading && "opacity-50",
+              )}
+            >
+              <FileText size={16} className="shrink-0 text-muted" aria-hidden="true" />
+              <div className="min-w-0">
+                <p className="max-w-[120px] truncate text-xs font-medium">
+                  {attachment.file.name}
+                </p>
+                <p className="text-xs text-muted">
+                  {formatFileSize(attachment.file.size)}
+                </p>
+              </div>
+              {attachment.uploading && (
+                <Loader2 size={14} className="animate-spin text-accent" />
+              )}
+            </div>
+          )}
+          {!attachment.uploading && (
+            <button
+              type="button"
+              onClick={() => onRemove(index)}
+              className="absolute -top-1.5 -right-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-foreground text-background text-xs"
+              aria-label={`Remove ${attachment.file.name}`}
+            >
+              <X size={12} />
+            </button>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function MessageImageLightbox({
+  imageUrl,
+  onClose,
+}: {
+  imageUrl: string;
+  onClose: () => void;
+}) {
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-label="Image preview"
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/85"
+      onClick={onClose}
+      onKeyDown={(event) => {
+        if (event.key === "Escape") onClose();
+      }}
+    >
+      <button
+        type="button"
+        onClick={onClose}
+        className="absolute top-4 right-4 z-10 rounded-full bg-white/10 p-2 text-white hover:bg-white/20"
+        aria-label="Close preview"
+        autoFocus
+      >
+        <X size={24} />
+      </button>
+      <div
+        className="relative max-h-[85vh] max-w-[90vw]"
+        style={{ width: "90vw", height: "85vh" }}
+        onClick={(event) => event.stopPropagation()}
+      >
+        <Image
+          src={imageUrl}
+          alt=""
+          fill
+          className="object-contain"
+          sizes="90vw"
+          priority
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/components/app/messages/MessagesInbox.tsx b/apps/web/components/app/messages/MessagesInbox.tsx
index 3e583fa4..87eebde2 100644
--- a/apps/web/components/app/messages/MessagesInbox.tsx
+++ b/apps/web/components/app/messages/MessagesInbox.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useEffect, useMemo, useRef, useState } from "react";
@@ -9,7 +8,7 @@ import {
   useQuery,
   useQueryClient,
 } from "@tanstack/react-query";
-import { ArrowLeft, FileText, Loader2, MessageSquare, Paperclip, X } from "lucide-react";
+import { ArrowLeft, Loader2, MessageSquare, Paperclip } from "lucide-react";
 import { Avatar } from "@/components/ui/Avatar";
 import { Button } from "@/components/ui/Button";
 import { Textarea } from "@/components/ui/Textarea";
@@ -24,6 +23,18 @@ import type {
   DirectMessageThread,
   MessageAttachmentInput,
 } from "@/types";
+import {
+  MessageBubble,
+  MessageImageLightbox,
+  PendingAttachmentList,
+} from "./MessagePresentation";
+import {
+  createPendingAttachment,
+  isImageMime,
+  threadPreview,
+  type LocalDirectMessage,
+  type PendingAttachment,
+} from "./message-utils";
 
 interface ConversationUser {
   id: string;
@@ -32,12 +43,6 @@ interface ConversationUser {
   display_name: string | null;
 }
 
-interface PendingAttachment {
-  file: File;
-  preview?: string;
-  uploading: boolean;
-}
-
 interface ThreadsResponse {
   threads: DirectMessageThread[];
   unread_count: number;
@@ -50,12 +55,6 @@ interface ConversationResponse {
   has_more?: boolean;
 }
 
-type DeliveryStatus = "sending" | "sent" | "failed";
-
-type LocalDirectMessage = DirectMessage & {
-  delivery_status?: DeliveryStatus;
-};
-
 interface SendMessageVariables {
   username: string;
   content: string;
@@ -121,32 +120,6 @@ function updateThreadAfterSend(
   };
 }
 
-function formatFileSize(bytes: number): string {
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-}
-
-const IMAGE_EXTENSIONS = ["jpg", "jpeg", "png", "webp", "gif", "heic", "heif"];
-
-function isImageMime(type: string, fileName?: string): boolean {
-  if (type.startsWith("image/")) return true;
-  if (!fileName) return false;
-  const ext = fileName.split(".").pop()?.toLowerCase();
-  return !!ext && IMAGE_EXTENSIONS.includes(ext);
-}
-
-function threadPreview(thread: DirectMessageThread): string {
-  const prefix = thread.last_message_is_from_me ? "You: " : "";
-  if (thread.last_message_content) {
-    return `${prefix}${thread.last_message_content}`;
-  }
-  if (thread.last_message_has_attachment) {
-    return `${prefix}Sent an attachment`;
-  }
-  return "";
-}
-
 export function MessagesInbox({
   initialUsername,
   initialThreads,
@@ -421,12 +394,7 @@ export function MessagesInbox({
     if (remaining <= 0) return;
     const toAdd = files.slice(0, remaining);
 
-    const newAttachments: PendingAttachment[] = toAdd.map((file) => {
-      const preview = isImageMime(file.type, file.name)
-        ? URL.createObjectURL(file)
-        : undefined;
-      return { file, preview, uploading: false };
-    });
+    const newAttachments = toAdd.map(createPendingAttachment);
 
     setPendingAttachments((prev) => [...prev, ...newAttachments]);
   }
@@ -880,112 +848,14 @@ export function MessagesInbox({
                         </button>
                       </div>
                     )}
-                    {messages.map((message) => {
-                    const mine = message.sender_id === currentUserId;
-                    const attachments = message.attachments ?? [];
-                    const imageAttachments = attachments.filter((a) => isImageMime(a.type, a.name));
-                    const fileAttachments = attachments.filter((a) => !isImageMime(a.type, a.name));
-
-                    return (
-                      <div
+                    {messages.map((message) => (
+                      <MessageBubble
                         key={message.id}
-                        className={cn("flex", mine ? "justify-end" : "justify-start")}
-                      >
-                        <div
-                          className={cn(
-                            "rounded-2xl px-4 py-3",
-                            mine
-                              ? "bg-accent text-accent-foreground"
-                              : "border border-border bg-background"
-                          )}
-                          style={{ maxWidth: "var(--app-messages-bubble-max-width)" }}
-                        >
-                          {/* Image attachments */}
-                          {imageAttachments.length > 0 && (
-                            <div className={cn(
-                              "flex flex-wrap gap-1.5",
-                              message.content && "mb-2"
-                            )}>
-                              {imageAttachments.map((attachment) => (
-                                <button
-                                  key={attachment.url}
-                                  type="button"
-                                  onClick={() => setLightboxImage(attachment.url)}
-                                  className="relative block overflow-hidden rounded-lg"
-                                  aria-label={`View ${attachment.name}`}
-                                >
-                                  <Image
-                                    src={attachment.url}
-                                    alt={attachment.name}
-                                    width={96}
-                                    height={96}
-                                    className="h-[var(--app-messages-attachment-size)] w-[var(--app-messages-attachment-size)] rounded-lg object-cover"
-                                    sizes="(max-width: 879px) 80px, 96px"
-                                  />
-                                </button>
-                              ))}
-                            </div>
-                          )}
-
-                          {/* File attachments */}
-                          {fileAttachments.length > 0 && (
-                            <div className={cn(
-                              "space-y-1.5",
-                              message.content && "mb-2"
-                            )}>
-                              {fileAttachments.map((attachment) => (
-                                <a
-                                  key={attachment.url}
-                                  href={attachment.url}
-                                  target="_blank"
-                                  rel="noopener noreferrer"
-                                  download={attachment.name}
-                                  className={cn(
-                                    "flex items-center gap-2 rounded-lg px-3 py-2 text-sm",
-                                    mine
-                                      ? "bg-white/15 hover:bg-white/25"
-                                      : "bg-subtle hover:bg-subtle/80"
-                                  )}
-                                >
-                                  <FileText size={16} className="shrink-0" aria-hidden="true" />
-                                  <span className="min-w-0 truncate">{attachment.name}</span>
-                                  <span className={cn(
-                                    "shrink-0 text-xs",
-                                    mine ? "text-white/70" : "text-muted"
-                                  )}>
-                                    {formatFileSize(attachment.size)}
-                                  </span>
-                                </a>
-                              ))}
-                            </div>
-                          )}
-
-                          {/* Text content */}
-                          {message.content && (
-                            <p className="whitespace-pre-wrap text-sm leading-relaxed">
-                              {message.content}
-                            </p>
-                          )}
-
-                          <div
-                            className={cn(
-                              "mt-2 flex items-center gap-2 text-xs",
-                              mine ? "text-white/70" : "text-muted"
-                            )}
-                          >
-                            <span suppressHydrationWarning>
-                              {timeAgo(message.created_at)}
-                            </span>
-                            {mine && message.delivery_status && (
-                              <span className="capitalize">
-                                {message.delivery_status}
-                              </span>
-                            )}
-                          </div>
-                        </div>
-                      </div>
-                    );
-                  })}
+                        message={message}
+                        currentUserId={currentUserId}
+                        onOpenImage={setLightboxImage}
+                      />
+                    ))}
                   </>
                 )}
                   <div ref={messagesEndRef} />
@@ -1010,65 +880,10 @@ export function MessagesInbox({
                     Message @{counterpart.username}
                   </label>
 
-                  {pendingAttachments.length > 0 && (
-                    <div className="mb-3 flex flex-wrap gap-2">
-                      {pendingAttachments.map((attachment, index) => (
-                        <div
-                          key={index}
-                          className="group relative"
-                        >
-                          {attachment.preview ? (
-                            <div className="relative">
-                              {/* eslint-disable-next-line @next/next/no-img-element */}
-                              <img
-                                src={attachment.preview}
-                                alt={attachment.file.name}
-                                className={cn(
-                                  "h-[var(--app-messages-attachment-size)] w-[var(--app-messages-attachment-size)] rounded-lg border border-border object-cover",
-                                  attachment.uploading && "opacity-50"
-                                )}
-                              />
-                              {attachment.uploading && (
-                                <div className="absolute inset-0 flex items-center justify-center">
-                                  <Loader2 size={16} className="animate-spin text-accent" />
-                                </div>
-                              )}
-                            </div>
-                          ) : (
-                            <div
-                              className={cn(
-                                "flex h-[var(--app-messages-attachment-size)] items-center gap-2 rounded-lg border border-border bg-subtle px-3",
-                                attachment.uploading && "opacity-50"
-                              )}
-                            >
-                              <FileText size={16} className="shrink-0 text-muted" aria-hidden="true" />
-                              <div className="min-w-0">
-                                <p className="max-w-[120px] truncate text-xs font-medium">
-                                  {attachment.file.name}
-                                </p>
-                                <p className="text-xs text-muted">
-                                  {formatFileSize(attachment.file.size)}
-                                </p>
-                              </div>
-                              {attachment.uploading && (
-                                <Loader2 size={14} className="animate-spin text-accent" />
-                              )}
-                            </div>
-                          )}
-                          {!attachment.uploading && (
-                            <button
-                              type="button"
-                              onClick={() => removeAttachment(index)}
-                              className="absolute -top-1.5 -right-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-foreground text-background text-xs"
-                              aria-label={`Remove ${attachment.file.name}`}
-                            >
-                              <X size={12} />
-                            </button>
-                          )}
-                        </div>
-                      ))}
-                    </div>
-                  )}
+                  <PendingAttachmentList
+                    attachments={pendingAttachments}
+                    onRemove={removeAttachment}
+                  />
 
                   <Textarea
                     id="dm-composer"
@@ -1133,42 +948,11 @@ export function MessagesInbox({
         </div>
       </section>
 
-      {/* Image lightbox */}
       {lightboxImage && (
-        <div
-          role="dialog"
-          aria-modal="true"
-          aria-label="Image preview"
-          className="fixed inset-0 z-50 flex items-center justify-center bg-black/85"
-          onClick={() => setLightboxImage(null)}
-          onKeyDown={(e) => {
-            if (e.key === "Escape") setLightboxImage(null);
-          }}
-        >
-          <button
-            type="button"
-            onClick={() => setLightboxImage(null)}
-            className="absolute top-4 right-4 z-10 rounded-full bg-white/10 p-2 text-white hover:bg-white/20"
-            aria-label="Close preview"
-            autoFocus
-          >
-            <X size={24} />
-          </button>
-          <div
-            className="relative max-h-[85vh] max-w-[90vw]"
-            style={{ width: "90vw", height: "85vh" }}
-            onClick={(e) => e.stopPropagation()}
-          >
-            <Image
-              src={lightboxImage}
-              alt=""
-              fill
-              className="object-contain"
-              sizes="90vw"
-              priority
-            />
-          </div>
-        </div>
+        <MessageImageLightbox
+          imageUrl={lightboxImage}
+          onClose={() => setLightboxImage(null)}
+        />
       )}
     </div>
   );
diff --git a/apps/web/components/app/messages/message-utils.ts b/apps/web/components/app/messages/message-utils.ts
new file mode 100644
index 00000000..c7af4fd9
--- /dev/null
+++ b/apps/web/components/app/messages/message-utils.ts
@@ -0,0 +1,46 @@
+import type { DirectMessage, DirectMessageThread } from "@/types";
+
+export interface PendingAttachment {
+  file: File;
+  preview?: string;
+  uploading: boolean;
+}
+
+export type DeliveryStatus = "sending" | "sent" | "failed";
+
+export type LocalDirectMessage = DirectMessage & {
+  delivery_status?: DeliveryStatus;
+};
+
+const IMAGE_EXTENSIONS = ["jpg", "jpeg", "png", "webp", "gif", "heic", "heif"];
+
+export function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+export function isImageMime(type: string, fileName?: string): boolean {
+  if (type.startsWith("image/")) return true;
+  if (!fileName) return false;
+  const ext = fileName.split(".").pop()?.toLowerCase();
+  return !!ext && IMAGE_EXTENSIONS.includes(ext);
+}
+
+export function createPendingAttachment(file: File): PendingAttachment {
+  const preview = isImageMime(file.type, file.name)
+    ? URL.createObjectURL(file)
+    : undefined;
+  return { file, preview, uploading: false };
+}
+
+export function threadPreview(thread: DirectMessageThread): string {
+  const prefix = thread.last_message_is_from_me ? "You: " : "";
+  if (thread.last_message_content) {
+    return `${prefix}${thread.last_message_content}`;
+  }
+  if (thread.last_message_has_attachment) {
+    return `${prefix}Sent an attachment`;
+  }
+  return "";
+}
diff --git a/apps/web/components/app/profile/InviteButton.tsx b/apps/web/components/app/profile/InviteButton.tsx
index a2a3a5b0..3f4b5369 100644
--- a/apps/web/components/app/profile/InviteButton.tsx
+++ b/apps/web/components/app/profile/InviteButton.tsx
@@ -1,18 +1,19 @@
 "use client";
 
-import { useState } from "react";
 import { UserPlus, Check } from "lucide-react";
 import { usePostHog } from "posthog-js/react";
+import { useClipboardFeedback } from "@/lib/utils/useClipboardFeedback";
 
 export function InviteButton({ username }: { username: string }) {
   const posthog = usePostHog();
-  const [copied, setCopied] = useState(false);
+  const { copied, copyText } = useClipboardFeedback();
 
   function handleCopy() {
-    navigator.clipboard.writeText(`https://straude.com/join/${username}`);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-    posthog.capture("invite_link_copied", { inviter_username: username });
+    void copyText(`https://straude.com/join/${username}`).then((didCopy) => {
+      if (didCopy) {
+        posthog.capture("invite_link_copied", { inviter_username: username });
+      }
+    });
   }
 
   return (
diff --git a/apps/web/components/landing/Hero.tsx b/apps/web/components/landing/Hero.tsx
index 7d409ddd..882e4c60 100644
--- a/apps/web/components/landing/Hero.tsx
+++ b/apps/web/components/landing/Hero.tsx
@@ -1,40 +1,23 @@
 "use client";
 
 import Link from "next/link";
-import { useCallback, useState } from "react";
+import { Check } from "lucide-react";
 import { ProductHuntBadge } from "./ProductHuntBadge";
+import { useClipboardFeedback } from "@/lib/utils/useClipboardFeedback";
 
 function CopySnippet({ command }: { command: string }) {
-  const [copied, setCopied] = useState(false);
-
-  const copy = useCallback(() => {
-    navigator.clipboard.writeText(command).then(() => {
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    });
-  }, [command]);
+  const { copied, copyText } = useClipboardFeedback();
 
   return (
     <button
-      onClick={copy}
+      type="button"
+      onClick={() => void copyText(command)}
       className="inline-flex cursor-pointer items-center gap-4 border border-landing-border bg-landing-panel px-4 py-3 font-[family-name:var(--font-mono)] text-sm text-landing-muted transition-[border-color,transform] hover:border-landing-dim active:scale-[0.97]"
     >
       ${" "}
       <span className="text-landing-text">{command}</span>
       {copied && (
-        <svg
-          className="h-4 w-4 text-accent"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-          strokeWidth={2}
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            d="M5 13l4 4L19 7"
-          />
-        </svg>
+        <Check size={16} className="text-accent" aria-hidden="true" />
       )}
     </button>
   );
diff --git a/apps/web/lib/utils/useClipboardFeedback.ts b/apps/web/lib/utils/useClipboardFeedback.ts
new file mode 100644
index 00000000..8cb2812e
--- /dev/null
+++ b/apps/web/lib/utils/useClipboardFeedback.ts
@@ -0,0 +1,34 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+
+export function useClipboardFeedback(resetAfterMs = 2000) {
+  const [copied, setCopied] = useState(false);
+  const resetTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const copyText = useCallback(
+    async (text: string) => {
+      try {
+        await navigator.clipboard.writeText(text);
+        if (resetTimerRef.current) clearTimeout(resetTimerRef.current);
+        setCopied(true);
+        resetTimerRef.current = setTimeout(() => {
+          setCopied(false);
+          resetTimerRef.current = null;
+        }, resetAfterMs);
+        return true;
+      } catch {
+        return false;
+      }
+    },
+    [resetAfterMs],
+  );
+
+  useEffect(() => {
+    return () => {
+      if (resetTimerRef.current) clearTimeout(resetTimerRef.current);
+    };
+  }, []);
+
+  return { copied, copyText };
+}
diff --git a/packages/cli/src/commands/push-output.ts b/packages/cli/src/commands/push-output.ts
new file mode 100644
index 00000000..d8d1aea7
--- /dev/null
+++ b/packages/cli/src/commands/push-output.ts
@@ -0,0 +1,67 @@
+import type { CcusageDailyEntry } from "../lib/ccusage.js";
+import type { DashboardData as DashboardResponse } from "../components/PushSummary.js";
+
+interface UsageSubmitResult {
+  date: string;
+  post_url: string;
+  action: "created" | "updated";
+}
+
+export function formatTokens(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+  if (n >= 1_000) return `${Math.round(n / 1_000)}k`;
+  return String(n);
+}
+
+export function formatCost(n: number): string {
+  return `$${n.toFixed(2)}`;
+}
+
+export function printDryRunEntries(entries: CcusageDailyEntry[]): void {
+  for (const entry of entries) {
+    console.log(`  ${entry.date}:`);
+    console.log(`    Cost: ${formatCost(entry.costUSD)}`);
+    console.log(
+      `    Tokens: ${formatTokens(entry.totalTokens)} (input: ${formatTokens(entry.inputTokens)}, output: ${formatTokens(entry.outputTokens)})`,
+    );
+    console.log(`    Models: ${entry.models.join(", ")}`);
+  }
+}
+
+export function printSubmittedResults(results: UsageSubmitResult[]): void {
+  console.log("");
+  for (const result of results) {
+    const verb = result.action === "updated" ? "Updated" : "Posted";
+    console.log(`${verb} ${result.date}: ${result.post_url}?edit=1`);
+  }
+}
+
+function isDashboardData(value: unknown): value is DashboardResponse {
+  if (!value || typeof value !== "object") return false;
+  const dashboard = value as Partial<DashboardResponse>;
+  return (
+    typeof dashboard.username === "string" &&
+    typeof dashboard.streak === "number" &&
+    Array.isArray(dashboard.daily) &&
+    typeof dashboard.week_cost === "number" &&
+    typeof dashboard.prev_week_cost === "number"
+  );
+}
+
+export async function renderPushSummary(
+  dashboard: unknown,
+  results?: UsageSubmitResult[],
+): Promise<void> {
+  if (!isDashboardData(dashboard)) {
+    throw new Error("Dashboard data unavailable");
+  }
+
+  const { render } = await import("ink");
+  const { createElement } = await import("react");
+  const { PushSummary } = await import("../components/PushSummary.js");
+
+  const { waitUntilExit } = render(
+    createElement(PushSummary, { dashboard, results }),
+  );
+  await waitUntilExit();
+}
diff --git a/packages/cli/src/commands/push.ts b/packages/cli/src/commands/push.ts
index 05ba848d..349795fc 100755
--- a/packages/cli/src/commands/push.ts
+++ b/packages/cli/src/commands/push.ts
@@ -14,6 +14,11 @@ import {
 import { MAX_BACKFILL_DAYS, DEFAULT_SYNC_DAYS } from "../config.js";
 import { Spinner } from "../lib/spinner.js";
 import type { DashboardData as DashboardResponse } from "../components/PushSummary.js";
+import {
+  printDryRunEntries,
+  printSubmittedResults,
+  renderPushSummary,
+} from "./push-output.js";
 import { posthog } from "../lib/posthog.js";
 import { getDistinctId } from "../lib/machine-id.js";
 import { isDebug, debugLog } from "../lib/debug.js";
@@ -172,16 +177,6 @@ export function resolvePushDateRange(args: {
   return { ok: true, since, until: today };
 }
 
-function formatTokens(n: number): string {
-  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
-  if (n >= 1_000) return `${Math.round(n / 1_000)}k`;
-  return String(n);
-}
-
-function formatCost(n: number): string {
-  return `$${n.toFixed(2)}`;
-}
-
 /**
  * Build per-model cost breakdown from a source's entry.
  * Distributes total cost evenly across models when per-model data isn't available.
@@ -429,24 +424,10 @@ export async function pushCommand(options: PushOptions, apiUrlOverride?: string)
     // Dry run: fetch full dashboard from API (skip submit only)
     try {
       const dashboard = await apiRequest<DashboardResponse>(config, "/api/cli/dashboard");
-      const { render } = await import("ink");
-      const { createElement } = await import("react");
-      const { PushSummary } = await import("../components/PushSummary.js");
-
-      const { waitUntilExit } = render(
-        createElement(PushSummary, { dashboard }),
-      );
-      await waitUntilExit();
+      await renderPushSummary(dashboard);
     } catch {
       // Fallback: plain text if API or Ink fails
-      for (const entry of entries) {
-        console.log(`  ${entry.date}:`);
-        console.log(`    Cost: ${formatCost(entry.costUSD)}`);
-        console.log(
-          `    Tokens: ${formatTokens(entry.totalTokens)} (input: ${formatTokens(entry.inputTokens)}, output: ${formatTokens(entry.outputTokens)})`,
-        );
-        console.log(`    Models: ${entry.models.join(", ")}`);
-      }
+      printDryRunEntries(entries);
     }
     console.log("\n(dry run — nothing submitted)");
     return;
@@ -545,24 +526,10 @@ export async function pushCommand(options: PushOptions, apiUrlOverride?: string)
   // Render visual dashboard
   try {
     const dashboard = await apiRequest<DashboardResponse>(config, "/api/cli/dashboard");
-    const { render } = await import("ink");
-    const { createElement } = await import("react");
-    const { PushSummary } = await import("../components/PushSummary.js");
-
-    const { waitUntilExit } = render(
-      createElement(PushSummary, {
-        dashboard,
-        results: response.results,
-      }),
-    );
-    await waitUntilExit();
+    await renderPushSummary(dashboard, response.results);
   } catch {
     // Fallback: if dashboard fetch or Ink render fails, show plain text
-    console.log("");
-    for (const result of response.results) {
-      const verb = result.action === "updated" ? "Updated" : "Posted";
-      console.log(`${verb} ${result.date}: ${result.post_url}?edit=1`);
-    }
+    printSubmittedResults(response.results);
   }
 }
 

From c5bf5724ad291a6281d36039b054596477216946 Mon Sep 17 00:00:00 2001
From: Oscar Hong <oscar.hong2015@gmail.com>
Date: Tue, 2 Jun 2026 00:47:03 -0700
Subject: [PATCH 02/15] migrate usage push to bundled ccusage v20

---
 apps/web/app/api/usage/submit/route.ts        |   13 +-
 apps/web/types/index.ts                       |    4 +-
 bun.lock                                      |   17 +-
 .../cli/__tests__/ccusage-install.test.ts     |  143 +--
 packages/cli/__tests__/ccusage.test.ts        |  343 +++---
 packages/cli/__tests__/commands/push.test.ts  | 1026 ++++-------------
 .../cli/__tests__/flows/cli-sync-flow.test.ts |   90 +-
 .../__tests__/pick-install-command.test.ts    |   29 -
 packages/cli/package.json                     |    1 +
 packages/cli/src/commands/push.ts             |  185 ++-
 packages/cli/src/lib/ccusage.ts               |  653 +++++++----
 11 files changed, 1053 insertions(+), 1451 deletions(-)
 delete mode 100644 packages/cli/__tests__/pick-install-command.test.ts

diff --git a/apps/web/app/api/usage/submit/route.ts b/apps/web/app/api/usage/submit/route.ts
index c01760a2..49985d17 100644
--- a/apps/web/app/api/usage/submit/route.ts
+++ b/apps/web/app/api/usage/submit/route.ts
@@ -8,10 +8,14 @@ import { formatCurrency } from "@/lib/utils/format";
 import type { UsageSubmitRequest, UsageSubmitResponse, CcusageDailyEntry, ModelBreakdownEntry, UsageCollectorMeta } from "@/types";
 
 const MAX_BACKFILL_DAYS = 30;
-// Bump in lockstep with CODEX_NATIVE_COLLECTOR in packages/cli/src/lib/codex-native.ts.
-// The trusted collector is the only one allowed to *lower* totals on UPSERT,
-// which is how the server accepts retroactive corrections from a fixed CLI.
+// Bump in lockstep with trusted Codex collectors in packages/cli/src/lib.
+// Trusted collectors are the only ones allowed to *lower* totals on UPSERT,
+// which is how the server accepts retroactive corrections from fixed CLIs.
 const TRUSTED_CODEX_COLLECTOR = "straude-codex-native-last-token-usage";
+const TRUSTED_CODEX_COLLECTORS = new Set([
+  TRUSTED_CODEX_COLLECTOR,
+  "ccusage-codex-v20",
+]);
 const LEGACY_DEVICE_ID = "00000000-0000-0000-0000-000000000000";
 const CODEX_MODEL_RE = /^(gpt-|o3|o4)/i;
 const COST_EPSILON_USD = 0.005;
@@ -346,7 +350,8 @@ export async function POST(request: Request) {
 
   const deviceId = body.device_id;
   const deviceName = body.device_name;
-  const requestHasTrustedCodexCollector = body.collector?.codex === TRUSTED_CODEX_COLLECTOR;
+  const requestHasTrustedCodexCollector = typeof body.collector?.codex === "string"
+    && TRUSTED_CODEX_COLLECTORS.has(body.collector.codex);
 
   if (!deviceId) {
     return NextResponse.json(
diff --git a/apps/web/types/index.ts b/apps/web/types/index.ts
index f28897a5..36e113a5 100644
--- a/apps/web/types/index.ts
+++ b/apps/web/types/index.ts
@@ -194,8 +194,8 @@ export interface DeviceUsage {
 }
 
 export interface UsageCollectorMeta {
-  claude?: "ccusage-v18" | string;
-  codex?: "straude-codex-native-last-token-usage" | "straude-codex-native-v1" | string;
+  claude?: "ccusage-v18" | "ccusage-claude-v20" | string;
+  codex?: "straude-codex-native-last-token-usage" | "straude-codex-native-v1" | "ccusage-codex-v20" | string;
   // Set when a row was repaired retroactively (legacy or previous native Codex inflation fix).
   // Surfaced on the post card so kudos/comments stay attached but the user can
   // see why their cost changed.
diff --git a/bun.lock b/bun.lock
index 9db0481c..161a42bf 100644
--- a/bun.lock
+++ b/bun.lock
@@ -67,12 +67,13 @@
     },
     "packages/cli": {
       "name": "straude",
-      "version": "0.1.24",
+      "version": "0.1.25",
       "bin": {
         "straude": "dist/index.js",
       },
       "dependencies": {
         "@pppp606/ink-chart": "^0.2.4",
+        "ccusage": "20.0.6",
         "chalk": "^5.6.2",
         "ink": "^6.8.0",
         "posthog-node": "^5.29.1",
@@ -165,6 +166,18 @@
 
     "@bramus/specificity": ["@bramus/specificity@2.4.2", "", { "dependencies": { "css-tree": "^3.0.0" }, "bin": { "specificity": "bin/cli.js" } }, "sha512-ctxtJ/eA+t+6q2++vj5j7FYX3nRu311q1wfYH3xjlLOsczhlhxAg2FWNUXhpGvAw3BWo1xBcvOV6/YLc2r5FJw=="],
 
+    "@ccusage/ccusage-darwin-arm64": ["@ccusage/ccusage-darwin-arm64@20.0.6", "", { "os": "darwin", "cpu": "arm64" }, "sha512-9CiPBzq5QpcSkeCcYgQctLq5YOuxAomUBQIBHLa60zzUWg+Bb5r+3KAJOUYFJu21qmyUNWFePKb4UtL4yX9Mig=="],
+
+    "@ccusage/ccusage-darwin-x64": ["@ccusage/ccusage-darwin-x64@20.0.6", "", { "os": "darwin", "cpu": "x64" }, "sha512-5fdUQiUBN+u4S5dfDYnHGV1uZr/2XJ/r24IeqTNdPGXL3zJHclq6YgVnM92Xh/3/LOwvJwtDz4axW6HnCCUUmw=="],
+
+    "@ccusage/ccusage-linux-arm64": ["@ccusage/ccusage-linux-arm64@20.0.6", "", { "os": "linux", "cpu": "arm64" }, "sha512-msx6A5eBA7TN6H8YtYJ8CChdM9wHv6jZ1vR1b9kWIKIhSDcy2QBx7gjKUH7Da3kMRHfJ/nlc8+8q3cXJ7EwbrQ=="],
+
+    "@ccusage/ccusage-linux-x64": ["@ccusage/ccusage-linux-x64@20.0.6", "", { "os": "linux", "cpu": "x64" }, "sha512-9HZiRMYPa3gUb7ae1R0vXQyhkrLgfqeTwX5TJegunW5Zvsa2PK5i4ib7Wq1E8Hvr8VqRkT3FCZxfLTAx/9C3uA=="],
+
+    "@ccusage/ccusage-win32-arm64": ["@ccusage/ccusage-win32-arm64@20.0.6", "", { "os": "win32", "cpu": "arm64" }, "sha512-SXH1ODfMFwTq0J1EgQMCiu5Msz9CBob/ABKVRfUcQp+vIWQbEFCuqdktmwtoZONelqnO8/JFfEkyHUUsW/YNxw=="],
+
+    "@ccusage/ccusage-win32-x64": ["@ccusage/ccusage-win32-x64@20.0.6", "", { "os": "win32", "cpu": "x64" }, "sha512-lC3UGZskeQg8T2HaD7lirNBTqQb8biuVSSK/93OeIV4lROCKBRcVxlEecBZW0rGuUDdPNUMUwBty0qM9FUvEoA=="],
+
     "@csstools/color-helpers": ["@csstools/color-helpers@6.0.1", "", {}, "sha512-NmXRccUJMk2AWA5A7e5a//3bCIMyOu2hAtdRYrhPPHjDxINuCwX1w6rnIZ4xjLcp0ayv6h8Pc3X0eJUGiAAXHQ=="],
 
     "@csstools/css-calc": ["@csstools/css-calc@3.1.1", "", { "peerDependencies": { "@csstools/css-parser-algorithms": "^4.0.0", "@csstools/css-tokenizer": "^4.0.0" } }, "sha512-HJ26Z/vmsZQqs/o3a6bgKslXGFAungXGbinULZO3eMsOyNJHeBBZfup5FiZInOghgoM4Hwnmw+OgbJCNg1wwUQ=="],
@@ -843,6 +856,8 @@
 
     "ccount": ["ccount@2.0.1", "", {}, "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg=="],
 
+    "ccusage": ["ccusage@20.0.6", "", { "optionalDependencies": { "@ccusage/ccusage-darwin-arm64": "20.0.6", "@ccusage/ccusage-darwin-x64": "20.0.6", "@ccusage/ccusage-linux-arm64": "20.0.6", "@ccusage/ccusage-linux-x64": "20.0.6", "@ccusage/ccusage-win32-arm64": "20.0.6", "@ccusage/ccusage-win32-x64": "20.0.6" }, "bin": { "ccusage": "./dist/cli.js" } }, "sha512-Z3Aa5zQPkU2Y9+p6Pjh4iEf66O09PtTJCVTbzpQGL1oYdDXKR0nNLX+c4ASQHl6f/Gl9/T3R0hpEiZ5g1Po0dg=="],
+
     "chai": ["chai@6.2.2", "", {}, "sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg=="],
 
     "chalk": ["chalk@5.6.2", "", {}, "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA=="],
diff --git a/packages/cli/__tests__/ccusage-install.test.ts b/packages/cli/__tests__/ccusage-install.test.ts
index acaf98bc..ecb7614d 100644
--- a/packages/cli/__tests__/ccusage-install.test.ts
+++ b/packages/cli/__tests__/ccusage-install.test.ts
@@ -1,112 +1,93 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
-import { ensureCcusageInstalled, _resetCcusageResolver } from "../src/lib/ccusage.js";
-
-/**
- * Orchestration-only tests for `ensureCcusageInstalled`.
- *
- * The pure command-selection logic ("bun vs npm", "what args") is tested
- * separately in `pick-install-command.test.ts` against the real
- * `pickInstallCommand` function — no mocks needed there.
- *
- * What's left here is the orchestrator: which branch we take based on PATH
- * state + TTY state + the user's prompt response. Those decisions still
- * need mocks because the orchestrator's *job* is to read process state
- * (PATH, isatty(stdin/stdout)) and react. We mock at those true boundaries
- * (node:child_process, node:fs, prompt) but never at the system under test.
- */
+import {
+  ensureCcusageInstalled,
+  isCcusageInstalled,
+  validateCcusageVersion,
+  _resetCcusageResolver,
+} from "../src/lib/ccusage.js";
 
 vi.mock("node:child_process", () => ({
   execFileSync: vi.fn(),
   execFile: vi.fn(),
 }));
 
-vi.mock("node:fs", async (importOriginal) => {
-  const actual = await importOriginal<typeof import("node:fs")>();
-  return { ...actual, existsSync: vi.fn(() => false) };
-});
-
-vi.mock("../src/lib/prompt.js", () => ({
-  isInteractive: vi.fn(),
-  promptYesNo: vi.fn(),
-}));
-
-vi.mock("../src/lib/posthog.js", () => ({
-  posthog: {
-    capture: vi.fn(),
-    _shutdown: vi.fn(() => Promise.resolve()),
-  },
-}));
-
 import { execFileSync } from "node:child_process";
-import { existsSync } from "node:fs";
-import { isInteractive, promptYesNo } from "../src/lib/prompt.js";
 
 const mockExecFileSync = vi.mocked(execFileSync);
-const mockExistsSync = vi.mocked(existsSync);
-const mockIsInteractive = vi.mocked(isInteractive);
-const mockPromptYesNo = vi.mocked(promptYesNo);
 
 beforeEach(() => {
   vi.clearAllMocks();
   _resetCcusageResolver();
 });
 
-describe("ensureCcusageInstalled — orchestration branches", () => {
-  it("no-ops and skips the prompt when ccusage is already on PATH", async () => {
-    mockExistsSync.mockReturnValue(true);
+describe("ensureCcusageInstalled", () => {
+  it("validates the bundled ccusage binary and caches the resolved command", async () => {
+    mockExecFileSync.mockReturnValue("ccusage 20.0.6" as never);
+
     await expect(ensureCcusageInstalled()).resolves.toBeUndefined();
-    expect(mockIsInteractive).not.toHaveBeenCalled();
-    expect(mockExecFileSync).not.toHaveBeenCalled();
+    await expect(ensureCcusageInstalled()).resolves.toBeUndefined();
+
+    expect(mockExecFileSync).toHaveBeenCalledTimes(1);
+    expect(mockExecFileSync).toHaveBeenCalledWith(
+      process.execPath,
+      [expect.stringContaining("ccusage/dist/cli.js"), "--version"],
+      expect.objectContaining({ encoding: "utf-8" }),
+    );
   });
 
-  it("throws the manual-install error in non-TTY contexts (auto-push, CI)", async () => {
-    mockExistsSync.mockReturnValue(false);
-    mockIsInteractive.mockReturnValue(false);
-    await expect(ensureCcusageInstalled()).rejects.toThrow(/not installed or not on PATH/);
-    expect(mockPromptYesNo).not.toHaveBeenCalled();
-    expect(mockExecFileSync).not.toHaveBeenCalled();
+  it("reports true when the bundled binary is resolvable and new enough", () => {
+    mockExecFileSync.mockReturnValue("ccusage 20.0.6" as never);
+
+    expect(isCcusageInstalled()).toBe(true);
   });
 
-  it("throws cleanly when the user declines the prompt", async () => {
-    mockExistsSync.mockReturnValue(false);
-    mockIsInteractive.mockReturnValue(true);
-    mockPromptYesNo.mockResolvedValue(false);
-    await expect(ensureCcusageInstalled()).rejects.toThrow(/Install it manually/);
-    expect(mockExecFileSync).not.toHaveBeenCalled();
+  it("reports false when version validation fails", () => {
+    mockExecFileSync.mockReturnValue("ccusage 20.0.4" as never);
+
+    expect(isCcusageInstalled()).toBe(false);
   });
 
-  it("wraps install-time exec errors with a manual-fallback message", async () => {
-    mockExistsSync.mockReturnValue(false);
-    mockIsInteractive.mockReturnValue(true);
-    mockPromptYesNo.mockResolvedValue(true);
-    mockExecFileSync.mockImplementation(() => {
-      throw new Error("EACCES: permission denied");
-    });
-    await expect(ensureCcusageInstalled()).rejects.toThrow(/Install it manually/);
+  it("throws when the bundled binary reports an old version", async () => {
+    mockExecFileSync.mockReturnValue("ccusage 20.0.4" as never);
+
+    await expect(ensureCcusageInstalled()).rejects.toThrow(
+      "ccusage 20.0.5 or newer is required; found 20.0.4.",
+    );
   });
 
-  it("rechecks PATH after install and reports if the binary is still missing", async () => {
-    mockExistsSync.mockReturnValue(false); // never appears on PATH
-    mockIsInteractive.mockReturnValue(true);
-    mockPromptYesNo.mockResolvedValue(true);
-    mockExecFileSync.mockReturnValue(Buffer.from(""));
-    await expect(ensureCcusageInstalled()).rejects.toThrow(/may need to open a new shell/);
+  it("throws when version output cannot be parsed", async () => {
+    mockExecFileSync.mockReturnValue("not a version" as never);
+
+    await expect(ensureCcusageInstalled()).rejects.toThrow(
+      "Failed to parse bundled ccusage version",
+    );
   });
 
-  it("succeeds end-to-end when accepted, installed, and binary appears on PATH", async () => {
-    let installRan = false;
-    mockExistsSync.mockImplementation((p: unknown) => {
-      const path = String(p);
-      if (path.includes("ccusage")) return installRan;
-      return false;
-    });
-    mockIsInteractive.mockReturnValue(true);
-    mockPromptYesNo.mockResolvedValue(true);
+  it("wraps validation exec errors with stderr detail", async () => {
+    const err = new Error("failed") as Error & { stderr: string };
+    err.stderr = "permission denied";
     mockExecFileSync.mockImplementation(() => {
-      installRan = true;
-      return Buffer.from("");
+      throw err;
     });
-    await expect(ensureCcusageInstalled()).resolves.toBeUndefined();
-    expect(mockExecFileSync).toHaveBeenCalledTimes(1);
+
+    await expect(ensureCcusageInstalled()).rejects.toThrow(
+      "Failed to validate bundled ccusage version: permission denied",
+    );
+  });
+});
+
+describe("validateCcusageVersion", () => {
+  it("accepts the minimum supported version", () => {
+    expect(() => validateCcusageVersion("20.0.5")).not.toThrow();
+  });
+
+  it("accepts newer versions", () => {
+    expect(() => validateCcusageVersion("20.1.0")).not.toThrow();
+  });
+
+  it("rejects older versions", () => {
+    expect(() => validateCcusageVersion("20.0.4")).toThrow(
+      "ccusage 20.0.5 or newer is required; found 20.0.4.",
+    );
   });
 });
diff --git a/packages/cli/__tests__/ccusage.test.ts b/packages/cli/__tests__/ccusage.test.ts
index 5a2d6712..1b428c0c 100644
--- a/packages/cli/__tests__/ccusage.test.ts
+++ b/packages/cli/__tests__/ccusage.test.ts
@@ -11,256 +11,223 @@ vi.mock("node:child_process", () => ({
   execFile: vi.fn(),
 }));
 
-vi.mock("node:fs", async (importOriginal) => {
-  const actual = await importOriginal<typeof import("node:fs")>();
-  return { ...actual, existsSync: vi.fn(() => false) };
-});
-
 import { execFileSync } from "node:child_process";
-import { existsSync } from "node:fs";
+
 const mockExecFileSync = vi.mocked(execFileSync);
-const mockExistsSync = vi.mocked(existsSync);
 
-beforeEach(() => {
-  // Default to ccusage being available; individual tests can override.
-  mockExistsSync.mockReturnValue(true);
-});
+function claudeOutput() {
+  return JSON.stringify({
+    daily: [
+      {
+        date: "2026-06-01",
+        modelsUsed: ["claude-opus-4-8"],
+        inputTokens: 223,
+        outputTokens: 9486,
+        cacheCreationTokens: 264403,
+        cacheReadTokens: 47523,
+        totalTokens: 321635,
+        totalCost: 1.91454525,
+        modelBreakdowns: [
+          {
+            modelName: "claude-opus-4-8",
+            inputTokens: 223,
+            outputTokens: 9486,
+            cacheCreationTokens: 264403,
+            cacheReadTokens: 47523,
+            cost: 1.91454525,
+          },
+        ],
+      },
+    ],
+    totals: {},
+  });
+}
 
-/** Build a valid ccusage v18 JSON string. */
-function validOutput() {
+function codexOutput() {
   return JSON.stringify({
     daily: [
       {
-        date: "2025-06-01",
-        modelsUsed: ["claude-sonnet-4-5-20250514"],
-        inputTokens: 1000,
-        outputTokens: 500,
-        cacheCreationTokens: 200,
-        cacheReadTokens: 100,
-        totalTokens: 1800,
-        totalCost: 0.05,
+        date: "2026-06-01",
+        inputTokens: 2217560,
+        outputTokens: 156872,
+        cachedInputTokens: 34676096,
+        reasoningOutputTokens: 58261,
+        totalTokens: 37050528,
+        costUSD: 33.132008,
+        models: {
+          "gpt-5.5": {
+            inputTokens: 2217560,
+            cachedInputTokens: 34676096,
+            outputTokens: 156872,
+            reasoningOutputTokens: 58261,
+            totalTokens: 37050528,
+            isFallback: false,
+          },
+        },
       },
     ],
-    totals: {
-      inputTokens: 1000,
-      outputTokens: 500,
-      cacheCreationTokens: 200,
-      cacheReadTokens: 100,
-      totalTokens: 1800,
-      totalCost: 0.05,
-    },
+    totals: {},
   });
 }
 
-// ---------------------------------------------------------------------------
-// parseCcusageOutput
-// ---------------------------------------------------------------------------
+beforeEach(() => {
+  vi.clearAllMocks();
+  _resetCcusageResolver();
+  mockExecFileSync.mockImplementation((_cmd, args) => {
+    const argv = Array.isArray(args) ? args.map(String) : [];
+    if (argv.includes("--version")) return "ccusage 20.0.6" as never;
+    if (argv.includes("claude")) return claudeOutput() as never;
+    if (argv.includes("codex")) return codexOutput() as never;
+    throw new Error(`unexpected ccusage args: ${argv.join(" ")}`);
+  });
+});
 
 describe("parseCcusageOutput", () => {
-  it("parses valid ccusage v18 JSON and normalizes fields", () => {
-    const result = parseCcusageOutput(validOutput());
+  it("parses source-focused Claude v20 output", () => {
+    const result = parseCcusageOutput(claudeOutput(), "claude");
+
     expect(result.data).toHaveLength(1);
-    expect(result.data[0]!.date).toBe("2025-06-01");
-    expect(result.data[0]!.costUSD).toBe(0.05);
-    expect(result.data[0]!.models).toEqual(["claude-sonnet-4-5-20250514"]);
+    expect(result.data[0]).toMatchObject({
+      date: "2026-06-01",
+      models: ["claude-opus-4-8"],
+      inputTokens: 223,
+      outputTokens: 9486,
+      cacheCreationTokens: 264403,
+      cacheReadTokens: 47523,
+      totalTokens: 321635,
+      costUSD: 1.91454525,
+    });
+    expect(result.data[0]!.modelBreakdown).toEqual([
+      { model: "claude-opus-4-8", cost_usd: 1.91454525 },
+    ]);
+    expect(result.rowMetadata).toEqual([
+      { date: "2026-06-01", agents: ["claude"] },
+    ]);
   });
 
-  it("rejects non-JSON input", () => {
-    expect(() => parseCcusageOutput("not json")).toThrow(
-      "Failed to parse ccusage output as JSON",
-    );
-  });
+  it("parses source-focused Codex v20 output with separate cached input semantics", () => {
+    const result = parseCcusageOutput(codexOutput(), "codex");
 
-  it("rejects output without daily array", () => {
-    const bad = JSON.stringify({ something: "else" });
-    expect(() => parseCcusageOutput(bad)).toThrow(
-      "Unexpected ccusage output format",
-    );
+    expect(result.data).toHaveLength(1);
+    expect(result.data[0]).toMatchObject({
+      date: "2026-06-01",
+      models: ["gpt-5.5"],
+      inputTokens: 2217560,
+      outputTokens: 156872,
+      cacheCreationTokens: 0,
+      cacheReadTokens: 34676096,
+      totalTokens: 37050528,
+      costUSD: 33.132008,
+      reasoningOutputTokens: 58261,
+    });
+    expect(result.data[0]!.modelBreakdown).toEqual([
+      { model: "gpt-5.5", cost_usd: 33.132008 },
+    ]);
+    expect(result.rowMetadata).toEqual([
+      { date: "2026-06-01", agents: ["codex"] },
+    ]);
   });
 
-  it("rejects output where daily is not an array", () => {
-    const bad = JSON.stringify({ daily: "not an array", totals: {} });
-    expect(() => parseCcusageOutput(bad)).toThrow(
-      "Unexpected ccusage output format",
-    );
+  it("returns empty data for an empty ccusage array", () => {
+    expect(parseCcusageOutput("[]", "claude").data).toEqual([]);
   });
 
-  it("returns empty data for empty array", () => {
-    const result = parseCcusageOutput("[]");
-    expect(result.data).toEqual([]);
+  it("rejects non-JSON input", () => {
+    expect(() => parseCcusageOutput("not json", "claude")).toThrow(
+      "Failed to parse ccusage output as JSON",
+    );
   });
 
-  it("rejects entry with missing date", () => {
-    const bad = JSON.stringify({
-      daily: [
-        { totalCost: 1, modelsUsed: [], totalTokens: 0, inputTokens: 0, outputTokens: 0, cacheCreationTokens: 0, cacheReadTokens: 0 },
-      ],
-      totals: {},
-    });
-    expect(() => parseCcusageOutput(bad)).toThrow("Invalid entry");
+  it("rejects output without a daily array", () => {
+    expect(() => parseCcusageOutput(JSON.stringify({ totals: {} }), "claude")).toThrow(
+      "Unexpected ccusage output format",
+    );
   });
 
-  it("rejects entry with non-numeric cost", () => {
+  it("rejects rows with negative numeric fields", () => {
     const bad = JSON.stringify({
       daily: [
         {
-          date: "2025-06-01",
-          totalCost: "not a number",
+          date: "2026-06-01",
           modelsUsed: [],
-          totalTokens: 0,
           inputTokens: 0,
           outputTokens: 0,
           cacheCreationTokens: 0,
           cacheReadTokens: 0,
-        },
-      ],
-      totals: {},
-    });
-    expect(() => parseCcusageOutput(bad)).toThrow("Invalid entry");
-  });
-
-  it("rejects entry with negative cost", () => {
-    const bad = JSON.stringify({
-      daily: [
-        {
-          date: "2025-06-01",
-          totalCost: -1,
-          modelsUsed: [],
           totalTokens: 0,
-          inputTokens: 0,
-          outputTokens: 0,
-          cacheCreationTokens: 0,
-          cacheReadTokens: 0,
+          totalCost: -1,
         },
       ],
-      totals: {},
     });
-    expect(() => parseCcusageOutput(bad)).toThrow("Negative cost");
-  });
 
-  it("normalizes negative token counts to non-negative values", () => {
-    const bad = JSON.stringify({
-      daily: [
-        {
-          date: "2025-06-01",
-          totalCost: 1,
-          modelsUsed: [],
-          totalTokens: -1,
-          inputTokens: 0,
-          outputTokens: 0,
-          cacheCreationTokens: 0,
-          cacheReadTokens: 0,
-        },
-      ],
-      totals: {},
-    });
-    const parsed = parseCcusageOutput(bad);
-    expect(parsed.data).toHaveLength(1);
-    expect(parsed.data[0]!.totalTokens).toBe(0);
-    expect(parsed.data[0]!.inputTokens).toBe(0);
-    expect(parsed.data[0]!.outputTokens).toBe(0);
+    expect(() => parseCcusageOutput(bad, "claude")).toThrow(
+      "totalCost must be non-negative",
+    );
   });
 });
 
-// ---------------------------------------------------------------------------
-// runCcusage
-// ---------------------------------------------------------------------------
-
 describe("runCcusage", () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    _resetCcusageResolver();
-    mockExecFileSync.mockReturnValue(validOutput() as never);
-  });
+  it("executes the bundled ccusage package through the current Node runtime", () => {
+    const result = runCcusage("claude", "20260601", "20260602");
 
-  it("calls ccusage directly when globally installed", () => {
-    // Simulate ccusage binary found on PATH
-    mockExistsSync.mockReturnValue(true);
-
-    runCcusage("20250601", "20250601");
-    // No --version probe — PATH check is pure fs now
-    expect(mockExecFileSync).toHaveBeenCalledTimes(1);
-    expect(mockExecFileSync).toHaveBeenCalledWith(
-      "ccusage",
-      ["daily", "--json", "--breakdown", "--since", "20250601", "--until", "20250601"],
+    expect(result.data).toHaveLength(1);
+    expect(mockExecFileSync).toHaveBeenCalledTimes(2);
+    expect(mockExecFileSync).toHaveBeenNthCalledWith(
+      1,
+      process.execPath,
+      [expect.stringContaining("ccusage/dist/cli.js"), "--version"],
       expect.objectContaining({ encoding: "utf-8" }),
     );
-  });
-
-  it("throws when ccusage is not globally installed", () => {
-    // ccusage not found on PATH
-    mockExistsSync.mockReturnValue(false);
-
-    expect(() => runCcusage("20250601", "20250601")).toThrow(
-      "ccusage is not installed or not on PATH",
-    );
-    expect(mockExecFileSync).not.toHaveBeenCalled();
-  });
-
-  it("reports timeout when killed", () => {
-    const err = new Error("killed") as Error & { killed: boolean; signal: string };
-    err.killed = true;
-    err.signal = "SIGTERM";
-    mockExecFileSync.mockImplementation(() => { throw err; });
-
-    expect(() => runCcusage("20250601", "20250601")).toThrow("timed out");
-  });
-
-  it("includes stderr in error when available", () => {
-    const err = new Error("fail") as Error & { status: number; stderr: string };
-    err.status = 1;
-    err.stderr = "Error: no JSONL files found";
-    mockExecFileSync.mockImplementation(() => { throw err; });
-
-    expect(() => runCcusage("20250601", "20250601")).toThrow(
-      "ccusage failed: Error: no JSONL files found",
-    );
-  });
-
-  it("falls back to error.message when stderr is empty", () => {
-    const err = new Error("something went wrong") as Error & { status: number; stderr: string };
-    err.status = 1;
-    err.stderr = "";
-    mockExecFileSync.mockImplementation(() => { throw err; });
-
-    expect(() => runCcusage("20250601", "20250601")).toThrow(
-      "ccusage failed: something went wrong",
+    expect(mockExecFileSync).toHaveBeenNthCalledWith(
+      2,
+      process.execPath,
+      [
+        expect.stringContaining("ccusage/dist/cli.js"),
+        "claude",
+        "daily",
+        "--json",
+        "--since",
+        "20260601",
+        "--until",
+        "20260602",
+        "--no-offline",
+      ],
+      expect.objectContaining({ encoding: "utf-8" }),
     );
   });
-});
-
-// ---------------------------------------------------------------------------
-// runCcusageRaw
-// ---------------------------------------------------------------------------
 
-describe("runCcusageRaw", () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    _resetCcusageResolver();
-    mockExecFileSync.mockReturnValue(validOutput() as never);
-  });
+  it("returns raw JSON for the requested agent", () => {
+    const result = runCcusageRaw("codex", "20260601", "20260602");
 
-  it("returns raw JSON string on success", () => {
-    const result = runCcusageRaw("20250601", "20250601");
-    expect(result).toBe(validOutput());
+    expect(result).toBe(codexOutput());
   });
 
-  it("reports timeout", () => {
+  it("reports timeout with the source-focused command hint", () => {
     const err = new Error("killed") as Error & { killed: boolean; signal: string };
     err.killed = true;
     err.signal = "SIGTERM";
-    mockExecFileSync.mockImplementation(() => { throw err; });
+    mockExecFileSync.mockImplementation((_cmd, args) => {
+      const argv = Array.isArray(args) ? args.map(String) : [];
+      if (argv.includes("--version")) return "ccusage 20.0.6" as never;
+      throw err;
+    });
 
-    expect(() => runCcusageRaw("20250601", "20250601")).toThrow("timed out");
+    expect(() => runCcusage("claude", "20260601", "20260602")).toThrow(
+      "ccusage timed out. Try running `ccusage claude daily",
+    );
   });
 
-  it("includes stderr detail on failure", () => {
+  it("includes stderr detail on failures", () => {
     const err = new Error("fail") as Error & { status: number; stderr: string };
     err.status = 1;
     err.stderr = "Error: invalid date range";
-    mockExecFileSync.mockImplementation(() => { throw err; });
+    mockExecFileSync.mockImplementation((_cmd, args) => {
+      const argv = Array.isArray(args) ? args.map(String) : [];
+      if (argv.includes("--version")) return "ccusage 20.0.6" as never;
+      throw err;
+    });
 
-    expect(() => runCcusageRaw("20250601", "20250601")).toThrow(
+    expect(() => runCcusageRaw("codex", "20260601", "20260601")).toThrow(
       "ccusage failed: Error: invalid date range",
     );
   });
diff --git a/packages/cli/__tests__/commands/push.test.ts b/packages/cli/__tests__/commands/push.test.ts
index 55d287fd..cffda6d4 100755
--- a/packages/cli/__tests__/commands/push.test.ts
+++ b/packages/cli/__tests__/commands/push.test.ts
@@ -15,68 +15,55 @@ vi.mock("../../src/lib/api.js", () => ({
 }));
 
 vi.mock("../../src/lib/ccusage.js", () => ({
-  runCcusageRawAsync: vi.fn(),
+  CCUSAGE_CLAUDE_COLLECTOR: "ccusage-claude-v20",
+  CCUSAGE_CODEX_COLLECTOR: "ccusage-codex-v20",
+  runCcusageAgentRawAsync: vi.fn(),
   parseCcusageOutput: vi.fn(),
   ensureCcusageInstalled: vi.fn(() => Promise.resolve()),
 }));
 
 vi.mock("../../src/lib/codex-native.js", () => ({
-  CODEX_NATIVE_COLLECTOR: "straude-codex-native-last-token-usage",
-  collectCodexUsageAsync: vi.fn(),
   containsSessionFile: vi.fn(),
 }));
 
+vi.mock("../../src/lib/posthog.js", () => ({
+  posthog: {
+    capture: vi.fn(),
+    _shutdown: vi.fn(() => Promise.resolve()),
+  },
+}));
+
 vi.mock("../../src/lib/telemetry.js", () => ({
   reportUsagePushFailed: vi.fn(),
   errorMessage: (error: unknown) => error instanceof Error ? error.message : String(error),
 }));
 
+vi.mock("../../src/commands/push-output.js", () => ({
+  printDryRunEntries: vi.fn(),
+  printSubmittedResults: vi.fn(),
+  renderPushSummary: vi.fn(() => Promise.resolve()),
+}));
+
 import { pushCommand, mergeEntries } from "../../src/commands/push.js";
-import { loadConfig, saveConfig } from "../../src/lib/auth.js";
+import { loadConfig, saveConfig, updateLastPushDate } from "../../src/lib/auth.js";
 import { loginCommand } from "../../src/commands/login.js";
 import { apiRequest } from "../../src/lib/api.js";
-import { runCcusageRawAsync, parseCcusageOutput } from "../../src/lib/ccusage.js";
-import { collectCodexUsageAsync, containsSessionFile } from "../../src/lib/codex-native.js";
+import { runCcusageAgentRawAsync, parseCcusageOutput } from "../../src/lib/ccusage.js";
+import { containsSessionFile } from "../../src/lib/codex-native.js";
 import { reportUsagePushFailed } from "../../src/lib/telemetry.js";
 
 const mockLoadConfig = vi.mocked(loadConfig);
-const mockLoginCommand = vi.mocked(loginCommand);
 const mockSaveConfig = vi.mocked(saveConfig);
+const mockUpdateLastPushDate = vi.mocked(updateLastPushDate);
+const mockLoginCommand = vi.mocked(loginCommand);
 const mockApiRequest = vi.mocked(apiRequest);
-const mockRunCcusageRawAsync = vi.mocked(runCcusageRawAsync);
+const mockRunCcusageAgentRawAsync = vi.mocked(runCcusageAgentRawAsync);
 const mockParseCcusageOutput = vi.mocked(parseCcusageOutput);
-const mockCollectCodexUsageAsync = vi.mocked(collectCodexUsageAsync);
 const mockHasCodexLogs = vi.mocked(containsSessionFile);
 const mockReportUsagePushFailed = vi.mocked(reportUsagePushFailed);
 
 const fakeConfig = { token: "tok", username: "alice", api_url: "https://straude.com" };
 
-function codexOutput(data: any[] = [], extra: Record<string, any> = {}) {
-  return {
-    data,
-    anomalies: [],
-    entryMeta: [],
-    fingerprint: data.length > 0 ? "codex-native-fingerprint" : "",
-    scannedFiles: data.length > 0 ? 1 : 0,
-    parsedEvents: data.length,
-    ...extra,
-  };
-}
-
-function codexEntry(date: string, overrides: Record<string, any> = {}) {
-  return {
-    date,
-    models: ["gpt-5-codex"],
-    inputTokens: 2000,
-    outputTokens: 800,
-    cacheCreationTokens: 0,
-    cacheReadTokens: 0,
-    totalTokens: 2800,
-    costUSD: 3.0,
-    ...overrides,
-  };
-}
-
 class ExitError extends Error {
   code: number;
   constructor(code: number) {
@@ -93,13 +80,60 @@ function todayStr(): string {
   return `${y}-${m}-${day}`;
 }
 
+function usageEntry(date: string, overrides: Record<string, unknown> = {}) {
+  return {
+    date,
+    models: ["claude-sonnet-4-5-20250929"],
+    inputTokens: 1000,
+    outputTokens: 500,
+    cacheCreationTokens: 0,
+    cacheReadTokens: 0,
+    totalTokens: 1500,
+    costUSD: 0.05,
+    ...overrides,
+  };
+}
+
+function mockSourceData(args: {
+  claude?: ReturnType<typeof usageEntry>[];
+  codex?: ReturnType<typeof usageEntry>[];
+} = {}) {
+  const claude = args.claude ?? [];
+  const codex = args.codex ?? [];
+
+  mockRunCcusageAgentRawAsync.mockImplementation(async (agent) => `${agent}-raw`);
+  mockParseCcusageOutput.mockImplementation((_raw, agent) => ({
+    data: agent === "codex" ? codex : claude,
+    rowMetadata: (agent === "codex" ? codex : claude).map((entry) => ({
+      date: entry.date,
+      agents: [agent],
+    })),
+    anomalies: [],
+  }));
+}
+
+function submitCallBody() {
+  const submitCall = mockApiRequest.mock.calls.find(([, path]) => path === "/api/usage/submit");
+  expect(submitCall).toBeDefined();
+  return JSON.parse((submitCall![2] as { body: string }).body);
+}
+
 beforeEach(() => {
-  vi.useFakeTimers({ now: new Date('2026-03-13T12:00:00Z'), toFake: ['Date'] });
+  vi.useFakeTimers({ now: new Date("2026-03-13T12:00:00Z"), toFake: ["Date"] });
   vi.clearAllMocks();
   mockLoadConfig.mockReturnValue(fakeConfig);
-  // Default: no Codex data
   mockHasCodexLogs.mockResolvedValue(false);
-  mockCollectCodexUsageAsync.mockResolvedValue(codexOutput());
+  mockSourceData();
+  mockApiRequest.mockImplementation(async (_config, path) => {
+    if (path === "/api/usage/submit") {
+      return {
+        results: [
+          { date: todayStr(), usage_id: "u-1", post_id: "p-1", post_url: "https://straude.com/post/p-1", action: "created" },
+        ],
+      };
+    }
+    return { days: [] };
+  });
   vi.spyOn(console, "log").mockImplementation(() => {});
   vi.spyOn(console, "error").mockImplementation(() => {});
   vi.spyOn(process, "exit").mockImplementation((code) => {
@@ -113,233 +147,134 @@ afterEach(() => {
 });
 
 describe("pushCommand", () => {
-  it("dry-run prints summary without API call", async () => {
-    mockRunCcusageRawAsync.mockResolvedValue("{}");
-    mockParseCcusageOutput.mockReturnValue({
-      data: [
-        {
-          date: todayStr(),
-          models: ["claude-sonnet-4-5-20250929"],
-          inputTokens: 1000,
-          outputTokens: 500,
-          cacheCreationTokens: 0,
-          cacheReadTokens: 0,
-          totalTokens: 1500,
-          costUSD: 0.05,
-        },
-      ],
-    });
+  it("submits source-focused Claude usage with v20 collector metadata", async () => {
+    const today = todayStr();
+    mockSourceData({ claude: [usageEntry(today)] });
 
-    // Dashboard call will fail in test (not mocked) — triggers fallback
-    await pushCommand({ dryRun: true });
+    await pushCommand({});
 
-    // Dry run fetches dashboard for full history, but skips submit
-    expect(mockApiRequest).toHaveBeenCalledTimes(1);
-    expect(mockApiRequest).toHaveBeenCalledWith(
-      expect.anything(),
-      "/api/cli/dashboard",
+    expect(mockRunCcusageAgentRawAsync).toHaveBeenCalledWith(
+      "claude",
+      expect.any(String),
+      expect.any(String),
+      undefined,
     );
-    expect(console.log).toHaveBeenCalledWith(
-      expect.stringContaining("dry run"),
+    expect(mockRunCcusageAgentRawAsync).toHaveBeenCalledWith(
+      "codex",
+      expect.any(String),
+      expect.any(String),
+      undefined,
     );
+
+    const body = submitCallBody();
+    expect(body.entries).toHaveLength(1);
+    expect(body.entries[0].data.costUSD).toBe(0.05);
+    expect(body.collector).toEqual({ claude: "ccusage-claude-v20" });
+    expect(body.source).toBe("cli");
   });
 
-  it("submits today's data and prints post URL", async () => {
+  it("merges Claude and Codex data for the same day", async () => {
     const today = todayStr();
-
-    mockRunCcusageRawAsync.mockResolvedValue("{}");
-    mockParseCcusageOutput.mockReturnValue({
-      data: [
-        {
-          date: today,
-          models: ["claude-sonnet-4-5-20250929"],
+    mockSourceData({
+      claude: [
+        usageEntry(today, {
+          models: ["claude-opus-4-20250505"],
           inputTokens: 1000,
           outputTokens: 500,
-          cacheCreationTokens: 0,
-          cacheReadTokens: 0,
-          totalTokens: 1500,
-          costUSD: 0.05,
-        },
+          cacheCreationTokens: 100,
+          cacheReadTokens: 50,
+          totalTokens: 1650,
+          costUSD: 10,
+          modelBreakdown: [{ model: "claude-opus-4-20250505", cost_usd: 10 }],
+        }),
       ],
-    });
-
-    mockApiRequest.mockResolvedValue({
-      results: [
-        { date: today, usage_id: "u-1", post_id: "p-1", post_url: "https://straude.com/post/p-1" },
+      codex: [
+        usageEntry(today, {
+          models: ["gpt-5-codex"],
+          inputTokens: 2000,
+          outputTokens: 800,
+          totalTokens: 2800,
+          costUSD: 3,
+          modelBreakdown: [{ model: "gpt-5-codex", cost_usd: 3 }],
+        }),
       ],
     });
 
     await pushCommand({});
 
-    expect(mockApiRequest).toHaveBeenCalledWith(
-      fakeConfig,
-      "/api/usage/submit",
-      expect.objectContaining({ method: "POST" }),
-    );
-    expect(console.log).toHaveBeenCalledWith(
-      expect.stringContaining("https://straude.com/post/p-1"),
-    );
-  });
-
-  it("handles empty ccusage output", async () => {
-    mockRunCcusageRawAsync.mockResolvedValue("[]");
-    mockParseCcusageOutput.mockReturnValue({ data: [] });
-
-    await pushCommand({});
-
-    expect(mockApiRequest).not.toHaveBeenCalled();
-    expect(console.log).toHaveBeenCalledWith(
-      expect.stringContaining("No usage data found"),
-    );
-  });
-
-  it("rejects future dates", async () => {
-    await expect(pushCommand({ date: "2099-01-01" })).rejects.toThrow(ExitError);
-    expect(process.exit).toHaveBeenCalledWith(1);
-  });
-
-  it("rejects dates outside backfill window", async () => {
-    await expect(pushCommand({ date: "2020-01-01" })).rejects.toThrow(ExitError);
-    expect(process.exit).toHaveBeenCalledWith(1);
+    const body = submitCallBody();
+    const entry = body.entries[0].data;
+    expect(entry.costUSD).toBe(13);
+    expect(entry.totalTokens).toBe(4450);
+    expect(entry.models).toEqual(["claude-opus-4-20250505", "gpt-5-codex"]);
+    expect(entry.modelBreakdown).toEqual([
+      { model: "claude-opus-4-20250505", cost_usd: 10 },
+      { model: "gpt-5-codex", cost_usd: 3 },
+    ]);
+    expect(body.collector).toEqual({
+      claude: "ccusage-claude-v20",
+      codex: "ccusage-codex-v20",
+    });
   });
 
-  it("filters out-of-window entries client-side and warns", async () => {
-    // Faked date: 2026-03-13. 60 days back is 2026-01-12.
+  it("continues with Codex usage when Claude source data is missing", async () => {
     const today = todayStr();
-    const oldDate = "2026-01-12";
-
-    mockRunCcusageRawAsync.mockResolvedValue("{}");
-    mockParseCcusageOutput.mockReturnValue({
-      data: [
-        {
-          date: oldDate,
-          models: ["claude-sonnet-4-5-20250929"],
-          inputTokens: 100, outputTokens: 50,
-          cacheCreationTokens: 0, cacheReadTokens: 0,
-          totalTokens: 150, costUSD: 0.01,
-        },
-        {
-          date: today,
-          models: ["claude-sonnet-4-5-20250929"],
-          inputTokens: 1000, outputTokens: 500,
-          cacheCreationTokens: 0, cacheReadTokens: 0,
-          totalTokens: 1500, costUSD: 0.05,
-        },
-      ],
-    });
-    mockApiRequest.mockResolvedValue({
-      results: [
-        { date: today, usage_id: "u-1", post_id: "p-1", post_url: "https://straude.com/post/p-1" },
-      ],
+    mockRunCcusageAgentRawAsync.mockImplementation(async (agent) => {
+      if (agent === "claude") {
+        throw new Error("ccusage failed: No valid Claude data directories found");
+      }
+      return "codex-raw";
     });
+    mockParseCcusageOutput.mockImplementation((_raw, agent) => ({
+      data: agent === "codex" ? [
+        usageEntry(today, { models: ["gpt-5-codex"], costUSD: 3 }),
+      ] : [],
+      rowMetadata: [],
+      anomalies: [],
+    }));
 
-    await pushCommand({ days: 30 });
+    await pushCommand({});
 
-    // The submit body must contain only the in-window entry.
-    const submitCall = mockApiRequest.mock.calls.find(
-      ([, path]) => path === "/api/usage/submit",
-    );
-    expect(submitCall).toBeDefined();
-    const body = JSON.parse((submitCall![2] as { body: string }).body);
+    const body = submitCallBody();
     expect(body.entries).toHaveLength(1);
-    expect(body.entries[0].date).toBe(today);
-
-    // And the user got a heads-up about the dropped row.
-    expect(console.log).toHaveBeenCalledWith(
-      expect.stringContaining(`skipping 1 date(s) outside the 30-day backfill window: ${oldDate}`),
-    );
+    expect(body.entries[0].data.models).toEqual(["gpt-5-codex"]);
+    expect(body.collector).toEqual({ codex: "ccusage-codex-v20" });
   });
 
-  it("handles API submission failure", async () => {
-    mockRunCcusageRawAsync.mockResolvedValue("{}");
+  it("fails on generic source errors even if the other source has data", async () => {
+    mockRunCcusageAgentRawAsync.mockImplementation(async (agent) => {
+      if (agent === "claude") throw new Error("ccusage failed: unexpected runtime error");
+      return "codex-raw";
+    });
     mockParseCcusageOutput.mockReturnValue({
-      data: [
-        {
-          date: todayStr(),
-          models: ["claude-sonnet-4-5-20250929"],
-          inputTokens: 1000,
-          outputTokens: 500,
-          cacheCreationTokens: 0,
-          cacheReadTokens: 0,
-          totalTokens: 1500,
-          costUSD: 0.05,
-        },
-      ],
+      data: [usageEntry(todayStr(), { models: ["gpt-5-codex"], costUSD: 3 })],
+      rowMetadata: [],
+      anomalies: [],
     });
 
-    mockApiRequest.mockRejectedValue(new Error("Server error"));
-
     await expect(pushCommand({})).rejects.toThrow(ExitError);
-    expect(mockReportUsagePushFailed).toHaveBeenCalledWith(
-      fakeConfig,
-      expect.any(Error),
-      { command: "push", stage: "submit" },
-    );
     expect(process.exit).toHaveBeenCalledWith(1);
+    expect(mockApiRequest).not.toHaveBeenCalled();
   });
 
-  it("passes --date option correctly", async () => {
-    const yesterday = new Date();
-    yesterday.setDate(yesterday.getDate() - 1);
-    const y = yesterday.getFullYear();
-    const m = String(yesterday.getMonth() + 1).padStart(2, "0");
-    const d = String(yesterday.getDate()).padStart(2, "0");
-    const dateStr = `${y}-${m}-${d}`;
-    const compactStr = `${y}${m}${d}`;
-
-    mockRunCcusageRawAsync.mockResolvedValue("[]");
-    mockParseCcusageOutput.mockReturnValue({ data: [] });
-
-    await pushCommand({ date: dateStr });
-
-    expect(mockRunCcusageRawAsync).toHaveBeenCalledWith(compactStr, compactStr, undefined);
-  });
-
-  it("forwards --timeout to ccusage and scans Codex natively", async () => {
-    mockRunCcusageRawAsync.mockResolvedValue("[]");
-    mockParseCcusageOutput.mockReturnValue({ data: [] });
-
-    await pushCommand({ timeoutMs: 300_000 });
+  it("forwards date ranges and timeout to both source scans", async () => {
+    await pushCommand({ date: "2026-03-12", timeoutMs: 300_000 });
 
-    expect(mockRunCcusageRawAsync).toHaveBeenCalledWith(
-      expect.any(String), expect.any(String), 300_000,
+    expect(mockRunCcusageAgentRawAsync).toHaveBeenCalledWith(
+      "claude",
+      "20260312",
+      "20260312",
+      300_000,
     );
-    expect(mockCollectCodexUsageAsync).toHaveBeenCalledWith(
-      expect.any(String), expect.any(String),
+    expect(mockRunCcusageAgentRawAsync).toHaveBeenCalledWith(
+      "codex",
+      "20260312",
+      "20260312",
+      300_000,
     );
   });
 
-  it("passes --days option correctly", async () => {
-    mockRunCcusageRawAsync.mockResolvedValue("[]");
-    mockParseCcusageOutput.mockReturnValue({ data: [] });
-
-    await pushCommand({ days: 3 });
-
-    expect(mockRunCcusageRawAsync).toHaveBeenCalledTimes(1);
-    const [sinceArg, untilArg] = mockRunCcusageRawAsync.mock.calls[0]!;
-    const today = new Date();
-    const todayCompact = `${today.getFullYear()}${String(today.getMonth() + 1).padStart(2, "0")}${String(today.getDate()).padStart(2, "0")}`;
-    expect(untilArg).toBe(todayCompact);
-    expect(sinceArg).not.toBe(untilArg);
-  });
-
-  it("--days 30 uses the full backfill window", async () => {
-    mockRunCcusageRawAsync.mockResolvedValue("[]");
-    mockParseCcusageOutput.mockReturnValue({ data: [] });
-
-    await pushCommand({ days: 30 });
-
-    const [sinceArg, untilArg] = mockRunCcusageRawAsync.mock.calls[0]!;
-    const today = new Date();
-    const fmt = (d: Date) =>
-      `${d.getFullYear()}${String(d.getMonth() + 1).padStart(2, "0")}${String(d.getDate()).padStart(2, "0")}`;
-    const twentyNineDaysAgo = new Date(today);
-    twentyNineDaysAgo.setDate(today.getDate() - 29);
-    expect(sinceArg).toBe(fmt(twentyNineDaysAgo));
-    expect(untilArg).toBe(fmt(today));
-  });
-
-  it("runs one-time 30-day Codex repair before normal incremental sync", async () => {
+  it("runs one-time 30-day Codex repair range and persists repair markers", async () => {
     const today = todayStr();
     mockHasCodexLogs.mockResolvedValue(true);
     mockLoadConfig.mockReturnValue({
@@ -347,38 +282,22 @@ describe("pushCommand", () => {
       device_id: "device-1",
       device_name: "work-laptop",
     });
-    mockRunCcusageRawAsync.mockResolvedValue("{}");
-    mockParseCcusageOutput.mockReturnValue({
-      data: [
-        {
-          date: today,
-          models: ["claude-sonnet-4-5-20250929"],
-          inputTokens: 1000,
-          outputTokens: 500,
-          cacheCreationTokens: 0,
-          cacheReadTokens: 0,
-          totalTokens: 1500,
-          costUSD: 0.05,
-        },
-      ],
-    });
-    mockCollectCodexUsageAsync.mockResolvedValue(codexOutput([codexEntry(today)]));
-    mockApiRequest.mockResolvedValue({
-      results: [
-        { date: today, usage_id: "u-1", post_id: "p-1", post_url: "https://straude.com/post/p-1", action: "updated" },
-      ],
-    });
+    mockSourceData({ codex: [usageEntry(today, { models: ["gpt-5-codex"], costUSD: 3 })] });
 
     await pushCommand({ days: 3 });
 
-    const [sinceArg, untilArg] = mockRunCcusageRawAsync.mock.calls[0]!;
-    const now = new Date();
-    const fmt = (d: Date) =>
-      `${d.getFullYear()}${String(d.getMonth() + 1).padStart(2, "0")}${String(d.getDate()).padStart(2, "0")}`;
-    const twentyNineDaysAgo = new Date(now);
-    twentyNineDaysAgo.setDate(now.getDate() - 29);
-    expect(sinceArg).toBe(fmt(twentyNineDaysAgo));
-    expect(untilArg).toBe(fmt(now));
+    expect(mockRunCcusageAgentRawAsync).toHaveBeenCalledWith(
+      "claude",
+      "20260212",
+      "20260313",
+      undefined,
+    );
+    expect(mockRunCcusageAgentRawAsync).toHaveBeenCalledWith(
+      "codex",
+      "20260212",
+      "20260313",
+      undefined,
+    );
     expect(mockSaveConfig).toHaveBeenCalledWith(expect.objectContaining({
       codex_native_repair_completed_at: expect.any(String),
       codex_native_last_token_usage_repair_completed_at: expect.any(String),
@@ -386,601 +305,80 @@ describe("pushCommand", () => {
     }));
   });
 
-  it("merges Claude + Codex data for the same day", async () => {
+  it("generates device_id on first push and includes it in submit body", async () => {
     const today = todayStr();
-
-    mockRunCcusageRawAsync.mockResolvedValue("{}");
-    mockParseCcusageOutput.mockReturnValue({
-      data: [
-        {
-          date: today,
-          models: ["claude-opus-4-20250505"],
-          inputTokens: 1000,
-          outputTokens: 500,
-          cacheCreationTokens: 100,
-          cacheReadTokens: 50,
-          totalTokens: 1650,
-          costUSD: 10.0,
-        },
-      ],
-    });
-
-    mockCollectCodexUsageAsync.mockResolvedValue(codexOutput([codexEntry(today)]));
-
-    mockApiRequest.mockResolvedValue({
-      results: [
-        { date: today, usage_id: "u-1", post_id: "p-1", post_url: "https://straude.com/post/p-1", action: "created" },
-      ],
-    });
+    mockLoadConfig.mockReturnValue({ token: "tok", username: "alice", api_url: "https://straude.com" });
+    mockSourceData({ claude: [usageEntry(today)] });
 
     await pushCommand({});
 
-    // Verify merged data was submitted
-    const submitCall = mockApiRequest.mock.calls[0]!;
-    const body = JSON.parse(submitCall[2]!.body as string);
-    const entry = body.entries[0].data;
-
-    expect(entry.costUSD).toBe(13.0);
-    expect(entry.totalTokens).toBe(4450);
-    expect(entry.inputTokens).toBe(3000);
-    expect(entry.outputTokens).toBe(1300);
-    expect(entry.models).toContain("claude-opus-4-20250505");
-    expect(entry.models).toContain("gpt-5-codex");
-    expect(entry.modelBreakdown).toHaveLength(2);
-    expect(entry.modelBreakdown[0]).toEqual({ model: "claude-opus-4-20250505", cost_usd: 10.0 });
-    expect(entry.modelBreakdown[1]).toEqual({ model: "gpt-5-codex", cost_usd: 3.0 });
-    expect(body.collector).toEqual({
-      claude: "ccusage-v18",
-      codex: "straude-codex-native-last-token-usage",
-    });
-  });
-
-  it("generates device_id on first push and persists to config", async () => {
-    const today = todayStr();
-    // Config without device_id
-    const configWithoutDevice = { token: "tok", username: "alice", api_url: "https://straude.com" };
-    mockLoadConfig.mockReturnValue(configWithoutDevice);
-
-    mockRunCcusageRawAsync.mockResolvedValue("{}");
-    mockParseCcusageOutput.mockReturnValue({
-      data: [
-        {
-          date: today,
-          models: ["claude-sonnet-4-5-20250929"],
-          inputTokens: 1000, outputTokens: 500,
-          cacheCreationTokens: 0, cacheReadTokens: 0,
-          totalTokens: 1500, costUSD: 0.05,
-        },
-      ],
-    });
-
-    mockApiRequest.mockResolvedValue({
-      results: [
-        { date: today, usage_id: "u-1", post_id: "p-1", post_url: "https://straude.com/post/p-1", action: "created" },
-      ],
-    });
-
-    await pushCommand({});
-
-    // saveConfig should have been called with the generated device_id
     expect(mockSaveConfig).toHaveBeenCalled();
     const savedConfig = mockSaveConfig.mock.calls[0]![0];
-    expect(savedConfig.device_id).toBeDefined();
-    expect(savedConfig.device_id).toMatch(/^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i);
-    expect(savedConfig.device_name).toBeDefined();
-
-    // device_id should be included in the API request body
-    const submitCall = mockApiRequest.mock.calls[0]!;
-    const body = JSON.parse(submitCall[2]!.body as string);
+    const body = submitCallBody();
+    expect(savedConfig.device_id).toMatch(/^[0-9a-f-]{36}$/i);
     expect(body.device_id).toBe(savedConfig.device_id);
     expect(body.device_name).toBe(savedConfig.device_name);
   });
 
-  it("reuses existing device_id (does not regenerate)", async () => {
+  it("updates last push date after a successful normal push", async () => {
     const today = todayStr();
-    const existingDeviceId = "11111111-2222-3333-4444-555555555555";
     mockLoadConfig.mockReturnValue({
-      token: "tok", username: "alice", api_url: "https://straude.com",
-      device_id: existingDeviceId, device_name: "my-desktop",
-    });
-
-    mockRunCcusageRawAsync.mockResolvedValue("{}");
-    mockParseCcusageOutput.mockReturnValue({
-      data: [
-        {
-          date: today,
-          models: ["claude-sonnet-4-5-20250929"],
-          inputTokens: 1000, outputTokens: 500,
-          cacheCreationTokens: 0, cacheReadTokens: 0,
-          totalTokens: 1500, costUSD: 0.05,
-        },
-      ],
-    });
-
-    mockApiRequest.mockResolvedValue({
-      results: [
-        { date: today, usage_id: "u-1", post_id: "p-1", post_url: "https://straude.com/post/p-1", action: "created" },
-      ],
-    });
-
-    await pushCommand({});
-
-    // saveConfig should NOT have been called (device_id already existed)
-    expect(mockSaveConfig).not.toHaveBeenCalled();
-
-    // Existing device_id should be in the API request
-    const submitCall = mockApiRequest.mock.calls[0]!;
-    const body = JSON.parse(submitCall[2]!.body as string);
-    expect(body.device_id).toBe(existingDeviceId);
-    expect(body.device_name).toBe("my-desktop");
-  });
-
-  it("includes device_id and device_name in API request body", async () => {
-    const today = todayStr();
-    mockLoadConfig.mockReturnValue({
-      token: "tok", username: "alice", api_url: "https://straude.com",
-      device_id: "aaaa-bbbb-cccc-dddd", device_name: "work-laptop",
-    });
-
-    mockRunCcusageRawAsync.mockResolvedValue("{}");
-    mockParseCcusageOutput.mockReturnValue({
-      data: [
-        {
-          date: today,
-          models: ["claude-sonnet-4-5-20250929"],
-          inputTokens: 1000, outputTokens: 500,
-          cacheCreationTokens: 0, cacheReadTokens: 0,
-          totalTokens: 1500, costUSD: 0.05,
-        },
-      ],
-    });
-
-    mockApiRequest.mockResolvedValue({
-      results: [
-        { date: today, usage_id: "u-1", post_id: "p-1", post_url: "https://straude.com/post/p-1", action: "created" },
-      ],
-    });
-
-    await pushCommand({});
-
-    const submitCall = mockApiRequest.mock.calls[0]!;
-    const body = JSON.parse(submitCall[2]!.body as string);
-    expect(body.device_id).toBe("aaaa-bbbb-cccc-dddd");
-    expect(body.device_name).toBe("work-laptop");
-    expect(body.source).toBe("cli");
-    expect(body.entries).toHaveLength(1);
-  });
-
-  it("proceeds with Claude data only when Codex fails", async () => {
-    const today = todayStr();
-
-    mockRunCcusageRawAsync.mockResolvedValue("{}");
-    mockParseCcusageOutput.mockReturnValue({
-      data: [
-        {
-          date: today,
-          models: ["claude-sonnet-4-5-20250929"],
-          inputTokens: 1000,
-          outputTokens: 500,
-          cacheCreationTokens: 0,
-          cacheReadTokens: 0,
-          totalTokens: 1500,
-          costUSD: 0.05,
-        },
-      ],
-    });
-
-    // Codex fails silently
-    mockCollectCodexUsageAsync.mockResolvedValue(codexOutput());
-
-    mockApiRequest.mockResolvedValue({
-      results: [
-        { date: today, usage_id: "u-1", post_id: "p-1", post_url: "https://straude.com/post/p-1", action: "created" },
-      ],
-    });
-
-    await pushCommand({});
-
-    // Should still submit
-    expect(mockApiRequest).toHaveBeenCalled();
-  });
-
-  it("proceeds with Codex data only when Claude local data is missing", async () => {
-    const today = todayStr();
-
-    mockRunCcusageRawAsync.mockRejectedValue(
-      new Error("ccusage failed: No valid Claude data directories found"),
-    );
-    mockCollectCodexUsageAsync.mockResolvedValue(codexOutput([codexEntry(today)]));
-
-    mockApiRequest.mockResolvedValue({
-      results: [
-        { date: today, usage_id: "u-1", post_id: "p-1", post_url: "https://straude.com/post/p-1", action: "created" },
-      ],
+      ...fakeConfig,
+      device_id: "device-1",
+      device_name: "work-laptop",
+      codex_native_repair_completed_at: "2026-03-01T00:00:00.000Z",
+      codex_native_last_token_usage_repair_completed_at: "2026-03-01T00:00:00.000Z",
     });
+    mockSourceData({ claude: [usageEntry(today)] });
 
     await pushCommand({});
 
-    expect(mockParseCcusageOutput).not.toHaveBeenCalled();
-    expect(console.log).toHaveBeenCalledWith(
-      "No Claude Code data found locally; syncing Codex usage only.",
-    );
-
-    const submitCall = mockApiRequest.mock.calls[0]!;
-    const body = JSON.parse(submitCall[2]!.body as string);
-    expect(body.entries).toHaveLength(1);
-    expect(body.entries[0]!.data.models).toEqual(["gpt-5-codex"]);
-    expect(body.entries[0]!.data.costUSD).toBe(3.0);
-    expect(body.collector).toEqual({ codex: "straude-codex-native-last-token-usage" });
-  });
-
-  it("shows no usage when Claude local data is missing and Codex has no data", async () => {
-    mockRunCcusageRawAsync.mockRejectedValue(
-      new Error("ccusage failed: No valid Claude data directories found"),
-    );
-    mockCollectCodexUsageAsync.mockResolvedValue(codexOutput());
-
-    await pushCommand({});
-
-    expect(mockApiRequest).not.toHaveBeenCalled();
-    expect(console.log).toHaveBeenCalledWith(
-      "No Claude Code data found locally; syncing Codex usage only.",
-    );
-    expect(console.log).toHaveBeenCalledWith(
-      expect.stringContaining("No usage data found"),
-    );
+    expect(mockUpdateLastPushDate).toHaveBeenCalledWith(today);
   });
 
-  it("still fails on generic Claude errors even if Codex has data", async () => {
-    const today = todayStr();
-
-    mockRunCcusageRawAsync.mockRejectedValue(
-      new Error("ccusage failed: unexpected runtime error"),
-    );
-    mockCollectCodexUsageAsync.mockResolvedValue(codexOutput([codexEntry(today)]));
+  it("reports API submission failures", async () => {
+    mockSourceData({ claude: [usageEntry(todayStr())] });
+    mockApiRequest.mockRejectedValue(new Error("Server error"));
 
     await expect(pushCommand({})).rejects.toThrow(ExitError);
-    expect(process.exit).toHaveBeenCalledWith(1);
-    expect(mockApiRequest).not.toHaveBeenCalled();
-  });
-
-  it("skips unresolved codex rows without dropping Claude rows on the same date", async () => {
-    const today = todayStr();
-
-    mockRunCcusageRawAsync.mockResolvedValue("{}");
-    mockParseCcusageOutput.mockReturnValue({
-      data: [
-        {
-          date: today,
-          models: ["claude-sonnet-4-5-20250929"],
-          inputTokens: 1000,
-          outputTokens: 500,
-          cacheCreationTokens: 0,
-          cacheReadTokens: 0,
-          totalTokens: 1500,
-          costUSD: 0.05,
-        },
-      ],
-    });
-
-    mockCollectCodexUsageAsync.mockResolvedValue(codexOutput(
-      [codexEntry(today)],
-      {
-      anomalies: [
-        {
-          date: today,
-          source: "codex",
-          mode: "unresolved",
-          confidence: "low",
-          consistencyError: 42,
-          warnings: ["Unable to infer split"],
-        },
-      ],
-      entryMeta: [
-        {
-          date: today,
-          meta: {
-            mode: "unresolved",
-            confidence: "low",
-            warnings: ["Unable to infer split"],
-            consistencyError: 42,
-          },
-        },
-      ],
-      },
-    ));
-
-    mockApiRequest.mockResolvedValue({
-      results: [
-        { date: today, usage_id: "u-1", post_id: "p-1", post_url: "https://straude.com/post/p-1", action: "created" },
-      ],
-    });
-
-    await pushCommand({});
-
-    const submitCall = mockApiRequest.mock.calls[0]!;
-    const body = JSON.parse(submitCall[2]!.body as string);
-    expect(body.entries).toHaveLength(1);
-    expect(body.entries[0]!.data.models).toEqual(["claude-sonnet-4-5-20250929"]);
-    expect(body.entries[0]!.data.costUSD).toBe(0.05);
+    expect(mockReportUsagePushFailed).toHaveBeenCalledWith(
+      fakeConfig,
+      expect.any(Error),
+      { command: "push", stage: "submit" },
+    );
   });
 
-});
-
-// ---------------------------------------------------------------------------
-// login-if-needed (absorbed from syncCommand)
-// ---------------------------------------------------------------------------
-
-function daysAgoStr(n: number): string {
-  const d = new Date();
-  d.setDate(d.getDate() - n);
-  const y = d.getFullYear();
-  const m = String(d.getMonth() + 1).padStart(2, "0");
-  const day = String(d.getDate()).padStart(2, "0");
-  return `${y}-${m}-${day}`;
-}
-
-describe("pushCommand — login-if-needed", () => {
-  it("runs login when not authenticated, then pushes today", async () => {
+  it("runs login when not authenticated", async () => {
     mockLoadConfig
       .mockReturnValueOnce(null)
       .mockReturnValueOnce(fakeConfig);
     mockLoginCommand.mockResolvedValue(undefined);
 
-    mockRunCcusageRawAsync.mockResolvedValue("[]");
-    mockParseCcusageOutput.mockReturnValue({ data: [] });
-
     await pushCommand({});
 
     expect(mockLoginCommand).toHaveBeenCalledTimes(1);
   });
-
-  it("exits if login fails to produce config", async () => {
-    mockLoadConfig.mockReturnValue(null);
-    mockLoginCommand.mockResolvedValue(undefined);
-
-    await expect(pushCommand({})).rejects.toThrow(ExitError);
-    expect(process.exit).toHaveBeenCalledWith(1);
-  });
 });
 
-// ---------------------------------------------------------------------------
-// smart sync (no --days/--date flags)
-// ---------------------------------------------------------------------------
-
-describe("pushCommand — smart sync", () => {
-  it("backfills 3 days when no last_push_date", async () => {
-    mockLoadConfig.mockReturnValue(fakeConfig);
-    mockRunCcusageRawAsync.mockResolvedValue("[]");
-    mockParseCcusageOutput.mockReturnValue({ data: [] });
-
-    await pushCommand({});
-
-    expect(mockLoginCommand).not.toHaveBeenCalled();
-    // First push backfills 3 days: sinceDate = today - 2, untilDate = today
-    const [sinceArg, untilArg] = mockRunCcusageRawAsync.mock.calls[0]!;
-    const today = new Date();
-    const threeDaysAgo = new Date(today);
-    threeDaysAgo.setDate(threeDaysAgo.getDate() - 2);
-    const fmt = (d: Date) =>
-      `${d.getFullYear()}${String(d.getMonth() + 1).padStart(2, "0")}${String(d.getDate()).padStart(2, "0")}`;
-    expect(sinceArg).toBe(fmt(threeDaysAgo));
-    expect(untilArg).toBe(fmt(today));
-  });
-
-  it("re-syncs today when last_push_date is today", async () => {
-    mockLoadConfig.mockReturnValue({ ...fakeConfig, last_push_date: todayStr() });
-    mockRunCcusageRawAsync.mockResolvedValue("[]");
-    mockParseCcusageOutput.mockReturnValue({ data: [] });
-
-    await pushCommand({});
-
-    const [sinceArg, untilArg] = mockRunCcusageRawAsync.mock.calls[0]!;
-    expect(sinceArg).toBe(untilArg);
-  });
-
-  it("pushes diff days when last_push_date is in the past", async () => {
-    mockLoadConfig.mockReturnValue({ ...fakeConfig, last_push_date: daysAgoStr(3) });
-    mockRunCcusageRawAsync.mockResolvedValue("[]");
-    mockParseCcusageOutput.mockReturnValue({ data: [] });
-
-    await pushCommand({});
-
-    const [sinceArg, untilArg] = mockRunCcusageRawAsync.mock.calls[0]!;
-    const threeDaysAgoDate = new Date();
-    threeDaysAgoDate.setDate(threeDaysAgoDate.getDate() - 3);
-    const fmt = (d: Date) =>
-      `${d.getFullYear()}${String(d.getMonth() + 1).padStart(2, "0")}${String(d.getDate()).padStart(2, "0")}`;
-    // sinceDate should equal last_push_date (inclusive)
-    expect(sinceArg).toBe(fmt(threeDaysAgoDate));
-    expect(sinceArg).not.toBe(untilArg);
-  });
-
-  it("caps smart sync at DEFAULT_SYNC_DAYS (7) when gap is large", async () => {
-    mockLoadConfig.mockReturnValue({ ...fakeConfig, last_push_date: daysAgoStr(60) });
-    mockRunCcusageRawAsync.mockResolvedValue("[]");
-    mockParseCcusageOutput.mockReturnValue({ data: [] });
-
-    await pushCommand({});
-
-    const [sinceArg] = mockRunCcusageRawAsync.mock.calls[0]!;
-    // Since date should be 6 days ago (DEFAULT_SYNC_DAYS=7, including today)
-    const sixDaysAgo = new Date();
-    sixDaysAgo.setDate(sixDaysAgo.getDate() - 6);
-    const expectedSince = `${sixDaysAgo.getFullYear()}${String(sixDaysAgo.getMonth() + 1).padStart(2, "0")}${String(sixDaysAgo.getDate()).padStart(2, "0")}`;
-    expect(sinceArg).toBe(expectedSince);
-  });
-
-  it("includes last_push_date when gap is 1 day (to catch mid-day updates)", async () => {
-    const yesterday = daysAgoStr(1);
-    mockLoadConfig.mockReturnValue({ ...fakeConfig, last_push_date: yesterday });
-    mockRunCcusageRawAsync.mockResolvedValue("[]");
-    mockParseCcusageOutput.mockReturnValue({ data: [] });
-
-    await pushCommand({});
-
-    const [sinceArg, untilArg] = mockRunCcusageRawAsync.mock.calls[0]!;
-    const today = new Date();
-    const yesterdayDate = new Date(today);
-    yesterdayDate.setDate(yesterdayDate.getDate() - 1);
-    const fmt = (d: Date) =>
-      `${d.getFullYear()}${String(d.getMonth() + 1).padStart(2, "0")}${String(d.getDate()).padStart(2, "0")}`;
-
-    // Should sync from yesterday (last_push_date) to today
-    expect(sinceArg).toBe(fmt(yesterdayDate));
-    expect(untilArg).toBe(fmt(today));
-  });
-
-  it("includes last_push_date when gap equals DEFAULT_SYNC_DAYS (7)", async () => {
-    const sevenDaysAgo = daysAgoStr(7);
-    mockLoadConfig.mockReturnValue({ ...fakeConfig, last_push_date: sevenDaysAgo });
-    mockRunCcusageRawAsync.mockResolvedValue("[]");
-    mockParseCcusageOutput.mockReturnValue({ data: [] });
-
-    await pushCommand({});
-
-    const [sinceArg, untilArg] = mockRunCcusageRawAsync.mock.calls[0]!;
-    const sevenDaysAgoDate = new Date();
-    sevenDaysAgoDate.setDate(sevenDaysAgoDate.getDate() - 7);
-    const fmt = (d: Date) =>
-      `${d.getFullYear()}${String(d.getMonth() + 1).padStart(2, "0")}${String(d.getDate()).padStart(2, "0")}`;
-    const today = new Date();
-
-    // gap=7 equals DEFAULT_SYNC_DAYS — should still include last_push_date
-    expect(sinceArg).toBe(fmt(sevenDaysAgoDate));
-    expect(untilArg).toBe(fmt(today));
-  });
-});
-
-// ---------------------------------------------------------------------------
-// mergeEntries
-// ---------------------------------------------------------------------------
-
 describe("mergeEntries", () => {
-  it("merges entries for the same date", () => {
-    const claude = [{
-      date: "2025-06-01",
-      models: ["claude-opus-4-20250505"],
-      inputTokens: 1000, outputTokens: 500,
-      cacheCreationTokens: 100, cacheReadTokens: 50,
-      totalTokens: 1650, costUSD: 10.0,
-    }];
-    const codex = [{
-      date: "2025-06-01",
-      models: ["gpt-5-codex"],
-      inputTokens: 2000, outputTokens: 800,
-      cacheCreationTokens: 0, cacheReadTokens: 0,
-      totalTokens: 2800, costUSD: 3.0,
-    }];
-
-    const merged = mergeEntries(claude, codex);
-    expect(merged).toHaveLength(1);
-    expect(merged[0]!.costUSD).toBe(13.0);
-    expect(merged[0]!.totalTokens).toBe(4450);
-    expect(merged[0]!.models).toEqual(["claude-opus-4-20250505", "gpt-5-codex"]);
-    expect(merged[0]!.modelBreakdown).toEqual([
-      { model: "claude-opus-4-20250505", cost_usd: 10.0 },
-      { model: "gpt-5-codex", cost_usd: 3.0 },
-    ]);
-  });
-
-  it("keeps separate entries for different dates", () => {
-    const claude = [{
-      date: "2025-06-01",
-      models: ["claude-opus-4-20250505"],
-      inputTokens: 1000, outputTokens: 500,
-      cacheCreationTokens: 0, cacheReadTokens: 0,
-      totalTokens: 1500, costUSD: 5.0,
-    }];
-    const codex = [{
-      date: "2025-06-02",
-      models: ["gpt-5-codex"],
-      inputTokens: 2000, outputTokens: 800,
-      cacheCreationTokens: 0, cacheReadTokens: 0,
-      totalTokens: 2800, costUSD: 3.0,
-    }];
-
-    const merged = mergeEntries(claude, codex);
-    expect(merged).toHaveLength(2);
-    expect(merged[0]!.date).toBe("2025-06-01");
-    expect(merged[0]!.costUSD).toBe(5.0);
-    expect(merged[1]!.date).toBe("2025-06-02");
-    expect(merged[1]!.costUSD).toBe(3.0);
-  });
-
-  it("handles Claude-only days", () => {
-    const claude = [{
-      date: "2025-06-01",
-      models: ["claude-sonnet-4-20250514"],
-      inputTokens: 1000, outputTokens: 500,
-      cacheCreationTokens: 0, cacheReadTokens: 0,
-      totalTokens: 1500, costUSD: 0.05,
-    }];
-
-    const merged = mergeEntries(claude, []);
-    expect(merged).toHaveLength(1);
-    expect(merged[0]!.costUSD).toBe(0.05);
-    expect(merged[0]!.modelBreakdown).toEqual([
-      { model: "claude-sonnet-4-20250514", cost_usd: 0.05 },
-    ]);
-  });
+  it("keeps separate days sorted by date", () => {
+    const merged = mergeEntries(
+      [usageEntry("2026-03-13")],
+      [usageEntry("2026-03-12", { models: ["gpt-5-codex"], costUSD: 1 })],
+    );
 
-  it("handles Codex-only days", () => {
-    const codex = [{
-      date: "2025-06-01",
-      models: ["gpt-5-codex"],
-      inputTokens: 2000, outputTokens: 800,
-      cacheCreationTokens: 0, cacheReadTokens: 0,
-      totalTokens: 2800, costUSD: 3.0,
-    }];
-
-    const merged = mergeEntries([], codex);
-    expect(merged).toHaveLength(1);
-    expect(merged[0]!.costUSD).toBe(3.0);
-    expect(merged[0]!.modelBreakdown).toEqual([
-      { model: "gpt-5-codex", cost_usd: 3.0 },
-    ]);
+    expect(merged.map((entry) => entry.date)).toEqual(["2026-03-12", "2026-03-13"]);
   });
 
-  it("distributes cost evenly across multiple models from same source", () => {
-    const claude = [{
-      date: "2025-06-01",
-      models: ["claude-opus-4-20250505", "claude-sonnet-4-20250514"],
-      inputTokens: 1000, outputTokens: 500,
-      cacheCreationTokens: 0, cacheReadTokens: 0,
-      totalTokens: 1500, costUSD: 10.0,
-    }];
+  it("distributes cost across models when no source breakdown is available", () => {
+    const merged = mergeEntries(
+      [usageEntry("2026-03-13", { models: ["a", "b"], costUSD: 4 })],
+      [],
+    );
 
-    const merged = mergeEntries(claude, []);
     expect(merged[0]!.modelBreakdown).toEqual([
-      { model: "claude-opus-4-20250505", cost_usd: 5.0 },
-      { model: "claude-sonnet-4-20250514", cost_usd: 5.0 },
+      { model: "a", cost_usd: 2 },
+      { model: "b", cost_usd: 2 },
     ]);
   });
-
-  it("returns sorted by date", () => {
-    const claude = [{
-      date: "2025-06-03",
-      models: ["claude-opus-4-20250505"],
-      inputTokens: 0, outputTokens: 0,
-      cacheCreationTokens: 0, cacheReadTokens: 0,
-      totalTokens: 0, costUSD: 1.0,
-    }];
-    const codex = [{
-      date: "2025-06-01",
-      models: ["gpt-5-codex"],
-      inputTokens: 0, outputTokens: 0,
-      cacheCreationTokens: 0, cacheReadTokens: 0,
-      totalTokens: 0, costUSD: 2.0,
-    }];
-
-    const merged = mergeEntries(claude, codex);
-    expect(merged[0]!.date).toBe("2025-06-01");
-    expect(merged[1]!.date).toBe("2025-06-03");
-  });
-
-  it("handles both sources empty", () => {
-    const merged = mergeEntries([], []);
-    expect(merged).toEqual([]);
-  });
 });
diff --git a/packages/cli/__tests__/flows/cli-sync-flow.test.ts b/packages/cli/__tests__/flows/cli-sync-flow.test.ts
index f96d9c91..4d7f4a39 100644
--- a/packages/cli/__tests__/flows/cli-sync-flow.test.ts
+++ b/packages/cli/__tests__/flows/cli-sync-flow.test.ts
@@ -145,10 +145,45 @@ function ccusageJson(dates: string[]) {
   });
 }
 
+function ccusageCodexJson(dates: string[]) {
+  return JSON.stringify({
+    daily: dates.map((date) => ({
+      date,
+      inputTokens: 2000,
+      outputTokens: 800,
+      cachedInputTokens: 0,
+      reasoningOutputTokens: 0,
+      totalTokens: 2800,
+      costUSD: 3.0,
+      models: {
+        "gpt-5-codex": {
+          inputTokens: 2000,
+          cachedInputTokens: 0,
+          outputTokens: 800,
+          reasoningOutputTokens: 0,
+          totalTokens: 2800,
+          isFallback: false,
+        },
+      },
+    })),
+    totals: {},
+  });
+}
+
 function mockCcusageOnly(json: string) {
   mockExecFileSync.mockImplementation(((cmd: string, args: string[]) => {
+    if (args.includes("--version")) return "ccusage 20.0.6";
+    if (args.includes("codex")) return "[]";
     return json;
-  }) as typeof execFileSync);
+  }) as never);
+}
+
+function mockCcusageSources(claudeJson: string, codexJson = "[]") {
+  mockExecFileSync.mockImplementation(((cmd: string, args: string[]) => {
+    if (args.includes("--version")) return "ccusage 20.0.6";
+    if (args.includes("codex")) return codexJson;
+    return claudeJson;
+  }) as never);
 }
 
 function codexOutput(dates: string[] = [], extra: Record<string, unknown> = {}) {
@@ -198,6 +233,10 @@ function mockSuccessfulSubmit(dates: string[]) {
 beforeEach(() => {
   vi.useFakeTimers({ now: new Date('2026-03-13T12:00:00Z'), toFake: ['Date'] });
   vi.clearAllMocks();
+  mockFetch.mockReset();
+  mockExecFileSync.mockReset();
+  mockCollectCodexUsageAsync.mockReset();
+  mockHasCodexLogs.mockReset();
   _resetCcusageResolver();
   mockHasCodexLogs.mockResolvedValue(false);
   mockCollectCodexUsageAsync.mockResolvedValue(codexOutput());
@@ -282,7 +321,7 @@ describe("sync flow", () => {
 
     // Re-syncs today's data (1 API call)
     expect(mockFetch).toHaveBeenCalledTimes(2);
-    expect(mockExecFileSync).toHaveBeenCalledTimes(1);
+    expect(mockExecFileSync).toHaveBeenCalledTimes(3);
     const saved = readPersistedConfig();
     expect(saved.last_push_date).toBe(today);
   });
@@ -297,7 +336,7 @@ describe("sync flow", () => {
 
     await pushCommand({});
 
-    expect(mockExecFileSync).toHaveBeenCalledTimes(1);
+    expect(mockExecFileSync).toHaveBeenCalledTimes(3);
     expect(mockFetch).toHaveBeenCalledTimes(2);
 
     const saved = readPersistedConfig();
@@ -313,10 +352,10 @@ describe("sync flow", () => {
 
     await pushCommand({});
 
-    expect(mockExecFileSync).toHaveBeenCalledTimes(1);
-    // calls[0] = actual ccusage daily
-    const args = mockExecFileSync.mock.calls[0]!;
-    // ccusage is called with: ["daily", "--json", "--since", ..., "--until", ...]
+    expect(mockExecFileSync).toHaveBeenCalledTimes(3);
+    const args = mockExecFileSync.mock.calls.find(([, argv]) =>
+      Array.isArray(argv) && argv.includes("claude")
+    )!;
     const sinceIdx = (args[1] as string[]).indexOf("--since");
     const sinceDate = (args[1] as string[])[sinceIdx + 1]!;
     // Since date should be 6 days ago (7 days including today)
@@ -335,8 +374,7 @@ describe("Codex integration", () => {
   it("merges Claude + Codex data when both are available", async () => {
     seedConfig();
     const today = todayStr();
-    mockCcusageOnly(ccusageJson([today]));
-    mockCollectCodexUsageAsync.mockResolvedValue(codexOutput([today]));
+    mockCcusageSources(ccusageJson([today]), ccusageCodexJson([today]));
     mockSuccessfulSubmit([today]);
 
     await pushCommand({});
@@ -361,17 +399,17 @@ describe("Codex integration", () => {
     expect(data.modelBreakdown).toContainEqual({ model: "claude-sonnet-4-6", cost_usd: 0.05 });
     expect(data.modelBreakdown).toContainEqual({ model: "gpt-5-codex", cost_usd: 3.0 });
     expect(body.collector).toEqual({
-      claude: "ccusage-v18",
-      codex: "straude-codex-native-last-token-usage",
+      claude: "ccusage-claude-v20",
+      codex: "ccusage-codex-v20",
     });
   });
 
-  it("hash includes Claude raw JSON and Codex native fingerprint", async () => {
+  it("hash includes source-tagged Claude and Codex raw JSON", async () => {
     seedConfig();
     const today = todayStr();
     const ccRaw = ccusageJson([today]);
-    mockCcusageOnly(ccRaw);
-    mockCollectCodexUsageAsync.mockResolvedValue(codexOutput([today], { fingerprint: "native-fp" }));
+    const codexRaw = ccusageCodexJson([today]);
+    mockCcusageSources(ccRaw, codexRaw);
     mockSuccessfulSubmit([today]);
 
     await pushCommand({});
@@ -379,9 +417,10 @@ describe("Codex integration", () => {
     const [, options] = mockFetch.mock.calls[0]!;
     const body = JSON.parse(options.body);
 
-    // Hash should be SHA-256 of Claude raw JSON plus native aggregate fingerprint.
     const { createHash } = await import("node:crypto");
-    const expectedHash = createHash("sha256").update(ccRaw + "native-fp").digest("hex");
+    const expectedHash = createHash("sha256")
+      .update(`claude\0${ccRaw}\0codex\0${codexRaw}`)
+      .digest("hex");
     expect(body.hash).toBe(expectedHash);
   });
 
@@ -389,8 +428,7 @@ describe("Codex integration", () => {
     seedConfig();
     const today = todayStr();
 
-    mockCcusageOnly("[]");
-    mockCollectCodexUsageAsync.mockResolvedValue(codexOutput([today]));
+    mockCcusageSources("[]", ccusageCodexJson([today]));
 
     mockSuccessfulSubmit([today]);
 
@@ -404,14 +442,13 @@ describe("Codex integration", () => {
     expect(data.models).toEqual(["gpt-5-codex"]);
     expect(data.costUSD).toBe(3.0);
     expect(data.modelBreakdown).toEqual([{ model: "gpt-5-codex", cost_usd: 3.0 }]);
-    expect(body.collector).toEqual({ codex: "straude-codex-native-last-token-usage" });
+    expect(body.collector).toEqual({ codex: "ccusage-codex-v20" });
   });
 
   it("dry-run fetches dashboard but skips submit", async () => {
     seedConfig();
     const today = todayStr();
     mockCcusageOnly(ccusageJson([today]));
-    mockCollectCodexUsageAsync.mockResolvedValue(codexOutput([today]));
 
     await pushCommand({ dryRun: true });
 
@@ -451,21 +488,18 @@ describe("Codex integration", () => {
     const today = todayStr();
 
     mockExecFileSync.mockImplementation(((cmd: string, args: string[]) => {
+      if (args.includes("--version")) return "ccusage 20.0.6";
+      if (args.includes("codex")) return ccusageCodexJson([today]);
       throw new Error(`No valid Claude data directories found. Please ensure at least one of the following exists:
 - /Users/test/.config/claude/projects
 - /Users/test/.claude/projects`);
-    }) as typeof execFileSync);
-    mockCollectCodexUsageAsync.mockResolvedValue(codexOutput([today]));
+    }) as never);
 
     mockSuccessfulSubmit([today]);
 
     await pushCommand({});
 
     expect(mockFetch).toHaveBeenCalledTimes(2);
-    expect(console.log).toHaveBeenCalledWith(
-      "No Claude Code data found locally; syncing Codex usage only.",
-    );
-
     const [, options] = mockFetch.mock.calls[0]!;
     const body = JSON.parse(options.body);
     const data = body.entries[0].data;
@@ -697,7 +731,7 @@ describe("config persistence", () => {
 
   it("does not save last_push_date when no data found", async () => {
     seedConfig();
-    mockExecFileSync.mockReturnValue("[]");
+    mockCcusageOnly("[]");
 
     await pushCommand({});
 
@@ -779,7 +813,7 @@ describe("ccusage failures during flow", () => {
 
     await expect(pushCommand({})).rejects.toThrow(ExitError);
     expect(console.error).toHaveBeenCalledWith(
-      expect.stringContaining("ccusage failed"),
+      expect.stringContaining("Failed to validate bundled ccusage version"),
     );
   });
 
diff --git a/packages/cli/__tests__/pick-install-command.test.ts b/packages/cli/__tests__/pick-install-command.test.ts
deleted file mode 100644
index 56825659..00000000
--- a/packages/cli/__tests__/pick-install-command.test.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { pickInstallCommand } from "../src/lib/ccusage.js";
-
-describe("pickInstallCommand", () => {
-  it("uses bun when bun is available", () => {
-    expect(pickInstallCommand({ hasBun: true })).toEqual({
-      cmd: "bun",
-      args: ["add", "-g", "ccusage"],
-      manager: "bun",
-    });
-  });
-
-  it("falls back to npm when bun is missing", () => {
-    expect(pickInstallCommand({ hasBun: false })).toEqual({
-      cmd: "npm",
-      args: ["install", "-g", "ccusage"],
-      manager: "npm",
-    });
-  });
-
-  it("hardcodes the package name (no string interpolation)", () => {
-    // Regression guard: a refactor that lets a caller pass the package name
-    // would let an attacker who controls config inject `--config-set` etc.
-    // The signature only accepts boolean env state, so this stays sealed.
-    const npm = pickInstallCommand({ hasBun: false });
-    expect(npm.args).toContain("ccusage");
-    expect(npm.args).not.toContain("");
-  });
-});
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 26cb3727..8a503fbd 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -30,6 +30,7 @@
   },
   "dependencies": {
     "@pppp606/ink-chart": "^0.2.4",
+    "ccusage": "20.0.6",
     "chalk": "^5.6.2",
     "ink": "^6.8.0",
     "posthog-node": "^5.29.1",
diff --git a/packages/cli/src/commands/push.ts b/packages/cli/src/commands/push.ts
index 349795fc..698ed52e 100755
--- a/packages/cli/src/commands/push.ts
+++ b/packages/cli/src/commands/push.ts
@@ -4,13 +4,15 @@ import { loadConfig, updateLastPushDate, saveConfig } from "../lib/auth.js";
 import type { StraudeConfig } from "../lib/auth.js";
 import { loginCommand } from "./login.js";
 import { apiRequest } from "../lib/api.js";
-import { runCcusageRawAsync, parseCcusageOutput, ensureCcusageInstalled } from "../lib/ccusage.js";
-import type { CcusageDailyEntry, ModelBreakdownEntry } from "../lib/ccusage.js";
 import {
-  CODEX_NATIVE_COLLECTOR,
-  collectCodexUsageAsync,
-  containsSessionFile,
-} from "../lib/codex-native.js";
+  CCUSAGE_CLAUDE_COLLECTOR,
+  CCUSAGE_CODEX_COLLECTOR,
+  runCcusageAgentRawAsync,
+  parseCcusageOutput,
+  ensureCcusageInstalled,
+} from "../lib/ccusage.js";
+import type { CcusageAgent, CcusageDailyEntry, CcusageOutput, ModelBreakdownEntry } from "../lib/ccusage.js";
+import { containsSessionFile } from "../lib/codex-native.js";
 import { MAX_BACKFILL_DAYS, DEFAULT_SYNC_DAYS } from "../config.js";
 import { Spinner } from "../lib/spinner.js";
 import type { DashboardData as DashboardResponse } from "../components/PushSummary.js";
@@ -32,8 +34,8 @@ interface UsageSubmitRequest {
   }>;
   hash?: string;
   collector?: {
-    claude?: "ccusage-v18";
-    codex?: typeof CODEX_NATIVE_COLLECTOR;
+    claude?: typeof CCUSAGE_CLAUDE_COLLECTOR;
+    codex?: typeof CCUSAGE_CODEX_COLLECTOR;
   };
   source: "cli" | "web";
   device_id?: string;
@@ -60,13 +62,19 @@ interface PushOptions {
   timeoutMs?: number;
 }
 
-function isMissingClaudeDataError(error: Error): boolean {
-  return error.message.includes("No valid Claude data directories found");
-}
-
-function isCcusageNotInstalledError(error: Error): boolean {
-  return error.message.includes("ccusage is not installed or not on PATH");
-}
+type SourceScan =
+  | {
+    ok: true;
+    agent: CcusageAgent;
+    raw: string;
+    parsed: CcusageOutput;
+  }
+  | {
+    ok: false;
+    agent: CcusageAgent;
+    error: Error;
+    missingData: boolean;
+  };
 
 function formatDate(d: Date): string {
   const y = d.getFullYear();
@@ -234,6 +242,36 @@ export function mergeEntries(
   return merged;
 }
 
+function isMissingSourceDataError(err: Error): boolean {
+  return /(?:no valid|no|missing).{0,80}(?:data|jsonl|session|director(?:y|ies))|(?:data|jsonl|session|director(?:y|ies)).{0,80}(?:not found|missing)/i
+    .test(err.message);
+}
+
+async function scanCcusageSource(
+  agent: CcusageAgent,
+  sinceStr: string,
+  untilStr: string,
+  timeoutMs?: number,
+): Promise<SourceScan> {
+  try {
+    const raw = await runCcusageAgentRawAsync(agent, sinceStr, untilStr, timeoutMs);
+    return {
+      ok: true,
+      agent,
+      raw,
+      parsed: parseCcusageOutput(raw, agent),
+    };
+  } catch (err) {
+    const error = err instanceof Error ? err : new Error(String(err));
+    return {
+      ok: false,
+      agent,
+      error,
+      missingData: isMissingSourceDataError(error),
+    };
+  }
+}
+
 export async function pushCommand(options: PushOptions, apiUrlOverride?: string): Promise<void> {
   let config = loadConfig();
 
@@ -290,80 +328,38 @@ export async function pushCommand(options: PushOptions, apiUrlOverride?: string)
       : `Pushing usage for ${formatDate(sinceDate)} to ${formatDate(untilDate)}...`,
   );
 
-  // Try to ensure ccusage is installed. In a TTY this prompts the user and
-  // runs `bun add -g` / `npm install -g`. We catch the throw rather than
-  // propagating it: Codex-only users (no Claude data) shouldn't be blocked by
-  // a missing ccusage. If ccusage is genuinely required, the runCcusage call
-  // below will surface the "not installed" error and we treat it the same as
-  // missing Claude data.
-  let ccusageReady = true;
   try {
     await ensureCcusageInstalled(config);
-  } catch {
-    ccusageReady = false;
+  } catch (err) {
+    console.error((err as Error).message);
+    process.exit(1);
   }
 
-  // Run ccusage + codex in parallel — the single biggest perf win
   const scanSpinner = new Spinner("scan");
   scanSpinner.start();
-  let codexCollectFailed = false;
-  const [claudeResult, codexParsed] = await Promise.all([
-    ccusageReady
-      ? runCcusageRawAsync(sinceStr, untilStr, options.timeoutMs).catch((err: Error) => err)
-      : Promise.resolve(
-          new Error("ccusage is not installed or not on PATH"),
-        ),
-    collectCodexUsageAsync(sinceStr, untilStr).catch(() => {
-      codexCollectFailed = true;
-      return {
-        data: [],
-        anomalies: [],
-        entryMeta: [],
-        fingerprint: "",
-        scannedFiles: 0,
-        parsedEvents: 0,
-      };
-    }),
+  const scans = await Promise.all([
+    scanCcusageSource("claude", sinceStr, untilStr, options.timeoutMs),
+    scanCcusageSource("codex", sinceStr, untilStr, options.timeoutMs),
   ]);
   scanSpinner.stop();
 
-  let claudeRaw = "";
-  let claudeEntries: CcusageDailyEntry[] = [];
-  let claudeAnomalies: NormalizationAnomaly[] = [];
-
-  if (claudeResult instanceof Error) {
-    // Codex-only users do not have local Claude data; keep other Claude failures fatal.
-    if (
-      isMissingClaudeDataError(claudeResult) ||
-      isCcusageNotInstalledError(claudeResult)
-    ) {
-      console.log("No Claude Code data found locally; syncing Codex usage only.");
-    } else {
-      console.error(claudeResult.message);
-      process.exit(1);
-    }
-  } else {
-    claudeRaw = claudeResult;
-    try {
-      const parsed = parseCcusageOutput(claudeRaw);
-      claudeEntries = parsed.data;
-      claudeAnomalies = parsed.anomalies ?? [];
-    } catch (err) {
-      console.error((err as Error).message);
-      process.exit(1);
-    }
+  const fatalScan = scans.find((scan) => !scan.ok && !scan.missingData);
+  if (fatalScan && !fatalScan.ok) {
+    console.error(fatalScan.error.message);
+    process.exit(1);
   }
 
+  const successfulScans = scans.filter((scan): scan is Extract<SourceScan, { ok: true }> => scan.ok);
+
   // Token-normalization anomalies are diagnostic, not user-actionable: rows
   // tagged medium/low confidence still get pushed (we just had to infer
   // cache semantics). Only `mode === "unresolved"` rows are dropped, and
   // those have their own warning below. So keep these counts quiet by
   // default and surface them only under --debug; ship the counts to PostHog
   // either way so we can monitor normalization quality across users.
-  const allAnomalies: NormalizationAnomaly[] = [
-    ...claudeAnomalies,
-    ...(codexParsed.anomalies ?? []),
-  ];
+  const allAnomalies: NormalizationAnomaly[] = successfulScans.flatMap(
+    (scan) => scan.parsed.anomalies ?? [],
+  );
   const anomalyCounts = countAnomalies(allAnomalies);
 
   if (isDebug() && anomalyCounts.mediumLow > 0) {
@@ -381,34 +377,23 @@ export async function pushCommand(options: PushOptions, apiUrlOverride?: string)
     }
   }
 
-  const codexMetaByDate = new Map((codexParsed.entryMeta ?? []).map((row) => [row.date, row.meta]));
-  const blockedDates = new Set<string>();
-
-  for (const [date, meta] of codexMetaByDate) {
-    if (meta.mode === "unresolved") {
-      blockedDates.add(date);
-    }
-  }
-
-  if (blockedDates.size > 0) {
-    const blocked = [...blockedDates].sort();
-    const reason = "unresolved codex normalization";
-    console.log(`Warning: skipping Codex rows for ${blocked.length} date(s) due to ${reason}: ${blocked.join(", ")}`);
-  }
-
-  const codexEntries = codexParsed.data.filter((entry) => !blockedDates.has(entry.date));
-
-  // Merge Claude + Codex entries by date
-  const merged = mergeEntries(claudeEntries, codexEntries);
-
   // Drop entries the server would reject as out-of-window. Pre-filtering keeps
   // a single edge-case row from failing the whole batch with HTTP 400.
   const droppedDates: string[] = [];
-  const entries = merged.filter((entry) => {
+  const filterEntry = (entry: CcusageDailyEntry) => {
     if (isWithinBackfillWindow(entry.date)) return true;
     droppedDates.push(entry.date);
     return false;
-  });
+  };
+  const claudeEntries = successfulScans
+    .filter((scan) => scan.agent === "claude")
+    .flatMap((scan) => scan.parsed.data)
+    .filter(filterEntry);
+  const codexEntries = successfulScans
+    .filter((scan) => scan.agent === "codex")
+    .flatMap((scan) => scan.parsed.data)
+    .filter(filterEntry);
+  const entries = mergeEntries(claudeEntries, codexEntries);
   if (droppedDates.length > 0) {
     console.log(
       `Note: skipping ${droppedDates.length} date(s) outside the ${MAX_BACKFILL_DAYS}-day backfill window: ${droppedDates.join(", ")}`,
@@ -433,12 +418,12 @@ export async function pushCommand(options: PushOptions, apiUrlOverride?: string)
     return;
   }
 
-  // Compute SHA-256 hash of Claude raw JSON plus native Codex aggregate fingerprint.
-  const hashInput = codexParsed.fingerprint ? claudeRaw + codexParsed.fingerprint : claudeRaw;
-  const hash = createHash("sha256").update(hashInput).digest("hex");
+  const hash = createHash("sha256")
+    .update(successfulScans.map((scan) => `${scan.agent}\0${scan.raw}`).join("\0"))
+    .digest("hex");
   const collector: UsageSubmitRequest["collector"] = {};
-  if (claudeEntries.length > 0) collector.claude = "ccusage-v18";
-  if (codexEntries.length > 0) collector.codex = CODEX_NATIVE_COLLECTOR;
+  if (claudeEntries.length > 0) collector.claude = CCUSAGE_CLAUDE_COLLECTOR;
+  if (codexEntries.length > 0) collector.codex = CCUSAGE_CODEX_COLLECTOR;
 
   const body: UsageSubmitRequest = {
     entries: entries.map((entry) => ({
@@ -493,7 +478,7 @@ export async function pushCommand(options: PushOptions, apiUrlOverride?: string)
     (latest, e) => (e.date > latest ? e.date : latest),
     entries[0]!.date,
   );
-  if (shouldRunCodexRepair && !codexCollectFailed && blockedDates.size === 0) {
+  if (shouldRunCodexRepair) {
     const stamp = new Date().toISOString();
     config.codex_native_repair_completed_at = stamp;
     config.codex_native_last_token_usage_repair_completed_at = stamp;
diff --git a/packages/cli/src/lib/ccusage.ts b/packages/cli/src/lib/ccusage.ts
index 4fd2b56c..08ffc5bf 100755
--- a/packages/cli/src/lib/ccusage.ts
+++ b/packages/cli/src/lib/ccusage.ts
@@ -1,6 +1,5 @@
-import { execFileSync, execFile as execFileCb } from "node:child_process";
-import { existsSync } from "node:fs";
-import { delimiter, join } from "node:path";
+import { execFile as execFileCb, execFileSync } from "node:child_process";
+import { createRequire } from "node:module";
 import {
   normalizeTokenBuckets,
   summarizeNormalization,
@@ -10,172 +9,157 @@ import {
   type TokenNormalizationMode,
 } from "./token-normalization.js";
 import { DEFAULT_SUBPROCESS_TIMEOUT_MS } from "../config.js";
-import { isInteractive, promptYesNo } from "./prompt.js";
-import { posthog } from "./posthog.js";
-import { getDistinctId } from "./machine-id.js";
 import type { StraudeConfig } from "./auth.js";
 
+export const CCUSAGE_MIN_VERSION = "20.0.5";
+export const CCUSAGE_CLAUDE_COLLECTOR = "ccusage-claude-v20" as const;
+export const CCUSAGE_CODEX_COLLECTOR = "ccusage-codex-v20" as const;
+
+const require = createRequire(import.meta.url);
+const SUPPORTED_AGENTS = ["claude", "codex"] as const;
+
+export type CcusageAgent = (typeof SUPPORTED_AGENTS)[number];
+
 /** Type-safe representation of the error thrown by execFileSync / execFile. */
 interface ExecError extends Error {
   code?: string;
   status?: number | null;
-  stderr?: string;
+  stderr?: string | Buffer;
+  stdout?: string | Buffer;
   signal?: string | null;
   killed?: boolean;
 }
 
-/** Resolved ccusage command. Cached after first resolution. */
-let _resolved: { cmd: string; args: string[] } | undefined;
+/** Resolved bundled ccusage command. Cached after first resolution. */
+let _resolved: { cmd: string; args: string[]; version: string } | undefined;
 
-/** Check if a binary exists on PATH without spawning a subprocess. */
-function isOnPath(binary: string): boolean {
-  const dirs = (process.env.PATH || "").split(delimiter);
-  const suffixes = process.platform === "win32" ? ["", ".cmd", ".exe"] : [""];
-  return dirs.some((dir) =>
-    suffixes.some((ext) => existsSync(join(dir, binary + ext))),
-  );
+function resolveCcusageBin(): string {
+  try {
+    return require.resolve("ccusage/dist/cli.js");
+  } catch (err) {
+    throw new Error(
+      "Bundled ccusage dependency is missing. Reinstall Straude or run `bun install` and retry.",
+      { cause: err },
+    );
+  }
+}
+
+function parseVersion(raw: string): string | null {
+  return raw.match(/\b(\d+)\.(\d+)\.(\d+)(?:[-+][0-9A-Za-z.-]+)?\b/)?.[0] ?? null;
+}
+
+function compareVersions(a: string, b: string): number {
+  const aParts = a.split(/[.-]/).slice(0, 3).map((part) => Number(part));
+  const bParts = b.split(/[.-]/).slice(0, 3).map((part) => Number(part));
+  for (let i = 0; i < 3; i += 1) {
+    const diff = (aParts[i] ?? 0) - (bParts[i] ?? 0);
+    if (diff !== 0) return diff;
+  }
+  return 0;
+}
+
+export function validateCcusageVersion(version: string): void {
+  if (compareVersions(version, CCUSAGE_MIN_VERSION) < 0) {
+    throw new Error(
+      `ccusage ${CCUSAGE_MIN_VERSION} or newer is required; found ${version}.`,
+    );
+  }
+}
+
+function readRuntimeVersion(cmd: string, args: string[]): string {
+  let raw: string;
+  try {
+    raw = execFileSync(cmd, [...args, "--version"], {
+      encoding: "utf-8",
+      timeout: DEFAULT_SUBPROCESS_TIMEOUT_MS,
+      maxBuffer: 1024 * 1024,
+      shell: process.platform === "win32",
+    });
+  } catch (err) {
+    const error = err as ExecError;
+    const detail = bufferToString(error.stderr).trim() || error.message || "unknown error";
+    throw new Error(`Failed to validate bundled ccusage version: ${detail}`);
+  }
+
+  const version = parseVersion(raw);
+  if (!version) {
+    throw new Error(`Failed to parse bundled ccusage version from: ${raw.trim() || "<empty>"}`);
+  }
+  validateCcusageVersion(version);
+  return version;
 }
 
 /**
- * Resolve how to run ccusage.
- * For security reasons we only execute an explicitly installed `ccusage`
- * binary from PATH and do not auto-install/execute package-runner fallbacks.
+ * Resolve how to run the bundled ccusage dependency. We intentionally do not
+ * look on PATH: Straude ships an exact ccusage dependency and executes that
+ * package's declared bin through the current Node runtime.
  */
-function resolveCcusageCommand(): { cmd: string; args: string[] } {
+function resolveCcusageCommand(): { cmd: string; args: string[]; version: string } {
   if (_resolved) return _resolved;
 
-  // Check if ccusage binary exists on PATH (pure fs, no subprocess)
-  if (isOnPath("ccusage")) {
-    _resolved = { cmd: "ccusage", args: [] };
-    return _resolved;
-  }
+  const binPath = resolveCcusageBin();
+  const cmd = process.execPath;
+  const args = [binPath];
+  const version = readRuntimeVersion(cmd, args);
 
-  throw new Error(
-    "ccusage is not installed or not on PATH. Install it globally and retry (e.g. `npm install -g ccusage`).",
-  );
+  _resolved = { cmd, args, version };
+  return _resolved;
 }
 
-/** Reset resolver cache — for testing only. */
+/** Reset resolver cache - for testing only. */
 export function _resetCcusageResolver(): void {
   _resolved = undefined;
 }
 
-/** Whether ccusage is currently resolvable on PATH. */
+/** Whether the bundled ccusage dependency is currently resolvable and new enough. */
 export function isCcusageInstalled(): boolean {
-  return isOnPath("ccusage");
-}
-
-/**
- * Pick the right global-install command for ccusage. Pure: takes a snapshot of
- * environment state and returns the command/args to run. Extracted so the
- * decision logic is unit-testable without spawning processes or mocking PATH.
- */
-export function pickInstallCommand(env: { hasBun: boolean }): { cmd: string; args: string[]; manager: "bun" | "npm" } {
-  if (env.hasBun) {
-    return { cmd: "bun", args: ["add", "-g", "ccusage"], manager: "bun" };
+  try {
+    resolveCcusageCommand();
+    return true;
+  } catch {
+    return false;
   }
-  return { cmd: "npm", args: ["install", "-g", "ccusage"], manager: "npm" };
-}
-
-/**
- * Best-effort install of ccusage globally. Prefers `bun add -g` when bun is
- * present (faster, and Straude is bun-first), falls back to `npm install -g`.
- * stdio is inherited so the user sees install progress.
- */
-function installCcusage(): void {
-  const { cmd, args } = pickInstallCommand({ hasBun: isOnPath("bun") });
-  execFileSync(cmd, args, {
-    stdio: "inherit",
-    timeout: 5 * 60 * 1000,
-    // npm/bun on Windows are .cmd shims; execFileSync skips PATHEXT lookup.
-    shell: process.platform === "win32",
-  });
 }
 
 /**
- * Make sure ccusage is installed and runnable. If missing and we're attached to
- * an interactive TTY, prompt to install. Non-TTY callers (auto-push, CI) get
- * the same throw as before so they can recover by installing manually.
- *
- * Pass `config` so PostHog events are attributed to the logged-in user when
- * possible; falls back to the machine UUID otherwise.
+ * Kept for the push command's existing call site. With bundled ccusage there is
+ * nothing to install at runtime; this validates that the packaged binary exists
+ * and satisfies the minimum supported version.
  */
 export async function ensureCcusageInstalled(
-  config: StraudeConfig | null = null,
+  _config: StraudeConfig | null = null,
 ): Promise<void> {
-  if (isCcusageInstalled()) return;
-
-  const distinctId = getDistinctId(config);
-
-  if (!isInteractive()) {
-    posthog.capture({
-      distinctId,
-      event: "ccusage_install_skipped",
-      properties: { reason: "non_interactive" },
-    });
-    throw new Error(
-      "ccusage is not installed or not on PATH. Install it globally and retry (e.g. `npm install -g ccusage`).",
-    );
-  }
-
-  console.log("\nStraude needs `ccusage` to read your Claude Code usage.");
-  const accepted = await promptYesNo(
-    "Install ccusage globally now? [Y/n] ",
-    true,
-  );
-
-  if (!accepted) {
-    posthog.capture({
-      distinctId,
-      event: "ccusage_install_declined",
-    });
-    throw new Error(
-      "ccusage is required. Install it manually with `npm install -g ccusage` and run straude again.",
-    );
-  }
-
-  posthog.capture({
-    distinctId,
-    event: "ccusage_install_attempted",
-    properties: { manager: pickInstallCommand({ hasBun: isOnPath("bun") }).manager },
-  });
+  resolveCcusageCommand();
+}
 
-  try {
-    installCcusage();
-  } catch (err) {
-    posthog.capture({
-      distinctId,
-      event: "ccusage_install_failed",
-      properties: { error: (err as Error).message?.slice(0, 200) ?? "unknown" },
-    });
-    throw new Error(
-      `Failed to install ccusage automatically: ${(err as Error).message}\n` +
-        "Install it manually with `npm install -g ccusage` and run straude again.",
-    );
-  }
+function bufferToString(value: string | Buffer | undefined): string {
+  if (typeof value === "string") return value;
+  if (Buffer.isBuffer(value)) return value.toString("utf-8");
+  return "";
+}
 
-  // Reset resolver cache so the freshly installed binary is picked up.
-  _resolved = undefined;
+function hasMissingPricingError(stderr: string): boolean {
+  return /(?:missing|unavailable|not found).{0,80}pric|pric.{0,80}(?:missing|unavailable|not found)|no-offline/i.test(stderr);
+}
 
-  if (!isCcusageInstalled()) {
-    posthog.capture({
-      distinctId,
-      event: "ccusage_install_failed",
-      properties: { error: "not_on_path_after_install" },
-    });
-    throw new Error(
-      "ccusage installed but not found on PATH. You may need to open a new shell, then re-run straude.",
-    );
-  }
+function commandHint(args: string[]): string {
+  return `ccusage ${args.join(" ")}`;
+}
 
-  posthog.capture({
-    distinctId,
-    event: "ccusage_install_succeeded",
-  });
-  console.log("ccusage installed successfully.\n");
+function ccusageArgs(agent: CcusageAgent, sinceDate: string, untilDate: string): string[] {
+  return [
+    agent,
+    "daily",
+    "--json",
+    "--since",
+    sinceDate,
+    "--until",
+    untilDate,
+    "--no-offline",
+  ];
 }
 
-/** Run ccusage via the resolved binary. */
+/** Run ccusage via the resolved bundled binary. */
 function execCcusage(args: string[], timeoutMs?: number): string {
   const { cmd, args: prefix } = resolveCcusageCommand();
   const cmdArgs = [...prefix, ...args];
@@ -191,42 +175,54 @@ function execCcusage(args: string[], timeoutMs?: number): string {
     const error = err as ExecError;
 
     if (error.killed || error.signal === "SIGTERM") {
-      const hint = `${cmd} ${[...prefix, "daily", "--json"].join(" ")}`;
       throw new Error(
-        `ccusage timed out. Try running \`${hint}\` directly to verify it works.`,
+        `ccusage timed out. Try running \`${commandHint(args)}\` directly to verify it works.`,
       );
     }
 
-    const detail = error.stderr?.trim() || error.message || "unknown error";
+    const detail = bufferToString(error.stderr).trim() || error.message || "unknown error";
+    if (hasMissingPricingError(detail)) {
+      throw new Error(`ccusage failed because pricing data is unavailable with --no-offline: ${detail}`);
+    }
     throw new Error(`ccusage failed: ${detail}`);
   }
 }
 
-/** Async version of execCcusage — runs ccusage in a child process without blocking. */
+/** Async version of execCcusage - runs ccusage in a child process without blocking. */
 function execCcusageAsync(args: string[], timeoutMs?: number): Promise<string> {
   const { cmd, args: prefix } = resolveCcusageCommand();
   const cmdArgs = [...prefix, ...args];
 
-  return new Promise((resolve, reject) => {
+  return new Promise((resolvePromise, reject) => {
     execFileCb(cmd, cmdArgs, {
       encoding: "utf-8",
       timeout: timeoutMs ?? DEFAULT_SUBPROCESS_TIMEOUT_MS,
       maxBuffer: 10 * 1024 * 1024,
       shell: process.platform === "win32",
-    }, (err, stdout) => {
+    }, (err, stdout, stderr) => {
+      const stderrText = typeof stderr === "string" ? stderr : bufferToString(stderr);
       if (!err) {
-        resolve(stdout);
+        if (hasMissingPricingError(stderrText)) {
+          reject(new Error(`ccusage failed because pricing data is unavailable with --no-offline: ${stderrText.trim()}`));
+          return;
+        }
+        resolvePromise(stdout);
         return;
       }
+
       const error = err as ExecError;
       if (error.killed || error.signal === "SIGTERM") {
-        const hint = `${cmd} ${[...prefix, "daily", "--json"].join(" ")}`;
         reject(new Error(
-          `ccusage timed out. Try running \`${hint}\` directly to verify it works.`,
+          `ccusage timed out. Try running \`${commandHint(args)}\` directly to verify it works.`,
         ));
         return;
       }
-      const detail = error.stderr?.trim() || error.message || "unknown error";
+
+      const detail = stderrText.trim() || bufferToString(error.stderr).trim() || error.message || "unknown error";
+      if (hasMissingPricingError(detail)) {
+        reject(new Error(`ccusage failed because pricing data is unavailable with --no-offline: ${detail}`));
+        return;
+      }
       reject(new Error(`ccusage failed: ${detail}`));
     });
   });
@@ -252,33 +248,60 @@ export interface CcusageDailyEntry {
   modelBreakdown?: ModelBreakdownEntry[];
 }
 
-/** Raw shape returned by ccusage v18+ (`ccusage daily --json`). */
-interface CcusageV18Entry {
+export interface CcusageRowMetadata {
   date: string;
-  modelsUsed: string[];
-  inputTokens: number;
-  outputTokens: number;
-  cacheCreationTokens: number;
-  cacheReadTokens: number;
-  totalTokens: number;
-  totalCost: number;
-  modelBreakdowns?: Array<{ modelName: string; cost: number }>;
-}
-
-interface CcusageV18Output {
-  daily: CcusageV18Entry[];
-  totals: {
-    inputTokens: number;
-    outputTokens: number;
-    cacheCreationTokens: number;
-    cacheReadTokens: number;
-    totalTokens: number;
-    totalCost: number;
-  };
+  agents: CcusageAgent[];
+}
+
+/** Raw shape returned by `ccusage claude daily --json`. */
+interface CcusageClaudeEntry {
+  date?: unknown;
+  modelsUsed?: unknown;
+  inputTokens?: unknown;
+  outputTokens?: unknown;
+  cacheCreationTokens?: unknown;
+  cacheReadTokens?: unknown;
+  totalTokens?: unknown;
+  totalCost?: unknown;
+  reasoningOutputTokens?: unknown;
+  modelBreakdowns?: unknown;
+}
+
+/** Raw shape returned by `ccusage codex daily --json`. */
+interface CcusageCodexEntry {
+  date?: unknown;
+  inputTokens?: unknown;
+  outputTokens?: unknown;
+  cachedInputTokens?: unknown;
+  cacheCreationTokens?: unknown;
+  totalTokens?: unknown;
+  costUSD?: unknown;
+  reasoningOutputTokens?: unknown;
+  models?: unknown;
+}
+
+/** Raw shape returned by unified `ccusage daily --json`; kept for compatibility. */
+interface CcusageUnifiedEntry {
+  period?: unknown;
+  modelsUsed?: unknown;
+  inputTokens?: unknown;
+  outputTokens?: unknown;
+  cacheCreationTokens?: unknown;
+  cacheReadTokens?: unknown;
+  totalTokens?: unknown;
+  totalCost?: unknown;
+  reasoningOutputTokens?: unknown;
+  modelBreakdowns?: unknown;
+  metadata?: unknown;
+}
+
+interface CcusageV20Output {
+  daily?: unknown;
 }
 
 export interface CcusageOutput {
   data: CcusageDailyEntry[];
+  rowMetadata?: CcusageRowMetadata[];
   anomalies?: NormalizationAnomaly[];
   normalizationSummary?: NormalizationSummary;
 }
@@ -293,57 +316,286 @@ export interface NormalizationAnomaly {
 }
 
 /**
- * Runs `ccusage daily --json` for the given date range and returns parsed output.
+ * Runs source-focused ccusage for the given date range and returns parsed output.
  * Dates should be in YYYYMMDD format (no dashes) as ccusage expects.
  */
-export function runCcusage(sinceDate: string, untilDate: string, timeoutMs?: number): CcusageOutput {
-  const args = ["daily", "--json", "--breakdown", "--since", sinceDate, "--until", untilDate];
-  return parseCcusageOutput(execCcusage(args, timeoutMs));
+export function runCcusage(agent: CcusageAgent, sinceDate: string, untilDate: string, timeoutMs?: number): CcusageOutput {
+  const args = ccusageArgs(agent, sinceDate, untilDate);
+  return parseCcusageOutput(execCcusage(args, timeoutMs), agent);
 }
 
 /** Returns the raw JSON string from ccusage (for hashing). */
-export function runCcusageRaw(sinceDate: string, untilDate: string, timeoutMs?: number): string {
-  const args = ["daily", "--json", "--breakdown", "--since", sinceDate, "--until", untilDate];
+export function runCcusageRaw(agent: CcusageAgent, sinceDate: string, untilDate: string, timeoutMs?: number): string {
+  const args = ccusageArgs(agent, sinceDate, untilDate);
   return execCcusage(args, timeoutMs);
 }
 
-/** Async version — returns raw JSON string without blocking the event loop. */
-export function runCcusageRawAsync(sinceDate: string, untilDate: string, timeoutMs?: number): Promise<string> {
-  const args = ["daily", "--json", "--breakdown", "--since", sinceDate, "--until", untilDate];
+/** Async version - returns raw JSON string without blocking the event loop. */
+export function runCcusageRawAsync(agent: CcusageAgent, sinceDate: string, untilDate: string, timeoutMs?: number): Promise<string> {
+  const args = ccusageArgs(agent, sinceDate, untilDate);
   return execCcusageAsync(args, timeoutMs);
 }
 
-/** Normalize a v18 entry into our canonical format. */
-function normalizeEntry(raw: CcusageV18Entry): { entry: CcusageDailyEntry; meta: NormalizationMeta } {
+export const runCcusageAgentRawAsync = runCcusageRawAsync;
+
+function finiteNumber(value: unknown, field: string, date: string): number {
+  if (typeof value !== "number" || !Number.isFinite(value)) {
+    throw new Error(`Invalid ccusage row for ${date}: ${field} must be a finite number`);
+  }
+  if (value < 0) {
+    throw new Error(`Invalid ccusage row for ${date}: ${field} must be non-negative`);
+  }
+  return value;
+}
+
+function optionalFiniteNumber(value: unknown, field: string, date: string): number | undefined {
+  if (value == null) return undefined;
+  return finiteNumber(value, field, date);
+}
+
+function parseAgents(metadata: unknown, date: string): CcusageAgent[] {
+  const agents = (metadata as { agents?: unknown } | null | undefined)?.agents;
+  if (!Array.isArray(agents) || agents.length === 0) {
+    throw new Error(`Invalid ccusage row for ${date}: metadata.agents must be a non-empty array`);
+  }
+
+  const unique = new Set<CcusageAgent>();
+  for (const agent of agents) {
+    if (!SUPPORTED_AGENTS.includes(agent as CcusageAgent)) {
+      throw new Error(`Unsupported ccusage agent for ${date}: ${String(agent)}`);
+    }
+    unique.add(agent as CcusageAgent);
+  }
+
+  return [...unique];
+}
+
+function parseModelBreakdowns(value: unknown, date: string): ModelBreakdownEntry[] | undefined {
+  if (value == null) return undefined;
+  if (!Array.isArray(value)) {
+    throw new Error(`Invalid ccusage row for ${date}: modelBreakdowns must be an array`);
+  }
+
+  return value.map((rawBreakdown, index) => {
+    const breakdown = rawBreakdown as { modelName?: unknown; cost?: unknown };
+    if (typeof breakdown.modelName !== "string" || breakdown.modelName.length === 0) {
+      throw new Error(`Invalid ccusage row for ${date}: modelBreakdowns[${index}].modelName is required`);
+    }
+    return {
+      model: breakdown.modelName,
+      cost_usd: finiteNumber(breakdown.cost, `modelBreakdowns[${index}].cost`, date),
+    };
+  });
+}
+
+function parseModels(raw: CcusageClaudeEntry | CcusageUnifiedEntry, breakdowns: ModelBreakdownEntry[] | undefined, date: string): string[] {
+  if (Array.isArray(raw.modelsUsed)) {
+    const models = raw.modelsUsed.filter((model): model is string => typeof model === "string" && model.length > 0);
+    if (models.length !== raw.modelsUsed.length) {
+      throw new Error(`Invalid ccusage row for ${date}: modelsUsed must contain only strings`);
+    }
+    return models;
+  }
+
+  if (breakdowns && breakdowns.length > 0) {
+    return [...new Set(breakdowns.map((breakdown) => breakdown.model))];
+  }
+
+  return [];
+}
+
+/** Normalize a unified v20 entry into our canonical format. */
+function normalizeUnifiedEntry(raw: CcusageUnifiedEntry): { entry: CcusageDailyEntry; rowMetadata: CcusageRowMetadata; meta: NormalizationMeta } {
+  if (typeof raw.period !== "string" || raw.period.length === 0) {
+    throw new Error("Invalid ccusage row: period is required");
+  }
+
+  const date = raw.period;
+  const agents = parseAgents(raw.metadata, date);
+  const totalTokens = finiteNumber(raw.totalTokens, "totalTokens", date);
+  const inputTokens = finiteNumber(raw.inputTokens, "inputTokens", date);
+  const outputTokens = finiteNumber(raw.outputTokens, "outputTokens", date);
+  const cacheCreationTokens = finiteNumber(raw.cacheCreationTokens, "cacheCreationTokens", date);
+  const cacheReadTokens = finiteNumber(raw.cacheReadTokens, "cacheReadTokens", date);
+  const residualReasoningTokens = Math.max(
+    0,
+    totalTokens - inputTokens - outputTokens - cacheCreationTokens - cacheReadTokens,
+  );
+  const reasoningOutputTokens = optionalFiniteNumber(raw.reasoningOutputTokens, "reasoningOutputTokens", date)
+    ?? residualReasoningTokens;
+  const modelBreakdown = parseModelBreakdowns(raw.modelBreakdowns, date);
+
   const normalized = normalizeTokenBuckets(
     {
-      inputTokens: raw.inputTokens,
-      outputTokens: raw.outputTokens,
-      cacheCreationTokens: raw.cacheCreationTokens,
-      cacheReadTokens: raw.cacheReadTokens,
-      totalTokens: raw.totalTokens,
+      inputTokens,
+      outputTokens,
+      cacheCreationTokens,
+      cacheReadTokens,
+      totalTokens,
+      reasoningOutputTokens,
     },
     { source: "ccusage", cacheSemantics: "separate" },
   );
 
+  if (normalized.meta.mode === "unresolved") {
+    throw new Error(`Invalid ccusage row for ${date}: token totals are inconsistent`);
+  }
+
   return {
     entry: {
-      date: raw.date,
-      models: raw.modelsUsed,
+      date,
+      models: parseModels(raw, modelBreakdown, date),
       inputTokens: normalized.normalized.inputTokens,
       outputTokens: normalized.normalized.outputTokens,
       cacheCreationTokens: normalized.normalized.cacheCreationTokens,
       cacheReadTokens: normalized.normalized.cacheReadTokens,
       totalTokens: normalized.normalized.totalTokens,
-      costUSD: raw.totalCost,
+      costUSD: finiteNumber(raw.totalCost, "totalCost", date),
       reasoningOutputTokens: normalized.normalized.reasoningOutputTokens,
-      modelBreakdown: raw.modelBreakdowns?.map((b) => ({ model: b.modelName, cost_usd: b.cost })),
+      modelBreakdown,
     },
+    rowMetadata: { date, agents },
     meta: normalized.meta,
   };
 }
 
-export function parseCcusageOutput(raw: string): CcusageOutput {
+function normalizeClaudeEntry(raw: CcusageClaudeEntry): { entry: CcusageDailyEntry; rowMetadata: CcusageRowMetadata; meta: NormalizationMeta } {
+  if (typeof raw.date !== "string" || raw.date.length === 0) {
+    throw new Error("Invalid ccusage claude row: date is required");
+  }
+
+  const date = raw.date;
+  const totalTokens = finiteNumber(raw.totalTokens, "totalTokens", date);
+  const inputTokens = finiteNumber(raw.inputTokens, "inputTokens", date);
+  const outputTokens = finiteNumber(raw.outputTokens, "outputTokens", date);
+  const cacheCreationTokens = finiteNumber(raw.cacheCreationTokens, "cacheCreationTokens", date);
+  const cacheReadTokens = finiteNumber(raw.cacheReadTokens, "cacheReadTokens", date);
+  const residualReasoningTokens = Math.max(
+    0,
+    totalTokens - inputTokens - outputTokens - cacheCreationTokens - cacheReadTokens,
+  );
+  const reasoningOutputTokens = optionalFiniteNumber(raw.reasoningOutputTokens, "reasoningOutputTokens", date)
+    ?? residualReasoningTokens;
+  const modelBreakdown = parseModelBreakdowns(raw.modelBreakdowns, date);
+
+  const normalized = normalizeTokenBuckets(
+    {
+      inputTokens,
+      outputTokens,
+      cacheCreationTokens,
+      cacheReadTokens,
+      totalTokens,
+      reasoningOutputTokens,
+    },
+    { source: "ccusage", cacheSemantics: "separate" },
+  );
+
+  if (normalized.meta.mode === "unresolved") {
+    throw new Error(`Invalid ccusage claude row for ${date}: token totals are inconsistent`);
+  }
+
+  return {
+    entry: {
+      date,
+      models: parseModels(raw, modelBreakdown, date),
+      inputTokens: normalized.normalized.inputTokens,
+      outputTokens: normalized.normalized.outputTokens,
+      cacheCreationTokens: normalized.normalized.cacheCreationTokens,
+      cacheReadTokens: normalized.normalized.cacheReadTokens,
+      totalTokens: normalized.normalized.totalTokens,
+      costUSD: finiteNumber(raw.totalCost, "totalCost", date),
+      reasoningOutputTokens: normalized.normalized.reasoningOutputTokens,
+      modelBreakdown,
+    },
+    rowMetadata: { date, agents: ["claude"] },
+    meta: normalized.meta,
+  };
+}
+
+function parseCodexModels(value: unknown, date: string, costUSD: number): { models: string[]; breakdown?: ModelBreakdownEntry[] } {
+  if (value == null) return { models: [] };
+  if (typeof value !== "object" || Array.isArray(value)) {
+    throw new Error(`Invalid ccusage codex row for ${date}: models must be an object`);
+  }
+
+  const entries = Object.entries(value as Record<string, unknown>)
+    .filter(([model]) => model.length > 0);
+  const models = entries.map(([model]) => model);
+  const tokenWeights = entries.map(([model, rawModel]) => {
+    if (typeof rawModel !== "object" || rawModel == null || Array.isArray(rawModel)) {
+      throw new Error(`Invalid ccusage codex row for ${date}: models.${model} must be an object`);
+    }
+    const totalTokens = (rawModel as { totalTokens?: unknown }).totalTokens;
+    return typeof totalTokens === "number" && Number.isFinite(totalTokens) && totalTokens > 0
+      ? totalTokens
+      : 0;
+  });
+
+  const totalModelTokens = tokenWeights.reduce((sum, count) => sum + count, 0);
+  const breakdown = costUSD > 0 && totalModelTokens > 0
+    ? models.map((model, index) => ({
+      model,
+      cost_usd: costUSD * (tokenWeights[index]! / totalModelTokens),
+    }))
+    : undefined;
+
+  return { models, breakdown };
+}
+
+function normalizeCodexEntry(raw: CcusageCodexEntry): { entry: CcusageDailyEntry; rowMetadata: CcusageRowMetadata; meta: NormalizationMeta } {
+  if (typeof raw.date !== "string" || raw.date.length === 0) {
+    throw new Error("Invalid ccusage codex row: date is required");
+  }
+
+  const date = raw.date;
+  const totalTokens = finiteNumber(raw.totalTokens, "totalTokens", date);
+  const inputTokens = finiteNumber(raw.inputTokens, "inputTokens", date);
+  const outputTokens = finiteNumber(raw.outputTokens, "outputTokens", date);
+  const cacheReadTokens = finiteNumber(raw.cachedInputTokens, "cachedInputTokens", date);
+  const cacheCreationTokens = optionalFiniteNumber(raw.cacheCreationTokens, "cacheCreationTokens", date) ?? 0;
+  const costUSD = finiteNumber(raw.costUSD, "costUSD", date);
+  const reasoningOutputTokens = optionalFiniteNumber(raw.reasoningOutputTokens, "reasoningOutputTokens", date) ?? 0;
+  const modelInfo = parseCodexModels(raw.models, date, costUSD);
+
+  const normalized = normalizeTokenBuckets(
+    {
+      inputTokens,
+      outputTokens,
+      cacheCreationTokens,
+      cacheReadTokens,
+      totalTokens,
+      reasoningOutputTokens,
+    },
+    { source: "ccusage", cacheSemantics: "separate" },
+  );
+
+  if (normalized.meta.mode === "unresolved") {
+    throw new Error(`Invalid ccusage codex row for ${date}: token totals are inconsistent`);
+  }
+
+  return {
+    entry: {
+      date,
+      models: modelInfo.models,
+      inputTokens: normalized.normalized.inputTokens,
+      outputTokens: normalized.normalized.outputTokens,
+      cacheCreationTokens: normalized.normalized.cacheCreationTokens,
+      cacheReadTokens: normalized.normalized.cacheReadTokens,
+      totalTokens: normalized.normalized.totalTokens,
+      costUSD,
+      reasoningOutputTokens: normalized.normalized.reasoningOutputTokens,
+      modelBreakdown: modelInfo.breakdown,
+    },
+    rowMetadata: { date, agents: ["codex"] },
+    meta: normalized.meta,
+  };
+}
+
+function sourceForAgents(agents: CcusageAgent[]): "ccusage" | "codex" {
+  return agents.includes("codex") && !agents.includes("claude") ? "codex" : "ccusage";
+}
+
+export function parseCcusageOutput(raw: string, agent?: CcusageAgent): CcusageOutput {
   let parsed: unknown;
   try {
     parsed = JSON.parse(raw);
@@ -351,36 +603,28 @@ export function parseCcusageOutput(raw: string): CcusageOutput {
     throw new Error("Failed to parse ccusage output as JSON", { cause: err });
   }
 
-  // ccusage returns `[]` when there's no data for the period
-  if (Array.isArray(parsed) && (parsed as unknown[]).length === 0) {
-    return { data: [] };
+  // ccusage returns `[]` when there's no data for the period.
+  if (Array.isArray(parsed) && parsed.length === 0) {
+    return { data: [], rowMetadata: [] };
   }
 
-  const v18 = parsed as CcusageV18Output;
-  if (!Array.isArray(v18.daily)) {
+  const v20 = parsed as CcusageV20Output;
+  if (!Array.isArray(v20.daily)) {
     throw new Error("Unexpected ccusage output format (expected 'daily' array)");
   }
 
-  const normalizedRows = v18.daily.map(normalizeEntry);
+  const normalizedRows = v20.daily.map((row) => {
+    if (agent === "claude") return normalizeClaudeEntry(row as CcusageClaudeEntry);
+    if (agent === "codex") return normalizeCodexEntry(row as CcusageCodexEntry);
+    return normalizeUnifiedEntry(row as CcusageUnifiedEntry);
+  });
   const data = normalizedRows.map((row) => row.entry);
 
-  for (const entry of data) {
-    if (!entry.date || typeof entry.costUSD !== "number") {
-      throw new Error(`Invalid entry in ccusage output for date: ${entry.date}`);
-    }
-    if (entry.costUSD < 0) {
-      throw new Error(`Negative cost for date: ${entry.date}`);
-    }
-    if (entry.totalTokens < 0 || entry.inputTokens < 0 || entry.outputTokens < 0) {
-      throw new Error(`Negative token count for date: ${entry.date}`);
-    }
-  }
-
   const anomalies: NormalizationAnomaly[] = normalizedRows
-    .filter((row) => row.meta.mode === "unresolved" || row.meta.confidence !== "high" || row.meta.warnings.length > 0)
+    .filter((row) => row.meta.confidence !== "high" || row.meta.warnings.length > 0)
     .map((row) => ({
       date: row.entry.date,
-      source: "ccusage",
+      source: sourceForAgents(row.rowMetadata.agents),
       mode: row.meta.mode,
       confidence: row.meta.confidence,
       consistencyError: row.meta.consistencyError,
@@ -389,6 +633,7 @@ export function parseCcusageOutput(raw: string): CcusageOutput {
 
   return {
     data,
+    rowMetadata: normalizedRows.map((row) => row.rowMetadata),
     anomalies,
     normalizationSummary: summarizeNormalization(normalizedRows.map((row) => row.meta)),
   };

From 507e67c5bff0a2934868ef579f9e2f6645e3fc75 Mon Sep 17 00:00:00 2001
From: Oscar Hong <oscar.hong2015@gmail.com>
Date: Thu, 11 Jun 2026 01:11:35 -0700
Subject: [PATCH 03/15] Fix Claude review workflow auth

---
 .github/workflows/claude-code-review.yml | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/claude-code-review.yml b/.github/workflows/claude-code-review.yml
index b5e8cfd4..ebe8e38a 100644
--- a/.github/workflows/claude-code-review.yml
+++ b/.github/workflows/claude-code-review.yml
@@ -31,14 +31,22 @@ jobs:
         with:
           fetch-depth: 1
 
+      - name: Validate Anthropic API key secret
+        env:
+          ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }}
+        run: |
+          if [ -z "$ANTHROPIC_API_KEY" ]; then
+            echo "::error::ANTHROPIC_API_KEY is required for Claude Code Review. CLAUDE_CODE_OAUTH_TOKEN is no longer usable because subscription access for Claude Code is disabled for this Anthropic organization."
+            exit 1
+          fi
+
       - name: Run Claude Code Review
         id: claude-review
         uses: anthropics/claude-code-action@v1
         with:
-          claude_code_oauth_token: ${{ secrets.CLAUDE_CODE_OAUTH_TOKEN }}
+          anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
           plugin_marketplaces: 'https://github.com/anthropics/claude-code.git'
           plugins: 'code-review@claude-code-plugins'
           prompt: '/code-review:code-review ${{ github.repository }}/pull/${{ github.event.pull_request.number }}'
           # See https://github.com/anthropics/claude-code-action/blob/main/docs/usage.md
           # or https://code.claude.com/docs/en/cli-reference for available options
-

From a00049c21dc3feca2d2b659a70f5497a2f1b1599 Mon Sep 17 00:00:00 2001
From: Oscar Hong <oscar.hong2015@gmail.com>
Date: Thu, 2 Jul 2026 23:35:43 +0800
Subject: [PATCH 04/15] Add activation improvement workstream plans

---
 plans/001-activation-funnel-contract.md      | 160 +++++++++++++++++++
 plans/002-onboarding-first-sync.md           | 129 +++++++++++++++
 plans/003-public-landing-performance.md      | 125 +++++++++++++++
 plans/004-authenticated-shell-performance.md | 103 ++++++++++++
 plans/005-core-app-ux-activation.md          | 134 ++++++++++++++++
 plans/006-cli-first-run-snappiness.md        | 146 +++++++++++++++++
 plans/007-final-integration-pass.md          | 149 +++++++++++++++++
 plans/README.md                              |  88 ++++++++++
 8 files changed, 1034 insertions(+)
 create mode 100644 plans/001-activation-funnel-contract.md
 create mode 100644 plans/002-onboarding-first-sync.md
 create mode 100644 plans/003-public-landing-performance.md
 create mode 100644 plans/004-authenticated-shell-performance.md
 create mode 100644 plans/005-core-app-ux-activation.md
 create mode 100644 plans/006-cli-first-run-snappiness.md
 create mode 100644 plans/007-final-integration-pass.md
 create mode 100644 plans/README.md

diff --git a/plans/001-activation-funnel-contract.md b/plans/001-activation-funnel-contract.md
new file mode 100644
index 00000000..976e10d5
--- /dev/null
+++ b/plans/001-activation-funnel-contract.md
@@ -0,0 +1,160 @@
+# Workstream 1: Activation Funnel Contract
+
+Priority: P1  
+Owner: activation instrumentation and test agent  
+Estimated size: M  
+Depends on: none  
+Unblocks: all other workstreams
+
+## Goal
+
+Create one measurable activation contract from landing visit to first session pushed to Straude.
+
+The contract must make it impossible for future work to confuse profile completion, account creation, and first synced usage.
+
+## Current Evidence
+
+- `apps/web/e2e/landing-to-signup.spec.ts` checks landing sections and signup form rendering, but does not cover onboarding or first sync.
+- `apps/web/__tests__/flows/signup-to-feed.test.ts` covers mocked signup-to-feed behavior, not the full first-session activation path.
+- `apps/web/app/(onboarding)/onboarding/page.tsx` currently sends `onboarding_completed: true` before the Step 3 usage sync moment.
+- `packages/cli/src/commands/push.ts` tracks `usage_pushed`, but the web app has no single test-protected activation funnel that ties signup, onboarding, CLI auth, usage submit, and post-sync confirmation together.
+- PostHog is already installed and capturing CLI events. Recent project data confirms `cli_first_run`, `cli_authenticated`, `login_completed`, `usage_pushed`, and `usage_push_failed`.
+- PostHog does not currently show the planned web activation events. Treat web funnel capture as missing until verified after implementation.
+
+## In Scope
+
+- `apps/web/__tests__/flows/*`
+- `apps/web/e2e/*`
+- `apps/web/lib/analytics*`
+- `apps/web/components/providers/PostHogProvider.tsx`
+- `apps/web/app/(landing)/*`
+- `apps/web/app/(auth)/*`
+- `apps/web/app/(onboarding)/*`
+- `apps/web/app/api/usage/status/route.ts`
+- `packages/cli/src/commands/login.ts`
+- `packages/cli/src/commands/push.ts`
+- `packages/cli/src/lib/telemetry.ts`
+- Test fixtures and mocks required by this plan
+
+## Out of Scope
+
+- Visual redesign.
+- Database schema changes, unless an existing field cannot represent activation state.
+- CLI performance changes beyond event emission and test fixtures.
+
+## Activation State Model
+
+Define these states and use them consistently in tests, analytics, and UI copy:
+
+- `anonymous`: user has not authenticated.
+- `signed_up`: user authenticated successfully.
+- `profile_started`: user supplied minimum identity or explicitly skipped profile details.
+- `sync_command_copied`: user copied the canonical sync command from web.
+- `cli_first_run`: CLI was invoked on a machine for the first time.
+- `login_completed`: CLI received and saved auth credentials.
+- `first_usage_submitted`: `/api/usage/submit` accepted at least one usage entry for the user.
+- `first_sync_confirmed`: web observed at least one usage row or post generated from usage submit.
+- `activated`: first sync confirmed and user was shown the success/profile/feed destination.
+
+Use `activated`, not `onboarding_completed`, as the product success boundary.
+
+## Implementation Instructions
+
+1. Add an activation fixture that can create a new test user, simulate auth callback, and submit one usage entry without relying on third-party OAuth.
+2. Add a golden-path Playwright spec:
+   - Visit `/`.
+   - Click the primary signup CTA.
+   - Complete signup through the local test auth path.
+   - Reach onboarding.
+   - Copy or reveal the canonical `npx straude@latest` command.
+   - Simulate one successful CLI usage submit through test-controlled API state.
+   - Observe the onboarding success state.
+   - Continue to profile or feed and verify the first usage is visible.
+3. Add a negative-path spec:
+   - Sign up.
+   - Skip or leave onboarding before sync.
+   - Verify the authenticated app still shows a clear first-sync nudge.
+   - Verify the user is not treated as activated.
+4. Add an analytics event map in code or docs and make event names stable:
+   - Keep existing CLI PostHog events: `cli_first_run`, `cli_authenticated`, `login_completed`, `usage_pushed`, and `usage_push_failed`.
+   - Do not rename existing CLI events unless the migration includes aliases, a backfilled insight, and a dashboard update.
+   - `landing_primary_cta_clicked`
+   - `signup_started`
+   - `signup_completed`
+   - `onboarding_profile_started`
+   - `sync_command_copied`
+   - `first_sync_confirmed`
+   - `activation_completed`
+5. Implement PostHog capture through a small shared analytics wrapper.
+   - Web events must no-op safely when analytics consent is absent.
+   - If activation metrics must include users without analytics consent, add a server-side, privacy-reviewed PostHog capture path for aggregate lifecycle events instead of bypassing consent in the browser.
+   - Every event must include stable properties: `source`, `surface`, `activation_state`, `is_authenticated`, and, where applicable, `cli_version`, `days_pushed`, `pricing_mode`, `backfill_mode`, and timing fields.
+   - Do not send prompts, code, file paths, conversation content, or raw usage rows to PostHog.
+6. Add PostHog project setup steps after events are shipping.
+   - Create actions for the activation funnel only after the events exist in the taxonomy.
+   - Build a funnel insight from landing CTA to `activation_completed`.
+   - Build a CLI health insight for `usage_pushed` versus `usage_push_failed`.
+   - Annotate any event rename or property migration.
+7. Add unit tests for activation-state derivation. The tests must cover:
+   - Authenticated user with no usage.
+   - Authenticated user with usage before onboarding page load.
+   - User who copied command but did not submit usage.
+   - User with successful usage submit.
+8. Make each later workstream consume this shared state instead of inventing local booleans.
+
+## Verification Commands
+
+Run after dependencies are restored:
+
+```bash
+bun --cwd apps/web test -- __tests__/flows
+bun --cwd apps/web test:e2e -- e2e/landing-to-signup.spec.ts
+bun --cwd apps/web test:e2e -- e2e/signup-to-first-session.spec.ts
+bun --cwd apps/web typecheck
+bun --cwd packages/cli test -- __tests__/commands/login.test.ts __tests__/commands/push.test.ts
+bun --cwd packages/cli typecheck
+```
+
+If the new E2E spec requires local Supabase, document the exact setup command in the test file header and in this plan's completion notes.
+
+PostHog project verification, run in PostHog SQL or through the PostHog MCP/CLI after deployment:
+
+```sql
+SELECT event, count() AS count, max(timestamp) AS last_seen
+FROM events
+WHERE timestamp >= now() - INTERVAL 7 DAY
+  AND event IN (
+    'cli_first_run',
+    'cli_authenticated',
+    'login_completed',
+    'usage_pushed',
+    'usage_push_failed',
+    'landing_primary_cta_clicked',
+    'signup_started',
+    'signup_completed',
+    'onboarding_profile_started',
+    'sync_command_copied',
+    'first_sync_confirmed',
+    'activation_completed',
+    '$pageview'
+  )
+GROUP BY event
+ORDER BY event
+LIMIT 100
+```
+
+## Done Criteria
+
+- There is one testable definition of activation.
+- A regression test fails if onboarding completion happens before first sync without an explicit user choice.
+- A regression test fails if the first-sync command disappears from the no-data authenticated app state.
+- CLI and web analytics use compatible PostHog events for the same funnel.
+- PostHog shows recent capture for the implemented funnel events in the target project.
+- A PostHog funnel or dashboard exists for signup-to-first-sync iteration, or the PR documents why creation is deferred.
+- The new tests can run locally from a fresh checkout after `bun install --frozen-lockfile`.
+
+## Stop Conditions
+
+- Stop and escalate if local test auth cannot create users without relying on production Supabase or real OAuth.
+- Stop and escalate if activation requires a new database field and no backward-compatible migration path is obvious.
+- Stop and escalate if analytics consent rules prevent emitting the required web events; propose a consent-safe server event alternative.
diff --git a/plans/002-onboarding-first-sync.md b/plans/002-onboarding-first-sync.md
new file mode 100644
index 00000000..388ca134
--- /dev/null
+++ b/plans/002-onboarding-first-sync.md
@@ -0,0 +1,129 @@
+# Workstream 2: Onboarding First Sync
+
+Priority: P1  
+Owner: onboarding and activation UX agent  
+Estimated size: M  
+Depends on: Workstream 1 activation contract
+
+## Goal
+
+Make first session pushed to Straude the center of onboarding.
+
+Users should leave onboarding understanding three things: what Straude syncs, why it is safe, and what they get immediately after running the CLI.
+
+## Current Evidence
+
+- `apps/web/app/(onboarding)/onboarding/page.tsx` calls `handleFinish()` on Step 2 and sends `onboarding_completed: true` before Step 3.
+- `apps/web/app/api/users/me/route.ts` sends the welcome email, auto-follow logic, and referral attribution when `onboarding_completed` flips to true.
+- `apps/web/app/(onboarding)/onboarding/page.tsx` lets users skip from Step 1 or Step 2 directly to `/feed`.
+- Step 3 stores a baseline session count, then only succeeds if a later poll has a larger `session_count`. A user with existing usage before Step 3 can be stuck.
+- `apps/web/app/api/usage/status/route.ts` selects all `daily_usage` rows for the current user on every poll.
+- `apps/web/app/(app)/layout.tsx` only shows the "Finish setting up your profile" banner when `profile.onboarding_completed` is false, so users who finished profile setup but did not sync can lose the activation nudge.
+- PostHog web activation events are not currently confirmed in the project. Onboarding must emit the events defined by Workstream 1 rather than adding local-only tracking names.
+
+## In Scope
+
+- `apps/web/app/(onboarding)/onboarding/page.tsx`
+- `apps/web/app/(onboarding)/layout.tsx`
+- `apps/web/app/(app)/layout.tsx`
+- `apps/web/app/api/users/me/route.ts`
+- `apps/web/app/api/usage/status/route.ts`
+- `apps/web/components/providers/PostHogProvider.tsx` or the shared analytics wrapper from Workstream 1
+- `apps/web/components/app/*` activation banners or empty states
+- Tests covering onboarding state and status polling
+
+## Out of Scope
+
+- CLI collection internals.
+- Feed/profile redesign beyond no-data activation nudges.
+- New marketing sections on the landing page.
+
+## Implementation Instructions
+
+1. Split "profile saved" from "activated".
+   - Do not set `onboarding_completed: true` merely because the user filled profile fields.
+   - Treat profile fields as helpful setup, not activation.
+   - Send welcome/onboarding side effects only when the activation contract says the user is activated, or rename the server-side side effect to match the earlier lifecycle event.
+2. Make the sync step primary.
+   - The canonical command is `npx straude@latest`.
+   - Show the command in a stable, copyable block.
+   - Keep the privacy reassurance visible near the command: no prompts, code, or conversation text are uploaded.
+   - Show the expected reward after sync: streak, cost, token totals, and first shareable session.
+3. Replace hard skip links with explicit secondary choices.
+   - Use a secondary action such as "Explore without syncing" only after the user has seen the sync command.
+   - If the user chooses it, keep them in the `signed_up` or `profile_started` state, not `activated`.
+   - The authenticated app must continue showing the first-sync nudge.
+4. Fix Step 3 success detection.
+   - Do not rely only on a session-count baseline captured after the page loads.
+   - Accept existing usage for a newly authenticated user when it was submitted recently or belongs to the current user.
+   - Prefer a status payload with `has_usage`, `latest_usage_at`, `session_count`, `total_cost`, and `latest_post_url`.
+   - If the command is copied during onboarding, use that timestamp only as an enhancement, not as the only success gate.
+5. Make `/api/usage/status` cheap.
+   - Stop selecting every `daily_usage` row every 4 seconds.
+   - Query only the aggregate fields needed by onboarding.
+   - Prefer an indexed `count/head` query, a small RPC, or a limited latest-row query plus existing aggregate columns.
+   - Preserve the current response shape only if existing callers require it; otherwise add a versioned shape for onboarding.
+6. Update authenticated app banners.
+   - Show a first-sync banner when the user is authenticated and has no usage, regardless of `onboarding_completed`.
+   - Link the banner to onboarding Step 3 or a dedicated first-sync page.
+   - Do not show profile-completion copy when the missing action is usage sync.
+7. Move optional profile questions later.
+   - Keep username and minimal identity early.
+   - Move "How did you hear about us?", country, bio, and GitHub URL to post-sync profile enrichment unless they are needed for the activation contract.
+8. Emit PostHog funnel events through the shared wrapper.
+   - Capture `onboarding_profile_started` when the user begins profile setup.
+   - Capture `sync_command_copied` with `surface: "onboarding"` when the command is copied.
+   - Capture `first_sync_confirmed` when onboarding observes usage for the user.
+   - Capture `activation_completed` only after the success state is shown.
+   - Include `activation_state`, `session_count`, and `has_existing_usage` where applicable.
+   - Do not emit browser PostHog events without analytics consent; use the consent-safe server path from Workstream 1 if full-funnel coverage is required.
+
+## Verification Commands
+
+```bash
+bun --cwd apps/web test -- __tests__/flows
+bun --cwd apps/web test -- app/api/usage/status
+bun --cwd apps/web test:e2e -- e2e/signup-to-first-session.spec.ts
+bun --cwd apps/web typecheck
+```
+
+Also manually verify with local Supabase:
+
+```bash
+bun run supabase:start
+bun --cwd apps/web dev
+```
+
+Then complete signup, leave before sync, return to `/feed`, and confirm the first-sync nudge is still visible.
+
+PostHog check after deploying onboarding changes:
+
+```sql
+SELECT event, count() AS count, max(timestamp) AS last_seen
+FROM events
+WHERE timestamp >= now() - INTERVAL 7 DAY
+  AND event IN (
+    'onboarding_profile_started',
+    'sync_command_copied',
+    'first_sync_confirmed',
+    'activation_completed'
+  )
+GROUP BY event
+ORDER BY event
+LIMIT 100
+```
+
+## Done Criteria
+
+- A user is not counted as activated until first usage is observed or they explicitly choose a clearly labeled non-activated path.
+- First-sync command copy is available in onboarding and no-data app states.
+- Step 3 succeeds for both newly submitted usage and already-present usage.
+- `/api/usage/status` returns in a bounded query shape and does not scan all user usage rows per poll.
+- Welcome email and auto-follow side effects align with the new activation lifecycle.
+- PostHog captures the onboarding funnel events for consented web sessions or through the approved consent-safe fallback.
+
+## Stop Conditions
+
+- Stop if the existing `users.onboarding_completed` field is used by production workflows that cannot distinguish profile completion from activation.
+- Stop if the efficient usage-status query requires a missing index; create a migration plan rather than shipping an unindexed polling path.
+- Stop if the no-data authenticated shell cannot derive usage state without adding a slow query to every route.
diff --git a/plans/003-public-landing-performance.md b/plans/003-public-landing-performance.md
new file mode 100644
index 00000000..7ad3e6ee
--- /dev/null
+++ b/plans/003-public-landing-performance.md
@@ -0,0 +1,125 @@
+# Workstream 3: Public Landing Performance
+
+Priority: P1  
+Owner: landing and public performance agent  
+Estimated size: M  
+Depends on: Workstream 1 for event names only
+
+## Goal
+
+Make the public landing page load quickly and explain the activation loop immediately.
+
+The landing page should feel premium without paying for app-shell JavaScript, live analytics aggregation, or below-the-fold motion before the user has interacted.
+
+## Current Evidence
+
+- `apps/web/app/layout.tsx` wraps all routes in `PostHogClientProvider`, `QueryProvider`, and `ThemeProvider`.
+- `PostHogProvider.tsx` imports `posthog-js` and `posthog-js/react` in a global client provider even though initialization is consent-gated.
+- PostHog's web provider is correctly consent-gated and proxied through `/ingest`, but project-side `$pageview` capture was stale during the 2026-06-16 check. Do not remove PostHog while slimming the landing page; fix and verify the lazy/consent path.
+- `apps/web/app/(landing)/page.tsx` renders the landing page inside a full-screen scroll container, loads `LazyHalftoneCanvas`, and calls `getTickerStats()`.
+- `getTickerStats()` calls `getOpenStatsForPage()`, then reads `leaderboard_weekly`.
+- `apps/web/lib/open-stats.ts` live path fetches up to 50,000 `daily_usage` rows plus admin aggregates before snapshot fallback.
+- `apps/web/components/landing/Hero.tsx` is a client component only because the command copy button needs `useState`.
+- `apps/web/components/landing/Hero.tsx` uses `npx straude`, while onboarding uses `npx straude@latest`, and the final CTA section uses `npx straude push --days 7`.
+- `apps/web/components/landing/CTASection.tsx` contains persuasive copy but no actual primary signup or command-copy action.
+- `apps/web/components/landing/ProductHuntBadge.tsx` loads a remote SVG image from Product Hunt in the hero.
+- The stale `.next/diagnostics/route-bundle-stats.json` snapshot showed `/` at roughly 1.46 MB uncompressed first-load JS. Treat this as supporting evidence only; regenerate before measuring success.
+
+## In Scope
+
+- `apps/web/app/layout.tsx`
+- Landing route-group layouts under `apps/web/app/(landing)`
+- `apps/web/components/providers/*`
+- `apps/web/components/landing/*`
+- `apps/web/lib/open-stats.ts`
+- Snapshot or cron code that refreshes open stats
+- Landing tests and bundle measurement scripts
+
+## Out of Scope
+
+- Authenticated app-shell performance.
+- CLI behavior.
+- Major brand rewrite.
+
+## Implementation Instructions
+
+1. Split public and authenticated providers.
+   - Keep the root layout as server-first and minimal.
+   - Move `QueryProvider`, authenticated PostHog auth-listener behavior, command-palette dependencies, and other app-only providers into the authenticated route group.
+   - Keep consent UI where required, but avoid importing analytics libraries on the first public render if consent is unknown.
+   - Preserve a lazy public PostHog bootstrap for users who accept analytics. The public route must still capture `$pageview`, `landing_primary_cta_clicked`, and `sync_command_copied` after consent.
+2. Convert landing sections to server components by default.
+   - Make `Hero` a server component.
+   - Extract only the copy button into a tiny client island.
+   - Avoid `motion/react` above the fold unless it is proven not to affect first-load JS materially.
+3. Defer expensive visual effects.
+   - Load `LazyHalftoneCanvas` after idle, after first interaction, or when the hero is stable.
+   - Provide a static CSS or image fallback that preserves visual quality.
+   - Respect reduced-motion and low-power conditions before initializing WebGL.
+4. Move social proof and remote images below the critical path.
+   - Replace the Product Hunt remote badge with a local optimized asset, or lazy-load it below the first CTA.
+   - Keep wall-of-love content below the fold and remove per-card motion from the initial bundle.
+5. Make ticker data snapshot-first.
+   - Public landing render must read the latest open-stats snapshot first.
+   - Live aggregation belongs in a scheduled refresh, admin action, or background regeneration path.
+   - Preserve the stale snapshot fallback policy described in `docs/DECISIONS.md`.
+   - Do not query tens of thousands of `daily_usage` rows from the landing render path.
+6. Tighten the landing activation loop.
+   - Use one command everywhere: `npx straude@latest`.
+   - The hero CTA should lead to signup and make the CLI loop visible.
+   - The final CTA must include a real signup link and copyable command.
+   - Do not send new users toward secondary surfaces before signup and first sync.
+7. Wire landing analytics into PostHog.
+   - Capture `landing_primary_cta_clicked` with `surface`, `cta_location`, `destination`, and `has_analytics_consent`.
+   - Capture `sync_command_copied` with `surface: "landing"` and `command: "npx straude@latest"`.
+   - Keep these captures in tiny client islands, not in large page-level client components.
+   - Verify accepted-cookie sessions produce `$pageview` through `/ingest`.
+8. Add measurable budgets.
+   - Regenerate Next bundle diagnostics after a production build.
+   - Set a target of at least 50% lower first-load uncompressed JS for `/` than the stale 1.46 MB snapshot, or document why a smaller reduction is the practical limit.
+   - Capture Lighthouse or Playwright timing for `/` before and after.
+
+## Verification Commands
+
+```bash
+bun --cwd apps/web build
+bun --cwd apps/web test -- components/landing
+bun --cwd apps/web test:e2e -- e2e/landing-to-signup.spec.ts
+bun --cwd apps/web typecheck
+```
+
+Bundle and route checks:
+
+```bash
+find apps/web/.next/diagnostics -maxdepth 1 -type f -print
+node -e "const s=require('./apps/web/.next/diagnostics/route-bundle-stats.json'); console.log(s.find(r=>r.route==='/'))"
+```
+
+If the diagnostics schema changes, use the current Next build artifact that reports per-route first-load JS and document the replacement command.
+
+PostHog check after deploying the landing change:
+
+```sql
+SELECT event, count() AS count, max(timestamp) AS last_seen
+FROM events
+WHERE timestamp >= now() - INTERVAL 7 DAY
+  AND event IN ('$pageview', 'landing_primary_cta_clicked', 'sync_command_copied')
+GROUP BY event
+ORDER BY event
+LIMIT 100
+```
+
+## Done Criteria
+
+- Landing first-load JavaScript is materially smaller and measured.
+- Public render does not mount app-only providers.
+- Landing ticker does not run live open-stats aggregation.
+- The above-the-fold landing page works with JavaScript disabled except for interactive copy behavior.
+- The primary and final CTAs use the same signup destination and canonical command.
+- PostHog still captures consented public pageviews and landing CTA/copy events after the provider split.
+
+## Stop Conditions
+
+- Stop if moving providers changes auth session behavior on app routes.
+- Stop if snapshot-first stats make public numbers stale beyond the documented freshness policy.
+- Stop if WebGL deferral causes visible layout shift above the fold.
diff --git a/plans/004-authenticated-shell-performance.md b/plans/004-authenticated-shell-performance.md
new file mode 100644
index 00000000..f1ecc3ca
--- /dev/null
+++ b/plans/004-authenticated-shell-performance.md
@@ -0,0 +1,103 @@
+# Workstream 4: Authenticated Shell Performance
+
+Priority: P1  
+Owner: authenticated web performance agent  
+Estimated size: M  
+Depends on: Workstream 1 activation state names
+
+## Goal
+
+Make authenticated pages feel immediate by loading only the data and JavaScript needed for the current task.
+
+The shell should not make every app route pay for notifications, sidebars, command palette, prompt submission, duplicate usage totals, and profile nudges before the main content is usable.
+
+## Current Evidence
+
+- `apps/web/app/(app)/layout.tsx` loads sidebar data, right-sidebar data, photo-nudge data, profile data, and shell state around every app page.
+- `DeferredSidebar` and `DeferredRightSidebar` both call usage-total logic, creating duplicate work.
+- `PhotoNudge` fetches latest posts separately from the sidebar.
+- `apps/web/components/app/TopHeader.tsx` fetches `/api/notifications` and `/api/app/counts` immediately on mount.
+- `apps/web/components/app/CommandPalette.tsx` imports `kbar`, mounts globally, and prefetches eight routes plus the profile route on mount.
+- `apps/web/components/app/SubmitPromptWidget.tsx` is mounted in `ResponsiveShellFrame` for every app route even though its modal is not needed for first paint.
+- Right sidebar suggestions and top users are useful, but they are not critical to feed/profile first content.
+
+## In Scope
+
+- `apps/web/app/(app)/layout.tsx`
+- `apps/web/components/app/ResponsiveShellFrame.tsx`
+- `apps/web/components/app/TopHeader.tsx`
+- `apps/web/components/app/CommandPalette.tsx`
+- `apps/web/components/app/SubmitPromptWidget.tsx`
+- `apps/web/components/app/RightSidebar.tsx`
+- `apps/web/lib/data/*`
+- `apps/web/app/api/notifications/*`
+- `apps/web/app/api/app/counts/route.ts`
+- Tests for shell fetching and lazy loading
+
+## Out of Scope
+
+- Feed card redesign.
+- Landing page performance.
+- CLI changes.
+
+## Implementation Instructions
+
+1. Make main content the first priority.
+   - Keep route content renderable without waiting on right sidebar, photo nudge, prompt modal, or full notification list.
+   - Use Suspense boundaries with small skeletons for secondary panels.
+2. Remove duplicate usage-total work.
+   - Load usage totals once per request when both left and right panels need them.
+   - Pass the result down or split right-sidebar requirements so it does not need totals on routes where they are not visible.
+3. Defer notification list fetching.
+   - Fetch only the unread count on initial shell render.
+   - Fetch the full notification list only when the user opens the notification menu.
+   - In React Query, use an `enabled` condition tied to menu open state.
+4. Lazy-load the command palette.
+   - Do not import `kbar` into the initial app-shell bundle.
+   - Load the command palette on first `Cmd+K`/`Ctrl+K`, on explicit search button activation, or during idle time after the main content is interactive.
+   - Remove eager route prefetches on mount. If prefetching remains, do it after idle and only for the two most likely next routes.
+5. Lazy-load prompt submission.
+   - Keep the quick action visible only where it supports the current task.
+   - Defer modal internals until the user opens it.
+   - Hide or deprioritize the prompt widget for users who have not completed first sync.
+6. Make sidebars adaptive.
+   - Do not fetch desktop-only right-sidebar data on mobile.
+   - On desktop, stream right-sidebar content after main content.
+   - Keep sidebar failures isolated from the main route.
+7. Add fetch regression tests.
+   - A feed page render must not request the full notifications list before the notification menu opens.
+   - A feed page render must not load command-palette JavaScript before shortcut or idle trigger.
+   - A mobile feed render must not request right-sidebar-only data.
+
+## Verification Commands
+
+```bash
+bun --cwd apps/web test -- components/app
+bun --cwd apps/web test -- app/api/notifications app/api/app/counts
+bun --cwd apps/web test:e2e -- e2e/authenticated-100ms.test.tsx
+bun --cwd apps/web typecheck
+bun --cwd apps/web build
+```
+
+Manual measurement:
+
+```bash
+bun --cwd apps/web dev
+```
+
+Open `/feed` and `/u/[username]` with the browser network panel. Confirm non-critical requests do not fire before interaction and the main content appears before secondary panels finish.
+
+## Done Criteria
+
+- Main authenticated route content renders without waiting for secondary panels.
+- Full notification list fetches only after the menu opens.
+- Command palette code is not part of the initial route bundle unless loaded after idle.
+- Mobile app routes do not fetch desktop-only sidebar data.
+- Duplicate usage-total fetches are removed or explicitly justified.
+- Route bundle and network measurements are documented in the PR.
+
+## Stop Conditions
+
+- Stop if shell deferral causes hydration mismatches or navigation focus traps.
+- Stop if notification count and list can become inconsistent without a cache invalidation plan.
+- Stop if route-specific data ownership becomes unclear; prefer smaller helper APIs over a single large shell loader.
diff --git a/plans/005-core-app-ux-activation.md b/plans/005-core-app-ux-activation.md
new file mode 100644
index 00000000..3ab5f1eb
--- /dev/null
+++ b/plans/005-core-app-ux-activation.md
@@ -0,0 +1,134 @@
+# Workstream 5: Core App UX Activation
+
+Priority: P2  
+Owner: core product UX agent  
+Estimated size: M  
+Depends on: Workstream 1 activation contract; coordinate with Workstream 4
+
+## Goal
+
+Make the core web app intuitive for new users while preserving the depth that makes Straude worth returning to.
+
+Prioritize clearer hierarchy, stronger empty states, and progressive disclosure over adding more surfaces.
+
+## Current Evidence
+
+- `apps/web/components/app/feed/FeedList.tsx` shows a sync hint in the toolbar, but empty states do not consistently expose a copyable command.
+- Guest feed routes show public content and bottom links, but there is no strong contextual signup prompt after the user has seen proof of value.
+- `apps/web/components/app/ActivityCard.tsx` shows useful metadata, but cost, tokens, models, comments, verification, and actions compete at similar visual weight.
+- `apps/web/app/(app)/u/[username]/page.tsx` loads and displays many profile concepts above the fold: identity, team, level, follow/message/edit/invite, bio, location, link, GitHub, referrer, following/follower counts, stats, badges, contribution graph, radar, and posts.
+- `apps/web/components/app/GuestHeader.tsx` labels the company-ranking route as "Prometheus List", which is evocative but not self-explanatory for new visitors.
+- Previous UX notes in `docs/ux-suggestions.md` already flagged feed-card flatness, profile-header overload, guest feed signup weakness, landing breathing room, and the confusing mobile "Prometheus" label.
+- Core UX changes need PostHog coverage so the team can compare guest CTA clicks, empty-state command copies, and first-sync recovery after launch.
+
+## In Scope
+
+- `apps/web/components/app/feed/FeedList.tsx`
+- `apps/web/components/app/ActivityCard.tsx`
+- `apps/web/components/app/GuestHeader.tsx`
+- `apps/web/components/app/MobileNav.tsx` if labels need coordination
+- `apps/web/app/(app)/feed/page.tsx`
+- `apps/web/app/(app)/u/[username]/page.tsx`
+- Profile components under `apps/web/components/profile/*`
+- Shared analytics wrapper from Workstream 1
+- Empty-state components and tests
+
+## Out of Scope
+
+- New major product areas.
+- Landing page hero redesign.
+- CLI internals.
+- Database schema changes.
+
+## Implementation Instructions
+
+1. Make no-data states activation-first.
+   - For the user's own feed/profile with no usage, show the canonical command and a copy action.
+   - Explain the payoff in one sentence: the first sync creates the profile, streak, spend, and shareable session history.
+   - Keep secondary browse actions available but visually below the sync command.
+2. Add contextual guest conversion.
+   - On guest feeds and public profiles, insert a signup CTA after the user has seen enough proof of value.
+   - Use the CTA to connect public content to the user's own first sync.
+   - Do not block browsing; make the CTA contextual, not modal.
+3. Rebalance activity cards.
+   - Make the session's main outcome visually dominant: cost, tokens, model, and note/title.
+   - Reduce repeated verified-badge noise. Use verification as a subtle trust affordance unless the card needs warning treatment.
+   - Keep comments and reactions accessible but secondary.
+   - Improve scanability for mixed public feeds with many similar cards.
+4. Simplify the profile header.
+   - First row: identity, follow/edit action, and one dominant performance stat.
+   - Second row: compact stats and streak.
+   - Move achievements, radar, referrer, and secondary metadata below the first viewport or behind expandable sections.
+   - For the signed-in user's own empty profile, replace profile-density with first-sync guidance.
+5. Rename unclear navigation labels for first-time comprehension.
+   - Keep "Prometheus List" as page flavor if desired.
+   - In nav, use a descriptive label such as "AI Budgets", "Company Rankings", or another tested plain-language label.
+   - Apply the same label strategy to desktop and mobile guest navigation.
+6. Preserve functional richness through disclosure.
+   - Do not remove achievements, rankings, prompts, comments, or social stats.
+   - Reorder and collapse them so they support the primary task instead of competing with it.
+7. Add PostHog events for UX iteration.
+   - Capture `guest_signup_cta_clicked` with `surface`, `cta_location`, and `destination`.
+   - Capture `sync_command_copied` with `surface: "empty_state"` for no-data feed/profile states.
+   - Capture `first_sync_nudge_clicked` when a signed-in no-usage user follows the nudge back to onboarding or the sync page.
+   - Use the shared analytics wrapper so browser events respect cookie consent.
+   - Do not add high-cardinality properties such as raw post titles, notes, prompts, URLs, or usernames.
+8. Add interaction and copy tests.
+   - Empty own-feed state includes the command and copy button.
+   - Guest feed includes a contextual signup CTA after content.
+   - Public profile remains readable when optional metadata is missing.
+   - Activity cards remain stable with long titles, no note, many reactions, and verified state.
+
+## Verification Commands
+
+```bash
+bun --cwd apps/web test -- components/app/feed components/app/ActivityCard
+bun --cwd apps/web test -- components/profile
+bun --cwd apps/web test:e2e -- e2e/public-profile.spec.ts e2e/landing-to-signup.spec.ts
+bun --cwd apps/web typecheck
+```
+
+Manual review:
+
+```bash
+bun --cwd apps/web dev
+```
+
+Check these states at desktop and mobile widths:
+
+- Guest feed with posts.
+- Signed-in own feed with no usage.
+- Signed-in own feed with usage.
+- Public profile with dense metadata.
+- Public profile with sparse metadata.
+
+PostHog check after deploying core UX changes:
+
+```sql
+SELECT event, count() AS count, max(timestamp) AS last_seen
+FROM events
+WHERE timestamp >= now() - INTERVAL 7 DAY
+  AND event IN (
+    'guest_signup_cta_clicked',
+    'sync_command_copied',
+    'first_sync_nudge_clicked'
+  )
+GROUP BY event
+ORDER BY event
+LIMIT 100
+```
+
+## Done Criteria
+
+- New users can find the sync command from every no-data authenticated state.
+- Guest users see a clear signup path after seeing product value.
+- Feed cards are easier to scan without hiding important actions.
+- Profile header has a clear first viewport hierarchy.
+- Navigation labels are understandable without prior product lore.
+- PostHog captures guest CTA, command-copy, and first-sync nudge interactions for consented sessions.
+
+## Stop Conditions
+
+- Stop if the profile refactor requires changing data contracts owned by Workstream 4.
+- Stop if collapsing secondary content hides an existing paid or critical workflow.
+- Stop if nav renaming conflicts with active marketing or launch copy; escalate with two concrete label options and tradeoffs.
diff --git a/plans/006-cli-first-run-snappiness.md b/plans/006-cli-first-run-snappiness.md
new file mode 100644
index 00000000..1fd56b39
--- /dev/null
+++ b/plans/006-cli-first-run-snappiness.md
@@ -0,0 +1,146 @@
+# Workstream 6: CLI First-Run Snappiness
+
+Priority: P1  
+Owner: CLI activation and performance agent  
+Estimated size: M  
+Depends on: Workstream 1 activation event names
+
+## Goal
+
+Make `npx straude@latest` feel fast and successful on the first run.
+
+The CLI should authenticate, sync the smallest useful amount of data, show an immediate success result, and defer heavier repair, backfill, dashboard, and telemetry work until after the activation moment.
+
+## Current Evidence
+
+- `packages/cli/src/index.ts` runs `pushCommand` when no command is provided.
+- `packages/cli/src/commands/push.ts` logs in first if no config exists, then continues into sync.
+- `resolvePushDateRange()` prioritizes ccusage v20 migration backfill before explicit `--days`; tests currently expect `pushCommand({ days: "3" })` to run a 30-day migration backfill when the migration marker is missing.
+- `packages/cli/src/lib/ccusage.ts` uses `CCUSAGE_PRICING_MODE = "online"` and invokes `ccusage daily ... --no-offline`.
+- `apps/web/app/api/usage/submit/route.ts` rejects collector metadata unless `pricing_mode` is `"online"`.
+- After submit, `pushCommand` fetches `/api/cli/dashboard` and renders `PushSummary`.
+- `packages/cli/src/index.ts` allows up to 500 ms for telemetry shutdown before process exit.
+- PostHog CLI telemetry is active in the project. Recent events include `cli_first_run`, `cli_authenticated`, `login_completed`, `usage_pushed`, and `usage_push_failed`.
+- Prior benchmark context indicates offline `ccusage` collection was much faster in an earlier implementation. Treat this as a performance hypothesis and re-benchmark against the current code before changing production behavior.
+
+## In Scope
+
+- `packages/cli/src/index.ts`
+- `packages/cli/src/commands/login.ts`
+- `packages/cli/src/commands/push.ts`
+- `packages/cli/src/commands/status.ts`
+- `packages/cli/src/lib/ccusage.ts`
+- `packages/cli/src/lib/api.ts`
+- `packages/cli/src/lib/telemetry.ts`
+- `packages/cli/__tests__/commands/*`
+- `packages/cli/__tests__/lib/*`
+- `apps/web/app/api/usage/submit/route.ts` only if collector metadata acceptance changes
+- Benchmark script or fixture for CLI first-run timing
+
+## Out of Scope
+
+- Web onboarding layout changes.
+- Feed/profile UI.
+- New billing or pricing semantics.
+
+## Implementation Instructions
+
+1. Define first-run timing budget.
+   - Measure a fresh unauthenticated `npx straude@latest` path with auth mocked or fixture-controlled.
+   - Measure a post-auth first sync with local ccusage fixture data.
+   - Record collection time, submit time, dashboard time, render time, and telemetry shutdown time separately.
+   - Add these timings to `usage_pushed` and `usage_push_failed` PostHog properties where they are safe and low-cardinality: `collection_ms`, `submit_ms`, `dashboard_ms`, `total_ms`, and `telemetry_shutdown_ms`.
+2. Make first sync small by default.
+   - The first successful run should sync the latest useful day or a small bounded window.
+   - Do not run a 30-day migration backfill before first success unless the user explicitly requests repair/backfill.
+   - Respect explicit `--days` unless there is a clearly documented safety reason not to.
+   - Add a follow-up message after first success for optional historical backfill, such as `straude push --days 30` or a dedicated repair command.
+3. Benchmark online versus offline `ccusage` pricing.
+   - Compare current `--no-offline` behavior with offline-first collection on representative fixture data.
+   - If offline-first is materially faster and accurate enough for activation, implement one of:
+     - offline-first with online fallback for missing pricing;
+     - explicit fast mode;
+     - background online correction after initial success.
+   - If accepting offline collector metadata, update `apps/web/app/api/usage/submit/route.ts` deliberately and add server tests.
+   - Do not silently weaken cost trust without labeling or correction behavior.
+4. Show success before dashboard enrichment.
+   - Use `/api/usage/submit` response data to print immediate success, totals, and first post URL.
+   - Fetch `/api/cli/dashboard` after success only if it is fast, timeboxed, or explicitly requested through `straude status`.
+   - If dashboard fetch fails, the first sync must still feel successful.
+5. Tighten telemetry exit behavior.
+   - Do not let telemetry shutdown make a successful command feel delayed.
+   - Lower the timeout or make shutdown best-effort after visible success.
+   - Keep failure telemetry useful, but never block critical error output.
+6. Preserve and enrich PostHog telemetry.
+   - Keep existing event names: `cli_first_run`, `cli_authenticated`, `login_completed`, `usage_pushed`, and `usage_push_failed`.
+   - Add properties instead of renaming events.
+   - Include `first_run`, `auth_flow_started`, `backfill_mode`, `pricing_mode`, `ccusage_version`, `dashboard_rendered`, and `dashboard_timed_out` where applicable.
+   - Keep path scrubbing and opt-out behavior intact.
+   - Verify event volume and properties in PostHog after release.
+7. Improve first-run copy.
+   - During login, explain that the CLI will continue into first sync after browser confirmation.
+   - After sync, show the web destination and one next action.
+   - Avoid dumping implementation detail before success.
+8. Update tests.
+   - Replace tests that expect `--days` to be overridden by migration backfill.
+   - Add tests for first-run quick sync, explicit backfill, dashboard timeout, telemetry timeout, and collector metadata mode.
+
+## Verification Commands
+
+```bash
+bun --cwd packages/cli test -- __tests__/commands/login.test.ts __tests__/commands/push.test.ts __tests__/commands/status.test.ts
+bun --cwd packages/cli test -- __tests__/lib
+bun --cwd packages/cli typecheck
+bun --cwd packages/cli build
+```
+
+If server metadata acceptance changes:
+
+```bash
+bun --cwd apps/web test -- app/api/usage/submit
+bun --cwd apps/web typecheck
+```
+
+Benchmark:
+
+```bash
+bun --cwd packages/cli benchmark:ccusage
+```
+
+If that script is missing or stale, add a focused benchmark script that uses fixture data and records timings for online collection, offline collection, submit, dashboard, and total command duration.
+
+PostHog check after release:
+
+```sql
+SELECT event, count() AS count, max(timestamp) AS last_seen
+FROM events
+WHERE timestamp >= now() - INTERVAL 7 DAY
+  AND event IN (
+    'cli_first_run',
+    'cli_authenticated',
+    'login_completed',
+    'usage_pushed',
+    'usage_push_failed'
+  )
+GROUP BY event
+ORDER BY event
+LIMIT 100
+```
+
+Also inspect `usage_pushed` and `usage_push_failed` properties for timing and mode fields before using them in dashboards.
+
+## Done Criteria
+
+- Fresh first sync has a documented timing improvement or a documented measured baseline with no regression.
+- First sync does not perform historical migration backfill before visible success.
+- Explicit `--days` is respected.
+- Dashboard fetch failure or slowness does not mask successful usage submit.
+- CLI output clearly tells the user what happened and where to view it.
+- CLI tests encode the new first-run behavior.
+- Existing PostHog CLI events continue arriving after the change, with added timing and mode properties.
+
+## Stop Conditions
+
+- Stop if offline pricing materially changes submitted cost values without a correction path.
+- Stop if historical backfill is required for data integrity rather than display richness.
+- Stop if reducing telemetry shutdown loses required compliance or billing events.
diff --git a/plans/007-final-integration-pass.md b/plans/007-final-integration-pass.md
new file mode 100644
index 00000000..8893a44c
--- /dev/null
+++ b/plans/007-final-integration-pass.md
@@ -0,0 +1,149 @@
+# Workstream 7: Final Integration Pass
+
+Priority: P1  
+Owner: integration lead  
+Estimated size: S-M  
+Depends on: Workstreams 1-6
+
+## Goal
+
+Combine the workstreams into one coherent product experience.
+
+The final result should feel like one fast activation loop across landing, signup, onboarding, app, and CLI.
+
+## In Scope
+
+- Cross-workstream copy consistency.
+- Activation-state consistency.
+- PostHog event, action, and dashboard consistency.
+- Bundle and network regression review.
+- End-to-end activation testing.
+- Release notes and rollout checks.
+
+## Out of Scope
+
+- New feature work not required by Workstreams 1-6.
+- Broad refactors outside touched surfaces.
+
+## Integration Instructions
+
+1. Reconcile state naming.
+   - Confirm every surface uses the same activation contract from Workstream 1.
+   - Remove local synonyms that reintroduce ambiguity, such as using `onboarding_completed` when the code means `activated`.
+2. Reconcile copy.
+   - Canonical command is `npx straude@latest`.
+   - Use "sync" for CLI data upload.
+   - Use "session" for a logged coding session.
+   - Use "first session" for activation.
+3. Verify no-data paths.
+   - Signed-in user with no usage sees first-sync guidance in onboarding and authenticated app.
+   - User who skips sync can still find the command quickly.
+   - User with usage no longer sees first-sync nudges.
+4. Verify public paths.
+   - Landing page loads without app-only providers.
+   - Guest feed and public profile remain browseable.
+   - Guest conversion CTAs do not block public reading.
+5. Verify CLI and web agree.
+   - CLI success destination opens or points to a route that exists.
+   - Web onboarding detects usage submitted by the CLI.
+   - CLI telemetry and web analytics use compatible PostHog event names.
+6. Verify PostHog end to end.
+   - Confirm deployed web has `NEXT_PUBLIC_POSTHOG_KEY`.
+   - Confirm consented web sessions send `$pageview` through `/ingest`.
+   - Confirm landing, signup, onboarding, CLI login, usage push, first-sync confirmation, and activation completion events appear in the PostHog project.
+   - Create or update PostHog actions for the final funnel events after the taxonomy is populated.
+   - Create or update an activation funnel dashboard that tracks visitor to signup, signup to command copy, command copy to CLI login, CLI login to `usage_pushed`, and `usage_pushed` to `activation_completed`.
+   - Create or update a CLI health dashboard for `usage_pushed`, `usage_push_failed`, p50/p95 timing properties, pricing mode, and backfill mode.
+7. Verify performance.
+   - Compare current route-bundle stats to the pre-work stale baseline and the first fresh baseline captured by Workstream 3.
+   - Confirm `/`, `/signup`, `/onboarding`, `/feed`, and `/u/[username]` do not regress.
+   - Confirm authenticated shell no longer fetches full notifications, command palette, or desktop sidebar data before needed.
+8. Prepare rollout notes.
+   - Mention activation-state behavior changes.
+   - Mention any analytics event renames.
+   - Mention any CLI first-run/backfill behavior changes.
+   - Include any manual Supabase migration or cron steps.
+
+## Full Verification Commands
+
+Run from the repo root after dependencies are restored:
+
+```bash
+bun install --frozen-lockfile
+bun --cwd apps/web typecheck
+bun --cwd packages/cli typecheck
+bun --cwd apps/web test
+bun --cwd packages/cli test
+bun --cwd apps/web build
+bun --cwd packages/cli build
+bun --cwd apps/web test:e2e
+```
+
+If the full E2E suite requires services:
+
+```bash
+bun run supabase:start
+bun --cwd apps/web dev
+```
+
+Then rerun the focused activation spec:
+
+```bash
+bun --cwd apps/web test:e2e -- e2e/signup-to-first-session.spec.ts
+```
+
+PostHog verification query:
+
+```sql
+SELECT event, count() AS count, max(timestamp) AS last_seen
+FROM events
+WHERE timestamp >= now() - INTERVAL 7 DAY
+  AND event IN (
+    '$pageview',
+    'landing_primary_cta_clicked',
+    'signup_started',
+    'signup_completed',
+    'onboarding_profile_started',
+    'sync_command_copied',
+    'cli_first_run',
+    'cli_authenticated',
+    'login_completed',
+    'usage_pushed',
+    'usage_push_failed',
+    'first_sync_confirmed',
+    'activation_completed'
+  )
+GROUP BY event
+ORDER BY event
+LIMIT 100
+```
+
+## Manual Acceptance Checklist
+
+- New visitor lands on `/`, understands the loop, and can choose signup or copy command.
+- New user signs up and sees first-sync command without optional profile questions getting in the way.
+- New user runs CLI and sees immediate success.
+- Web detects first sync and shows a rewarding success state.
+- User can reach profile/feed and see the first session.
+- Returning signed-in user with no usage still sees first-sync guidance.
+- Returning signed-in user with usage sees normal app surfaces with no activation clutter.
+- Public guest can browse before signing up.
+- Mobile app navigation remains understandable.
+- PostHog captures the funnel events for consented web users and CLI users.
+
+## Done Criteria
+
+- All focused workstream tests pass.
+- Full web and CLI typecheck pass.
+- Full web and CLI test suites pass or documented unrelated failures are approved by the integration lead.
+- Production build passes.
+- Bundle/network measurements are attached to the final PR.
+- Product copy is consistent across landing, onboarding, app, and CLI.
+- PostHog funnel and CLI health dashboards are updated or explicitly deferred with a reason.
+
+## Stop Conditions
+
+- Stop if two workstreams encode conflicting activation rules.
+- Stop if performance wins rely on removing a critical feature rather than deferring it.
+- Stop if any route loses unauthenticated/public access behavior unintentionally.
+- Stop if PostHog web capture remains stale after deployment and no consent-safe fallback is proposed.
diff --git a/plans/README.md b/plans/README.md
new file mode 100644
index 00000000..9f708b77
--- /dev/null
+++ b/plans/README.md
@@ -0,0 +1,88 @@
+# Straude Activation, UX, and Speed Plan
+
+Audit date: 2026-06-15  
+Audit commit: `507e67c`  
+Mode: read-only codebase audit. No source files were changed.
+
+## Executive Direction
+
+Optimize Straude around one product promise: a new user should understand the loop, sign up, run one command, and see their first session appear with useful feedback.
+
+Keep the app functionality-rich, but make the first path narrow. Move secondary exploration, social features, prompts, and company rankings behind progressive disclosure until after first sync.
+
+## Agent Workstreams
+
+Run these workstreams in order. Workstreams 2-6 can proceed in parallel after Workstream 1 lands the shared activation contract and test scaffolding.
+
+1. `001-activation-funnel-contract.md`  
+   Define the canonical signup-to-first-sync funnel, instrumentation, and regression tests.
+
+2. `002-onboarding-first-sync.md`  
+   Rework onboarding so first session pushed is the primary activation boundary.
+
+3. `003-public-landing-performance.md`  
+   Slim the public landing page and remove live analytics aggregation from the landing render path.
+
+4. `004-authenticated-shell-performance.md`  
+   Make the authenticated app shell progressively loaded and stop fetching non-critical data on every app route.
+
+5. `005-core-app-ux-activation.md`  
+   Improve feed, profile, guest, empty-state, and navigation UX while preserving depth.
+
+6. `006-cli-first-run-snappiness.md`  
+   Make the CLI first run fast, explicit, and rewarding.
+
+7. `007-final-integration-pass.md`  
+   Merge the workstreams, resolve cross-surface copy and state conflicts, and run the full verification pass.
+
+## Highest-Confidence Findings
+
+- The app marks onboarding complete before first session sync. `apps/web/app/(onboarding)/onboarding/page.tsx` sends `onboarding_completed: true` before Step 3, and `apps/web/app/api/users/me/route.ts` sends welcome/onboarding side effects on that flag. This optimizes for profile completion rather than first session pushed.
+- The Step 3 usage poll is both fragile and wasteful. It ignores pre-existing usage by baseline session count, then `/api/usage/status` selects all `daily_usage` rows every 4 seconds and reduces them in application code.
+- The public landing page pays for too much interactivity up front. The root layout globally mounts analytics, query, theme, and app providers; the landing hero is a client component for one copy button; WebGL, motion-heavy sections, and a remote Product Hunt badge compete with the first CTA.
+- The landing ticker fetch path can do live analytics work during page render. `getTickerStats()` calls `getOpenStatsForPage()`, which fetches up to 50,000 usage rows plus admin aggregates before falling back to snapshots. Public pages should use snapshot-first data.
+- The authenticated shell eagerly fetches and hydrates non-critical surfaces. Notifications, app counts, command palette, route prefetches, prompt widget, sidebars, photo nudges, and duplicate usage totals are all mounted around every app route.
+- The CLI first run can be slower than the activation moment allows. A fresh user may authenticate, run a 30-day migration backfill, use online `ccusage` pricing, submit usage, fetch dashboard data, render Ink output, and wait for telemetry shutdown before the command fully exits.
+- Guest and no-data web surfaces do not consistently point users to the sync command. The product has strong data views, but the empty and guest states do not keep the activation loop visible enough.
+
+## PostHog Status Checked On 2026-06-16
+
+PostHog is installed and should be the analytics system of record for activation iteration.
+
+- Web wiring exists in `apps/web/components/providers/PostHogProvider.tsx`. It initializes `posthog-js` only after analytics cookie consent, uses `/ingest` as a first-party proxy, disables automatic pageview capture, manually captures `$pageview`, and identifies Supabase users.
+- CLI wiring exists in `packages/cli/src/lib/posthog.ts`. It uses the same public project key, sends to `https://us.i.posthog.com`, flushes immediately for short-lived CLI runs, scrubs home-directory paths, honors `STRAUDE_TELEMETRY_DISABLED` and `DO_NOT_TRACK`, and disables telemetry in tests.
+- `apps/web/next.config.ts` includes `/ingest` rewrites to PostHog US endpoints. The CSP allows the same-origin proxy through `connect-src 'self'`.
+- Local env files include PostHog config. Implementation agents still need to verify deployed Vercel env has `NEXT_PUBLIC_POSTHOG_KEY`.
+- PostHog project data confirms recent CLI events are being captured: `cli_authenticated`, `usage_pushed`, `usage_push_failed`, `cli_first_run`, and `login_completed`.
+- PostHog project data does not currently show the required web activation events: `landing_primary_cta_clicked`, `signup_started`, `signup_completed`, `sync_command_copied`, `first_sync_confirmed`, or `activation_completed`.
+- `$pageview` exists in the project taxonomy but had no recent 30-day capture in the project query. Agents must verify whether this is caused by low "accept all" consent volume, deployed env configuration, provider placement, or pageview capture behavior.
+- No activation/onboarding PostHog actions were found. Create actions or an activation dashboard only after the final event names are implemented.
+
+## Dependency State Noted During Audit
+
+The local dependency tree is incomplete. These read-only verification attempts failed because package targets were missing behind existing `.bin` symlinks:
+
+```bash
+bun --cwd apps/web typecheck
+bun --cwd packages/cli typecheck
+bun --cwd apps/web test
+bun --cwd packages/cli test
+```
+
+Before implementation or verification, run:
+
+```bash
+bun install --frozen-lockfile
+```
+
+Then use each plan's narrower commands first. Do not rely only on root `bun run typecheck` or `bun run test` while iterating, because `turbo.json` makes those tasks depend on upstream builds.
+
+## Cross-Workstream Rules
+
+- Do not add a second onboarding model. One shared activation state should drive web banners, onboarding, CLI copy, and PostHog analytics.
+- Keep `npx straude@latest` as the canonical command everywhere unless the CLI workstream intentionally changes it.
+- Do not introduce new persistent user-facing terminology for the same concept. Use "sync", "session", and "first session" consistently.
+- Prefer server components and route-specific client providers on public pages. Add client islands only for direct interaction.
+- Keep the installed PostHog pipeline. Performance work may defer or route-split the PostHog client, but it must preserve consent handling, identity, first-party `/ingest` proxying, and CLI/web event continuity.
+- Keep social depth after activation. Leaderboards, profiles, achievements, prompts, and company rankings should remain discoverable, but they should not distract from first sync.
+- Every workstream must leave focused tests or a documented measurement artifact.

From aaacceff1fedb455a1f5f834aadc69f720bc964f Mon Sep 17 00:00:00 2001
From: Oscar Hong <oscar.hong2015@gmail.com>
Date: Thu, 2 Jul 2026 23:58:32 +0800
Subject: [PATCH 05/15] Implement activation analytics contract

---
 .../api/activation-analytics.test.ts          | 112 ++++++++++++++++
 apps/web/__tests__/api/usage-status.test.ts   |  81 ++++++++++++
 apps/web/__tests__/api/usage-submit.test.ts   |  17 +++
 .../flows/activation-contract.test.ts         |  74 +++++++++++
 .../__tests__/lib/analytics-server.test.ts    |  60 +++++++++
 apps/web/app/(auth)/callback/route.ts         |  42 ++++++
 apps/web/app/(auth)/signup/page.tsx           |  13 ++
 apps/web/app/(onboarding)/onboarding/page.tsx |  28 +++-
 .../web/app/api/analytics/activation/route.ts | 101 ++++++++++++++
 apps/web/app/api/usage/status/route.ts        |  19 ++-
 apps/web/app/api/usage/submit/route.ts        |  29 ++++
 apps/web/components/landing/Hero.tsx          |  20 ++-
 apps/web/lib/analytics/activation.ts          | 125 ++++++++++++++++++
 apps/web/lib/analytics/client.ts              |  34 +++++
 apps/web/lib/analytics/server.ts              |  72 ++++++++++
 15 files changed, 823 insertions(+), 4 deletions(-)
 create mode 100644 apps/web/__tests__/api/activation-analytics.test.ts
 create mode 100644 apps/web/__tests__/api/usage-status.test.ts
 create mode 100644 apps/web/__tests__/flows/activation-contract.test.ts
 create mode 100644 apps/web/__tests__/lib/analytics-server.test.ts
 create mode 100644 apps/web/app/api/analytics/activation/route.ts
 create mode 100644 apps/web/lib/analytics/activation.ts
 create mode 100644 apps/web/lib/analytics/client.ts
 create mode 100644 apps/web/lib/analytics/server.ts

diff --git a/apps/web/__tests__/api/activation-analytics.test.ts b/apps/web/__tests__/api/activation-analytics.test.ts
new file mode 100644
index 00000000..63442712
--- /dev/null
+++ b/apps/web/__tests__/api/activation-analytics.test.ts
@@ -0,0 +1,112 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("@/lib/supabase/server", () => ({
+  createClient: vi.fn(),
+}));
+
+vi.mock("@/lib/analytics/server", () => ({
+  captureServerActivationEvent: vi.fn().mockResolvedValue(true),
+  identifyServerActivationUser: vi.fn().mockResolvedValue(true),
+}));
+
+import { POST } from "@/app/api/analytics/activation/route";
+import { ACTIVATION_ANONYMOUS_COOKIE } from "@/lib/analytics/activation";
+import { captureServerActivationEvent, identifyServerActivationUser } from "@/lib/analytics/server";
+import { createClient } from "@/lib/supabase/server";
+
+function mockAuthUser(userId: string | null) {
+  vi.mocked(createClient).mockResolvedValue({
+    auth: {
+      getUser: vi.fn().mockResolvedValue({
+        data: { user: userId ? { id: userId } : null },
+      }),
+    },
+  } as any);
+}
+
+function request(body: unknown, cookie?: string) {
+  return new Request("http://localhost/api/analytics/activation", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      ...(cookie ? { cookie } : {}),
+    },
+    body: JSON.stringify(body),
+  });
+}
+
+describe("POST /api/analytics/activation", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockAuthUser(null);
+  });
+
+  it("captures anonymous lifecycle events with a short-lived activation id cookie", async () => {
+    const res = await POST(request({
+      event: "signup_started",
+      properties: {
+        surface: "signup",
+        signup_method: "magic_link",
+        email: "private@example.com",
+      },
+    }));
+
+    expect(res.status).toBe(200);
+    expect(res.headers.get("set-cookie")).toContain(`${ACTIVATION_ANONYMOUS_COOKIE}=`);
+    expect(captureServerActivationEvent).toHaveBeenCalledWith(expect.objectContaining({
+      event: "signup_started",
+      distinctId: expect.any(String),
+      properties: expect.objectContaining({
+        surface: "signup",
+        signup_method: "magic_link",
+        is_authenticated: false,
+        activation_state: "anonymous",
+      }),
+    }));
+    expect(captureServerActivationEvent).not.toHaveBeenCalledWith(expect.objectContaining({
+      properties: expect.objectContaining({ email: expect.anything() }),
+    }));
+  });
+
+  it("identifies authenticated users against the anonymous activation id", async () => {
+    mockAuthUser("user-1");
+
+    const res = await POST(request(
+      {
+        event: "sync_command_copied",
+        properties: {
+          surface: "onboarding",
+          command: "npx straude@latest",
+        },
+      },
+      `${ACTIVATION_ANONYMOUS_COOKIE}=anon-1`,
+    ));
+
+    expect(res.status).toBe(200);
+    expect(identifyServerActivationUser).toHaveBeenCalledWith({
+      distinctId: "user-1",
+      anonymousDistinctId: "anon-1",
+      properties: {
+        is_authenticated: true,
+        activation_state: "sync_command_copied",
+      },
+    });
+    expect(captureServerActivationEvent).toHaveBeenCalledWith(expect.objectContaining({
+      event: "sync_command_copied",
+      distinctId: "user-1",
+      properties: expect.objectContaining({
+        is_authenticated: true,
+        activation_state: "sync_command_copied",
+      }),
+    }));
+  });
+
+  it("rejects events that are not in the client lifecycle allowlist", async () => {
+    const res = await POST(request({ event: "usage_submit_succeeded" }));
+    const json = await res.json();
+
+    expect(res.status).toBe(400);
+    expect(json.error).toBe("Invalid activation event");
+    expect(captureServerActivationEvent).not.toHaveBeenCalled();
+  });
+});
diff --git a/apps/web/__tests__/api/usage-status.test.ts b/apps/web/__tests__/api/usage-status.test.ts
new file mode 100644
index 00000000..1b1e4f06
--- /dev/null
+++ b/apps/web/__tests__/api/usage-status.test.ts
@@ -0,0 +1,81 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("@/lib/supabase/server", () => ({
+  createClient: vi.fn(),
+}));
+
+vi.mock("@/lib/analytics/server", () => ({
+  captureServerActivationEvent: vi.fn().mockResolvedValue(true),
+}));
+
+import { GET } from "@/app/api/usage/status/route";
+import { captureServerActivationEvent } from "@/lib/analytics/server";
+import { createClient } from "@/lib/supabase/server";
+
+function mockUsageRows(rows: unknown[]) {
+  const chain = {
+    select: vi.fn().mockReturnThis(),
+    eq: vi.fn().mockReturnThis(),
+    order: vi.fn().mockResolvedValue({
+      data: rows,
+      error: null,
+    }),
+  };
+  vi.mocked(createClient).mockResolvedValue({
+    auth: {
+      getUser: vi.fn().mockResolvedValue({
+        data: { user: { id: "user-1" } },
+      }),
+    },
+    from: vi.fn(() => chain),
+  } as any);
+}
+
+describe("GET /api/usage/status", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("does not activate users without usage", async () => {
+    mockUsageRows([]);
+
+    const res = await GET();
+    const json = await res.json();
+
+    expect(res.status).toBe(200);
+    expect(json).toEqual({ has_data: false });
+    expect(captureServerActivationEvent).not.toHaveBeenCalled();
+  });
+
+  it("captures first sync confirmation when web observes usage", async () => {
+    mockUsageRows([
+      {
+        id: "usage-1",
+        date: "2026-07-02",
+        cost_usd: 1.25,
+        total_tokens: 2500,
+        session_count: 2,
+        models: ["claude-sonnet-4-5-20250929"],
+      },
+    ]);
+
+    const res = await GET();
+    const json = await res.json();
+
+    expect(res.status).toBe(200);
+    expect(json.has_data).toBe(true);
+    expect(captureServerActivationEvent).toHaveBeenCalledWith({
+      event: "first_sync_confirmed",
+      distinctId: "user-1",
+      properties: expect.objectContaining({
+        surface: "usage_status",
+        activation_state: "activated",
+        is_authenticated: true,
+        session_count: 2,
+        total_tokens: 2500,
+        total_cost_usd: 1.25,
+        "$insert_id": "first_sync_confirmed:user-1:usage-1",
+      }),
+    });
+  });
+});
diff --git a/apps/web/__tests__/api/usage-submit.test.ts b/apps/web/__tests__/api/usage-submit.test.ts
index 29c9a785..07655832 100644
--- a/apps/web/__tests__/api/usage-submit.test.ts
+++ b/apps/web/__tests__/api/usage-submit.test.ts
@@ -13,11 +13,16 @@ vi.mock("@/lib/supabase/service", () => ({
   getServiceClient: vi.fn(),
 }));
 
+vi.mock("@/lib/analytics/server", () => ({
+  captureServerActivationEvent: vi.fn().mockResolvedValue(true),
+}));
+
 vi.mock("@supabase/supabase-js", () => ({
   createClient: vi.fn(),
 }));
 
 import { POST, aggregateDeviceRows } from "@/app/api/usage/submit/route";
+import { captureServerActivationEvent } from "@/lib/analytics/server";
 import { createClient } from "@/lib/supabase/server";
 import { verifyCliToken, verifyCliTokenWithRefresh } from "@/lib/api/cli-auth";
 import { getServiceClient } from "@/lib/supabase/service";
@@ -209,6 +214,18 @@ describe("POST /api/usage/submit", () => {
     expect(json.results[0].post_id).toBe("post-1");
     expect(json.results[0].post_url).toBe("https://straude.com/post/post-1");
     expect(svc.rpc).toHaveBeenCalledWith("recalculate_user_level", { p_user_id: "user-1" });
+    expect(captureServerActivationEvent).toHaveBeenCalledWith(expect.objectContaining({
+      event: "usage_submit_succeeded",
+      distinctId: "user-1",
+      properties: expect.objectContaining({
+        surface: "usage_submit",
+        activation_state: "first_usage_submitted",
+        is_authenticated: true,
+        days_pushed: 1,
+        result_count: 1,
+        total_tokens: 1500,
+      }),
+    }));
   });
 
   it("submits multiple days (batch)", async () => {
diff --git a/apps/web/__tests__/flows/activation-contract.test.ts b/apps/web/__tests__/flows/activation-contract.test.ts
new file mode 100644
index 00000000..bded1d5d
--- /dev/null
+++ b/apps/web/__tests__/flows/activation-contract.test.ts
@@ -0,0 +1,74 @@
+import { describe, expect, it } from "vitest";
+import {
+  ACTIVATION_EVENTS,
+  deriveActivationState,
+  sanitizeActivationProperties,
+} from "@/lib/analytics/activation";
+
+describe("activation funnel contract", () => {
+  it("keeps the canonical event names stable", () => {
+    expect(ACTIVATION_EVENTS).toEqual([
+      "landing_primary_cta_clicked",
+      "signup_started",
+      "signup_completed",
+      "onboarding_profile_started",
+      "sync_command_copied",
+      "usage_submit_succeeded",
+      "first_sync_confirmed",
+      "activation_completed",
+    ]);
+  });
+
+  it("treats unauthenticated visitors as anonymous", () => {
+    expect(deriveActivationState({ isAuthenticated: false })).toBe("anonymous");
+  });
+
+  it("does not treat signup or profile setup as activation", () => {
+    expect(deriveActivationState({ isAuthenticated: true })).toBe("signed_up");
+    expect(deriveActivationState({
+      isAuthenticated: true,
+      profileStarted: true,
+    })).toBe("profile_started");
+  });
+
+  it("does not treat command copy or usage submit as activation", () => {
+    expect(deriveActivationState({
+      isAuthenticated: true,
+      syncCommandCopied: true,
+    })).toBe("sync_command_copied");
+    expect(deriveActivationState({
+      isAuthenticated: true,
+      usageSubmitted: true,
+    })).toBe("first_usage_submitted");
+  });
+
+  it("defines activated as first sync confirmed in web", () => {
+    expect(deriveActivationState({
+      isAuthenticated: true,
+      profileStarted: true,
+      syncCommandCopied: true,
+      usageSubmitted: true,
+      webSyncConfirmed: true,
+    })).toBe("activated");
+  });
+
+  it("strips private and high-cardinality fields from activation properties", () => {
+    expect(sanitizeActivationProperties({
+      surface: "onboarding",
+      activation_state: "activated",
+      is_authenticated: true,
+      total_tokens: 1234,
+      ccusage_agents: ["claude", "codex"],
+      email: "user@example.com",
+      prompt: "secret prompt",
+      path: "/Users/someone/project",
+      raw_usage_rows: [{ date: "2026-01-01" }],
+    })).toEqual({
+      surface: "onboarding",
+      activation_state: "activated",
+      is_authenticated: true,
+      total_tokens: 1234,
+      ccusage_agents: ["claude", "codex"],
+    });
+  });
+});
diff --git a/apps/web/__tests__/lib/analytics-server.test.ts b/apps/web/__tests__/lib/analytics-server.test.ts
new file mode 100644
index 00000000..b22714a4
--- /dev/null
+++ b/apps/web/__tests__/lib/analytics-server.test.ts
@@ -0,0 +1,60 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { captureServerActivationEvent } from "@/lib/analytics/server";
+
+describe("server PostHog activation capture", () => {
+  afterEach(() => {
+    vi.unstubAllEnvs();
+    vi.unstubAllGlobals();
+  });
+
+  it("posts sanitized activation events to PostHog capture", async () => {
+    vi.stubEnv("NEXT_PUBLIC_POSTHOG_KEY", "phc_test");
+    const fetchMock = vi.fn().mockResolvedValue({ ok: true });
+    vi.stubGlobal("fetch", fetchMock);
+
+    const result = await captureServerActivationEvent({
+      event: "activation_completed",
+      distinctId: "user-1",
+      properties: {
+        surface: "onboarding",
+        activation_state: "activated",
+        is_authenticated: true,
+        total_tokens: 5000,
+        prompt: "do not send",
+      } as any,
+    });
+
+    expect(result).toBe(true);
+    expect(fetchMock).toHaveBeenCalledWith(
+      "https://us.i.posthog.com/capture/",
+      expect.objectContaining({
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+      }),
+    );
+    const body = JSON.parse(fetchMock.mock.calls[0][1].body);
+    expect(body).toMatchObject({
+      api_key: "phc_test",
+      event: "activation_completed",
+      distinct_id: "user-1",
+      properties: {
+        surface: "onboarding",
+        activation_state: "activated",
+        is_authenticated: true,
+        total_tokens: 5000,
+      },
+    });
+    expect(body.properties.prompt).toBeUndefined();
+  });
+
+  it("skips capture when no PostHog project key is configured", async () => {
+    const fetchMock = vi.fn();
+    vi.stubGlobal("fetch", fetchMock);
+
+    await expect(captureServerActivationEvent({
+      event: "signup_completed",
+      distinctId: "user-1",
+    })).resolves.toBe(false);
+    expect(fetchMock).not.toHaveBeenCalled();
+  });
+});
diff --git a/apps/web/app/(auth)/callback/route.ts b/apps/web/app/(auth)/callback/route.ts
index f40056f4..01886726 100644
--- a/apps/web/app/(auth)/callback/route.ts
+++ b/apps/web/app/(auth)/callback/route.ts
@@ -1,7 +1,20 @@
 import { NextResponse } from "next/server";
+import { after } from "@/lib/utils/after";
+import { ACTIVATION_ANONYMOUS_COOKIE, deriveActivationState } from "@/lib/analytics/activation";
+import { captureServerActivationEvent, identifyServerActivationUser } from "@/lib/analytics/server";
 import { createClient } from "@/lib/supabase/server";
 import { getServiceClient } from "@/lib/supabase/service";
 
+function getCookieValue(cookieHeader: string | null, name: string): string | null {
+  if (!cookieHeader) return null;
+  const target = `${name}=`;
+  const entry = cookieHeader
+    .split(";")
+    .map((part) => part.trim())
+    .find((part) => part.startsWith(target));
+  return entry ? decodeURIComponent(entry.slice(target.length)) : null;
+}
+
 export async function GET(request: Request) {
   const { searchParams, origin: requestOrigin } = new URL(request.url);
   const origin = requestOrigin;
@@ -26,6 +39,35 @@ export async function GET(request: Request) {
           .select("username, github_username, onboarding_completed")
           .eq("id", user.id)
           .single();
+        const anonymousId = getCookieValue(
+          request.headers.get("cookie"),
+          ACTIVATION_ANONYMOUS_COOKIE,
+        );
+
+        after(async () => {
+          if (anonymousId) {
+            await identifyServerActivationUser({
+              distinctId: user.id,
+              anonymousDistinctId: anonymousId,
+              properties: {
+                is_authenticated: true,
+                activation_state: "signed_up",
+              },
+            });
+          }
+
+          if (!profile?.onboarding_completed) {
+            await captureServerActivationEvent({
+              event: "signup_completed",
+              distinctId: user.id,
+              properties: {
+                surface: "auth_callback",
+                activation_state: deriveActivationState({ isAuthenticated: true }),
+                is_authenticated: true,
+              },
+            });
+          }
+        });
 
         if (profile && !profile.username && profile.github_username) {
           const sanitized = profile.github_username
diff --git a/apps/web/app/(auth)/signup/page.tsx b/apps/web/app/(auth)/signup/page.tsx
index 694e69ae..6d916796 100644
--- a/apps/web/app/(auth)/signup/page.tsx
+++ b/apps/web/app/(auth)/signup/page.tsx
@@ -6,6 +6,7 @@ import Link from "next/link";
 import { BoltIcon } from "@/components/landing/icons";
 import { Button } from "@/components/ui/Button";
 import { Input } from "@/components/ui/Input";
+import { trackActivationEvent } from "@/lib/analytics/client";
 
 export default function SignupPage() {
   const [email, setEmail] = useState("");
@@ -17,6 +18,12 @@ export default function SignupPage() {
     e.preventDefault();
     setLoading(true);
     setError(null);
+    trackActivationEvent("signup_started", {
+      surface: "signup",
+      signup_method: "magic_link",
+      activation_state: "anonymous",
+      is_authenticated: false,
+    });
 
     const supabase = createClient();
     const { error } = await supabase.auth.signInWithOtp({
@@ -33,6 +40,12 @@ export default function SignupPage() {
   }
 
   async function handleGitHub() {
+    trackActivationEvent("signup_started", {
+      surface: "signup",
+      signup_method: "github",
+      activation_state: "anonymous",
+      is_authenticated: false,
+    });
     const supabase = createClient();
     await supabase.auth.signInWithOAuth({
       provider: "github",
diff --git a/apps/web/app/(onboarding)/onboarding/page.tsx b/apps/web/app/(onboarding)/onboarding/page.tsx
index c02b0549..67142683 100644
--- a/apps/web/app/(onboarding)/onboarding/page.tsx
+++ b/apps/web/app/(onboarding)/onboarding/page.tsx
@@ -9,6 +9,7 @@ import { Button } from "@/components/ui/Button";
 import { Input } from "@/components/ui/Input";
 import { Textarea } from "@/components/ui/Textarea";
 import { CountryPicker } from "@/components/ui/CountryPicker";
+import { trackActivationEvent } from "@/lib/analytics/client";
 import { formatCurrency } from "@/lib/utils/format";
 
 const SYNC_COMMAND = "npx straude@latest";
@@ -32,9 +33,16 @@ function Step3LogSession({ username }: { username: string }) {
   const [copied, setCopied] = useState(false);
   const [phase, setPhase] = useState<"waiting" | "success">("waiting");
   const [data, setData] = useState<UsageStatus | null>(null);
+  const activationTrackedRef = useRef(false);
 
   const handleCopy = useCallback(() => {
     navigator.clipboard.writeText(SYNC_COMMAND).then(() => {
+      trackActivationEvent("sync_command_copied", {
+        surface: "onboarding",
+        command: SYNC_COMMAND,
+        activation_state: "sync_command_copied",
+        is_authenticated: true,
+      });
       setCopied(true);
       setTimeout(() => setCopied(false), 2000);
     });
@@ -64,6 +72,17 @@ function Step3LogSession({ username }: { username: string }) {
         if (count > baselineRef.current && active) {
           setData(json);
           setPhase("success");
+          if (!activationTrackedRef.current) {
+            activationTrackedRef.current = true;
+            trackActivationEvent("activation_completed", {
+              surface: "onboarding",
+              activation_state: "activated",
+              is_authenticated: true,
+              session_count: count,
+              total_tokens: json.total_tokens,
+              total_cost_usd: json.cost_usd,
+            });
+          }
           if (intervalRef.current) clearInterval(intervalRef.current);
         }
       } catch {
@@ -414,7 +433,14 @@ export default function OnboardingPage() {
 
         <div className="mt-6 flex items-center gap-3">
           <Button
-            onClick={() => setStep(2)}
+            onClick={() => {
+              trackActivationEvent("onboarding_profile_started", {
+                surface: "onboarding",
+                activation_state: "profile_started",
+                is_authenticated: true,
+              });
+              setStep(2);
+            }}
             disabled={!canProceed}
             className="flex-1 py-3"
           >
diff --git a/apps/web/app/api/analytics/activation/route.ts b/apps/web/app/api/analytics/activation/route.ts
new file mode 100644
index 00000000..78a1c7ec
--- /dev/null
+++ b/apps/web/app/api/analytics/activation/route.ts
@@ -0,0 +1,101 @@
+import { randomUUID } from "node:crypto";
+import { NextResponse } from "next/server";
+import {
+  ACTIVATION_ANONYMOUS_COOKIE,
+  ACTIVATION_ANONYMOUS_COOKIE_MAX_AGE,
+  deriveActivationState,
+  isActivationEventName,
+  sanitizeActivationProperties,
+} from "@/lib/analytics/activation";
+import { captureServerActivationEvent, identifyServerActivationUser } from "@/lib/analytics/server";
+import { createClient } from "@/lib/supabase/server";
+
+const CLIENT_EVENT_ALLOWLIST = new Set([
+  "landing_primary_cta_clicked",
+  "signup_started",
+  "onboarding_profile_started",
+  "sync_command_copied",
+  "activation_completed",
+]);
+
+function getCookieValue(cookieHeader: string | null, name: string): string | null {
+  if (!cookieHeader) return null;
+  const target = `${name}=`;
+  const entry = cookieHeader
+    .split(";")
+    .map((part) => part.trim())
+    .find((part) => part.startsWith(target));
+  return entry ? decodeURIComponent(entry.slice(target.length)) : null;
+}
+
+async function getUserId(): Promise<string | null> {
+  try {
+    const supabase = await createClient();
+    const {
+      data: { user },
+    } = await supabase.auth.getUser();
+    return user?.id ?? null;
+  } catch {
+    return null;
+  }
+}
+
+export async function POST(request: Request) {
+  let body: { event?: unknown; properties?: unknown };
+  try {
+    body = await request.json();
+  } catch {
+    return NextResponse.json({ error: "Invalid JSON" }, { status: 400 });
+  }
+
+  if (!isActivationEventName(body.event) || !CLIENT_EVENT_ALLOWLIST.has(body.event)) {
+    return NextResponse.json({ error: "Invalid activation event" }, { status: 400 });
+  }
+
+  const userId = await getUserId();
+  const cookieHeader = request.headers.get("cookie");
+  const existingAnonymousId = getCookieValue(cookieHeader, ACTIVATION_ANONYMOUS_COOKIE);
+  const anonymousId = existingAnonymousId ?? randomUUID();
+  const distinctId = userId ?? anonymousId;
+  const isAuthenticated = Boolean(userId);
+  const properties = sanitizeActivationProperties({
+    ...(typeof body.properties === "object" && body.properties !== null ? body.properties : {}),
+    is_authenticated: isAuthenticated,
+    activation_state: deriveActivationState({
+      isAuthenticated,
+      syncCommandCopied: body.event === "sync_command_copied",
+      webSyncConfirmed: body.event === "activation_completed",
+    }),
+  });
+
+  if (userId && existingAnonymousId) {
+    await identifyServerActivationUser({
+      distinctId: userId,
+      anonymousDistinctId: existingAnonymousId,
+      properties: {
+        is_authenticated: true,
+        activation_state: properties.activation_state,
+      },
+    });
+  }
+
+  await captureServerActivationEvent({
+    event: body.event,
+    distinctId,
+    properties,
+  });
+
+  const response = NextResponse.json({ ok: true });
+  if (!existingAnonymousId) {
+    response.cookies.set({
+      name: ACTIVATION_ANONYMOUS_COOKIE,
+      value: anonymousId,
+      path: "/",
+      maxAge: ACTIVATION_ANONYMOUS_COOKIE_MAX_AGE,
+      sameSite: "lax",
+      secure: process.env.NODE_ENV === "production",
+      httpOnly: true,
+    });
+  }
+  return response;
+}
diff --git a/apps/web/app/api/usage/status/route.ts b/apps/web/app/api/usage/status/route.ts
index b9cd98d7..8774d17d 100644
--- a/apps/web/app/api/usage/status/route.ts
+++ b/apps/web/app/api/usage/status/route.ts
@@ -1,4 +1,6 @@
 import { NextResponse } from "next/server";
+import { after } from "@/lib/utils/after";
+import { captureServerActivationEvent } from "@/lib/analytics/server";
 import { createClient } from "@/lib/supabase/server";
 
 export async function GET() {
@@ -14,7 +16,7 @@ export async function GET() {
   // Fetch aggregated usage
   const { data: usageRows, error: usageError } = await supabase
     .from("daily_usage")
-    .select("cost_usd,total_tokens,session_count,models")
+    .select("id,date,cost_usd,total_tokens,session_count,models")
     .eq("user_id", user.id)
     .order("date", { ascending: false });
 
@@ -35,6 +37,21 @@ export async function GET() {
     Array.isArray(usageRows[0].models) && usageRows[0].models.length > 0
       ? usageRows[0].models[0]
       : null;
+  const latestUsage = usageRows[0];
+
+  after(() => captureServerActivationEvent({
+    event: "first_sync_confirmed",
+    distinctId: user.id,
+    properties: {
+      surface: "usage_status",
+      activation_state: "activated",
+      is_authenticated: true,
+      session_count,
+      total_tokens,
+      total_cost_usd: Math.round(cost_usd * 100) / 100,
+      "$insert_id": `first_sync_confirmed:${user.id}:${latestUsage.id ?? latestUsage.date}`,
+    },
+  }));
 
   return NextResponse.json({
     has_data: true,
diff --git a/apps/web/app/api/usage/submit/route.ts b/apps/web/app/api/usage/submit/route.ts
index b7e2b387..53a2c721 100644
--- a/apps/web/app/api/usage/submit/route.ts
+++ b/apps/web/app/api/usage/submit/route.ts
@@ -1,4 +1,6 @@
 import { NextResponse } from "next/server";
+import { after } from "@/lib/utils/after";
+import { captureServerActivationEvent } from "@/lib/analytics/server";
 import { createClient } from "@/lib/supabase/server";
 import { verifyCliTokenWithRefresh } from "@/lib/api/cli-auth";
 import { getServiceClient } from "@/lib/supabase/service";
@@ -239,6 +241,7 @@ function mergeCollectorWithRepairMeta(
 
 interface AuthContext {
   userId: string;
+  username?: string | null;
   source: "cli" | "web";
   /** When set, the response should include X-Straude-Refreshed-Token. */
   refreshedToken?: string | null;
@@ -251,6 +254,7 @@ async function resolveAuthContext(request: Request): Promise<AuthContext | null>
   if (cliAuth) {
     return {
       userId: cliAuth.userId,
+      username: cliAuth.username,
       source: "cli",
       refreshedToken: cliAuth.refreshedToken,
     };
@@ -717,6 +721,31 @@ export async function POST(request: Request) {
   if (auth.source === "cli" && auth.refreshedToken) {
     responseHeaders["X-Straude-Refreshed-Token"] = auth.refreshedToken;
   }
+  const datesCreated = results.filter((r) => r.action === "created").length;
+  const datesUpdated = results.filter((r) => r.action === "updated").length;
+  const totalCost = body.entries.reduce((sum, entry) => sum + entry.data.costUSD, 0);
+  const totalTokens = body.entries.reduce((sum, entry) => sum + entry.data.totalTokens, 0);
+
+  after(() => captureServerActivationEvent({
+    event: "usage_submit_succeeded",
+    distinctId: userId,
+    properties: {
+      surface: "usage_submit",
+      activation_state: "first_usage_submitted",
+      is_authenticated: true,
+      days_pushed: results.length,
+      dates_created: datesCreated,
+      dates_updated: datesUpdated,
+      result_count: results.length,
+      total_cost_usd: Math.round(totalCost * 100) / 100,
+      total_tokens: totalTokens,
+      pricing_mode: body.collector?.pricing_mode,
+      ccusage_version: body.collector?.ccusage_version,
+      ccusage_agents: body.collector?.ccusage_agents,
+      has_errors: errors.length > 0,
+      "$insert_id": `usage_submit_succeeded:${userId}:${body.hash ?? body.device_id ?? "unknown"}:${results.map((r) => r.date).join(",")}`,
+    },
+  }));
 
   const response: UsageSubmitResponse = { results };
   if (errors.length > 0) {
diff --git a/apps/web/components/landing/Hero.tsx b/apps/web/components/landing/Hero.tsx
index 7d409ddd..39656a37 100644
--- a/apps/web/components/landing/Hero.tsx
+++ b/apps/web/components/landing/Hero.tsx
@@ -3,12 +3,21 @@
 import Link from "next/link";
 import { useCallback, useState } from "react";
 import { ProductHuntBadge } from "./ProductHuntBadge";
+import { trackActivationEvent } from "@/lib/analytics/client";
+
+const SYNC_COMMAND = "npx straude@latest";
 
 function CopySnippet({ command }: { command: string }) {
   const [copied, setCopied] = useState(false);
 
   const copy = useCallback(() => {
     navigator.clipboard.writeText(command).then(() => {
+      trackActivationEvent("sync_command_copied", {
+        surface: "landing",
+        command,
+        activation_state: "sync_command_copied",
+        is_authenticated: false,
+      });
       setCopied(true);
       setTimeout(() => setCopied(false), 2000);
     });
@@ -65,17 +74,24 @@ export function Hero() {
         <div className="flex flex-wrap gap-4 mt-10">
           <Link
             href="/signup"
+            onClick={() => trackActivationEvent("landing_primary_cta_clicked", {
+              surface: "landing",
+              cta_location: "hero_primary",
+              destination: "/signup",
+              activation_state: "anonymous",
+              is_authenticated: false,
+            })}
             className="inline-flex items-center justify-center bg-accent text-landing-bg font-[family-name:var(--font-mono)] text-sm font-bold uppercase px-8 py-4 border border-accent hover:bg-transparent hover:text-accent active:scale-[0.97] transition-all duration-200"
           >
             Start Your Streak
           </Link>
-          <CopySnippet command="npx straude" />
+          <CopySnippet command={SYNC_COMMAND} />
         </div>
 
         {/* Terminal output */}
         <div className="mt-10 font-[family-name:var(--font-mono)] text-[0.8rem] text-landing-muted leading-relaxed max-w-[600px]">
           <span className="block text-landing-text">
-            &gt; npx straude
+            &gt; {SYNC_COMMAND}
           </span>
           <span className="block">Analyzing ~/.config/claude/projects/...</span>
           <span className="block">
diff --git a/apps/web/lib/analytics/activation.ts b/apps/web/lib/analytics/activation.ts
new file mode 100644
index 00000000..872fa4f3
--- /dev/null
+++ b/apps/web/lib/analytics/activation.ts
@@ -0,0 +1,125 @@
+export const ACTIVATION_ANONYMOUS_COOKIE = "straude_activation_id";
+export const ACTIVATION_ANONYMOUS_COOKIE_MAX_AGE = 60 * 60 * 24 * 30;
+
+export const ACTIVATION_EVENTS = [
+  "landing_primary_cta_clicked",
+  "signup_started",
+  "signup_completed",
+  "onboarding_profile_started",
+  "sync_command_copied",
+  "usage_submit_succeeded",
+  "first_sync_confirmed",
+  "activation_completed",
+] as const;
+
+export type ActivationEventName = (typeof ACTIVATION_EVENTS)[number];
+
+export type ActivationState =
+  | "anonymous"
+  | "signed_up"
+  | "profile_started"
+  | "sync_command_copied"
+  | "first_usage_submitted"
+  | "activated";
+
+export type ActivationSurface =
+  | "landing"
+  | "signup"
+  | "auth_callback"
+  | "onboarding"
+  | "usage_submit"
+  | "usage_status"
+  | "feed"
+  | "profile"
+  | "cli";
+
+export interface ActivationStateInput {
+  isAuthenticated: boolean;
+  profileStarted?: boolean;
+  syncCommandCopied?: boolean;
+  usageSubmitted?: boolean;
+  webSyncConfirmed?: boolean;
+}
+
+export type ActivationEventProperties = Partial<{
+  source: "server" | "browser" | "cli" | "web";
+  surface: ActivationSurface;
+  activation_state: ActivationState;
+  is_authenticated: boolean;
+  signup_method: "magic_link" | "github";
+  cta_location: string;
+  destination: string;
+  command: string;
+  days_pushed: number;
+  dates_created: number;
+  dates_updated: number;
+  result_count: number;
+  session_count: number;
+  total_tokens: number;
+  total_cost_usd: number;
+  pricing_mode: string;
+  ccusage_version: string;
+  ccusage_agents: string[];
+  has_existing_usage: boolean;
+  has_errors: boolean;
+  "$insert_id": string;
+}>;
+
+const EVENT_SET = new Set<ActivationEventName>(ACTIVATION_EVENTS);
+
+const ALLOWED_PROPERTY_KEYS = new Set([
+  "source",
+  "surface",
+  "activation_state",
+  "is_authenticated",
+  "signup_method",
+  "cta_location",
+  "destination",
+  "command",
+  "days_pushed",
+  "dates_created",
+  "dates_updated",
+  "result_count",
+  "session_count",
+  "total_tokens",
+  "total_cost_usd",
+  "pricing_mode",
+  "ccusage_version",
+  "ccusage_agents",
+  "has_existing_usage",
+  "has_errors",
+  "$insert_id",
+]);
+
+export function isActivationEventName(value: unknown): value is ActivationEventName {
+  return typeof value === "string" && EVENT_SET.has(value as ActivationEventName);
+}
+
+export function deriveActivationState(input: ActivationStateInput): ActivationState {
+  if (!input.isAuthenticated) return "anonymous";
+  if (input.webSyncConfirmed) return "activated";
+  if (input.usageSubmitted) return "first_usage_submitted";
+  if (input.syncCommandCopied) return "sync_command_copied";
+  if (input.profileStarted) return "profile_started";
+  return "signed_up";
+}
+
+export function sanitizeActivationProperties(
+  properties: Record<string, unknown> | null | undefined,
+): ActivationEventProperties {
+  const sanitized: Record<string, unknown> = {};
+  if (!properties) return sanitized;
+
+  for (const [key, value] of Object.entries(properties)) {
+    if (!ALLOWED_PROPERTY_KEYS.has(key)) continue;
+    if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+      sanitized[key] = value;
+      continue;
+    }
+    if (Array.isArray(value) && value.every((item) => typeof item === "string")) {
+      sanitized[key] = value.slice(0, 8);
+    }
+  }
+
+  return sanitized;
+}
diff --git a/apps/web/lib/analytics/client.ts b/apps/web/lib/analytics/client.ts
new file mode 100644
index 00000000..d32f7004
--- /dev/null
+++ b/apps/web/lib/analytics/client.ts
@@ -0,0 +1,34 @@
+"use client";
+
+import posthog from "posthog-js";
+import {
+  type ActivationEventName,
+  type ActivationEventProperties,
+  sanitizeActivationProperties,
+} from "@/lib/analytics/activation";
+import { getCookieConsentFromCookieString } from "@/lib/cookie-consent";
+
+export function trackActivationEvent(
+  event: ActivationEventName,
+  properties: ActivationEventProperties = {},
+): void {
+  const sanitized = sanitizeActivationProperties({
+    source: "browser",
+    ...properties,
+  });
+
+  fetch("/api/analytics/activation", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ event, properties: sanitized }),
+    keepalive: true,
+  }).catch(() => {});
+
+  if (getCookieConsentFromCookieString(document.cookie)?.analytics) {
+    try {
+      posthog.capture(event, sanitized);
+    } catch {
+      // Browser analytics is best-effort; server lifecycle capture is primary.
+    }
+  }
+}
diff --git a/apps/web/lib/analytics/server.ts b/apps/web/lib/analytics/server.ts
new file mode 100644
index 00000000..9b7894a7
--- /dev/null
+++ b/apps/web/lib/analytics/server.ts
@@ -0,0 +1,72 @@
+import {
+  type ActivationEventName,
+  type ActivationEventProperties,
+  sanitizeActivationProperties,
+} from "@/lib/analytics/activation";
+
+const DEFAULT_POSTHOG_HOST = "https://us.i.posthog.com";
+const SERVER_LIB = "straude-web-server";
+
+interface CaptureInput {
+  event: ActivationEventName;
+  distinctId: string;
+  properties?: ActivationEventProperties | Record<string, unknown>;
+}
+
+interface IdentifyInput {
+  distinctId: string;
+  anonymousDistinctId: string;
+  properties?: Record<string, unknown>;
+}
+
+function getPostHogConfig() {
+  const apiKey = process.env.POSTHOG_API_KEY ?? process.env.NEXT_PUBLIC_POSTHOG_KEY;
+  const host = (process.env.POSTHOG_HOST ?? DEFAULT_POSTHOG_HOST).replace(/\/+$/, "");
+  return apiKey ? { apiKey, host } : null;
+}
+
+async function postToPostHog(body: Record<string, unknown>): Promise<boolean> {
+  const config = getPostHogConfig();
+  if (!config) return false;
+
+  try {
+    const response = await fetch(`${config.host}/capture/`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        api_key: config.apiKey,
+        ...body,
+      }),
+    });
+    return response.ok;
+  } catch {
+    return false;
+  }
+}
+
+export async function captureServerActivationEvent(input: CaptureInput): Promise<boolean> {
+  const properties = sanitizeActivationProperties({
+    source: "server",
+    ...(input.properties ?? {}),
+    "$lib": SERVER_LIB,
+  });
+
+  return postToPostHog({
+    event: input.event,
+    distinct_id: input.distinctId,
+    properties,
+  });
+}
+
+export async function identifyServerActivationUser(input: IdentifyInput): Promise<boolean> {
+  const properties = sanitizeActivationProperties(input.properties);
+  return postToPostHog({
+    event: "$identify",
+    distinct_id: input.distinctId,
+    properties: {
+      ...properties,
+      "$anon_distinct_id": input.anonymousDistinctId,
+      "$lib": SERVER_LIB,
+    },
+  });
+}

From ac162e61cb7b754bce589d41e034ce925a43ad01 Mon Sep 17 00:00:00 2001
From: Oscar Hong <oscar.hong2015@gmail.com>
Date: Fri, 3 Jul 2026 00:13:50 +0800
Subject: [PATCH 06/15] Gate onboarding completion on first sync

---
 apps/web/__tests__/api/profile.test.ts        | 139 +++++++++++
 apps/web/__tests__/api/usage-status.test.ts   |  72 +++++-
 apps/web/app/(onboarding)/onboarding/page.tsx | 219 ++++++++----------
 apps/web/app/api/usage/status/route.ts        |  77 ++++--
 apps/web/app/api/users/me/route.ts            |  52 ++++-
 5 files changed, 402 insertions(+), 157 deletions(-)

diff --git a/apps/web/__tests__/api/profile.test.ts b/apps/web/__tests__/api/profile.test.ts
index 2265af6e..c4a3f6f5 100644
--- a/apps/web/__tests__/api/profile.test.ts
+++ b/apps/web/__tests__/api/profile.test.ts
@@ -8,6 +8,18 @@ vi.mock("@/lib/supabase/service", () => ({
   getServiceClient: vi.fn(),
 }));
 
+vi.mock("@/lib/email/send-welcome-email", () => ({
+  sendWelcomeEmail: vi.fn().mockResolvedValue(undefined),
+}));
+
+vi.mock("@/lib/referral", () => ({
+  attributeReferral: vi.fn().mockResolvedValue(undefined),
+}));
+
+vi.mock("@/lib/analytics/server", () => ({
+  captureServerActivationEvent: vi.fn().mockResolvedValue(true),
+}));
+
 vi.mock("@/lib/constants/regions", () => ({
   COUNTRY_TO_REGION: {
     US: "north_america",
@@ -18,6 +30,8 @@ vi.mock("@/lib/constants/regions", () => ({
 
 import { GET as getPublicProfile } from "@/app/api/users/[username]/route";
 import { GET as getOwnProfile, PATCH } from "@/app/api/users/me/route";
+import { captureServerActivationEvent } from "@/lib/analytics/server";
+import { sendWelcomeEmail } from "@/lib/email/send-welcome-email";
 import { createClient } from "@/lib/supabase/server";
 import { getServiceClient } from "@/lib/supabase/service";
 import { NextRequest } from "next/server";
@@ -351,6 +365,131 @@ describe("PATCH /api/users/me", () => {
     expect(json.username).toBe("new_name");
   });
 
+  it("does not complete onboarding before first sync is present", async () => {
+    const authClient: Record<string, any> = {
+      auth: {
+        getUser: vi.fn().mockResolvedValue({
+          data: { user: { id: "u-1", email: "u1@example.com" } },
+          error: null,
+        }),
+      },
+    };
+    const updateMock = vi.fn();
+    const dailyUsageChain = {
+      select: vi.fn().mockReturnThis(),
+      eq: vi.fn().mockReturnThis(),
+      order: vi.fn().mockReturnThis(),
+      limit: vi.fn().mockReturnThis(),
+      maybeSingle: vi.fn().mockResolvedValue({
+        data: null,
+        error: null,
+      }),
+    };
+    const db = {
+      from: vi.fn((table: string) => {
+        if (table === "daily_usage") return dailyUsageChain;
+        if (table === "users") return { update: updateMock };
+        throw new Error(`Unexpected table ${table}`);
+      }),
+    };
+    (createClient as any).mockResolvedValue(authClient);
+    (getServiceClient as any).mockReturnValue(db);
+
+    const res = await PATCH(
+      makeRequest("PATCH", "/api/users/me", { onboarding_completed: true })
+    );
+    const json = await res.json();
+
+    expect(res.status).toBe(409);
+    expect(json.error).toBe("Sync your first session before completing onboarding");
+    expect(updateMock).not.toHaveBeenCalled();
+    expect(sendWelcomeEmail).not.toHaveBeenCalled();
+    expect(captureServerActivationEvent).not.toHaveBeenCalled();
+  });
+
+  it("completes onboarding after first sync and captures activation", async () => {
+    const authClient: Record<string, any> = {
+      auth: {
+        getUser: vi.fn().mockResolvedValue({
+          data: { user: { id: "u-1", email: "u1@example.com" } },
+          error: null,
+        }),
+      },
+    };
+    const usageRow = {
+      id: "usage-1",
+      session_count: 2,
+      total_tokens: 2500,
+    };
+    const updatedProfile = {
+      id: "u-1",
+      username: "alice",
+      onboarding_completed: true,
+    };
+    const dailyUsageChain = {
+      select: vi.fn().mockReturnThis(),
+      eq: vi.fn().mockReturnThis(),
+      order: vi.fn().mockReturnThis(),
+      limit: vi.fn().mockReturnThis(),
+      maybeSingle: vi.fn().mockResolvedValue({
+        data: usageRow,
+        error: null,
+      }),
+    };
+    const updateMock = vi.fn().mockReturnValue({
+      eq: vi.fn().mockReturnValue({
+        select: vi.fn().mockReturnValue({
+          single: vi.fn().mockResolvedValue({
+            data: updatedProfile,
+            error: null,
+          }),
+        }),
+      }),
+    });
+    const leaderboardChain = {
+      select: vi.fn().mockReturnThis(),
+      neq: vi.fn().mockReturnThis(),
+      order: vi.fn().mockReturnThis(),
+      limit: vi.fn().mockResolvedValue({ data: [], error: null }),
+    };
+    const db = {
+      from: vi.fn((table: string) => {
+        if (table === "daily_usage") return dailyUsageChain;
+        if (table === "users") return { update: updateMock };
+        if (table === "leaderboard_weekly") return leaderboardChain;
+        throw new Error(`Unexpected table ${table}`);
+      }),
+    };
+    (createClient as any).mockResolvedValue(authClient);
+    (getServiceClient as any).mockReturnValue(db);
+
+    const res = await PATCH(
+      makeRequest("PATCH", "/api/users/me", { onboarding_completed: true })
+    );
+    const json = await res.json();
+
+    expect(res.status).toBe(200);
+    expect(json.onboarding_completed).toBe(true);
+    expect(updateMock).toHaveBeenCalledWith({ onboarding_completed: true });
+    expect(sendWelcomeEmail).toHaveBeenCalledWith({
+      userId: "u-1",
+      email: "u1@example.com",
+      username: "alice",
+    });
+    expect(captureServerActivationEvent).toHaveBeenCalledWith({
+      event: "activation_completed",
+      distinctId: "u-1",
+      properties: expect.objectContaining({
+        surface: "onboarding",
+        activation_state: "activated",
+        is_authenticated: true,
+        session_count: 2,
+        total_tokens: 2500,
+        "$insert_id": "activation_completed:usage-1",
+      }),
+    });
+  });
+
   it("validates username format", async () => {
     const client: Record<string, any> = {
       auth: {
diff --git a/apps/web/__tests__/api/usage-status.test.ts b/apps/web/__tests__/api/usage-status.test.ts
index 1b1e4f06..b72c94ed 100644
--- a/apps/web/__tests__/api/usage-status.test.ts
+++ b/apps/web/__tests__/api/usage-status.test.ts
@@ -12,12 +12,38 @@ import { GET } from "@/app/api/usage/status/route";
 import { captureServerActivationEvent } from "@/lib/analytics/server";
 import { createClient } from "@/lib/supabase/server";
 
-function mockUsageRows(rows: unknown[]) {
-  const chain = {
+function mockUsageStatus({
+  latestUsage,
+  totals = { total_cost: 0, total_tokens: 0 },
+  latestPost = null,
+  latestUsageError = null,
+}: {
+  latestUsage: unknown;
+  totals?: unknown;
+  latestPost?: unknown;
+  latestUsageError?: unknown;
+}) {
+  const latestUsageChain = {
     select: vi.fn().mockReturnThis(),
     eq: vi.fn().mockReturnThis(),
-    order: vi.fn().mockResolvedValue({
-      data: rows,
+    order: vi.fn().mockReturnThis(),
+    limit: vi.fn().mockReturnThis(),
+    maybeSingle: vi.fn().mockResolvedValue({
+      data: latestUsage,
+      error: latestUsageError,
+    }),
+  };
+  const latestPostChain = {
+    select: vi.fn().mockReturnThis(),
+    eq: vi.fn().mockReturnThis(),
+    maybeSingle: vi.fn().mockResolvedValue({
+      data: latestPost,
+      error: null,
+    }),
+  };
+  const rpcChain = {
+    single: vi.fn().mockResolvedValue({
+      data: totals,
       error: null,
     }),
   };
@@ -27,8 +53,15 @@ function mockUsageRows(rows: unknown[]) {
         data: { user: { id: "user-1" } },
       }),
     },
-    from: vi.fn(() => chain),
+    from: vi.fn((table: string) => {
+      if (table === "daily_usage") return latestUsageChain;
+      if (table === "posts") return latestPostChain;
+      throw new Error(`Unexpected table ${table}`);
+    }),
+    rpc: vi.fn(() => rpcChain),
   } as any);
+
+  return { latestUsageChain, latestPostChain, rpcChain };
 }
 
 describe("GET /api/usage/status", () => {
@@ -37,33 +70,48 @@ describe("GET /api/usage/status", () => {
   });
 
   it("does not activate users without usage", async () => {
-    mockUsageRows([]);
+    const { latestUsageChain } = mockUsageStatus({ latestUsage: null });
 
     const res = await GET();
     const json = await res.json();
 
     expect(res.status).toBe(200);
-    expect(json).toEqual({ has_data: false });
+    expect(json).toEqual({ has_data: false, has_usage: false });
+    expect(latestUsageChain.limit).toHaveBeenCalledWith(1);
     expect(captureServerActivationEvent).not.toHaveBeenCalled();
   });
 
   it("captures first sync confirmation when web observes usage", async () => {
-    mockUsageRows([
-      {
+    mockUsageStatus({
+      latestUsage: {
         id: "usage-1",
         date: "2026-07-02",
+        created_at: "2026-07-02T10:00:00.000Z",
         cost_usd: 1.25,
         total_tokens: 2500,
+        output_tokens: 1200,
         session_count: 2,
         models: ["claude-sonnet-4-5-20250929"],
       },
-    ]);
+      totals: {
+        total_cost: 7.75,
+        total_tokens: 9000,
+      },
+      latestPost: { id: "post-1" },
+    });
 
     const res = await GET();
     const json = await res.json();
 
     expect(res.status).toBe(200);
     expect(json.has_data).toBe(true);
+    expect(json.has_usage).toBe(true);
+    expect(json.cost_usd).toBe(7.75);
+    expect(json.total_tokens).toBe(9000);
+    expect(json.session_count).toBe(2);
+    expect(json.latest_usage_id).toBe("usage-1");
+    expect(json.latest_usage_at).toBe("2026-07-02T10:00:00.000Z");
+    expect(json.latest_post_url).toBe("/post/post-1");
     expect(captureServerActivationEvent).toHaveBeenCalledWith({
       event: "first_sync_confirmed",
       distinctId: "user-1",
@@ -72,8 +120,8 @@ describe("GET /api/usage/status", () => {
         activation_state: "activated",
         is_authenticated: true,
         session_count: 2,
-        total_tokens: 2500,
-        total_cost_usd: 1.25,
+        total_tokens: 9000,
+        total_cost_usd: 7.75,
         "$insert_id": "first_sync_confirmed:user-1:usage-1",
       }),
     });
diff --git a/apps/web/app/(onboarding)/onboarding/page.tsx b/apps/web/app/(onboarding)/onboarding/page.tsx
index 67142683..934d111b 100644
--- a/apps/web/app/(onboarding)/onboarding/page.tsx
+++ b/apps/web/app/(onboarding)/onboarding/page.tsx
@@ -7,8 +7,6 @@ import { BoltIcon } from "@/components/landing/icons";
 import { Check, X, Loader2, ArrowRight, Copy } from "lucide-react";
 import { Button } from "@/components/ui/Button";
 import { Input } from "@/components/ui/Input";
-import { Textarea } from "@/components/ui/Textarea";
-import { CountryPicker } from "@/components/ui/CountryPicker";
 import { trackActivationEvent } from "@/lib/analytics/client";
 import { formatCurrency } from "@/lib/utils/format";
 
@@ -16,10 +14,14 @@ const SYNC_COMMAND = "npx straude@latest";
 
 interface UsageStatus {
   has_data: boolean;
+  has_usage?: boolean;
   cost_usd?: number;
   total_tokens?: number;
   session_count?: number;
   top_model?: string | null;
+  latest_usage_id?: string;
+  latest_usage_at?: string | null;
+  latest_post_url?: string | null;
 }
 
 function formatTokens(n: number): string {
@@ -33,10 +35,15 @@ function Step3LogSession({ username }: { username: string }) {
   const [copied, setCopied] = useState(false);
   const [phase, setPhase] = useState<"waiting" | "success">("waiting");
   const [data, setData] = useState<UsageStatus | null>(null);
+  const [hasExistingUsage, setHasExistingUsage] = useState(false);
+  const [completionError, setCompletionError] = useState<string | null>(null);
   const activationTrackedRef = useRef(false);
+  const activationPersistedRef = useRef(false);
+  const commandCopiedRef = useRef(false);
 
   const handleCopy = useCallback(() => {
     navigator.clipboard.writeText(SYNC_COMMAND).then(() => {
+      commandCopiedRef.current = true;
       trackActivationEvent("sync_command_copied", {
         surface: "onboarding",
         command: SYNC_COMMAND,
@@ -48,9 +55,7 @@ function Step3LogSession({ username }: { username: string }) {
     });
   }, []);
 
-  // Poll for NEW session data (ignore pre-existing usage)
   const intervalRef = useRef<ReturnType<typeof setInterval>>(undefined);
-  const baselineRef = useRef<number | null>(null);
 
   useEffect(() => {
     let active = true;
@@ -60,29 +65,12 @@ function Step3LogSession({ username }: { username: string }) {
         const res = await fetch("/api/usage/status");
         if (!res.ok) return;
         const json: UsageStatus = await res.json();
-        const count = json.session_count ?? 0;
+        const hasUsage = json.has_usage ?? json.has_data;
 
-        // First poll: record the baseline
-        if (baselineRef.current === null) {
-          baselineRef.current = count;
-          return;
-        }
-
-        // Only transition when sessions increase beyond baseline
-        if (count > baselineRef.current && active) {
+        if (hasUsage && active) {
           setData(json);
+          setHasExistingUsage(!commandCopiedRef.current);
           setPhase("success");
-          if (!activationTrackedRef.current) {
-            activationTrackedRef.current = true;
-            trackActivationEvent("activation_completed", {
-              surface: "onboarding",
-              activation_state: "activated",
-              is_authenticated: true,
-              session_count: count,
-              total_tokens: json.total_tokens,
-              total_cost_usd: json.cost_usd,
-            });
-          }
           if (intervalRef.current) clearInterval(intervalRef.current);
         }
       } catch {
@@ -98,6 +86,49 @@ function Step3LogSession({ username }: { username: string }) {
     };
   }, []);
 
+  useEffect(() => {
+    if (phase !== "success" || !data || activationPersistedRef.current) return;
+
+    activationPersistedRef.current = true;
+    const observedUsage = data;
+
+    async function persistActivation() {
+      const res = await fetch("/api/users/me", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ onboarding_completed: true }),
+      });
+
+      if (!res.ok) {
+        const payload = await res.json().catch(() => ({}));
+        setCompletionError(
+          typeof payload.error === "string"
+            ? payload.error
+            : "We saw your usage, but setup could not be completed. Refresh and try again.",
+        );
+        return;
+      }
+
+      if (!activationTrackedRef.current) {
+        activationTrackedRef.current = true;
+        trackActivationEvent("activation_completed", {
+          surface: "onboarding",
+          activation_state: "activated",
+          is_authenticated: true,
+          session_count: observedUsage.session_count,
+          total_tokens: observedUsage.total_tokens,
+          total_cost_usd: observedUsage.cost_usd,
+          has_existing_usage: hasExistingUsage,
+          "$insert_id": observedUsage.latest_usage_id
+            ? `activation_completed:${observedUsage.latest_usage_id}`
+            : "activation_completed:onboarding",
+        });
+      }
+    }
+
+    void persistActivation();
+  }, [data, hasExistingUsage, phase]);
+
   if (phase === "success" && data) {
     return (
       <>
@@ -115,7 +146,8 @@ function Step3LogSession({ username }: { username: string }) {
           </h1>
         </div>
         <p className="mb-6 text-sm text-muted">
-          Your usage is live. Here&apos;s what we captured.
+          Your usage is live. Straude can now build your streak, spend totals,
+          and shareable session history.
         </p>
 
         {/* Stats grid */}
@@ -146,7 +178,23 @@ function Step3LogSession({ username }: { username: string }) {
           </div>
         </div>
 
+        {completionError && (
+          <p className="mt-4 rounded border border-red-500/30 bg-red-500/5 px-3 py-2 text-sm text-red-500">
+            {completionError}
+          </p>
+        )}
+
         <div className="mt-6 flex items-center gap-3">
+          {data.latest_post_url && (
+            <Button
+              type="button"
+              variant="secondary"
+              onClick={() => router.push(data.latest_post_url ?? "/feed")}
+              className="py-3"
+            >
+              View session
+            </Button>
+          )}
           <Button
             onClick={() => router.push(username ? `/u/${username}` : "/feed")}
             className="flex-1 py-3"
@@ -176,11 +224,11 @@ function Step3LogSession({ username }: { username: string }) {
         className="text-2xl font-medium tracking-tight"
         style={{ letterSpacing: "-0.03em" }}
       >
-        Log your first session
+        Sync your first session
       </h1>
       <p className="mt-1 mb-6 text-sm text-muted">
-        Run this in your terminal to post today&apos;s Claude Code usage to your
-        profile. Takes about 10 seconds.
+        Run this in your terminal after a Claude Code or Codex session. Straude
+        will post your usage stats as soon as the web app sees them.
       </p>
 
       {/* Copy-to-clipboard command */}
@@ -203,7 +251,7 @@ function Step3LogSession({ username }: { username: string }) {
 
       {/* Privacy assurance */}
       <p className="mt-4 text-xs leading-relaxed text-muted">
-        Only aggregate stats leave your machine — token counts, cost, model
+        Only aggregate stats leave your machine - token counts, cost, model
         names. Your prompts, code, and conversations never do.{" "}
         <Link href="/privacy" className="underline underline-offset-2 hover:text-foreground">
           Privacy policy
@@ -222,7 +270,7 @@ function Step3LogSession({ username }: { username: string }) {
           variant="secondary"
           className="flex-1 py-3"
         >
-          I&apos;ll do this later
+          Explore without syncing
         </Button>
       </div>
 
@@ -248,12 +296,6 @@ export default function OnboardingPage() {
   const [usernameStatus, setUsernameStatus] = useState<UsernameStatus>("idle");
   const debounceRef = useRef<ReturnType<typeof setTimeout>>(undefined);
 
-  // Step 2
-  const [bio, setBio] = useState("");
-  const [heardAbout, setHeardAbout] = useState("");
-  const [country, setCountry] = useState("");
-  const [githubUsername, setGithubUsername] = useState("");
-
   // Auto-detect timezone
   const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
 
@@ -263,9 +305,6 @@ export default function OnboardingPage() {
       const res = await fetch("/api/users/me");
       if (res.ok) {
         const profile = await res.json();
-        if (profile.github_username) {
-          setGithubUsername(profile.github_username);
-        }
         // Pre-fill username: use existing username (e.g. auto-claimed from GitHub),
         // otherwise suggest from GitHub handle
         if (profile.username) {
@@ -281,9 +320,6 @@ export default function OnboardingPage() {
           }
         }
         if (profile.display_name) setDisplayName(profile.display_name);
-        if (profile.country) setCountry(profile.country);
-        if (profile.bio) setBio(profile.bio);
-        if (profile.heard_about) setHeardAbout(profile.heard_about);
       }
     }
     loadProfile();
@@ -319,20 +355,15 @@ export default function OnboardingPage() {
     };
   }, [username]);
 
-  async function handleFinish() {
+  async function handleProfileSave() {
     setSaving(true);
     setError(null);
 
     const body: Record<string, unknown> = {
       timezone,
-      onboarding_completed: true,
     };
     if (username) body.username = username;
     if (displayName) body.display_name = displayName;
-    if (bio) body.bio = bio;
-    body.heard_about = heardAbout.trim() || null;
-    if (country) body.country = country;
-    if (githubUsername) body.github_username = githubUsername;
 
     const res = await fetch("/api/users/me", {
       method: "PATCH",
@@ -347,6 +378,7 @@ export default function OnboardingPage() {
       return;
     }
 
+    setSaving(false);
     setStep(3);
   }
 
@@ -449,12 +481,6 @@ export default function OnboardingPage() {
           </Button>
         </div>
 
-        <div className="mt-3 text-center">
-          <Link href="/feed" className="text-sm text-muted hover:text-foreground">
-            Skip for now
-          </Link>
-        </div>
-
         <div className="mt-4 flex justify-center gap-1.5">
           <span className="h-1.5 w-6 rounded-full bg-accent" />
           <span className="h-1.5 w-6 rounded-full bg-border" />
@@ -475,74 +501,25 @@ export default function OnboardingPage() {
           className="text-2xl font-medium tracking-tight"
           style={{ letterSpacing: "-0.03em" }}
         >
-          Almost there
+          Ready to sync
         </h1>
         <p className="mt-1 mb-6 text-sm text-muted">
-          Optional details to round out your profile. You can always change these
-          later in Settings.
+          Your first sync unlocks the useful parts of Straude: spend, tokens,
+          streaks, and a shareable session you can edit after it lands.
         </p>
 
-        <div className="space-y-4">
-          <div>
-            <label htmlFor="onboard-bio" className="mb-1 block text-xs font-semibold uppercase tracking-widest text-muted">
-              Bio
-            </label>
-            <Textarea
-              id="onboard-bio"
-              name="bio"
-              value={bio}
-              onChange={(e) => setBio(e.target.value)}
-              placeholder="What are you building with Claude\u2026"
-              maxLength={160}
-              rows={2}
-              className="min-h-0"
-            />
-            <p className="mt-1 text-xs text-muted">{bio.length}/160</p>
-          </div>
-
-          <div>
-            <label htmlFor="onboard-heard-about" className="mb-1 block text-xs font-semibold uppercase tracking-widest text-muted">
-              How did you hear about us?
-            </label>
-            <Textarea
-              id="onboard-heard-about"
-              name="heard_about"
-              value={heardAbout}
-              onChange={(e) => setHeardAbout(e.target.value)}
-              placeholder="Friend, GitHub, X, newsletter, podcast..."
-              maxLength={500}
-              rows={3}
-              className="min-h-0"
-              aria-describedby="onboard-heard-about-hint"
-            />
-            <div className="mt-1 flex items-end justify-end text-xs text-muted">
-              <span>{heardAbout.length}/500</span>
-            </div>
+        <div className="space-y-3 rounded border border-border bg-subtle px-4 py-4 text-sm text-muted">
+          <div className="flex gap-3">
+            <Check size={16} className="mt-0.5 shrink-0 text-accent" aria-hidden="true" />
+            <p>One command posts aggregate usage for your latest local sessions.</p>
           </div>
-
-          <div>
-            <label htmlFor="onboard-country" className="mb-1 block text-xs font-semibold uppercase tracking-widest text-muted">
-              Country
-            </label>
-            <CountryPicker
-              id="onboard-country"
-              name="country"
-              value={country}
-              onChange={setCountry}
-            />
+          <div className="flex gap-3">
+            <Check size={16} className="mt-0.5 shrink-0 text-accent" aria-hidden="true" />
+            <p>Prompts, code, file paths, and conversation text stay private.</p>
           </div>
-
-          <div>
-            <label htmlFor="onboard-github" className="mb-1 block text-xs font-semibold uppercase tracking-widest text-muted">
-              GitHub username
-            </label>
-            <Input
-              id="onboard-github"
-              name="github_username"
-              value={githubUsername}
-              onChange={(e) => setGithubUsername(e.target.value)}
-              placeholder="your-github"
-            />
+          <div className="flex gap-3">
+            <Check size={16} className="mt-0.5 shrink-0 text-accent" aria-hidden="true" />
+            <p>You can add bio, location, and links later from Settings.</p>
           </div>
         </div>
 
@@ -557,20 +534,14 @@ export default function OnboardingPage() {
             Back
           </button>
           <Button
-            onClick={handleFinish}
+            onClick={handleProfileSave}
             disabled={saving}
             className="flex-1 py-3"
           >
-            {saving ? "Setting up\u2026" : "Start logging"}
+            {saving ? "Saving..." : "Show sync command"}
           </Button>
         </div>
 
-        <div className="mt-3 text-center">
-          <Link href="/feed" className="text-sm text-muted hover:text-foreground">
-            Skip for now
-          </Link>
-        </div>
-
         <div className="mt-4 flex justify-center gap-1.5">
           <span className="h-1.5 w-6 rounded-full bg-accent" />
           <span className="h-1.5 w-6 rounded-full bg-accent" />
diff --git a/apps/web/app/api/usage/status/route.ts b/apps/web/app/api/usage/status/route.ts
index 8774d17d..96cd4277 100644
--- a/apps/web/app/api/usage/status/route.ts
+++ b/apps/web/app/api/usage/status/route.ts
@@ -3,6 +3,26 @@ import { after } from "@/lib/utils/after";
 import { captureServerActivationEvent } from "@/lib/analytics/server";
 import { createClient } from "@/lib/supabase/server";
 
+type LatestUsageRow = {
+  id: string;
+  date: string;
+  cost_usd: number | string | null;
+  total_tokens: number | string | null;
+  session_count: number | string | null;
+  models: unknown;
+  created_at: string | null;
+};
+
+type UsageTotalsRow = {
+  total_cost: number | string | null;
+  total_tokens: number | string | null;
+};
+
+function firstModel(models: unknown): string | null {
+  if (!Array.isArray(models) || models.length === 0) return null;
+  return typeof models[0] === "string" ? models[0] : null;
+}
+
 export async function GET() {
   const supabase = await createClient();
   const {
@@ -13,31 +33,43 @@ export async function GET() {
     return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
   }
 
-  // Fetch aggregated usage
-  const { data: usageRows, error: usageError } = await supabase
-    .from("daily_usage")
-    .select("id,date,cost_usd,total_tokens,session_count,models")
-    .eq("user_id", user.id)
-    .order("date", { ascending: false });
+  const [latestUsageResult, usageTotalsResult] = await Promise.all([
+    supabase
+      .from("daily_usage")
+      .select("id,date,cost_usd,total_tokens,session_count,models,created_at")
+      .eq("user_id", user.id)
+      .order("date", { ascending: false })
+      .limit(1)
+      .maybeSingle(),
+    supabase
+      .rpc("get_user_usage_totals", { p_user_id: user.id })
+      .single(),
+  ]);
 
-  if (usageError) {
+  if (latestUsageResult.error) {
     return NextResponse.json({ error: "Failed to fetch usage" }, { status: 500 });
   }
 
-  if (!usageRows || usageRows.length === 0) {
-    return NextResponse.json({ has_data: false });
+  const latestUsage = latestUsageResult.data as LatestUsageRow | null;
+
+  if (!latestUsage) {
+    return NextResponse.json({ has_data: false, has_usage: false });
   }
 
-  const cost_usd = usageRows.reduce((sum, r) => sum + Number(r.cost_usd), 0);
-  const total_tokens = usageRows.reduce((sum, r) => sum + Number(r.total_tokens), 0);
-  const session_count = usageRows.reduce((sum, r) => sum + Number(r.session_count), 0);
+  const totals = usageTotalsResult.data as UsageTotalsRow | null;
+  const cost_usd = usageTotalsResult.error
+    ? Number(latestUsage.cost_usd ?? 0)
+    : Number(totals?.total_cost ?? latestUsage.cost_usd ?? 0);
+  const total_tokens = usageTotalsResult.error
+    ? Number(latestUsage.total_tokens ?? 0)
+    : Number(totals?.total_tokens ?? latestUsage.total_tokens ?? 0);
+  const session_count = Number(latestUsage.session_count ?? 0);
 
-  // Top model from most recent row
-  const top_model =
-    Array.isArray(usageRows[0].models) && usageRows[0].models.length > 0
-      ? usageRows[0].models[0]
-      : null;
-  const latestUsage = usageRows[0];
+  const { data: latestPost } = await supabase
+    .from("posts")
+    .select("id")
+    .eq("daily_usage_id", latestUsage.id)
+    .maybeSingle();
 
   after(() => captureServerActivationEvent({
     event: "first_sync_confirmed",
@@ -49,15 +81,20 @@ export async function GET() {
       session_count,
       total_tokens,
       total_cost_usd: Math.round(cost_usd * 100) / 100,
-      "$insert_id": `first_sync_confirmed:${user.id}:${latestUsage.id ?? latestUsage.date}`,
+      "$insert_id": `first_sync_confirmed:${user.id}:${latestUsage.id}`,
     },
   }));
 
   return NextResponse.json({
     has_data: true,
+    has_usage: true,
     cost_usd: Math.round(cost_usd * 100) / 100,
     total_tokens,
     session_count,
-    top_model,
+    top_model: firstModel(latestUsage.models),
+    latest_usage_id: latestUsage.id,
+    latest_usage_at: latestUsage.created_at ?? latestUsage.date,
+    latest_usage_date: latestUsage.date,
+    latest_post_url: latestPost?.id ? `/post/${latestPost.id}` : null,
   });
 }
diff --git a/apps/web/app/api/users/me/route.ts b/apps/web/app/api/users/me/route.ts
index 05597e60..4656b357 100644
--- a/apps/web/app/api/users/me/route.ts
+++ b/apps/web/app/api/users/me/route.ts
@@ -1,4 +1,6 @@
 import { NextResponse, type NextRequest } from "next/server";
+import { after } from "@/lib/utils/after";
+import { captureServerActivationEvent } from "@/lib/analytics/server";
 import { createClient } from "@/lib/supabase/server";
 import { getServiceClient } from "@/lib/supabase/service";
 import { COUNTRY_TO_REGION } from "@/lib/constants/regions";
@@ -26,6 +28,12 @@ const ALLOWED_FIELDS = [
 const BIO_MAX_LENGTH = 160;
 const HEARD_ABOUT_MAX_LENGTH = 500;
 
+type ActivationUsageRow = {
+  id: string;
+  session_count: number | string | null;
+  total_tokens: number | string | null;
+};
+
 function normalizeProfileLink(value: unknown): string | null {
   if (value === null) return null;
   if (typeof value !== "string") {
@@ -199,9 +207,36 @@ export async function PATCH(request: NextRequest) {
     return NextResponse.json({ error: "No fields to update" }, { status: 400 });
   }
 
+  const db = getServiceClient();
   const isOnboardingUpdate = updates.onboarding_completed === true;
+  let activationUsage: ActivationUsageRow | null = null;
+
+  if (isOnboardingUpdate) {
+    const { data: usageRow, error: usageError } = await db
+      .from("daily_usage")
+      .select("id,session_count,total_tokens")
+      .eq("user_id", user.id)
+      .order("date", { ascending: false })
+      .limit(1)
+      .maybeSingle();
+
+    if (usageError) {
+      return NextResponse.json(
+        { error: "Unable to verify first sync" },
+        { status: 500 },
+      );
+    }
+
+    if (!usageRow) {
+      return NextResponse.json(
+        { error: "Sync your first session before completing onboarding" },
+        { status: 409 },
+      );
+    }
+
+    activationUsage = usageRow as ActivationUsageRow;
+  }
 
-  const db = getServiceClient();
   const { data: profile, error } = await db
     .from("users")
     .update(updates)
@@ -233,6 +268,21 @@ export async function PATCH(request: NextRequest) {
 
   // Auto-follow top active users so new users see content in their feed
   if (isOnboardingUpdate) {
+    after(() => captureServerActivationEvent({
+      event: "activation_completed",
+      distinctId: user.id,
+      properties: {
+        surface: "onboarding",
+        activation_state: "activated",
+        is_authenticated: true,
+        session_count: Number(activationUsage?.session_count ?? 0),
+        total_tokens: Number(activationUsage?.total_tokens ?? 0),
+        "$insert_id": activationUsage?.id
+          ? `activation_completed:${activationUsage.id}`
+          : `activation_completed:${user.id}`,
+      },
+    }));
+
     autoFollowTopUsers(user.id).catch(() => {});
 
     // Attribute referral from cookie

From 66cb651077d5af67cb3211008daa8f5253780c87 Mon Sep 17 00:00:00 2001
From: Oscar Hong <oscar.hong2015@gmail.com>
Date: Fri, 3 Jul 2026 00:18:15 +0800
Subject: [PATCH 07/15] Speed up public landing pages

---
 apps/web/__tests__/lib/open-stats.test.ts     | 115 ++++++++-------
 apps/web/app/(landing)/open/page.tsx          |   4 +-
 apps/web/components/landing/CTASection.tsx    |  30 +++-
 apps/web/components/landing/Hero.tsx          |  77 ++--------
 .../landing/LandingActivationActions.tsx      |  75 ++++++++++
 .../components/landing/LazyHalftoneCanvas.tsx |  36 ++++-
 apps/web/components/landing/MobileNav.tsx     | 115 +++++++++++++++
 apps/web/components/landing/Navbar.tsx        | 136 +-----------------
 .../components/landing/ProductHuntBadge.tsx   |  17 +--
 apps/web/components/landing/WallOfLove.tsx    |  42 +-----
 apps/web/components/landing/constants.ts      |   1 +
 .../e2e/golden-path/landing-to-signup.spec.ts |  21 ++-
 apps/web/lib/open-stats.ts                    |  88 ++++++------
 13 files changed, 408 insertions(+), 349 deletions(-)
 create mode 100644 apps/web/components/landing/LandingActivationActions.tsx
 create mode 100644 apps/web/components/landing/MobileNav.tsx
 create mode 100644 apps/web/components/landing/constants.ts

diff --git a/apps/web/__tests__/lib/open-stats.test.ts b/apps/web/__tests__/lib/open-stats.test.ts
index 0cb74040..35d66555 100644
--- a/apps/web/__tests__/lib/open-stats.test.ts
+++ b/apps/web/__tests__/lib/open-stats.test.ts
@@ -3,6 +3,7 @@ import {
   type OpenStats,
   type OpenStatsDb,
   getOpenStatsForPage,
+  refreshOpenStatsSnapshot,
 } from "@/lib/open-stats";
 
 type FixtureOptions = {
@@ -116,6 +117,61 @@ afterEach(() => {
 });
 
 describe("getOpenStatsForPage", () => {
+  it("returns the latest snapshot without running live aggregation", async () => {
+    const snapshotStats = makeSnapshotStats({
+      totalSpend: 101_001,
+      snapshotDate: "2026-03-31",
+      fetchedAt: "2026-03-31T23:59:59.000Z",
+    });
+    const { db, snapshotUpsert } = makeDb({
+      snapshotRows: [
+        {
+          snapshot_date: "2026-03-31",
+          captured_at: "2026-03-31T23:59:59.000Z",
+          stats: snapshotStats,
+        },
+      ],
+    });
+
+    const stats = await getOpenStatsForPage(db);
+
+    expect(stats.source).toBe("snapshot");
+    expect(stats.totalSpend).toBe(101_001);
+    expect(stats.snapshotDate).toBe("2026-03-31");
+    expect(db.from).not.toHaveBeenCalledWith("daily_usage");
+    expect(db.rpc).not.toHaveBeenCalled();
+    expect(snapshotUpsert).not.toHaveBeenCalled();
+  });
+
+  it("returns placeholder stats when the snapshot read fails", async () => {
+    const { db } = makeDb({
+      snapshotError: { message: "connection refused" },
+    });
+
+    const stats = await getOpenStatsForPage(db);
+
+    expect(stats.source).toBe("snapshot");
+    expect(stats.totalSpend).toBe(0);
+    expect(stats.trackedUsers).toBe(0);
+    expect(stats.models).toEqual([]);
+    expect(db.from).not.toHaveBeenCalledWith("daily_usage");
+    expect(db.rpc).not.toHaveBeenCalled();
+  });
+
+  it("returns placeholder stats when no snapshot exists", async () => {
+    const { db } = makeDb({ snapshotRows: [] });
+
+    const stats = await getOpenStatsForPage(db);
+
+    expect(stats.source).toBe("snapshot");
+    expect(stats.totalSpend).toBe(0);
+    expect(stats.trackedUsers).toBe(0);
+    expect(db.from).not.toHaveBeenCalledWith("daily_usage");
+    expect(db.rpc).not.toHaveBeenCalled();
+  });
+});
+
+describe("refreshOpenStatsSnapshot", () => {
   it("returns live stats and writes the latest snapshot", async () => {
     vi.useFakeTimers();
     vi.setSystemTime(new Date("2026-04-01T12:00:00.000Z"));
@@ -143,7 +199,7 @@ describe("getOpenStatsForPage", () => {
       spendRows: [{ date: "2026-04-01", daily_total: 12.5, cumulative_total: 12.5 }],
     });
 
-    const stats = await getOpenStatsForPage(db);
+    const stats = await refreshOpenStatsSnapshot(db);
 
     expect(stats.source).toBe("live");
     expect(stats.totalSpend).toBe(12.5);
@@ -159,64 +215,25 @@ describe("getOpenStatsForPage", () => {
     );
   });
 
-  it("falls back to the latest snapshot when the live query fails", async () => {
-    const snapshotStats = makeSnapshotStats();
-    const { db, snapshotUpsert } = makeDb({
-      usageError: { message: "database offline" },
-      snapshotRows: [
-        {
-          snapshot_date: "2026-04-01",
-          captured_at: "2026-04-01T12:00:00.000Z",
-          stats: snapshotStats,
-        },
-      ],
-    });
-
-    const stats = await getOpenStatsForPage(db);
-
-    expect(stats.source).toBe("snapshot");
-    expect(stats.totalSpend).toBe(snapshotStats.totalSpend);
-    expect(stats.fetchedAt).toBe(snapshotStats.fetchedAt);
-    expect(snapshotUpsert).not.toHaveBeenCalled();
-  });
-
-  it("returns placeholder stats when both live and snapshot fail", async () => {
+  it("throws when the live query fails", async () => {
     const { db } = makeDb({
-      usageError: { message: "connection refused" },
-      snapshotError: { message: "connection refused" },
+      usageError: { message: "database offline" },
     });
 
-    const stats = await getOpenStatsForPage(db);
-
-    expect(stats.source).toBe("snapshot");
-    expect(stats.totalSpend).toBe(0);
-    expect(stats.trackedUsers).toBe(0);
-    expect(stats.models).toEqual([]);
+    await expect(refreshOpenStatsSnapshot(db)).rejects.toThrow(
+      "open stats daily_usage query failed",
+    );
   });
 
-  it("falls back to the latest snapshot when live stats come back empty", async () => {
-    const snapshotStats = makeSnapshotStats({
-      totalSpend: 101_001,
-      snapshotDate: "2026-03-31",
-      fetchedAt: "2026-03-31T23:59:59.000Z",
-    });
+  it("throws when live stats come back empty", async () => {
     const { db } = makeDb({
       usageRows: [],
       concentrationRows: [],
       growthRows: [],
-      snapshotRows: [
-        {
-          snapshot_date: "2026-03-31",
-          captured_at: "2026-03-31T23:59:59.000Z",
-          stats: snapshotStats,
-        },
-      ],
     });
 
-    const stats = await getOpenStatsForPage(db);
-
-    expect(stats.source).toBe("snapshot");
-    expect(stats.totalSpend).toBe(101_001);
-    expect(stats.snapshotDate).toBe("2026-03-31");
+    await expect(refreshOpenStatsSnapshot(db)).rejects.toThrow(
+      "open stats daily_usage query returned no rows",
+    );
   });
 });
diff --git a/apps/web/app/(landing)/open/page.tsx b/apps/web/app/(landing)/open/page.tsx
index 38cfcda3..fb763da1 100644
--- a/apps/web/app/(landing)/open/page.tsx
+++ b/apps/web/app/(landing)/open/page.tsx
@@ -164,9 +164,7 @@ export default async function OpenStatsPage() {
             Daily, anonymized data from the Straude community.
           </p>
           <p className="mt-2 text-sm text-muted">
-            {stats.source === "snapshot"
-              ? "Showing the last successful snapshot while the live refresh recovers."
-              : "Updated daily from the latest successful Straude snapshot."}
+            Updated daily from the latest successful Straude snapshot.
           </p>
 
           {/* ---- Big Number Grid ----------------------------------------- */}
diff --git a/apps/web/components/landing/CTASection.tsx b/apps/web/components/landing/CTASection.tsx
index e033a769..a289c50a 100644
--- a/apps/web/components/landing/CTASection.tsx
+++ b/apps/web/components/landing/CTASection.tsx
@@ -1,3 +1,10 @@
+import {
+  CopyCommandButton,
+  SignupCtaLink,
+} from "@/components/landing/LandingActivationActions";
+import { ProductHuntBadge } from "@/components/landing/ProductHuntBadge";
+import { LANDING_SYNC_COMMAND } from "@/components/landing/constants";
+
 export function CTASection() {
   return (
     <section className="border-t border-landing-border py-24 md:py-32">
@@ -10,16 +17,25 @@ export function CTASection() {
         <div className="font-[family-name:var(--font-mono)] text-sm text-landing-muted">
           1. Claim your profile at straude.com
           <br />
-          2. Run one command after your session
+          2. Run one command after your first session
           <br />
-          3. See who else is putting in the work
+          3. Watch Straude confirm the sync
         </div>
-        <div className="inline-flex items-center gap-4 border border-landing-border bg-landing-panel px-6 py-3 font-[family-name:var(--font-mono)] text-lg text-landing-muted">
-          ${" "}
-          <span className="text-landing-text">
-            npx straude push --days 7
-          </span>
+
+        <div className="flex flex-col items-center gap-3 sm:flex-row">
+          <SignupCtaLink
+            ctaLocation="final_primary"
+            className="inline-flex items-center justify-center border border-accent bg-accent px-8 py-4 font-[family-name:var(--font-mono)] text-sm font-bold uppercase text-landing-bg transition-all duration-200 hover:bg-transparent hover:text-accent active:scale-[0.97]"
+          >
+            Start Your Streak
+          </SignupCtaLink>
+          <CopyCommandButton
+            command={LANDING_SYNC_COMMAND}
+            className="inline-flex cursor-pointer items-center gap-4 border border-landing-border bg-landing-panel px-6 py-4 font-[family-name:var(--font-mono)] text-sm text-landing-muted transition-[border-color,transform] hover:border-landing-dim active:scale-[0.97]"
+          />
         </div>
+
+        <ProductHuntBadge />
       </div>
     </section>
   );
diff --git a/apps/web/components/landing/Hero.tsx b/apps/web/components/landing/Hero.tsx
index 39656a37..74ec6036 100644
--- a/apps/web/components/landing/Hero.tsx
+++ b/apps/web/components/landing/Hero.tsx
@@ -1,61 +1,13 @@
-"use client";
-
-import Link from "next/link";
-import { useCallback, useState } from "react";
-import { ProductHuntBadge } from "./ProductHuntBadge";
-import { trackActivationEvent } from "@/lib/analytics/client";
-
-const SYNC_COMMAND = "npx straude@latest";
-
-function CopySnippet({ command }: { command: string }) {
-  const [copied, setCopied] = useState(false);
-
-  const copy = useCallback(() => {
-    navigator.clipboard.writeText(command).then(() => {
-      trackActivationEvent("sync_command_copied", {
-        surface: "landing",
-        command,
-        activation_state: "sync_command_copied",
-        is_authenticated: false,
-      });
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    });
-  }, [command]);
-
-  return (
-    <button
-      onClick={copy}
-      className="inline-flex cursor-pointer items-center gap-4 border border-landing-border bg-landing-panel px-4 py-3 font-[family-name:var(--font-mono)] text-sm text-landing-muted transition-[border-color,transform] hover:border-landing-dim active:scale-[0.97]"
-    >
-      ${" "}
-      <span className="text-landing-text">{command}</span>
-      {copied && (
-        <svg
-          className="h-4 w-4 text-accent"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-          strokeWidth={2}
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            d="M5 13l4 4L19 7"
-          />
-        </svg>
-      )}
-    </button>
-  );
-}
+import {
+  CopyCommandButton,
+  SignupCtaLink,
+} from "@/components/landing/LandingActivationActions";
+import { LANDING_SYNC_COMMAND } from "@/components/landing/constants";
 
 export function Hero() {
   return (
     <header className="min-h-screen flex flex-col justify-center px-8 lg:px-16 pt-32 relative">
       <div className="max-w-[900px]">
-        <div className="mb-6">
-          <ProductHuntBadge />
-        </div>
         <p className="font-[family-name:var(--font-mono)] text-sm uppercase tracking-wider text-landing-muted mb-4">
           {"// STRAVA FOR CLAUDE CODE"}
         </p>
@@ -72,26 +24,19 @@ export function Hero() {
         </p>
 
         <div className="flex flex-wrap gap-4 mt-10">
-          <Link
-            href="/signup"
-            onClick={() => trackActivationEvent("landing_primary_cta_clicked", {
-              surface: "landing",
-              cta_location: "hero_primary",
-              destination: "/signup",
-              activation_state: "anonymous",
-              is_authenticated: false,
-            })}
+          <SignupCtaLink
+            ctaLocation="hero_primary"
             className="inline-flex items-center justify-center bg-accent text-landing-bg font-[family-name:var(--font-mono)] text-sm font-bold uppercase px-8 py-4 border border-accent hover:bg-transparent hover:text-accent active:scale-[0.97] transition-all duration-200"
           >
             Start Your Streak
-          </Link>
-          <CopySnippet command={SYNC_COMMAND} />
+          </SignupCtaLink>
+          <CopyCommandButton command={LANDING_SYNC_COMMAND} />
         </div>
 
         {/* Terminal output */}
         <div className="mt-10 font-[family-name:var(--font-mono)] text-[0.8rem] text-landing-muted leading-relaxed max-w-[600px]">
           <span className="block text-landing-text">
-            &gt; {SYNC_COMMAND}
+            &gt; {LANDING_SYNC_COMMAND}
           </span>
           <span className="block">Analyzing ~/.config/claude/projects/...</span>
           <span className="block">
@@ -106,7 +51,7 @@ export function Hero() {
             Est. Cost: <span className="text-accent">$19.93</span>
           </span>
           <span className="block text-accent">
-            [OK] Session logged. Current streak: 18 days {"🔥"}
+            [OK] Session logged. Current streak: 18 days
           </span>
         </div>
       </div>
diff --git a/apps/web/components/landing/LandingActivationActions.tsx b/apps/web/components/landing/LandingActivationActions.tsx
new file mode 100644
index 00000000..694f2888
--- /dev/null
+++ b/apps/web/components/landing/LandingActivationActions.tsx
@@ -0,0 +1,75 @@
+"use client";
+
+import Link from "next/link";
+import { useCallback, useState } from "react";
+import { Check } from "lucide-react";
+import { trackActivationEvent } from "@/lib/analytics/client";
+import { LANDING_SYNC_COMMAND } from "@/components/landing/constants";
+
+export function SignupCtaLink({
+  children,
+  className,
+  ctaLocation,
+}: {
+  children: React.ReactNode;
+  className: string;
+  ctaLocation: string;
+}) {
+  return (
+    <Link
+      href="/signup"
+      onClick={() =>
+        trackActivationEvent("landing_primary_cta_clicked", {
+          surface: "landing",
+          cta_location: ctaLocation,
+          destination: "/signup",
+          activation_state: "anonymous",
+          is_authenticated: false,
+        })
+      }
+      className={className}
+    >
+      {children}
+    </Link>
+  );
+}
+
+export function CopyCommandButton({
+  command = LANDING_SYNC_COMMAND,
+  className,
+}: {
+  command?: string;
+  className?: string;
+}) {
+  const [copied, setCopied] = useState(false);
+
+  const copy = useCallback(() => {
+    navigator.clipboard.writeText(command).then(() => {
+      trackActivationEvent("sync_command_copied", {
+        surface: "landing",
+        command,
+        activation_state: "sync_command_copied",
+        is_authenticated: false,
+      });
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 2000);
+    });
+  }, [command]);
+
+  return (
+    <button
+      type="button"
+      onClick={copy}
+      className={
+        className ??
+        "inline-flex cursor-pointer items-center gap-4 border border-landing-border bg-landing-panel px-4 py-3 font-[family-name:var(--font-mono)] text-sm text-landing-muted transition-[border-color,transform] hover:border-landing-dim active:scale-[0.97]"
+      }
+    >
+      ${" "}
+      <span className="text-landing-text">{command}</span>
+      {copied && (
+        <Check className="h-4 w-4 text-accent" aria-hidden="true" />
+      )}
+    </button>
+  );
+}
diff --git a/apps/web/components/landing/LazyHalftoneCanvas.tsx b/apps/web/components/landing/LazyHalftoneCanvas.tsx
index 03ac40a4..603a0014 100644
--- a/apps/web/components/landing/LazyHalftoneCanvas.tsx
+++ b/apps/web/components/landing/LazyHalftoneCanvas.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import dynamic from "next/dynamic";
+import { useEffect, useState } from "react";
 
 const HalftoneCanvas = dynamic(
   () =>
@@ -11,5 +12,38 @@ const HalftoneCanvas = dynamic(
 );
 
 export function LazyHalftoneCanvas() {
-  return <HalftoneCanvas />;
+  const [enabled, setEnabled] = useState(false);
+
+  useEffect(() => {
+    const prefersReducedMotion = window.matchMedia(
+      "(prefers-reduced-motion: reduce)",
+    ).matches;
+    const saveData =
+      "connection" in navigator &&
+      Boolean((navigator as Navigator & { connection?: { saveData?: boolean } }).connection?.saveData);
+
+    if (prefersReducedMotion || saveData) return;
+
+    const start = () => setEnabled(true);
+    if ("requestIdleCallback" in window) {
+      const idleId = window.requestIdleCallback(start, { timeout: 1800 });
+      return () => window.cancelIdleCallback(idleId);
+    }
+
+    const timeoutId = globalThis.setTimeout(start, 1200);
+    return () => globalThis.clearTimeout(timeoutId);
+  }, []);
+
+  return (
+    <>
+      <div
+        className="pointer-events-none fixed inset-0 z-0 opacity-35"
+        aria-hidden="true"
+      >
+        <div className="h-full w-full bg-[radial-gradient(circle_at_18px_18px,rgba(223,86,31,0.32)_0,rgba(223,86,31,0.32)_2px,transparent_2.5px)] [background-size:42px_42px]" />
+        <div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(5,5,5,0)_0%,rgba(5,5,5,0.62)_72%,rgba(5,5,5,0.95)_100%)]" />
+      </div>
+      {enabled ? <HalftoneCanvas /> : null}
+    </>
+  );
 }
diff --git a/apps/web/components/landing/MobileNav.tsx b/apps/web/components/landing/MobileNav.tsx
new file mode 100644
index 00000000..ca3073dc
--- /dev/null
+++ b/apps/web/components/landing/MobileNav.tsx
@@ -0,0 +1,115 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import Link from "next/link";
+import { Menu, X } from "lucide-react";
+import { trackActivationEvent } from "@/lib/analytics/client";
+
+const NAV_LINKS = [
+  { href: "/feed", label: "Feed" },
+  { href: "/leaderboard", label: "Leaderboard" },
+  { href: "/token-rich", label: "Prometheus List" },
+] as const;
+
+export function MobileNav({ variant = "dark" }: { variant?: "dark" | "light" }) {
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const light = variant === "light";
+  const text = light ? "text-foreground" : "text-landing-text";
+  const mobileBg = light
+    ? "border-border bg-background/95"
+    : "border-landing-border bg-landing-bg/95";
+
+  useEffect(() => {
+    if (!mobileOpen) return;
+
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === "Escape") {
+        setMobileOpen(false);
+        return;
+      }
+
+      if (event.key !== "Tab" || !menuRef.current) return;
+
+      const focusable = menuRef.current.querySelectorAll<HTMLElement>(
+        'a, button, [tabindex]:not([tabindex="-1"])',
+      );
+      if (focusable.length === 0) return;
+
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    }
+
+    document.addEventListener("keydown", handleKeyDown);
+    requestAnimationFrame(() => {
+      menuRef.current?.querySelector<HTMLElement>("a, button")?.focus();
+    });
+
+    return () => {
+      document.body.style.overflow = previousOverflow;
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [mobileOpen]);
+
+  return (
+    <>
+      <button
+        type="button"
+        className={`md:hidden ${text}`}
+        onClick={() => setMobileOpen((open) => !open)}
+        aria-label="Toggle menu"
+        aria-expanded={mobileOpen}
+      >
+        {mobileOpen ? <X size={24} /> : <Menu size={24} />}
+      </button>
+
+      {mobileOpen && (
+        <div
+          ref={menuRef}
+          className={`md:hidden border-t ${mobileBg} px-8 pb-8 pt-6 backdrop-blur-md`}
+          role="dialog"
+          aria-label="Mobile navigation"
+        >
+          <div className="flex flex-col gap-6 font-[family-name:var(--font-mono)] text-sm uppercase">
+            {NAV_LINKS.map((link) => (
+              <Link
+                key={link.href}
+                href={link.href}
+                className={text}
+                onClick={() => setMobileOpen(false)}
+              >
+                {link.label}
+              </Link>
+            ))}
+            <Link
+              href="/signup"
+              className="text-accent"
+              onClick={() => {
+                trackActivationEvent("landing_primary_cta_clicked", {
+                  surface: "landing",
+                  cta_location: "nav_mobile",
+                  destination: "/signup",
+                  activation_state: "anonymous",
+                  is_authenticated: false,
+                });
+                setMobileOpen(false);
+              }}
+            >
+              Get Started
+            </Link>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/apps/web/components/landing/Navbar.tsx b/apps/web/components/landing/Navbar.tsx
index 690513d1..5fccb3b3 100644
--- a/apps/web/components/landing/Navbar.tsx
+++ b/apps/web/components/landing/Navbar.tsx
@@ -1,82 +1,12 @@
-"use client";
-
-import { useState, useEffect, useRef, useSyncExternalStore } from "react";
 import Link from "next/link";
-import { Menu, X } from "lucide-react";
-import { AnimatePresence, motion } from "motion/react";
 import { BoltIcon } from "@/components/landing/icons";
-
-function subscribeToAuthHrefChange() {
-  return () => {};
-}
-
-function getAuthHrefSnapshot() {
-  try {
-    return localStorage.getItem("straude_returning") ? "/login" : "/signup";
-  } catch {
-    return "/signup";
-  }
-}
+import { SignupCtaLink } from "@/components/landing/LandingActivationActions";
+import { MobileNav } from "@/components/landing/MobileNav";
 
 export function Navbar({ variant = "dark" }: { variant?: "dark" | "light" }) {
-  const [mobileOpen, setMobileOpen] = useState(false);
-  const authHref = useSyncExternalStore(
-    subscribeToAuthHrefChange,
-    getAuthHrefSnapshot,
-    () => "/signup",
-  );
-  const menuRef = useRef<HTMLDivElement>(null);
-
-  // Focus trap, Escape handler, and body scroll lock when mobile menu is open
-  useEffect(() => {
-    if (!mobileOpen) return;
-
-    // Lock body scroll
-    const prev = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-
-    function handleKeyDown(e: KeyboardEvent) {
-      if (e.key === "Escape") {
-        setMobileOpen(false);
-        return;
-      }
-      // Focus trap
-      if (e.key === "Tab" && menuRef.current) {
-        const focusable = menuRef.current.querySelectorAll<HTMLElement>(
-          'a, button, [tabindex]:not([tabindex="-1"])'
-        );
-        if (focusable.length === 0) return;
-        const first = focusable[0];
-        const last = focusable[focusable.length - 1];
-        if (e.shiftKey && document.activeElement === first) {
-          e.preventDefault();
-          last.focus();
-        } else if (!e.shiftKey && document.activeElement === last) {
-          e.preventDefault();
-          first.focus();
-        }
-      }
-    }
-
-    document.addEventListener("keydown", handleKeyDown);
-    // Focus first link on open
-    requestAnimationFrame(() => {
-      const first = menuRef.current?.querySelector<HTMLElement>("a, button");
-      first?.focus();
-    });
-
-    return () => {
-      document.body.style.overflow = prev;
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [mobileOpen]);
-
   const light = variant === "light";
   const text = light ? "text-foreground" : "text-landing-text";
   const hoverCta = light ? "hover:text-foreground" : "hover:text-landing-text";
-  const mobileBg = light
-    ? "border-border bg-background/95"
-    : "border-landing-border bg-landing-bg/95";
 
   return (
     <nav
@@ -112,70 +42,16 @@ export function Navbar({ variant = "dark" }: { variant?: "dark" | "light" }) {
           >
             Prometheus List
           </Link>
-          <Link
-            href={authHref}
+          <SignupCtaLink
+            ctaLocation="nav_desktop"
             className={`text-accent ${hoverCta} transition-colors`}
           >
             Get Started
-          </Link>
+          </SignupCtaLink>
         </div>
 
-        {/* Mobile hamburger */}
-        <button
-          className={`md:hidden ${text}`}
-          onClick={() => setMobileOpen(!mobileOpen)}
-          aria-label="Toggle menu"
-        >
-          {mobileOpen ? <X size={24} /> : <Menu size={24} />}
-        </button>
+        <MobileNav variant={variant} />
       </div>
-
-      {/* Mobile menu */}
-      <AnimatePresence>
-        {mobileOpen && (
-          <motion.div
-            ref={menuRef}
-            className={`md:hidden border-t ${mobileBg} backdrop-blur-md px-8 pb-8 pt-6`}
-            initial={{ opacity: 0, y: -8 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: -8 }}
-            transition={{ duration: 0.2, ease: [0.25, 0.46, 0.45, 0.94] }}
-            role="dialog"
-            aria-label="Mobile navigation"
-          >
-            <div className="flex flex-col gap-6 font-[family-name:var(--font-mono)] text-sm uppercase">
-              <Link
-                href="/feed"
-                className={text}
-                onClick={() => setMobileOpen(false)}
-              >
-                Feed
-              </Link>
-              <Link
-                href="/leaderboard"
-                className={text}
-                onClick={() => setMobileOpen(false)}
-              >
-                Leaderboard
-              </Link>
-              <Link
-                href="/token-rich"
-                className={text}
-                onClick={() => setMobileOpen(false)}
-              >
-                Prometheus List
-              </Link>
-              <Link
-                href={authHref}
-                className="text-accent"
-                onClick={() => setMobileOpen(false)}
-              >
-                Get Started
-              </Link>
-            </div>
-          </motion.div>
-        )}
-      </AnimatePresence>
     </nav>
   );
 }
diff --git a/apps/web/components/landing/ProductHuntBadge.tsx b/apps/web/components/landing/ProductHuntBadge.tsx
index 0ba52c59..1e38504f 100644
--- a/apps/web/components/landing/ProductHuntBadge.tsx
+++ b/apps/web/components/landing/ProductHuntBadge.tsx
@@ -1,10 +1,5 @@
 const PRODUCT_HUNT_URL =
   "https://www.producthunt.com/products/straude/launches/straude?embed=true&utm_source=badge-featured&utm_medium=badge&utm_campaign=badge-straude";
-const BADGE_SRC =
-  "https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1114059&theme=dark&t=1777407227004";
-
-const WIDTH = 188;
-const HEIGHT = 41;
 
 export function ProductHuntBadge() {
   return (
@@ -12,16 +7,10 @@ export function ProductHuntBadge() {
       href={PRODUCT_HUNT_URL}
       target="_blank"
       rel="noopener noreferrer"
-      className="inline-block transition-transform active:scale-[0.98]"
+      className="inline-flex items-center gap-2 border border-landing-border bg-landing-panel px-3 py-2 font-[family-name:var(--font-mono)] text-xs uppercase tracking-wider text-landing-muted transition-[border-color,color,transform] hover:border-accent/50 hover:text-landing-text active:scale-[0.98]"
     >
-      {/* eslint-disable-next-line @next/next/no-img-element */}
-      <img
-        src={BADGE_SRC}
-        alt="Straude - Strava for Claude Code, the global tokenmaxxing Leaderboard | Product Hunt"
-        width={WIDTH}
-        height={HEIGHT}
-        style={{ width: WIDTH, height: HEIGHT }}
-      />
+      <span className="text-accent">Featured</span>
+      <span>on Product Hunt</span>
     </a>
   );
 }
diff --git a/apps/web/components/landing/WallOfLove.tsx b/apps/web/components/landing/WallOfLove.tsx
index f7904488..9db40450 100644
--- a/apps/web/components/landing/WallOfLove.tsx
+++ b/apps/web/components/landing/WallOfLove.tsx
@@ -1,8 +1,5 @@
-"use client";
-
 import Image from "next/image";
 import type { WallOfLovePost } from "@/types";
-import { motion, type Variants } from "motion/react";
 
 function XIcon({ className }: { className?: string }) {
   return (
@@ -17,26 +14,10 @@ function XIcon({ className }: { className?: string }) {
   );
 }
 
-const wallCardVariants: Variants = {
-  hidden: { opacity: 0, y: 28, scale: 0.97 },
-  visible: (i: number) => ({
-    opacity: 1,
-    y: 0,
-    scale: 1,
-    transition: {
-      delay: i * 0.04,
-      duration: 0.55,
-      ease: [0.25, 0.46, 0.45, 0.94],
-    },
-  }),
-};
-
 function WallOfLoveCard({
   post,
-  index,
 }: {
   post: WallOfLovePost;
-  index: number;
 }) {
   const initials = post.author_name
     .split(" ")
@@ -44,16 +25,11 @@ function WallOfLoveCard({
     .join("");
 
   return (
-    <motion.a
+    <a
       href={post.url}
       target="_blank"
       rel="noopener noreferrer"
       className="mb-5 block break-inside-avoid border border-landing-border bg-landing-panel p-6 transition-[border-color] duration-200 hover:border-accent/40"
-      custom={index}
-      variants={wallCardVariants}
-      initial="hidden"
-      whileInView="visible"
-      viewport={{ once: true, amount: 0.15 }}
     >
       {/* Header: avatar + name + X icon */}
       <div className="flex items-start gap-3">
@@ -92,7 +68,7 @@ function WallOfLoveCard({
       <p className="mt-4 text-xs text-landing-dim font-[family-name:var(--font-mono)]">
         {post.date}
       </p>
-    </motion.a>
+    </a>
   );
 }
 
@@ -102,22 +78,16 @@ export function WallOfLove({ posts }: { posts: WallOfLovePost[] }) {
   return (
     <section className="border-t border-landing-border py-24 md:py-32">
       <div className="mx-auto max-w-[1280px] px-8">
-        <motion.div
-          className="flex flex-col items-center text-center mb-14"
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true, amount: 0.5 }}
-          transition={{ duration: 0.5, ease: "easeOut" }}
-        >
+        <div className="mb-14 flex flex-col items-center text-center">
           <h2 className="text-[clamp(2rem,4vw,3.5rem)] font-medium tracking-[-0.03em] text-balance text-landing-text">
             Everybody is <span className="text-accent">Claudemaxxing</span>.
             Are you?
           </h2>
-        </motion.div>
+        </div>
 
         <div className="columns-1 sm:columns-2 lg:columns-3 gap-5">
-          {posts.map((post, i) => (
-            <WallOfLoveCard key={post.url} post={post} index={i} />
+          {posts.map((post) => (
+            <WallOfLoveCard key={post.url} post={post} />
           ))}
         </div>
       </div>
diff --git a/apps/web/components/landing/constants.ts b/apps/web/components/landing/constants.ts
new file mode 100644
index 00000000..48d355c3
--- /dev/null
+++ b/apps/web/components/landing/constants.ts
@@ -0,0 +1 @@
+export const LANDING_SYNC_COMMAND = "npx straude@latest";
diff --git a/apps/web/e2e/golden-path/landing-to-signup.spec.ts b/apps/web/e2e/golden-path/landing-to-signup.spec.ts
index 09e70ccc..fd963b35 100644
--- a/apps/web/e2e/golden-path/landing-to-signup.spec.ts
+++ b/apps/web/e2e/golden-path/landing-to-signup.spec.ts
@@ -45,11 +45,30 @@ test.describe("Landing → Signup funnel", () => {
     await page.goto("/");
 
     // The hero's "Start Your Streak" link specifically
-    const startCTA = page.locator('a:has-text("Start Your Streak")');
+    const startCTA = page
+      .locator("header")
+      .getByRole("link", { name: "Start Your Streak" });
     await expect(startCTA).toBeVisible();
     await expect(startCTA).toHaveAttribute("href", "/signup");
   });
 
+  test("uses one canonical sync command across the landing page", async ({ page }) => {
+    await page.goto("/");
+
+    await expect(page.getByText("npx straude@latest").first()).toBeVisible();
+    await expect(page.getByText("npx straude push --days 7")).toHaveCount(0);
+  });
+
+  test("final CTA offers signup and command copy actions", async ({ page }) => {
+    await page.goto("/");
+
+    const finalSection = page.locator("section").filter({
+      has: page.getByRole("heading", { name: "Ready to run?" }),
+    });
+    await expect(finalSection.getByRole("link", { name: "Start Your Streak" })).toHaveAttribute("href", "/signup");
+    await expect(finalSection.getByRole("button", { name: /npx straude@latest/ })).toBeVisible();
+  });
+
   test("navbar Get Started links to signup or login", async ({ page }) => {
     await page.goto("/");
 
diff --git a/apps/web/lib/open-stats.ts b/apps/web/lib/open-stats.ts
index c6c80171..b8b0391f 100644
--- a/apps/web/lib/open-stats.ts
+++ b/apps/web/lib/open-stats.ts
@@ -411,53 +411,57 @@ async function persistOpenStatsSnapshot(db: OpenStatsDb, stats: OpenStats) {
   throwIfSupabaseError("open stats snapshot write failed", result.error);
 }
 
-export async function getOpenStatsForPage(
+function createPlaceholderOpenStats(): OpenStats {
+  const now = new Date().toISOString();
+  return {
+    trackedUsers: 0,
+    totalUsers: 0,
+    totalSpend: 0,
+    avgWeeklySpend: 0,
+    totalTokens: 0,
+    totalSessions: 0,
+    avgStreak: 0,
+    totalStreaks: 0,
+    concentration: [],
+    cumulativePct: {},
+    models: [],
+    fetchedAt: now,
+    snapshotDate: snapshotDateFromIso(now),
+    source: "snapshot",
+  };
+}
+
+export async function refreshOpenStatsSnapshot(
   db: OpenStatsDb = getServiceClient() as unknown as OpenStatsDb,
 ): Promise<OpenStats> {
+  const liveStats = await fetchLiveOpenStats(db);
+
   try {
-    const liveStats = await fetchLiveOpenStats(db);
-
-    try {
-      await persistOpenStatsSnapshot(db, liveStats);
-    } catch (error) {
-      // TODO(observability): forward to PostHog server-side capture once a
-      // helper exists (context: "open-stats:snapshot-write"). For now, log
-      // so prod failures are visible in server logs.
-      logOpenStatsError("open stats snapshot write failed:", error);
-    }
+    await persistOpenStatsSnapshot(db, liveStats);
+  } catch (error) {
+    // TODO(observability): forward to PostHog server-side capture once a
+    // helper exists (context: "open-stats:snapshot-write"). For now, log
+    // so prod failures are visible in server logs.
+    logOpenStatsError("open stats snapshot write failed:", error);
+  }
 
-    return liveStats;
-  } catch (liveError) {
-    try {
-      const snapshot = await readLatestOpenStatsSnapshot(db);
-      if (snapshot) return snapshot;
-    } catch (snapshotError) {
-      // TODO(observability): forward to PostHog server-side capture once a
-      // helper exists (context: "open-stats:snapshot-fallback").
-      logOpenStatsError("open stats snapshot fallback failed:", snapshotError);
-    }
+  return liveStats;
+}
 
-    // Both live and snapshot failed (e.g. Supabase unreachable in CI).
-    // Return an empty placeholder so the build doesn't crash.
+export async function getOpenStatsForPage(
+  db: OpenStatsDb = getServiceClient() as unknown as OpenStatsDb,
+): Promise<OpenStats> {
+  try {
+    const snapshot = await readLatestOpenStatsSnapshot(db);
+    if (snapshot) return snapshot;
+  } catch (snapshotError) {
     // TODO(observability): forward to PostHog server-side capture once a
-    // helper exists (context: "open-stats:all-sources-failed").
-    logOpenStatsError("open stats: all sources failed, returning placeholder", liveError);
-    const now = new Date().toISOString();
-    return {
-      trackedUsers: 0,
-      totalUsers: 0,
-      totalSpend: 0,
-      avgWeeklySpend: 0,
-      totalTokens: 0,
-      totalSessions: 0,
-      avgStreak: 0,
-      totalStreaks: 0,
-      concentration: [],
-      cumulativePct: {},
-      models: [],
-      fetchedAt: now,
-      snapshotDate: snapshotDateFromIso(now),
-      source: "snapshot",
-    };
+    // helper exists (context: "open-stats:snapshot-read").
+    logOpenStatsError("open stats snapshot read failed:", snapshotError);
   }
+
+  // Public pages must not run the 50k-row live aggregation path during render.
+  // Return a coherent placeholder until the scheduled/admin refresh writes a
+  // new durable snapshot.
+  return createPlaceholderOpenStats();
 }

From 8d071b3f1e390db3d2194d10a032dfc697e9c68b Mon Sep 17 00:00:00 2001
From: Oscar Hong <oscar.hong2015@gmail.com>
Date: Fri, 3 Jul 2026 00:22:02 +0800
Subject: [PATCH 08/15] Defer authenticated shell work

---
 .../components/CommandPalette.test.tsx        |  13 +-
 .../components/SubmitPromptWidget.test.tsx    |  18 +-
 apps/web/app/(app)/layout.tsx                 | 182 +++-------
 apps/web/app/(auth)/layout.tsx                |  10 +-
 apps/web/app/(landing)/layout.tsx             |   2 +
 apps/web/app/(onboarding)/layout.tsx          |   9 +-
 apps/web/app/admin/layout.tsx                 |   7 +-
 apps/web/app/api/app/right-sidebar/route.ts   | 120 +++++++
 apps/web/app/layout.tsx                       |  11 +-
 .../app/prompts/SubmitPromptModal.tsx         | 303 +++++++++++++++++
 .../app/prompts/SubmitPromptWidget.tsx        | 313 +-----------------
 .../components/app/shared/CommandPalette.tsx  | 228 ++++---------
 .../app/shared/CommandPaletteInner.tsx        | 188 +++++++++++
 .../app/shared/ResponsiveShellFrame.tsx       |   4 +-
 .../components/app/shared/RightSidebar.tsx    | 162 ++++-----
 apps/web/components/app/shared/TopHeader.tsx  |  37 ++-
 .../web/components/providers/AppProviders.tsx |  17 +
 .../components/providers/PostHogProvider.tsx  |   7 +
 .../components/providers/PublicAnalytics.tsx  |  41 +++
 apps/web/lib/analytics/activation.ts          |   2 +
 apps/web/lib/analytics/client.ts              |  62 +++-
 apps/web/lib/data/usage-totals.ts             |  62 ++++
 apps/web/lib/query/keys.ts                    |   1 +
 apps/web/lib/query/right-sidebar.ts           |  29 ++
 24 files changed, 1081 insertions(+), 747 deletions(-)
 create mode 100644 apps/web/app/api/app/right-sidebar/route.ts
 create mode 100644 apps/web/components/app/prompts/SubmitPromptModal.tsx
 create mode 100644 apps/web/components/app/shared/CommandPaletteInner.tsx
 create mode 100644 apps/web/components/providers/AppProviders.tsx
 create mode 100644 apps/web/components/providers/PublicAnalytics.tsx
 create mode 100644 apps/web/lib/data/usage-totals.ts
 create mode 100644 apps/web/lib/query/right-sidebar.ts

diff --git a/apps/web/__tests__/components/CommandPalette.test.tsx b/apps/web/__tests__/components/CommandPalette.test.tsx
index 0f0e3620..9eeed6f9 100644
--- a/apps/web/__tests__/components/CommandPalette.test.tsx
+++ b/apps/web/__tests__/components/CommandPalette.test.tsx
@@ -1,4 +1,4 @@
-import { act, render, waitFor } from "@testing-library/react";
+import { act, fireEvent, render, waitFor } from "@testing-library/react";
 import type { ReactNode } from "react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { ThemeProvider } from "@/components/providers/ThemeProvider";
@@ -40,6 +40,7 @@ vi.mock("kbar", () => ({
   }) => <div className={className}>{children}</div>,
   KBarSearch: ({ className }: { className?: string }) => <input className={className} />,
   KBarResults: () => null,
+  useKBar: () => ({ query: { toggle: vi.fn() } }),
   useMatches: () => ({ results: [] }),
 }));
 
@@ -92,9 +93,13 @@ describe("CommandPalette", () => {
       </ThemeProvider>,
     );
 
-    expect(capturedActions.map((action) => action.id)).toEqual(
-      expect.arrayContaining(["theme-light", "theme-dark", "theme-system"]),
-    );
+    fireEvent.keyDown(window, { key: "k", metaKey: true });
+
+    await waitFor(() => {
+      expect(capturedActions.map((action) => action.id)).toEqual(
+        expect.arrayContaining(["theme-light", "theme-dark", "theme-system"]),
+      );
+    });
 
     const darkAction = capturedActions.find((action) => action.id === "theme-dark");
     act(() => {
diff --git a/apps/web/__tests__/components/SubmitPromptWidget.test.tsx b/apps/web/__tests__/components/SubmitPromptWidget.test.tsx
index ceaf4649..6b4b1bc8 100644
--- a/apps/web/__tests__/components/SubmitPromptWidget.test.tsx
+++ b/apps/web/__tests__/components/SubmitPromptWidget.test.tsx
@@ -7,6 +7,11 @@ describe("SubmitPromptWidget", () => {
     vi.restoreAllMocks();
   });
 
+  async function openPromptModal() {
+    fireEvent.click(screen.getByRole("button", { name: /submit a prompt/i }));
+    return screen.findByRole("dialog");
+  }
+
   it("opens the modal and submits a prompt", async () => {
     const fetchMock = vi.spyOn(global, "fetch" as any).mockResolvedValue({
       ok: true,
@@ -15,8 +20,7 @@ describe("SubmitPromptWidget", () => {
 
     render(<SubmitPromptWidget username="jane" />);
 
-    fireEvent.click(screen.getByRole("button", { name: /submit a prompt/i }));
-    expect(screen.getByRole("dialog")).toBeInTheDocument();
+    expect(await openPromptModal()).toBeInTheDocument();
 
     fireEvent.change(screen.getByLabelText("Prompt"), {
       target: { value: "Please add a compact mode for activity cards in the feed." },
@@ -52,7 +56,7 @@ describe("SubmitPromptWidget", () => {
 
     render(<SubmitPromptWidget username="jane" />);
 
-    fireEvent.click(screen.getByRole("button", { name: /submit a prompt/i }));
+    await openPromptModal();
 
     fireEvent.change(screen.getByLabelText("Prompt"), {
       target: { value: "Please add markdown shortcuts in comments." },
@@ -74,7 +78,7 @@ describe("SubmitPromptWidget", () => {
 
     render(<SubmitPromptWidget username="jane" />);
 
-    fireEvent.click(screen.getByRole("button", { name: /submit a prompt/i }));
+    await openPromptModal();
     fireEvent.click(screen.getByRole("button", { name: /submit as anonymous/i }));
 
     fireEvent.change(screen.getByLabelText("Prompt"), {
@@ -96,10 +100,10 @@ describe("SubmitPromptWidget", () => {
     });
   });
 
-  it("shows the submit keyboard shortcut hint", () => {
+  it("shows the submit keyboard shortcut hint", async () => {
     render(<SubmitPromptWidget username="jane" />);
 
-    fireEvent.click(screen.getByRole("button", { name: /submit a prompt/i }));
+    await openPromptModal();
 
     expect(
       screen.getByRole("button", { name: /submit prompt ⌘↵/i }),
@@ -131,7 +135,7 @@ describe("SubmitPromptWidget", () => {
 
     render(<SubmitPromptWidget username="jane" />);
 
-    fireEvent.click(screen.getByRole("button", { name: /submit a prompt/i }));
+    await openPromptModal();
     fireEvent.click(screen.getByRole("button", { name: /view community prompts/i }));
 
     await waitFor(() => {
diff --git a/apps/web/app/(app)/layout.tsx b/apps/web/app/(app)/layout.tsx
index a60b358a..896bb199 100644
--- a/apps/web/app/(app)/layout.tsx
+++ b/apps/web/app/(app)/layout.tsx
@@ -4,14 +4,16 @@ import { createClient } from "@/lib/supabase/server";
 import { getServiceClient } from "@/lib/supabase/service";
 import { getAuthUser } from "@/lib/supabase/auth";
 import { Sidebar } from "@/components/app/shared/Sidebar";
-import { RightSidebar } from "@/components/app/shared/RightSidebar";
+import { LazyRightSidebar } from "@/components/app/shared/RightSidebar";
 import { InviteButton } from "@/components/app/profile/InviteButton";
 import { ResponsiveShellFrame } from "@/components/app/shared/ResponsiveShellFrame";
 import { GuestHeader, GuestMobileNav } from "@/components/app/shared/GuestHeader";
 import { CommandPalette } from "@/components/app/shared/CommandPalette";
 import { Avatar } from "@/components/ui/Avatar";
 import { Skeleton } from "@/components/ui/Skeleton";
+import { AppProviders } from "@/components/providers/AppProviders";
 import { firstRelation } from "@/lib/utils/first-relation";
+import { loadUsageTotals } from "@/lib/data/usage-totals";
 import type { DailyUsage } from "@/types";
 
 type ShellProfile = {
@@ -31,66 +33,8 @@ type LatestPostRow = {
   daily_usage: Array<Pick<DailyUsage, "date">> | null;
 };
 
-type UsageFallbackRow = Pick<DailyUsage, "cost_usd" | "output_tokens">;
-type UsageTotalsRpcRow = {
-  total_cost: number | string | null;
-  total_tokens: number | string | null;
-};
 type SupabaseServerClient = Awaited<ReturnType<typeof createClient>>;
 
-async function loadUsageTotals(
-  supabase: SupabaseServerClient,
-  userId: string,
-): Promise<{ totalTokens: number; totalCost: number }> {
-  const usageTotalsRes = await supabase
-    .rpc("get_user_usage_totals", { p_user_id: userId })
-    .single();
-
-  const loadFallbackUsageTotals = async (): Promise<{ totalTokens: number; totalCost: number }> => {
-    const { data: fallbackRows, error: fallbackError } = await supabase
-      .from("daily_usage")
-      .select("cost_usd, output_tokens")
-      .eq("user_id", userId);
-
-    if (fallbackError) {
-      throw new Error(`Unable to load usage totals from daily_usage fallback (${fallbackError.message})`);
-    }
-
-    const rows = (fallbackRows ?? []) as UsageFallbackRow[];
-    return {
-      totalTokens: rows.reduce((sum, row) => sum + Number(row.output_tokens), 0),
-      totalCost: rows.reduce((sum, row) => sum + Number(row.cost_usd), 0),
-    };
-  };
-
-  if (usageTotalsRes.error) {
-    console.error("get_user_usage_totals RPC failed; using direct daily_usage fallback", {
-      userId,
-      code: usageTotalsRes.error.code,
-      message: usageTotalsRes.error.message,
-    });
-
-    return loadFallbackUsageTotals();
-  }
-
-  const usageTotals = usageTotalsRes.data as UsageTotalsRpcRow | null;
-  const rpcTokens = usageTotals?.total_tokens;
-
-  if (rpcTokens === null || rpcTokens === undefined) {
-    console.error("get_user_usage_totals returned no total_tokens; using direct daily_usage fallback", {
-      userId,
-      rpcKeys: usageTotals ? Object.keys(usageTotals) : [],
-    });
-
-    return loadFallbackUsageTotals();
-  }
-
-  return {
-    totalTokens: Number(rpcTokens),
-    totalCost: Number(usageTotals?.total_cost ?? 0),
-  };
-}
-
 function formatLatestPosts(rows: LatestPostRow[]) {
   return rows
     .map((row) => {
@@ -179,23 +123,6 @@ function SidebarFallback({ profile }: { profile: ShellProfile | null }) {
   );
 }
 
-function RightSidebarFallback() {
-  return (
-    <div className="flex flex-col">
-      {[0, 1, 2].map((section) => (
-        <div key={section} className="border-b border-border p-6">
-          <Skeleton className="mb-4 h-3 w-28" />
-          <div className="space-y-3">
-            <Skeleton className="h-4 w-full" />
-            <Skeleton className="h-4 w-5/6" />
-            <Skeleton className="h-4 w-3/4" />
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}
-
 async function DeferredSidebar({
   userId,
   profile,
@@ -252,22 +179,6 @@ async function DeferredSidebar({
   );
 }
 
-async function DeferredRightSidebar({
-  userId,
-}: {
-  userId: string;
-}) {
-  const supabase = await createClient();
-  const usageTotals = await loadUsageTotals(supabase, userId);
-
-  return (
-    <RightSidebar
-      userId={userId}
-      totalOutputTokens={usageTotals.totalTokens}
-    />
-  );
-}
-
 async function PhotoNudge({
   userId,
   onboardingIncomplete,
@@ -311,17 +222,19 @@ export default async function AppLayout({
     // This check runs server-side as a safety net alongside proxy.ts
     // Public pages render with a guest layout below
     return (
-      <div className="fixed inset-0 flex flex-col overflow-hidden">
-        <GuestHeader />
-          <div className="mx-auto flex min-h-0 w-full max-w-[1600px] flex-1 overflow-hidden border-x border-border">
-            <main id="main-content" className="scrollbar-none min-w-0 flex-1 overflow-y-auto overflow-x-hidden overscroll-contain">
-              <div className="pb-[var(--mobile-nav-height)] sm:pb-0">
-                {children}
-              </div>
-            </main>
-          </div>
-          <GuestMobileNav />
-      </div>
+      <AppProviders>
+        <div className="fixed inset-0 flex flex-col overflow-hidden">
+          <GuestHeader />
+            <div className="mx-auto flex min-h-0 w-full max-w-[1600px] flex-1 overflow-hidden border-x border-border">
+              <main id="main-content" className="scrollbar-none min-w-0 flex-1 overflow-y-auto overflow-x-hidden overscroll-contain">
+                <div className="pb-[var(--mobile-nav-height)] sm:pb-0">
+                  {children}
+                </div>
+              </main>
+            </div>
+            <GuestMobileNav />
+        </div>
+      </AppProviders>
     );
   }
 
@@ -341,39 +254,38 @@ export default async function AppLayout({
     </Suspense>
   );
 
-  const rightPanel = (
-    <Suspense fallback={<RightSidebarFallback />}>
-      <DeferredRightSidebar userId={user.id} />
-    </Suspense>
-  );
+  const rightPanel = <LazyRightSidebar />;
 
   return (
-    <CommandPalette username={profile?.username ?? null}>
-      <div className="fixed inset-0 flex flex-col overflow-hidden">
-        {onboardingIncomplete && (
-          <div className="flex items-center justify-center gap-2 border-b border-border bg-accent/5 px-4 py-2 text-sm">
-            <span className="text-muted">Finish setting up your profile</span>
-            <Link href="/onboarding" className="font-medium text-accent hover:underline">
-              Complete onboarding
-            </Link>
-          </div>
-        )}
-        <Suspense fallback={null}>
-          <PhotoNudge
-            userId={user.id}
-            onboardingIncomplete={onboardingIncomplete}
-          />
-        </Suspense>
-
-        <ResponsiveShellFrame
-          username={profile?.username ?? null}
-          avatarUrl={profile?.avatar_url ?? null}
-          leftPanel={leftPanel}
-          rightPanel={rightPanel}
-        >
-          {children}
-        </ResponsiveShellFrame>
-      </div>
-    </CommandPalette>
+    <AppProviders>
+      <CommandPalette username={profile?.username ?? null}>
+        <div className="fixed inset-0 flex flex-col overflow-hidden">
+          {onboardingIncomplete && (
+            <div className="flex items-center justify-center gap-2 border-b border-border bg-accent/5 px-4 py-2 text-sm">
+              <span className="text-muted">Finish setting up your profile</span>
+              <Link href="/onboarding" className="font-medium text-accent hover:underline">
+                Complete onboarding
+              </Link>
+            </div>
+          )}
+          <Suspense fallback={null}>
+            <PhotoNudge
+              userId={user.id}
+              onboardingIncomplete={onboardingIncomplete}
+            />
+          </Suspense>
+
+          <ResponsiveShellFrame
+            username={profile?.username ?? null}
+            avatarUrl={profile?.avatar_url ?? null}
+            leftPanel={leftPanel}
+            rightPanel={rightPanel}
+            showPromptWidget={!onboardingIncomplete}
+          >
+            {children}
+          </ResponsiveShellFrame>
+        </div>
+      </CommandPalette>
+    </AppProviders>
   );
 }
diff --git a/apps/web/app/(auth)/layout.tsx b/apps/web/app/(auth)/layout.tsx
index f0d06e6a..5e870d93 100644
--- a/apps/web/app/(auth)/layout.tsx
+++ b/apps/web/app/(auth)/layout.tsx
@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import { PublicAnalytics } from "@/components/providers/PublicAnalytics";
 
 export const metadata: Metadata = {
   title: "Sign in to Straude",
@@ -13,8 +14,11 @@ export default function AuthLayout({
   children: React.ReactNode;
 }) {
   return (
-    <main id="main-content" className="flex min-h-screen items-center justify-center bg-background px-4 text-foreground">
-      <div className="w-full max-w-md">{children}</div>
-    </main>
+    <>
+      <main id="main-content" className="flex min-h-screen items-center justify-center bg-background px-4 text-foreground">
+        <div className="w-full max-w-md">{children}</div>
+      </main>
+      <PublicAnalytics />
+    </>
   );
 }
diff --git a/apps/web/app/(landing)/layout.tsx b/apps/web/app/(landing)/layout.tsx
index 26983436..63f55040 100644
--- a/apps/web/app/(landing)/layout.tsx
+++ b/apps/web/app/(landing)/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { CookieConsentModal } from "@/components/landing/CookieConsentModal";
+import { PublicAnalytics } from "@/components/providers/PublicAnalytics";
 
 export const metadata: Metadata = {
   title: { absolute: "Straude — Strava for Claude Code" },
@@ -15,6 +16,7 @@ export default function LandingLayout({
   return (
     <>
       {children}
+      <PublicAnalytics />
       <CookieConsentModal />
     </>
   );
diff --git a/apps/web/app/(onboarding)/layout.tsx b/apps/web/app/(onboarding)/layout.tsx
index e07d636a..73f475be 100644
--- a/apps/web/app/(onboarding)/layout.tsx
+++ b/apps/web/app/(onboarding)/layout.tsx
@@ -1,6 +1,7 @@
 import { createClient } from "@/lib/supabase/server";
 import { getServiceClient } from "@/lib/supabase/service";
 import { redirect } from "next/navigation";
+import { AppProviders } from "@/components/providers/AppProviders";
 import type { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -35,8 +36,10 @@ export default async function OnboardingLayout({
   }
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-background px-4">
-      <div className="w-full max-w-md">{children}</div>
-    </div>
+    <AppProviders>
+      <div className="flex min-h-screen items-center justify-center bg-background px-4">
+        <div className="w-full max-w-md">{children}</div>
+      </div>
+    </AppProviders>
   );
 }
diff --git a/apps/web/app/admin/layout.tsx b/apps/web/app/admin/layout.tsx
index 208bc642..a92b9f06 100644
--- a/apps/web/app/admin/layout.tsx
+++ b/apps/web/app/admin/layout.tsx
@@ -2,6 +2,7 @@ import { redirect } from "next/navigation";
 import { createClient } from "@/lib/supabase/server";
 import { isAdmin } from "@/lib/admin";
 import { AdminShell } from "./components/AdminShell";
+import { AppProviders } from "@/components/providers/AppProviders";
 import type { Metadata } from "next";
 import "./admin.css";
 
@@ -21,5 +22,9 @@ export default async function AdminLayout({
     redirect("/feed");
   }
 
-  return <AdminShell>{children}</AdminShell>;
+  return (
+    <AppProviders>
+      <AdminShell>{children}</AdminShell>
+    </AppProviders>
+  );
 }
diff --git a/apps/web/app/api/app/right-sidebar/route.ts b/apps/web/app/api/app/right-sidebar/route.ts
new file mode 100644
index 00000000..5525f064
--- /dev/null
+++ b/apps/web/app/api/app/right-sidebar/route.ts
@@ -0,0 +1,120 @@
+import { NextResponse } from "next/server";
+import { createClient } from "@/lib/supabase/server";
+import { getServiceClient } from "@/lib/supabase/service";
+import { loadUsageTotals } from "@/lib/data/usage-totals";
+import type {
+  RightSidebarSuggestedUser,
+  RightSidebarTopUser,
+} from "@/lib/query/right-sidebar";
+
+type ActiveUserRelation = {
+  id: string;
+  username: string;
+  avatar_url: string | null;
+  bio: string | null;
+  is_public: boolean;
+};
+
+export async function GET() {
+  const supabase = await createClient();
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  if (!user) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  const service = getServiceClient();
+
+  const [{ data: topUsers }, { data: following }, usageTotals] = await Promise.all([
+    supabase
+      .from("leaderboard_weekly")
+      .select("user_id, username, avatar_url, total_cost")
+      .order("total_cost", { ascending: false })
+      .limit(5),
+    supabase
+      .from("follows")
+      .select("following_id")
+      .eq("follower_id", user.id),
+    loadUsageTotals(supabase, user.id),
+  ]);
+
+  const followingIds = following?.map((f) => f.following_id) ?? [];
+  const excludeIds = [user.id, ...followingIds];
+  const excludeFilter = `(${excludeIds.join(",")})`;
+
+  const [{ data: pinnedUsers }, { data: recentlyActive }, { data: newSignups }] =
+    await Promise.all([
+      service
+        .from("users")
+        .select("id, username, avatar_url, bio")
+        .eq("is_pinned_suggestion", true)
+        .not("id", "in", excludeFilter),
+      service
+        .from("daily_usage")
+        .select("user_id, users!inner(id, username, avatar_url, bio, is_public)")
+        .not("users.username", "is", null)
+        .not("user_id", "in", excludeFilter)
+        .order("date", { ascending: false })
+        .limit(20),
+      service
+        .from("users")
+        .select("id, username, avatar_url, bio")
+        .eq("is_public", true)
+        .not("username", "is", null)
+        .not("id", "in", excludeFilter)
+        .order("created_at", { ascending: false })
+        .limit(10),
+    ]);
+
+  const pinnedIds = new Set((pinnedUsers ?? []).map((u) => u.id));
+  const seenIds = new Set<string>();
+  const activeUsers: RightSidebarSuggestedUser[] = [];
+
+  for (const row of recentlyActive ?? []) {
+    const candidate = row.users as unknown as ActiveUserRelation;
+    if (!seenIds.has(candidate.id) && !pinnedIds.has(candidate.id) && candidate.is_public) {
+      seenIds.add(candidate.id);
+      activeUsers.push({
+        id: candidate.id,
+        username: candidate.username,
+        avatar_url: candidate.avatar_url,
+        bio: candidate.bio,
+      });
+    }
+  }
+
+  const merged: RightSidebarSuggestedUser[] = [];
+  for (const candidate of activeUsers) {
+    if (!merged.some((item) => item.id === candidate.id)) merged.push(candidate);
+  }
+
+  for (const candidate of newSignups ?? []) {
+    if (!candidate.username) continue;
+    if (pinnedIds.has(candidate.id) || merged.some((item) => item.id === candidate.id)) continue;
+    merged.push({
+      id: candidate.id,
+      username: candidate.username,
+      avatar_url: candidate.avatar_url,
+      bio: candidate.bio,
+    });
+  }
+
+  const pinnedList: RightSidebarSuggestedUser[] = (pinnedUsers ?? [])
+    .filter((candidate) => candidate.username)
+    .map((candidate) => ({
+      id: candidate.id,
+      username: candidate.username as string,
+      avatar_url: candidate.avatar_url,
+      bio: candidate.bio,
+    }));
+  const organicLimit = Math.max(0, 5 - pinnedList.length);
+  const suggested = [...merged.slice(0, organicLimit), ...pinnedList].slice(0, 5);
+
+  return NextResponse.json({
+    suggested,
+    topUsers: (topUsers ?? []) as RightSidebarTopUser[],
+    totalOutputTokens: usageTotals.totalTokens,
+  });
+}
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index 5fde7ced..88b40325 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -2,10 +2,6 @@ import type { Metadata, Viewport } from "next";
 import { Inter, JetBrains_Mono } from "next/font/google";
 import { Agentation } from "agentation";
 import Script from "next/script";
-import { ConsentAwareAnalytics } from "@/components/providers/ConsentAwareAnalytics";
-import { PostHogClientProvider } from "@/components/providers/PostHogProvider";
-import { QueryProvider } from "@/components/providers/QueryProvider";
-import { ThemeProvider } from "@/components/providers/ThemeProvider";
 import { getThemeBootstrapScript } from "@/lib/theme";
 import "./globals.css";
 
@@ -126,12 +122,7 @@ export default function RootLayout({
         >
           Skip to content
         </a>
-        <PostHogClientProvider>
-          <QueryProvider>
-            <ThemeProvider>{children}</ThemeProvider>
-          </QueryProvider>
-        </PostHogClientProvider>
-        <ConsentAwareAnalytics />
+        {children}
         {process.env.NODE_ENV === "development" && <Agentation />}
       </body>
     </html>
diff --git a/apps/web/components/app/prompts/SubmitPromptModal.tsx b/apps/web/components/app/prompts/SubmitPromptModal.tsx
new file mode 100644
index 00000000..b3f3f7d4
--- /dev/null
+++ b/apps/web/components/app/prompts/SubmitPromptModal.tsx
@@ -0,0 +1,303 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import Link from "next/link";
+import { X } from "lucide-react";
+import { Button } from "@/components/ui/Button";
+import { Textarea } from "@/components/ui/Textarea";
+import { useFocusTrap } from "@/components/app/shared/useFocusTrap";
+import { timeAgo } from "@/lib/utils/format";
+
+const MAX_PROMPT_LENGTH = 2_000;
+type ModalView = "submit" | "community";
+
+interface CommunityPromptRow {
+  id: string;
+  prompt: string;
+  is_anonymous: boolean;
+  created_at: string;
+  user?: { username?: string | null } | null;
+}
+
+interface SubmitPromptModalProps {
+  username?: string | null;
+  onClose: () => void;
+  onSubmitted: (message: string) => void;
+}
+
+export function SubmitPromptModal({
+  username,
+  onClose,
+  onSubmitted,
+}: SubmitPromptModalProps) {
+  const [view, setView] = useState<ModalView>("submit");
+  const [prompt, setPrompt] = useState("");
+  const [anonymous, setAnonymous] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+  const [communityPrompts, setCommunityPrompts] = useState<CommunityPromptRow[]>([]);
+  const [communityLoading, setCommunityLoading] = useState(false);
+  const [communityError, setCommunityError] = useState<string | null>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const dialogRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const original = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = original;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (view !== "submit") return;
+    const id = window.setTimeout(() => textareaRef.current?.focus(), 0);
+    return () => window.clearTimeout(id);
+  }, [view]);
+
+  useEffect(() => {
+    function onKeyDown(e: KeyboardEvent) {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onClose();
+      }
+    }
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [onClose]);
+
+  useFocusTrap(dialogRef, true);
+
+  async function loadCommunityPrompts() {
+    if (communityLoading) return;
+    setCommunityLoading(true);
+    setCommunityError(null);
+    try {
+      const res = await fetch("/api/prompts?limit=20&offset=0");
+      const body = await res.json().catch(() => ({}));
+      if (!res.ok) {
+        setCommunityError(body.error ?? "Failed to load community prompts");
+        return;
+      }
+      setCommunityPrompts(Array.isArray(body.prompts) ? body.prompts : []);
+    } catch {
+      setCommunityError("Failed to load community prompts");
+    } finally {
+      setCommunityLoading(false);
+    }
+  }
+
+  async function openCommunityView() {
+    setView("community");
+    if (communityPrompts.length === 0) {
+      await loadCommunityPrompts();
+    }
+  }
+
+  async function handleSubmit() {
+    const trimmed = prompt.trim();
+    if (!trimmed) {
+      setError("Prompt is required");
+      return;
+    }
+
+    setSubmitting(true);
+    setError(null);
+
+    try {
+      const res = await fetch("/api/prompts", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          prompt: trimmed,
+          anonymous,
+        }),
+      });
+      const body = await res.json().catch(() => ({}));
+      if (!res.ok) {
+        setError(body.error ?? "Failed to submit prompt");
+        return;
+      }
+      onSubmitted("Prompt submitted.");
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  if (typeof document === "undefined") return null;
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div
+        ref={dialogRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="submit-prompt-title"
+        className="w-full max-w-3xl rounded-[8px] border border-border bg-background shadow-xl"
+      >
+        <div className="flex items-start justify-between border-b border-border px-5 py-4 sm:px-6 sm:py-5">
+          <div>
+            <h2 id="submit-prompt-title" className="text-2xl font-semibold text-balance">
+              {view === "submit" ? "Submit a prompt" : "Community prompts"}
+            </h2>
+            <p className="mt-1 max-w-2xl text-sm text-muted">
+              {view === "submit"
+                ? "Prompt a coding agent to build what you want to see in Straude. If we like your prompt, we'll run it and merge the result."
+                : "Browse what people want us to build next."}
+            </p>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            className="rounded-[4px] border border-border p-2 text-muted hover:text-foreground"
+            aria-label="Close"
+          >
+            <X size={16} />
+          </button>
+        </div>
+
+        {view === "submit" ? (
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              void handleSubmit();
+            }}
+            className="space-y-5 px-5 py-5 sm:px-6 sm:py-6"
+          >
+            <div>
+              <label htmlFor="prompt-input" className="mb-2 block text-base font-semibold">
+                Prompt
+              </label>
+              <Textarea
+                id="prompt-input"
+                ref={textareaRef}
+                rows={7}
+                maxLength={MAX_PROMPT_LENGTH}
+                placeholder={"What should we build or improve?\n\nIdeas to get started:\n- Feature request: \"Add keyboard shortcuts for editing posts\"\n- Bug fix: \"Comments flash as anonymous after posting\"\n- UI nitpick: \"Tighten spacing in the feed cards\"\n- Growth idea: \"Add a referral badge to help more people discover Straude\""}
+                value={prompt}
+                onChange={(e) => setPrompt(e.target.value)}
+                onKeyDown={(e) => {
+                  if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+                    e.preventDefault();
+                    void handleSubmit();
+                  }
+                }}
+                error={!!error}
+              />
+              <div className="mt-2 flex items-center justify-between text-xs text-muted">
+                <span>Be specific about behavior, UX, and edge cases.</span>
+                <span className="tabular-nums">
+                  {prompt.length}/{MAX_PROMPT_LENGTH}
+                </span>
+              </div>
+            </div>
+
+            <div className="flex flex-wrap items-center justify-between gap-3 rounded-[4px] border border-border bg-subtle px-3 py-2">
+              <p className="text-sm text-muted">
+                {anonymous
+                  ? "Submitting as Anonymous"
+                  : username
+                    ? `Submitting as @${username}`
+                    : "Submitting with your account"}
+              </p>
+              <button
+                type="button"
+                onClick={() => setAnonymous((v) => !v)}
+                className="text-sm font-medium text-accent hover:underline"
+              >
+                {anonymous ? "Submit with username" : "Submit as anonymous"}
+              </button>
+            </div>
+
+            {error && (
+              <p role="alert" className="text-sm text-error">
+                {error}
+              </p>
+            )}
+
+            <div className="flex flex-col gap-3 border-t border-border pt-4 sm:flex-row sm:items-center sm:justify-between">
+              <button
+                type="button"
+                onClick={() => {
+                  void openCommunityView();
+                }}
+                className="text-left text-sm font-medium text-accent hover:underline"
+              >
+                View community prompts
+              </button>
+              <Button type="submit" disabled={submitting}>
+                {submitting ? "Submitting..." : "Submit prompt ⌘↵"}
+              </Button>
+            </div>
+          </form>
+        ) : (
+          <div className="space-y-4 px-5 py-5 sm:px-6 sm:py-6">
+            <div className="max-h-[420px] overflow-y-auto rounded-[4px] border border-border">
+              {communityLoading ? (
+                <p className="px-4 py-8 text-center text-sm text-muted">
+                  Loading community prompts...
+                </p>
+              ) : communityError ? (
+                <p role="alert" className="px-4 py-8 text-center text-sm text-error">
+                  {communityError}
+                </p>
+              ) : communityPrompts.length === 0 ? (
+                <p className="px-4 py-8 text-center text-sm text-muted">
+                  No prompts yet.
+                </p>
+              ) : (
+                <div className="divide-y divide-border">
+                  {communityPrompts.map((row) => {
+                    const usernameValue = row.user?.username ?? null;
+                    const canLink = Boolean(usernameValue && !row.is_anonymous);
+                    return (
+                      <article key={row.id} className="px-4 py-4">
+                        <div className="mb-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm">
+                          {canLink ? (
+                            <Link
+                              href={`/u/${usernameValue}`}
+                              className="font-semibold text-accent hover:underline"
+                            >
+                              @{usernameValue}
+                            </Link>
+                          ) : (
+                            <span className="font-semibold text-muted">
+                              {row.is_anonymous ? "Anonymous" : "Unknown user"}
+                            </span>
+                          )}
+                          <span suppressHydrationWarning className="text-muted">
+                            {timeAgo(row.created_at)}
+                          </span>
+                        </div>
+                        <p className="whitespace-pre-wrap text-sm leading-relaxed text-foreground">
+                          {row.prompt}
+                        </p>
+                      </article>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+
+            <div className="flex flex-col gap-3 border-t border-border pt-4 sm:flex-row sm:items-center">
+              <button
+                type="button"
+                onClick={() => setView("submit")}
+                className="text-left text-sm font-medium text-accent hover:underline"
+              >
+                Back to submit a prompt
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>,
+    document.body,
+  );
+}
diff --git a/apps/web/components/app/prompts/SubmitPromptWidget.tsx b/apps/web/components/app/prompts/SubmitPromptWidget.tsx
index 03b4e61e..89a55c70 100644
--- a/apps/web/components/app/prompts/SubmitPromptWidget.tsx
+++ b/apps/web/components/app/prompts/SubmitPromptWidget.tsx
@@ -1,24 +1,14 @@
 "use client";
 
+import dynamic from "next/dynamic";
 import { useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-import Link from "next/link";
-import { X, Sparkles } from "lucide-react";
+import { Sparkles } from "lucide-react";
 import { Button } from "@/components/ui/Button";
-import { Textarea } from "@/components/ui/Textarea";
-import { useFocusTrap } from "@/components/app/shared/useFocusTrap";
-import { timeAgo } from "@/lib/utils/format";
 
-const MAX_PROMPT_LENGTH = 2000;
-type ModalView = "submit" | "community";
-
-interface CommunityPromptRow {
-  id: string;
-  prompt: string;
-  is_anonymous: boolean;
-  created_at: string;
-  user?: { username?: string | null } | null;
-}
+const SubmitPromptModal = dynamic(
+  () => import("@/components/app/prompts/SubmitPromptModal").then((mod) => mod.SubmitPromptModal),
+  { ssr: false },
+);
 
 interface SubmitPromptWidgetProps {
   username?: string | null;
@@ -26,45 +16,8 @@ interface SubmitPromptWidgetProps {
 
 export function SubmitPromptWidget({ username }: SubmitPromptWidgetProps) {
   const [open, setOpen] = useState(false);
-  const [view, setView] = useState<ModalView>("submit");
-  const [prompt, setPrompt] = useState("");
-  const [anonymous, setAnonymous] = useState(false);
-  const [error, setError] = useState<string | null>(null);
   const [flash, setFlash] = useState<string | null>(null);
-  const [submitting, setSubmitting] = useState(false);
-  const [communityPrompts, setCommunityPrompts] = useState<CommunityPromptRow[]>([]);
-  const [communityLoading, setCommunityLoading] = useState(false);
-  const [communityError, setCommunityError] = useState<string | null>(null);
   const triggerRef = useRef<HTMLButtonElement>(null);
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-  const dialogRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (!open) return;
-    const original = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-    return () => {
-      document.body.style.overflow = original;
-    };
-  }, [open]);
-
-  useEffect(() => {
-    if (!open || view !== "submit") return;
-    const id = window.setTimeout(() => textareaRef.current?.focus(), 0);
-    return () => window.clearTimeout(id);
-  }, [open, view]);
-
-  useEffect(() => {
-    if (!open) return;
-    function onKeyDown(e: KeyboardEvent) {
-      if (e.key === "Escape") {
-        e.preventDefault();
-        setOpen(false);
-      }
-    }
-    document.addEventListener("keydown", onKeyDown);
-    return () => document.removeEventListener("keydown", onKeyDown);
-  }, [open]);
 
   useEffect(() => {
     if (!open) {
@@ -72,74 +25,12 @@ export function SubmitPromptWidget({ username }: SubmitPromptWidgetProps) {
     }
   }, [open]);
 
-  useFocusTrap(dialogRef, open);
-
   useEffect(() => {
     if (!flash) return;
-    const id = window.setTimeout(() => setFlash(null), 4500);
+    const id = window.setTimeout(() => setFlash(null), 4_500);
     return () => window.clearTimeout(id);
   }, [flash]);
 
-  async function loadCommunityPrompts() {
-    if (communityLoading) return;
-    setCommunityLoading(true);
-    setCommunityError(null);
-    try {
-      const res = await fetch("/api/prompts?limit=20&offset=0");
-      const body = await res.json().catch(() => ({}));
-      if (!res.ok) {
-        setCommunityError(body.error ?? "Failed to load community prompts");
-        return;
-      }
-      setCommunityPrompts(Array.isArray(body.prompts) ? body.prompts : []);
-    } catch {
-      setCommunityError("Failed to load community prompts");
-    } finally {
-      setCommunityLoading(false);
-    }
-  }
-
-  async function openCommunityView() {
-    setView("community");
-    if (communityPrompts.length === 0) {
-      await loadCommunityPrompts();
-    }
-  }
-
-  async function handleSubmit() {
-    const trimmed = prompt.trim();
-    if (!trimmed) {
-      setError("Prompt is required");
-      return;
-    }
-
-    setSubmitting(true);
-    setError(null);
-
-    try {
-      const res = await fetch("/api/prompts", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          prompt: trimmed,
-          anonymous,
-        }),
-      });
-      const body = await res.json().catch(() => ({}));
-      if (!res.ok) {
-        setError(body.error ?? "Failed to submit prompt");
-        return;
-      }
-      setPrompt("");
-      setAnonymous(false);
-      setView("submit");
-      setOpen(false);
-      setFlash("Prompt submitted.");
-    } finally {
-      setSubmitting(false);
-    }
-  }
-
   return (
     <>
       {flash && (
@@ -154,190 +45,22 @@ export function SubmitPromptWidget({ username }: SubmitPromptWidgetProps) {
         size="sm"
         aria-label="Submit a prompt"
         title="Submit a prompt"
-        onClick={() => {
-          setOpen(true);
-          setView("submit");
-          setError(null);
-        }}
+        onClick={() => setOpen(true)}
         className="fixed right-3 bottom-[72px] z-40 h-11 w-11 rounded-full border border-black/10 bg-gradient-to-b from-accent to-accent/80 p-0 shadow-[0_10px_20px_rgba(0,0,0,0.25),inset_0_1px_0_rgba(255,255,255,0.35)] transition-[transform,box-shadow,filter] duration-150 hover:-translate-y-0.5 hover:shadow-[0_14px_24px_rgba(0,0,0,0.28),inset_0_1px_0_rgba(255,255,255,0.4)] active:translate-y-0 active:shadow-[0_6px_14px_rgba(0,0,0,0.22),inset_0_1px_0_rgba(255,255,255,0.25)] sm:right-4 sm:bottom-4"
       >
         <Sparkles size={14} aria-hidden />
       </Button>
 
-      {open &&
-        createPortal(
-          <div
-            className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
-            onClick={(e) => {
-              if (e.target === e.currentTarget) setOpen(false);
-            }}
-          >
-            <div
-              ref={dialogRef}
-              role="dialog"
-              aria-modal="true"
-              aria-labelledby="submit-prompt-title"
-              className="w-full max-w-3xl rounded-[8px] border border-border bg-background shadow-xl"
-            >
-              <div className="flex items-start justify-between border-b border-border px-5 py-4 sm:px-6 sm:py-5">
-                <div>
-                  <h2 id="submit-prompt-title" className="text-2xl font-semibold text-balance">
-                    {view === "submit" ? "Submit a prompt" : "Community prompts"}
-                  </h2>
-                  <p className="mt-1 max-w-2xl text-sm text-muted">
-                    {view === "submit"
-                      ? "Prompt a coding agent to build what you want to see in Straude. If we like your prompt, we'll run it and merge the result."
-                      : "Browse what people want us to build next."}
-                  </p>
-                </div>
-                <button
-                  type="button"
-                  onClick={() => setOpen(false)}
-                  className="rounded-[4px] border border-border p-2 text-muted hover:text-foreground"
-                  aria-label="Close"
-                >
-                  <X size={16} />
-                </button>
-              </div>
-
-              {view === "submit" ? (
-                <form
-                  onSubmit={(e) => {
-                    e.preventDefault();
-                    void handleSubmit();
-                  }}
-                  className="space-y-5 px-5 py-5 sm:px-6 sm:py-6"
-                >
-                  <div>
-                    <label htmlFor="prompt-input" className="mb-2 block text-base font-semibold">
-                      Prompt
-                    </label>
-                    <Textarea
-                      id="prompt-input"
-                      ref={textareaRef}
-                      rows={7}
-                      maxLength={MAX_PROMPT_LENGTH}
-                      placeholder={"What should we build or improve?\n\nIdeas to get started:\n- Feature request: \"Add keyboard shortcuts for editing posts\"\n- Bug fix: \"Comments flash as anonymous after posting\"\n- UI nitpick: \"Tighten spacing in the feed cards\"\n- Growth idea: \"Add a referral badge to help more people discover Straude\""}
-                      value={prompt}
-                      onChange={(e) => setPrompt(e.target.value)}
-                      onKeyDown={(e) => {
-                        if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
-                          e.preventDefault();
-                          void handleSubmit();
-                        }
-                      }}
-                      error={!!error}
-                    />
-                    <div className="mt-2 flex items-center justify-between text-xs text-muted">
-                      <span>Be specific about behavior, UX, and edge cases.</span>
-                      <span className="tabular-nums">
-                        {prompt.length}/{MAX_PROMPT_LENGTH}
-                      </span>
-                    </div>
-                  </div>
-
-                  <div className="flex flex-wrap items-center justify-between gap-3 rounded-[4px] border border-border bg-subtle px-3 py-2">
-                    <p className="text-sm text-muted">
-                      {anonymous
-                        ? "Submitting as Anonymous"
-                        : username
-                          ? `Submitting as @${username}`
-                          : "Submitting with your account"}
-                    </p>
-                    <button
-                      type="button"
-                      onClick={() => setAnonymous((v) => !v)}
-                      className="text-sm font-medium text-accent hover:underline"
-                    >
-                      {anonymous ? "Submit with username" : "Submit as anonymous"}
-                    </button>
-                  </div>
-
-                  {error && (
-                    <p role="alert" className="text-sm text-error">
-                      {error}
-                    </p>
-                  )}
-
-                  <div className="flex flex-col gap-3 border-t border-border pt-4 sm:flex-row sm:items-center sm:justify-between">
-                    <button
-                      type="button"
-                      onClick={() => {
-                        void openCommunityView();
-                      }}
-                      className="text-left text-sm font-medium text-accent hover:underline"
-                    >
-                      View community prompts
-                    </button>
-                    <Button type="submit" disabled={submitting}>
-                      {submitting ? "Submitting..." : "Submit prompt ⌘↵"}
-                    </Button>
-                  </div>
-                </form>
-              ) : (
-                <div className="space-y-4 px-5 py-5 sm:px-6 sm:py-6">
-                  <div className="max-h-[420px] overflow-y-auto rounded-[4px] border border-border">
-                    {communityLoading ? (
-                      <p className="px-4 py-8 text-center text-sm text-muted">
-                        Loading community prompts...
-                      </p>
-                    ) : communityError ? (
-                      <p role="alert" className="px-4 py-8 text-center text-sm text-error">
-                        {communityError}
-                      </p>
-                    ) : communityPrompts.length === 0 ? (
-                      <p className="px-4 py-8 text-center text-sm text-muted">
-                        No prompts yet.
-                      </p>
-                    ) : (
-                      <div className="divide-y divide-border">
-                        {communityPrompts.map((row) => {
-                          const usernameValue = row.user?.username ?? null;
-                          const canLink = Boolean(usernameValue && !row.is_anonymous);
-                          return (
-                            <article key={row.id} className="px-4 py-4">
-                              <div className="mb-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm">
-                                {canLink ? (
-                                  <Link
-                                    href={`/u/${usernameValue}`}
-                                    className="font-semibold text-accent hover:underline"
-                                  >
-                                    @{usernameValue}
-                                  </Link>
-                                ) : (
-                                  <span className="font-semibold text-muted">
-                                    {row.is_anonymous ? "Anonymous" : "Unknown user"}
-                                  </span>
-                                )}
-                                <span suppressHydrationWarning className="text-muted">
-                                  {timeAgo(row.created_at)}
-                                </span>
-                              </div>
-                              <p className="whitespace-pre-wrap text-sm leading-relaxed text-foreground">
-                                {row.prompt}
-                              </p>
-                            </article>
-                          );
-                        })}
-                      </div>
-                    )}
-                  </div>
-
-                  <div className="flex flex-col gap-3 border-t border-border pt-4 sm:flex-row sm:items-center">
-                    <button
-                      type="button"
-                      onClick={() => setView("submit")}
-                      className="text-left text-sm font-medium text-accent hover:underline"
-                    >
-                      Back to submit a prompt
-                    </button>
-                  </div>
-                </div>
-              )}
-            </div>
-          </div>,
-          document.body,
-        )}
+      {open && (
+        <SubmitPromptModal
+          username={username}
+          onClose={() => setOpen(false)}
+          onSubmitted={(message) => {
+            setOpen(false);
+            setFlash(message);
+          }}
+        />
+      )}
     </>
   );
 }
diff --git a/apps/web/components/app/shared/CommandPalette.tsx b/apps/web/components/app/shared/CommandPalette.tsx
index 45a28a93..02ebfa1a 100644
--- a/apps/web/components/app/shared/CommandPalette.tsx
+++ b/apps/web/components/app/shared/CommandPalette.tsx
@@ -1,177 +1,77 @@
 "use client";
 
-import {
-  KBarProvider,
-  KBarPortal,
-  KBarPositioner,
-  KBarAnimator,
-  KBarSearch,
-  KBarResults,
-  useMatches,
-  type Action,
-} from "kbar";
-import { useEffect } from "react";
-import { useRouter } from "next/navigation";
-import { useTheme } from "@/components/providers/ThemeProvider";
-import { createClient } from "@/lib/supabase/client";
-
-const STATIC_PREFETCH_HREFS = [
-  "/feed",
-  "/leaderboard",
-  "/search",
-  "/settings",
-  "/post/new",
-  "/recap",
-  "/prompts",
-] as const;
-
-function RenderResults() {
-  const { results } = useMatches();
+import dynamic from "next/dynamic";
+import { useCallback, useEffect, useState, type ReactNode } from "react";
 
-  return (
-    <KBarResults
-      items={results}
-      onRender={({ item, active }) =>
-        typeof item === "string" ? (
-          <div className="px-4 py-2 text-xs uppercase text-muted">{item}</div>
-        ) : (
-          <div
-            className={`flex cursor-pointer items-center justify-between px-4 py-3 text-sm ${
-              active ? "bg-hover text-accent" : "text-foreground"
-            }`}
-          >
-            <span>{item.name}</span>
-            {item.shortcut && item.shortcut.length > 0 && (
-              <span className="flex gap-1">
-                {item.shortcut.map((key) => (
-                  <kbd
-                    key={key}
-                    className="rounded border border-border bg-subtle px-1.5 py-0.5 font-mono text-xs text-muted"
-                  >
-                    {key}
-                  </kbd>
-                ))}
-              </span>
-            )}
-          </div>
-        )
-      }
-    />
-  );
-}
+const CommandPaletteInner = dynamic(
+  () => import("@/components/app/shared/CommandPaletteInner").then((mod) => mod.CommandPaletteInner),
+  { ssr: false },
+);
 
-export function CommandPalette({
-  username,
-  children,
-}: {
+interface CommandPaletteProps {
   username?: string | null;
-  children: React.ReactNode;
-}) {
-  const router = useRouter();
-  const { setTheme } = useTheme();
-  const profileHref = username ? `/u/${username}` : "/feed";
+  children: ReactNode;
+}
+
+type WindowWithIdleCallback = Window & {
+  requestIdleCallback?: (callback: IdleRequestCallback, options?: IdleRequestOptions) => number;
+  cancelIdleCallback?: (handle: number) => void;
+};
+
+function isCommandPaletteShortcut(event: KeyboardEvent) {
+  return (event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k";
+}
+
+export function CommandPalette({ username, children }: CommandPaletteProps) {
+  const [shouldLoad, setShouldLoad] = useState(false);
+  const [openOnLoad, setOpenOnLoad] = useState(false);
+
+  useEffect(() => {
+    if (shouldLoad) return;
+
+    function handleKeyDown(event: KeyboardEvent) {
+      if (!isCommandPaletteShortcut(event)) return;
+
+      event.preventDefault();
+      setOpenOnLoad(true);
+      setShouldLoad(true);
+    }
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [shouldLoad]);
 
   useEffect(() => {
-    for (const href of STATIC_PREFETCH_HREFS) {
-      router.prefetch(href);
+    if (shouldLoad) return;
+
+    const idleWindow = window as WindowWithIdleCallback;
+    if (idleWindow.requestIdleCallback) {
+      const idleId = idleWindow.requestIdleCallback(
+        () => setShouldLoad(true),
+        { timeout: 4_000 },
+      );
+      return () => idleWindow.cancelIdleCallback?.(idleId);
     }
-    router.prefetch(profileHref);
-  }, [profileHref, router]);
-
-  const actions: Action[] = [
-    {
-      id: "feed",
-      name: "Feed",
-      shortcut: ["g", "f"],
-      perform: () => router.push("/feed"),
-    },
-    {
-      id: "leaderboard",
-      name: "Leaderboard",
-      shortcut: ["g", "l"],
-      perform: () => router.push("/leaderboard"),
-    },
-    {
-      id: "search",
-      name: "Search",
-      shortcut: ["/"],
-      perform: () => router.push("/search"),
-    },
-    {
-      id: "settings",
-      name: "Settings",
-      shortcut: ["g", "s"],
-      perform: () => router.push("/settings"),
-    },
-    {
-      id: "new-post",
-      name: "New Post",
-      shortcut: ["c"],
-      perform: () => router.push("/post/new"),
-    },
-    {
-      id: "recap",
-      name: "Recap",
-      shortcut: ["g", "r"],
-      perform: () => router.push("/recap"),
-    },
-    {
-      id: "prompts",
-      name: "Prompts",
-      shortcut: ["g", "p"],
-      perform: () => router.push("/prompts"),
-    },
-    {
-      id: "profile",
-      name: "Profile",
-      shortcut: ["g", "m"],
-      perform: () => router.push(profileHref),
-    },
-    {
-      id: "logout",
-      name: "Log out",
-      section: "Account",
-      shortcut: [],
-      perform: async () => {
-        const supabase = createClient();
-        await supabase.auth.signOut();
-        router.push("/");
-      },
-    },
-    {
-      id: "theme-light",
-      name: "Light theme",
-      section: "Theme",
-      shortcut: [],
-      perform: () => setTheme("light"),
-    },
-    {
-      id: "theme-dark",
-      name: "Dark theme",
-      section: "Theme",
-      shortcut: [],
-      perform: () => setTheme("dark"),
-    },
-    {
-      id: "theme-system",
-      name: "System theme",
-      section: "Theme",
-      shortcut: [],
-      perform: () => setTheme("system"),
-    },
-  ];
+
+    const timeoutId = window.setTimeout(() => setShouldLoad(true), 2_500);
+    return () => window.clearTimeout(timeoutId);
+  }, [shouldLoad]);
+
+  const handleOpenOnLoadConsumed = useCallback(() => {
+    setOpenOnLoad(false);
+  }, []);
+
+  if (!shouldLoad) {
+    return <>{children}</>;
+  }
 
   return (
-    <KBarProvider actions={actions}>
-      <KBarPortal>
-        <KBarPositioner className="z-50 bg-overlay">
-          <KBarAnimator className="mx-auto mt-[20vh] w-full max-w-[600px] rounded-[4px] border border-border bg-background">
-            <KBarSearch className="w-full border-b border-border bg-background px-4 py-3 font-mono text-base text-foreground outline-none placeholder:text-muted" />
-            <RenderResults />
-          </KBarAnimator>
-        </KBarPositioner>
-      </KBarPortal>
+    <CommandPaletteInner
+      username={username}
+      openOnLoad={openOnLoad}
+      onOpenOnLoadConsumed={handleOpenOnLoadConsumed}
+    >
       {children}
-    </KBarProvider>
+    </CommandPaletteInner>
   );
 }
diff --git a/apps/web/components/app/shared/CommandPaletteInner.tsx b/apps/web/components/app/shared/CommandPaletteInner.tsx
new file mode 100644
index 00000000..ea0bc3b3
--- /dev/null
+++ b/apps/web/components/app/shared/CommandPaletteInner.tsx
@@ -0,0 +1,188 @@
+"use client";
+
+import {
+  KBarProvider,
+  KBarPortal,
+  KBarPositioner,
+  KBarAnimator,
+  KBarSearch,
+  KBarResults,
+  useKBar,
+  useMatches,
+  type Action,
+} from "kbar";
+import { useEffect, useMemo, type ReactNode } from "react";
+import { useRouter } from "next/navigation";
+import { useTheme } from "@/components/providers/ThemeProvider";
+import { createClient } from "@/lib/supabase/client";
+
+function RenderResults() {
+  const { results } = useMatches();
+
+  return (
+    <KBarResults
+      items={results}
+      onRender={({ item, active }) =>
+        typeof item === "string" ? (
+          <div className="px-4 py-2 text-xs uppercase text-muted">{item}</div>
+        ) : (
+          <div
+            className={`flex cursor-pointer items-center justify-between px-4 py-3 text-sm ${
+              active ? "bg-hover text-accent" : "text-foreground"
+            }`}
+          >
+            <span>{item.name}</span>
+            {item.shortcut && item.shortcut.length > 0 && (
+              <span className="flex gap-1">
+                {item.shortcut.map((key) => (
+                  <kbd
+                    key={key}
+                    className="rounded border border-border bg-subtle px-1.5 py-0.5 font-mono text-xs text-muted"
+                  >
+                    {key}
+                  </kbd>
+                ))}
+              </span>
+            )}
+          </div>
+        )
+      }
+    />
+  );
+}
+
+function OpenOnLoad({
+  open,
+  onConsumed,
+}: {
+  open: boolean;
+  onConsumed: () => void;
+}) {
+  const { query } = useKBar();
+
+  useEffect(() => {
+    if (!open) return;
+
+    query.toggle();
+    onConsumed();
+  }, [onConsumed, open, query]);
+
+  return null;
+}
+
+export function CommandPaletteInner({
+  username,
+  children,
+  openOnLoad = false,
+  onOpenOnLoadConsumed = () => {},
+}: {
+  username?: string | null;
+  children: ReactNode;
+  openOnLoad?: boolean;
+  onOpenOnLoadConsumed?: () => void;
+}) {
+  const router = useRouter();
+  const { setTheme } = useTheme();
+  const profileHref = username ? `/u/${username}` : "/feed";
+
+  const actions: Action[] = useMemo(
+    () => [
+      {
+        id: "feed",
+        name: "Feed",
+        shortcut: ["g", "f"],
+        perform: () => router.push("/feed"),
+      },
+      {
+        id: "leaderboard",
+        name: "Leaderboard",
+        shortcut: ["g", "l"],
+        perform: () => router.push("/leaderboard"),
+      },
+      {
+        id: "search",
+        name: "Search",
+        shortcut: ["/"],
+        perform: () => router.push("/search"),
+      },
+      {
+        id: "settings",
+        name: "Settings",
+        shortcut: ["g", "s"],
+        perform: () => router.push("/settings"),
+      },
+      {
+        id: "new-post",
+        name: "New Post",
+        shortcut: ["c"],
+        perform: () => router.push("/post/new"),
+      },
+      {
+        id: "recap",
+        name: "Recap",
+        shortcut: ["g", "r"],
+        perform: () => router.push("/recap"),
+      },
+      {
+        id: "prompts",
+        name: "Prompts",
+        shortcut: ["g", "p"],
+        perform: () => router.push("/prompts"),
+      },
+      {
+        id: "profile",
+        name: "Profile",
+        shortcut: ["g", "m"],
+        perform: () => router.push(profileHref),
+      },
+      {
+        id: "logout",
+        name: "Log out",
+        section: "Account",
+        shortcut: [],
+        perform: async () => {
+          const supabase = createClient();
+          await supabase.auth.signOut();
+          router.push("/");
+        },
+      },
+      {
+        id: "theme-light",
+        name: "Light theme",
+        section: "Theme",
+        shortcut: [],
+        perform: () => setTheme("light"),
+      },
+      {
+        id: "theme-dark",
+        name: "Dark theme",
+        section: "Theme",
+        shortcut: [],
+        perform: () => setTheme("dark"),
+      },
+      {
+        id: "theme-system",
+        name: "System theme",
+        section: "Theme",
+        shortcut: [],
+        perform: () => setTheme("system"),
+      },
+    ],
+    [profileHref, router, setTheme],
+  );
+
+  return (
+    <KBarProvider actions={actions}>
+      <OpenOnLoad open={openOnLoad} onConsumed={onOpenOnLoadConsumed} />
+      <KBarPortal>
+        <KBarPositioner className="z-50 bg-overlay">
+          <KBarAnimator className="mx-auto mt-[20vh] w-full max-w-[600px] rounded-[4px] border border-border bg-background">
+            <KBarSearch className="w-full border-b border-border bg-background px-4 py-3 font-mono text-base text-foreground outline-none placeholder:text-muted" />
+            <RenderResults />
+          </KBarAnimator>
+        </KBarPositioner>
+      </KBarPortal>
+      {children}
+    </KBarProvider>
+  );
+}
diff --git a/apps/web/components/app/shared/ResponsiveShellFrame.tsx b/apps/web/components/app/shared/ResponsiveShellFrame.tsx
index fe209834..d9a9ad16 100644
--- a/apps/web/components/app/shared/ResponsiveShellFrame.tsx
+++ b/apps/web/components/app/shared/ResponsiveShellFrame.tsx
@@ -15,6 +15,7 @@ interface ResponsiveShellFrameProps {
   leftPanel: ReactNode;
   rightPanel: ReactNode;
   children: ReactNode;
+  showPromptWidget?: boolean;
 }
 
 export function ResponsiveShellFrame({
@@ -23,6 +24,7 @@ export function ResponsiveShellFrame({
   leftPanel,
   rightPanel,
   children,
+  showPromptWidget = true,
 }: ResponsiveShellFrameProps) {
   const mode = useResponsiveShell();
   const [panelOpenMode, setPanelOpenMode] = useState<ResponsiveShellMode | null>(null);
@@ -122,7 +124,7 @@ export function ResponsiveShellFrame({
       </div>
 
       <MobileNav username={username} />
-      <SubmitPromptWidget username={username} />
+      {showPromptWidget && <SubmitPromptWidget username={username} />}
 
       <PanelSheet
         key={`${mode}-${panelTriggerLabel ?? "none"}`}
diff --git a/apps/web/components/app/shared/RightSidebar.tsx b/apps/web/components/app/shared/RightSidebar.tsx
index c66c35d1..545f826f 100644
--- a/apps/web/components/app/shared/RightSidebar.tsx
+++ b/apps/web/components/app/shared/RightSidebar.tsx
@@ -1,116 +1,81 @@
-import { createClient } from "@/lib/supabase/server";
-import { getServiceClient } from "@/lib/supabase/service";
-import { formatTokens } from "@/lib/utils/format";
+"use client";
+
 import Link from "next/link";
+import { useQuery } from "@tanstack/react-query";
 import { Avatar } from "@/components/ui/Avatar";
+import { Skeleton } from "@/components/ui/Skeleton";
 import { FollowButton } from "@/components/app/profile/FollowButton";
+import { fetchRightSidebar, type RightSidebarResponse } from "@/lib/query/right-sidebar";
+import { queryKeys } from "@/lib/query/keys";
+import { formatTokens } from "@/lib/utils/format";
 
-interface RightSidebarProps {
-  userId: string;
-  totalOutputTokens: number;
+export function RightSidebarFallback() {
+  return (
+    <div className="flex flex-col" aria-label="Loading discovery panel">
+      {[0, 1, 2].map((section) => (
+        <div key={section} className="border-b border-border p-6">
+          <Skeleton className="mb-4 h-3 w-28" />
+          <div className="space-y-3">
+            <Skeleton className="h-4 w-full" />
+            <Skeleton className="h-4 w-5/6" />
+            <Skeleton className="h-4 w-3/4" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
 }
 
-export async function RightSidebar({
-  userId,
-  totalOutputTokens,
-}: RightSidebarProps) {
-  const supabase = await createClient();
-  // Service client so suggestions can include all users.
-  const service = getServiceClient();
-
-  // Start independent queries in parallel (avoid waterfall)
-  const [{ data: topUsers }, { data: following }] = await Promise.all([
-    supabase
-      .from("leaderboard_weekly")
-      .select("user_id, username, avatar_url, total_cost")
-      .order("total_cost", { ascending: false })
-      .limit(5),
-    supabase
-      .from("follows")
-      .select("following_id")
-      .eq("follower_id", userId),
-  ]);
-
-  const followingIds = following?.map((f) => f.following_id) ?? [];
-  const excludeIds = [userId, ...followingIds];
+export function LazyRightSidebar() {
+  const rightSidebarQuery = useQuery({
+    queryKey: queryKeys.rightSidebar(),
+    queryFn: fetchRightSidebar,
+    staleTime: 60_000,
+  });
 
-  // Service client bypasses RLS so we can query all users for suggestions.
-  const [{ data: pinnedUsers }, { data: recentlyActive }, { data: newSignups }] =
-    await Promise.all([
-      service
-        .from("users")
-        .select("id, username, avatar_url, bio")
-        .eq("is_pinned_suggestion", true)
-        .not("id", "in", `(${excludeIds.join(",")})`),
-      // Users with recent activity (have pushed usage data)
-      service
-        .from("daily_usage")
-        .select("user_id, users!inner(id, username, avatar_url, bio, is_public)")
-        .not("users.username", "is", null)
-        .not("user_id", "in", `(${excludeIds.join(",")})`)
-        .order("date", { ascending: false })
-        .limit(20),
-      // New signups who completed onboarding (have a username)
-      service
-        .from("users")
-        .select("id, username, avatar_url, bio")
-        .eq("is_public", true)
-        .not("username", "is", null)
-        .not("id", "in", `(${excludeIds.join(",")})`)
-        .order("created_at", { ascending: false })
-        .limit(10),
-    ]);
-
-  const pinnedIds = new Set((pinnedUsers ?? []).map((u) => u.id));
-
-  // Deduplicate active users (may appear on multiple days), skip private and pinned
-  const seenIds = new Set<string>();
-  const activeUsers: Array<{ id: string; username: string; avatar_url: string | null; bio: string | null }> = [];
-  for (const row of recentlyActive ?? []) {
-    const u = row.users as unknown as { id: string; username: string; avatar_url: string | null; bio: string | null; is_public: boolean };
-    if (!seenIds.has(u.id) && !pinnedIds.has(u.id) && u.is_public) {
-      seenIds.add(u.id);
-      activeUsers.push({ id: u.id, username: u.username, avatar_url: u.avatar_url, bio: u.bio });
-    }
+  if (rightSidebarQuery.isLoading) {
+    return <RightSidebarFallback />;
   }
 
-  // Merge: active users first, then new signups, then pinned last (all deduped)
-  const merged: typeof activeUsers = [];
-  for (const u of activeUsers) {
-    if (!merged.some((m) => m.id === u.id)) merged.push(u);
+  if (rightSidebarQuery.isError) {
+    return (
+      <div className="border-b border-border p-6">
+        <p className="text-sm text-muted">Discovery is unavailable right now.</p>
+      </div>
+    );
   }
-  for (const u of newSignups ?? []) {
-    if (!merged.some((m) => m.id === u.id) && !pinnedIds.has(u.id)) merged.push(u);
+
+  if (!rightSidebarQuery.data) {
+    return <RightSidebarFallback />;
   }
-  // Cap organic suggestions to leave room for pinned users at the end
-  const pinnedList = (pinnedUsers ?? []).filter((u) => u.username);
-  const organicLimit = Math.max(0, 5 - pinnedList.length);
-  const suggested = [...merged.slice(0, organicLimit), ...pinnedList].slice(0, 5);
 
+  return <RightSidebar data={rightSidebarQuery.data} />;
+}
+
+export function RightSidebar({ data }: { data: RightSidebarResponse }) {
   const TARGET = 1_000_000_000;
-  const pct = Math.min((totalOutputTokens / TARGET) * 100, 100);
+  const pct = Math.min((data.totalOutputTokens / TARGET) * 100, 100);
 
   return (
     <div className="flex flex-col">
-      {/* Suggested Friends */}
       <div className="border-b border-border p-6">
         <p className="mb-3 text-xs font-semibold uppercase tracking-widest text-muted">
           Suggested Friends
         </p>
-        {suggested && suggested.length > 0 ? (
+        {data.suggested.length > 0 ? (
           <ul className="flex flex-col gap-3">
-            {suggested.map((u) => (
-              <li key={u.id} className="flex items-center gap-3">
-                <Link href={`/u/${u.username}`} className="flex items-center gap-3 flex-1 min-w-0 hover:text-accent">
-                  <Avatar src={u.avatar_url} alt={u.username ?? ""} size="sm" fallback={u.username ?? "?"} />
+            {data.suggested.map((user) => (
+              <li key={user.id} className="flex items-center gap-3">
+                <Link href={`/u/${user.username}`} className="flex min-w-0 flex-1 items-center gap-3 hover:text-accent">
+                  <Avatar src={user.avatar_url} alt={user.username} size="sm" fallback={user.username} />
                   <div className="flex-1 overflow-hidden">
-                    <p className="truncate text-sm font-medium">{u.username}</p>
-                    {u.bio && (
-                      <p className="truncate text-xs text-muted">{u.bio}</p>
+                    <p className="truncate text-sm font-medium">{user.username}</p>
+                    {user.bio && (
+                      <p className="truncate text-xs text-muted">{user.bio}</p>
                     )}
                   </div>
                 </Link>
-                <FollowButton username={u.username} initialFollowing={false} />
+                <FollowButton username={user.username} initialFollowing={false} />
               </li>
             ))}
           </ul>
@@ -119,7 +84,6 @@ export async function RightSidebar({
         )}
       </div>
 
-      {/* Featured Challenge */}
       <div className="border-b border-border p-6">
         <p className="mb-3 text-xs font-semibold uppercase tracking-widest text-muted">
           Featured Challenge
@@ -127,7 +91,7 @@ export async function RightSidebar({
         <p className="text-sm font-semibold">The Three Comma Club</p>
         <p className="mb-3 text-xs text-muted">First to one billion output tokens</p>
         <div className="mb-1 flex items-center justify-between text-xs text-muted">
-          <span>{formatTokens(totalOutputTokens)} ({pct < 0.01 ? '<0.01' : pct.toFixed(2)}%)</span>
+          <span>{formatTokens(data.totalOutputTokens)} ({pct < 0.01 ? "<0.01" : pct.toFixed(2)}%)</span>
           <span>1B</span>
         </div>
         <div className="h-1.5 w-full overflow-hidden rounded-full bg-subtle">
@@ -138,32 +102,31 @@ export async function RightSidebar({
         </div>
       </div>
 
-      {/* Leaderboard Preview */}
       <div className="border-b border-border p-6">
         <p className="mb-3 text-xs font-semibold uppercase tracking-widest text-muted">
           Top This Week
         </p>
         <ul className="flex flex-col gap-3">
-          {topUsers?.map((u, i) => (
-            <li key={u.user_id}>
+          {data.topUsers.map((user, index) => (
+            <li key={user.user_id}>
               <Link
-                href={`/u/${u.username}`}
+                href={`/u/${user.username ?? ""}`}
                 className="flex items-center gap-3 hover:text-accent"
               >
                 <span className="flex h-6 w-6 shrink-0 items-center justify-center text-xs font-semibold">
-                  {i + 1}
+                  {index + 1}
                 </span>
-                <Avatar src={u.avatar_url} alt={u.username ?? ""} size="sm" fallback={u.username ?? "?"} />
+                <Avatar src={user.avatar_url} alt={user.username ?? ""} size="sm" fallback={user.username ?? "?"} />
                 <span className="flex-1 truncate text-sm font-medium">
-                  {u.username}
+                  {user.username}
                 </span>
                 <span className="font-[family-name:var(--font-mono)] text-sm text-accent">
-                  ${Math.round(Number(u.total_cost)).toLocaleString("en-US")}
+                  ${Math.round(Number(user.total_cost ?? 0)).toLocaleString("en-US")}
                 </span>
               </Link>
             </li>
           ))}
-          {(!topUsers || topUsers.length === 0) && (
+          {data.topUsers.length === 0 && (
             <li className="text-sm text-muted">No activity yet</li>
           )}
         </ul>
@@ -175,7 +138,6 @@ export async function RightSidebar({
           <span className="text-base font-light">&rarr;</span>
         </Link>
       </div>
-
     </div>
   );
 }
diff --git a/apps/web/components/app/shared/TopHeader.tsx b/apps/web/components/app/shared/TopHeader.tsx
index 591f276f..544aee8f 100644
--- a/apps/web/components/app/shared/TopHeader.tsx
+++ b/apps/web/components/app/shared/TopHeader.tsx
@@ -54,10 +54,13 @@ export function TopHeader({
   const notificationsQuery = useQuery({
     queryKey: queryKeys.notifications(),
     queryFn: fetchNotifications,
+    enabled: notifOpen,
+    staleTime: 30_000,
   });
   const appCountsQuery = useQuery({
     queryKey: queryKeys.appCounts(),
     queryFn: fetchAppCounts,
+    staleTime: 15_000,
   });
 
   const notifications = notificationsQuery.data?.notifications ?? [];
@@ -94,13 +97,16 @@ export function TopHeader({
     };
   }, [profileOpen, notifOpen]);
 
-  // Initial unread count fetch + mark as returning user + listen for external changes
+  // Initial unread count fetch + mark as returning user + listen for external changes.
+  // The full notifications list stays lazy until the menu is opened.
   useEffect(() => {
     function refreshCounts() {
       void queryClient.invalidateQueries({ queryKey: queryKeys.appCounts() });
-      void queryClient.invalidateQueries({
-        queryKey: queryKeys.notifications(),
-      });
+      if (notifOpen) {
+        void queryClient.invalidateQueries({
+          queryKey: queryKeys.notifications(),
+        });
+      }
     }
 
     try { localStorage.setItem("straude_returning", "1"); } catch {}
@@ -113,7 +119,7 @@ export function TopHeader({
       window.removeEventListener("notifications-updated", handleSync);
       window.removeEventListener("messages-updated", handleSync);
     };
-  }, [queryClient]);
+  }, [notifOpen, queryClient]);
 
   async function handleLogout() {
     const supabase = createClient();
@@ -207,16 +213,7 @@ export function TopHeader({
           <div ref={notifRef} className="relative">
             <button
               type="button"
-              onClick={() => {
-                setNotifOpen((v) => {
-                  if (!v) {
-                    void queryClient.invalidateQueries({
-                      queryKey: queryKeys.notifications(),
-                    });
-                  }
-                  return !v;
-                });
-              }}
+              onClick={() => setNotifOpen((v) => !v)}
               className="relative rounded p-1.5 text-muted hover:bg-subtle hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-background"
               aria-label="Notifications"
               aria-haspopup="true"
@@ -243,7 +240,15 @@ export function TopHeader({
                   )}
                 </div>
                 <div className="max-h-[60vh] overflow-y-auto sm:max-h-80" style={{ WebkitOverflowScrolling: "touch" }}>
-                  {notifications.length === 0 ? (
+                  {notificationsQuery.isLoading ? (
+                    <p className="px-4 py-6 text-center text-sm text-muted">
+                      Loading notifications...
+                    </p>
+                  ) : notificationsQuery.isError ? (
+                    <p role="alert" className="px-4 py-6 text-center text-sm text-error">
+                      Could not load notifications.
+                    </p>
+                  ) : notifications.length === 0 ? (
                     <p className="px-4 py-6 text-center text-sm text-muted">
                       No notifications yet
                     </p>
diff --git a/apps/web/components/providers/AppProviders.tsx b/apps/web/components/providers/AppProviders.tsx
new file mode 100644
index 00000000..1894a5e1
--- /dev/null
+++ b/apps/web/components/providers/AppProviders.tsx
@@ -0,0 +1,17 @@
+"use client";
+
+import { ConsentAwareAnalytics } from "@/components/providers/ConsentAwareAnalytics";
+import { PostHogClientProvider } from "@/components/providers/PostHogProvider";
+import { QueryProvider } from "@/components/providers/QueryProvider";
+import { ThemeProvider } from "@/components/providers/ThemeProvider";
+
+export function AppProviders({ children }: { children: React.ReactNode }) {
+  return (
+    <PostHogClientProvider>
+      <QueryProvider>
+        <ThemeProvider>{children}</ThemeProvider>
+      </QueryProvider>
+      <ConsentAwareAnalytics />
+    </PostHogClientProvider>
+  );
+}
diff --git a/apps/web/components/providers/PostHogProvider.tsx b/apps/web/components/providers/PostHogProvider.tsx
index a0796c51..756752a6 100644
--- a/apps/web/components/providers/PostHogProvider.tsx
+++ b/apps/web/components/providers/PostHogProvider.tsx
@@ -10,6 +10,12 @@ import { useAnalyticsConsent } from "@/components/providers/useAnalyticsConsent"
 
 const POSTHOG_KEY = process.env.NEXT_PUBLIC_POSTHOG_KEY;
 
+declare global {
+  interface Window {
+    __straudePostHogInitialized?: boolean;
+  }
+}
+
 /**
  * Wraps posthog-js/react PostHogProvider with deferred initialization.
  *
@@ -42,6 +48,7 @@ export function PostHogClientProvider({
       person_profiles: "identified_only",
     });
     initialized.current = true;
+    window.__straudePostHogInitialized = true;
     readyTimer = window.setTimeout(() => setReady(true), 0);
 
     const supabase = createClient();
diff --git a/apps/web/components/providers/PublicAnalytics.tsx b/apps/web/components/providers/PublicAnalytics.tsx
new file mode 100644
index 00000000..5208087d
--- /dev/null
+++ b/apps/web/components/providers/PublicAnalytics.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import { Suspense, useEffect, useState } from "react";
+import { usePathname, useSearchParams } from "next/navigation";
+import { ConsentAwareAnalytics } from "@/components/providers/ConsentAwareAnalytics";
+import { useAnalyticsConsent } from "@/components/providers/useAnalyticsConsent";
+import { captureConsentedPostHogEvent } from "@/lib/analytics/client";
+
+export function PublicAnalytics() {
+  const analyticsConsent = useAnalyticsConsent();
+
+  return (
+    <>
+      <Suspense fallback={null}>
+        <PublicPageviewTracker enabled={analyticsConsent} />
+      </Suspense>
+      <ConsentAwareAnalytics />
+    </>
+  );
+}
+
+function PublicPageviewTracker({ enabled }: { enabled: boolean }) {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const [lastCapturedUrl, setLastCapturedUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!enabled || !pathname) return;
+
+    const query = searchParams?.toString();
+    const path = query ? `${pathname}?${query}` : pathname;
+    const url = `${window.location.origin}${path}`;
+
+    if (url === lastCapturedUrl) return;
+    setLastCapturedUrl(url);
+
+    void captureConsentedPostHogEvent("$pageview", { $current_url: url });
+  }, [enabled, lastCapturedUrl, pathname, searchParams]);
+
+  return null;
+}
diff --git a/apps/web/lib/analytics/activation.ts b/apps/web/lib/analytics/activation.ts
index 872fa4f3..e8c150b4 100644
--- a/apps/web/lib/analytics/activation.ts
+++ b/apps/web/lib/analytics/activation.ts
@@ -60,6 +60,7 @@ export type ActivationEventProperties = Partial<{
   pricing_mode: string;
   ccusage_version: string;
   ccusage_agents: string[];
+  has_analytics_consent: boolean;
   has_existing_usage: boolean;
   has_errors: boolean;
   "$insert_id": string;
@@ -86,6 +87,7 @@ const ALLOWED_PROPERTY_KEYS = new Set([
   "pricing_mode",
   "ccusage_version",
   "ccusage_agents",
+  "has_analytics_consent",
   "has_existing_usage",
   "has_errors",
   "$insert_id",
diff --git a/apps/web/lib/analytics/client.ts b/apps/web/lib/analytics/client.ts
index d32f7004..385aab19 100644
--- a/apps/web/lib/analytics/client.ts
+++ b/apps/web/lib/analytics/client.ts
@@ -1,6 +1,5 @@
 "use client";
 
-import posthog from "posthog-js";
 import {
   type ActivationEventName,
   type ActivationEventProperties,
@@ -8,12 +7,65 @@ import {
 } from "@/lib/analytics/activation";
 import { getCookieConsentFromCookieString } from "@/lib/cookie-consent";
 
+const POSTHOG_KEY = process.env.NEXT_PUBLIC_POSTHOG_KEY;
+
+declare global {
+  interface Window {
+    __straudePostHogInitialized?: boolean;
+  }
+}
+
+type PostHogClient = typeof import("posthog-js").default;
+
+let posthogPromise: Promise<PostHogClient | null> | null = null;
+
+function hasAnalyticsConsent() {
+  return getCookieConsentFromCookieString(document.cookie)?.analytics ?? false;
+}
+
+function getPostHogClient(): Promise<PostHogClient | null> {
+  if (!POSTHOG_KEY) return Promise.resolve(null);
+
+  posthogPromise ??= import("posthog-js")
+    .then((mod) => {
+      const posthog = mod.default;
+
+      if (!window.__straudePostHogInitialized) {
+        posthog.init(POSTHOG_KEY, {
+          api_host: "/ingest",
+          ui_host: "https://us.posthog.com",
+          defaults: "2025-05-24",
+          capture_pageview: false,
+          person_profiles: "identified_only",
+        });
+        window.__straudePostHogInitialized = true;
+      }
+
+      return posthog;
+    })
+    .catch(() => null);
+
+  return posthogPromise;
+}
+
+export async function captureConsentedPostHogEvent(
+  event: string,
+  properties: Record<string, unknown> = {},
+): Promise<void> {
+  if (!hasAnalyticsConsent()) return;
+
+  const posthog = await getPostHogClient();
+  posthog?.capture(event, properties);
+}
+
 export function trackActivationEvent(
   event: ActivationEventName,
   properties: ActivationEventProperties = {},
 ): void {
+  const analyticsConsent = hasAnalyticsConsent();
   const sanitized = sanitizeActivationProperties({
     source: "browser",
+    has_analytics_consent: analyticsConsent,
     ...properties,
   });
 
@@ -24,11 +76,5 @@ export function trackActivationEvent(
     keepalive: true,
   }).catch(() => {});
 
-  if (getCookieConsentFromCookieString(document.cookie)?.analytics) {
-    try {
-      posthog.capture(event, sanitized);
-    } catch {
-      // Browser analytics is best-effort; server lifecycle capture is primary.
-    }
-  }
+  void captureConsentedPostHogEvent(event, sanitized);
 }
diff --git a/apps/web/lib/data/usage-totals.ts b/apps/web/lib/data/usage-totals.ts
new file mode 100644
index 00000000..fb96f845
--- /dev/null
+++ b/apps/web/lib/data/usage-totals.ts
@@ -0,0 +1,62 @@
+import type { createClient } from "@/lib/supabase/server";
+import type { DailyUsage } from "@/types";
+
+type SupabaseServerClient = Awaited<ReturnType<typeof createClient>>;
+type UsageFallbackRow = Pick<DailyUsage, "cost_usd" | "output_tokens">;
+type UsageTotalsRpcRow = {
+  total_cost: number | string | null;
+  total_tokens: number | string | null;
+};
+
+export async function loadUsageTotals(
+  supabase: SupabaseServerClient,
+  userId: string,
+): Promise<{ totalTokens: number; totalCost: number }> {
+  const usageTotalsRes = await supabase
+    .rpc("get_user_usage_totals", { p_user_id: userId })
+    .single();
+
+  const loadFallbackUsageTotals = async (): Promise<{ totalTokens: number; totalCost: number }> => {
+    const { data: fallbackRows, error: fallbackError } = await supabase
+      .from("daily_usage")
+      .select("cost_usd, output_tokens")
+      .eq("user_id", userId);
+
+    if (fallbackError) {
+      throw new Error(`Unable to load usage totals from daily_usage fallback (${fallbackError.message})`);
+    }
+
+    const rows = (fallbackRows ?? []) as UsageFallbackRow[];
+    return {
+      totalTokens: rows.reduce((sum, row) => sum + Number(row.output_tokens), 0),
+      totalCost: rows.reduce((sum, row) => sum + Number(row.cost_usd), 0),
+    };
+  };
+
+  if (usageTotalsRes.error) {
+    console.error("get_user_usage_totals RPC failed; using direct daily_usage fallback", {
+      userId,
+      code: usageTotalsRes.error.code,
+      message: usageTotalsRes.error.message,
+    });
+
+    return loadFallbackUsageTotals();
+  }
+
+  const usageTotals = usageTotalsRes.data as UsageTotalsRpcRow | null;
+  const rpcTokens = usageTotals?.total_tokens;
+
+  if (rpcTokens === null || rpcTokens === undefined) {
+    console.error("get_user_usage_totals returned no total_tokens; using direct daily_usage fallback", {
+      userId,
+      rpcKeys: usageTotals ? Object.keys(usageTotals) : [],
+    });
+
+    return loadFallbackUsageTotals();
+  }
+
+  return {
+    totalTokens: Number(rpcTokens),
+    totalCost: Number(usageTotals?.total_cost ?? 0),
+  };
+}
diff --git a/apps/web/lib/query/keys.ts b/apps/web/lib/query/keys.ts
index b34b9392..5a37c8f4 100644
--- a/apps/web/lib/query/keys.ts
+++ b/apps/web/lib/query/keys.ts
@@ -1,6 +1,7 @@
 export const queryKeys = {
   appBootstrap: () => ["app", "bootstrap"] as const,
   appCounts: () => ["app", "counts"] as const,
+  rightSidebar: () => ["app", "right-sidebar"] as const,
   notifications: (params?: {
     limit?: number;
     offset?: number;
diff --git a/apps/web/lib/query/right-sidebar.ts b/apps/web/lib/query/right-sidebar.ts
new file mode 100644
index 00000000..5a478042
--- /dev/null
+++ b/apps/web/lib/query/right-sidebar.ts
@@ -0,0 +1,29 @@
+export interface RightSidebarSuggestedUser {
+  id: string;
+  username: string;
+  avatar_url: string | null;
+  bio: string | null;
+}
+
+export interface RightSidebarTopUser {
+  user_id: string;
+  username: string | null;
+  avatar_url: string | null;
+  total_cost: number | string | null;
+}
+
+export interface RightSidebarResponse {
+  suggested: RightSidebarSuggestedUser[];
+  topUsers: RightSidebarTopUser[];
+  totalOutputTokens: number;
+}
+
+export async function fetchRightSidebar(): Promise<RightSidebarResponse> {
+  const response = await fetch("/api/app/right-sidebar");
+
+  if (!response.ok) {
+    throw new Error("Failed to load right sidebar.");
+  }
+
+  return response.json();
+}

From a14874dbf85345ebbb3bc0bae514baecf4bb02b5 Mon Sep 17 00:00:00 2001
From: Oscar Hong <oscar.hong2015@gmail.com>
Date: Fri, 3 Jul 2026 00:25:22 +0800
Subject: [PATCH 09/15] Make CLI first sync faster

---
 apps/web/__tests__/api/usage-submit.test.ts   |   6 +-
 apps/web/app/api/usage/submit/route.ts        |   8 +-
 packages/cli/__tests__/ccusage.test.ts        |  54 +++-
 packages/cli/__tests__/commands/push.test.ts  |  68 +++-
 .../cli/__tests__/flows/cli-sync-flow.test.ts |  24 +-
 .../__tests__/resolve-push-date-range.test.ts |   9 +-
 packages/cli/src/commands/login.ts            |   1 +
 packages/cli/src/commands/push.ts             | 300 +++++++++++++++---
 packages/cli/src/index.ts                     |  16 +-
 packages/cli/src/lib/ccusage.ts               |  77 ++++-
 packages/cli/src/lib/telemetry.ts             |  24 +-
 11 files changed, 480 insertions(+), 107 deletions(-)

diff --git a/apps/web/__tests__/api/usage-submit.test.ts b/apps/web/__tests__/api/usage-submit.test.ts
index 07655832..a3ed0725 100644
--- a/apps/web/__tests__/api/usage-submit.test.ts
+++ b/apps/web/__tests__/api/usage-submit.test.ts
@@ -357,7 +357,7 @@ describe("POST /api/usage/submit", () => {
     expect(json.error).toContain("Unsupported ccusage agents");
   });
 
-  it("rejects non-online ccusage pricing metadata", async () => {
+  it("rejects unsupported ccusage pricing metadata", async () => {
     (verifyCliToken as any).mockReturnValue("user-1");
     mockServiceClient();
 
@@ -1491,7 +1491,7 @@ describe("POST /api/usage/submit", () => {
           claude: "ccusage-claude-v20",
           ccusage_version: "20.0.6",
           ccusage_agents: ["claude"],
-          pricing_mode: "online",
+          pricing_mode: "offline",
         },
       })
     );
@@ -1500,7 +1500,7 @@ describe("POST /api/usage/submit", () => {
       claude: "ccusage-claude-v20",
       ccusage_version: "20.0.6",
       ccusage_agents: ["claude"],
-      pricing_mode: "online",
+      pricing_mode: "offline",
     };
     expect(res.status).toBe(200);
     expect(svc.upsert.mock.calls[0][0].collector_meta).toEqual(expectedMeta);
diff --git a/apps/web/app/api/usage/submit/route.ts b/apps/web/app/api/usage/submit/route.ts
index 53a2c721..1d4cb654 100644
--- a/apps/web/app/api/usage/submit/route.ts
+++ b/apps/web/app/api/usage/submit/route.ts
@@ -61,8 +61,12 @@ function validateEntry(entry: CcusageDailyEntry): string | null {
 
 function validateCollectorMeta(collector: UsageCollectorMeta | undefined): string | null {
   if (!collector) return null;
-  if (collector.pricing_mode != null && collector.pricing_mode !== "online") {
-    return "Unsupported pricing mode; ccusage submissions must use online pricing";
+  if (
+    collector.pricing_mode != null &&
+    collector.pricing_mode !== "online" &&
+    collector.pricing_mode !== "offline"
+  ) {
+    return "Unsupported pricing mode; ccusage submissions must use online or offline pricing";
   }
   if (collector.ccusage_agents != null) {
     if (!Array.isArray(collector.ccusage_agents)) {
diff --git a/packages/cli/__tests__/ccusage.test.ts b/packages/cli/__tests__/ccusage.test.ts
index c003bc49..af02adf0 100644
--- a/packages/cli/__tests__/ccusage.test.ts
+++ b/packages/cli/__tests__/ccusage.test.ts
@@ -75,7 +75,7 @@ describe("parseCcusageOutput", () => {
       codex: CCUSAGE_CODEX_COLLECTOR,
       ccusage_version: "20.0.6",
       ccusage_agents: ["codex"],
-      pricing_mode: "online",
+      pricing_mode: "offline",
     });
   });
 
@@ -104,7 +104,7 @@ describe("parseCcusageOutput", () => {
       codex: CCUSAGE_CODEX_COLLECTOR,
       ccusage_version: "20.0.6",
       ccusage_agents: ["claude", "codex"],
-      pricing_mode: "online",
+      pricing_mode: "offline",
     });
     expect(parsed.data[0]!.reasoningOutputTokens).toBe(100);
   });
@@ -140,7 +140,7 @@ describe("parseCcusageOutput", () => {
     expect(parsed.collector).toEqual({
       ccusage_version: "20.0.6",
       ccusage_agents: [],
-      pricing_mode: "online",
+      pricing_mode: "offline",
     });
   });
 
@@ -152,7 +152,7 @@ describe("parseCcusageOutput", () => {
 });
 
 describe("version and execution", () => {
-  it("invokes the installed ccusage binary with online unified daily args", async () => {
+  it("invokes the installed ccusage binary with offline unified daily args", async () => {
     execFileMock.mockImplementationOnce((...args: unknown[]) => {
       const cb = args.at(-1) as (err: Error | null, stdout: string, stderr: string) => void;
       cb(null, rawOutput(), "");
@@ -162,12 +162,32 @@ describe("version and execution", () => {
 
     expect(collected.raw).toBe(rawOutput());
     expect(execFileMock).toHaveBeenCalledTimes(1);
+    expect(execFileMock).toHaveBeenCalledWith(
+      "/bundled/ccusage",
+      ["daily", "--json", "--since", "20260513", "--until", "20260513", "--offline"],
+      expect.objectContaining({ shell: false }),
+      expect.any(Function),
+    );
+    expect(collected.collector.pricing_mode).toBe("offline");
+  });
+
+  it("can explicitly collect with online pricing", async () => {
+    execFileMock.mockImplementationOnce((...args: unknown[]) => {
+      const cb = args.at(-1) as (err: Error | null, stdout: string, stderr: string) => void;
+      cb(null, rawOutput(), "");
+    });
+
+    const collected = await collectCcusageUsageAsync("20260513", "20260513", 10_000, {
+      pricingMode: "online",
+    });
+
     expect(execFileMock).toHaveBeenCalledWith(
       "/bundled/ccusage",
       ["daily", "--json", "--since", "20260513", "--until", "20260513", "--no-offline"],
       expect.objectContaining({ shell: false }),
       expect.any(Function),
     );
+    expect(collected.collector.pricing_mode).toBe("online");
   });
 
   it("rejects ccusage versions below the v20 accuracy floor", async () => {
@@ -178,15 +198,35 @@ describe("version and execution", () => {
     );
   });
 
-  it("fails safely when ccusage reports missing online pricing", async () => {
+  it("falls back to online pricing when offline pricing is incomplete", async () => {
     execFileMock
       .mockImplementationOnce((...args: unknown[]) => {
         const cb = args.at(-1) as (err: Error | null, stdout: string, stderr: string) => void;
         cb(null, rawOutput(), "Missing pricing for model gpt-5.2-codex");
+      })
+      .mockImplementationOnce((...args: unknown[]) => {
+        const cb = args.at(-1) as (err: Error | null, stdout: string, stderr: string) => void;
+        cb(null, rawOutput(), "");
       });
 
-    await expect(collectCcusageUsageAsync("20260513", "20260513")).rejects.toThrow(
-      /fully priced online cost data/,
+    const collected = await collectCcusageUsageAsync("20260513", "20260513");
+
+    expect(execFileMock).toHaveBeenCalledTimes(2);
+    expect(execFileMock.mock.calls[0]![1]).toContain("--offline");
+    expect(execFileMock.mock.calls[1]![1]).toContain("--no-offline");
+    expect(collected.collector.pricing_mode).toBe("online");
+  });
+
+  it("fails safely when the selected pricing mode remains incomplete", async () => {
+    execFileMock.mockImplementationOnce((...args: unknown[]) => {
+      const cb = args.at(-1) as (err: Error | null, stdout: string, stderr: string) => void;
+      cb(null, rawOutput(), "Missing pricing for model gpt-5.2-codex");
+    });
+
+    await expect(collectCcusageUsageAsync("20260513", "20260513", undefined, {
+      allowOnlineFallback: false,
+    })).rejects.toThrow(
+      /fully priced offline cost data/,
     );
   });
 });
diff --git a/packages/cli/__tests__/commands/push.test.ts b/packages/cli/__tests__/commands/push.test.ts
index ae487c53..b03d91a2 100644
--- a/packages/cli/__tests__/commands/push.test.ts
+++ b/packages/cli/__tests__/commands/push.test.ts
@@ -17,11 +17,14 @@ vi.mock("../../src/lib/api.js", () => ({
 vi.mock("../../src/lib/ccusage.js", () => ({
   CCUSAGE_CLAUDE_COLLECTOR: "ccusage-claude-v20",
   CCUSAGE_CODEX_COLLECTOR: "ccusage-codex-v20",
+  CCUSAGE_DEFAULT_PRICING_MODE: "offline",
   collectCcusageUsageAsync: vi.fn(),
 }));
 
 vi.mock("../../src/lib/telemetry.js", () => ({
   reportUsagePushFailed: vi.fn(),
+  shutdownTelemetryWithTimeout: vi.fn(() => Promise.resolve(0)),
+  TELEMETRY_SHUTDOWN_TIMEOUT_MS: 150,
   errorMessage: (error: unknown) => error instanceof Error ? error.message : String(error),
 }));
 
@@ -38,8 +41,7 @@ import { loadConfig, saveConfig, updateLastPushDate } from "../../src/lib/auth.j
 import { loginCommand } from "../../src/commands/login.js";
 import { apiRequest } from "../../src/lib/api.js";
 import { collectCcusageUsageAsync } from "../../src/lib/ccusage.js";
-import { posthog } from "../../src/lib/posthog.js";
-import { reportUsagePushFailed } from "../../src/lib/telemetry.js";
+import { reportUsagePushFailed, shutdownTelemetryWithTimeout } from "../../src/lib/telemetry.js";
 
 const mockLoadConfig = vi.mocked(loadConfig);
 const mockSaveConfig = vi.mocked(saveConfig);
@@ -47,8 +49,8 @@ const mockUpdateLastPushDate = vi.mocked(updateLastPushDate);
 const mockLoginCommand = vi.mocked(loginCommand);
 const mockApiRequest = vi.mocked(apiRequest);
 const mockCollectCcusageUsageAsync = vi.mocked(collectCcusageUsageAsync);
-const mockPosthog = vi.mocked(posthog);
 const mockReportUsagePushFailed = vi.mocked(reportUsagePushFailed);
+const mockShutdownTelemetry = vi.mocked(shutdownTelemetryWithTimeout);
 
 const fakeConfig = {
   token: "tok",
@@ -119,7 +121,7 @@ function ccusageOutput(entries = [usageEntry()], overrides: Record<string, unkno
       codex: "ccusage-codex-v20",
       ccusage_version: "20.0.6",
       ccusage_agents: ["claude", "codex"],
-      pricing_mode: "online",
+      pricing_mode: "offline",
     },
     version: "20.0.6",
     raw: JSON.stringify({ daily: entries }),
@@ -169,6 +171,7 @@ describe("pushCommand", () => {
       expect.any(String),
       expect.any(String),
       undefined,
+      { pricingMode: "offline" },
     );
     expect(mockApiRequest).toHaveBeenCalledWith(
       expect.objectContaining(fakeConfig),
@@ -185,7 +188,7 @@ describe("pushCommand", () => {
       codex: "ccusage-codex-v20",
       ccusage_version: "20.0.6",
       ccusage_agents: ["claude", "codex"],
-      pricing_mode: "online",
+      pricing_mode: "offline",
     });
     expect(body.device_id).toBe("device-1");
     expect(body.device_name).toBe("work-laptop");
@@ -213,7 +216,31 @@ describe("pushCommand", () => {
     expect(body.hash).toBe(concreteHash);
   });
 
-  it("runs one-time 30-day ccusage migration backfill and writes the new marker", async () => {
+  it("respects explicit --days even when the migration backfill marker is missing", async () => {
+    const today = new Date();
+    const twoDaysAgo = new Date(today);
+    twoDaysAgo.setDate(today.getDate() - 2);
+    mockLoadConfig.mockReturnValue({
+      ...fakeConfig,
+      ccusage_v20_migration_completed_at: undefined,
+      last_push_date: daysAgoStr(2),
+    });
+
+    await pushCommand({ days: 3 });
+
+    expect(mockCollectCcusageUsageAsync).toHaveBeenCalledWith(
+      compact(twoDaysAgo),
+      compact(today),
+      undefined,
+      { pricingMode: "offline" },
+    );
+    expect(mockUpdateLastPushDate).toHaveBeenCalledWith(todayStr());
+    expect(mockSaveConfig).not.toHaveBeenCalledWith(expect.objectContaining({
+      ccusage_v20_migration_completed_at: expect.any(String),
+    }));
+  });
+
+  it("marks the ccusage v20 migration complete after an explicit 30-day backfill", async () => {
     const today = new Date();
     const twentyNineDaysAgo = new Date(today);
     twentyNineDaysAgo.setDate(today.getDate() - 29);
@@ -223,12 +250,13 @@ describe("pushCommand", () => {
       last_push_date: daysAgoStr(2),
     });
 
-    await pushCommand({ days: 3 });
+    await pushCommand({ days: 30 });
 
     expect(mockCollectCcusageUsageAsync).toHaveBeenCalledWith(
       compact(twentyNineDaysAgo),
       compact(today),
       undefined,
+      { pricingMode: "offline" },
     );
     expect(mockSaveConfig).toHaveBeenLastCalledWith(expect.objectContaining({
       ccusage_v20_migration_completed_at: expect.any(String),
@@ -247,7 +275,9 @@ describe("pushCommand", () => {
 
     await pushCommand({ date: "2026-03-12" });
 
-    expect(mockCollectCcusageUsageAsync).toHaveBeenCalledWith("20260312", "20260312", undefined);
+    expect(mockCollectCcusageUsageAsync).toHaveBeenCalledWith("20260312", "20260312", undefined, {
+      pricingMode: "offline",
+    });
     expect(mockUpdateLastPushDate).toHaveBeenCalledWith(todayStr());
     expect(mockSaveConfig).not.toHaveBeenCalledWith(expect.objectContaining({
       ccusage_v20_migration_completed_at: expect.any(String),
@@ -260,6 +290,7 @@ describe("pushCommand", () => {
       expect.any(String),
       expect.any(String),
       300_000,
+      { pricingMode: "offline" },
     );
   });
 
@@ -301,9 +332,15 @@ describe("pushCommand", () => {
     expect(mockReportUsagePushFailed).toHaveBeenCalledWith(
       expect.objectContaining(fakeConfig),
       error,
-      { command: "push", stage: "scan" },
+      expect.objectContaining({
+        command: "push",
+        stage: "scan",
+        pricing_mode: "offline",
+        collection_ms: expect.any(Number),
+        total_ms: expect.any(Number),
+      }),
     );
-    expect(mockPosthog._shutdown).toHaveBeenCalled();
+    expect(mockShutdownTelemetry).toHaveBeenCalled();
     expect(mockApiRequest).not.toHaveBeenCalled();
   });
 
@@ -316,7 +353,14 @@ describe("pushCommand", () => {
     expect(mockReportUsagePushFailed).toHaveBeenCalledWith(
       expect.objectContaining(fakeConfig),
       error,
-      { command: "push", stage: "submit" },
+      expect.objectContaining({
+        command: "push",
+        stage: "submit",
+        pricing_mode: "offline",
+        collection_ms: expect.any(Number),
+        submit_ms: expect.any(Number),
+        total_ms: expect.any(Number),
+      }),
     );
     expect(process.exit).toHaveBeenCalledWith(1);
   });
@@ -355,7 +399,7 @@ describe("pushCommand", () => {
       collector: {
         ccusage_version: "20.0.6",
         ccusage_agents: [],
-        pricing_mode: "online",
+        pricing_mode: "offline",
       },
       raw: '{"daily":[]}',
     }) as never);
diff --git a/packages/cli/__tests__/flows/cli-sync-flow.test.ts b/packages/cli/__tests__/flows/cli-sync-flow.test.ts
index 2373abad..27f4bbc9 100644
--- a/packages/cli/__tests__/flows/cli-sync-flow.test.ts
+++ b/packages/cli/__tests__/flows/cli-sync-flow.test.ts
@@ -146,7 +146,7 @@ describe("unified ccusage CLI flow", () => {
 
     expect(execFileMock).toHaveBeenCalledWith(
       "/bundled/ccusage",
-      expect.arrayContaining(["daily", "--json", "--no-offline"]),
+      expect.arrayContaining(["daily", "--json", "--offline"]),
       expect.any(Object),
       expect.any(Function),
     );
@@ -159,12 +159,12 @@ describe("unified ccusage CLI flow", () => {
       codex: "ccusage-codex-v20",
       ccusage_version: TEST_CCUSAGE_VERSION,
       ccusage_agents: ["claude", "codex"],
-      pricing_mode: "online",
+      pricing_mode: "offline",
     });
     expect(readPersistedConfig().last_push_date).toBe(todayStr());
   });
 
-  it("first migrated push backfills 30 days and stores ccusage_v20_migration_completed_at", async () => {
+  it("respects explicit --days before the migration backfill has completed", async () => {
     seedConfig({
       ccusage_v20_migration_completed_at: undefined,
       last_push_date: "2026-03-01",
@@ -173,6 +173,24 @@ describe("unified ccusage CLI flow", () => {
 
     await pushCommand({ days: 3 });
 
+    const dailyCall = execFileMock.mock.calls.find(([, args]) =>
+      Array.isArray(args) && args.includes("daily"),
+    )!;
+    const args = dailyCall[1] as string[];
+    const since = args[args.indexOf("--since") + 1];
+    expect(since).toBe("20260311");
+    expect(readPersistedConfig().ccusage_v20_migration_completed_at).toBeUndefined();
+  });
+
+  it("marks the migration complete after explicit 30-day backfill", async () => {
+    seedConfig({
+      ccusage_v20_migration_completed_at: undefined,
+      last_push_date: "2026-03-01",
+    });
+    mockSuccessfulSubmit();
+
+    await pushCommand({ days: 30 });
+
     const dailyCall = execFileMock.mock.calls.find(([, args]) =>
       Array.isArray(args) && args.includes("daily"),
     )!;
diff --git a/packages/cli/__tests__/resolve-push-date-range.test.ts b/packages/cli/__tests__/resolve-push-date-range.test.ts
index 240dd370..7aa609bc 100644
--- a/packages/cli/__tests__/resolve-push-date-range.test.ts
+++ b/packages/cli/__tests__/resolve-push-date-range.test.ts
@@ -86,19 +86,20 @@ describe("resolvePushDateRange", () => {
   });
 
   describe("ccusage migration branch", () => {
-    it("backfills the full 30-day window when ccusage migration runs", () => {
+    it("does not expand a normal sync to 30 days when the migration marker is missing", () => {
       const r = resolvePushDateRange({
         today: dateAt("2026-05-04"),
         options: {},
+        lastPushDate: "2026-05-01",
         shouldRunMigrationBackfill: true,
       });
       expect(r.ok).toBe(true);
       if (!r.ok) return;
-      expect(isoDay(r.since)).toBe("2026-04-05"); // today - 29 days
+      expect(isoDay(r.since)).toBe("2026-05-01");
       expect(isoDay(r.until)).toBe("2026-05-04");
     });
 
-    it("ignores --days when ccusage migration runs", () => {
+    it("respects --days when the migration marker is missing", () => {
       const r = resolvePushDateRange({
         today: dateAt("2026-05-04"),
         options: { days: 5 },
@@ -106,7 +107,7 @@ describe("resolvePushDateRange", () => {
       });
       expect(r.ok).toBe(true);
       if (!r.ok) return;
-      expect(isoDay(r.since)).toBe("2026-04-05"); // 30-day backfill, not 5
+      expect(isoDay(r.since)).toBe("2026-04-30");
     });
   });
 
diff --git a/packages/cli/src/commands/login.ts b/packages/cli/src/commands/login.ts
index 710dd74e..0d216107 100644
--- a/packages/cli/src/commands/login.ts
+++ b/packages/cli/src/commands/login.ts
@@ -80,6 +80,7 @@ export async function loginCommand(apiUrlOverride?: string): Promise<void> {
 
   openBrowser(verify_url);
   console.log(`\nIf the browser didn't open, visit:\n  ${verify_url}\n`);
+  console.log("Confirm in the browser, then keep this terminal open — Straude will continue syncing here.");
   process.stdout.write("Waiting for confirmation...");
 
   const startTime = Date.now();
diff --git a/packages/cli/src/commands/push.ts b/packages/cli/src/commands/push.ts
index 938708d5..0b184c6d 100755
--- a/packages/cli/src/commands/push.ts
+++ b/packages/cli/src/commands/push.ts
@@ -1,5 +1,6 @@
 import { createHash, randomUUID } from "node:crypto";
 import { hostname } from "node:os";
+import { performance } from "node:perf_hooks";
 import { loadConfig, updateLastPushDate, saveConfig } from "../lib/auth.js";
 import type { StraudeConfig } from "../lib/auth.js";
 import { loginCommand } from "./login.js";
@@ -7,6 +8,7 @@ import { apiRequest } from "../lib/api.js";
 import {
   CCUSAGE_CLAUDE_COLLECTOR,
   CCUSAGE_CODEX_COLLECTOR,
+  CCUSAGE_DEFAULT_PRICING_MODE,
   collectCcusageUsageAsync,
 } from "../lib/ccusage.js";
 import type { CcusageDailyEntry, CcusageCollectorMeta } from "../lib/ccusage.js";
@@ -15,7 +17,12 @@ import { Spinner } from "../lib/spinner.js";
 import type { DashboardData as DashboardResponse } from "../components/PushSummary.js";
 import { posthog } from "../lib/posthog.js";
 import { getDistinctId } from "../lib/machine-id.js";
-import { errorMessage, reportUsagePushFailed } from "../lib/telemetry.js";
+import {
+  TELEMETRY_SHUTDOWN_TIMEOUT_MS,
+  errorMessage,
+  reportUsagePushFailed,
+  shutdownTelemetryWithTimeout,
+} from "../lib/telemetry.js";
 
 interface UsageSubmitRequest {
   entries: Array<{
@@ -53,6 +60,28 @@ interface PushOptions {
   days?: number;
   dryRun?: boolean;
   timeoutMs?: number;
+  dashboardTimeoutMs?: number;
+}
+
+const DASHBOARD_TIMEOUT_MS = 1_500;
+
+type PushRangeMode =
+  | "explicit_date"
+  | "explicit_days"
+  | "incremental"
+  | "first_sync";
+
+interface PushTimings {
+  auth_ms?: number;
+  collection_ms?: number;
+  submit_ms?: number;
+  dashboard_ms?: number;
+}
+
+interface DashboardRenderResult {
+  rendered: boolean;
+  timedOut: boolean;
+  durationMs: number;
 }
 
 function formatDate(d: Date): string {
@@ -102,7 +131,7 @@ export function isWithinBackfillWindow(dateStr: string): boolean {
 }
 
 export type DateRangeResolution =
-  | { ok: true; since: Date; until: Date }
+  | { ok: true; since: Date; until: Date; mode: PushRangeMode }
   | { ok: false; error: string };
 
 /**
@@ -117,7 +146,7 @@ export function resolvePushDateRange(args: {
   lastPushDate?: string;
   shouldRunMigrationBackfill: boolean;
 }): DateRangeResolution {
-  const { today, options, lastPushDate, shouldRunMigrationBackfill } = args;
+  const { today, options, lastPushDate } = args;
   const todayStr = formatDate(today);
 
   if (options.date) {
@@ -128,40 +157,34 @@ export function resolvePushDateRange(args: {
     if (target > today) {
       return { ok: false, error: "Cannot push usage for a future date." };
     }
-    return { ok: true, since: target, until: target };
-  }
-
-  if (shouldRunMigrationBackfill) {
-    const since = new Date(today);
-    since.setDate(since.getDate() - MAX_BACKFILL_DAYS + 1);
-    return { ok: true, since, until: today };
+    return { ok: true, since: target, until: target, mode: "explicit_date" };
   }
 
   if (options.days) {
     const days = Math.min(options.days, MAX_BACKFILL_DAYS);
     const since = new Date(today);
     since.setDate(since.getDate() - days + 1);
-    return { ok: true, since, until: today };
+    return { ok: true, since, until: today, mode: "explicit_days" };
   }
 
   if (lastPushDate) {
     if (lastPushDate >= todayStr) {
-      return { ok: true, since: new Date(today), until: new Date(today) };
+      return { ok: true, since: new Date(today), until: new Date(today), mode: "incremental" };
     }
     const gap = daysBetweenStrings(lastPushDate, todayStr);
     if (gap > DEFAULT_SYNC_DAYS) {
       const since = new Date(today);
       since.setDate(since.getDate() - DEFAULT_SYNC_DAYS + 1);
-      return { ok: true, since, until: today };
+      return { ok: true, since, until: today, mode: "incremental" };
     }
-    return { ok: true, since: parseDate(lastPushDate), until: today };
+    return { ok: true, since: parseDate(lastPushDate), until: today, mode: "incremental" };
   }
 
   // Never pushed before — backfill last 3 days by default
   const FIRST_RUN_BACKFILL_DAYS = 3;
   const since = new Date(today);
   since.setDate(since.getDate() - FIRST_RUN_BACKFILL_DAYS + 1);
-  return { ok: true, since, until: today };
+  return { ok: true, since, until: today, mode: "first_sync" };
 }
 
 function formatTokens(n: number): string {
@@ -174,12 +197,147 @@ function formatCost(n: number): string {
   return `$${n.toFixed(2)}`;
 }
 
+function elapsedMs(start: number): number {
+  return Math.round(performance.now() - start);
+}
+
+function inclusiveDayCount(since: Date, until: Date): number {
+  return daysBetween(since, until) + 1;
+}
+
+function pluralize(count: number, singular: string, plural = `${singular}s`): string {
+  return count === 1 ? singular : plural;
+}
+
+function pushTelemetryProperties(args: {
+  timings: PushTimings;
+  totalStartedAt: number;
+  rangeMode: PushRangeMode;
+  firstRun: boolean;
+  authFlowStarted: boolean;
+  migrationPending: boolean;
+  fullBackfillCompleted: boolean;
+  pricingMode?: CcusageCollectorMeta["pricing_mode"];
+  ccusageVersion?: string;
+  ccusageAgents?: CcusageCollectorMeta["ccusage_agents"];
+  dashboardRendered?: boolean;
+  dashboardTimedOut?: boolean;
+}): Record<string, string | number | boolean | string[] | undefined> {
+  return {
+    first_run: args.firstRun,
+    auth_flow_started: args.authFlowStarted,
+    backfill_mode: args.rangeMode,
+    migration_backfill_pending: args.migrationPending,
+    full_backfill_completed: args.fullBackfillCompleted,
+    pricing_mode: args.pricingMode,
+    ccusage_version: args.ccusageVersion,
+    ccusage_agents: args.ccusageAgents,
+    dashboard_rendered: args.dashboardRendered,
+    dashboard_timed_out: args.dashboardTimedOut,
+    telemetry_shutdown_timeout_ms: TELEMETRY_SHUTDOWN_TIMEOUT_MS,
+    total_ms: elapsedMs(args.totalStartedAt),
+    ...args.timings,
+  };
+}
+
+async function renderDashboardWithTimeout(
+  config: StraudeConfig,
+  results: UsageSubmitResponse["results"] | undefined,
+  timeoutMs = DASHBOARD_TIMEOUT_MS,
+): Promise<DashboardRenderResult> {
+  const startedAt = performance.now();
+  const abortController = new AbortController();
+  let timer: NodeJS.Timeout | undefined;
+  let unmountDashboard: (() => void) | undefined;
+
+  const dashboardTask = (async () => {
+    const dashboard = await apiRequest<DashboardResponse>(config, "/api/cli/dashboard", {
+      signal: abortController.signal,
+    });
+    const { render } = await import("ink");
+    const { createElement } = await import("react");
+    const { PushSummary } = await import("../components/PushSummary.js");
+
+    const { waitUntilExit, unmount } = render(
+      createElement(PushSummary, {
+        dashboard,
+        results,
+      }),
+    );
+    unmountDashboard = unmount;
+    await waitUntilExit();
+  })();
+
+  const timeoutTask = new Promise<"timeout">((resolve) => {
+    timer = setTimeout(() => resolve("timeout"), timeoutMs);
+    timer.unref?.();
+  });
+
+  try {
+    const winner = await Promise.race([
+      dashboardTask.then(() => "rendered" as const).catch(() => "failed" as const),
+      timeoutTask,
+    ]);
+
+    if (winner === "timeout") {
+      abortController.abort();
+      unmountDashboard?.();
+    }
+
+    return {
+      rendered: winner === "rendered",
+      timedOut: winner === "timeout",
+      durationMs: elapsedMs(startedAt),
+    };
+  } finally {
+    if (timer) clearTimeout(timer);
+    dashboardTask.catch(() => {
+      // The command has already moved on after timeout/failure.
+    });
+  }
+}
+
+function printSubmitSuccess(args: {
+  entries: CcusageDailyEntry[];
+  results: UsageSubmitResponse["results"];
+  totalCost: number;
+  totalTokens: number;
+  migrationPending: boolean;
+  fullBackfillCompleted: boolean;
+}): void {
+  const { entries, results, totalCost, totalTokens, migrationPending, fullBackfillCompleted } = args;
+  const created = results.filter((r) => r.action === "created").length;
+  const updated = results.filter((r) => r.action === "updated").length;
+  const primaryResult = results[0];
+
+  console.log("");
+  console.log(
+    `Synced ${entries.length} ${pluralize(entries.length, "day")} (${formatCost(totalCost)}, ${formatTokens(totalTokens)} tokens).`,
+  );
+  if (created > 0 || updated > 0) {
+    console.log(`Posted ${created}, updated ${updated}.`);
+  }
+  if (primaryResult) {
+    console.log(`View it: ${primaryResult.post_url}${primaryResult.post_url.includes("?") ? "&" : "?"}edit=1`);
+  }
+  if (migrationPending && !fullBackfillCompleted) {
+    console.log(`Optional: backfill your last ${MAX_BACKFILL_DAYS} days with \`straude push --days ${MAX_BACKFILL_DAYS}\`.`);
+  }
+}
+
 export async function pushCommand(options: PushOptions, apiUrlOverride?: string): Promise<void> {
+  const totalStartedAt = performance.now();
+  const timings: PushTimings = {};
+  let authFlowStarted = false;
   let config = loadConfig();
 
   // Login if needed
   if (!config) {
+    authFlowStarted = true;
+    const authStartedAt = performance.now();
+    console.log("After authentication, Straude will continue into your first sync here.");
     await loginCommand(apiUrlOverride);
+    timings.auth_ms = elapsedMs(authStartedAt);
     config = loadConfig();
     if (!config) {
       console.error("Login failed.");
@@ -200,15 +358,14 @@ export async function pushCommand(options: PushOptions, apiUrlOverride?: string)
   }
 
   const today = new Date();
-  // Trigger a one-time 30-day backfill after migrating both Claude and Codex
-  // ingestion to ccusage v20. Explicit --date pushes stay exact.
-  const shouldRunMigrationBackfill = !options.date && !config.ccusage_v20_migration_completed_at;
+  const migrationPending = !config.ccusage_v20_migration_completed_at;
+  const firstRun = !config.last_push_date;
 
   const resolution = resolvePushDateRange({
     today,
     options: { date: options.date, days: options.days },
     lastPushDate: config.last_push_date,
-    shouldRunMigrationBackfill,
+    shouldRunMigrationBackfill: migrationPending,
   });
   if (!resolution.ok) {
     console.error(resolution.error);
@@ -216,6 +373,8 @@ export async function pushCommand(options: PushOptions, apiUrlOverride?: string)
   }
   const sinceDate = resolution.since;
   const untilDate = resolution.until;
+  const rangeMode = resolution.mode;
+  const fullBackfillRequested = inclusiveDayCount(sinceDate, untilDate) >= MAX_BACKFILL_DAYS;
 
   const sinceStr = formatDateCompact(sinceDate);
   const untilStr = formatDateCompact(untilDate);
@@ -229,16 +388,31 @@ export async function pushCommand(options: PushOptions, apiUrlOverride?: string)
   const scanSpinner = new Spinner("scan");
   scanSpinner.start();
   let ccusage: Awaited<ReturnType<typeof collectCcusageUsageAsync>>;
+  const collectionStartedAt = performance.now();
   try {
-    ccusage = await collectCcusageUsageAsync(sinceStr, untilStr, options.timeoutMs);
+    ccusage = await collectCcusageUsageAsync(sinceStr, untilStr, options.timeoutMs, {
+      pricingMode: CCUSAGE_DEFAULT_PRICING_MODE,
+    });
+    timings.collection_ms = elapsedMs(collectionStartedAt);
     scanSpinner.stop();
   } catch (err) {
+    timings.collection_ms = elapsedMs(collectionStartedAt);
     scanSpinner.stop();
     reportUsagePushFailed(config, err, {
       command: "push",
       stage: "scan",
+      ...pushTelemetryProperties({
+        timings,
+        totalStartedAt,
+        rangeMode,
+        firstRun,
+        authFlowStarted,
+        migrationPending,
+        fullBackfillCompleted: false,
+        pricingMode: CCUSAGE_DEFAULT_PRICING_MODE,
+      }),
     });
-    await posthog._shutdown();
+    await shutdownTelemetryWithTimeout();
     console.error(`\nFailed to collect usage: ${errorMessage(err)}`);
     process.exit(1);
   }
@@ -314,23 +488,51 @@ export async function pushCommand(options: PushOptions, apiUrlOverride?: string)
   const syncSpinner = new Spinner("sync");
   syncSpinner.start();
   let response: UsageSubmitResponse;
+  const submitStartedAt = performance.now();
   try {
     response = await apiRequest<UsageSubmitResponse>(config, "/api/usage/submit", {
       method: "POST",
       body: JSON.stringify(body),
     });
+    timings.submit_ms = elapsedMs(submitStartedAt);
     syncSpinner.stop();
   } catch (err) {
+    timings.submit_ms = elapsedMs(submitStartedAt);
     syncSpinner.stop();
     reportUsagePushFailed(config, err, {
       command: "push",
       stage: "submit",
+      ...pushTelemetryProperties({
+        timings,
+        totalStartedAt,
+        rangeMode,
+        firstRun,
+        authFlowStarted,
+        migrationPending,
+        fullBackfillCompleted: false,
+        pricingMode: ccusage.collector.pricing_mode,
+        ccusageVersion: ccusage.version,
+        ccusageAgents: ccusage.agents,
+      }),
     });
-    await posthog._shutdown();
+    await shutdownTelemetryWithTimeout();
     console.error(`\nFailed to submit: ${errorMessage(err)}`);
     process.exit(1);
   }
 
+  const totalCost = entries.reduce((sum, e) => sum + e.costUSD, 0);
+  const totalTokens = entries.reduce((sum, e) => sum + e.totalTokens, 0);
+  const fullBackfillCompleted = migrationPending && fullBackfillRequested;
+
+  printSubmitSuccess({
+    entries,
+    results: response.results,
+    totalCost,
+    totalTokens,
+    migrationPending,
+    fullBackfillCompleted,
+  });
+
   // Show per-entry delta feedback before dashboard
   for (const result of response.results) {
     if (result.action === "updated" && result.previous_cost != null && result.daily_total != null) {
@@ -352,7 +554,7 @@ export async function pushCommand(options: PushOptions, apiUrlOverride?: string)
     (latest, e) => (e.date > latest ? e.date : latest),
     entries[0]!.date,
   );
-  if (shouldRunMigrationBackfill) {
+  if (fullBackfillCompleted) {
     const stamp = new Date().toISOString();
     config.ccusage_v20_migration_completed_at = stamp;
     config.last_push_date = latestDate;
@@ -361,10 +563,19 @@ export async function pushCommand(options: PushOptions, apiUrlOverride?: string)
     updateLastPushDate(latestDate);
   }
 
-  const totalCost = entries.reduce((sum, e) => sum + e.costUSD, 0);
-  const totalTokens = entries.reduce((sum, e) => sum + e.totalTokens, 0);
   const datesCreated = response.results.filter((r) => r.action === "created").length;
   const datesUpdated = response.results.filter((r) => r.action === "updated").length;
+
+  const dashboard = await renderDashboardWithTimeout(
+    config,
+    response.results,
+    options.dashboardTimeoutMs,
+  );
+  timings.dashboard_ms = dashboard.durationMs;
+  if (dashboard.timedOut) {
+    console.log(`Dashboard took too long to load. Run \`straude status\` anytime for the full view.`);
+  }
+
   posthog.capture({
     distinctId: getDistinctId(config),
     event: "usage_pushed",
@@ -375,31 +586,20 @@ export async function pushCommand(options: PushOptions, apiUrlOverride?: string)
       total_cost_usd: Math.round(totalCost * 100) / 100,
       total_tokens: totalTokens,
       dry_run: false,
-      ccusage_version: ccusage.version,
-      ccusage_agents: ccusage.agents,
+      ...pushTelemetryProperties({
+        timings,
+        totalStartedAt,
+        rangeMode,
+        firstRun,
+        authFlowStarted,
+        migrationPending,
+        fullBackfillCompleted,
+        pricingMode: ccusage.collector.pricing_mode,
+        ccusageVersion: ccusage.version,
+        ccusageAgents: ccusage.agents,
+        dashboardRendered: dashboard.rendered,
+        dashboardTimedOut: dashboard.timedOut,
+      }),
     },
   });
-
-  // Render visual dashboard
-  try {
-    const dashboard = await apiRequest<DashboardResponse>(config, "/api/cli/dashboard");
-    const { render } = await import("ink");
-    const { createElement } = await import("react");
-    const { PushSummary } = await import("../components/PushSummary.js");
-
-    const { waitUntilExit } = render(
-      createElement(PushSummary, {
-        dashboard,
-        results: response.results,
-      }),
-    );
-    await waitUntilExit();
-  } catch {
-    // Fallback: if dashboard fetch or Ink render fails, show plain text
-    console.log("");
-    for (const result of response.results) {
-      const verb = result.action === "updated" ? "Updated" : "Posted";
-      console.log(`${verb} ${result.date}: ${result.post_url}?edit=1`);
-    }
-  }
 }
diff --git a/packages/cli/src/index.ts b/packages/cli/src/index.ts
index efcc7c0b..08327b49 100755
--- a/packages/cli/src/index.ts
+++ b/packages/cli/src/index.ts
@@ -16,6 +16,7 @@ import {
   isPushInvocation,
   reportCliException,
   reportUsagePushFailed,
+  shutdownTelemetryWithTimeout,
 } from "./lib/telemetry.js";
 
 // On 401, transparently re-run the browser login flow and let api.ts retry
@@ -228,21 +229,6 @@ async function main(): Promise<void> {
 
 let exitCode = 0;
 
-async function shutdownTelemetryWithTimeout(): Promise<void> {
-  let timer: NodeJS.Timeout | undefined;
-  try {
-    await Promise.race([
-      posthog._shutdown(),
-      new Promise<void>((resolve) => {
-        timer = setTimeout(resolve, 500);
-        timer.unref?.();
-      }),
-    ]);
-  } finally {
-    if (timer) clearTimeout(timer);
-  }
-}
-
 main()
   .catch((err: unknown) => {
     exitCode = 1;
diff --git a/packages/cli/src/lib/ccusage.ts b/packages/cli/src/lib/ccusage.ts
index 0720bfae..bbf32445 100644
--- a/packages/cli/src/lib/ccusage.ts
+++ b/packages/cli/src/lib/ccusage.ts
@@ -6,7 +6,12 @@ import { DEFAULT_SUBPROCESS_TIMEOUT_MS } from "../config.js";
 export const CCUSAGE_MIN_VERSION = "20.0.5";
 export const CCUSAGE_CLAUDE_COLLECTOR = "ccusage-claude-v20" as const;
 export const CCUSAGE_CODEX_COLLECTOR = "ccusage-codex-v20" as const;
-export const CCUSAGE_PRICING_MODE = "online" as const;
+export const CCUSAGE_DEFAULT_PRICING_MODE = "offline" as const;
+export const CCUSAGE_FALLBACK_PRICING_MODE = "online" as const;
+
+export type CcusagePricingMode =
+  | typeof CCUSAGE_DEFAULT_PRICING_MODE
+  | typeof CCUSAGE_FALLBACK_PRICING_MODE;
 
 const SUPPORTED_AGENTS = ["claude", "codex"] as const;
 const MAX_CCUSAGE_BUFFER = 20 * 1024 * 1024;
@@ -63,7 +68,7 @@ export interface CcusageCollectorMeta {
   codex?: typeof CCUSAGE_CODEX_COLLECTOR;
   ccusage_version: string;
   ccusage_agents: CcusageAgent[];
-  pricing_mode: typeof CCUSAGE_PRICING_MODE;
+  pricing_mode: CcusagePricingMode;
 }
 
 export interface CcusageOutput {
@@ -87,6 +92,12 @@ export interface CcusageOutput {
 interface ParseOptions {
   version?: string;
   stderr?: string;
+  pricingMode?: CcusagePricingMode;
+}
+
+interface CollectOptions {
+  pricingMode?: CcusagePricingMode;
+  allowOnlineFallback?: boolean;
 }
 
 interface CcusageRawEntry {
@@ -253,10 +264,14 @@ function execCcusageAsync(args: string[], timeoutMs?: number): Promise<ExecResul
   });
 }
 
-function rejectMissingPricing(stderr: string): void {
-  if (MISSING_PRICING_RE.test(stderr)) {
+function hasMissingPricingWarning(stderr: string): boolean {
+  return MISSING_PRICING_RE.test(stderr);
+}
+
+function rejectMissingPricing(stderr: string, pricingMode: CcusagePricingMode): void {
+  if (hasMissingPricingWarning(stderr)) {
     throw new Error(
-      `ccusage did not produce fully priced online cost data: ${stderr.trim()}`,
+      `ccusage did not produce fully priced ${pricingMode} cost data: ${stderr.trim()}`,
     );
   }
 }
@@ -334,11 +349,15 @@ function normalizeRawDaily(raw: unknown): CcusageRawEntry[] {
   throw new Error("Unexpected ccusage output format: expected a JSON object with a daily array.");
 }
 
-function collectorForAgents(agents: CcusageAgent[], version: string): CcusageCollectorMeta {
+function collectorForAgents(
+  agents: CcusageAgent[],
+  version: string,
+  pricingMode: CcusagePricingMode,
+): CcusageCollectorMeta {
   const collector: CcusageCollectorMeta = {
     ccusage_version: version,
     ccusage_agents: agents,
-    pricing_mode: CCUSAGE_PRICING_MODE,
+    pricing_mode: pricingMode,
   };
   if (agents.includes("claude")) collector.claude = CCUSAGE_CLAUDE_COLLECTOR;
   if (agents.includes("codex")) collector.codex = CCUSAGE_CODEX_COLLECTOR;
@@ -429,34 +448,72 @@ export function parseCcusageOutput(raw: string, options: ParseOptions = {}): Ccu
     SUPPORTED_AGENTS.indexOf(a) - SUPPORTED_AGENTS.indexOf(b),
   );
   const version = options.version ?? "unknown";
+  const pricingMode = options.pricingMode ?? CCUSAGE_DEFAULT_PRICING_MODE;
 
   return {
     data,
     summary: summarizeEntries(data),
     agents,
-    collector: collectorForAgents(agents, version),
+    collector: collectorForAgents(agents, version, pricingMode),
     version,
     raw,
     stderr: options.stderr ?? "",
   };
 }
 
+function argsForPricingMode(
+  sinceDate: string,
+  untilDate: string,
+  pricingMode: CcusagePricingMode,
+): string[] {
+  return [
+    "daily",
+    "--json",
+    "--since",
+    sinceDate,
+    "--until",
+    untilDate,
+    pricingMode === "offline" ? "--offline" : "--no-offline",
+  ];
+}
+
 export async function collectCcusageUsageAsync(
   sinceDate: string,
   untilDate: string,
   timeoutMs?: number,
+  options: CollectOptions = {},
 ): Promise<CcusageOutput> {
   const { version } = resolveInstalledCcusageCommand();
   assertSupportedVersion(version);
+  const pricingMode = options.pricingMode ?? CCUSAGE_DEFAULT_PRICING_MODE;
 
   const result = await execCcusageAsync(
-    ["daily", "--json", "--since", sinceDate, "--until", untilDate, "--no-offline"],
+    argsForPricingMode(sinceDate, untilDate, pricingMode),
     timeoutMs,
   );
-  rejectMissingPricing(result.stderr);
+  if (
+    pricingMode === "offline" &&
+    options.allowOnlineFallback !== false &&
+    hasMissingPricingWarning(result.stderr)
+  ) {
+    const fallback = await execCcusageAsync(
+      argsForPricingMode(sinceDate, untilDate, CCUSAGE_FALLBACK_PRICING_MODE),
+      timeoutMs,
+    );
+    rejectMissingPricing(fallback.stderr, CCUSAGE_FALLBACK_PRICING_MODE);
+
+    return parseCcusageOutput(fallback.stdout, {
+      version,
+      stderr: fallback.stderr,
+      pricingMode: CCUSAGE_FALLBACK_PRICING_MODE,
+    });
+  }
+
+  rejectMissingPricing(result.stderr, pricingMode);
 
   return parseCcusageOutput(result.stdout, {
     version,
     stderr: result.stderr,
+    pricingMode,
   });
 }
diff --git a/packages/cli/src/lib/telemetry.ts b/packages/cli/src/lib/telemetry.ts
index 7c439e8f..b6806fa1 100644
--- a/packages/cli/src/lib/telemetry.ts
+++ b/packages/cli/src/lib/telemetry.ts
@@ -1,8 +1,11 @@
+import { performance } from "node:perf_hooks";
 import type { StraudeConfig } from "./auth.js";
 import { getDistinctId } from "./machine-id.js";
 import { posthog } from "./posthog.js";
 
-type TelemetryProperties = Record<string, string | number | boolean | null | undefined>;
+type TelemetryProperties = Record<string, string | number | boolean | string[] | null | undefined>;
+
+export const TELEMETRY_SHUTDOWN_TIMEOUT_MS = 150;
 
 export function isPushInvocation(command: string | null): boolean {
   return command === null || command === "push";
@@ -46,3 +49,22 @@ export function reportCliException(
 ): void {
   posthog.captureException(error, getDistinctId(config), properties);
 }
+
+export async function shutdownTelemetryWithTimeout(
+  timeoutMs = TELEMETRY_SHUTDOWN_TIMEOUT_MS,
+): Promise<number> {
+  const startedAt = performance.now();
+  let timer: NodeJS.Timeout | undefined;
+  try {
+    await Promise.race([
+      posthog._shutdown(timeoutMs),
+      new Promise<void>((resolve) => {
+        timer = setTimeout(resolve, timeoutMs);
+        timer.unref?.();
+      }),
+    ]);
+  } finally {
+    if (timer) clearTimeout(timer);
+  }
+  return Math.round(performance.now() - startedAt);
+}

From 4ead8e6239e0b003a9fedfb008030758010eeb4f Mon Sep 17 00:00:00 2001
From: Oscar Hong <oscar.hong2015@gmail.com>
Date: Fri, 3 Jul 2026 00:31:26 +0800
Subject: [PATCH 10/15] Clarify first-sync app activation states

---
 .../__tests__/components/FeedList.test.tsx    | 63 ++++++++++++-
 .../flows/activation-contract.test.ts         |  2 +
 apps/web/app/(app)/u/[username]/page.tsx      | 91 +++++++++++--------
 .../web/app/api/analytics/activation/route.ts |  2 +
 .../app/activation/FirstSyncCommandCard.tsx   | 83 +++++++++++++++++
 .../app/activation/GuestSignupCta.tsx         | 43 +++++++++
 apps/web/components/app/feed/ActivityCard.tsx |  9 +-
 apps/web/components/app/feed/FeedList.tsx     | 43 +++++----
 .../web/components/app/shared/GuestHeader.tsx |  4 +-
 apps/web/lib/analytics/activation.ts          |  3 +
 10 files changed, 284 insertions(+), 59 deletions(-)
 create mode 100644 apps/web/components/app/activation/FirstSyncCommandCard.tsx
 create mode 100644 apps/web/components/app/activation/GuestSignupCta.tsx

diff --git a/apps/web/__tests__/components/FeedList.test.tsx b/apps/web/__tests__/components/FeedList.test.tsx
index 0cca75cb..7cd7b6c3 100644
--- a/apps/web/__tests__/components/FeedList.test.tsx
+++ b/apps/web/__tests__/components/FeedList.test.tsx
@@ -1,4 +1,4 @@
-import { act, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { act, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { FeedList } from "@/components/app/feed/FeedList";
 import type { Post } from "@/types";
@@ -15,6 +15,12 @@ vi.mock("@/components/app/feed/PendingPostsNudge", () => ({
   ),
 }));
 
+vi.mock("@/lib/analytics/client", () => ({
+  trackActivationEvent: vi.fn(),
+}));
+
+import { trackActivationEvent } from "@/lib/analytics/client";
+
 let intersectionCallback:
   | ((entries: Array<{ isIntersecting: boolean }>) => void)
   | null = null;
@@ -68,6 +74,12 @@ function makePost(id: string, overrides: Partial<Post> = {}): Post {
 describe("FeedList", () => {
   beforeEach(() => {
     intersectionCallback = null;
+    Object.defineProperty(navigator, "clipboard", {
+      configurable: true,
+      value: {
+        writeText: vi.fn().mockResolvedValue(undefined),
+      },
+    });
     vi.stubGlobal("IntersectionObserver", MockIntersectionObserver);
     vi.stubGlobal(
       "fetch",
@@ -157,4 +169,53 @@ describe("FeedList", () => {
     );
     expect(request.searchParams.get("limit")).toBe("20");
   });
+
+  it("shows a copyable first-sync command for the signed-in empty sessions feed", async () => {
+    render(
+      <FeedList
+        initialPosts={[]}
+        userId="user-1"
+        feedType="mine"
+      />,
+    );
+
+    const emptyState = screen.getByRole("region", { name: /sync your first session/i });
+    expect(within(emptyState).getByText("Sync your first session")).toBeInTheDocument();
+    expect(within(emptyState).getByText("npx straude@latest")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: /copy first sync command/i }));
+
+    await waitFor(() => {
+      expect(navigator.clipboard.writeText).toHaveBeenCalledWith("npx straude@latest");
+    });
+    expect(trackActivationEvent).toHaveBeenCalledWith("sync_command_copied", expect.objectContaining({
+      surface: "empty_state",
+      cta_location: "feed_empty_state",
+      command: "npx straude@latest",
+    }));
+  });
+
+  it("shows a contextual signup CTA after guest feed content", () => {
+    render(
+      <FeedList
+        initialPosts={[
+          makePost("guest-1", { title: "First public session" }),
+          makePost("guest-2", { title: "Second public session" }),
+        ]}
+        userId={null}
+      />,
+    );
+
+    const cta = screen.getByRole("link", { name: /start your streak/i });
+    expect(cta).toHaveAttribute("href", "/signup");
+
+    cta.addEventListener("click", (event) => event.preventDefault());
+    fireEvent.click(cta);
+
+    expect(trackActivationEvent).toHaveBeenCalledWith("guest_signup_cta_clicked", expect.objectContaining({
+      surface: "feed",
+      cta_location: "feed_after_posts",
+      destination: "/signup",
+    }));
+  });
 });
diff --git a/apps/web/__tests__/flows/activation-contract.test.ts b/apps/web/__tests__/flows/activation-contract.test.ts
index bded1d5d..887bba8a 100644
--- a/apps/web/__tests__/flows/activation-contract.test.ts
+++ b/apps/web/__tests__/flows/activation-contract.test.ts
@@ -9,10 +9,12 @@ describe("activation funnel contract", () => {
   it("keeps the canonical event names stable", () => {
     expect(ACTIVATION_EVENTS).toEqual([
       "landing_primary_cta_clicked",
+      "guest_signup_cta_clicked",
       "signup_started",
       "signup_completed",
       "onboarding_profile_started",
       "sync_command_copied",
+      "first_sync_nudge_clicked",
       "usage_submit_succeeded",
       "first_sync_confirmed",
       "activation_completed",
diff --git a/apps/web/app/(app)/u/[username]/page.tsx b/apps/web/app/(app)/u/[username]/page.tsx
index 52119c25..f8339b4a 100644
--- a/apps/web/app/(app)/u/[username]/page.tsx
+++ b/apps/web/app/(app)/u/[username]/page.tsx
@@ -16,6 +16,8 @@ import { FeedList } from "@/components/app/feed/FeedList";
 import { FollowButton } from "@/components/app/profile/FollowButton";
 import { InviteButton } from "@/components/app/profile/InviteButton";
 import { CrewPopover, type CrewMember } from "@/components/app/profile/CrewPopover";
+import { FirstSyncCommandCard } from "@/components/app/activation/FirstSyncCommandCard";
+import { GuestSignupCta } from "@/components/app/activation/GuestSignupCta";
 import { formatCurrency, formatTokens } from "@/lib/utils/format";
 import { enrichFeedPosts, getFeedCursor } from "@/lib/feed-enrichment";
 import { firstRelation } from "@/lib/utils/first-relation";
@@ -185,6 +187,7 @@ export default async function ProfilePage({
 
   const totalSpend = totalSpendRows?.reduce((s, r) => s + Number(r.cost_usd), 0) ?? 0;
   const lifetimeOutputTokens = totalSpendRows?.reduce((s, r) => s + Number(r.output_tokens), 0) ?? 0;
+  const hasUsage = (totalSpendRows?.length ?? 0) > 0;
 
   const postDateSet = new Set(
     ((postDates ?? []) as PostDateRow[])
@@ -326,48 +329,61 @@ export default async function ProfilePage({
           </div>
         </div>
 
-        {/* Stats row */}
-        <div className="mt-6 grid grid-cols-2 gap-4 sm:grid-cols-4">
-          <div>
-            <p className="text-[0.7rem] uppercase tracking-widest text-muted">Streak</p>
-            <p className="inline-flex items-center gap-1 font-[family-name:var(--font-mono)] text-lg font-medium tabular-nums">
-              <Flame size={16} className="text-accent" />
-              {streak ?? 0} days
-            </p>
-          </div>
-          <div>
-            <p className="text-[0.7rem] uppercase tracking-widest text-muted">Output Tokens</p>
-            <p className="inline-flex items-center gap-1 font-[family-name:var(--font-mono)] text-lg font-medium tabular-nums">
-              <Zap size={16} className="text-accent" />
-              {formatTokens(lifetimeOutputTokens)}
-            </p>
-          </div>
-          <div>
-            <p className="text-[0.7rem] uppercase tracking-widest text-muted">Total Spend</p>
-            <p className="font-[family-name:var(--font-mono)] text-lg font-medium tabular-nums text-accent">
-              ${formatCurrency(totalSpend)}
-            </p>
+        {isOwn && !hasUsage ? (
+          <div className="mt-6">
+            <FirstSyncCommandCard surface="profile" />
           </div>
-          {(crewMembers ?? []).length > 0 && (
-            <div className="min-w-0">
-              <CrewPopover
-                count={(crewMembers ?? []).length}
-                members={(crewMembers ?? []) as CrewMember[]}
-              />
+        ) : (
+          <>
+            {/* Stats row */}
+            <div className="mt-6 grid grid-cols-2 gap-4 sm:grid-cols-4">
+              <div>
+                <p className="text-[0.7rem] uppercase tracking-widest text-muted">Streak</p>
+                <p className="inline-flex items-center gap-1 font-[family-name:var(--font-mono)] text-lg font-medium tabular-nums">
+                  <Flame size={16} className="text-accent" />
+                  {streak ?? 0} days
+                </p>
+              </div>
+              <div>
+                <p className="text-[0.7rem] uppercase tracking-widest text-muted">Output Tokens</p>
+                <p className="inline-flex items-center gap-1 font-[family-name:var(--font-mono)] text-lg font-medium tabular-nums">
+                  <Zap size={16} className="text-accent" />
+                  {formatTokens(lifetimeOutputTokens)}
+                </p>
+              </div>
+              <div>
+                <p className="text-[0.7rem] uppercase tracking-widest text-muted">Total Spend</p>
+                <p className="font-[family-name:var(--font-mono)] text-lg font-medium tabular-nums text-accent">
+                  ${formatCurrency(totalSpend)}
+                </p>
+              </div>
+              {(crewMembers ?? []).length > 0 && (
+                <div className="min-w-0">
+                  <CrewPopover
+                    count={(crewMembers ?? []).length}
+                    members={(crewMembers ?? []) as CrewMember[]}
+                  />
+                </div>
+              )}
             </div>
-          )}
-        </div>
 
-        {/* Achievement badges */}
-        {(achievements && achievements.length > 0 || isOwn) && (
-          <div className="mt-6">
-            <p className="mb-2 text-[0.7rem] uppercase tracking-widest text-muted">Achievements</p>
-            <AchievementBadges earned={achievements ?? []} showLocked={isOwn} />
-          </div>
+            {/* Achievement badges */}
+            {(achievements && achievements.length > 0 || isOwn) && (
+              <div className="mt-6">
+                <p className="mb-2 text-[0.7rem] uppercase tracking-widest text-muted">Achievements</p>
+                <AchievementBadges earned={achievements ?? []} showLocked={isOwn} />
+              </div>
+            )}
+          </>
         )}
       </div>
 
+      {!authUserId && hasUsage && (
+        <GuestSignupCta surface="profile" ctaLocation="profile_after_stats" />
+      )}
+
       {/* Contribution graph */}
+      {hasUsage && (
       <div className="border-b border-border px-4 py-5 sm:p-6">
         <p className="mb-3 text-xs font-semibold uppercase tracking-widest text-muted">
           Contributions
@@ -389,6 +405,7 @@ export default async function ProfilePage({
           )}
         </div>
       </div>
+      )}
 
       {/* Posts */}
       <div>
@@ -408,7 +425,9 @@ export default async function ProfilePage({
           />
         ) : (
           <div className="px-4 py-12 text-center text-sm text-muted sm:px-6">
-            No activities yet.
+            {isOwn && !hasUsage
+              ? "Your first synced session will appear here."
+              : "No activities yet."}
           </div>
         )}
       </div>
diff --git a/apps/web/app/api/analytics/activation/route.ts b/apps/web/app/api/analytics/activation/route.ts
index 78a1c7ec..9435fccc 100644
--- a/apps/web/app/api/analytics/activation/route.ts
+++ b/apps/web/app/api/analytics/activation/route.ts
@@ -12,9 +12,11 @@ import { createClient } from "@/lib/supabase/server";
 
 const CLIENT_EVENT_ALLOWLIST = new Set([
   "landing_primary_cta_clicked",
+  "guest_signup_cta_clicked",
   "signup_started",
   "onboarding_profile_started",
   "sync_command_copied",
+  "first_sync_nudge_clicked",
   "activation_completed",
 ]);
 
diff --git a/apps/web/components/app/activation/FirstSyncCommandCard.tsx b/apps/web/components/app/activation/FirstSyncCommandCard.tsx
new file mode 100644
index 00000000..36ea0f63
--- /dev/null
+++ b/apps/web/components/app/activation/FirstSyncCommandCard.tsx
@@ -0,0 +1,83 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { ArrowRight, Check, Copy } from "lucide-react";
+import { trackActivationEvent } from "@/lib/analytics/client";
+
+const SYNC_COMMAND = "npx straude@latest";
+
+export function FirstSyncCommandCard({
+  surface,
+}: {
+  surface: "feed" | "profile";
+}) {
+  const [copied, setCopied] = useState(false);
+  const location = `${surface}_empty_state`;
+
+  function handleCopy() {
+    navigator.clipboard.writeText(SYNC_COMMAND).then(() => {
+      trackActivationEvent("sync_command_copied", {
+        surface: "empty_state",
+        cta_location: location,
+        command: SYNC_COMMAND,
+        activation_state: "sync_command_copied",
+        is_authenticated: true,
+      });
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 2_000);
+    });
+  }
+
+  return (
+    <section
+      aria-label="Sync your first session"
+      className="mx-auto flex w-full max-w-xl flex-col items-center border border-border bg-subtle px-4 py-5 text-center sm:px-6"
+    >
+      <p className="text-lg font-medium">Sync your first session</p>
+      <p className="mt-2 max-w-md text-sm leading-relaxed text-muted">
+        Your first sync creates your profile stats, streak, spend totals, and a
+        shareable session history.
+      </p>
+
+      <button
+        type="button"
+        onClick={handleCopy}
+        className="mt-5 flex w-full max-w-md items-center justify-between gap-3 rounded border border-border bg-background px-4 py-3 font-[family-name:var(--font-mono)] text-sm transition-[border-color,background-color] hover:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+        aria-label="Copy first sync command"
+      >
+        <span className="truncate text-foreground">{SYNC_COMMAND}</span>
+        {copied ? (
+          <Check size={16} className="shrink-0 text-accent" aria-hidden="true" />
+        ) : (
+          <Copy size={16} className="shrink-0 text-muted" aria-hidden="true" />
+        )}
+      </button>
+      <p className="mt-1.5 text-xs text-muted">
+        {copied ? "Copied to clipboard" : "Run this after a Claude Code or Codex session"}
+      </p>
+
+      <div className="mt-5 flex flex-col items-center gap-3 sm:flex-row">
+        <Link
+          href="/onboarding"
+          onClick={() =>
+            trackActivationEvent("first_sync_nudge_clicked", {
+              surface: "empty_state",
+              cta_location: location,
+              destination: "/onboarding",
+              activation_state: "signed_up",
+              is_authenticated: true,
+            })
+          }
+          className="inline-flex items-center justify-center gap-1.5 rounded bg-accent px-4 py-2 text-sm font-semibold text-accent-foreground transition-[filter,transform] hover:brightness-110 active:scale-[0.98]"
+        >
+          Continue setup
+          <ArrowRight size={14} aria-hidden="true" />
+        </Link>
+        <Link href="/feed" className="text-sm text-muted hover:text-foreground">
+          Browse the feed
+        </Link>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/web/components/app/activation/GuestSignupCta.tsx b/apps/web/components/app/activation/GuestSignupCta.tsx
new file mode 100644
index 00000000..2dc3f65c
--- /dev/null
+++ b/apps/web/components/app/activation/GuestSignupCta.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import Link from "next/link";
+import { ArrowRight } from "lucide-react";
+import { trackActivationEvent } from "@/lib/analytics/client";
+
+export function GuestSignupCta({
+  surface,
+  ctaLocation,
+}: {
+  surface: "feed" | "profile";
+  ctaLocation: string;
+}) {
+  return (
+    <section className="border-b border-border bg-accent/5 px-4 py-5 sm:px-6">
+      <div className="mx-auto flex max-w-3xl flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <p className="text-sm font-semibold">Want your own stats here?</p>
+          <p className="mt-1 text-sm text-muted">
+            Sign up, run one sync, and Straude will turn your next coding
+            session into spend, tokens, streaks, and a shareable post.
+          </p>
+        </div>
+        <Link
+          href="/signup"
+          onClick={() =>
+            trackActivationEvent("guest_signup_cta_clicked", {
+              surface,
+              cta_location: ctaLocation,
+              destination: "/signup",
+              activation_state: "anonymous",
+              is_authenticated: false,
+            })
+          }
+          className="inline-flex shrink-0 items-center justify-center gap-1.5 rounded bg-accent px-4 py-2 text-sm font-semibold text-accent-foreground transition-[filter,transform] hover:brightness-110 active:scale-[0.98]"
+        >
+          Start your streak
+          <ArrowRight size={14} aria-hidden="true" />
+        </Link>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/web/components/app/feed/ActivityCard.tsx b/apps/web/components/app/feed/ActivityCard.tsx
index 10d0c08c..bf7295ca 100644
--- a/apps/web/components/app/feed/ActivityCard.tsx
+++ b/apps/web/components/app/feed/ActivityCard.tsx
@@ -307,9 +307,12 @@ export function ActivityCard({ post, userId, hideShareMenu }: { post: Post; user
               </>
             )}
             {usage?.is_verified && (
-              <span className="inline-flex items-center gap-1 font-semibold text-accent">
-                <CheckCircle size={12} aria-hidden="true" />
-                Verified
+              <span
+                className="inline-flex items-center gap-1 text-muted"
+                title="Verified CLI sync"
+              >
+                <CheckCircle size={12} className="text-accent" aria-hidden="true" />
+                <span className="sr-only">Verified CLI sync</span>
               </span>
             )}
             {isOwn && <CompletenessRing post={post} />}
diff --git a/apps/web/components/app/feed/FeedList.tsx b/apps/web/components/app/feed/FeedList.tsx
index b1ced9c2..097c2719 100644
--- a/apps/web/components/app/feed/FeedList.tsx
+++ b/apps/web/components/app/feed/FeedList.tsx
@@ -1,10 +1,12 @@
 "use client";
 
-import { useEffect, useRef, useState, useCallback } from "react";
+import { Fragment, useEffect, useRef, useState, useCallback } from "react";
 import { useRouter } from "next/navigation";
 import { ChevronDown, Copy, Check } from "lucide-react";
 import { ActivityCard } from "./ActivityCard";
 import { PendingPostsNudge } from "./PendingPostsNudge";
+import { FirstSyncCommandCard } from "@/components/app/activation/FirstSyncCommandCard";
+import { GuestSignupCta } from "@/components/app/activation/GuestSignupCta";
 import { cn } from "@/lib/utils/cn";
 import type { Post } from "@/types";
 
@@ -287,25 +289,32 @@ export function FeedList({
         </div>
       ) : posts.length === 0 ? (
         <div className="flex flex-col items-center justify-center px-6 py-20 text-center">
-          <p className="text-lg font-medium">
-            {feedType === "following"
-              ? "No posts from people you follow yet"
-              : feedType === "mine"
-                ? "You haven\u2019t posted any sessions yet"
-                : "No posts yet"}
-          </p>
-          <p className="mt-2 text-sm text-muted">
-            {feedType === "following"
-              ? "Follow some builders to see their posts here."
-              : feedType === "mine"
-                ? "Sync your Claude usage to share your first session."
-                : "Check back soon."}
-          </p>
+          {userId && feedType === "mine" ? (
+            <FirstSyncCommandCard surface="feed" />
+          ) : (
+            <>
+              <p className="text-lg font-medium">
+                {feedType === "following"
+                  ? "No posts from people you follow yet"
+                  : "No posts yet"}
+              </p>
+              <p className="mt-2 text-sm text-muted">
+                {feedType === "following"
+                  ? "Follow some builders to see their posts here."
+                  : "Check back soon."}
+              </p>
+            </>
+          )}
         </div>
       ) : (
         <>
-          {posts.map((post) => (
-            <ActivityCard key={post.id} post={post} userId={userId} />
+          {posts.map((post, index) => (
+            <Fragment key={post.id}>
+              <ActivityCard post={post} userId={userId} />
+              {!userId && feedType === "global" && index === Math.min(4, posts.length - 1) && (
+                <GuestSignupCta surface="feed" ctaLocation="feed_after_posts" />
+              )}
+            </Fragment>
           ))}
           {error && (
             <div role="alert" className="flex flex-col items-center gap-2 py-8">
diff --git a/apps/web/components/app/shared/GuestHeader.tsx b/apps/web/components/app/shared/GuestHeader.tsx
index 05ba071b..c01b540f 100644
--- a/apps/web/components/app/shared/GuestHeader.tsx
+++ b/apps/web/components/app/shared/GuestHeader.tsx
@@ -10,7 +10,7 @@ import { BoltIcon } from "@/components/landing/icons";
 const navLinks = [
   { href: "/feed", label: "Feed" },
   { href: "/leaderboard", label: "Leaderboard" },
-  { href: "/token-rich", label: "Prometheus List" },
+  { href: "/token-rich", label: "Company Rankings" },
 ] as const;
 
 function subscribeToAuthHrefChange() {
@@ -73,7 +73,7 @@ export function GuestHeader() {
 const mobileNavItems = [
   { href: "/feed", label: "Home", icon: Home },
   { href: "/leaderboard", label: "Leaderboard", icon: Trophy },
-  { href: "/token-rich", label: "Prometheus", icon: Flame },
+  { href: "/token-rich", label: "Companies", icon: Flame },
 ] as const;
 
 export function GuestMobileNav() {
diff --git a/apps/web/lib/analytics/activation.ts b/apps/web/lib/analytics/activation.ts
index 872fa4f3..2c319d52 100644
--- a/apps/web/lib/analytics/activation.ts
+++ b/apps/web/lib/analytics/activation.ts
@@ -3,10 +3,12 @@ export const ACTIVATION_ANONYMOUS_COOKIE_MAX_AGE = 60 * 60 * 24 * 30;
 
 export const ACTIVATION_EVENTS = [
   "landing_primary_cta_clicked",
+  "guest_signup_cta_clicked",
   "signup_started",
   "signup_completed",
   "onboarding_profile_started",
   "sync_command_copied",
+  "first_sync_nudge_clicked",
   "usage_submit_succeeded",
   "first_sync_confirmed",
   "activation_completed",
@@ -31,6 +33,7 @@ export type ActivationSurface =
   | "usage_status"
   | "feed"
   | "profile"
+  | "empty_state"
   | "cli";
 
 export interface ActivationStateInput {

From ce485576c91b25a756a153dffc37f5979b838330 Mon Sep 17 00:00:00 2001
From: Oscar Hong <oscar.hong2015@gmail.com>
Date: Fri, 3 Jul 2026 00:38:15 +0800
Subject: [PATCH 11/15] Document activation integration rollout

---
 apps/web/app/(app)/layout.tsx       | 16 +++----
 plans/007-final-integration-pass.md | 67 +++++++++++++++++++++++++++++
 2 files changed, 75 insertions(+), 8 deletions(-)

diff --git a/apps/web/app/(app)/layout.tsx b/apps/web/app/(app)/layout.tsx
index 896bb199..9c16b852 100644
--- a/apps/web/app/(app)/layout.tsx
+++ b/apps/web/app/(app)/layout.tsx
@@ -225,14 +225,14 @@ export default async function AppLayout({
       <AppProviders>
         <div className="fixed inset-0 flex flex-col overflow-hidden">
           <GuestHeader />
-            <div className="mx-auto flex min-h-0 w-full max-w-[1600px] flex-1 overflow-hidden border-x border-border">
-              <main id="main-content" className="scrollbar-none min-w-0 flex-1 overflow-y-auto overflow-x-hidden overscroll-contain">
-                <div className="pb-[var(--mobile-nav-height)] sm:pb-0">
-                  {children}
-                </div>
-              </main>
-            </div>
-            <GuestMobileNav />
+          <div className="mx-auto flex min-h-0 w-full max-w-[1600px] flex-1 overflow-hidden border-x border-border">
+            <main id="main-content" className="scrollbar-none min-w-0 flex-1 overflow-y-auto overflow-x-hidden overscroll-contain">
+              <div className="pb-[var(--mobile-nav-height)] sm:pb-0">
+                {children}
+              </div>
+            </main>
+          </div>
+          <GuestMobileNav />
         </div>
       </AppProviders>
     );
diff --git a/plans/007-final-integration-pass.md b/plans/007-final-integration-pass.md
index 8893a44c..980b668c 100644
--- a/plans/007-final-integration-pass.md
+++ b/plans/007-final-integration-pass.md
@@ -11,6 +11,73 @@ Combine the workstreams into one coherent product experience.
 
 The final result should feel like one fast activation loop across landing, signup, onboarding, app, and CLI.
 
+## Integration Result
+
+Merged onto `codex/activation-integration-pass` in this order:
+
+1. `codex/onboarding-first-sync`
+2. `codex/public-landing-performance`
+3. `codex/authenticated-shell-performance`
+4. `codex/core-app-activation-ux`
+5. `codex/cli-first-run-snappiness`
+
+Review the stack sequentially:
+
+- PR #133: activation analytics contract.
+- PR #134: onboarding completion gated on first sync confirmed in web.
+- PR #135: public landing and `/open` performance.
+- PR #136: authenticated shell provider, modal, notification, and sidebar deferral.
+- PR #137: CLI first-run snappiness and 30-day backfill path.
+- PR #138: empty-state activation guidance and guest conversion CTAs.
+
+The activation definition is `activation_completed` after the web app confirms synced usage. Optional profile setup is no longer activation.
+
+## PostHog Admin Follow-Up
+
+Server-side and client-side capture are implemented, but PostHog project admin updates were not applied from this checkout. Tool discovery did not expose a PostHog MCP/tool, `posthog` is not installed on PATH, and the local env only exposes `NEXT_PUBLIC_POSTHOG_KEY` plus `NEXT_PUBLIC_POSTHOG_HOST`, not a project API key.
+
+Create or update these PostHog actions after deploying the taxonomy:
+
+- Visitor CTA: `landing_primary_cta_clicked`
+- Signup started: `signup_started`
+- Signup completed: `signup_completed`
+- Profile started: `onboarding_profile_started`
+- Command copied: `sync_command_copied`
+- CLI login completed: `login_completed`
+- Usage push succeeded: `usage_pushed`
+- Usage push failed: `usage_push_failed`
+- First sync confirmed in web: `first_sync_confirmed`
+- Activated: `activation_completed`
+
+Create an activation funnel dashboard with these ordered steps:
+
+1. `$pageview` on `/`
+2. `landing_primary_cta_clicked`
+3. `signup_completed`
+4. `sync_command_copied`
+5. `login_completed`
+6. `usage_pushed`
+7. `first_sync_confirmed`
+8. `activation_completed`
+
+Create a CLI health dashboard for `usage_pushed`, `usage_push_failed`, p50 and p95 push timing, p50 and p95 ccusage timing, pricing mode, requested day count, submitted day count, and backfill completion.
+
+## Integration Verification
+
+Passed on `codex/activation-integration-pass`:
+
+```bash
+bun --cwd apps/web typecheck
+bun --cwd packages/cli typecheck
+bun --cwd apps/web test -- __tests__/flows/activation-contract.test.ts __tests__/api/activation-analytics.test.ts __tests__/api/usage-status.test.ts __tests__/api/profile.test.ts __tests__/api/usage-submit.test.ts __tests__/components/FeedList.test.tsx __tests__/components/ActivityCard.test.tsx __tests__/components/CommandPalette.test.tsx __tests__/components/SubmitPromptWidget.test.tsx __tests__/lib/open-stats.test.ts
+bun --cwd packages/cli test -- __tests__/ccusage.test.ts __tests__/commands/push.test.ts __tests__/flows/cli-sync-flow.test.ts __tests__/resolve-push-date-range.test.ts __tests__/commands/login.test.ts
+bun --cwd apps/web build
+bun --cwd packages/cli build
+bun --cwd apps/web test:e2e -- e2e/golden-path/landing-to-signup.spec.ts
+```
+
+Results: 91 focused web tests passed, 51 focused CLI tests passed, production web build passed, CLI build passed, and 10 golden-path landing-to-signup Playwright tests passed.
+
 ## In Scope
 
 - Cross-workstream copy consistency.

From 463200a11e32842dbf0967d58f6308879e2ece0b Mon Sep 17 00:00:00 2001
From: Oscar Hong <oscar.hong2015@gmail.com>
Date: Fri, 3 Jul 2026 20:03:11 +0800
Subject: [PATCH 12/15] Restrict Claude workspace permissions

---
 .claude/settings.json | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/.claude/settings.json b/.claude/settings.json
index 48be3f5d..b2f3e1c7 100644
--- a/.claude/settings.json
+++ b/.claude/settings.json
@@ -1,8 +1,6 @@
 {
   "permissions": {
-    "allow": [
-      "*"
-    ]
+    "allow": []
   },
   "hooks": {
     "PostToolUse": [

From ca656e7512603deb49cefa061d7cbeef1c51d985 Mon Sep 17 00:00:00 2001
From: Oscar Hong <oscar.hong2015@gmail.com>
Date: Fri, 3 Jul 2026 20:12:17 +0800
Subject: [PATCH 13/15] Restore Claude review OAuth workflow

---
 .github/workflows/claude-code-review.yml | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/.github/workflows/claude-code-review.yml b/.github/workflows/claude-code-review.yml
index ebe8e38a..b5e8cfd4 100644
--- a/.github/workflows/claude-code-review.yml
+++ b/.github/workflows/claude-code-review.yml
@@ -31,22 +31,14 @@ jobs:
         with:
           fetch-depth: 1
 
-      - name: Validate Anthropic API key secret
-        env:
-          ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }}
-        run: |
-          if [ -z "$ANTHROPIC_API_KEY" ]; then
-            echo "::error::ANTHROPIC_API_KEY is required for Claude Code Review. CLAUDE_CODE_OAUTH_TOKEN is no longer usable because subscription access for Claude Code is disabled for this Anthropic organization."
-            exit 1
-          fi
-
       - name: Run Claude Code Review
         id: claude-review
         uses: anthropics/claude-code-action@v1
         with:
-          anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
+          claude_code_oauth_token: ${{ secrets.CLAUDE_CODE_OAUTH_TOKEN }}
           plugin_marketplaces: 'https://github.com/anthropics/claude-code.git'
           plugins: 'code-review@claude-code-plugins'
           prompt: '/code-review:code-review ${{ github.repository }}/pull/${{ github.event.pull_request.number }}'
           # See https://github.com/anthropics/claude-code-action/blob/main/docs/usage.md
           # or https://code.claude.com/docs/en/cli-reference for available options
+

From da8f578f9702be0373b7b22d8120e0aa1e666712 Mon Sep 17 00:00:00 2001
From: Oscar Hong <oscar.hong2015@gmail.com>
Date: Fri, 3 Jul 2026 20:15:50 +0800
Subject: [PATCH 14/15] Update TopHeader lazy notification test

---
 .../__tests__/components/TopHeader.test.tsx   | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/apps/web/__tests__/components/TopHeader.test.tsx b/apps/web/__tests__/components/TopHeader.test.tsx
index 117f63e3..179a8d18 100644
--- a/apps/web/__tests__/components/TopHeader.test.tsx
+++ b/apps/web/__tests__/components/TopHeader.test.tsx
@@ -1,6 +1,6 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import type { ComponentProps } from "react";
-import { render, screen, waitFor } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { TopHeader } from "@/components/app/shared/TopHeader";
 
@@ -82,7 +82,7 @@ describe("TopHeader", () => {
     });
   });
 
-  it("loads shared app counts without fetching message threads", async () => {
+  it("loads shared app counts without fetching notification lists or message threads", async () => {
     renderTopHeader({ username: "alice", avatarUrl: null });
 
     await waitFor(() => {
@@ -93,7 +93,21 @@ describe("TopHeader", () => {
       String(input),
     );
 
-    expect(requestedUrls).toContain("/api/notifications");
+    expect(requestedUrls).not.toContain("/api/notifications");
     expect(requestedUrls).not.toContain("/api/messages/threads?limit=1");
   });
+
+  it("fetches notifications when the notifications menu opens", async () => {
+    renderTopHeader({ username: "alice", avatarUrl: null });
+
+    await waitFor(() => {
+      expect(fetch).toHaveBeenCalledWith("/api/app/counts");
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: /notifications/i }));
+
+    await waitFor(() => {
+      expect(fetch).toHaveBeenCalledWith("/api/notifications");
+    });
+  });
 });

From 3426d313bae88bde4eb9ee20e400a8ea83a460f1 Mon Sep 17 00:00:00 2001
From: Oscar Hong <oscar.hong2015@gmail.com>
Date: Fri, 3 Jul 2026 20:20:34 +0800
Subject: [PATCH 15/15] Make after helper safe for direct route tests

---
 apps/web/lib/utils/after.ts | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/apps/web/lib/utils/after.ts b/apps/web/lib/utils/after.ts
index 54de29e6..b565d07c 100644
--- a/apps/web/lib/utils/after.ts
+++ b/apps/web/lib/utils/after.ts
@@ -1 +1,24 @@
-export { after } from "next/server";
+import { after as nextAfter } from "next/server";
+
+type NextAfterError = Error & {
+  __NEXT_ERROR_CODE?: string;
+};
+
+function isOutsideRequestScopeError(error: unknown): error is NextAfterError {
+  return error instanceof Error
+    && (
+      error.message.includes("outside a request scope")
+      || (error as NextAfterError).__NEXT_ERROR_CODE === "E468"
+    );
+}
+
+export function after(task: () => unknown | Promise<unknown>) {
+  try {
+    nextAfter(async () => {
+      await task();
+    });
+  } catch (error) {
+    if (!isOutsideRequestScopeError(error)) throw error;
+    Promise.resolve().then(task).catch(() => {});
+  }
+}