npm - @pyric/cli - Versions diffs - 0.1.0-alpha.14 → 0.1.0-alpha.15 - Mend

@pyric/cli 0.1.0-alpha.14 → 0.1.0-alpha.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (599) hide show

package/dist/serve/site-ui/docs/pyric-ui-agents-reference-api/index.html ADDED Viewed

@@ -0,0 +1,639 @@
+<!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>API reference: @pyric/ui/agents · Pyric Studio</title><meta name="description" content="Published declarations for @pyric/ui/agents."><link rel="icon" type="image/svg+xml" href="/__pyric/ui/pyric-logo.svg"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet"><link rel="stylesheet" href="/__pyric/ui/_astro/_slug_.CXh9yTP1.css">
+<link rel="stylesheet" href="/__pyric/ui/_astro/_slug_.BoKXYrnu.css"></head> <body> <header class="studio__bar" data-astro-cid-mw7aashj> <div class="studio__bar-inner" data-astro-cid-mw7aashj> <a class="studio__brand" href="/__pyric/ui/" aria-label="Pyric Studio" data-astro-cid-mw7aashj>Pyric</a> <nav class="studio__nav" aria-label="Studio tabs" data-astro-cid-mw7aashj> <a class="studio__nav-tab" href="/__pyric/ui/" data-astro-cid-mw7aashj> Home </a><a class="studio__nav-tab" href="/__pyric/ui/firestore" data-astro-cid-mw7aashj> Firestore </a><a class="studio__nav-tab" href="/__pyric/ui/auth" data-astro-cid-mw7aashj> Auth </a><a class="studio__nav-tab" href="/__pyric/ui/rtdb" data-astro-cid-mw7aashj> RTDB </a><a class="studio__nav-tab" href="/__pyric/ui/storage" data-astro-cid-mw7aashj> Storage </a><a class="studio__nav-tab" href="/__pyric/ui/traffic" data-astro-cid-mw7aashj> Traffic </a><a class="studio__nav-tab" href="/__pyric/ui/settings" data-astro-cid-mw7aashj> Settings </a><a class="studio__nav-tab" href="/__pyric/ui/docs" aria-current="page" data-astro-cid-mw7aashj> Docs </a> </nav> </div> </header> <div class="docs-shell" data-astro-cid-mw7aashj>  <details class="docs-nav-drawer" data-astro-cid-mw7aashj> <summary data-astro-cid-mw7aashj>Navigate</summary> <nav class="docs-nav" aria-label="Documentation"> <div class="docs-search" data-index-url="/__pyric/ui/docs/index.json"> <div class="docs-search-field"> <svg class="docs-search-icon" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"> <path d="M11.5 11.5 15 15M13 7A6 6 0 1 1 1 7a6 6 0 0 1 12 0Z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"></path> </svg> <input type="text" class="docs-search-input" placeholder="Search docs" aria-label="Search docs" autocomplete="off" spellcheck="false"> <kbd class="docs-search-kbd">⌘K</kbd> </div> <ul class="docs-search-results" hidden></ul> </div> <script type="module">let i=null;function d(t){return i||(i=fetch(t).then(e=>e.json())),i}function l(t,e){return t.title.toLowerCase().includes(e)||t.excerpt.toLowerCase().includes(e)?!0:t.headings.some(r=>r.text.toLowerCase().includes(e))}function u(t,e,r){if(e.innerHTML="",t.length===0){e.hidden=!1;{const n=document.createElement("li");n.className="docs-search-empty",n.textContent="No matches",e.appendChild(n)}return}e.hidden=!1;for(const n of t.slice(0,8)){const s=document.createElement("li"),c=document.createElement("a");c.href=n.path;const o=document.createElement("span");o.className="docs-search-result-title",o.textContent=n.title;const a=document.createElement("span");a.className="docs-search-result-meta",a.textContent=[n.group,n.section].filter(Boolean).join(" / "),c.append(o,a),s.appendChild(c),e.appendChild(s)}}document.querySelectorAll(".docs-search").forEach(t=>{const e=t.dataset.indexUrl,r=t.querySelector(".docs-search-input"),n=t.querySelector(".docs-search-results");r.addEventListener("input",async()=>{const s=r.value.trim().toLowerCase();if(!s){n.hidden=!0,n.innerHTML="";return}const{pages:c}=await d(e);r.value.trim().toLowerCase()===s&&u(c.filter(o=>l(o,s)),n)}),r.addEventListener("focus",()=>{d(e),n.childElementCount>0&&(n.hidden=!1)}),r.addEventListener("keydown",s=>{s.key==="Escape"&&(r.value="",n.hidden=!0,n.innerHTML="",r.blur())}),r.addEventListener("blur",()=>{window.setTimeout(()=>{n.hidden=!0},150)})});document.addEventListener("keydown",t=>{if(!(t.metaKey||t.ctrlKey)||t.key.toLowerCase()!=="k")return;const e=[...document.querySelectorAll(".docs-search-input")].find(r=>r.offsetParent!==null);e&&(t.preventDefault(),e.focus(),e.select())});</script> <details class="docs-nav-group"> <summary>Overview</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/overview/"> Overview </a> </li><li> <a href="/__pyric/ui/docs/tutorial/"> Tutorial </a> </li><li> <a href="/__pyric/ui/docs/examples/"> Examples </a> </li> </ul> </div> </div> </details><details class="docs-nav-group"> <summary>Get started</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/get-started/start-building/"> Quickstart </a> </li><li> <a href="/__pyric/ui/docs/get-started/how-the-swap-works/"> How the swap works </a> </li> </ul> </div> </div> </details><details class="docs-nav-group"> <summary>Build</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/build/authentication/"> Authentication </a> </li><li> <a href="/__pyric/ui/docs/build/cloud-firestore/"> Cloud Firestore </a> </li><li> <a href="/__pyric/ui/docs/build/realtime-database/"> Realtime Database </a> </li><li> <a href="/__pyric/ui/docs/build/cloud-storage/"> Cloud Storage </a> </li><li> <a href="/__pyric/ui/docs/build/cloud-messaging/"> Cloud Messaging </a> </li><li> <a href="/__pyric/ui/docs/build/ai-logic/"> AI Logic </a> </li> </ul> </div> </div> </details><details class="docs-nav-group"> <summary>Secure &amp; debug</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/secure/secure-it-with-rules/"> Security Rules </a> </li><li> <a href="/__pyric/ui/docs/secure/simulate-and-lint/"> Simulate and lint before you deploy </a> </li><li> <a href="/__pyric/ui/docs/secure/write-a-rules-test-suite/"> Write a rules test suite </a> </li><li> <a href="/__pyric/ui/docs/secure/read-a-denial/"> Read a denial and understand it </a> </li><li> <a href="/__pyric/ui/docs/secure/rules-standard-library/"> The rules standard library </a> </li><li> <a href="/__pyric/ui/docs/secure/rtdb-rules-in-typescript/"> RTDB rules in TypeScript </a> </li><li> <a href="/__pyric/ui/docs/secure/firestore-rules-limits/"> Rules limits </a> </li><li> <a href="/__pyric/ui/docs/secure/audit-your-rules/"> Audit rules and data </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading"> Examples </h2> <ul> <li> <a href="/__pyric/ui/docs/examples/chess/"> Chess showcase </a> </li> </ul> </div> </div> </details><details class="docs-nav-group"> <summary>Observe &amp; shape</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/observe/see-whats-happening/"> Traffic &amp; rule verdicts </a> </li><li> <a href="/__pyric/ui/docs/observe/resolve-runtime-status/"> Runtime status </a> </li><li> <a href="/__pyric/ui/docs/observe/shape-your-data/"> Seed, snapshot, replay </a> </li> </ul> </div> </div> </details><details class="docs-nav-group"> <summary>Ship &amp; test</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/ship/ship-to-production/"> Ship to production </a> </li><li> <a href="/__pyric/ui/docs/ship/test-in-node/"> Test in Node </a> </li> </ul> </div> </div> </details><details class="docs-nav-group"> <summary>Work with an agent</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/agent/set-up-your-agent/"> Connect an agent </a> </li><li> <a href="/__pyric/ui/docs/agent/work-with-an-agent/"> Use the MCP tools </a> </li><li> <a href="/__pyric/ui/docs/agent/watch-and-review/"> Watch in Pyric Studio </a> </li> </ul> </div> </div> </details><details class="docs-nav-group"> <summary>Trust</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/trust/versioning-and-compatibility/"> Versioning and the fb tag </a> </li><li> <a href="/__pyric/ui/docs/trust/storage-rules-stdlib-research/"> Storage Rules modules: evidence and design </a> </li><li> <a href="/__pyric/ui/docs/trust/rules-standard-library/"> Rules standard library reference </a> </li> </ul> </div> </div> </details><details class="docs-nav-group"> <summary>Conformance</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/conformance-scores/"> Public API coverage </a> </li><li> <a href="/__pyric/ui/docs/trust/how-we-know-it-matches-firebase/"> How we know it matches Firebase </a> </li><li> <a href="/__pyric/ui/docs/app-compat/"> App </a> </li><li> <a href="/__pyric/ui/docs/ai-compat/"> AI Logic </a> </li><li> <a href="/__pyric/ui/docs/auth-compat/"> Auth </a> </li><li> <a href="/__pyric/ui/docs/firestore-compat/"> Firestore </a> </li><li> <a href="/__pyric/ui/docs/database-compat/"> Realtime Database </a> </li><li> <a href="/__pyric/ui/docs/storage-compat/"> Storage </a> </li><li> <a href="/__pyric/ui/docs/messaging-compat/"> Messaging </a> </li><li> <a href="/__pyric/ui/docs/functions-rtdb-compat/"> Functions · RTDB </a> </li><li> <a href="/__pyric/ui/docs/rules-compat/"> Rules </a> </li> </ul> </div> </div> </details> <details class="docs-nav-group" open> <summary>Reference</summary> <div class="docs-nav-group-body docs-nav-group-body--reference"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/api-reference/"> API reference </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading">pyric</h2> <ul> <li> <a href="/__pyric/ui/docs/pyric-app-reference-api/"> pyric/app </a> </li><li> <a href="/__pyric/ui/docs/pyric-firestore-reference-api/"> pyric/firestore </a> </li><li> <a href="/__pyric/ui/docs/pyric-auth-reference-api/"> pyric/auth </a> </li><li> <a href="/__pyric/ui/docs/pyric-ai-reference-api/"> pyric/ai </a> </li><li> <a href="/__pyric/ui/docs/pyric-ai-scripting-reference-api/"> pyric/ai/scripting </a> </li><li> <a href="/__pyric/ui/docs/pyric-database-reference-api/"> pyric/database </a> </li><li> <a href="/__pyric/ui/docs/pyric-storage-reference-api/"> pyric/storage </a> </li><li> <a href="/__pyric/ui/docs/pyric-messaging-reference-api/"> pyric/messaging </a> </li><li> <a href="/__pyric/ui/docs/pyric-messaging-sw-reference-api/"> pyric/messaging/sw </a> </li><li> <a href="/__pyric/ui/docs/pyric-rules-reference-api/"> pyric/rules </a> </li><li> <a href="/__pyric/ui/docs/pyric-sandbox-reference-api/"> pyric/sandbox </a> </li><li> <a href="/__pyric/ui/docs/pyric-sandbox-firestore-reference-api/"> pyric/sandbox/firestore </a> </li><li> <a href="/__pyric/ui/docs/pyric-sandbox-database-reference-api/"> pyric/sandbox/database </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading">pyric-admin</h2> <ul> <li> <a href="/__pyric/ui/docs/pyric-admin-app-reference-api/"> pyric-admin/app </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-firestore-reference-api/"> pyric-admin/firestore </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-auth-reference-api/"> pyric-admin/auth </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-database-reference-api/"> pyric-admin/database </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-storage-reference-api/"> pyric-admin/storage </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-messaging-reference-api/"> pyric-admin/messaging </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading">create-pyric</h2> <ul> <li> <a href="/__pyric/ui/docs/create-pyric-reference-api/"> create-pyric </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading">@pyric/cli</h2> <ul> <li> <a href="/__pyric/ui/docs/pyric-cli-credentials-node-reference-api/"> @pyric/cli/credentials/node </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-verify-reference-api/"> @pyric/cli/verify </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-conformance-reference-api/"> @pyric/cli/conformance </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-conformance-browser-reference-api/"> @pyric/cli/conformance/browser </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-conformance-docs-reference-api/"> @pyric/cli/conformance/docs </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-assurance-reference-api/"> @pyric/cli/assurance </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-assurance-browser-reference-api/"> @pyric/cli/assurance/browser </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-bridge-reference-api/"> @pyric/cli/bridge </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-bridge-client-reference-api/"> @pyric/cli/bridge/client </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-discover-reference-api/"> @pyric/cli/discover </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-vite-reference-api/"> @pyric/cli/vite </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-serve-worker-reference-api/"> @pyric/cli/serve/worker </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-remote-reference-api/"> @pyric/cli/remote </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-register-reference-api/"> @pyric/cli/register </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading">@pyric/ui</h2> <ul> <li> <a href="/__pyric/ui/docs/pyric-ui-auth-reference-api/"> @pyric/ui/auth </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-auth-hooks-reference-api/"> @pyric/ui/auth/hooks </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-primitives-reference-api/"> @pyric/ui/primitives </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-firestore-reference-api/"> @pyric/ui/firestore </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-firestore-hooks-reference-api/"> @pyric/ui/firestore/hooks </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-rtdb-reference-api/"> @pyric/ui/rtdb </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-storage-reference-api/"> @pyric/ui/storage </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-storage-hooks-reference-api/"> @pyric/ui/storage/hooks </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-traffic-reference-api/"> @pyric/ui/traffic </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-traffic-hooks-reference-api/"> @pyric/ui/traffic/hooks </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-events-reference-api/"> @pyric/ui/events </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-events-hooks-reference-api/"> @pyric/ui/events/hooks </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-agents-reference-api/" aria-current="page"> @pyric/ui/agents </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-rules-reference-api/"> @pyric/ui/rules </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-rules-hooks-reference-api/"> @pyric/ui/rules/hooks </a> </li> </ul> </div> </div> </details> </nav> </details> <nav class="docs-nav" aria-label="Documentation"> <div class="docs-search" data-index-url="/__pyric/ui/docs/index.json"> <div class="docs-search-field"> <svg class="docs-search-icon" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"> <path d="M11.5 11.5 15 15M13 7A6 6 0 1 1 1 7a6 6 0 0 1 12 0Z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"></path> </svg> <input type="text" class="docs-search-input" placeholder="Search docs" aria-label="Search docs" autocomplete="off" spellcheck="false"> <kbd class="docs-search-kbd">⌘K</kbd> </div> <ul class="docs-search-results" hidden></ul> </div>  <details class="docs-nav-group" id="nav-group-overview"> <summary>Overview</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/overview/"> Overview </a> </li><li> <a href="/__pyric/ui/docs/tutorial/"> Tutorial </a> </li><li> <a href="/__pyric/ui/docs/examples/"> Examples </a> </li> </ul> </div> </div> </details><details class="docs-nav-group" id="nav-group-get-started"> <summary>Get started</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/get-started/start-building/"> Quickstart </a> </li><li> <a href="/__pyric/ui/docs/get-started/how-the-swap-works/"> How the swap works </a> </li> </ul> </div> </div> </details><details class="docs-nav-group" id="nav-group-build"> <summary>Build</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/build/authentication/"> Authentication </a> </li><li> <a href="/__pyric/ui/docs/build/cloud-firestore/"> Cloud Firestore </a> </li><li> <a href="/__pyric/ui/docs/build/realtime-database/"> Realtime Database </a> </li><li> <a href="/__pyric/ui/docs/build/cloud-storage/"> Cloud Storage </a> </li><li> <a href="/__pyric/ui/docs/build/cloud-messaging/"> Cloud Messaging </a> </li><li> <a href="/__pyric/ui/docs/build/ai-logic/"> AI Logic </a> </li> </ul> </div> </div> </details><details class="docs-nav-group" id="nav-group-secure-debug"> <summary>Secure &amp; debug</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/secure/secure-it-with-rules/"> Security Rules </a> </li><li> <a href="/__pyric/ui/docs/secure/simulate-and-lint/"> Simulate and lint before you deploy </a> </li><li> <a href="/__pyric/ui/docs/secure/write-a-rules-test-suite/"> Write a rules test suite </a> </li><li> <a href="/__pyric/ui/docs/secure/read-a-denial/"> Read a denial and understand it </a> </li><li> <a href="/__pyric/ui/docs/secure/rules-standard-library/"> The rules standard library </a> </li><li> <a href="/__pyric/ui/docs/secure/rtdb-rules-in-typescript/"> RTDB rules in TypeScript </a> </li><li> <a href="/__pyric/ui/docs/secure/firestore-rules-limits/"> Rules limits </a> </li><li> <a href="/__pyric/ui/docs/secure/audit-your-rules/"> Audit rules and data </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading" id="nav-section-secure-debug-examples"> Examples </h2> <ul> <li> <a href="/__pyric/ui/docs/examples/chess/"> Chess showcase </a> </li> </ul> </div> </div> </details><details class="docs-nav-group" id="nav-group-observe-shape"> <summary>Observe &amp; shape</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/observe/see-whats-happening/"> Traffic &amp; rule verdicts </a> </li><li> <a href="/__pyric/ui/docs/observe/resolve-runtime-status/"> Runtime status </a> </li><li> <a href="/__pyric/ui/docs/observe/shape-your-data/"> Seed, snapshot, replay </a> </li> </ul> </div> </div> </details><details class="docs-nav-group" id="nav-group-ship-test"> <summary>Ship &amp; test</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/ship/ship-to-production/"> Ship to production </a> </li><li> <a href="/__pyric/ui/docs/ship/test-in-node/"> Test in Node </a> </li> </ul> </div> </div> </details><details class="docs-nav-group" id="nav-group-work-with-an-agent"> <summary>Work with an agent</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/agent/set-up-your-agent/"> Connect an agent </a> </li><li> <a href="/__pyric/ui/docs/agent/work-with-an-agent/"> Use the MCP tools </a> </li><li> <a href="/__pyric/ui/docs/agent/watch-and-review/"> Watch in Pyric Studio </a> </li> </ul> </div> </div> </details><details class="docs-nav-group" id="nav-group-trust"> <summary>Trust</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/trust/versioning-and-compatibility/"> Versioning and the fb tag </a> </li><li> <a href="/__pyric/ui/docs/trust/storage-rules-stdlib-research/"> Storage Rules modules: evidence and design </a> </li><li> <a href="/__pyric/ui/docs/trust/rules-standard-library/"> Rules standard library reference </a> </li> </ul> </div> </div> </details><details class="docs-nav-group" id="nav-group-conformance"> <summary>Conformance</summary> <div class="docs-nav-group-body"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/conformance-scores/"> Public API coverage </a> </li><li> <a href="/__pyric/ui/docs/trust/how-we-know-it-matches-firebase/"> How we know it matches Firebase </a> </li><li> <a href="/__pyric/ui/docs/app-compat/"> App </a> </li><li> <a href="/__pyric/ui/docs/ai-compat/"> AI Logic </a> </li><li> <a href="/__pyric/ui/docs/auth-compat/"> Auth </a> </li><li> <a href="/__pyric/ui/docs/firestore-compat/"> Firestore </a> </li><li> <a href="/__pyric/ui/docs/database-compat/"> Realtime Database </a> </li><li> <a href="/__pyric/ui/docs/storage-compat/"> Storage </a> </li><li> <a href="/__pyric/ui/docs/messaging-compat/"> Messaging </a> </li><li> <a href="/__pyric/ui/docs/functions-rtdb-compat/"> Functions · RTDB </a> </li><li> <a href="/__pyric/ui/docs/rules-compat/"> Rules </a> </li> </ul> </div> </div> </details> <details class="docs-nav-group" id="nav-group-reference" open> <summary>Reference</summary> <div class="docs-nav-group-body docs-nav-group-body--reference"> <div class="docs-nav-section">  <ul> <li> <a href="/__pyric/ui/docs/api-reference/"> API reference </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading">pyric</h2> <ul> <li> <a href="/__pyric/ui/docs/pyric-app-reference-api/"> pyric/app </a> </li><li> <a href="/__pyric/ui/docs/pyric-firestore-reference-api/"> pyric/firestore </a> </li><li> <a href="/__pyric/ui/docs/pyric-auth-reference-api/"> pyric/auth </a> </li><li> <a href="/__pyric/ui/docs/pyric-ai-reference-api/"> pyric/ai </a> </li><li> <a href="/__pyric/ui/docs/pyric-ai-scripting-reference-api/"> pyric/ai/scripting </a> </li><li> <a href="/__pyric/ui/docs/pyric-database-reference-api/"> pyric/database </a> </li><li> <a href="/__pyric/ui/docs/pyric-storage-reference-api/"> pyric/storage </a> </li><li> <a href="/__pyric/ui/docs/pyric-messaging-reference-api/"> pyric/messaging </a> </li><li> <a href="/__pyric/ui/docs/pyric-messaging-sw-reference-api/"> pyric/messaging/sw </a> </li><li> <a href="/__pyric/ui/docs/pyric-rules-reference-api/"> pyric/rules </a> </li><li> <a href="/__pyric/ui/docs/pyric-sandbox-reference-api/"> pyric/sandbox </a> </li><li> <a href="/__pyric/ui/docs/pyric-sandbox-firestore-reference-api/"> pyric/sandbox/firestore </a> </li><li> <a href="/__pyric/ui/docs/pyric-sandbox-database-reference-api/"> pyric/sandbox/database </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading">pyric-admin</h2> <ul> <li> <a href="/__pyric/ui/docs/pyric-admin-app-reference-api/"> pyric-admin/app </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-firestore-reference-api/"> pyric-admin/firestore </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-auth-reference-api/"> pyric-admin/auth </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-database-reference-api/"> pyric-admin/database </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-storage-reference-api/"> pyric-admin/storage </a> </li><li> <a href="/__pyric/ui/docs/pyric-admin-messaging-reference-api/"> pyric-admin/messaging </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading">create-pyric</h2> <ul> <li> <a href="/__pyric/ui/docs/create-pyric-reference-api/"> create-pyric </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading">@pyric/cli</h2> <ul> <li> <a href="/__pyric/ui/docs/pyric-cli-credentials-node-reference-api/"> @pyric/cli/credentials/node </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-verify-reference-api/"> @pyric/cli/verify </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-conformance-reference-api/"> @pyric/cli/conformance </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-conformance-browser-reference-api/"> @pyric/cli/conformance/browser </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-conformance-docs-reference-api/"> @pyric/cli/conformance/docs </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-assurance-reference-api/"> @pyric/cli/assurance </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-assurance-browser-reference-api/"> @pyric/cli/assurance/browser </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-bridge-reference-api/"> @pyric/cli/bridge </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-bridge-client-reference-api/"> @pyric/cli/bridge/client </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-discover-reference-api/"> @pyric/cli/discover </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-vite-reference-api/"> @pyric/cli/vite </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-serve-worker-reference-api/"> @pyric/cli/serve/worker </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-remote-reference-api/"> @pyric/cli/remote </a> </li><li> <a href="/__pyric/ui/docs/pyric-cli-register-reference-api/"> @pyric/cli/register </a> </li> </ul> </div><div class="docs-nav-section"> <h2 class="docs-nav-heading">@pyric/ui</h2> <ul> <li> <a href="/__pyric/ui/docs/pyric-ui-auth-reference-api/"> @pyric/ui/auth </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-auth-hooks-reference-api/"> @pyric/ui/auth/hooks </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-primitives-reference-api/"> @pyric/ui/primitives </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-firestore-reference-api/"> @pyric/ui/firestore </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-firestore-hooks-reference-api/"> @pyric/ui/firestore/hooks </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-rtdb-reference-api/"> @pyric/ui/rtdb </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-storage-reference-api/"> @pyric/ui/storage </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-storage-hooks-reference-api/"> @pyric/ui/storage/hooks </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-traffic-reference-api/"> @pyric/ui/traffic </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-traffic-hooks-reference-api/"> @pyric/ui/traffic/hooks </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-events-reference-api/"> @pyric/ui/events </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-events-hooks-reference-api/"> @pyric/ui/events/hooks </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-agents-reference-api/" aria-current="page"> @pyric/ui/agents </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-rules-reference-api/"> @pyric/ui/rules </a> </li><li> <a href="/__pyric/ui/docs/pyric-ui-rules-hooks-reference-api/"> @pyric/ui/rules/hooks </a> </li> </ul> </div> </div> </details> </nav> <main class="doc-main" data-astro-cid-mw7aashj> <nav class="docs-breadcrumbs" aria-label="Breadcrumb"> <ol> <li>  <a href="/__pyric/ui/docs/api-reference/">API reference</a> </li><li> <span class="docs-breadcrumbs-sep" aria-hidden="true">/</span> <span>@pyric/ui</span> </li><li> <span class="docs-breadcrumbs-sep" aria-hidden="true">/</span> <span aria-current="page">@pyric/ui/agents</span> </li> </ol> </nav> <header class="api-reference-header" data-astro-cid-mw7aashj> <p class="api-reference-kicker" data-astro-cid-mw7aashj>API reference</p> <h1 data-astro-cid-mw7aashj><code data-astro-cid-mw7aashj>@pyric/ui/agents</code></h1> <p class="api-reference-meta" data-astro-cid-mw7aashj> 21 published symbols from <code data-astro-cid-mw7aashj>@pyric/ui</code> </p> <p class="api-reference-source" data-astro-cid-mw7aashj>
+Generated from the TypeScript declarations shipped at this import path.
+</p>  </header> <article class="prose api-reference-body" data-astro-cid-mw7aashj> <!-- Generated from published package declarations via TypeDoc. Rendered by the api-reference content loader. -->
+<h2 id="interfaces">Interfaces</h2>
+<p><a id="contextwindowmeterprops"></a></p>
+<h3 id="contextwindowmeterprops">ContextWindowMeterProps</h3>
+<h4 id="properties">Properties</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><a id="buttonclassname"></a> <code>buttonClassName?</code></td><td align="left"><code>string</code></td></tr><tr><td align="left"><a id="classname"></a> <code>className?</code></td><td align="left"><code>string</code></td></tr><tr><td align="left"><a id="formattokens"></a> <code>formatTokens?</code></td><td align="left">(<code>tokens</code>: <code>number</code>) => <code>string</code></td></tr><tr><td align="left"><a id="onopen"></a> <code>onOpen?</code></td><td align="left">() => <code>void</code></td></tr><tr><td align="left"><a id="ringclassname"></a> <code>ringClassName?</code></td><td align="left"><code>string</code></td></tr><tr><td align="left"><a id="ringinnerclassname"></a> <code>ringInnerClassName?</code></td><td align="left"><code>string</code></td></tr><tr><td align="left"><a id="snapshot"></a> <code>snapshot</code></td><td align="left"><code>ContextWindowSnapshot</code></td></tr><tr><td align="left"><a id="tooltipclassname"></a> <code>tooltipClassName?</code></td><td align="left"><code>string</code></td></tr></tbody></table></div>
+<hr>
+<p><a id="contextwindowpanelprops"></a></p>
+<h3 id="contextwindowpanelprops">ContextWindowPanelProps</h3>
+<h4 id="properties-1">Properties</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><a id="classname-1"></a> <code>className?</code></td><td align="left"><code>string</code></td></tr><tr><td align="left"><a id="formattokens-1"></a> <code>formatTokens?</code></td><td align="left">(<code>tokens</code>: <code>number</code>) => <code>string</code></td></tr><tr><td align="left"><a id="oncompactnow"></a> <code>onCompactNow?</code></td><td align="left">() => <code>void</code></td></tr><tr><td align="left"><a id="slots"></a> <code>slots?</code></td><td align="left"><code>ClassSlots</code></td></tr><tr><td align="left"><a id="snapshot-1"></a> <code>snapshot</code></td><td align="left"><code>ContextWindowSnapshot</code></td></tr></tbody></table></div>
+<hr>
+<p><a id="contextwindowringprops"></a></p>
+<h3 id="contextwindowringprops">ContextWindowRingProps</h3>
+<h4 id="properties-2">Properties</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><a id="classname-2"></a> <code>className?</code></td><td align="left"><code>string</code></td></tr><tr><td align="left"><a id="innerclassname"></a> <code>innerClassName?</code></td><td align="left"><code>string</code></td></tr><tr><td align="left"><a id="size"></a> <code>size?</code></td><td align="left"><code>number</code></td></tr><tr><td align="left"><a id="snapshot-2"></a> <code>snapshot</code></td><td align="left"><code>ContextWindowSnapshot</code></td></tr><tr><td align="left"><a id="style"></a> <code>style?</code></td><td align="left"><code>CSSProperties</code></td></tr></tbody></table></div>
+<hr>
+<p><a id="emptystateprops"></a></p>
+<h3 id="emptystateprops">EmptyStateProps</h3>
+<h4 id="properties-3">Properties</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th><th align="left">Description</th></tr></thead><tbody><tr><td align="left"><a id="body"></a> <code>body?</code></td><td align="left"><code>ReactNode</code></td><td align="left">-</td></tr><tr><td align="left"><a id="classname-3"></a> <code>className?</code></td><td align="left"><code>string</code></td><td align="left">-</td></tr><tr><td align="left"><a id="icon"></a> <code>icon?</code></td><td align="left"><code>ReactNode</code></td><td align="left">Optional pre-rendered icon node — consumers pass whatever icon primitive their app uses (Material Symbols span, lucide-react component, plain SVG, …).</td></tr><tr><td align="left"><a id="title"></a> <code>title</code></td><td align="left"><code>ReactNode</code></td><td align="left">-</td></tr></tbody></table></div>
+<hr>
+<p><a id="foldprops"></a></p>
+<h3 id="foldprops">FoldProps</h3>
+<p><code>@pyric/ui/agents</code> — headless structural components for agentic UIs
+(chat surfaces, tool-call drill-ins, streaming state indicators).</p>
+<p>Matches the rest of <code>@pyric/ui</code>: zero shipped CSS. Components emit
+<code>data-pyric-*</code> attributes and accept <code>className</code> slots. Consumers
+bring their own design system (Tailwind, CSS modules, plain CSS)
+and attach styling via attribute selectors or class names.</p>
+<h4 id="properties-4">Properties</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th><th align="left">Description</th></tr></thead><tbody><tr><td align="left"><a id="bodyclassname"></a> <code>bodyClassName?</code></td><td align="left"><code>string</code></td><td align="left">Forwarded to the body wrapper revealed when open.</td></tr><tr><td align="left"><a id="children"></a> <code>children</code></td><td align="left"><code>ReactNode</code></td><td align="left">Revealed when the user expands.</td></tr><tr><td align="left"><a id="classname-4"></a> <code>className?</code></td><td align="left"><code>string</code></td><td align="left">Forwarded to the root <code>&#x3C;details></code> element.</td></tr><tr><td align="left"><a id="defaultopen"></a> <code>defaultOpen?</code></td><td align="left"><code>boolean</code></td><td align="left">-</td></tr><tr><td align="left"><a id="header"></a> <code>header</code></td><td align="left"><code>ReactNode</code></td><td align="left">Visible summary line, always rendered.</td></tr><tr><td align="left"><a id="headeraction"></a> <code>headerAction?</code></td><td align="left"><code>ReactNode</code></td><td align="left">Optional right-aligned action (e.g. a copy button). Children should <code>stopPropagation</code> so clicks don’t toggle the fold.</td></tr><tr><td align="left"><a id="summaryclassname"></a> <code>summaryClassName?</code></td><td align="left"><code>string</code></td><td align="left">Forwarded to the <code>&#x3C;summary></code> element.</td></tr><tr><td align="left"><a id="tone"></a> <code>tone?</code></td><td align="left"><a href="#foldtone"><code>FoldTone</code></a></td><td align="left">Surfaced via <code>[data-pyric-fold-tone]</code> so consumers can tint the summary or border based on semantic context (error / thought). Defaults to <code>normal</code>.</td></tr></tbody></table></div>
+<hr>
+<p><a id="modalprops"></a></p>
+<h3 id="modalprops">ModalProps</h3>
+<h4 id="properties-5">Properties</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th><th align="left">Description</th></tr></thead><tbody><tr><td align="left"><a id="arialabel"></a> <code>ariaLabel?</code></td><td align="left"><code>string</code></td><td align="left">-</td></tr><tr><td align="left"><a id="backdropclassname"></a> <code>backdropClassName?</code></td><td align="left"><code>string</code></td><td align="left">Forwarded to the backdrop element.</td></tr><tr><td align="left"><a id="children-1"></a> <code>children</code></td><td align="left"><code>ReactNode</code></td><td align="left">-</td></tr><tr><td align="left"><a id="classname-5"></a> <code>className?</code></td><td align="left"><code>string</code></td><td align="left">Forwarded to the root wrapper (covers the full viewport).</td></tr><tr><td align="left"><a id="onclose"></a> <code>onClose</code></td><td align="left">() => <code>void</code></td><td align="left">-</td></tr><tr><td align="left"><a id="open"></a> <code>open</code></td><td align="left"><code>boolean</code></td><td align="left">-</td></tr><tr><td align="left"><a id="panelclassname"></a> <code>panelClassName?</code></td><td align="left"><code>string</code></td><td align="left">Forwarded to the inner panel.</td></tr></tbody></table></div>
+<hr>
+<p><a id="pulsingdotprops"></a></p>
+<h3 id="pulsingdotprops">PulsingDotProps</h3>
+<h4 id="properties-6">Properties</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th><th align="left">Description</th></tr></thead><tbody><tr><td align="left"><a id="classname-6"></a> <code>className?</code></td><td align="left"><code>string</code></td><td align="left">Forwarded to the outer wrapper. Consumers attach all visual styling (size, animation, color) via this hook or by selecting on <code>[data-pyric-ui="pulsing-dot"]</code>.</td></tr></tbody></table></div>
+<hr>
+<p><a id="requestusagetimelineprops"></a></p>
+<h3 id="requestusagetimelineprops">RequestUsageTimelineProps</h3>
+<h4 id="properties-7">Properties</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><a id="classname-7"></a> <code>className?</code></td><td align="left"><code>string</code></td></tr><tr><td align="left"><a id="empty"></a> <code>empty?</code></td><td align="left"><code>ReactNode</code></td></tr><tr><td align="left"><a id="formattokens-2"></a> <code>formatTokens?</code></td><td align="left">(<code>tokens</code>: <code>number</code>) => <code>string</code></td></tr><tr><td align="left"><a id="onopentool"></a> <code>onOpenTool?</code></td><td align="left">(<code>messageId</code>: <code>string</code>, <code>callId</code>: <code>string</code>) => <code>void</code></td></tr><tr><td align="left"><a id="requests"></a> <code>requests</code></td><td align="left">readonly <code>SessionRequestUsage</code>[]</td></tr><tr><td align="left"><a id="slots-1"></a> <code>slots?</code></td><td align="left"><code>ClassSlots</code></td></tr></tbody></table></div>
+<hr>
+<p><a id="sessionspendsummaryprops"></a></p>
+<h3 id="sessionspendsummaryprops">SessionSpendSummaryProps</h3>
+<h4 id="properties-8">Properties</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><a id="classname-8"></a> <code>className?</code></td><td align="left"><code>string</code></td></tr><tr><td align="left"><a id="currentcontexttokens"></a> <code>currentContextTokens?</code></td><td align="left"><code>number</code></td></tr><tr><td align="left"><a id="formattokens-3"></a> <code>formatTokens?</code></td><td align="left">(<code>tokens</code>: <code>number</code>) => <code>string</code></td></tr><tr><td align="left"><a id="slots-2"></a> <code>slots?</code></td><td align="left"><code>ClassSlots</code></td></tr><tr><td align="left"><a id="usage"></a> <code>usage?</code></td><td align="left"><code>SessionTokenUsage</code></td></tr></tbody></table></div>
+<hr>
+<p><a id="tokenusageinlineprops"></a></p>
+<h3 id="tokenusageinlineprops">TokenUsageInlineProps</h3>
+<h4 id="properties-9">Properties</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Property</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><a id="classname-9"></a> <code>className?</code></td><td align="left"><code>string</code></td></tr><tr><td align="left"><a id="formattokens-4"></a> <code>formatTokens?</code></td><td align="left">(<code>tokens</code>: <code>number</code>) => <code>string</code></td></tr><tr><td align="left"><a id="labelclassname"></a> <code>labelClassName?</code></td><td align="left"><code>string</code></td></tr><tr><td align="left"><a id="usage-1"></a> <code>usage?</code></td><td align="left"><code>SessionTokenUsage</code></td></tr><tr><td align="left"><a id="valueclassname"></a> <code>valueClassName?</code></td><td align="left"><code>string</code></td></tr></tbody></table></div>
+<h2 id="type-aliases">Type Aliases</h2>
+<p><a id="foldtone"></a></p>
+<h3 id="foldtone">FoldTone</h3>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">type</span><span style="color:#E5C07B"> FoldTone</span><span style="color:#56B6C2"> =</span><span style="color:#98C379"> "normal"</span><span style="color:#ABB2BF"> | </span><span style="color:#98C379">"error"</span><span style="color:#ABB2BF"> | </span><span style="color:#98C379">"thought"</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<p><code>@pyric/ui/agents</code> — headless structural components for agentic UIs
+(chat surfaces, tool-call drill-ins, streaming state indicators).</p>
+<p>Matches the rest of <code>@pyric/ui</code>: zero shipped CSS. Components emit
+<code>data-pyric-*</code> attributes and accept <code>className</code> slots. Consumers
+bring their own design system (Tailwind, CSS modules, plain CSS)
+and attach styling via attribute selectors or class names.</p>
+<h2 id="functions">Functions</h2>
+<p><a id="contextwindowmeter"></a></p>
+<h3 id="contextwindowmeter">ContextWindowMeter()</h3>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">function</span><span style="color:#61AFEF"> ContextWindowMeter</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">__namedParameters</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">ContextWindowMeterProps</span><span style="color:#ABB2BF">): </span><span style="color:#E5C07B">Element</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<h4 id="parameters">Parameters</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Parameter</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><code>__namedParameters</code></td><td align="left"><a href="#contextwindowmeterprops"><code>ContextWindowMeterProps</code></a></td></tr></tbody></table></div>
+<h4 id="returns">Returns</h4>
+<p><code>Element</code></p>
+<hr>
+<p><a id="contextwindowpanel"></a></p>
+<h3 id="contextwindowpanel">ContextWindowPanel()</h3>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">function</span><span style="color:#61AFEF"> ContextWindowPanel</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">__namedParameters</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">ContextWindowPanelProps</span><span style="color:#ABB2BF">): </span><span style="color:#E5C07B">Element</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<h4 id="parameters-1">Parameters</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Parameter</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><code>__namedParameters</code></td><td align="left"><a href="#contextwindowpanelprops"><code>ContextWindowPanelProps</code></a></td></tr></tbody></table></div>
+<h4 id="returns-1">Returns</h4>
+<p><code>Element</code></p>
+<hr>
+<p><a id="contextwindowring"></a></p>
+<h3 id="contextwindowring">ContextWindowRing()</h3>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">function</span><span style="color:#61AFEF"> ContextWindowRing</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">__namedParameters</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">ContextWindowRingProps</span><span style="color:#ABB2BF">): </span><span style="color:#E5C07B">Element</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<h4 id="parameters-2">Parameters</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Parameter</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><code>__namedParameters</code></td><td align="left"><a href="#contextwindowringprops"><code>ContextWindowRingProps</code></a></td></tr></tbody></table></div>
+<h4 id="returns-2">Returns</h4>
+<p><code>Element</code></p>
+<hr>
+<p><a id="emptystate"></a></p>
+<h3 id="emptystate">EmptyState()</h3>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">function</span><span style="color:#61AFEF"> EmptyState</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">__namedParameters</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">EmptyStateProps</span><span style="color:#ABB2BF">): </span><span style="color:#E5C07B">Element</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<p>Headless zero-state. Structural only: icon slot, title, optional
+body, all wrapped in a flex container marked
+<code>[data-pyric-ui="empty-state"]</code>. Consumers attach all visual
+styling.</p>
+<h4 id="parameters-3">Parameters</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Parameter</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><code>__namedParameters</code></td><td align="left"><a href="#emptystateprops"><code>EmptyStateProps</code></a></td></tr></tbody></table></div>
+<h4 id="returns-3">Returns</h4>
+<p><code>Element</code></p>
+<hr>
+<p><a id="fold"></a></p>
+<h3 id="fold">Fold()</h3>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">function</span><span style="color:#61AFEF"> Fold</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">__namedParameters</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">FoldProps</span><span style="color:#ABB2BF">): </span><span style="color:#E5C07B">Element</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<p>Headless disclosure container — native <code>&#x3C;details></code> for keyboard /
+a11y. Ships zero visual styling. Consumers style via the three
+<code>className</code> slots or by selecting on:</p>
+<p>[data-pyric-ui=“fold”]             — root <code>&#x3C;details></code>
+[data-pyric-ui=“fold”][open]       — expanded state
+[data-pyric-fold-tone=“error”]     — error tint
+[data-pyric-fold-tone=“thought”]   — thought-stream tint
+[data-pyric-fold-summary]          — clickable summary row
+[data-pyric-fold-chevron]          — disclosure indicator slot
+[data-pyric-fold-body]             — revealed body wrapper</p>
+<h4 id="parameters-4">Parameters</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Parameter</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><code>__namedParameters</code></td><td align="left"><a href="#foldprops"><code>FoldProps</code></a></td></tr></tbody></table></div>
+<h4 id="returns-4">Returns</h4>
+<p><code>Element</code></p>
+<hr>
+<p><a id="modal"></a></p>
+<h3 id="modal">Modal()</h3>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">function</span><span style="color:#61AFEF"> Modal</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">__namedParameters</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">ModalProps</span><span style="color:#ABB2BF">): </span><span style="color:#E5C07B">Element</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<p>Headless modal — provides behavior only (Escape-to-close, backdrop
+click, <code>aria-modal</code>). Consumers attach all visual styling via the
+three <code>className</code> slots or by selecting on the emitted data
+attributes:</p>
+<p>[data-pyric-ui=“modal”]            — root viewport wrapper
+[data-pyric-modal-backdrop]        — clickable backdrop
+[data-pyric-modal-panel]           — inner panel containing children</p>
+<h4 id="parameters-5">Parameters</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Parameter</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><code>__namedParameters</code></td><td align="left"><a href="#modalprops"><code>ModalProps</code></a></td></tr></tbody></table></div>
+<h4 id="returns-5">Returns</h4>
+<p><code>Element</code></p>
+<hr>
+<p><a id="pulsingdot"></a></p>
+<h3 id="pulsingdot">PulsingDot()</h3>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">function</span><span style="color:#61AFEF"> PulsingDot</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">__namedParameters</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">PulsingDotProps</span><span style="color:#ABB2BF">): </span><span style="color:#E5C07B">Element</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<p>Headless “live / streaming” indicator. Ships zero visual styling.</p>
+<p>Renders three nested spans so consumers can style ring + core
+independently:</p>
+  <span data-pyric-ui="pulsing-dot">
+    <span data-pyric-pulse-ring="">
+    <span data-pyric-pulse-core="">
+  </span>
+<p>Animation, color, and size are entirely consumer-defined.</p>
+<h4 id="parameters-6">Parameters</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Parameter</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><code>__namedParameters</code></td><td align="left"><a href="#pulsingdotprops"><code>PulsingDotProps</code></a></td></tr></tbody></table></div>
+<h4 id="returns-6">Returns</h4>
+<p><code>Element</code></p>
+<hr>
+<p><a id="requestusagetimeline"></a></p>
+<h3 id="requestusagetimeline">RequestUsageTimeline()</h3>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">function</span><span style="color:#61AFEF"> RequestUsageTimeline</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">__namedParameters</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">RequestUsageTimelineProps</span><span style="color:#ABB2BF">): </span><span style="color:#E5C07B">Element</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<h4 id="parameters-7">Parameters</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Parameter</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><code>__namedParameters</code></td><td align="left"><a href="#requestusagetimelineprops"><code>RequestUsageTimelineProps</code></a></td></tr></tbody></table></div>
+<h4 id="returns-7">Returns</h4>
+<p><code>Element</code></p>
+<hr>
+<p><a id="sessionspendsummary"></a></p>
+<h3 id="sessionspendsummary">SessionSpendSummary()</h3>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">function</span><span style="color:#61AFEF"> SessionSpendSummary</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">__namedParameters</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">SessionSpendSummaryProps</span><span style="color:#ABB2BF">): </span><span style="color:#E5C07B">Element</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<h4 id="parameters-8">Parameters</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Parameter</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><code>__namedParameters</code></td><td align="left"><a href="#sessionspendsummaryprops"><code>SessionSpendSummaryProps</code></a></td></tr></tbody></table></div>
+<h4 id="returns-8">Returns</h4>
+<p><code>Element</code></p>
+<hr>
+<p><a id="tokenusageinline"></a></p>
+<h3 id="tokenusageinline">TokenUsageInline()</h3>
+<pre class="astro-code one-dark-pro" style="background-color:#282c34;color:#abb2bf; overflow-x: auto;" tabindex="0" data-language="ts"><code><span class="line"><span style="color:#C678DD">function</span><span style="color:#61AFEF"> TokenUsageInline</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">__namedParameters</span><span style="color:#ABB2BF">: </span><span style="color:#E5C07B">TokenUsageInlineProps</span><span style="color:#ABB2BF">): </span><span style="color:#E5C07B">Element</span><span style="color:#ABB2BF">;</span></span></code></pre>
+<h4 id="parameters-9">Parameters</h4>
+<div class="table-scroll">
+<table><thead><tr><th align="left">Parameter</th><th align="left">Type</th></tr></thead><tbody><tr><td align="left"><code>__namedParameters</code></td><td align="left"><a href="#tokenusageinlineprops"><code>TokenUsageInlineProps</code></a></td></tr></tbody></table></div>
+<h4 id="returns-9">Returns</h4>
+<p><code>Element</code></p></span></span> </article> </main> <aside class="doc-toc api-symbols" aria-label="API symbols" data-astro-cid-mw7aashj> <h2 class="doc-toc-heading" data-astro-cid-mw7aashj>Symbols</h2> <input class="api-symbol-filter" type="search" placeholder="Filter symbols" aria-label="Filter API symbols" data-api-symbol-filter data-astro-cid-mw7aashj> <div class="api-symbol-groups" data-api-symbol-groups data-astro-cid-mw7aashj> <section class="api-symbol-group" data-api-symbol-group data-astro-cid-mw7aashj> <a class="api-symbol-kind" href="#interfaces" data-astro-cid-mw7aashj> Interfaces </a> <ul data-astro-cid-mw7aashj> <li data-api-symbol="contextwindowmeterprops" data-astro-cid-mw7aashj> <a href="#contextwindowmeterprops" data-astro-cid-mw7aashj>ContextWindowMeterProps</a> </li><li data-api-symbol="contextwindowpanelprops" data-astro-cid-mw7aashj> <a href="#contextwindowpanelprops" data-astro-cid-mw7aashj>ContextWindowPanelProps</a> </li><li data-api-symbol="contextwindowringprops" data-astro-cid-mw7aashj> <a href="#contextwindowringprops" data-astro-cid-mw7aashj>ContextWindowRingProps</a> </li><li data-api-symbol="emptystateprops" data-astro-cid-mw7aashj> <a href="#emptystateprops" data-astro-cid-mw7aashj>EmptyStateProps</a> </li><li data-api-symbol="foldprops" data-astro-cid-mw7aashj> <a href="#foldprops" data-astro-cid-mw7aashj>FoldProps</a> </li><li data-api-symbol="modalprops" data-astro-cid-mw7aashj> <a href="#modalprops" data-astro-cid-mw7aashj>ModalProps</a> </li><li data-api-symbol="pulsingdotprops" data-astro-cid-mw7aashj> <a href="#pulsingdotprops" data-astro-cid-mw7aashj>PulsingDotProps</a> </li><li data-api-symbol="requestusagetimelineprops" data-astro-cid-mw7aashj> <a href="#requestusagetimelineprops" data-astro-cid-mw7aashj>RequestUsageTimelineProps</a> </li><li data-api-symbol="sessionspendsummaryprops" data-astro-cid-mw7aashj> <a href="#sessionspendsummaryprops" data-astro-cid-mw7aashj>SessionSpendSummaryProps</a> </li><li data-api-symbol="tokenusageinlineprops" data-astro-cid-mw7aashj> <a href="#tokenusageinlineprops" data-astro-cid-mw7aashj>TokenUsageInlineProps</a> </li> </ul> </section><section class="api-symbol-group" data-api-symbol-group data-astro-cid-mw7aashj> <a class="api-symbol-kind" href="#type-aliases" data-astro-cid-mw7aashj> Type Aliases </a> <ul data-astro-cid-mw7aashj> <li data-api-symbol="foldtone" data-astro-cid-mw7aashj> <a href="#foldtone" data-astro-cid-mw7aashj>FoldTone</a> </li> </ul> </section><section class="api-symbol-group" data-api-symbol-group data-astro-cid-mw7aashj> <a class="api-symbol-kind" href="#functions" data-astro-cid-mw7aashj> Functions </a> <ul data-astro-cid-mw7aashj> <li data-api-symbol="contextwindowmeter()" data-astro-cid-mw7aashj> <a href="#contextwindowmeter" data-astro-cid-mw7aashj>ContextWindowMeter()</a> </li><li data-api-symbol="contextwindowpanel()" data-astro-cid-mw7aashj> <a href="#contextwindowpanel" data-astro-cid-mw7aashj>ContextWindowPanel()</a> </li><li data-api-symbol="contextwindowring()" data-astro-cid-mw7aashj> <a href="#contextwindowring" data-astro-cid-mw7aashj>ContextWindowRing()</a> </li><li data-api-symbol="emptystate()" data-astro-cid-mw7aashj> <a href="#emptystate" data-astro-cid-mw7aashj>EmptyState()</a> </li><li data-api-symbol="fold()" data-astro-cid-mw7aashj> <a href="#fold" data-astro-cid-mw7aashj>Fold()</a> </li><li data-api-symbol="modal()" data-astro-cid-mw7aashj> <a href="#modal" data-astro-cid-mw7aashj>Modal()</a> </li><li data-api-symbol="pulsingdot()" data-astro-cid-mw7aashj> <a href="#pulsingdot" data-astro-cid-mw7aashj>PulsingDot()</a> </li><li data-api-symbol="requestusagetimeline()" data-astro-cid-mw7aashj> <a href="#requestusagetimeline" data-astro-cid-mw7aashj>RequestUsageTimeline()</a> </li><li data-api-symbol="sessionspendsummary()" data-astro-cid-mw7aashj> <a href="#sessionspendsummary" data-astro-cid-mw7aashj>SessionSpendSummary()</a> </li><li data-api-symbol="tokenusageinline()" data-astro-cid-mw7aashj> <a href="#tokenusageinline" data-astro-cid-mw7aashj>TokenUsageInline()</a> </li> </ul> </section> <p class="api-symbol-empty" data-api-symbol-empty hidden data-astro-cid-mw7aashj>No matching symbols</p> </div> </aside> </div> <script type="module">const a=document.querySelector("[data-api-symbol-filter]"),d=[...document.querySelectorAll("[data-api-symbol-group]")],n=document.querySelector("[data-api-symbol-empty]");a?.addEventListener("input",()=>{const t=a.value.trim().toLowerCase();let o=0;for(const i of d){let e=0;i.querySelectorAll("[data-api-symbol]").forEach(l=>{const r=!t||(l.dataset.apiSymbol??"").includes(t);l.hidden=!r,r&&e++}),i.hidden=e===0,o+=e}n&&(n.hidden=o>0)});</script> <script type="module">const s=new Map;document.querySelectorAll('.doc-toc a[href^="#"]').forEach(t=>s.set(decodeURIComponent(t.hash.slice(1)),t));if(s.size>0){const t=new Set,n=()=>{let o=null;for(const e of s.keys())if(t.has(e)){o=e;break}s.forEach((e,c)=>e.classList.toggle("active",c===o))},r=new IntersectionObserver(o=>{for(const e of o)e.isIntersecting?t.add(e.target.id):t.delete(e.target.id);n()},{rootMargin:"-72px 0px -60% 0px"});s.forEach((o,e)=>{const c=document.getElementById(e);c&&r.observe(c)})}</script> <script type="module">document.querySelector('.studio__nav [aria-current="page"]')?.scrollIntoView({block:"nearest",inline:"center"});</script>  </body></html>