DEV Community: CodingCatDev

Sanity Knowledge Bases

Alex Patterson — Sat, 17 Oct 2026 06:09:29 +0000

Original: https://codingcat.dev/post/sanity-knowledge-bases

Beyond Naive Vector RAG: Building Verified Company Knowledge with Sanity Context and MCP

Your AI agent should not have to settle a company policy dispute in the middle of answering a customer.

Yet that is exactly what happens when company knowledge is scattered across datasets, documentation websites, and PDFs. A naive vector Retrieval-Augmented Generation (RAG) pipeline retrieves related chunks, but related does not necessarily mean current, authoritative, or consistent. If two chunks disagree, the language model inherits the problem.

Hardcoding Markdown into a system prompt has a different failure mode. It works nicely for a prototype, then goes stale as soon as your content team publishes an update.

Sanity Context Knowledge Bases move reconciliation ahead of the conversation. They compile multiple sources into a purpose-driven topic outline and cited Markdown entries, flag conflicting claims for review, and serve the resulting company knowledge through Sanity Context MCP.

We will break down that architecture, then build a multi-source Knowledge Base for Agent AJ on CodingCat.dev, resolve an actual build issue, and connect it to an existing MCP endpoint.

What You'll Learn

Compile datasets, websites, and files into a purpose-driven outline with cited Markdown entries.
Resolve conflicting claims during builds and preserve decisions as source-anchored standing instructions.
Connect agents through read-only Context MCP using outline-guided entry retrieval.
Keep approved knowledge stable while source changes move through a reviewable refresh workflow.

Why Scattered Context and Static Prompts Fail

Imagine an agent answering a returns question. Your Help Center says customers have 30 days. An older product page says 45 days. Both passages look relevant to a similarity search.

A basic chunk-and-retrieve system can hand both passages to the model without establishing which source wins. The model must reconcile the contradiction at query time, when you really want it focused on answering the question.

Copying a few approved passages into a prompt avoids that immediate ambiguity, but creates a maintenance job. Your prompt becomes another copy of your content, disconnected from the publishing workflow.

The distinction here is specifically between naive retrieval and compiled knowledge, not a claim that every RAG architecture behaves identically. The useful question is where your system resolves contradictions: during each conversation, or during a reviewable build.

How Sanity Context Compiles a Knowledge Base

A Knowledge Base belongs to your Sanity organization and can combine sources from multiple projects and external systems. The Sanity Context overview explains the broader platform; the central workflow here is straightforward:

Define the Knowledge Base's purpose.
Add the sources that support that purpose.
Build a unified topic outline and Markdown entries.
Review conflicting claims and establish standing instructions.
Connect agents through Context MCP.
Review source changes as the underlying material evolves.

Start with a Purpose, Not a Pile of Documents

Every Knowledge Base starts with a short purpose statement describing whom it serves and what questions it should answer.

That purpose does real work. During compilation, it steers the topic hierarchy. Central entries receive a [core] tag, supporting material can remain untagged, and tangential content receives a [peripheral] tag.

The purpose also appears at the top of the agent's initial_context payload. It helps orient the agent before it chooses which entries to read.

My first production rule is simple: write a sharp one-sentence purpose before expanding the source list. A focused purpose gives the compiler a clearer job than a vague request to organize everything your company knows.

Combine Datasets, Websites, and Files

The Knowledge Base can unify three source categories into one subject-based topic tree:

Sanity datasets: Published structured content selected with GROQ, including Portable Text.
Websites: Crawled documentation and web pages, with crawling that respects robots.txt.
Uploaded files: PDFs, office documents, spreadsheets, Markdown, and other supported formats.

The important part is the output structure. It follows the subject matter, not necessarily your original file names, repository layout, or URL hierarchy.

Supported uploads include PDFs up to 500 MB, DOCX and PPTX files up to 100 MB, XLSX files up to 50 MB, and HTML, AsciiDoc, and images up to 25 MB. Other supported inputs include Markdown, CSV, JSON, YAML, source code, and ZIP, TAR, and TAR.GZ archives. Check the source types reference when planning an ingestion workflow.

Use a Complete GROQ Query with a Narrow Projection

For a dataset source, supply a complete GROQ query, not just a filter. The projection determines which fields the compiler receives.

*[_type == "article" && defined(slug.current)]{
  title,
  summary,
  body
}

This selects articles with a slug, but only passes their title, summary, and body into the build. Internal editorial metadata and unrelated configuration fields stay out.

Dataset sources automatically read published documents only and support up to 5,000 documents per dataset source. Starting narrow keeps the input focused and makes the resulting entries easier to review. The GROQ reference is useful when refining filters and projections.

Resolve Conflicting Claims Before Runtime

Return to that 30-day versus 45-day policy example. During a Knowledge Base build, conflicting claims raise a reviewable issue rather than simply becoming competing passages in the agent's context.

The build surfaces disagreement before an agent has to answer a policy question.

In the Context UI, you inspect the claims and their source attributions, then choose the authoritative interpretation. Resolving the issue creates a standing instruction anchored to the sources.

You can also write custom plain-language instructions, such as trusting the Help Center over marketing pages for return windows. That rule shapes future builds instead of requiring the model to rediscover the same source hierarchy repeatedly.

The underlying document types distinguish the compiled content from its review and governance records:

sanity.context.entry: A compiled Markdown entry.
sanity.context.issue: A conflict or structural issue raised for review.
sanity.context.instruction: A standing rule, written manually or generated through issue resolution.

The issue resolution guide covers the review workflow in more detail.

Produce a Compact Outline and Cited Markdown

The build produces two complementary artifacts: a compact, slash-delimited topic outline and full Markdown entries with citations back to the original sources.

The outline provides orientation. The entries provide the substance. Your agent does not need every full document in its initial context to understand where relevant information lives.

Calling this “verified company canon” describes a governed workflow, not automatic proof that every source is true. The build exposes disagreements and preserves provenance; your team still decides which claims deserve authority.

How Agents Retrieve Knowledge Through Context MCP

Sanity serves the compiled Knowledge Base through a hosted, read-only Context MCP endpoint. MCP stands for Model Context Protocol, the interface used here to expose context tools to an agent.

The core outline-first workflow uses two tools:

{
  "_key": "3758e1cd3fc0",
  "_type": "table",
  "rows": [
    {
      "_key": "db7b8da9e6da",
      "_type": "row",
      "cells": [
        "Tool",
        "Role"
      ]
    },
    {
      "_key": "5df0377bec98",
      "_type": "row",
      "cells": [
        "`initial_context`",
        "Loads the Knowledge Base purpose and compact topic outline."
      ]
    },
    {
      "_key": "dcd9942d2fbf",
      "_type": "row",
      "cells": [
        "`knowledge_base_read`",
        "Fetches full Markdown entries for selected paths, up to 20 entries per call."
      ]
    }
  ]
}

For a returns question, the agent can inspect the outline, identify a path such as support/returns, and read that entry directly. It gets the compiled explanation and its citations rather than relying solely on whichever raw chunk ranks highest.

The tool surface depends on your endpoint's retrieval mode. Use the retrieval modes guide to distinguish Knowledge Base mode from GROQ mode, and the Context MCP tools reference for available tools, including knowledge_base_search where applicable.

The token-efficiency idea is equally straightforward: keep the lightweight outline in context, then fetch only the entries relevant to the question. This is an architectural approach to reducing unnecessary context, not a measured cost or accuracy benchmark.

Read-Only Access and Organization Tokens

Context MCP is strictly read-only. Agents authenticate when connecting, using an organization-level API token with Context Viewer permissions.

That separates reading approved knowledge from editing it. The agent consumes the compiled material; it does not resolve governance issues by rewriting your content through the endpoint.

Use the content access and security guide when provisioning the token, and the Context MCP reference for connection details.

Source Drift, Refreshes, and Rollback

A Knowledge Base is not a live dataset query on every request. It is a compiled representation of selected sources, so keeping it current requires an explicit maintenance loop.

For connected datasets and websites, weekly or monthly scheduled refreshes compare source material against the last build and file issues where material changed.

Refreshes surface changes for review rather than silently replacing approved knowledge.

While changes await review, agents continue reading the previously approved entries. New source material does not silently overwrite the knowledge they rely on.

My second production rule is to triage refresh issues and keep version restore in your operational workflow. If an updated build introduces an unwanted outline structure, open Entries, select an earlier outline version, and use Restore this version.

The maintenance guide covers refreshes, rebuilds, and restoration. The production patterns guide provides broader integration guidance, including initial-context handling.

Naive Vector RAG vs. a Compiled Knowledge Base

{
  "_key": "a1b2c3d4e5f6",
  "_type": "table",
  "rows": [
    {
      "_key": "row1hdr9a1",
      "_type": "row",
      "cells": [
        "Concern",
        "Naive vector RAG",
        "Sanity Context Knowledge Base"
      ]
    },
    {
      "_key": "row2org9b2",
      "_type": "row",
      "cells": [
        "Organization",
        "Raw documents split into chunks",
        "Purpose-driven topic outline"
      ]
    },
    {
      "_key": "row3con9c3",
      "_type": "row",
      "cells": [
        "Contradictions",
        "Left for the model at query time",
        "Detected during compilation and surfaced for review"
      ]
    },
    {
      "_key": "row4ret9d4",
      "_type": "row",
      "cells": [
        "Retrieval",
        "Similarity-ranked chunks",
        "Outline-guided reads of compiled entries"
      ]
    },
    {
      "_key": "row5pro9e5",
      "_type": "row",
      "cells": [
        "Provenance",
        "Depends on the retrieval implementation",
        "Markdown entries with source citations"
      ]
    },
    {
      "_key": "row6src9f6",
      "_type": "row",
      "cells": [
        "Source changes",
        "Depend on ingestion and index-update behavior",
        "Reviewable change issues before approved updates"
      ]
    }
  ]
}

The biggest shift is not the transport or the file format. It is moving interpretation and conflict resolution into a build process your team can inspect.

Build a Multi-Source Knowledge Base for Agent AJ

On CodingCat.dev, Agent AJ already connects to a Sanity Context MCP endpoint named agent-aj-mcp. The existing endpoint uses our production dataset in Dataset, or GROQ, mode.

For this implementation, I wanted something a little more fun: developer lore and dad jokes from external repositories and a local Markdown file, without adding that material to our primary CMS content model.

Step 1: Inspect the Existing GROQ-Mode Endpoint

The existing endpoint scopes dataset access with this groqFilter:

_type in ["podcast", "post", "author", "page", "sponsor", "course"]

Notice the distinction from a Knowledge Base dataset source. This is an endpoint filter, while the earlier source example was a complete query with a projection.

Agent AJ can already use the MCP connection and semantic search capabilities to answer site-content questions. Asking for the latest podcast returns a rich card for “GenAI for Engineers, What's Real, What's Not and What's Coming.”

That is a useful baseline: the application and MCP connection already work. We are changing the endpoint's content source, not rebuilding the chat interface.

Step 2: Create the Knowledge Base and Define Its Purpose

In Sanity Context, select + New knowledge base and enter:

Title: AJ Knowledge Jokes
Purpose: Fun Jokes for codingcat.dev

Select Create knowledge base to open the Add source workflow. If the feature needs enabling for your organization, use Sanity Manage Labs. The creation guide provides the setup reference.

Step 3: Add Two Websites and One Markdown File

Rather than attaching our dataset, we combine three sources:

Jeff Dean Facts: Add the Jeff Dean Facts repository as a Website source. It collects programmer humor built around exaggerated engineering accomplishments.
Developer lore: Upload Legendary-Web-Developer-Lore-&-History.md through the Files source option. I generated this file with Gemini; it includes stories such as the 500-Mile Email Incident, the left-pad npm crisis, and the Morris Worm.
Dad jokes: Add Wes Bos's programming dad jokes as another Website source.

Using the Website option for these GitHub URLs means we are supplying web pages to crawl, not configuring a dedicated repository integration.

The Sources list now contains two websites and one file. Different origins, different formats, one Knowledge Base.

Also, keep the input quality in perspective: compiling a generated lore document does not independently authenticate every historical anecdote. Citations and conflict review make the material inspectable, but source selection still matters.

Step 4: Build the Entries and Respect the Readiness Guardrail

Select Build entries. Sanity Context processes the source material, plans an outline around the purpose, and compiles the entries.

I tried switching Agent AJ's endpoint from Dataset to Knowledge bases before that initial build finished. The endpoint correctly reported that the attached Knowledge Base had no entries and needed building before an agent could connect.

Creating a Knowledge Base is not the same as making it ready to serve. Wait for the first build to produce entries before expecting the endpoint to use it.

Step 5: Review and Resolve a Conflicting Claim

The build surfaced one issue under Issues, scoped to the whole Knowledge Base.

Two compiled entries disagreed about a vacation-related Jeff Dean fact. One treated the repository as confirming the anecdote as true. Another said that Kenton Varda, associated with the original list, had not confirmed that specific fact.

The important feature was not the seriousness of the subject. It was the workflow: a contradiction between compiled entries became an explicit issue with competing interpretations to review.

Choose the supported interpretation explicitly so future builds can apply the resulting instruction.

For this demo, I selected the first interpretation and used Resolve issue. That established the Knowledge Base's chosen interpretation and generated the corresponding standing instruction.

You do not have to resolve every issue immediately to inspect the compiled entries. For production policies or other consequential content, however, the review deserves more care than a quick choice between joke-related claims.

Step 6: Inspect the Topic Outline and Markdown Entries

In Entries, the three sources have been organized into five topics:

Coding Culture & Programmer Humor Meta
GitHub Repo Commits & Contributions
Real Stories Behind the Jeff Dean Jokes
Legendary Software Engineering Anecdotes
Programming & Tech Dad Jokes

The dad-jokes entry is organized into technical categories such as Git and version control, databases and SQL, object-oriented and functional programming, and general jokes.

That is a useful result. We did not simply get three raw source dumps. We got a navigable subject structure with synthesized Markdown and citations back to the original material.

Step 7: Attach the Ready Knowledge Base and Test Agent AJ

Return to Agent AJ MCP, select Knowledge bases as the content source, and attach AJ Knowledge Jokes. Once it displays Ready, select Save changes.

The existing website can now use the updated endpoint without a frontend redeployment.

For the first test, I asked Agent AJ for a developer or dad joke. It returned the dark-mode joke from the Programming & Tech Dad Jokes collection: programmers prefer dark mode because light attracts bugs.

I then opened the compiled entry and located the matching joke. For a second test, I supplied the setup about there being 10 types of people in the world. Agent AJ completed it with the binary punchline: those who understand binary and those who do not.

Test the live answer, then compare it with the compiled entry rather than stopping at a plausible response.

These tests demonstrate that the endpoint change works and that the responses match the compiled collection. They are not a substitute for inspecting tool activity in a production integration, especially when an answer could also come from the model's general knowledge.

Step 8: Connect a Coding Agent or Your Own Application

Open the endpoint and select Connect agent. There are two convenient paths:

Set up with AI: Copy the generated setup prompt into a coding agent such as Cursor, Claude Code, or Codex. It provides connection instructions the agent can apply to your stack and verify.
Sample code: Copy the supplied integration code and wire the MCP client into your application.

I recommend starting with the generated prompt if you already use a coding agent. For a custom application, keep the MCP connection and organization token on the server side.

This TypeScript connection skeleton shows the MCP portion. Replace the organization ID and use your configured endpoint name:

import { Client } from '@modelcontextprotocol/sdk/client/index.js'
import { StreamableHTTPClientTransport } from '@modelcontextprotocol/sdk/client/streamableHttp.js'

const mcpClient = new Client({
  name: 'codingcat-agent-aj',
  version: '1.0.0',
})

await mcpClient.connect(
  new StreamableHTTPClientTransport(
    new URL(
      'https://api.sanity.io/v1/context/organizations/YOUR_ORG_ID/mcp/agent-aj-mcp'
    ),
    {
      requestInit: {
        headers: {
          Authorization: `Bearer ${process.env.SANITY_CONTEXT_TOKEN}`,
        },
      },
    }
  )
)

const { tools } = await mcpClient.listTools()

// Next: expose the discovered tools to your model integration,
// execute requested tool calls, and return results to the model.

This establishes the connection and discovers tools; it is not a complete question-answering loop. The endpoint's Sample code is the better starting point for the full integration, including the model client and tool execution.

Framework-specific guides are available for the Vercel AI SDK, OpenAI Agents SDK, and LangChain.

Bonus: Inspect the Organization Context Store with @sanity/client

Agents consume the Knowledge Base through MCP, but backend services can also inspect its underlying documents. Entries, issues, and instructions live in the organization Context store, not an individual project's dataset.

Starting with @sanity/client version 8.4.0, client.context supports querying and listening to that store. This is useful when a backend or CI/CD process needs visibility into pending Knowledge Base issues.

import { createClient } from '@sanity/client'

// Requires @sanity/client >= 8.4.0 and an organization API token
// with Context Viewer permissions.
const client = createClient({
  apiVersion: '2026-08-25',
  useProjectHostname: false,
  useCdn: false,
  token: process.env.SANITY_CONTEXT_TOKEN,
  context: {
    organizationId: 'YOUR_ORGANIZATION_ID',
  },
})

const openIssues = await client.context.fetch(
  `*[
    _type == "sanity.context.issue" &&
    knowledgeBaseId == $knowledgeBaseId &&
    status == "open"
  ]{
    _id,
    status,
    content
  }[0...50]`,
  {
    knowledgeBaseId: 'kb_YOUR_KNOWLEDGE_BASE_ID',
  }
)

console.log('Open Knowledge Base Issues:', openIssues)

The query returns up to 50 open issues for the specified Knowledge Base. It provides programmatic visibility into review work without changing the agent-facing retrieval flow.

Build Knowledge Your Agent Can Navigate

The Agent AJ example uses jokes, but the architecture applies to a much more practical problem: giving an agent a coherent account of what your organization has approved.

Start with a clear purpose. Select high-signal sources. Review contradictory claims. Preserve citations. Then let the agent orient itself with a compact outline and read only the entries it needs.

That is the real advantage over naive chunk retrieval: your team handles knowledge governance before the conversation, rather than asking the model to improvise it during the answer.

Build Your First Sanity Context Knowledge Base

Follow the official guide to compile multi-source knowledge and connect it to your agent through Context MCP.

Start Building

The Five Layers of Agentic Context: Why Canon Only Turns When Someone Signs Off

Alex Patterson — Sat, 17 Oct 2026 05:19:13 +0000

Original: https://codingcat.dev/post/the-five-layers-of-agentic-context-why-canon-only-turns-when-someone-signs-off

Every engineering team shipping AI agents into production eventually hits the exact same wall: the model can solve Olympiad-level math in milliseconds, yet it still tells a customer on live chat that your return policy is 90 days when you changed it last week, or approves an $800 refund without manager sign-off.

In The five layers of agentic context, Sanity co-founder and CEO Magnus Hillestad breaks down why the common advice to "just give the agent context" falls apart at scale. Building on Evan Armstrong's observation that value is shifting from systems of record (which store data) to context layers (which store meaning), Magnus makes a crucial architectural correction: context is not a singular thing.

Instead of dumping every Slack thread, ticket, database row, and policy doc into a single vector "company brain" (the 2026 equivalent of a 2016 data lake turning into a data swamp), production agents rely on five distinct layers of context: Situation, Records, Memory, Process, and Canon. Each layer turns at its own pace, has its own owner, and fails in its own unique way. And most importantly: Canon only turns when someone signs off.

Interactive demo: the Situation to Canon wheel

To bring the mechanical model from the Sanity article to life on CodingCat.dev, I built an interactive HTML and SVG version of the five-wheel apparatus below. Notice the pulsing signal on the right-hand lever: click the handle to start the machine and sign off a Canon revision, or click any of the five layer plates along the linear track to move the read-head carriage and inspect that layer's telemetry.

{
  "_key": "b06_html",
  "_type": "htmlBlock",
  "html": "<div id=\"cc-sanity-wheel-root\" style=\"width:100%;max-width:1040px;margin:24px auto;background:#070709;border:1px solid #27272f;border-radius:16px;padding:20px 24px;color:#f8fafc;font-family:Inter,system-ui,sans-serif;box-shadow:0 20px 50px rgba(0,0,0,0.75);\">\n  <style>\n    #cc-sanity-wheel-root * { box-sizing: border-box; }\n    #cc-sanity-wheel-root .cc-hdr { display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:1px solid #1c1c22;padding-bottom:12px;margin-bottom:12px; }\n    #cc-sanity-wheel-root .cc-pill { display:inline-flex;align-items:center;gap:8px;font-family:'IBM Plex Mono',monospace;font-size:12px;padding:5px 12px;border-radius:999px;background:#121217;border:1px solid #2e2e38;color:#94a3b8; }\n    #cc-sanity-wheel-root .cc-pill.active { border-color:#ff5500;color:#fff;background:rgba(255,85,0,0.14); }\n    #cc-sanity-wheel-root .cc-dot { width:8px;height:8px;border-radius:50%;background:#ff5500;box-shadow:0 0 8px #ff5500; }\n    #cc-sanity-wheel-root .cc-pill.active .cc-dot { background:#c5e86c;box-shadow:0 0 8px #c5e86c; }\n    @keyframes ccRing1 { 0% { r:17px;opacity:0.95;stroke-width:2.5px; } 100% { r:44px;opacity:0;stroke-width:0.5px; } }\n    @keyframes ccRing2 { 0% { r:17px;opacity:0.8;stroke-width:2px; } 100% { r:58px;opacity:0;stroke-width:0.3px; } }\n    @keyframes ccFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-4px); } }\n    #cc-sanity-wheel-root .cc-ring-1 { animation:ccRing1 1.75s cubic-bezier(0.16,1,0.3,1) infinite;pointer-events:none; }\n    #cc-sanity-wheel-root .cc-ring-2 { animation:ccRing2 1.75s cubic-bezier(0.16,1,0.3,1) 0.55s infinite;pointer-events:none; }\n    #cc-sanity-wheel-root .cc-callout { animation:ccFloat 2.2s ease-in-out infinite;cursor:pointer; }\n    #cc-sanity-wheel-root .cc-handle { cursor:pointer; }\n    #cc-sanity-wheel-root .cc-handle:hover .cc-knob-out { stroke:#ff7a33;stroke-width:2.8px; }\n    #cc-sanity-wheel-root .cc-plate { cursor:pointer; }\n    #cc-sanity-wheel-root .cc-deck { margin-top:14px;display:grid;grid-template-columns:1.3fr 1fr;gap:14px; }\n    @media(max-width:780px){ #cc-sanity-wheel-root .cc-deck { grid-template-columns:1fr; } }\n    #cc-sanity-wheel-root .cc-card { background:#141418;border:1px solid #27272f;border-radius:10px;padding:14px 16px; }\n    #cc-sanity-wheel-root .cc-btn { font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;padding:8px 12px;border-radius:7px;border:1px solid #383846;background:#1c1c24;color:#fff;cursor:pointer; }\n    #cc-sanity-wheel-root .cc-btn-pri { background:#ff5500;border-color:#ff7733; }\n    #cc-sanity-wheel-root .cc-bars { display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:10px; }\n    #cc-sanity-wheel-root .cc-col { background:#101015;border:1px solid #22222b;border-radius:6px;padding:6px 4px;text-align:center;cursor:pointer;font-family:'IBM Plex Mono',monospace; }\n    #cc-sanity-wheel-root .cc-col.sel { border-color:#ff5500; }\n  </style>\n  <div class=\"cc-hdr\">\n    <div>\n      <div style=\"font-size:20px;font-weight:700;\">The five layers of agentic context</div>\n      <div style=\"font-size:14px;color:#94a3b8;margin-top:3px;\">Each wheel turns at its own pace. <strong style=\"color:#fff;\">Canon only turns when someone signs off.</strong></div>\n    </div>\n    <div class=\"cc-pill\" id=\"cc-status-pill\"><span class=\"cc-dot\"></span><span id=\"cc-status-txt\">SIGNAL READY - CLICK HANDLE TO START</span></div>\n  </div>\n  <div style=\"background:#040405;border-radius:12px;border:1px solid #19191f;overflow:hidden;\">\n    <svg id=\"cc-wheel-svg\" viewBox=\"0 0 1024 600\" style=\"width:100%;height:auto;display:block;\">\n      <defs>\n        <linearGradient id=\"ccDarkDrum\" x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n          <stop offset=\"0%\" stop-color=\"#222226\"/><stop offset=\"28%\" stop-color=\"#1b1b1f\"/><stop offset=\"44%\" stop-color=\"#28282e\"/><stop offset=\"62%\" stop-color=\"#141417\"/><stop offset=\"100%\" stop-color=\"#070709\"/>\n        </linearGradient>\n        <linearGradient id=\"ccDarkFace\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n          <stop offset=\"0%\" stop-color=\"#1b1b1f\"/><stop offset=\"100%\" stop-color=\"#0b0b0e\"/>\n        </linearGradient>\n        <linearGradient id=\"ccCanonDrum\" x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n          <stop offset=\"0%\" stop-color=\"#ff6b1a\"/><stop offset=\"28%\" stop-color=\"#ff7e38\"/><stop offset=\"42%\" stop-color=\"#ff9357\"/><stop offset=\"56%\" stop-color=\"#f54d00\"/><stop offset=\"84%\" stop-color=\"#c43800\"/><stop offset=\"100%\" stop-color=\"#8c2500\"/>\n        </linearGradient>\n        <linearGradient id=\"ccCanonFace\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n          <stop offset=\"0%\" stop-color=\"#e64600\"/><stop offset=\"100%\" stop-color=\"#992a00\"/>\n        </linearGradient>\n        <linearGradient id=\"ccBaseTop\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n          <stop offset=\"0%\" stop-color=\"#18181c\"/><stop offset=\"100%\" stop-color=\"#0c0c0e\"/>\n        </linearGradient>\n        <linearGradient id=\"ccPillarFront\" x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n          <stop offset=\"0%\" stop-color=\"#1e1e22\"/><stop offset=\"100%\" stop-color=\"#0b0b0d\"/>\n        </linearGradient>\n        <linearGradient id=\"ccPillarSide\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n          <stop offset=\"0%\" stop-color=\"#151518\"/><stop offset=\"100%\" stop-color=\"#09090b\"/>\n        </linearGradient>\n      </defs>\n      <rect width=\"1024\" height=\"600\" fill=\"#040406\"/>\n      <g id=\"cc-base\">\n        <path d=\"M 22 332 L 736 584 Q 758 592 776 580 L 994 434 L 994 447 L 776 593 Q 758 603 736 595 L 22 344 Z\" fill=\"#09090b\" stroke=\"#363640\" stroke-width=\"1.1\"/>\n        <path d=\"M 22 304 L 736 556 Q 758 564 776 552 L 994 406 L 994 434 L 776 580 Q 758 592 736 584 L 22 332 Z\" fill=\"#101014\" stroke=\"#454552\" stroke-width=\"1.2\"/>\n        <path d=\"M 22 304 Q 14 298 25 290 L 214 166 Q 228 157 246 163 L 988 392 Q 1002 398 994 406 L 776 552 Q 758 564 736 556 Z\" fill=\"url(#ccBaseTop)\" stroke=\"#4c4c5a\" stroke-width=\"1.3\"/>\n        <polygon points=\"94,296 128,273 778,497 744,520\" fill=\"#0b0b0e\" stroke=\"#3c3c48\" stroke-width=\"1.1\"/>\n        <line x1=\"101\" y1=\"292\" x2=\"751\" y2=\"516\" stroke=\"#5a5a6a\" stroke-width=\"1.4\"/>\n        <line x1=\"108\" y1=\"287\" x2=\"758\" y2=\"511\" stroke=\"#434350\" stroke-width=\"1.1\"/>\n        <line x1=\"115\" y1=\"282\" x2=\"765\" y2=\"506\" stroke=\"#5a5a6a\" stroke-width=\"1.4\"/>\n        <polygon points=\"62,317 94,296 744,520 712,541\" fill=\"#131318\" stroke=\"#33333e\" stroke-width=\"1\"/>\n        <g id=\"cc-ticks\"></g>\n        <polygon points=\"74,284 86,288 86,314 74,310\" fill=\"#151519\" stroke=\"#525260\"/>\n        <polygon points=\"86,288 131,257 131,283 86,314\" fill=\"#0f0f13\" stroke=\"#454552\"/>\n        <polygon points=\"74,284 119,253 131,257 86,288\" fill=\"#222228\" stroke=\"#686878\"/>\n        <polygon points=\"728,509 740,513 740,539 728,535\" fill=\"#151519\" stroke=\"#525260\"/>\n        <polygon points=\"740,513 785,482 785,508 740,539\" fill=\"#0f0f13\" stroke=\"#454552\"/>\n        <polygon points=\"728,509 773,478 785,482 740,513\" fill=\"#222228\" stroke=\"#686878\"/>\n      </g>\n      <g id=\"cc-plates\"></g>\n      <g id=\"cc-left-pillar\">\n        <polygon points=\"164,258 206,272 288,216 246,202\" fill=\"#1b1b20\" stroke=\"#4d4d5a\"/>\n        <polygon points=\"176,94 202,103 202,270 176,261\" fill=\"url(#ccPillarFront)\" stroke=\"#555564\"/>\n        <polygon points=\"202,103 284,44 284,214 202,270\" fill=\"url(#ccPillarSide)\" stroke=\"#454552\"/>\n        <polygon points=\"176,94 258,35 284,44 202,103\" fill=\"#24242b\" stroke=\"#6e6e80\"/>\n      </g>\n      <g id=\"cc-drums\"></g>\n      <g id=\"cc-bridge\">\n        <polygon points=\"508,26 528,33 528,108 508,101\" fill=\"#141418\" stroke=\"#4c4c5a\"/>\n        <polygon points=\"434,52 514,12 536,19 456,59\" fill=\"#1e1e24\" stroke=\"#5a5a6a\"/>\n        <g id=\"cc-plunger-mem\">\n          <path d=\"M 498,76 L 512,72 L 524,76 L 524,132 C 524,138 498,138 498,132 Z\" fill=\"#16161b\" stroke=\"#686878\" stroke-width=\"1.2\"/>\n          <path d=\"M 505,135 A 6,4 0 1,1 517,135\" fill=\"none\" stroke=\"#8a8a9e\" stroke-width=\"1.2\"/>\n        </g>\n        <g id=\"cc-plunger-can\">\n          <path d=\"M 711,152 L 725,148 L 737,152 L 737,206 C 737,212 711,212 711,206 Z\" fill=\"#16161b\" stroke=\"#9a9aae\" stroke-width=\"1.3\"/>\n          <path d=\"M 718,209 A 6,4 0 1,1 730,209\" fill=\"none\" stroke=\"#ffd4be\" stroke-width=\"1.3\"/>\n        </g>\n        <polygon points=\"434,52 798,177 798,193 434,68\" fill=\"#17171c\" stroke=\"#5a5a6a\"/>\n        <polygon points=\"434,52 452,42 816,166 798,177\" fill=\"#23232a\" stroke=\"#6e6e80\"/>\n        <line id=\"cc-beam-sig\" x1=\"510\" y1=\"73\" x2=\"724\" y2=\"147\" stroke=\"#ff5500\" stroke-width=\"2.5\" stroke-dasharray=\"8 6\" opacity=\"0\"/>\n        <polygon points=\"594,95 624,105 624,123 594,113\" fill=\"#16161b\" stroke=\"#5d5d6e\"/>\n        <polygon points=\"624,105 646,92 646,110 624,123\" fill=\"#101014\" stroke=\"#4c4c5a\"/>\n        <polygon points=\"594,95 616,82 646,92 624,105\" fill=\"#282832\" stroke=\"#7c7c90\"/>\n        <circle id=\"cc-relay-led\" cx=\"620\" cy=\"94\" r=\"3\" fill=\"#3a3a46\"/>\n      </g>\n      <g id=\"cc-right-pillar\">\n        <polygon points=\"722,455 768,471 854,412 808,396\" fill=\"#1d1d22\" stroke=\"#555564\"/>\n        <polygon points=\"734,202 768,214 768,469 734,457\" fill=\"url(#ccPillarFront)\" stroke=\"#5e5e6e\"/>\n        <polygon points=\"768,214 844,162 844,417 768,469\" fill=\"url(#ccPillarSide)\" stroke=\"#50505e\"/>\n        <polygon points=\"734,202 810,150 844,162 768,214\" fill=\"#25252d\" stroke=\"#7a7a8e\"/>\n        <polygon points=\"752,161 798,177 798,193 752,177\" fill=\"#17171c\" stroke=\"#5a5a6a\"/>\n        <polygon points=\"752,161 770,151 816,166 798,177\" fill=\"#23232a\" stroke=\"#6e6e80\"/>\n        <ellipse cx=\"806\" cy=\"322\" rx=\"22\" ry=\"34\" transform=\"rotate(18 806 322)\" fill=\"#111115\" stroke=\"#585868\" stroke-width=\"1.4\"/>\n        <ellipse cx=\"808\" cy=\"323\" rx=\"17\" ry=\"26\" transform=\"rotate(18 808 323)\" fill=\"#0c0c0f\" stroke=\"#454554\"/>\n        <ellipse cx=\"798\" cy=\"388\" rx=\"13\" ry=\"20\" transform=\"rotate(18 798 388)\" fill=\"#121216\" stroke=\"#68687a\"/>\n        <ellipse cx=\"802\" cy=\"390\" rx=\"11\" ry=\"17\" transform=\"rotate(18 802 390)\" fill=\"#19191f\" stroke=\"#7c7c90\"/>\n        <g id=\"cc-handle-btn\" class=\"cc-handle\" role=\"button\" tabindex=\"0\">\n          <rect x=\"748\" y=\"245\" width=\"110\" height=\"175\" fill=\"transparent\"/>\n          <circle id=\"cc-r1\" class=\"cc-ring-1\" cx=\"817\" cy=\"282\" r=\"18\" fill=\"none\" stroke=\"#ff5500\"/>\n          <circle id=\"cc-r2\" class=\"cc-ring-2\" cx=\"817\" cy=\"282\" r=\"18\" fill=\"none\" stroke=\"#ff7a33\"/>\n          <line id=\"cc-rod-b\" x1=\"798\" y1=\"388\" x2=\"813\" y2=\"294\" stroke=\"#9494a8\" stroke-width=\"7\" stroke-linecap=\"round\"/>\n          <line id=\"cc-rod-c\" x1=\"798\" y1=\"388\" x2=\"813\" y2=\"294\" stroke=\"#18181f\" stroke-width=\"4.2\" stroke-linecap=\"round\"/>\n          <line id=\"cc-rod-f\" x1=\"802\" y1=\"390\" x2=\"817\" y2=\"296\" stroke=\"#d4d4e4\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n          <circle id=\"cc-knob\" class=\"cc-knob-out\" cx=\"817\" cy=\"282\" r=\"16\" fill=\"#18181e\" stroke=\"#e2e8f0\" stroke-width=\"2\"/>\n        </g>\n        <g id=\"cc-callout\" class=\"cc-callout\" role=\"button\">\n          <path d=\"M 880,235 L 836,268\" fill=\"none\" stroke=\"#ff5500\" stroke-width=\"2\" stroke-dasharray=\"4 3\"/>\n          <polygon points=\"833,271 838,261 844,268\" fill=\"#ff5500\"/>\n          <rect x=\"832\" y=\"192\" width=\"176\" height=\"44\" rx=\"8\" fill=\"#141010\" stroke=\"#ff5500\" stroke-width=\"1.8\"/>\n          <circle cx=\"848\" cy=\"207\" r=\"4\" fill=\"#ff5500\"/>\n          <text x=\"859\" y=\"211\" fill=\"#ff7a33\" font-family=\"monospace\" font-size=\"10\" font-weight=\"700\">SIGNAL READY</text>\n          <text id=\"cc-badge-sub\" x=\"844\" y=\"227\" fill=\"#ffffff\" font-family=\"monospace\" font-size=\"10.5\" font-weight=\"600\">CLICK HANDLE TO START</text>\n        </g>\n      </g>\n      <g id=\"cc-carriage\">\n        <polygon points=\"586,448 644,410 704,431 646,469\" fill=\"#1c1c22\" stroke=\"#585868\"/>\n        <polygon points=\"586,448 646,469 646,483 586,462\" fill=\"#121216\" stroke=\"#4a4a58\"/>\n        <polygon points=\"646,469 704,431 704,445 646,483\" fill=\"#0d0d10\" stroke=\"#3e3e4a\"/>\n        <ellipse cx=\"645\" cy=\"436\" rx=\"16\" ry=\"10\" fill=\"#1e1e24\" stroke=\"#78788c\"/>\n        <path d=\"M 633,366 L 633,435 C 633,441 657,441 657,435 L 657,366 Z\" fill=\"url(#ccPillarFront)\" stroke=\"#68687a\"/>\n        <polygon points=\"614,324 654,338 654,380 614,366\" fill=\"#16161b\" stroke=\"#5e5e70\"/>\n        <polygon points=\"654,338 678,322 678,364 654,380\" fill=\"#101014\" stroke=\"#4e4e5e\"/>\n        <polygon points=\"614,324 638,308 678,322 654,338\" fill=\"#24242c\" stroke=\"#7c7c90\"/>\n        <circle cx=\"634\" cy=\"348\" r=\"3.2\" fill=\"#ff5500\"/>\n        <ellipse cx=\"664\" cy=\"360\" rx=\"5\" ry=\"12\" fill=\"#22222a\" stroke=\"#7e7e94\"/>\n      </g>\n    </svg>\n  </div>\n  <div class=\"cc-deck\">\n    <div class=\"cc-card\">\n      <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;\">\n        <span id=\"cc-hud-title\" style=\"font-family:monospace;font-size:12px;font-weight:700;padding:3px 9px;border-radius:4px;background:rgba(255,85,0,0.18);border:1px solid #ff5500;color:#ff945e;\">LAYER 5 · CANON</span>\n        <span id=\"cc-hud-cadence\" style=\"font-family:monospace;font-size:12px;color:#94a3b8;\">Cadence: Human Sign-Off Only</span>\n      </div>\n      <div id=\"cc-hud-desc\" style=\"font-size:13.5px;line-height:1.45;color:#e2e8f0;\">Product facts, policies, documentation, approved claims, positioning, and brand. Authored, reviewed, and signed off by humans before agents repeat it to customers.</div>\n    </div>\n    <div class=\"cc-card\">\n      <div style=\"display:flex;gap:8px;flex-wrap:wrap;\">\n        <button type=\"button\" class=\"cc-btn cc-btn-pri\" id=\"cc-btn-pull\">⚡ Click Handle to Start</button>\n        <button type=\"button\" class=\"cc-btn\" id=\"cc-btn-scan\">⇄ Scan All 5 Layers</button>\n        <button type=\"button\" class=\"cc-btn\" id=\"cc-btn-reset\">⏸ Reset</button>\n      </div>\n      <div class=\"cc-bars\" id=\"cc-bars\">\n        <div class=\"cc-col\" data-idx=\"0\"><div style=\"font-size:10px;color:#94a3b8;\">SITUATION</div><div id=\"cc-v0\" style=\"font-size:11px;font-weight:700;margin-top:2px;\">IDLE</div></div>\n        <div class=\"cc-col\" data-idx=\"1\"><div style=\"font-size:10px;color:#94a3b8;\">RECORDS</div><div id=\"cc-v1\" style=\"font-size:11px;font-weight:700;margin-top:2px;\">IDLE</div></div>\n        <div class=\"cc-col\" data-idx=\"2\"><div style=\"font-size:10px;color:#94a3b8;\">MEMORY</div><div id=\"cc-v2\" style=\"font-size:11px;font-weight:700;margin-top:2px;\">IDLE</div></div>\n        <div class=\"cc-col\" data-idx=\"3\"><div style=\"font-size:10px;color:#94a3b8;\">PROCESS</div><div id=\"cc-v3\" style=\"font-size:11px;font-weight:700;margin-top:2px;\">IDLE</div></div>\n        <div class=\"cc-col sel\" data-idx=\"4\"><div style=\"font-size:10px;color:#94a3b8;\">CANON</div><div id=\"cc-v4\" style=\"font-size:11px;font-weight:700;color:#ff7a33;margin-top:2px;\">LOCKED</div></div>\n      </div>\n    </div>\n  </div>\n  <script>\n  (function(){\n    var NS=\"http://www.w3.org/2000/svg\",SX=107,SY=37,ANG=19.075,RAD=ANG*Math.PI/180,UX=Math.cos(RAD),UY=Math.sin(RAD),VX=Math.sin(RAD),VY=-Math.cos(RAD),RMAJ=96,RMIN=46,WX=62,WY=21.45,CX0=268,CY0=138,RIBS=18;\n    var INFO=[\n      {n:\"SITUATION\",b:\"LAYER 1 · SITUATION\",c:\"Cadence: Ephemeral (Minutes / Hours)\",s:\"FAST\",w:1.85,d:\"Who the agent is talking to, what they have already said, what they are trying to do, and what has happened so far in the live session.\"},\n      {n:\"RECORDS\",b:\"LAYER 2 · RECORDS\",c:\"Cadence: Continuous (System of Record)\",s:\"STEADY\",w:0.82,d:\"Customers, orders, SKUs, transactions, call transcripts, and history. Owned by the transactional systems of record that produce it.\"},\n      {n:\"MEMORY\",b:\"LAYER 3 · MEMORY\",c:\"Cadence: Cross-Session Learning\",s:\"STEPPED\",w:0.35,d:\"Which answers solved a problem, what customers corrected, and what returning users prefer across conversations. Reviewed lessons move into Canon.\"},\n      {n:\"PROCESS\",b:\"LAYER 4 · PROCESS\",c:\"Cadence: Governance & Workflows\",s:\"SLOW\",w:0.12,d:\"Who owns content, who approves a change, what an agent may do on its own, and when a person needs to be in the loop.\"},\n      {n:\"CANON\",b:\"LAYER 5 · CANON\",c:\"Cadence: Human Sign-Off Only\",s:\"SIGN-OFF\",w:0,d:\"Product facts, policies, documentation, approved claims, positioning, and brand. The layer the agent repeats out loud to customers.\"}\n    ];\n    var ticks=document.getElementById(\"cc-ticks\");\n    for(var i=0;i<=40;i++){\n      var t=i/40,x1=72+t*650,y1=319+t*224.8,len=(i%8===0)?10:((i%4===0)?7:4.5);\n      var l=document.createElementNS(NS,\"line\");\n      l.setAttribute(\"x1\",x1);l.setAttribute(\"y1\",y1);l.setAttribute(\"x2\",x1+len*0.78);l.setAttribute(\"y2\",y1-len*0.62);\n      l.setAttribute(\"stroke\",(i%8===0)?\"#88889a\":\"#4a4a58\");ticks.appendChild(l);\n    }\n    var platesG=document.getElementById(\"cc-plates\"),plates=[];\n    INFO.forEach(function(inf,idx){\n      var x0=131+idx*SX,y0=359+idx*SY,w=96,dy=33.2,h=33,g=document.createElementNS(NS,\"g\");\n      g.setAttribute(\"class\",\"cc-plate\");\n      var p=document.createElementNS(NS,\"polygon\");\n      p.setAttribute(\"points\",x0+\",\"+y0+\" \"+(x0+w)+\",\"+(y0+dy)+\" \"+(x0+w)+\",\"+(y0+dy+h)+\" \"+x0+\",\"+(y0+h));\n      p.setAttribute(\"fill\",idx===4?\"#161210\":\"#0e0e12\");p.setAttribute(\"stroke\",idx===4?\"#fff\":\"#454554\");p.setAttribute(\"stroke-width\",idx===4?\"1.6\":\"1.1\");\n      var tx=x0+48,ty=y0+dy*0.5+h*0.58,txt=document.createElementNS(NS,\"text\");\n      txt.setAttribute(\"x\",tx);txt.setAttribute(\"y\",ty);txt.setAttribute(\"text-anchor\",\"middle\");txt.setAttribute(\"fill\",idx===4?\"#fff\":\"#cbd5e1\");\n      txt.setAttribute(\"font-family\",\"monospace\");txt.setAttribute(\"font-size\",\"12\");txt.setAttribute(\"font-weight\",idx===4?\"700\":\"500\");txt.setAttribute(\"letter-spacing\",\"0.08em\");\n      txt.setAttribute(\"transform\",\"translate(\"+tx+\",\"+ty+\") skewY(19.1) translate(\"+(-tx)+\",\"+(-ty)+\")\");\n      txt.textContent=inf.n;g.appendChild(p);g.appendChild(txt);\n      g.addEventListener(\"click\",function(){selectIdx(idx,true);});\n      platesG.appendChild(g);plates.push(p);\n    });\n    function ePt(cx,cy,rmaj,rmin,th){return {x:cx+rmaj*Math.cos(th)*VX-rmin*Math.sin(th)*UX,y:cy+rmaj*Math.cos(th)*VY-rmin*Math.sin(th)*UY};}\n    var drumsG=document.getElementById(\"cc-drums\"),drums=[];\n    INFO.forEach(function(_,idx){\n      var isC=(idx===4),cx1=CX0+idx*SX,cy1=CY0+idx*SY,cx2=cx1+WX,cy2=cy1+WY,g=document.createElementNS(NS,\"g\");\n      g.style.cursor=\"pointer\";g.addEventListener(\"click\",function(){selectIdx(idx,true);});\n      var be=document.createElementNS(NS,\"ellipse\");\n      be.setAttribute(\"cx\",cx1);be.setAttribute(\"cy\",cy1);be.setAttribute(\"rx\",RMIN);be.setAttribute(\"ry\",RMAJ);\n      be.setAttribute(\"transform\",\"rotate(\"+ANG+\" \"+cx1+\" \"+cy1+\")\");be.setAttribute(\"fill\",isC?\"#b83700\":\"#121215\");be.setAttribute(\"stroke\",isC?\"#ff9e66\":\"#78788a\");\n      g.appendChild(be);\n      var t1=ePt(cx1,cy1,RMAJ,RMIN,0),b1=ePt(cx1,cy1,RMAJ,RMIN,Math.PI),t2=ePt(cx2,cy2,RMAJ,RMIN,0),b2=ePt(cx2,cy2,RMAJ,RMIN,Math.PI);\n      var bp=document.createElementNS(NS,\"path\");\n      bp.setAttribute(\"d\",\"M \"+t1.x+\" \"+t1.y+\" A \"+RMIN+\" \"+RMAJ+\" \"+ANG+\" 0 0 \"+b1.x+\" \"+b1.y+\" L \"+b2.x+\" \"+b2.y+\" A \"+RMIN+\" \"+RMAJ+\" \"+ANG+\" 0 1 \"+t2.x+\" \"+t2.y+\" Z\");\n      bp.setAttribute(\"fill\",isC?\"url(#ccCanonDrum)\":\"url(#ccDarkDrum)\");bp.setAttribute(\"stroke\",isC?\"#ff945e\":\"#78788a\");g.appendChild(bp);\n      var rLines=[];\n      for(var r=0;r<RIBS;r++){var rl=document.createElementNS(NS,\"line\");rl.setAttribute(\"stroke\",isC?\"#ffaa77\":\"#626274\");rl.setAttribute(\"stroke-width\",\"1.2\");g.appendChild(rl);rLines.push(rl);}\n      var fe=document.createElementNS(NS,\"ellipse\");\n      fe.setAttribute(\"cx\",cx2);fe.setAttribute(\"cy\",cy2);fe.setAttribute(\"rx\",RMIN);fe.setAttribute(\"ry\",RMAJ);\n      fe.setAttribute(\"transform\",\"rotate(\"+ANG+\" \"+cx2+\" \"+cy2+\")\");fe.setAttribute(\"fill\",isC?\"url(#ccCanonFace)\":\"url(#ccDarkFace)\");fe.setAttribute(\"stroke\",isC?\"#ffa372\":\"#78788a\");\n      g.appendChild(fe);\n      [0.91,0.81,0.72].forEach(function(sc,ri){\n        var re=document.createElementNS(NS,\"ellipse\"),rcx=cx2+(ri===2?6.5:(ri===1?3.2:0)),rcy=cy2+(ri===2?2.2:(ri===1?1.1:0));\n        re.setAttribute(\"cx\",rcx);re.setAttribute(\"cy\",rcy);re.setAttribute(\"rx\",RMIN*sc);re.setAttribute(\"ry\",RMAJ*sc);\n        re.setAttribute(\"transform\",\"rotate(\"+ANG+\" \"+rcx+\" \"+rcy+\")\");re.setAttribute(\"fill\",ri===2?(isC?\"#c93b00\":\"#0b0b0e\"):\"none\");re.setAttribute(\"stroke\",isC?\"#ff8547\":\"#4a4a58\");\n        g.appendChild(re);\n      });\n      drumsG.appendChild(g);drums.push({rLines:rLines,cx1:cx1,cy1:cy1,cx2:cx2,cy2:cy2});\n    });\n    function drawRibs(d,ph){\n      for(var r=0;r<RIBS;r++){\n        var th=(ph+(r*2*Math.PI)/RIBS)%(2*Math.PI);if(th<0)th+=2*Math.PI;\n        var vis=Math.sin(th),ln=d.rLines[r];\n        if(vis<=0.02){ln.setAttribute(\"opacity\",\"0\");}else{\n          var p1=ePt(d.cx1,d.cy1,RMAJ,RMIN,th),p2=ePt(d.cx2,d.cy2,RMAJ,RMIN,th);\n          ln.setAttribute(\"x1\",p1.x.toFixed(1));ln.setAttribute(\"y1\",p1.y.toFixed(1));ln.setAttribute(\"x2\",p2.x.toFixed(1));ln.setAttribute(\"y2\",p2.y.toFixed(1));\n          ln.setAttribute(\"opacity\",Math.min(0.95,0.22+0.73*Math.pow(vis,0.65)).toFixed(2));\n        }\n      }\n    }\n    var running=false,revs=0,phases=[0.15,0.42,0.78,1.12,0.28],canonTarget=phases[4],cPos=4,cTarget=4,queue=[],qTimer=0,hAnim=false,hTime=0,bAnim=false,bTime=0;\n    drums.forEach(function(d,i){drawRibs(d,phases[i]);});\n    function selectIdx(idx,move){\n      var inf=INFO[idx];\n      document.getElementById(\"cc-hud-title\").textContent=inf.b;\n      document.getElementById(\"cc-hud-cadence\").textContent=idx===4?(inf.c+\" (Rev #\"+revs+\")\"):inf.c;\n      document.getElementById(\"cc-hud-desc\").textContent=inf.d;\n      plates.forEach(function(p,i){p.setAttribute(\"stroke\",i===idx?\"#ff5500\":(i===4?\"#fff\":\"#454554\"));});\n      var cols=document.querySelectorAll(\"#cc-bars .cc-col\");\n      cols.forEach(function(c,i){c.classList.toggle(\"sel\",i===idx);});\n      if(move){queue=[];cTarget=idx;}\n    }\n    function pullHandle(){\n      hAnim=true;hTime=0;bAnim=true;bTime=0;\n      var wasIdle=!running;running=true;revs+=1;canonTarget+=(2*Math.PI)/9;\n      queue=wasIdle?[0,1,2,3,4]:[2,4];cTarget=queue.shift();selectIdx(cTarget,false);\n      document.getElementById(\"cc-status-pill\").classList.add(\"active\");\n      document.getElementById(\"cc-status-txt\").textContent=\"ACTIVE · CANON SIGNED OFF (REV #\"+revs+\")\";\n      document.getElementById(\"cc-badge-sub\").textContent=\"CLICK TO SIGN OFF CANON\";\n      document.getElementById(\"cc-btn-pull\").textContent=\"⚡ Pull Handle (Sign Off Canon)\";\n      INFO.forEach(function(inf,i){document.getElementById(\"cc-v\"+i).textContent=i===4?(\"REV #\"+revs):inf.s;});\n    }\n    document.getElementById(\"cc-handle-btn\").addEventListener(\"click\",pullHandle);\n    document.getElementById(\"cc-callout\").addEventListener(\"click\",pullHandle);\n    document.getElementById(\"cc-btn-pull\").addEventListener(\"click\",pullHandle);\n    document.getElementById(\"cc-btn-scan\").addEventListener(\"click\",function(){if(!running){pullHandle();return;}queue=[1,2,3,4];cTarget=0;selectIdx(0,false);});\n    document.getElementById(\"cc-btn-reset\").addEventListener(\"click\",function(){\n      running=false;queue=[];cTarget=4;selectIdx(4,false);\n      document.getElementById(\"cc-status-pill\").classList.remove(\"active\");\n      document.getElementById(\"cc-status-txt\").textContent=\"SIGNAL READY - CLICK HANDLE TO START\";\n      document.getElementById(\"cc-badge-sub\").textContent=\"CLICK HANDLE TO START\";\n      document.getElementById(\"cc-btn-pull\").textContent=\"⚡ Click Handle to Start\";\n      INFO.forEach(function(_,i){document.getElementById(\"cc-v\"+i).textContent=i===4?\"LOCKED\":\"IDLE\";});\n    });\n    document.querySelectorAll(\"#cc-bars .cc-col\").forEach(function(col){\n      col.addEventListener(\"click\",function(){selectIdx(parseInt(col.getAttribute(\"data-idx\"),10),true);});\n    });\n    var last=performance.now();\n    function loop(now){\n      var dt=Math.min(0.05,(now-last)/1000);last=now;\n      if(hAnim){\n        hTime+=dt;var p=hTime/0.68;\n        if(p>=1){hAnim=false;p=0;}else{p=p<0.38?Math.sin((p/0.38)*(Math.PI/2)):Math.cos(((p-0.38)/0.62)*(Math.PI/2));}\n        var kx=817-p*51,ky=282+p*68,rx=813-p*47,ry=294+p*60;\n        document.getElementById(\"cc-rod-b\").setAttribute(\"x2\",rx);document.getElementById(\"cc-rod-b\").setAttribute(\"y2\",ry);\n        document.getElementById(\"cc-rod-c\").setAttribute(\"x2\",rx);document.getElementById(\"cc-rod-c\").setAttribute(\"y2\",ry);\n        document.getElementById(\"cc-rod-f\").setAttribute(\"x2\",rx+4);document.getElementById(\"cc-rod-f\").setAttribute(\"y2\",ry+2);\n        document.getElementById(\"cc-knob\").setAttribute(\"cx\",kx);document.getElementById(\"cc-knob\").setAttribute(\"cy\",ky);\n        document.getElementById(\"cc-r1\").setAttribute(\"cx\",kx);document.getElementById(\"cc-r1\").setAttribute(\"cy\",ky);\n        document.getElementById(\"cc-r2\").setAttribute(\"cx\",kx);document.getElementById(\"cc-r2\").setAttribute(\"cy\",ky);\n      }\n      if(bAnim){\n        bTime+=dt;var bp=bTime/1.1;\n        if(bp>=1){bAnim=false;document.getElementById(\"cc-beam-sig\").setAttribute(\"opacity\",\"0\");document.getElementById(\"cc-relay-led\").setAttribute(\"fill\",\"#3a3a46\");document.getElementById(\"cc-plunger-mem\").setAttribute(\"transform\",\"translate(0,0)\");document.getElementById(\"cc-plunger-can\").setAttribute(\"transform\",\"translate(0,0)\");}\n        else{var py=Math.sin(bp*Math.PI)*4.5;document.getElementById(\"cc-plunger-mem\").setAttribute(\"transform\",\"translate(0,\"+py+\")\");document.getElementById(\"cc-plunger-can\").setAttribute(\"transform\",\"translate(0,\"+py+\")\");document.getElementById(\"cc-beam-sig\").setAttribute(\"opacity\",Math.sin(bp*Math.PI).toFixed(2));document.getElementById(\"cc-relay-led\").setAttribute(\"fill\",\"#ff5500\");}\n      }\n      if(running){\n        for(var i=0;i<4;i++){\n          phases[i]+=INFO[i].w*dt*(i===2?(0.3+1.4*Math.pow(0.5+0.5*Math.sin(now*0.0045),3)):1);\n          drawRibs(drums[i],phases[i]);\n        }\n      }\n      var cd=canonTarget-phases[4];if(Math.abs(cd)>0.0005){phases[4]+=cd*Math.min(1,dt*7.5);drawRibs(drums[4],phases[4]);}\n      var diff=cTarget-cPos;\n      if(Math.abs(diff)>0.008){cPos+=diff*Math.min(1,dt*5.2);}else{cPos=cTarget;if(queue.length>0){qTimer+=dt;if(qTimer>=0.42){qTimer=0;cTarget=queue.shift();selectIdx(cTarget,false);}}}\n      var u=cPos-4;document.getElementById(\"cc-carriage\").setAttribute(\"transform\",\"translate(\"+(u*SX).toFixed(1)+\",\"+(u*SY).toFixed(1)+\")\");\n      requestAnimationFrame(loop);\n    }\n    requestAnimationFrame(loop);\n  })();\n  </script>\n</div>"
}

Breaking down the five layers of agentic context

Why does the wheel metaphor work so well for engineering teams? Because in a real production stack, context does not mutate at a uniform clock speed. Treating live conversational state the same way you treat approved pricing or refund policies guarantees hallucinations and compliance failures. Here is how the five layers compare across velocity, ownership, and failure modes:

{
  "_key": "b09_table",
  "_type": "table",
  "rows": [
    {
      "_key": "r0",
      "_type": "row",
      "cells": [
        "Context Layer",
        "Wheel Velocity / Lifespan",
        "What It Contains",
        "Primary Owner",
        "Failure Mode When Missing or Ungoverned"
      ]
    },
    {
      "_key": "r1",
      "_type": "row",
      "cells": [
        "1. Situation",
        "Fastest (minutes to hours)",
        "Who the agent is talking to right now, what was already said, and current session state",
        "Runtime / session state",
        "Every turn starts from zero; the agent suggests the exact fix the user already tried"
      ]
    },
    {
      "_key": "r2",
      "_type": "row",
      "cells": [
        "2. Records",
        "Continuous (real-time transactions)",
        "Customers, orders, SKUs, transactions, call transcripts, and account history",
        "Systems of record (CRM, ERP, DB)",
        "The agent cannot verify order facts or personalize responses to the user's actual history"
      ]
    },
    {
      "_key": "r3",
      "_type": "row",
      "cells": [
        "3. Memory",
        "Stepped (cross-conversation learning)",
        "Which answers solved a problem, user corrections, and returning customer preferences",
        "Agent learning loop (needs human review)",
        "Missing memory repeats mistakes; unreviewed memory learns bad habits like handing out unapproved discounts"
      ]
    },
    {
      "_key": "r4",
      "_type": "row",
      "cells": [
        "4. Process",
        "Slow (operational rules and mandate)",
        "Who owns content, approval flows, permissions, and when a human must be in the loop",
        "Operations and engineering governance",
        "The agent acts outside its mandate, such as approving an $800 refund when anything over $600 needs sign-off"
      ]
    },
    {
      "_key": "r5",
      "_type": "row",
      "cells": [
        "5. Canon",
        "Human sign-off only (locked ratchet)",
        "Product facts, policies, documentation, approved claims, positioning, and brand",
        "Content / Context Operations team",
        "The agent confidently repeats outdated or contradictory claims your business does not stand behind"
      ]
    }
  ]
}

Why "company brains" turn into data swamps for customer-facing agents

One of the sharpest insights in Magnus's piece is his comparison between today's all-in-one "company brain" vector stores and the data lakes of a decade ago. Internally, pointing an enterprise search bot at Slack, Notion, and Jira works fine because employees have enough institutional awareness to spot an outdated thread from 2024.

Customer-facing agents do not have that luxury. When your pricing page says $49, an old blog post says $39, and a sales battle card in Google Drive says something else, an agent reading your raw web pages burns extra tokens trying to reconcile contradictions, or worse, quotes the wrong price to a buyer. Moving from unstructured "pages" to a structured content model gives both humans and agents a single source of truth.

The overhead bridge: how Memory and Records promote into Canon

Look closely at the top of the mechanical wheel apparatus above: an overhead bridge arm connects the Memory drum (Wheel 3) directly to the orange Canon drum (Wheel 5). That mechanical link represents the most important operational loop in agentic engineering:

**Signals flow in from Records and Memory: **Sales call transcripts, support tickets, and agent memory surface recurring customer corrections or product changes.
**Content teams act as Context teams: **Instead of letting unreviewed agent memory drift into production policy, humans review candidate updates, resolve contradictions across sources, and sign off via Sanity Workflows.
**Compiled Canon ships over MCP: **At Everything *[NYC] 2026, Matt Chamberlain from Braze demonstrated this exact loop by compiling Braze's public documentation into a Sanity Knowledge Base served over an MCP endpoint, watching sales calls for market changes, and routing proposed battle-card updates to humans for sign-off.

Why precompiled Canon makes fast, cheap models viable in production

If an agent has to grep raw documents and synthesize what your business stands for from scratch on every prompt, you are forced to pay for slow, frontier-class reasoning models on every turn. When Sanity Context precompiles Canon into a structured Knowledge Base exposed over MCP, the map of verified facts and relationships is already drawn. A smaller, faster, cheaper model can answer with low latency, and a lightweight classifier can verify every outgoing response against Canon before the customer ever sees it.

How the interactive HTML/SVG wheel is built

If you want to embed the Situation-to-Canon wheel in your own docs or architecture decks, the entire component uses zero external dependencies: just inline SVG geometry projected along a 19.075-degree isometric axle and a 60fps requestAnimationFrame loop. Each drum projects 18 radial ribs across the visible front-left half of a tilted ellipse, while the Canon drum remains locked until the handle click handler increments the target phase:

// Parametric isometric projection for each rotating context drum
const AXIS_ANGLE_DEG = 19.075;
const RAD = (AXIS_ANGLE_DEG * Math.PI) / 180;
const UX = Math.cos(RAD), UY = Math.sin(RAD);
const VX = Math.sin(RAD), VY = -Math.cos(RAD);

function ellipsePoint(cx, cy, rMaj, rMin, theta) {
  return {
    x: cx + rMaj * Math.cos(theta) * VX - rMin * Math.sin(theta) * UX,
    y: cy + rMaj * Math.cos(theta) * VY - rMin * Math.sin(theta) * UY,
  };
}

// Handle click signal: ratchets Canon forward by one approved step
function onHandleClick() {
  machineRunning = true;
  canonSignOffCount += 1;
  canonTargetPhase += (2 * Math.PI) / 9; // +40 deg ratchet step
  triggerOverheadBridgePulse();          // Plungers stamp Memory -> Canon
}

The bottom line for AI engineers

Magnus closes the article with a rule of thumb that belongs on every AI engineer's desk: the more autonomy you give an agent, the more of its context needs to be canon. Read the full post on the Sanity blog, try pulling the sign-off handle on the wheel above, and let us know on CodingCat.dev how you are governing canonical context in your own agent loops!

Live Coding with the Amplify UI team

Alex Patterson — Sun, 11 Oct 2026 06:02:53 +0000

Original: https://codingcat.dev/podcast/cwcc-0-8-amplify-ui

AWS Amplify UI: Build UI Fast with Amplify on React

AWS Amplify UI is a set of React components that make it easy to build beautiful and responsive user interfaces. The components are built on top of the Amplify framework, which provides a unified way to connect your app to backend services.

Amplify UI is designed to be easy to use, even for beginners. The components are well-documented and there are plenty of examples to help you get started.

In this blog post, we'll show you how to use Amplify UI to build a simple todo app.

Getting Started

The first step is to install Amplify UI. You can do this with the following command:

npm install @aws-amplify/ui

Once Amplify UI is installed, you can start using the components in your app.

Creating a Todo List

To create a todo list, we'll use the following components:

AmplifyCard: This component is used to create a card that displays a todo item.
AmplifyInput: This component is used to create a text input field.
AmplifyButton: This component is used to create a button.

Here's the code for our todo list:

import React from 'react';
import { AmplifyCard, AmplifyInput, AmplifyButton } from '@aws-amplify/ui';

const TodoList = () => {
    const [todos, setTodos] = useState([]);

    const addTodo = () => {
        const newTodo = {
            text: e.target.value
        };

        setTodos([...todos, newTodo]);
    };

    return (
        <div>
            <AmplifyCard>
                <h2>Todo List</h2>
                <ul>
                    {todos.map((todo, index) => (
                        <li key={index}>
                            {todo.text}
                            <AmplifyButton onClick={() => setTodos(todos.filter((t) => t.id !== todo.id))}>
                                Delete
                            </AmplifyButton>
                        </li>
                    ))}
                </ul>
            </AmplifyCard>

            <AmplifyInput placeholder="Enter a new todo" onChange={(e) => addTodo()} />
        </div>
    );
};

export default TodoList;

This code will create a todo list with a text input field and a button. When you enter a todo item in the text input field and click the button, the item will be added to the list.

What is next?

AWS Amplify UI is a powerful tool that can help you build beautiful and responsive user interfaces. The components are easy to use and well-documented, making them a great choice for beginners and experienced developers alike.

If you're looking for a way to build user interfaces quickly and easily, then AWS Amplify UI is a great option.

Dockerless Serverless GPUs: How I Built a Fast, Cheap AI SaaS with RunPod Flash

Alex Patterson — Sat, 10 Oct 2026 16:07:26 +0000

Original: https://codingcat.dev/post/dockerless-serverless-gpus-fast-cheap-ai-saas-with-runpod-flash

Commercial AI image generation APIs like Google Vertex AI charge 3 to 4 cents per generation. Spend $1, and you get roughly 25 images.

In this walkthrough of FlashFun.dev, we look at how to run dedicated serverless GPUs using RunPod Flash to drop that cost down to between $0.00033 and $0.002 per image, stretching that exact same $1 to buy between 500 and 3,000 images.

The economics: hosted APIs vs. RunPod Flash

When running on RunPod Serverless, compute bills strictly per second of execution and scales completely to zero.

Target tier: 24 GB VRAM (RTX 4090 / Ada generation)
Flex rate: ~$1.10/hr, or $0.000306/sec

{
  "_key": "60ctpi70gigj",
  "_type": "table",
  "rows": [
    {
      "_key": "un2m67x5ybay",
      "_type": "row",
      "cells": [
        "Metric",
        "Hosted APIs (Vertex AI, etc.)",
        "RunPod Flash (warm execution)",
        "RunPod Flash (cold/trailing idle)"
      ]
    },
    {
      "_key": "4i08zo52h4or",
      "_type": "row",
      "cells": [
        "Cost per generation",
        "$0.0300 to $0.0400",
        "$0.00033",
        "$0.00200"
      ]
    },
    {
      "_key": "4tw3uvzq8ron",
      "_type": "row",
      "cells": [
        "Images per $1.00",
        "~25 images",
        "~3,000 images",
        "~500 images"
      ]
    },
    {
      "_key": "i43podmfnj6p",
      "_type": "row",
      "cells": [
        "Execution time",
        "2 to 5 seconds",
        "1.1s total (297ms pure GPU)",
        "1.1s total + 6s trailing idle"
      ]
    },
    {
      "_key": "6pphwi05d696",
      "_type": "row",
      "cells": [
        "Infrastructure overhead",
        "Zero setup",
        "Zero Dockerfiles (pure Python)",
        "Zero Dockerfiles (pure Python)"
      ]
    },
    {
      "_key": "7a71k1tclsqs",
      "_type": "row",
      "cells": [
        "Scale to zero",
        "Automatic",
        "Automatic ($0 when idle)",
        "Automatic ($0 when idle)"
      ]
    }
  ]
}

Why "dockerless" matters

Historically, running your own GPU endpoints meant:

Crafting multi-stage Dockerfiles.
Debugging CUDA base images against host driver versions.
Pinning PyTorch builds to specific cuDNN variants.
Pushing massive 10GB+ layers to container registries on every dependency tweak.

RunPod Flash eliminates this entire packaging loop. You define your GPU requirements, scaling floors and ceilings, and pip dependencies directly within Python application code via decorators.

import torch
from diffusers import AutoPipelineForImage2D
from runpod_flash import endpoint

@endpoint(
    gpu=["RTX 4090", "RTX A5000"],
    min_replicas=0,  # Scale to zero floor ($0 idle cost)
    max_replicas=5,  # Ceiling protection against runaway bills
    dependencies=["torch", "diffusers", "transformers", "accelerate"]
)
class SDXLGenerator:
    def __init__(self):
        # High-leverage optimization: runs ONCE per container boot
        self.pipe = AutoPipelineForImage2D.from_pretrained(
            "stabilityai/sdxl-turbo",
            torch_dtype=torch.float16,
            variant="fp16"
        ).to("cuda")

    def generate(self, prompt: str) -> str:
        # Runs per incoming request (~297ms inference)
        image = self.pipe(prompt=prompt, num_inference_steps=2, guidance_scale=0.0).images[0]
        return image_to_base64(image)

Local dev workflow

Create and sync the virtual environment: uv venv && uv sync
Authenticate: flash login
Hot-reload against remote hardware: flash dev (tunnels local requests directly to a warm GPU worker in the cloud)

Full-stack architecture: the FlashFun.dev harness

To benchmark open-weight models under real-world conditions, FlashFun.dev runs an unbiased blind A/B arena where two models race each other:

Endpoint A: SDXL Turbo (2 steps) on a 24 GB GPU
Endpoint B: Flux.1 Schnell (4 steps) on a 48 GB GPU

The client (React/Vite) posts a battle request to a Cloudflare Worker running Hono, which handles Better Auth and a D1 token meter, then fans out dispatches to both RunPod Flash workers and streams previews back.

Core architecture patterns

Server-side blind voting: model identifiers are completely omitted from the client response (labeled generically as optionA and optionB). The real mapping persists in Cloudflare D1 until the user submits their vote, preventing client-side inspection via browser devtools.
Zero egress storage: generated images write directly to Cloudflare R2. With thousands of high-resolution PNGs served to visitors, avoiding traditional cloud egress fees keeps infrastructure margins intact.
Append-only token ledger in D1: because SQLite does not support standard interactive multi-statement transactions, token deductions are handled via an append-only transaction ledger with atomic checks (WHERE sum(credits) >= 1), preventing double-spend race conditions.
Async polling over long HTTP holds: direct synchronous execution endpoints can time out if a worker hits a cold start (over 60 seconds). Submitting jobs asynchronously and polling provides real-time container warm-up indicators in the UI.

Four levers to keep inference under a fraction of a cent

Maintain a scale-to-zero floor (min_replicas=0). An idle 24 GB GPU running continuously costs roughly $800/month doing nothing. Scale to zero ensures you pay solely for active user traffic.
Load models in container __init__. Pulling weights takes about 15 seconds once per container lifecycle. Initializing models inside request handlers incurs that 15-second penalty on every single image.
Use distilled, low-step models. SDXL Turbo (2 steps) and Flux.1 Schnell (4 steps) deliver high visual quality at fractions of the compute time required by 30-step standard base checkpoints.
Optimize transport over compute. In benchmarks, raw GPU computation took 297ms, while total round-trip wall-clock time was 1.1s. Over 70% of wall-clock latency is consumed by queuing, dispatch, and base64 serialization.

Project resources and links

GPU infrastructure: RunPod Serverless & RunPod Flash
Live application: FlashFun.dev
Source code: GitHub repository (codercatdev/flash_app)
Cloudflare stack: Cloudflare Workers, Cloudflare D1, Cloudflare R2

Verification checklist for your deployment

Verify flash login creates an active token inside ~/.runpod/.
Ensure your @endpoint configuration sets min_replicas=0 before pushing production workloads.
Confirm R2 API tokens and custom domain bindings are added to your wrangler.jsonc file.
Run the repo benchmark script against your active endpoint to establish baseline warm vs. cold latency.

Watch the full build

Watch the full build breakdown on YouTube: Dockerless Serverless GPUs: How I Built a Fast, Cheap AI SaaS using RunPod Flash!

The video is the visual companion and live demonstration of the architecture, benchmarks, and codebase detailed above.

Why We Are Absolutely Obsessed with Sticker Mule’s Holographic Stickers

Alex Patterson — Tue, 23 Jun 2026 02:29:08 +0000

Original: https://codingcat.dev/post/why-we-are-absolutely-obsessed-with-sticker-mule-s-holographic-stickers

If you’ve been following CodingCat.dev for a while, you might remember when I first talked about how much we love Sticker Mule. Well, we are back, and this time we have a new obsession: Holographic Stickers.

Let’s be honest, as developers, our laptops are basically our creative canvases. A blank laptop lid is just a missed opportunity for self-expression! We’ve always loved the thick, durable, and vibrant vinyl stickers we get from Sticker Mule, but their holographic material takes things to a completely different dimension.

Catching the Light (and the Eyes) The moment we opened our latest batch of CodingCat.dev stickers, we were blown away. The holographic effect isn't just a cheap glittery overlay; it's a premium, iridescent shine that catches the light beautifully from every angle. Whether you're coding in a dark room with just the glow of your monitors or sitting at a sunny coffee shop, these stickers shift colors and look absolutely incredible.

Built for the Real World Just like their classic die-cut stickers, the holographic ones don't skimp on quality. They are heavily weatherproof, scratch-resistant, and can survive being tossed in a backpack every day. We’ve slapped these on laptops, water bottles, and notebooks, and they hold up brilliantly without peeling or losing that mesmerizing rainbow effect.

Check out all of the ones I have been finding in the wild!

Get Your Own! If you have a logo, a fun piece of art, or just a joke you want to turn into a sticker, we can't recommend the holographic option enough. It gives your brand that premium, futuristic feel that is perfect for the tech world.

Sticker Mule makes the proofing process incredibly easy, and their turnaround times are lightning-fast.

AJ is Loving Sticker Mule

Alex Patterson — Thu, 12 Mar 2026 15:05:26 +0000

Original: https://codingcat.dev/post/aj-is-loving-sticker-mule

https://codingcat.dev/post/aj-is-loving-sticker-mule

I have tried several sticker places and the images always come back terrible and the customer service stinks. Then I found Sticker Mule and everything has been like a dream! Check out all of their custom stickers!

*Get $10 in Credit from AJ today!*Loading image...

All the stickers a cat could possible need

AJ may have gotten his paws on the keyboard while I was ordering our first set of stickers, but honestly they are such a great deal I still placed the order.

Studio Wall Logo

I was so impressed by how the stickers turned out that I had to get a logo for the new studio!

JAMStackGR

Alex Patterson — Thu, 12 Mar 2026 15:03:46 +0000

Original: https://codingcat.dev/post/jamstackgr-1-sanity-io-as-a-backend

https://codingcat.dev/post/jamstackgr-1-sanity-io-as-a-backend

JAMStack GR #1

https://docs.google.com/presentation/d/1GsitEUyrC0xV4xlpFuRB9QKI5B4hdB5tZ5ldZEbuciU/edit?usp=sharing

Have you ever used Wordpress or Contentful? There is a new Headless CMS that might replace them.

Distribute a single source of truth to any (all) channel, device or product.

Sweet Query APIs Prepare data in queries using joins and projections. CDN cache multiple queries in a single request. GraphQL in beta.

Powerful patching Powerful APIs for patching, exporting, and listening. No locking with real-time syncing.

Secure & Compliant Fully GDPR Compliant. EU Hosted. Data encrypted at rest and in transit. APIs TLS / SSL only.

Apps, not ops Sanity is a full-featured content API and editing solution that lets you concentrate on your core business.

Enterprise comforts Third party login, free-form security rules, transactional writes and millions of documents.

Scale ready Stop worrying about traffic spikes with asset and API CDNs on every continent – excepting Antarctica.

Apps, not ops! Sanity is a full-featured content API and editing solution that lets you concentrate on your core business.

Scale ready. Stop worrying about traffic spikes with asset and API CDNs on every continent – excepting Antarctica.

Flexible and fast Structured content flows easily across APIs and services, enabling rapid innovation.

Distribute freely Deep queries with joins on unstructured data. Select and reproject properties. Combine queries into a single cached result on a global CDN.

Adapt continuously Customize editing environments to fit workflows and quickly iterate on data models.

Ship fast Sanity is a modern, API-first digital content management system that lets developers work fast using technologies they love

Customize Sanity is a headless CMS construction kit that you can adapt to create optimal editing experiences.

Liberate legacy systems Import content in real-time from multiple sources and instantly query across them.

Create custom editing workflows and experiences Icon for Customize in React.js Customize in React.js Open Source JavaScript editor. Full source code, permissive license.

Instant UIs for complex data Model your content exactly the way you want with an extensive toolkit.

Real-time Collaboration Edit structured, highly connected documents collaboratively.

https://medium.com/@kimbjrkman/how-to-use-inline-images-in-rich-text-with-sanity-io-c42594baa509https://jamstackthemes.dev

Updating AJonP's Brand

Alex Patterson — Wed, 04 Mar 2026 21:26:50 +0000

Original: https://codingcat.dev/post/updating-ajonps-brand

https://codingcat.dev/post/updating-ajonps-brand

Another evolution in the AJonP brand has come in the form of standardizing on acceptance. Making the most of neutral (non-stereotyped) colors. Taking a nod from Dev.to and updating AJ's tag to include a rainbow, as every mascot should have gender neutrality.

First the Technology

If you have not checked out Figma yet please do so right meow! It is so powerful when you can take a component and reuse it throughout your site. Checkout how I can change the eyes in all of these different Logos, just by changing the main component.https://www.youtube.com/embed/IFLQySh-Zb4?autoplay=0&rel=0&showinfo=0&modestbranding=1

AJ's New Tag

AJ will now be representing more people equally, and that is really important particularly to web development! We want a community that encourages everyone to share and learn together!

Sanity.io to Builder.io Data Transfer

Alex Patterson — Wed, 04 Mar 2026 21:25:41 +0000

Original: https://codingcat.dev/post/sanity-io-to-builder-io-data-transfer

I am hoping to make a Sanity.io plugin for builder. In doing so I thought I would write a little conversion tool before hand to figure out all the ins and outs of Builder.io and Sanity.io, so I thought I would share some of my findings. I will keep this tutorial updated as the plugin progresses.

The repo example has three things that you might find useful.

Deleting All Data
Creating all new types
Adding all new Data

Repo for conversion example https://github.com/CodingCatDev/sanity-to-builder.git

Deleting All Data

https://github.com/CodingCatDev/sanity-to-builder/blob/84d8b5d436b2d674f916670317cb48de916c8a68/src/index.ts#L175

In order to delete all the data you need to first find all the models you want to delete

Get all Models from Builder (even unpublished)

In sanity you deal with things like draft. in documents. In Builder these items are just known to be unpublished version. So you need to have includeUnpublished=true in your API call. I looked for a while in the sdk and have not found this option so far.

You can handle this by using the fetch command instead of the sdk.

https://github.com/CodingCatDev/sanity-to-builder/blob/84d8b5d436b2d674f916670317cb48de916c8a68/src/config.ts#L134

Creating all new types

First you need to find all the types in your sanity.io database. I find it best to use Groq. So we can find all the types in Sanity and then create those in Builder as new Models.

Adding all new Data

Long Term goal

The End goal is to build a plugin for syncing your data...

Builder content link https://github.com/BuilderIO/builder/tree/main/plugins/contentful

Supabase, Next.js and Builder.io

Alex Patterson — Wed, 04 Mar 2026 21:17:30 +0000

Original: https://codingcat.dev/podcast/supabase-next-js-and-builder-io

The Purrfect Beginning

Alex Patterson — Wed, 04 Mar 2026 21:15:57 +0000

Original: https://codingcat.dev/podcast/0-0-the-purrfect-beginning

We are on a mission to provide you with the latest tools and trends, that take you from a house cat to a fierce LION.

Even when your code isn’t feline that good, we ensure you’ll get there with the right cat-i-tude.

Alright.. Let’s get up and GIT moving..

Right Meow!!!

Learning how to be a developer is hard, Purrfect.dev will show you how to grow as a developer bit by bit.

What We Cover

JAMStack (Javascript, API, MarkUp)
HTML
CSS
Gaming (Unity)
Mobile
AWS, GCP, Azure
Serverless
Agile
Scrum
Project and Program Management
Showing developers the successful path
Quickest way to get PAID

Links

Send in a voice message: https://podcasters.spotify.com/pod/show/purrfect-dev/message

GenAI for Engineers, What's Real, What's Not and What's Coming

Alex Patterson — Wed, 19 Nov 2025 13:16:50 +0000

Original: https://codingcat.dev/podcast/genai-for-engineers-what-s-real-what-s-not-and-what-s-coming

By the end of this post, you’ll understand:

The new engineering landscape GenAI has created
Practical best practices for leveraging GenAI in your work
Mistakes and misconceptions you absolutely want to avoid
Inspiring tools and frameworks that are already changing the game
What’s on the horizon, both thrilling and a little overwhelming

Let’s get started!

Introduction: Why GenAI Has Every Engineer Talking

You know the feeling—everyone’s suddenly talking about automation, agents, and how AI is about to revolutionize everything. You read about companies “eliminating jobs” thanks to GenAI, and you’re wondering… Is this really happening? Is this a threat, or is it a huge opportunity?

If you’ve ever sat with those questions, you’re in good company! On our latest episode, I spoke with Balki, a seasoned CTO, about how GenAI is reshaping engineering roles, what’s actually working in startups right now, and how you can avoid the typical pitfalls to come out ahead.

Why this blog post matters:

“First time founders focus on product. Successful founders focus on distribution.” — Balki

That means it’s not just about building with AI—it’s about making it useful, scalable, and profitable.

Meet Balki: Everyday Startup Battles, AI Style

Before we jump into the nitty-gritty, let’s meet our expert guest.

Balki's Career: From BigCorp to Fractional CTO

Balki spent his first decade as an engineer at Fiserv—deep in the online banking trenches, working primarily on Microsoft’s tech stack. Eventually, he pivoted to leading his own startup, taking the leap from “comfortable” to “complete accountability.”

Takeaway: The happiness came less from money and more from ownership and learning, even when the risks were high.

“There's nobody else to complain about. I’m accountable for everything.”

How the Leap Happened (and What You Can Learn)

Far from a sudden “drop everything and start a company,” Balki’s transition was informed by education (an EMBA program) and practical testing. The final pivot occurred in an entrepreneurship course—where building a product from scratch “felt like coming home.”

Lesson: Big jumps are rarely one moment. Often, it’s a series of small pivots, each featuring late-night emails, experimental coding, and a few “blind confidence” moments.

CTO Roles: Full-Time, Fractional, and What That Means for Startups

Ever wondered what the difference is between a full-time CTO and a fractional CTO? Balki’s journey is a fascinating example:

Full-Time CTO vs. Fractional CTO

Full-Time CTO: Committed to one company.
Fractional CTO: Provides strategic, high-impact guidance to several startups at once—usually part-time.

Fractional CTOs thrive by:

Bringing deep expertise from multiple sectors
Targeting high-leverage activities (think: 20 hours a month laser-focused on the biggest problems)
Accelerating product clarity and distribution

Big insight: Every minute counts. When you’re dropping in for a few hours a week, priorities become crystal clear!

GenAI for Engineers: From “Just Another Tool” To Business Superpower

GenAI isn’t new—but the way it’s used by engineering teams is evolving fast. Balki says:

“The market is flooded with proof-of-concept tools targeting non-engineers. In my world, there’s a big chasm between building a prototype, getting traction, and scaling.”

You can hack together a quick POC with Lovelace or Bolt in minutes. But scaling that prototype—making it reliable, distributable, and profitable—is a different sport.

Why Scaling Is So Hard (and Where GenAI Can Help)

Most startups stall, even after they get initial traction. Balki specializes in bridging this “chasm”—helping teams go from “scrappy” to “scalable.”

“Engineering Excellence”: Balki’s Five Pillars + GenAI

Let’s get super practical. Any successful engineering team needs engineering excellence. Before GenAI, Balki set out four pillars. With GenAI, a fifth was added. Here’s the breakdown:

The Four Classic Pillars

Automated Testing
- Validates code. Makes sure your software can withstand real-world scenarios.
CI/CD Pipelines
- Enables drama-free code deployments.
- Example: GitHub Actions
Observability
- Let’s engineers be the first to know when something breaks (not your customers).
- Example: Datadog
Modular Architecture
- Flexible, scalable code organization—critical for rapid evolution.

The Fifth Pillar: GenAI Fluency

Today, GenAI fluency is just as critical. In fact, Balki breaks this down further into three sub-pillars (detailed below).

Why GenAI Matters

Thanks to GenAI, startups can rapidly accelerate improvement in these pillars—without blowing the budget or risking bankruptcy. You can stay agile and address technical debt much faster.

GenAI and Job Roles: Are We Really Automating Ourselves Out?

The media loves to declare “X jobs eliminated by GenAI!”—but is this really the story?

What’s Actually Changing in Engineering

Specialization is risky.

Engineers who only focus on one niche (e.g., frontend specialist, TypeScript expert) are seeing those tasks rapidly commoditized.

“For 20 years it was similar—good engineers could rest on their laurels. Now that’s been commoditized. Founder mindset is what matters.”

Full-stack skills are becoming standard. The ability to build, deploy, test, and validate end-to-end is the new norm.

So what tasks are ripe for GenAI automation today?

Balki notes: pure specialization may soon be obsolete, and “mundane tasks” (like repetitive API wrappers, boilerplate code, out-of-date documentation) are prime targets for automation.

Real-World Example: API Wrappers & SDKs

Many engineers are scrambling to build “MCP servers”—wrappers around APIs and OpenAI SDKs. With the release of the OpenAI App SDK, a new “walled garden” effect is emerging. Is this healthy? Are we risking another App Store scenario?

It’s still hard to say if this is a passing trend or a lasting shift. For B2B SaaS, the immediate risk may be low, but keeping up AI fluency is more important than ever.

Engineering AI Fluency: Climbing the Three GenAI Sub-Pillars

What does “AI fluency” really mean for engineering teams? Balki’s framework divides it into three practical levels:

Level 1: Leveraging AI Tools for Engineer Productivity

This is all about using AI tools—like Cursor, Claud Code, Code Rabbit, and GitHub Copilot—to supercharge your coding workflow.

Tip:

Cursor and Cloud Code excel for different personalities—Cursor for leaders, Cloud Code for craftspeople. Setting team-wide Cursor rules keeps best practices consistent.

Level 2: Using AI Tools to Boost Engineering Excellence

Apply AI directly to accelerate the four classic pillars.

Testing & Coverage (e.g., auto-generating tests)
Deployment Pipelines (e.g., AI-powered CI/CD suggestions)
Modularity & Code Review
- Code Rabbit: Cuts review time on pull requests, boosting speed.
- Axel AI: Embeds in legacy code to help modernize architecture.
- Antithesis: Runs containers to catch edge-case bugs in staging.

“Anything that can accelerate engineering excellence lights up my eyes.”

Level 3: Incorporating AI Directly Into Product Features

This is the “cool stuff”—voice agents, automated support, and smarter applications.

But beware:

Before over-engineering with tools like LangChain and fancy agents, start simple. OpenAI API calls often get the job done. As you get closer to product market fit, start worrying about human evals, prompt tuning, and security concerns.

Pro move:

Start with human-in-the-loop. Fully automated AI features rarely work perfectly from Day 1.

Building Distributed Teams: How GenAI Changes Remote Collaboration

If your team is spread around the world—Eastern Europe, Latin America, Hong Kong—you know communication and documentation aren’t easy.

GenAI is a game-changer for:

Communication: Coaching team members to use GenAI for clear, culturally-appropriate communication.
Documentation: Auto-generating code and onboarding docs that are actually useful.

“With proper documentation and plan, new engineers can be effective in two weeks—if not one.”

Challenge your team:

No more 90-day onboarding. With GenAI-assisted docs, you can cut that down to 1-2 weeks.

Real-World Use Case: devIQ—Bridging Technical and Non-Technical Teams

Balki’s tool, devIQ (try it for free!), was born from a common startup pain: the disconnect between technical and non-technical staff.

How devIQ Helps

Assesses engineering teams: Across Balki’s five pillars
Translates complexity: Makes technical progress educational for CEOs and business leads
Gives grades and actionable steps:
- “Your grade is C in automated testing, B in GenAI fluency.”
Offers prescriptive paths: Specific ideas to improve grades

Use-case:

When Balki drops into an engagement, devIQ helps quickly pinpoint engineering gaps and opens authentic conversation between product and engineering.

“If you methodically invest in the right pillars, your org will be 95th percentile or better—no matter your product.”

Practical Tips for Staying Current in GenAI Engineering

Let’s face it—AI moves insanely fast. It’s easy to feel lost, overwhelmed, or permanently behind.

Balki’s Learning Strategy

Focus 80% on problems inside your organization. Go out and find solutions that fit your actual engineering needs (e.g., legacy code modernization, engineering excellence pillars).
Spend 20% dabbling in shiny new things. Keeps your creative juices flowing and occasionally unlocks breakthrough opportunities.

Discipline matters.

Without intentional focus, you’ll spend all your time chasing distractions.

“Will AI Replace Us?”: The Real Question to Ask Before Adding GenAI

This is the million-dollar question—and it’s not theoretical. Before shoving AI into your product, be honest:

“Is this something the customers want, and does it make their lives better by using GenAI inside the tool?”

Don’t waste time making your prompts perfect or optimizing the next toolchain before confirming user demand.

Pro advice:

Insert a human eval into early prototypes.
Gradually replace manual involvement as the product matures.
Automation isn’t instant—chip away bit by bit.

The Future: Next-Level Tools and “The Stone Age to Modern Age” Shift

AI moves at a ridiculous pace. Here’s what’s coming—and why you should care.

For New Engineers

Starting today is easier than ever—you’re entering the AI-native world. But those legacy problems will catch up eventually.

Building Team Resilience: Don’t Go It Alone

Here’s a simple tip: get out of your shell. Connect with peer groups, ask for feedback, and share what you’re planning.

“When I see a new tool, I don’t jump in right away. I bring it to my cohorts for feedback, and I shave off weeks and hundreds of hours of research.”

You get richer, higher quality feedback by collaborating—AI or not.

Summary: Key Takeaways for GenAI Engineers

Let’s wrap it all up.

GenAI has transformed engineering—rapid POCs, scalable products, and changed job roles.
“Engineering excellence” depends on five pillars, with GenAI fluency now essential.
Don’t specialize too narrowly—full-stack, founder mindset is becoming the norm.
Use AI for real productivity: code review, documentation, collaboration, and direct product features.
Start simple—and always validate with customer demands before ramping up automation.
Leverage frameworks like devIQ to bridge business/engineering gaps and accelerate progress.
Stay disciplined in your learning, and seek feedback from peers to keep your engineering sharp.