Organize Commits and Update UI StylesPublic

## feat/frontend-onboarding...origin/feat/frontend-onboarding
 M api/convex/_generated/api.d.ts
M  frontend/app/(home)/page.tsx
M  frontend/app/[slug]/traces/page.tsx
M  frontend/app/globals.css
M  frontend/components/HomeFeed.tsx
M  frontend/components/HomeOnboardingWizard.tsx
M  frontend/components/InstallTabs.tsx
M  frontend/components/VisibilityStatusBadge.tsx
M  frontend/components/ui/skeleton/TraceCardSkeleton.tsx

diff --git a/api/convex/_generated/api.d.ts b/api/convex/_generated/api.d.ts
index 84deed7..4b3ee1b 100644
--- a/api/convex/_generated/api.d.ts
+++ b/api/convex/_generated/api.d.ts
@@ -49,6 +49,7 @@ import type * as lib_invites from "../lib/invites.js";
 import type * as lib_models from "../lib/models.js";
 import type * as lib_policies from "../lib/policies.js";
 import type * as lib_slugs from "../lib/slugs.js";
+import type * as lib_trace_summary_backfill from "../lib/trace_summary_backfill.js";
 import type * as lib_validators from "../lib/validators.js";
 import type * as models from "../models.js";
 import type * as namespaces from "../namespaces.js";
@@ -112,6 +113,7 @@ declare const fullApi: ApiFromModules<{
   "lib/models": typeof lib_models;
   "lib/policies": typeof lib_policies;
   "lib/slugs": typeof lib_slugs;
+  "lib/trace_summary_backfill": typeof lib_trace_summary_backfill;
   "lib/validators": typeof lib_validators;
   models: typeof models;
   namespaces: typeof namespaces;

bdb2791 fix(frontend): simplify onboarding step visuals
4b2e862 fix(frontend): prevent duplicate contribution grid day keys
1470220 chore(dev): copy env locals when creating worktrees
631886f feat(frontend): add logged-in onboarding and split traces views
0ceb30f fix(frontend): align highlights loading state with summary

zsh:1: no matches found: frontend/app/(home)/page.tsx

(empty result)

 api/convex/_generated/api.d.ts | 2 ++
 1 file changed, 2 insertions(+)

 frontend/app/(home)/page.tsx                       | 105 ++++++---
 frontend/app/[slug]/traces/page.tsx                | 152 +++++--------
 frontend/app/globals.css                           |  15 +-
 frontend/components/HomeFeed.tsx                   | 236 ++++++++++++++++++---
 frontend/components/HomeOnboardingWizard.tsx       | 233 ++++++++++++++------
 frontend/components/InstallTabs.tsx                | 133 ++++++++----
 frontend/components/VisibilityStatusBadge.tsx      |  18 +-
 .../components/ui/skeleton/TraceCardSkeleton.tsx   |  61 +++---
 8 files changed, 668 insertions(+), 285 deletions(-)

diff --git a/frontend/app/(home)/page.tsx b/frontend/app/(home)/page.tsx
index 998afb7..bd5043c 100644
--- a/frontend/app/(home)/page.tsx
+++ b/frontend/app/(home)/page.tsx
@@ -37,9 +37,7 @@ async function fetchFeedServer(): Promise<FeedTrace[] | null> {
   }
 
   try {
-    // Get cookies to forward to the API
-    const cookieStore = await cookies();
-    const cookieHeader = cookieStore.toString();
+    const cookieHeader = await getCookieHeader();
 
     const response = await fetch(`${apiUrl}/v1/feed?limit=20`, {
       headers: {
@@ -66,6 +64,12 @@ async function fetchFeedServer(): Promise<FeedTrace[] | null> {
   }
 }
 
+async function getCookieHeader(): Promise<string> {
+  const cookieStore = await cookies();
+  const allCookies = cookieStore.getAll();
+  return allCookies.map((cookie) => `${cookie.name}=${cookie.value}`).join("; ");
+}
+
 /**
  * Check auth state server-side using forwarded cookies.
  */
@@ -76,8 +80,7 @@ async function fetchIsAuthenticatedServer(): Promise<boolean> {
   }
 
   try {
-    const cookieStore = await cookies();
-    const cookieHeader = cookieStore.toString();
+    const cookieHeader = await getCookieHeader();
 
     const response = await fetch(`${apiUrl}/v1/session`, {
       headers: {
@@ -101,10 +104,22 @@ async function fetchIsAuthenticatedServer(): Promise<boolean> {
  * Async component that fetches and renders the feed.
  * Used with Suspense for streaming.
  */
-async function FeedSection() {
+async function FeedSection({
+  emptyStateClassName,
+  contentClassName,
+}: {
+  emptyStateClassName?: string;
+  contentClassName?: string;
+}) {
   const initialTraces = await fetchFeedServer();
 
-  return <HomeFeed initialTraces={initialTraces ?? undefined} />;
+  return (
+    <HomeFeed
+      initialTraces={initialTraces ?? undefined}
+      emptyStateClassName={emptyStateClassName}
+      contentClassName={contentClassName}
+    />
+  );
 }
 
 /**
@@ -116,25 +131,67 @@ export default async function Home() {
 
   return (
     <div className="flex-1">
-      <main className="flex flex-col mx-auto max-w-8xl">
-        {!isAuthenticated && <HomeHero />}
-
-        {isAuthenticated && (
-          <section className="px-4 md:px-12 pt-8 max-w-5xl mx-auto w-full">
-            <HomeOnboardingWizard />
+      <main className="flex flex-col">
+        {isAuthenticated ? (
+          <section className="relative w-full">
+            <div className="relative z-10 mx-auto w-full">
+              <div className="flex flex-col gap-0">
+                <div>
+                  <div className="max-w-8xl mx-auto w-full">
+                    <div className="flex flex-col gap-0 lg:flex-row lg:items-stretch lg:min-h-[calc(100vh-var(--navbar-height))] lg:gap-0">
+                      <div
+                        className="absolute inset-x-0 top-0 h-80 opacity-40 dark:opacity-30 pointer-events-none"
+                        style={{
+                          backgroundImage:
+                            "radial-gradient(circle, var(--foreground) 0.5px, transparent 0.5px)",
+                          backgroundSize: "8px 8px",
+                          backgroundRepeat: "repeat",
+                          maskImage:
+                            "linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 60%)",
+                          WebkitMaskImage:
+                            "linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 60%)",
+                        }}
+                        aria-hidden="true"
+                      />
+                      <HomeOnboardingWizard />
+                      <div className="flex flex-col w-full px-4 md:px-6 lg:px-12 pt-12 pb-12 relative overflow-hidden">
+                        <div className="relative flex flex-col gap-12 w-full lg:max-w-4xl mx-auto">
+                          <div className="py-4">
+                            <h2 className="text-4xl tracking-tight font-medium leading-none">
+                              Recently Shared
+                            </h2>
+                          </div>
+                          <div>
+                            <Suspense fallback={<HomeFeedSkeleton count={10} />}>
+                              <FeedSection
+                                emptyStateClassName="lg:min-h-[calc(100vh-240px)] lg:flex lg:flex-col lg:items-center lg:justify-center"
+                                contentClassName="mt-0"
+                              />
+                            </Suspense>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
           </section>
+        ) : (
+          <>
+            <HomeHero />
+            <section className="flex flex-col px-4 lg:px-12 pb-12 pt-6 gap-6 xl:gap-8 max-w-4xl mx-auto w-full">
+              <h2 className="text-2xl tracking-tighter border-b border-border-strong pb-2">
+                Recently Shared
+              </h2>
+              <div className="md:col-span-3 ">
+                <Suspense fallback={<HomeFeedSkeleton count={10} />}>
+                  <FeedSection />
+                </Suspense>
+              </div>
+            </section>
+          </>
         )}
-
-        <section className="flex flex-col px-4 md:px-12 pb-12 pt-6 gap-6 xl:gap-8 max-w-5xl mx-auto w-full">
-          <h2 className="text-2xl tracking-tighter border-b border-border-strong pb-2">
-            Recently Shared
-          </h2>
-          <div className="md:col-span-3 ">
-            <Suspense fallback={<HomeFeedSkeleton count={10} />}>
-              <FeedSection />
-            </Suspense>
-          </div>
-        </section>
       </main>
     </div>
   );

diff --git a/frontend/components/HomeFeed.tsx b/frontend/components/HomeFeed.tsx
index 161110f..e6bf663 100644
--- a/frontend/components/HomeFeed.tsx
+++ b/frontend/components/HomeFeed.tsx
@@ -5,9 +5,9 @@ import { useFeed, type FeedTrace } from "../hooks/useFeed";
 import { HomeFeedSkeleton } from "./ui/skeleton/HomeFeedSkeleton";
 import { Avatar } from "./ui/Avatar";
 import { AgentLogo, getAgentName, type AgentId } from "./ui/AgentLogo";
-import { VisibilityStatusBadge } from "./VisibilityStatusBadge";
 import { formatTimeAgo, formatModelName } from "../lib/trace-utils";
-import { MessageSquare, SquareDot, Box, RefreshCcw } from "lucide-react";
+import { MessageSquare, SquareDot, Box, RefreshCcw, Globe } from "lucide-react";
+import { cn } from "@/lib/utils";
 
 // =============================================================================
 // FEED CARD
@@ -38,7 +38,7 @@ function FeedCard({ trace }: { trace: FeedTrace }) {
           />
           <span className="truncate">{authorName}</span>
         </Link>
-        <span>shared a trace {timeAgo.toLowerCase()}</span>
+        <span suppressHydrationWarning>shared a trace {timeAgo.toLowerCase()}</span>
       </div>
 
       {/* Card */}
@@ -55,13 +55,8 @@ function FeedCard({ trace }: { trace: FeedTrace }) {
               </p>
             </Link>
             <div className="flex items-center gap-3 shrink-0">
-              <VisibilityStatusBadge
-                visibility={trace.visibility}
-                className="relative z-10 shrink-0"
-              />
-              {/* Message count — mobile only */}
-              <span className="sm:hidden inline-flex items-center gap-1 text-xs text-muted-foreground tabular-nums tracking-tight">
-                <MessageSquare className="size-3 text-icon-foreground" />
+              <span className="inline-flex items-center gap-1 text-sm text-muted-foreground tabular-nums tracking-tighter">
+                <MessageSquare className="size-3.5 text-icon-foreground stroke-[2.25]" />
                 {trace.messageCount ?? 0}
               </span>
             </div>
@@ -99,17 +94,11 @@ function FeedCard({ trace }: { trace: FeedTrace }) {
                   <RefreshCcw className="size-3 text-icon-foreground shrink-0" />
                   Updated
                 </span>
-                <span className="text-foreground whitespace-nowrap">
+                <span className="text-foreground whitespace-nowrap" suppressHydrationWarning>
                   {formatTimeAgo(trace.updatedAt)}
                 </span>
               </div>
             )}
-
-            {/* Messages — sm+ only, shown inline on mobile */}
-            <span className=" ml-auto self-end hidden sm:inline-flex items-center gap-1 text-sm text-muted-foreground tabular-nums tracking-tight">
-              <MessageSquare className="size-3.5 text-icon-foreground" />
-              {trace.messageCount ?? 0}
-            </span>
           </div>
         </div>
       </article>
@@ -121,16 +110,198 @@ function FeedCard({ trace }: { trace: FeedTrace }) {
 // HOME FEED
 // =============================================================================
 
+const sampleTraces: FeedTrace[] = [
+  {
+    id: "sample-1",
+    externalId: "sample-1",
+    title: "Refactor multi-agent evaluator for trace replay",
+    agentId: "claude-code",
+    model: "claude-opus-4-6",
+    modelName: "Claude Opus 4.6",
+    visibility: "public",
+    createdAt: 1738342800000,
+    updatedAt: 1738346400000,
+    messageCount: 18,
+    namespace: {
+      id: "sample-namespace-1",
+      slug: "sample-studio",
+      displayName: "Sample Studio",
+    },
+    author: {
+      id: "sample-author-1",
+      displayName: "Sample Studio",
+    },
+  },
+  {
+    id: "sample-2",
+    externalId: "sample-2",
+    title: "Investigate latency spike on sync endpoints",
+    agentId: "codex",
+    model: "gpt-4.1",
+    modelName: "GPT-4.1",
+    visibility: "public",
+    createdAt: 1738256400000,
+    updatedAt: 1738260000000,
+    messageCount: 9,
+    namespace: {
+      id: "sample-namespace-2",
+      slug: "metrics-lab",
+      displayName: "Metrics Lab",
+    },
+    author: {
+      id: "sample-author-2",
+      displayName: "Metrics Lab",
+    },
+  },
+  {
+    id: "sample-3",
+    externalId: "sample-3",
+    title: "Designing onboarding prompts with live traces",
+    agentId: "gemini-cli",
+    model: "gemini-2.0-pro",
+    modelName: "Gemini 2.0 Pro",
+    visibility: "public",
+    createdAt: 1738170000000,
+    updatedAt: 1738173600000,
+    messageCount: 12,
+    namespace: {
+      id: "sample-namespace-3",
+      slug: "signal-house",
+      displayName: "Signal House",
+    },
+    author: {
+      id: "sample-author-3",
+      displayName: "Signal House",
+    },
+  },
+  {
+    id: "sample-4",
+    externalId: "sample-4",
+    title: "Profiling cold starts in cron agents",
+    agentId: "opencode",
+    model: "gpt-4o-mini",
+    modelName: "GPT-4o Mini",
+    visibility: "public",
+    createdAt: 1738083600000,
+    updatedAt: 1738087200000,
+    messageCount: 6,
+    namespace: {
+      id: "sample-namespace-4",
+      slug: "cronworks",
+      displayName: "Cronworks",
+    },
+    author: {
+      id: "sample-author-4",
+      displayName: "Cronworks",
+    },
+  },
+  {
+    id: "sample-5",
+    externalId: "sample-5",
+    title: "Tracing message fanout for realtime watchers",
+    agentId: "cursor",
+    model: "claude-sonnet-3.7",
+    modelName: "Claude Sonnet 3.7",
+    visibility: "public",
+    createdAt: 1737997200000,
+    updatedAt: 1738000800000,
+    messageCount: 14,
+    namespace: {
+      id: "sample-namespace-5",
+      slug: "signalbox",
+      displayName: "Signalbox",
+    },
+    author: {
+      id: "sample-author-5",
+      displayName: "Signalbox",
+    },
+  },
+  {
+    id: "sample-6",
+    externalId: "sample-6",
+    title: "Audit privacy filters on agent traces",
+    agentId: "claude-code",
+    model: "claude-opus-4-1",
+    modelName: "Claude Opus 4.1",
+    visibility: "public",
+    createdAt: 1737910800000,
+    updatedAt: 1737914400000,
+    messageCount: 11,
+    namespace: {
+      id: "sample-namespace-6",
+      slug: "privacy-lab",
+      displayName: "Privacy Lab",
+    },
+    author: {
+      id: "sample-author-6",
+      displayName: "Privacy Lab",
+    },
+  },
+  {
+    id: "sample-7",
+    externalId: "sample-7",
+    title: "Tune embeddings pipeline for archive search",
+    agentId: "codex",
+    model: "gpt-4.1-mini",
+    modelName: "GPT-4.1 Mini",
+    visibility: "public",
+    createdAt: 1737824400000,
+    updatedAt: 1737828000000,
+    messageCount: 7,
+    namespace: {
+      id: "sample-namespace-7",
+      slug: "atlas",
+      displayName: "Atlas",
+    },
+    author: {
+      id: "sample-author-7",
+      displayName: "Atlas",
+    },
+  },
+  {
+    id: "sample-8",
+    externalId: "sample-8",
+    title: "Compare streaming retries across providers",
+    agentId: "gemini-cli",
+    model: "gemini-2.0-flash",
+    modelName: "Gemini 2.0 Flash",
+    visibility: "public",
+    createdAt: 1737738000000,
+    updatedAt: 1737741600000,
+    messageCount: 10,
+    namespace: {
+      id: "sample-namespace-8",
+      slug: "flux",
+      displayName: "Flux",
+    },
+    author: {
+      id: "sample-author-8",
+      displayName: "Flux",
+    },
+  },
+];
+
 interface HomeFeedProps {
   /** Initial traces for SSR hydration */
   initialTraces?: FeedTrace[];
+  excludeNamespaceSlug?: string;
+  emptyStateClassName?: string;
+  contentClassName?: string;
 }
 
-export function HomeFeed({ initialTraces }: HomeFeedProps) {
+export function HomeFeed({
+  initialTraces,
+  excludeNamespaceSlug,
+  emptyStateClassName,
+  contentClassName,
+}: HomeFeedProps) {
   const { traces, loading, error } = useFeed(20);
 
   // Use initial traces for SSR, then switch to live data
   const displayTraces = traces ?? initialTraces;
+  const filteredTraces = excludeNamespaceSlug
+    ? displayTraces?.filter((trace) => trace.namespace.slug !== excludeNamespaceSlug)
+    : displayTraces;
   const isLoading = loading && !displayTraces;
 
   if (isLoading) {
@@ -146,24 +317,35 @@ export function HomeFeed({ initialTraces }: HomeFeedProps) {
     );
   }
 
-  if (!displayTraces || displayTraces.length === 0) {
+  const isDev = process.env.NODE_ENV !== "production";
+  const displayFallbackTraces = isDev && (!filteredTraces || filteredTraces.length === 0);
+  const resolvedTraces = displayFallbackTraces ? sampleTraces : filteredTraces;
+
+  if (!resolvedTraces || resolvedTraces.length === 0) {
     return (
-      <div className="rounded-lg border border-border bg-card p-8 text-center">
-        <p className="text-foreground-tertiary">No traces yet.</p>
-        <p className="mt-2 text-sm text-muted-foreground">
-          Upload a trace using the CLI to get started.
-        </p>
+      <div
+        className={cn(
+          "rounded-lg border border-border-strong p-8 bg-background",
+          emptyStateClassName,
+        )}
+      >
+        <div className="flex flex-col items-center justify-center gap-2 text-center">
+          <Globe strokeWidth={1.5} className="size-9 text-[#b5b5b5] dark:text-[#4a4a4a] mb-1" />
+          <p className="text-sm font-medium text-foreground">No one has posted a trace yet</p>
+          <p className="text-sm text-muted-foreground">
+            Upload a trace using the CLI to get started.
+          </p>
+        </div>
       </div>
     );
   }
 
   return (
-    <div
-      className="flex flex-col gap-7"
+    <div className={cn("flex flex-col gap-8 max-w-5xl mx-auto w-full", contentClassName)}
       role="feed"
       aria-label="Trace feed"
     >
-      {displayTraces.map((trace) => (
+      {resolvedTraces.map((trace) => (
         <FeedCard key={trace.id} trace={trace} />
       ))}
     </div>

diff --git a/frontend/components/HomeOnboardingWizard.tsx b/frontend/components/HomeOnboardingWizard.tsx
index cd32f99..cd1461c 100644
--- a/frontend/components/HomeOnboardingWizard.tsx
+++ b/frontend/components/HomeOnboardingWizard.tsx
@@ -3,9 +3,13 @@
 import Link from "next/link";
 import { useQuery } from "convex/react";
 import { api } from "@traces/shared/convex";
-import { useEffect, useMemo, useState } from "react";
+import { type ReactNode, useEffect, useMemo, useState } from "react";
 import { Check } from "lucide-react";
 import { useAuthSession } from "@/hooks/useAuthSession";
+import { Avatar } from "@/components/ui/Avatar";
+import { Button } from "@/components/ui/button";
+import { CopyButton } from "@/components/ui/CopyButton";
+import { InstallTabs } from "@/components/InstallTabs";
 import { cn } from "@/lib/utils";
 
 interface IdentityResource {
@@ -24,34 +28,53 @@ interface HomeOnboardingState {
 }
 
 type OnboardingStepStatus = "complete" | "incomplete" | "loading";
+type StepState = "completed" | "active" | "inactive";
 
 interface OnboardingStepDefinition {
   id: string;
   title: string;
   description: string;
-  ctaLabel: string;
-  href: (state: HomeOnboardingState) => string;
-  external?: boolean;
+  action: (state: HomeOnboardingState) => OnboardingStepAction;
   isComplete: (state: HomeOnboardingState) => boolean;
   isLoading?: (state: HomeOnboardingState) => boolean;
 }
 
+type OnboardingStepAction =
+  | {
+      type: "link";
+      label: string;
+      href: string;
+      external?: boolean;
+    }
+  | {
+      type: "command";
+      value: string;
+    }
+  | {
+      type: "custom";
+      element: ReactNode;
+    };
+
 const DEFAULT_ONBOARDING_STEPS: OnboardingStepDefinition[] = [
   {
     id: "setup-profile",
     title: "Setup your profile",
     description: "Your account is created on login. Add an avatar and description to personalize your profile.",
-    ctaLabel: "Open profile settings",
-    href: (state) => `/${state.namespaceSlug}/settings`,
+    action: (state) => ({
+      type: "link",
+      label: "Open profile settings",
+      href: `/${state.namespaceSlug}/settings`,
+    }),
     isComplete: (state) => state.hasProfile,
   },
   {
     id: "download-cli",
     title: "Download CLI",
     description: "Install Traces in your terminal and run traces login to attach your first device identity.",
-    ctaLabel: "View install guide",
-    href: () => "https://www.traces.com/install",
-    external: true,
+    action: () => ({
+      type: "custom",
+      element: <InstallTabs size="sm" />,
+    }),
     isComplete: (state) => state.hasDeviceIdentity === true,
     isLoading: (state) => state.hasDeviceIdentity === null,
   },
@@ -59,8 +82,11 @@ const DEFAULT_ONBOARDING_STEPS: OnboardingStepDefinition[] = [
     id: "share-trace",
     title: "Share a trace",
     description: "Publish one trace from your namespace so collaborators can discover and discuss it.",
-    ctaLabel: "Go to your traces",
-    href: (state) => `/${state.namespaceSlug}/traces`,
+    action: (state) => ({
+      type: "link",
+      label: "Go to your traces",
+      href: `/${state.namespaceSlug}/traces`,
+    }),
     isComplete: (state) => state.hasSharedTrace === true,
     isLoading: (state) => state.hasSharedTrace === null,
   },
@@ -83,20 +109,44 @@ function resolveStepStatus(
   return "incomplete";
 }
 
-function StepStatusIcon({ status }: { status: OnboardingStepStatus }) {
-  const isComplete = status === "complete";
+function StepMarker({ state, label, className }: { state: StepState; label: number; className?: string }) {
+  if (state === "completed") {
+    return (
+      <span
+        className={cn(
+          "inline-flex size-(--onboarding-step-marker-size) shrink-0 items-center justify-center rounded-full bg-primary font-bold text-white text-xs",
+          className,
+        )}
+        aria-hidden="true"
+      >
+        <Check className="size-[9px] text-white" strokeWidth={5} />
+      </span>
+    );
+  }
+
+  if (state === "active") {
+    return (
+      <span
+        className={cn(
+          "inline-flex size-(--onboarding-step-marker-size) items-center justify-center rounded-full bg-primary/27 dark:bg-primary/35 text-primary-strong font-bold text-xs",
+          className,
+        )}
+        aria-hidden="true"
+      >
+        {label}
+      </span>
+    );
+  }
 
   return (
     <span
       className={cn(
-        "mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full border",
-        isComplete
-          ? "border-foreground bg-foreground text-background"
-          : "border-muted-foreground/40 bg-transparent"
+        "inline-flex size-(--onboarding-step-marker-size) items-center justify-center rounded-full bg-black/7 dark:bg-white/7 border-box font-bold text-muted-foreground text-xs",
+        className,
       )}
       aria-hidden="true"
     >
-      {isComplete ? <Check className="size-3.5" /> : null}
+      {label}
     </span>
   );
 }
@@ -124,6 +174,14 @@ export function HomeOnboardingWizard({
         }
       : "skip"
   );
+  const namespace = useQuery(
+    api.namespaces.getProfile,
+    loaded && sessionNamespaceSlug
+      ? {
+          slug: sessionNamespaceSlug,
+        }
+      : "skip"
+  );
   const publicTraces = useQuery(
     api.namespaces.getPublicTraces,
     loaded && sessionNamespaceSlug
@@ -234,11 +292,7 @@ export function HomeOnboardingWizard({
   }, [allTraces, loaded, publicTraces, sessionNamespaceSlug]);
 
   if (!loaded || !session) {
-    return (
-      <section className="rounded-lg ring-1 ring-black/7 shadow bg-card p-5 md:p-6">
-        <p className="text-sm text-muted-foreground">Loading onboarding...</p>
-      </section>
-    );
+    return null;
   }
 
   const onboardingState: HomeOnboardingState = {
@@ -256,56 +310,107 @@ export function HomeOnboardingWizard({
     };
   });
 
+  const activeStep = resolvedSteps.find((step) => step.status !== "complete");
   const completedCount = resolvedSteps.filter((step) => step.status === "complete").length;
 
+  if (completedCount === resolvedSteps.length) {
+    return null;
+  }
+
   return (
-    <section className="rounded-lg border border-border bg-card p-5 md:p-6">
-      <div className="flex flex-wrap items-center justify-between gap-3">
-        <div>
-          <h2 className="text-lg tracking-tighter text-foreground">Get started in three steps</h2>
-          <p className="mt-1 text-sm text-muted-foreground">
-            Complete onboarding tasks as your account state updates in real time.
+    <section className="bg-background/60 lg:min-h-[calc(100vh-var(--navbar-height))] p-4 md:p-6 border-b border-border-muted lg:border-b-0 lg:border-r lg:w-[320px] lg:shrink-0 z-20">
+      <div className="flex items-center gap-3">
+        <Avatar userName="You" size={28} />
+        <div className="min-w-0">
+          <p className="text-[11px]/2 text-muted-foreground">Welcome</p>
+          <p className="text-lg/7 font-medium tracking-tight text-foreground">
+            {namespace?.displayName ?? "there"}
           </p>
+          {/* <p className="text-xs text-muted-foreground">
+            {completedCount}/{resolvedSteps.length} complete
+          </p> */}
         </div>
-        <p className="text-xs font-medium text-muted-foreground">
-          {completedCount}/{resolvedSteps.length} complete
-        </p>
       </div>
 
-      <ol className="mt-5 grid grid-cols-1 gap-4 lg:grid-cols-3" aria-label="Onboarding steps">
-        {resolvedSteps.map((step, index) => (
-          <li key={step.id} className={cn("min-w-0", step.status === "loading" && "opacity-70")}>
-            <article className="flex items-start gap-3">
-              <StepStatusIcon status={step.status} />
-
-              <div className="min-w-0">
-                <p className="text-xs font-medium uppercase tracking-[0.08em] text-muted-foreground">
-                  Step {index + 1}
-                </p>
-                <h3 className="mt-1 text-sm font-medium text-foreground">{step.title}</h3>
-                <p className="mt-1 text-sm text-muted-foreground">{step.description}</p>
-
-                {step.external ? (
-                  <a
-                    href={step.href(onboardingState)}
-                    target="_blank"
-                    rel="noreferrer"
-                    className="mt-2 inline-flex text-xs font-medium text-muted-foreground underline underline-offset-4 transition-colors hover:text-foreground"
-                  >
-                    {step.ctaLabel}
-                  </a>
-                ) : (
-                  <Link
-                    href={step.href(onboardingState)}
-                    className="mt-2 inline-flex text-xs font-medium text-muted-foreground underline underline-offset-4 transition-colors hover:text-foreground"
-                  >
-                    {step.ctaLabel}
-                  </Link>
+      <ol className="mt-6 flex flex-col gap-5 ml-[5px]" aria-label="Onboarding steps">
+        {resolvedSteps.map((step, index) => {
+          const state: StepState =
+            step.status === "complete"
+              ? "completed"
+              : step.id === activeStep?.id
+                ? "active"
+                : "inactive";
+
+          return (
+            <li
+              key={step.id}
+              className={cn(
+                "group relative flex items-start gap-4.5 min-w-0",
+                "after:absolute after:left-[calc((var(--onboarding-step-marker-size)/2)-0.5px)] after:top-[calc(var(--onboarding-step-marker-size)/2)] after:-bottom-8 after:border-l after:border-dashed after:border-foreground/15 dark:after:border-foreground/10 after:z-0",
+                "last:after:hidden",
+                step.status === "loading" && "opacity-70",
+              )}
+              data-state={state}
+            >
+              <span className="relative inline-flex shrink-0 items-center justify-center before:content-[''] before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:size-(--onboarding-step-marker-size) before:rounded-full before:bg-background before:z-0 my-px">
+                <StepMarker state={state} label={index + 1} className="relative z-10" />
+              </span>
+              <div className="flex flex-col gap-1 relative z-20 min-w-0">
+                <div className="flex flex-col gap-1 min-w-0">
+                  <p className={cn(
+                    "text-sm/5 font-medium text-foreground group-data-[state=completed]:text-muted-foreground break-words",
+                  )}>
+                    {step.title}
+                  </p>
+                  {!step.isComplete(onboardingState) && (
+                    <p className="text-xs text-muted-foreground text-pretty break-words">
+                      {step.description}
+                    </p>
+                  )}
+                </div>
+                {!step.isComplete(onboardingState) && (
+                  <div className="mt-2">
+                    {(() => {
+                      const action = step.action(onboardingState);
+
+                      if (action.type === "command") {
+                        return (
+                          <CopyButton
+                            value={action.value}
+                            variant="ghost"
+                            icon="copy"
+                            iconClassName="text-muted-foreground"
+                            className="rounded-md w-full h-auto px-3 py-2 justify-between flex-row-reverse text-foreground hover:text-foreground active:scale-100 text-left [&>span]:flex [&>span]:flex-1 [&>span]:min-w-0"
+                          >
+                            <code className="font-mono text-xs text-foreground overflow-x-auto whitespace-nowrap py-0.5 no-scrollbar flex items-center min-w-0 w-full">
+                              <span>{action.value}</span>
+                            </code>
+                          </CopyButton>
+                        );
+                      }
+
+                      if (action.type === "custom") {
+                        return action.element;
+                      }
+
+                      return action.external ? (
+                        <Button size="sm" asChild>
+                          <a href={action.href} target="_blank" rel="noreferrer">
+                            {action.label}
+                          </a>
+                        </Button>
+                      ) : (
+                        <Button size="sm" asChild>
+                          <Link href={action.href}>{action.label}</Link>
+                        </Button>
+                      );
+                    })()}
+                  </div>
                 )}
               </div>
-            </article>
-          </li>
-        ))}
+            </li>
+          );
+        })}
       </ol>
     </section>
   );

diff --git a/frontend/components/InstallTabs.tsx b/frontend/components/InstallTabs.tsx
index 6f826b2..7c28855 100644
--- a/frontend/components/InstallTabs.tsx
+++ b/frontend/components/InstallTabs.tsx
@@ -4,8 +4,16 @@ import { useState } from "react";
 import Link from "next/link";
 import { CopyButton } from "./ui/CopyButton";
 import { Tabs, TabsList, TabsTrigger } from "./ui/tabs";
+import { Download } from "lucide-react";
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "./ui/tooltip";
 
-export function InstallTabs() {
+type InstallTabsSize = "default" | "sm";
+
+type InstallTabsProps = {
+  size?: InstallTabsSize;
+};
+
+export function InstallTabs({ size = "default" }: InstallTabsProps) {
   const [method, setMethod] = useState<"brew" | "npm" | "script">("brew");
 
   const commands = {
@@ -14,61 +22,114 @@ export function InstallTabs() {
     script: "curl -fsSL https://www.traces.com/install | bash",
   };
 
+  const command = commands[method];
+  const [firstCommand, secondCommand] = command.split(" && ");
+
+  const isSmall = size === "sm";
+
   return (
-    <div className="isolate w-full flex flex-col items-start ">
-      <div className="w-full rounded-md bg-card card-contour card-contour-xs">
-        <Tabs
-          value={method}
-          onValueChange={(v) => setMethod(v as "brew" | "npm" | "script")}
-          className="flex flex-col"
-        >
-          <div className="flex items-center justify-between border-b border-border px-4">
-            <TabsList className="h-auto p-0 gap-6 bg-transparent">
-              <TabsTrigger value="brew" variant="border" className="text-[13px]/5 py-2">
+    <TooltipProvider>
+      <div className="isolate w-full flex flex-col items-start ">
+        <div className="w-full rounded-md bg-card card-contour card-contour-xs">
+          <Tabs
+            value={method}
+            onValueChange={(v) => setMethod(v as "brew" | "npm" | "script")}
+            className="flex flex-col"
+          >
+          <div
+            className={`flex items-center justify-between border-b border-border ${
+              isSmall ? "px-3" : "px-4"
+            }`}
+          >
+            <TabsList
+              className={`h-auto p-0 bg-transparent ${isSmall ? "gap-4" : "gap-6"}`}
+            >
+              <TabsTrigger
+                value="brew"
+                variant="border"
+                className={isSmall ? "text-[11px]/3" : "text-[13px]/5"}
+              >
                 Homebrew
               </TabsTrigger>
-              <TabsTrigger value="npm" variant="border" className="text-[13px]/5 py-2">
+              <TabsTrigger
+                value="npm"
+                variant="border"
+                className={isSmall ? "text-[11px]/3" : "text-[13px]/5"}
+              >
                 npm
               </TabsTrigger>
-              <TabsTrigger value="script" variant="border" className="text-[13px]/5 py-2">
+              <TabsTrigger
+                value="script"
+                variant="border"
+                className={isSmall ? "text-[11px]/3" : "text-[13px]/5"}
+              >
                 Shell
               </TabsTrigger>
             </TabsList>
-            <Link
-              href="https://www.traces.com/install"
-              target="_blank"
-              rel="noreferrer"
-              className={`text-xs text-muted-foreground hover:text-foreground py-2 motion-safe:transition-[opacity_colors] motion-safe:duration-150 motion-reduce:transition-none ${
-                method === "script" ? "opacity-100" : "opacity-0 pointer-events-none"
-              }`}
-              aria-hidden={method !== "script"}
-              tabIndex={method === "script" ? 0 : -1}
-            >
-              View script
-            </Link>
+            {isSmall ? (
+              <span
+                className={`${
+                  isSmall ? "text-[11px] py-1.5" : "text-xs py-2"
+                } text-muted-foreground hover:text-foreground motion-safe:transition-[opacity_colors] motion-safe:duration-150 motion-reduce:transition-none ${
+                  method === "script" ? "opacity-100" : "opacity-0 pointer-events-none"
+                }`}
+                aria-hidden={method !== "script"}
+              >
+                <Tooltip >
+                  <TooltipTrigger asChild>
+                    <Link href="https://www.traces.com/install" target="_blank" rel="noreferrer">
+                      <Download className="text-icon-foreground size-3.5 hover:text-foreground transition-colors" />
+                    </Link>
+                  </TooltipTrigger>
+                  <TooltipContent side="top">Download Shell script</TooltipContent>
+                </Tooltip>
+              </span>
+            ) : (
+              <Link
+                href="https://www.traces.com/install"
+                target="_blank"
+                rel="noreferrer"
+                className={`${
+                  isSmall ? "text-[11px] py-1.5" : "text-xs py-2"
+                } text-muted-foreground hover:text-foreground motion-safe:transition-[opacity_colors] motion-safe:duration-150 motion-reduce:transition-none ${
+                  method === "script" ? "opacity-100" : "opacity-0 pointer-events-none"
+                }`}
+                aria-hidden={method !== "script"}
+                tabIndex={method === "script" ? 0 : -1}
+              >
+                View script
+              </Link>
+            )}
           </div>
-          
+
           <CopyButton
-            value={commands[method]}
+            value={command}
             variant="ghost"
             icon="copy"
-            iconClassName="text-muted-foreground"
-            className="rounded-t-none rounded-b-[5px] w-full h-auto px-4 py-3 justify-between flex-row-reverse text-foreground hover:text-foreground active:scale-100 text-left [&>span]:flex [&>span]:flex-1 [&>span]:min-w-0"
+            iconClassName={`text-muted-foreground ${isSmall ? "text-[13px]" : "text-base"}`}
+            className={`rounded-t-none rounded-b-[5px] w-full h-auto justify-between flex-row-reverse text-foreground hover:text-foreground active:scale-100 text-left [&>span]:flex [&>span]:flex-1 [&>span]:min-w-0 ${
+              isSmall ? "px-3 py-2" : "px-4 py-3"
+            }`}
           >
-            <code className="font-mono text-sm text-foreground overflow-x-auto whitespace-nowrap py-1 no-scrollbar flex items-center min-w-0 w-full">
-              {commands[method].includes(" && ") ? (
+            <code
+              className={`font-mono text-foreground overflow-x-auto whitespace-nowrap no-scrollbar flex items-center min-w-0 w-full ${
+                isSmall ? "text-[11px]/4 py-0.5" : "text-sm py-1"
+              }`}
+            >
+              {secondCommand ? (
                 <>
-                  <span>{commands[method].split(" && ")[0]}</span>
+                  <span>{firstCommand}</span>
                   <span className="opacity-45 mx-2">&&</span>
-                  <span>{commands[method].split(" && ")[1]}</span>
+                  <span>{secondCommand}</span>
                 </>
               ) : (
-                <span>{commands[method]}</span>
+                <span>{command}</span>
               )}
             </code>
           </CopyButton>
-        </Tabs>
+          </Tabs>
+        </div>
       </div>
-    </div>
+    </TooltipProvider>
   );
 }

diff --git a/frontend/components/VisibilityStatusBadge.tsx b/frontend/components/VisibilityStatusBadge.tsx
index 4b00215..6d5107f 100644
--- a/frontend/components/VisibilityStatusBadge.tsx
+++ b/frontend/components/VisibilityStatusBadge.tsx
@@ -4,15 +4,22 @@ import { cn } from "@/lib/utils";
 interface VisibilityStatusBadgeProps {
   visibility: "public" | "direct" | "private" | null | undefined;
   className?: string;
+  size?: "sm" | "md";
 }
 
-export function VisibilityStatusBadge({ visibility, className }: VisibilityStatusBadgeProps) {
+export function VisibilityStatusBadge({
+  visibility,
+  className,
+  size = "md",
+}: VisibilityStatusBadgeProps) {
   if (!visibility) return null;
+  const isSmall = size === "sm";
 
   return (
     <span
       className={cn(
-        "inline-flex items-center gap-1.5 rounded-full size-fit px-[5px] py-0.5 text-xs font-medium tracking-normal ring-1",
+        "inline-flex items-center rounded-full size-fit font-medium tracking-normal ring-1",
+        isSmall ? "gap-1 px-1 text-[11px] leading-4" : "gap-1.5 px-[5px] py-0.5 text-xs",
         visibility === "public"
           ? "bg-primary/4 text-primary ring-primary/25"
           : visibility === "direct"
@@ -23,7 +30,7 @@ export function VisibilityStatusBadge({ visibility, className }: VisibilityStatu
     >
       {visibility === "public" ? (
         <>
-          <Globe className="size-3 shrink-0" aria-hidden="true" />
+          <Globe className={cn("shrink-0", isSmall ? "size-2.5" : "size-3")} aria-hidden="true" />
           Public
         </>
       ) : visibility === "direct" ? (
@@ -33,7 +40,10 @@ export function VisibilityStatusBadge({ visibility, className }: VisibilityStatu
         </>
       ) : (
         <>
-          <Lock className="size-3 text-icon-foreground shrink-0" aria-hidden="true" />
+          <Lock
+            className={cn("text-icon-foreground shrink-0", isSmall ? "size-2.5" : "size-3")}
+            aria-hidden="true"
+          />
           Private
         </>
       )}

diff --git a/frontend/components/ui/skeleton/TraceCardSkeleton.tsx b/frontend/components/ui/skeleton/TraceCardSkeleton.tsx
index 4e65f65..0cbbb57 100644
--- a/frontend/components/ui/skeleton/TraceCardSkeleton.tsx
+++ b/frontend/components/ui/skeleton/TraceCardSkeleton.tsx
@@ -11,10 +11,10 @@ interface TraceCardSkeletonProps {
  * Skeleton for a feed card.
  * Structure matches FeedCard in HomeFeed exactly:
  * - Attribution sentence above (avatar + text)
- * - Card with title row (title + message count), then metadata row (Agent, Model, Updated, Messages)
+ * - Card with title row (title + badge + message count), then metadata row
  *
- * Height reference (body is 14px/20px, text-xs is 12px/16px, text-base/5 is 16px/20px):
- * - Attribution: text-sm -> 14px/20px line-height
+ * Height reference:
+ * - Attribution: text-sm/4 -> 14px font, 16px line-height
  * - Title: text-base/5 -> 16px/20px line-height
  * - Labels: text-xs + size-3 icon -> 16px line-height
  * - Values: inherited body -> 14px/20px line-height
@@ -23,28 +23,41 @@ interface TraceCardSkeletonProps {
 export function TraceCardSkeleton({ className }: TraceCardSkeletonProps) {
   return (
     <div className={cn(className)} aria-hidden="true">
-      {/* Attribution sentence — text-sm = 14px/20px line-height */}
-      <div className="flex items-center gap-1.5 text-sm text-muted-foreground mb-3 px-0.5">
+      {/* Attribution sentence — matches FeedCard: text-sm/4 = 14px font, 16px line-height
+           Avatar is 14px, text line-height is 16px, so row height = 16px.
+           SkeletonLine height="md" = h-4 = 16px to match. */}
+      <div className="flex items-center gap-1.5 text-sm/4 text-muted-foreground mb-3 px-0.5">
         <SkeletonAvatar size={14} />
-        <SkeletonLine width={180} height="lg" />
+        <SkeletonLine width={180} height="md" />
       </div>
 
       {/* Card — same contour and padding as FeedCard */}
       <div className="rounded-lg bg-card card-contour card-contour-xs px-4 py-3.5">
-        {/* Title row — title left, message count right (mobile) */}
+        {/* Title row — title left, badge + message count right.
+             Real titles (text-base/5 = 16px/20px) typically wrap to 2 lines on mobile.
+             Math: 20px (h-5) + 4px (gap-1) + 16px (h-4) = 40px = 2 × 20px line-height.
+             On sm+ titles fit 1 line, so second line is hidden. */}
         <div className="flex items-start justify-between gap-3">
-          <SkeletonLine width="70%" height="lg" className="min-w-0" />
-          <span className="sm:hidden inline-flex items-center gap-1 shrink-0">
-            <SkeletonIcon size={12} shape="rounded" />
-            <SkeletonLine width={16} height="sm" />
-          </span>
+          <div className="flex flex-col gap-1 min-w-0 flex-1">
+            <SkeletonLine width="70%" height="lg" />
+            <SkeletonLine width="40%" height="md" className="sm:hidden" />
+          </div>
+          <div className="flex items-center gap-3 shrink-0">
+            {/* Visibility badge placeholder */}
+            <SkeletonLine width={52} height="md" className="rounded-full" />
+            {/* Message count — mobile only */}
+            <span className="sm:hidden inline-flex items-center gap-1 shrink-0">
+              <SkeletonIcon size={12} shape="rounded" />
+              <SkeletonLine width={16} height="sm" />
+            </span>
+          </div>
         </div>
 
-        {/* Metadata row — Agent, Model, Updated, Messages (inline, sm+) */}
-        <div className="mt-3 flex items-start gap-8 sm:gap-12">
-          {/* Agent — label: text-xs (12px/16px) + icon, value: body (14px/20px) + 14px icon */}
-          <div className="flex flex-col gap-1 min-w-0">
-            <span className="inline-flex items-center gap-1.5 ml-px">
+        {/* Metadata row — matches FeedCard: flex-col on mobile, flex-row on sm+ */}
+        <div className="mt-3 flex flex-col sm:flex-row items-start gap-y-1 gap-x-8 sm:gap-12">
+          {/* Agent — horizontal on mobile (flex), vertical on sm+ (sm:flex-col) */}
+          <div className="flex sm:flex-col gap-1 min-w-0">
+            <span className="inline-flex items-center gap-1.5 ml-px w-24 sm:w-auto">
               <SkeletonIcon size={12} shape="rounded" />
               <SkeletonLine width={38} height="md" />
             </span>
@@ -54,25 +67,25 @@ export function TraceCardSkeleton({ className }: TraceCardSkeletonProps) {
             </div>
           </div>
 
-          {/* Model — label: text-xs (12px/16px) + icon, value: body (14px/20px) */}
-          <div className="flex flex-col gap-1 min-w-0">
-            <span className="inline-flex items-center gap-1.5">
+          {/* Model */}
+          <div className="flex sm:flex-col gap-1 min-w-0">
+            <span className="inline-flex items-center gap-1.5 w-24 sm:w-auto">
               <SkeletonIcon size={12} shape="rounded" />
               <SkeletonLine width={38} height="md" />
             </span>
             <SkeletonLine width={72} height="lg" />
           </div>
 
-          {/* Updated — label: text-xs (12px/16px) + icon, value: body (14px/20px) */}
-          <div className="flex flex-col gap-1 shrink-0">
-            <span className="inline-flex items-center gap-1.5">
+          {/* Updated */}
+          <div className="flex sm:flex-col gap-1 shrink-0">
+            <span className="inline-flex items-center gap-1.5 w-24 sm:w-auto">
               <SkeletonIcon size={12} shape="rounded" />
               <SkeletonLine width={48} height="md" />
             </span>
             <SkeletonLine width={40} height="lg" />
           </div>
 
-          {/* Messages — ml-auto self-end, text-xs = 12px/16px */}
+          {/* Messages — ml-auto self-end, sm+ only */}
           <span className="ml-auto self-end hidden sm:inline-flex items-center gap-1">
             <SkeletonIcon size={12} shape="rounded" />
             <SkeletonLine width={16} height="sm" />

diff --git a/frontend/app/[slug]/traces/page.tsx b/frontend/app/[slug]/traces/page.tsx
index c25d453..52f2e7c 100644
--- a/frontend/app/[slug]/traces/page.tsx
+++ b/frontend/app/[slug]/traces/page.tsx
@@ -4,54 +4,19 @@ import { useQuery } from "convex/react";
 import { api } from "@traces/shared/convex";
 import { use } from "react";
 import Link from "next/link";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import { ArrowLeft, ArrowUpDown } from "lucide-react";
-import { useAuthSession } from "@/hooks/useAuthSession";
-import { TraceRowList } from "@/components/TraceRowList";
-import { ProfilePageSkeleton } from "@/components/ui/skeleton/ProfilePageSkeleton";
-import { Button } from "@/components/ui/button";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { ArrowLeft, FileText } from "lucide-react";
 import { getTraceDisplayTitle } from "@/lib/trace-title";
 
-interface Trace {
-  _id: string;
-  _creationTime: number;
-  title?: string;
-  ai_title?: string;
-  visibility?: "public" | "direct" | "private";
-  description?: string;
-  language?: string;
-  agentId?: string;
-  model?: string;
-  externalId?: string;
-  messageCount?: number;
-}
-
 export default function NamespaceTracesPage({
   params,
 }: {
   params: Promise<{ slug: string }>;
 }) {
   const { slug } = use(params);
-  const { session, loaded } = useAuthSession();
-  const searchParams = useSearchParams();
-  const pathname = usePathname();
-  const router = useRouter();
-
-  const order = searchParams.get("order") === "asc" ? "asc" : "desc";
-
   const namespace = useQuery(api.namespaces.getProfile, { slug });
-  const publicTraces = useQuery(api.namespaces.getPublicTraces, { slug, limit: 1000 });
-  const allTraces = useQuery(
-    api.namespaces.getAllTraces,
-    loaded && session ? { slug, authToken: session.deviceKey, limit: 1000 } : "skip"
-  );
+  const traces = useQuery(api.namespaces.getPublicTraces, { slug, limit: 100 });
 
-  const isLoading =
-    !loaded ||
-    namespace === undefined ||
-    publicTraces === undefined ||
-    (loaded && session ? allTraces === undefined : false);
+  const isLoading = namespace === undefined || traces === undefined;
 
   if (!namespace && !isLoading) {
     return (
@@ -77,86 +42,65 @@ export default function NamespaceTracesPage({
   }
 
   if (isLoading) {
-    return <ProfilePageSkeleton />;
+    return (
+      <div className="min-h-[calc(100vh-var(--navbar-height)-100px)] flex items-center justify-center">
+        <div className="text-muted-foreground">Loading...</div>
+      </div>
+    );
   }
 
-  const hasMemberAccess = Array.isArray(allTraces);
-  const traces = (hasMemberAccess ? allTraces : publicTraces || []) as Trace[];
-
-  const traceRows = traces.map((t) => ({
-    id: t._id,
-    title: getTraceDisplayTitle(t),
-    externalId: t.externalId,
-    agentId: t.agentId,
-    model: t.model,
-    messageCount: t.messageCount,
-    createdAt: t._creationTime,
-    visibility: t.visibility,
-  }));
-
-  const longestTraceRows = [...traceRows].sort((a, b) => (b.messageCount ?? 0) - (a.messageCount ?? 0));
-  const displayTraceRows = order === "asc" ? [...traceRows].reverse() : traceRows;
-  const displayLongestTraceRows =
-    order === "asc" ? [...longestTraceRows].reverse() : longestTraceRows;
-
-  const toggleSortOrder = () => {
-    const next = order === "desc" ? "asc" : "desc";
-    const params = new URLSearchParams(searchParams.toString());
-    params.set("order", next);
-    router.push(`${pathname}?${params.toString()}`, { scroll: false });
-  };
-
-  const clearSortParam = () => {
-    const params = new URLSearchParams(searchParams.toString());
-    params.delete("order");
-    const query = params.toString();
-    router.push(query ? `${pathname}?${query}` : pathname, { scroll: false });
-  };
-
   return (
-    <div className="flex-1 flex flex-col bg-background">
-      <main className="mx-auto max-w-8xl flex-1 flex flex-col w-full">
-        <header className="px-4 md:px-6 py-5 border-b border-border">
+    <div className="flex-1 bg-muted">
+      <main className="mx-auto max-w-4xl px-4 py-8">
+        {/* Header */}
+        <div className="mb-6">
           <Link
             href={`/${slug}`}
             className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
           >
-            <ArrowLeft className="size-4" />
+            <ArrowLeft className="h-4 w-4" />
             Back to {namespace.displayName}
           </Link>
-          <h1 className="mt-3 text-2xl tracking-tighter text-foreground">
-            {hasMemberAccess ? "All Traces" : "Public Traces"}
+          <h1 className="mt-4 text-2xl font-semibold text-foreground">
+            Public Traces
           </h1>
           <p className="mt-1 text-sm text-muted-foreground">
-            {traceRows.length} {traceRows.length === 1 ? "trace" : "traces"} from @{slug}
+            {traces?.length ?? 0} public {traces?.length === 1 ? "trace" : "traces"} from @{slug}
           </p>
-        </header>
+        </div>
 
-        <Tabs defaultValue="recent" className="pb-9" onValueChange={clearSortParam}>
-          <div className="px-4 md:px-6 border-b border-border flex items-center justify-between">
-            <TabsList variant="nude">
-              <TabsTrigger value="recent" variant="nude">Recent</TabsTrigger>
-              <TabsTrigger value="longest" variant="nude">Longest</TabsTrigger>
-            </TabsList>
-            <Button
-              variant="ghost"
-              iconOnly
-              onClick={toggleSortOrder}
-              aria-label={order === "desc" ? "Sort ascending (oldest first)" : "Sort descending (newest first)"}
-              className="shrink-0 -mr-2"
-            >
-              <ArrowUpDown className="size-4 text-icon-foreground" />
-            </Button>
+        {/* Traces List */}
+        {traces === null || traces.length === 0 ? (
+          <div className="card-contour rounded-lg bg-card p-8 text-center text-muted-foreground">
+            No one has posted a trace yet.
           </div>
-
-          <TabsContent value="recent" className="mt-0">
-            <TraceRowList traces={displayTraceRows} groupByDate emptyMessage="No traces yet." />
-          </TabsContent>
-
-          <TabsContent value="longest" className="mt-0">
-            <TraceRowList traces={displayLongestTraceRows} emptyMessage="No traces yet." />
-          </TabsContent>
-        </Tabs>
+        ) : (
+          <div className="space-y-3">
+            {traces.map((trace: typeof traces[number]) => (
+              <Link
+                key={trace._id}
+                href={`/s/${trace._id}`}
+                className="card-contour block rounded-lg bg-card p-4 transition-colors hover:bg-muted"
+              >
+                <div className="flex items-start gap-3">
+                  <FileText className="mt-0.5 h-5 w-5 text-muted-foreground" />
+                  <div className="flex-1 min-w-0">
+                    <h3 className="font-medium text-foreground truncate">
+                      {getTraceDisplayTitle(trace, "Untitled Trace")}
+                    </h3>
+                    <div className="mt-1 flex items-center gap-3 text-xs text-muted-foreground">
+                      {trace.agentId && <span>{trace.agentId}</span>}
+                      {trace.model && <span>{trace.model}</span>}
+                      <span>
+                        {new Date(trace._creationTime).toLocaleDateString()}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </Link>
+            ))}
+          </div>
+        )}
       </main>
     </div>
   );

diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index 998061c..9c0cdad 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -11,8 +11,9 @@
 
   --card: #ffffff;
   --card-foreground: var(--foreground);
+  --card-muted: #fafafa; /* midpoint between background and card */
 
-  --muted: #f6f6f6; /* neutral-50 */
+  --muted: #f1f1f1; /* neutral-75 */
   --muted-foreground: #6B6B6B; /* neutral-600 */
 
   --inset: #eeeeee; /* neutral-100 - for deeply recessed areas */
@@ -29,6 +30,8 @@
   --switch-background: #c9c9c9; /* slightly darker than neutral-300 */
 
   --primary: #6366f1; /* indigo-500 */
+  --primary-border: #a5a8fa; /* indigo-300 */
+  --primary-strong: #3e44bc; /* indigo-600 */
   --primary-gradient-start: #7279f4; /* slightly lighter than primary */
   --primary-gradient-via: #6366f1; /* indigo-500 - primary */
   --primary-gradient-end: #5b5ef0; /* slightly darker than primary */
@@ -67,6 +70,7 @@
 
   --card: #2d2d2d; /* neutral-800 */
   --card-foreground: var(--foreground); /* neutral-200 */
+  --card-muted: #202020; /* midpoint between background and card */
 
   --muted: #111111; /* neutral-900 */
   --muted-foreground: #8A8A8A; /* neutral-500 */
@@ -85,6 +89,8 @@
   --switch-background: #525252; /* neutral-600 */
 
   --primary: #8187f7; /* lighter indigo */
+  --primary-border: #8f96f8; /* indigo-400 */
+  --primary-strong: #c7d2fe; /* indigo-200 */
   --primary-gradient-start: #9da3fa; /* lighter than primary */
   --primary-gradient-via: #8187f7; /* primary */
   --primary-gradient-end: #7d83f6; /* slightly darker than primary */
@@ -120,6 +126,7 @@
   --color-foreground-tertiary: var(--foreground-tertiary);
   --color-card: var(--card);
   --color-card-foreground: var(--card-foreground);
+  --color-card-muted: var(--card-muted);
   --color-muted: var(--muted);
   --color-muted-foreground: var(--muted-foreground);
   --color-faint-foreground: var(--faint-foreground);
@@ -133,6 +140,8 @@
   --color-success: var(--success);
 
   --color-primary: var(--primary);
+  --color-primary-border: var(--primary-border);
+  --color-primary-strong: var(--primary-strong);
   --color-primary-foreground: var(--primary-foreground);
   --color-ring: var(--ring);
   --color-contour: var(--contour);
@@ -171,6 +180,8 @@
   --trace-tabs-height: 37px;
   --tool-type-tabs-height: 44px;
   --mobile-files-header-height: 34px;
+  --onboarding-step-marker-size: 18px;
+  --onboarding-step-mask-size: 24px;
   --chat-panel-width: 320px;
   /* Footer height: py-2 (16px) + content (16px line-height) = 32px */
   --footer-height: 36px;
@@ -661,4 +672,4 @@ textarea:focus-visible {
 }
 [data-state="closed"][class*="animate-out"][class*="zoom-out"] {
   animation: exit 0.075s ease-in forwards;
-}
\ No newline at end of file
+}

Unstaged changes after reset:
M	api/convex/_generated/api.d.ts
M	frontend/app/(home)/page.tsx
M	frontend/app/[slug]/traces/page.tsx
M	frontend/app/globals.css
M	frontend/components/HomeFeed.tsx
M	frontend/components/HomeOnboardingWizard.tsx
M	frontend/components/InstallTabs.tsx
M	frontend/components/VisibilityStatusBadge.tsx
M	frontend/components/ui/skeleton/TraceCardSkeleton.tsx
[feat/frontend-onboarding 6bda08a] feat(frontend): refresh home onboarding and feed
 7 files changed, 620 insertions(+), 181 deletions(-)
## feat/frontend-onboarding...origin/feat/frontend-onboarding [ahead 1]
 M api/convex/_generated/api.d.ts
 M frontend/app/[slug]/traces/page.tsx

[feat/frontend-onboarding d4b5bb7] feat(frontend): simplify public traces view
 1 file changed, 48 insertions(+), 104 deletions(-)
## feat/frontend-onboarding...origin/feat/frontend-onboarding [ahead 2]
 M api/convex/_generated/api.d.ts

Found 3 matches
/Users/maxgeorgopoulos/Documents/traces/frontend/app/globals.css:
  Line 33:   --primary-border: #a5a8fa; /* indigo-300 */
  Line 92:   --primary-border: #8188f4; /* indigo-400 */
  Line 143:   --color-primary-border: var(--primary-border);