diff --git a/typescript/deep-research-agent/public/browserbase-logo.svg b/typescript/deep-research-agent/public/browserbase-logo.svg
new file mode 100644
index 00000000..5a168aa0
--- /dev/null
+++ b/typescript/deep-research-agent/public/browserbase-logo.svg
@@ -0,0 +1,6 @@
+<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="30" y="36" width="134" height="124" fill="white"/>
+<path d="M111.168 116.901H83.168V109.901H111.168V116.901Z" fill="#FF4500"/>
+<path d="M111.168 86.208H83.168V79.208H111.168V86.208Z" fill="#FF4500"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M200 200H0V0H200V200ZM55.4453 147.815H128.678L145.259 131.234V111.891L131.441 98.0723L142.495 87.0186V69.0557L125.914 52.4756H55.4453V147.815Z" fill="#FF4500"/>
+</svg>
diff --git a/typescript/deep-research-agent/public/index.html b/typescript/deep-research-agent/public/index.html
index 37460c15..889e62dd 100644
--- a/typescript/deep-research-agent/public/index.html
+++ b/typescript/deep-research-agent/public/index.html
@@ -816,12 +816,449 @@
           width: 100%;
         }
       }
+
+      /* Browserbase GTM demo inspired surface */
+      :root {
+        --bg: #f9f6f4;
+        --surface: #ffffff;
+        --surface-2: #fbfaf8;
+        --ink: #100d0d;
+        --muted: #514f4f;
+        --line: #cac8c7;
+        --line-strong: #9d9997;
+        --accent: #f03603;
+        --accent-2: #4da9e4;
+        --accent-soft: #fff1ec;
+        --warn: #a16207;
+        --error: #d23003;
+        --shadow: 0 18px 40px rgba(16, 13, 13, 0.08);
+      }
+
+      body {
+        background:
+          radial-gradient(circle at 20% 20%, rgba(240, 54, 3, 0.08), transparent 30%),
+          linear-gradient(to right, rgba(16, 13, 13, 0.045) 1px, transparent 1px),
+          linear-gradient(to bottom, rgba(16, 13, 13, 0.045) 1px, transparent 1px),
+          var(--bg);
+        background-size: auto, 32px 32px, 32px 32px, auto;
+        font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      }
+
+      .app-shell {
+        width: min(1600px, 100%);
+        margin: 0 auto;
+        background: var(--surface);
+        border-inline: 1px solid var(--line);
+        grid-template-columns: 340px minmax(0, 1fr);
+        position: relative;
+        z-index: 1;
+      }
+
+      .sidebar {
+        background: rgba(255, 255, 255, 0.92);
+        border-right: 1px solid var(--line);
+        gap: 0;
+        grid-template-rows: auto auto minmax(0, 1fr);
+        padding: 0;
+        position: sticky;
+        top: 0;
+      }
+
+      .brand {
+        border-bottom: 1px solid var(--line);
+        padding: 22px 24px;
+        position: relative;
+      }
+
+      .brand-logo {
+        display: block;
+        height: 30px;
+        margin-bottom: 14px;
+        width: 30px;
+      }
+
+      .brand p {
+        color: var(--accent);
+        font-size: 11px;
+        letter-spacing: 0.08em;
+      }
+
+      .brand h1 {
+        font-size: 22px;
+        line-height: 1.05;
+      }
+
+      .side-nav {
+        border-bottom: 1px solid var(--line);
+        gap: 6px;
+        padding: 14px;
+      }
+
+      .nav-button,
+      .history-button,
+      .tab-button {
+        border-radius: 2px;
+        color: var(--muted);
+      }
+
+      .nav-button.active,
+      .tab-button.active {
+        background: var(--accent);
+        border-color: var(--accent);
+        color: #ffffff;
+      }
+
+      .nav-button:not(.active):hover,
+      .history-button:hover,
+      .tab-button:not(.active):hover {
+        border-color: var(--ink);
+        color: var(--ink);
+      }
+
+      .history {
+        align-self: stretch;
+        padding: 18px;
+      }
+
+      .history h2 {
+        letter-spacing: 0.08em;
+      }
+
+      .history-button,
+      .history-empty,
+      .empty {
+        border-radius: 2px;
+        background: var(--surface-2);
+      }
+
+      .topbar {
+        min-height: 58px;
+        background: rgba(255, 255, 255, 0.9);
+        backdrop-filter: blur(10px);
+        padding: 0 24px;
+      }
+
+      .topbar h2 {
+        font-size: 14px;
+        font-weight: 800;
+        text-transform: uppercase;
+      }
+
+      .status-pill {
+        border-radius: 2px;
+        min-height: 30px;
+        font-size: 12px;
+        text-transform: uppercase;
+      }
+
+      .status-pill.ready .dot,
+      .status-pill.online .dot {
+        background: #90c94d;
+      }
+
+      .status-pill.error .dot,
+      .status-pill.offline .dot {
+        background: var(--accent);
+      }
+
+      .workspace {
+        background:
+          linear-gradient(to right, rgba(16, 13, 13, 0.035) 1px, transparent 1px),
+          linear-gradient(to bottom, rgba(16, 13, 13, 0.035) 1px, transparent 1px),
+          var(--surface-2);
+        background-size: 32px 32px;
+        padding: 24px;
+      }
+
+      .command-panel,
+      .brief-panel,
+      .explain-panel,
+      .panel,
+      .metric-card,
+      .timeline,
+      .notice {
+        border-radius: 2px;
+        box-shadow: none;
+      }
+
+      .command-panel {
+        border-color: var(--line);
+        padding: 16px;
+      }
+
+      form {
+        grid-template-columns: minmax(0, 1fr) 176px;
+      }
+
+      label {
+        color: var(--muted);
+        letter-spacing: 0.02em;
+        text-transform: uppercase;
+      }
+
+      input {
+        border-radius: 2px;
+        min-height: 52px;
+        font-size: 16px;
+      }
+
+      input:focus {
+        border-color: var(--accent);
+        outline: 3px solid rgba(240, 54, 3, 0.14);
+      }
+
+      .run-button {
+        background: var(--accent);
+        border-radius: 2px;
+        min-height: 52px;
+      }
+
+      .run-button:not(:disabled):hover {
+        background: var(--error);
+      }
+
+      .loading-state {
+        background: #fff8f5;
+        border-color: #f5c6b7;
+        border-radius: 2px;
+      }
+
+      .loading-bar {
+        background: #f2d9d1;
+      }
+
+      .loading-bar::before {
+        background: linear-gradient(90deg, var(--accent), var(--accent-2), #90c94d);
+      }
+
+      .source-strip {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+      }
+
+      .source-strip span {
+        align-items: center;
+        background: var(--surface);
+        border: 1px solid var(--line);
+        border-radius: 999px;
+        color: var(--muted);
+        display: inline-flex;
+        font-size: 12px;
+        font-weight: 750;
+        gap: 8px;
+        min-height: 30px;
+        padding: 0 12px;
+      }
+
+      .source-dot {
+        border-radius: 999px;
+        display: inline-block;
+        height: 8px;
+        width: 8px;
+      }
+
+      .source-dot.search {
+        background: #4da9e4;
+      }
+
+      .source-dot.fetch {
+        background: #90c94d;
+      }
+
+      .source-dot.browser {
+        background: #f4ba41;
+      }
+
+      .source-dot.verify {
+        background: #f03603;
+      }
+
+      .source-dot.artifacts {
+        background: #100d0d;
+      }
+
+      .brief-panel span {
+        color: var(--accent);
+        letter-spacing: 0.08em;
+      }
+
+      .brief-panel,
+      .explain-panel,
+      .panel,
+      .metric-card {
+        background: rgba(255, 255, 255, 0.94);
+      }
+
+      details {
+        border-radius: 2px;
+        background: var(--surface);
+      }
+
+      details[open] {
+        background: #fff8f5;
+        border-color: #f3b39f;
+      }
+
+      summary::after {
+        color: var(--accent);
+      }
+
+      .trust-note {
+        border-left-color: var(--accent);
+      }
+
+      .metrics {
+        grid-template-columns: repeat(4, minmax(150px, 1fr));
+      }
+
+      .metric-card strong {
+        font-size: 34px;
+      }
+
+      .timeline {
+        background: transparent;
+        border: 0;
+        display: grid;
+        gap: 12px;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        padding: 0;
+      }
+
+      .step {
+        background: var(--surface);
+        border-color: var(--line);
+        border-radius: 2px;
+        min-height: 118px;
+        overflow: hidden;
+        padding: 40px 12px 12px;
+        position: relative;
+      }
+
+      .step::before {
+        background:
+          radial-gradient(circle at 16px 50%, var(--accent) 0 4px, transparent 5px),
+          radial-gradient(circle at 30px 50%, #f4ba41 0 4px, transparent 5px),
+          radial-gradient(circle at 44px 50%, #90c94d 0 4px, transparent 5px),
+          #f7f3f0;
+        border-bottom: 1px solid var(--line);
+        content: "";
+        height: 26px;
+        inset: 0 0 auto;
+        position: absolute;
+      }
+
+      .step span {
+        color: var(--accent);
+        letter-spacing: 0.08em;
+      }
+
+      .step strong {
+        font-size: 15px;
+      }
+
+      .step.active {
+        border-color: var(--accent);
+        background: #fff8f5;
+      }
+
+      .step.active strong {
+        color: var(--accent);
+      }
+
+      .step.done {
+        border-color: #90c94d;
+        background: #f8fff1;
+      }
+
+      .step.failed {
+        border-color: var(--accent);
+        background: #fff1ec;
+      }
+
+      .tabs {
+        margin-bottom: 0;
+        padding: 12px 12px 0;
+      }
+
+      .panel {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+        min-height: 340px;
+      }
+
+      .summary-card,
+      .finding,
+      .source-card,
+      .artifact-card,
+      .sources-table-wrap,
+      pre {
+        border-radius: 2px;
+      }
+
+      .finding:hover,
+      .summary-card:hover {
+        border-color: var(--ink);
+      }
+
+      .notice {
+        background: #fff1ec;
+      }
+
+      @media (max-width: 1100px) {
+        .app-shell {
+          grid-template-columns: 280px minmax(0, 1fr);
+        }
+
+        .timeline {
+          grid-template-columns: repeat(2, minmax(0, 1fr));
+        }
+      }
+
+      @media (max-width: 980px) {
+        .app-shell {
+          border-inline: 0;
+          grid-template-columns: 1fr;
+        }
+
+        .sidebar {
+          border-bottom: 1px solid var(--line);
+          border-right: 0;
+          min-height: unset;
+          position: static;
+        }
+
+        .side-nav {
+          grid-template-columns: repeat(4, minmax(0, 1fr));
+        }
+
+        .history {
+          display: none;
+        }
+      }
+
+      @media (max-width: 680px) {
+        .workspace {
+          padding: 14px;
+        }
+
+        form,
+        .metrics,
+        .timeline {
+          grid-template-columns: 1fr;
+        }
+
+        .topbar h2 {
+          font-size: 13px;
+        }
+      }
     </style>
   </head>
   <body>
     <div class="app-shell">
       <aside class="sidebar">
         <div class="brand">
+          <img class="brand-logo" src="browserbase-logo.svg" alt="" />
           <p>Browserbase</p>
           <h1>bb research engine</h1>
         </div>
@@ -877,6 +1314,14 @@ <h2 id="workspace-title">Research workspace</h2>
             </div>
           </section>
 
+          <section class="source-strip" aria-label="Research stages">
+            <span><i class="source-dot search" aria-hidden="true"></i>Search</span>
+            <span><i class="source-dot fetch" aria-hidden="true"></i>Fetch</span>
+            <span><i class="source-dot browser" aria-hidden="true"></i>Browser fallback</span>
+            <span><i class="source-dot verify" aria-hidden="true"></i>Verifier</span>
+            <span><i class="source-dot artifacts" aria-hidden="true"></i>Artifacts</span>
+          </section>
+
           <section class="brief-panel" aria-labelledby="brief-heading">
             <span>System brief</span>
             <h2 id="brief-heading">Evidence-first web research, backed by Browserbase</h2>
@@ -896,7 +1341,7 @@ <h2 id="brief-heading">Evidence-first web research, backed by Browserbase</h2>
             <div class="explain-heading">
               <div>
                 <h2 id="explain-heading">How the engine works</h2>
-                <p>Open each stage to see what it contributes to the research pipeline.</p>
+                <p>Stage-by-stage audit trail for the research pipeline.</p>
               </div>
             </div>
             <div class="explain-grid">