PageSourceSearch

https://devsnoop.com/assets/DocsView-BtGdPflR.js

js devsnoop.com collected 2026-10-02 00:16:08 UTC 25,914 bytes, 33 lines download raw bytes

1import{d as z,b as s,e as a,f as e,z as i,F as x,r as g,h as c,n as y,u,m as S,v as _,j as m,i as l,_ as f,s as q,o as I,g as T,k as D,l as w,A as R,t as B,B as L}from"./index-BFbI9vER.js";import{C}from"./chevron-down-Cu3Iphp6.js";const P=[{id:"tabs",label:"Tab Management"},{id:"inspect",label:"Page Inspection"},{id:"interact",label:"Page Interactions"},{id:"debug",label:"Debugging"},{id:"change",label:"Change Detection"},{id:"health",label:"Health Check"}],k=[{name:"list_tabs",category:"tabs",description:"Get all open tabs with IDs, URLs, and titles.",params:[],returns:"[{id, url, title, active}]",example:'{"command":"list_tabs","params":{}}'},{name:"open_tab",category:"tabs",description:"Open a new tab, optionally with a URL. Waits for page load.",params:[{name:"url",type:"string",required:!1,description:"URL to open. Blank tab if omitted."}],returns:"{tabID, url, title}",example:'{"command":"open_tab","params":{"url":"https://example.com"}}'},{name:"navigate",category:"tabs",description:"Change URL of an existing tab. Waits for page load.",params:[{name:"url",type:"string",required:!0,description:"URL to navigate to."}],returns:"{tabID, url, title}",example:'{"command":"navigate","params":{"url":"https://example.com/page"},"tabID":123}'},{name:"close_tab",category:"tabs",description:"Close an existing tab by ID, or the active tab if tabID is omitted.",params:[],returns:"{closed, tabID, url, title}",example:'{"command":"close_tab","params":{},"tabID":123}'},{name:"page_summary",category:"inspect",description:"Semantic DOM tree with interactive elements and ready-to-use selectors. Start here to understand a page.",params:[{name:"depth",type:"number",required:!1,description:"How deep to traverse the DOM.",default:"4"}],returns:"Nested regions with {tag, role, id, classes, textPreview, children, interactiveElements}. Interactive elements include {tag, type, label, selector, value}.",example:'{"command":"page_summary","params":{"depth":3}}',exampleResponse:`{
2  "ok": true,
3  "result": [
4    {
5      "tag": "header", "role": "banner",
6      "interactiveElements": [
7        { "tag": "a", "label": "Home", "selector": "nav a:nth-child(1)" },
8        { "tag": "button", "label": "Sign In", "selector": "header button" }
9      ]
10    },
11    {
12      "tag": "main",
13      "children": [
14        { "tag": "form", "id": "search",
15          "interactiveElements": [
16            { "tag": "input", "type": "text", "selector": "#search input" },
17            { "tag": "button", "label": "Search", "selector": "#search button" }
18          ]
19        }
20      ]
21    }
22  ]
23}`,notes:"This is the best starting point for any page. Without a license, start the 24h full-command preview from the extension popup first."},{name:"inspect_element",category:"inspect",description:"Single element's HTML subtree and computed styles.",params:[{name:"selector",type:"string",required:!1,description:"CSS selector for the element. Required if text is not provided."},{name:"text",type:"string",required:!1,description:"Find element by text content instead of selector."},{name:"depth",type:"number",required:!1,description:"How deep to traverse the subtree.",default:"3"},{name:"includeStyles",type:"boolean",required:!1,description:"Include computed styles.",default:"true"}],returns:"{element, subtree, styles} — styles grouped as {layout, sizing, typography, visual}.",example:'{"command":"inspect_element","params":{"selector":"#my-form","depth":2,"includeStyles":true}}'},{name:"find",category:"inspect",description:"Query elements by CSS selector or text content. Text search prioritizes interactive elements (buttons, links) and exact matches.",params:[{name:"selector",type:"string",required:!1,description:"CSS selector to match. Required if text is not provided."},{name:"text",type:"string",required:!1,description:"Find elements by text content instead of selector."},{name:"limit",type:"number",required:!1,description:"Max elements to return.",default:"20"}],returns:"{elements: [{tag, textContent, selector, boundingRect, classes, attributes}], totalCount}.",example:'{"command":"find","params":{"text":"Refresh Followers"}}'},{name:"tech_stack",category:"inspect",description:"Detect frameworks, libraries, and analytics on the page. Detects React, Vue, Next.js, Nuxt, Angular, Svelte, jQuery, Tailwind, Bootstrap, Shopify, WordPress, and more.",params:[],returns:"{detections: [{name, category, confidence, version}], count}.",example:'{"command":"tech_stack","params":{}}'},{name:"accessibility_audit",category:"inspect",description:"Run accessibility checks and get scored results. Checks for missing alt text, unlabeled inputs, skipped headings, duplicate IDs, missing landmarks, and more.",params:[],returns:"{issues, score (0-100), totalIssues}.",example:'{"command":"accessibility_audit","params":{}}'},{name:"legibility_audit",category:"inspect",description:"Run a heuristic visual QA pass for text and icons that may be hard to read. Checks weak contrast, tiny text, cramped lines, faded text, clipping, and text over image or gradient backgrounds.",params:[{name:"maxIssues",type:"number",required:!1,description:"Max issues to return.",default:"40"},{name:"viewportOnly",type:"boolean",required:!1,description:"Only check text currently visible in the viewport.",default:"true"}],returns:"{issues, score (0-100), summary, checkedTextNodes}. Each issue includes text/icon label, a verified selector when available, viewport and document location, contrast or style evidence, and a suggested fix. Icon findings include class and HTML snippet evidence. This is a legibility smoke test, not accessibility certification.",example:'{"command":"legibility_audit","params":{"viewportOnly":true},"tabID":123}'},{name:"screenshot",category:"inspect",description:"Capture a tab screenshot saved to a local file. Works on any tab by ID, regardless of which tab is focused.",params:[{name:"format",type:"string",required:!1,description:'"png" or "jpeg".',default:'"png"'},{name:"quality",type:"number",required:!1,description:"JPEG quality (1-100).",default:"90"},{name:"selector",type:"string",required:!1,description:"Capture a specific element (also returns bounding rect)."}],returns:'{dataURL: "/tmp/devsnoop-screenshots/screenshot-<ts>.png", elementBounds, width, height}. The dataURL field is a file path — use your file reading tool to view the image.',example:'{"command":"screenshot","params":{"format":"png"},"tabID":123}'},{name:"click",category:"interact",description:"Click an element by CSS selector, text content, or coordinates. Text search prioritizes interactive elements (buttons, links).",params:[{name:"selector",type:"string",required:!1,description:"CSS selector for the element to click."},{name:"text",type:"string",required:!1,description:"Find and click element by its text content."},{name:"x",type:"number",required:!1,description:"X coordinate to click at (use with y)."}
23,{name:"y",type:"number",required:!1,description:"Y coordinate to click at (use with x)."}],returns:"{clicked, element, selector} — selector is a unique CSS path for the clicked element.",example:'{"command":"click","params":{"text":"Submit"}}',notes:"Provide one of: selector, text, or x+y coordinates."},{name:"fill",category:"interact",description:"Set value of input, textarea, select, or contenteditable. Fires input/change events.",params:[{name:"selector",type:"string",required:!1,description:"CSS selector for the input element. Required if text is not provided."},{name:"text",type:"string",required:!1,description:"Find input by text content instead of selector."},{name:"value",type:"string",required:!0,description:"Value to set."}],returns:"{filled, element, previousValue}.",example:'{"command":"fill","params":{"selector":"#email","value":"[email protected]"}}'},{name:"scroll",category:"interact",description:"Scroll the page or scroll an element into view.",params:[{name:"direction",type:"string",required:!1,description:'"up", "down", "left", or "right".'},{name:"amount",type:"number",required:!1,description:"Pixels to scroll.",default:"300"},{name:"selector",type:"string",required:!1,description:"CSS selector — scrolls element into view instead."}],returns:"{scrolled, position: {x, y}}.",example:'{"command":"scroll","params":{"direction":"down","amount":300}}',notes:"Use either direction+amount OR selector, not both."},{name:"hover",category:"interact",description:"Trigger hover events on an element.",params:[{name:"selector",type:"string",required:!1,description:"CSS selector for the element to hover. Required if text is not provided."},{name:"text",type:"string",required:!1,description:"Find element by text content instead of selector."}],returns:"{hovered, element}.",example:'{"command":"hover","params":{"text":"Menu"}}'},{name:"get_logs",category:"debug",description:"Console logs and JS exceptions from the page. Auto-attaches Chrome debugger on first call.",params:[{name:"level",type:"string",required:!1,description:'"log", "warning", "error", "info", or "debug".'},{name:"since",type:"number",required:!1,description:"Unix ms timestamp — only return entries after this time."},{name:"limit",type:"number",required:!1,description:"Return last N entries."}],returns:"{logs: [{level, text, url, line, timestamp}], exceptions: [{text, description, stackTrace, timestamp}]}.",example:'{"command":"get_logs","params":{"level":"error","limit":10}}',notes:"Logs are buffered (200 entries max). Call early if you need to capture events."},{name:"get_network",category:"debug",description:"Network requests with filtering, plus optional redacted request/response bodies. Auto-attaches Chrome debugger on first call.",params:[{name:"status",type:"number",required:!1,description:"Exact HTTP status code."},{name:"type",type:"string",required:!1,description:'"XHR", "Fetch", etc.'},{name:"urlPattern",type:"string",required:!1,description:"Regex to filter by URL."},{name:"errorsOnly",type:"boolean",required:!1,description:"Only return failed requests."},{name:"limit",type:"number",required:!1,description:"Max entries to return."},{name:"includeRequestBody",type:"boolean",required:!1,description:"Include redacted request body text when Chrome has post data."},{name:"includeResponseBody",type:"boolean",required:!1,description:"Include redacted response body text after the request finishes."},{name:"bodyMaxBytes",type:"number",required:!1,description:"Max bytes per body. Capped at 20000.",default:"20000"},{name:"redactBody",type:"boolean",required:!1,description:"Redact common token, password, cookie, authorization, session, secret, API key, license key, and CSRF fields.",default:"true"},{name:"redactKeys",type:"string[]",required:!1,description:"Extra body key substrings to redact."}],returns:"{requests: [{method, url, status, type, duration, size, error, requestBody, responseBody}]}. Bodies are returned only when explicitly requested.",example:'{"command":"get_network","params":{"urlPattern":"api","includeRequestBody":true,"bodyMaxBytes":12000},"tabID":123}',notes:"Body capture uses the existing Chrome debugger permission. It does not add another Chrome Web Store permission."},{name:"diff",category:"change",description:"Track DOM changes. First call takes a baseline snapshot. Second call compares against it. Useful after hot-reload.",params:[],returns:"First call: {baseline: true, message, timestamp, url}. Second call: {changes: [{type, path, details}], summary: {added, removed, changed}}.",example:'{"command":"diff","params":{}}',notes:"Take a baseline, make code changes (page hot-reloads), then call again to see what changed."},{name:"ping",category:"health",description:"Verify the connection, license state, and 24h preview state. Available without a license.",params:[],returns:"{pong: true, timestamp, version, license, preview}.",example:'{"command":"ping","params":{}}'}],$={class:"rounded-lg border border-zinc-800 bg-zinc-900/50 transition-colors hover:border-zinc-700"},M={class:"min-w-0"},O={class:"flex items-center gap-3"},U={class:"font-mono text-sm font-bold text-primary"},F={class:"mt-1.5 text-sm text-zinc-400"},E={class:"border-t border-zinc-800 px-5 py-4"},H={key:0},W={class:"mt-2 space-y-2"},Y={class:"font-mono text-zinc-200"},N={class:"font-mono text-[10px] text-zinc-600"},A={key:0,class:"rounded bg-primary/10 px-1 py-0.5 font-mono text-[10px] text-primary"},V={class:"text-zinc-400"},j={key:1,class:"text-zinc-600"},K={class:"font-mono text-zinc-500"},X={class:"mt-1 text-sm text-zinc-400"},G={class:"mt-4"},J={class:"mt-2"}
23,Q={key:0,class:"mt-2"},Z={key:1,class:"mt-4 rounded-md bg-zinc-800/50 px-3 py-2"},ee={class:"text-xs text-zinc-400"},te=z({__name:"CommandCard",props:{command:{}},setup(r){const d=q(!1);return(p,o)=>(s(),a("div",$,[e("button",{class:"flex w-full items-start justify-between px-5 py-4 text-left",onClick:o[0]||(o[0]=n=>d.value=!d.value)},[e("div",M,[e("div",O,[e("code",U,i(r.command.name),1),(s(!0),a(x,null,g(r.command.params.filter(n=>n.required),n=>(s(),a("span",{key:n.name,class:"rounded bg-zinc-800 px-1.5 py-0.5 font-mono text-[10px] text-zinc-400"},i(n.name),1))),128))]),e("p",F,i(r.command.description),1)]),c(u(C),{size:16,class:y(["ml-4 mt-1 shrink-0 text-zinc-500 transition-transform duration-200",{"rotate-180":d.value}])},null,8,["class"])]),S(e("div",E,[r.command.params.length>0?(s(),a("div",H,[o[3]||(o[3]=e("h4",{class:"font-mono text-xs font-semibold uppercase tracking-wider text-zinc-500"}," Parameters ",-1)),e("div",W,[(s(!0),a(x,null,g(r.command.params,n=>(s(),a("div",{key:n.name,class:"flex items-baseline gap-2 text-sm"},[e("code",Y,i(n.name),1),e("span",N,i(n.type),1),n.required?(s(),a("span",A,"required")):m("",!0),o[2]||(o[2]=e("span",{class:"text-zinc-500"},"—",-1)),e("span",V,i(n.description),1),n.default?(s(),a("span",j,[o[1]||(o[1]=l(" Default: ",-1)),e("code",K,i(n.default),1)])):m("",!0)]))),128))])])):m("",!0),e("div",{class:y(r.command.params.length>0?"mt-4":"")},[o[4]||(o[4]=e("h4",{class:"font-mono text-xs font-semibold uppercase tracking-wider text-zinc-500"}," Returns ",-1)),e("p",X,i(r.command.returns),1)],2),e("div",G,[o[5]||(o[5]=e("h4",{class:"font-mono text-xs font-semibold uppercase tracking-wider text-zinc-500"}," Example ",-1)),e("div",J,[c(f,{code:r.command.example},null,8,["code"])]),r.command.exampleResponse?(s(),a("div",Q,[c(f,{code:r.command.exampleResponse,lang:"response"},null,8,["code"])])):m("",!0)]),r.command.notes?(s(),a("div",Z,[e("p",ee,i(r.command.notes),1)])):m("",!0)],512),[[_,d.value]])]))}}),se={class:"px-4 py-10 sm:px-6 sm:py-12"},ne={class:"mx-auto max-w-4xl"},ae={class:"mt-6"},oe=["href"],re={class:"border-t border-zinc-800/60 px-4 py-10 sm:px-6"},ie={class:"mx-auto max-w-4xl"},le={class:"mt-6"},ce={class:"border-t border-zinc-800/60 px-4 py-10 sm:px-6"},de={class:"mx-auto max-w-4xl"},me={class:"mt-2 text-zinc-400"},pe={key:0,class:"mt-8"},ue={class:"mb-8"},he={class:"mt-4"},xe={class:"font-mono text-lg font-bold text-zinc-300"},ge={class:"mt-4 space-y-3"},fe=`curl -s -X POST http://127.0.0.1:9400/ \\
24  -H 'Content-Type: application/json' \\
25  -d '{"command":"<command>","params":{...},"tabID":<optional>}'`,be=`# See every connected Chrome profile
26curl -s -X POST http://127.0.0.1:9400/ \\
27  -H 'Content-Type: application/json' \\
28  -d '{"command":"list_connections","params":{}}'
29
30# Choose the default profile for later commands
31curl -s -X POST http://127.0.0.1:9400/ \\
32  -H 'Content-Type: application/json' \\
33  -d '{"command":"select_connection","params":{"connectionID":"native-123-example"}}'`,we=z({__name:"DocsView",setup(r){I(()=>{document.dispatchEvent(new Event("custom-render-trigger"))});const d=R(()=>P.map(b=>({...b,commands:k.filter(t=>t.category===b.id)}))),p=q(!0),o=T({content:"docs_header"});function n(){B({content:"docs_header",surface:"docs"})}return(b,t)=>(s(),a("div",null,[e("section",se,[e("div",ne,[t[2]||(t[2]=e("h1",{class:"font-mono text-3xl font-bold tracking-tight sm:text-4xl"}," What You Can Do with DevSnoop ",-1)),t[3]||(t[3]=e("p",{class:"mt-4 text-lg text-zinc-400"}," Your coding agent controls a real Chrome browser — inspect pages, fill forms, catch errors, and verify changes. Just describe what you want. ",-1)),t[4]||(t[4]=e("p",{class:"mt-3 text-sm text-zinc-500"},[l(" DevSnoop ships with a "),e("code",{class:"rounded bg-zinc-800 px-1 py-0.5 font-mono text-xs text-primary"},"SKILL.md"),l(" file that teaches your agent every command. You write prompts, the agent handles the rest. ")],-1)),e("div",ae,[e("a",{href:u(o),target:"_blank",rel:"noopener",class:"inline-flex items-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:n},[c(u(D),{size:18}),t[1]||(t[1]=l(" Add to Chrome ",-1))],8,oe)])])]),e("section",re,[e("div",ie,[t[5]||(t[5]=w('<p class="font-mono text-xs uppercase tracking-[0.3em] text-primary/80"> Multiple Chrome profiles </p><h2 class="mt-3 font-mono text-2xl font-bold">Keep every browser context distinct</h2><p class="mt-3 text-sm leading-7 text-zinc-400"> Open the DevSnoop popup in each Chrome profile and give it a label such as <span class="text-zinc-200">Normal</span> or <span class="text-zinc-200">SeatPlanMaker PostHog</span>. Your agent can list the connected profiles, select one, and work only with the tabs and logged-in sites in that profile. </p>',3)),e("div",le,[c(f,{code:be,lang:"bash"})]),t[6]||(t[6]=e("p",{class:"mt-4 text-sm leading-7 text-zinc-500"},[l(" Labels are optional. With one Chrome profile, DevSnoop works as before. Each installation also has a stable local profile ID, so agents can distinguish profiles even when you do not add a label. Add a top-level "),e("code",null,"connectionID"),l(" to target one request without changing the selected profile. ")],-1))])]),t[12]||(t[12]=w('<section class="border-t border-zinc-800/60 px-4 py-10 sm:px-6"><div class="mx-auto max-w-4xl"><p class="font-mono text-xs uppercase tracking-[0.3em] text-primary/80"> Agent loop recipe </p><h2 class="mt-3 font-mono text-2xl font-bold">Inspect, act, verify, then edit</h2><p class="mt-3 text-sm leading-7 text-zinc-400"> Use this when the agent is about to change frontend code. The point is to collect browser evidence from the local Chrome tab before opening files. </p><div class="mt-6 rounded-lg border border-zinc-800 bg-zinc-950 p-5"><ol class="space-y-4 text-sm leading-7 text-zinc-300"><li class="flex gap-3"><span class="font-mono text-primary">1</span><span> Start with <code>page_summary</code> so the agent sees current text, controls, regions, selectors, and tab context. </span></li><li class="flex gap-3"><span class="font-mono text-primary">2</span><span> Reproduce the user path with <code>click</code>, <code>fill</code>, <code>scroll</code>, or <code>hover</code>. </span></li><li class="flex gap-3"><span class="font-mono text-primary">3</span><span> Read <code>get_network</code> and <code>get_logs</code>. Include redacted bodies only when payloads matter. </span></li><li class="flex gap-3"><span class="font-mono text-primary">4</span><span> Run <code>diff</code> after the action or hot reload so the agent checks what the page did, not just what the code says. </span></li><li class="flex gap-3"><span class="font-mono text-primary">5</span><span> Use <code>screenshot</code> when visual state matters: layout, clipping, contrast, modal position, or review evidence. </span></li><li class="flex gap-3"><span class="font-mono text-primary">6</span><span> Then edit. If the evidence points to a request, fix request code. If it points to state or rendering, fix the feature. </span></li></ol></div><div class="mt-4 rounded-lg border border-zinc-800 bg-zinc-900/50 px-5 py-4 text-sm text-zinc-300"><span class="text-zinc-500">You:</span> &quot;Before editing, close the browser loop: page_summary, reproduce the flow, get_network, get_logs, diff, and screenshot only if the visible state matters. Then tell me which file you will edit and why.&quot; </div></div></section><section class="border-t border-zinc-800/60 px-4 py-10 sm:px-6"><div class="mx-auto max-w-4xl"><h2 class="font-mono text-2xl font-bold">Workflows</h2><p class="mt-2 text-zinc-400"> Tell your agent what you need. It picks the right commands automatically. </p><div class="mt-8 space-y-8"><div><h3 class="font-mono text-base font-semibold text-zinc-200"> Inspect a page you&#39;re building </h3><p class="mt-2 text-sm text-zinc-400"> The agent finds the tab, reads the page structure, and checks for c
33onsole errors — all in one go. </p><div class="mt-3 rounded-lg border border-zinc-800 bg-zinc-900/50 px-5 py-4 text-sm text-zinc-300"><span class="text-zinc-500">You:</span> &quot;Check my local app. What does the page look like, and are there any errors?&quot; </div></div><div><h3 class="font-mono text-base font-semibold text-zinc-200">Test a form interaction</h3><p class="mt-2 text-sm text-zinc-400"> The agent finds inputs by label, fills them, clicks submit, and reports back any errors. </p><div class="mt-3 rounded-lg border border-zinc-800 bg-zinc-900/50 px-5 py-4 text-sm text-zinc-300"><span class="text-zinc-500">You:</span> &quot;Fill in the signup form with test data and submit it. Let me know if anything breaks.&quot; </div></div><div><h3 class="font-mono text-base font-semibold text-zinc-200"> Verify visual changes after code edits </h3><p class="mt-2 text-sm text-zinc-400"> The agent snapshots the page before your change, waits for hot-reload, then diffs to show exactly what shifted. </p><div class="mt-3 rounded-lg border border-zinc-800 bg-zinc-900/50 px-5 py-4 text-sm text-zinc-300"><span class="text-zinc-500">You:</span> &quot;Take a snapshot of the page, then after I change the header styles, tell me what changed.&quot; </div></div><div><h3 class="font-mono text-base font-semibold text-zinc-200"> Debug a failing API call </h3><p class="mt-2 text-sm text-zinc-400"> The agent watches network requests and console output, filters for errors, and can include redacted request or response bodies when payloads matter. </p><div class="mt-3 rounded-lg border border-zinc-800 bg-zinc-900/50 px-5 py-4 text-sm text-zinc-300"><span class="text-zinc-500">You:</span> &quot;Something&#39;s broken on the dashboard — check for failed network requests and JS errors.&quot; </div></div><div><h3 class="font-mono text-base font-semibold text-zinc-200"> Collect a debug bundle before editing </h3><p class="mt-2 text-sm text-zinc-400"> The agent reads the page, reproduces the bug, checks network failures and console logs, diffs the DOM, then captures a screenshot only when visual state matters. </p><div class="mt-3 rounded-lg border border-zinc-800 bg-zinc-900/50 px-5 py-4 text-sm text-zinc-300"><span class="text-zinc-500">You:</span> &quot;Before editing, collect a compact debug bundle: page summary, reproduce the issue, network, logs, diff, and screenshot only if needed.&quot; </div></div><div><h3 class="font-mono text-base font-semibold text-zinc-200"> Grab a screenshot for review </h3><p class="mt-2 text-sm text-zinc-400"> The agent captures any tab — even background ones — and saves it locally for you or itself to review. </p><div class="mt-3 rounded-lg border border-zinc-800 bg-zinc-900/50 px-5 py-4 text-sm text-zinc-300"><span class="text-zinc-500">You:</span> &quot;Screenshot the current page so you can see what I&#39;m looking at.&quot; </div></div></div></div></section><section class="border-t border-zinc-800/60 px-4 py-10 sm:px-6"><div class="mx-auto max-w-4xl"><h2 class="font-mono text-lg font-bold text-zinc-300">Good to Know</h2><ul class="mt-4 space-y-3 text-sm text-zinc-400"><li class="flex gap-2"><span class="shrink-0 text-primary">-</span> Your agent gets structured data back — no raw HTML, minimal tokens. </li><li class="flex gap-2"><span class="shrink-0 text-primary">-</span> The agent uses <code class="rounded bg-zinc-800 px-1 py-0.5 font-mono text-xs text-primary">page_summary</code> as its starting point — it returns selectors the agent passes directly to other commands. </li><li class="flex gap-2"><span class="shrink-0 text-primary">-</span> Console logs and network requests are captured automatically when the agent starts debugging. Logs buffer up to 200 entries. Network bodies are opt-in and redacted by default. </li><li class="flex gap-2"><span class="shrink-0 text-primary">-</span> First time on a site? Click the DevSnoop extension icon to grant access. One-time per origin. </li></ul></div></section>',3)),e("section",ce,[e("div",de,[e("button",{class:"flex w-full items-center justify-between text-left",onClick:t[0]||(t[0]=h=>p.value=!p.value)},[e("div",null,[t[9]||(t[9]=e("h2",{class:"font-mono text-2xl font-bold"},"Command Reference",-1)),e("p",me,[l(" All "+i(u(k).length)+" commands your agent can use. You don't need to learn these — the ",1),t[7]||
33(t[7]=e("code",{class:"rounded bg-zinc-800 px-1 py-0.5 font-mono text-xs text-primary"},"SKILL.md",-1)),t[8]||(t[8]=l(" file handles it. ",-1))])]),c(u(C),{size:20,class:y(["ml-4 shrink-0 text-zinc-500 transition-transform duration-200",{"rotate-180":p.value}])},null,8,["class"])]),p.value?(s(),a("div",pe,[e("div",ue,[t[10]||(t[10]=e("h3",{class:"font-mono text-lg font-bold text-zinc-300"},"Base Request",-1)),t[11]||(t[11]=e("p",{class:"mt-2 text-sm text-zinc-400"},[l(" Every command is a POST to the same endpoint. Use "),e("code",{class:"rounded bg-zinc-800 px-1 py-0.5 font-mono text-xs text-primary"},"tabID"),l(" to target a specific tab, or omit it for the active tab. ")],-1)),e("div",he,[c(f,{code:fe,lang:"bash"})])]),(s(!0),a(x,null,g(d.value,h=>(s(),a("div",{key:h.id,class:"border-t border-zinc-800/60 py-8"},[e("h3",xe,i(h.label),1),e("div",ge,[(s(!0),a(x,null,g(h.commands,v=>(s(),L(te,{key:v.name,command:v},null,8,["command"]))),128))])]))),128))])):m("",!0)])])]))}});export{we as default};

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.