https://devsnoop.com/assets/DemoView-D1WgSQEc.js

1import{c as d,d as k,o as y,g as v,b as r,e as a,f as e,h as o,u as n,z as i,F as l,r as c,k as z,i as p,w as _,t as w,y as C,S as h,D as S}from"./index-BFbI9vER.js";/**
2 * @license lucide-vue-next v0.414.0 - ISC
3 *
4 * This source code is licensed under the ISC license.
5 * See the LICENSE file in the root directory of this source tree.
6 */const T=d("BotIcon",[["path",{d:"M12 8V4H8",key:"hb8ula"}],["rect",{width:"16",height:"12",x:"4",y:"8",rx:"2",key:"enze0r"}],["path",{d:"M2 14h2",key:"vft8re"}],["path",{d:"M20 14h2",key:"4cs60a"}],["path",{d:"M15 13v2",key:"1xurst"}],["path",{d:"M9 13v2",key:"rq6x2g"}]]);/**
7 * @license lucide-vue-next v0.414.0 - ISC
8 *
9 * This source code is licensed under the ISC license.
10 * See the LICENSE file in the root directory of this source tree.
11 */const W=d("FileSearchIcon",[["path",{d:"M14 2v4a2 2 0 0 0 2 2h4",key:"tnqrlb"}],["path",{d:"M4.268 21a2 2 0 0 0 1.727 1H18a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v3",key:"ms7g94"}],["path",{d:"m9 18-1.5-1.5",key:"1j6qii"}],["circle",{cx:"5",cy:"14",r:"3",key:"ufru5t"}]]);/**
12 * @license lucide-vue-next v0.414.0 - ISC
13 *
14 * This source code is licensed under the ISC license.
15 * See the LICENSE file in the root directory of this source tree.
16 */const I=d("WrenchIcon",[["path",{d:"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z",key:"cbrjhi"}]]),M={class:"px-4 py-8 sm:px-6 sm:py-10"},D={class:"mx-auto max-w-5xl"},F={class:"mt-8 rounded-lg border border-primary/40 bg-zinc-950 p-5 shadow-2xl shadow-black/30"},L={class:"flex items-center gap-2 border-b border-zinc-800 pb-3"},R={class:"flex size-8 items-center justify-center rounded-md bg-primary/15 text-primary"},V={class:"mt-4 grid gap-2 text-sm text-zinc-400 md:grid-cols-3"},B={class:"flex gap-2"},j={class:"mt-5 grid gap-2 text-sm text-zinc-400"},A={class:"mt-6 flex flex-col gap-3 sm:flex-row"},H=["href"],N={class:"border-t border-zinc-800/60 px-4 py-10 sm:px-6"},q={class:"mx-auto max-w-5xl"},P={class:"mt-6 grid gap-6 lg:grid-cols-[1fr_1fr]"},U={class:"rounded-lg border border-zinc-800 bg-zinc-950 p-5"},E={class:"flex items-center gap-3"},J={class:"mt-4 space-y-3"},O={class:"rounded-lg border border-zinc-800 bg-zinc-950 p-5"},G={class:"flex items-center gap-3"},K="Debug why checkout does not start in Chrome with DevSnoop.",Z=k({__name:"DemoView",setup(Q){y(()=>{document.dispatchEvent(new Event("custom-render-trigger"))});const m=v({content:"demo_codex_claude"}),u=['Found button: text "Start checkout", selector button[data-checkout]',"Clicked button[data-checkout] on the active Chrome tab","Network failure: POST /api/checkout returned 401","Console: no JavaScript exception after click","Visual state: stayed on pricing page; no Stripe redirect","Fix target: authenticate before checkout or show login CTA"],x=["No screenshot guessing before the agent acts.","Selectors, HTTP status, and final visual state in one report.","Works against the real Chrome tab you already use."],g=["Finds the right Chrome tab, or opens one if needed.","Clicks the relevant UI and reads the browser failure.","Reports selectors, console logs, network errors, and visual state."];function b(){w({content:"demo_codex_claude",surface:"demo"})}return(X,t)=>{const f=C("RouterLink");return r(),a("div",null,[e("section",M,[e("div",D,[t[3]||(t[3]=e("div",{class:"max-w-4xl"},[e("p",{class:"font-mono text-xs uppercase tracking-[0.3em] text-primary/80"}," Real browser debugging replay "),e("h1",{class:"mt-4 font-mono text-3xl font-bold leading-tight tracking-tight sm:text-4xl"}," Watch an agent find the broken checkout click "),e("p",{class:"mt-4 max-w-2xl text-base leading-7 text-zinc-400"}," DevSnoop lets Codex, Claude Code, Cursor, and other local agents use your real Chrome tab. The agent clicks the UI, reads browser failures, and returns the exact evidence you need to fix the bug. ")],-1)),e("div",F,[e("div",L,[e("div",R,[o(n(T),{size:17})]),t[0]||(t[0]=e("div",null,[e("p",{class:"font-mono text-sm font-semibold text-zinc-200"},"The whole prompt"),e("p",{class:"text-xs text-zinc-500"},"Assuming the DevSnoop skill is installed")],-1))]),e("pre",{class:"mt-4 whitespace-pre-wrap rounded-md bg-zinc-900 p-5 font-mono text-lg leading-8 text-zinc-100"},[e("code",null,i(K))]),e("div",V,[(r(),a(l,null,c(g,s=>e("div",{key:s,class:"rounded-md border border-zinc-800 bg-zinc-900/50 p-3"},[e("div",B,[o(n(h),{size:15,class:"mt-0.5 shrink-0 text-primary"}),e("span",null,i(s),1)])])),64))])]),e("div",j,[(r(),a(l,null,c(x,s=>e("div",{key:s,class:"flex items-center gap-2"},[o(n(h),{size:15,class:"shrink-0 text-primary"}),e("span",null,i(s),1)])),64))]),e("div",A,[e("a",{href:n(m),target:"_blank",rel:"noopener",class:"inline-flex items-center justify-center gap-2 rounded-lg bg-primary px-5 py-3 text-sm font-semibold text-zinc-950 no-underline transition-colors hover:bg-primary-400 hover:text-zinc-950",onClick:b},[o(n(z),{size:18}),t[1]||(t[1]=p(" Add to Chrome ",-1))],8,H),o(f,{to:"/install",class:"inline-flex items-center justify-center gap-2 rounded-lg border border-zinc-700 px-5 py-3 text-sm font-semibold text-zinc-300 no-underline transition-colors hover:border-zinc-500 hover:text-white"},{default:_(()=>[t[2]||(t[2]=p(" Install host and try it ",-1)),o(n(S),{size:16})]),_:1})])])]),e("section",N,[e("div",q,[t[8]||(t[8]=e("div",null,[e("p",{class:"font-mono text-xs uppercase tracking-[0.25em] text-zinc-600"}," Browser evidence out "),e("h2",{class:"mt-3 font-mono text-xl font-bold text-zinc-300"}

16," What the agent reports back ")],-1)),e("div",P,[e("div",U,[e("div",E,[o(n(W),{size:20,class:"text-primary"}),t[4]||(t[4]=e("h3",{class:"font-mono text-lg font-bold"},"Agent report",-1))]),e("ul",J,[(r(),a(l,null,c(u,s=>e("li",{key:s,class:"flex gap-3 text-sm text-zinc-400"},[t[5]||(t[5]=e("span",{class:"mt-2 size-1.5 shrink-0 rounded-full bg-primary"},null,-1)),e("span",null,i(s),1)])),64))])]),e("div",O,[e("div",G,[o(n(I),{size:20,class:"text-primary"}),t[6]||(t[6]=e("h3",{class:"font-mono text-lg font-bold"},"Why this matters",-1))]),t[7]||(t[7]=e("div",{class:"mt-4 grid gap-3 text-sm leading-6 text-zinc-400"},[e("p",null,"The agent knows which element it clicked."),e("p",null,"It sees the failed browser request without you opening DevTools."),e("p",null,"It can tell whether the page changed after the action."),e("p",null,"The report gives you the next implementation step.")],-1))])])])])])}}});export{Z as default};