Swap "How it works" diagram to theme-aware illustrated renders

src/components/react/ThemeImage.tsx

@@ -0,0 +1,58 @@
+import type { CSSProperties } from 'react';
+
+interface ThemeImageProps {
+  /** Image shown in light mode. */
+  light: string;
+  /** Image shown in dark mode. */
+  dark: string;
+  alt: string;
+  width?: number | string;
+  height?: number | string;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * Renders a light and dark version of an image and swaps between them based on
+ * the active `data-theme`. The swap is pure CSS (see custom.css), so there's no
+ * hydration flash — both `<img>`s are in the DOM and only one is displayed.
+ *
+ * The images carry their own alpha channel (the flat canvas is keyed out to
+ * transparency), so the artwork floats on any surface — page body, nav, a
+ * callout, the dark-mode ambient texture. That's why this uses transparency
+ * rather than `mix-blend-mode`: a blend only melts into a flat backdrop in the
+ * same stacking context and leaves a seam anywhere the surface isn't that exact
+ * color.
+ */
+export function ThemeImage({
+  light,
+  dark,
+  alt,
+  width,
+  height,
+  className,
+  style,
+}: ThemeImageProps) {
+  return (
+    <span
+      className={`theme-image-frame${className ? ` ${className}` : ''}`}
+      style={style}
+    >
+      <img
+        src={light}
+        alt={alt}
+        width={width}
+        height={height}
+        className="theme-image theme-image--light"
+      />
+      <img
+        src={dark}
+        alt={alt}
+        width={width}
+        height={height}
+        aria-hidden="true"
+        className="theme-image theme-image--dark"
+      />
+    </span>
+  );
+}

src/components/react/index.ts

@@ -36,4 +36,5 @@ export { SearchDialog } from './SearchDialog';
 export { SearchDialogWrapper } from './SearchDialogWrapper';
 export { StatusBadge, StatusCodes } from './StatusCodes';
 export { StatusIcon } from './StatusIcon';
+export { ThemeImage } from './ThemeImage';
 export { ThemeSwitcher } from './ThemeSwitcher';

src/content/docs/integrations/claude-managed-agents.mdx

@@ -3,8 +3,7 @@
 description: Run Anthropic Claude Managed Agents with tool execution inside your own Sprites
 ---
 
-import { Callout } from '@/components/react';
-import SelfHostedDiagram from '@/components/SelfHostedDiagram.astro';
+import { Callout, ThemeImage } from '@/components/react';
 import { Tabs, TabItem } from '@astrojs/starlight/components';
 
 <img
@@ -19,9 +18,16 @@
 
 ## How it works
 
 A self-hosted environment is a work queue. When a session is assigned to it, Anthropic enqueues a work item. A worker you run claims the item and starts a per-session Sprite that runs Anthropic's tool runner. Tool inputs and outputs flow back to Anthropic so the model can see results; everything the tools touch stays in the Sprite.
 
-<SelfHostedDiagram />
+<ThemeImage
+  light="/images/integrations/claude-managed-agents-light.webp"
+  dark="/images/integrations/claude-managed-agents-dark.webp"
+  alt="Lifecycle loop: the Claude Platform enqueues a work item; a worker you run claims it and launches a per-session Sprite, and tool calls round-trip between the Platform and the Sprite where everything the tools touch stays"
+  width={1672}
+  height={941}
+  style={{ maxWidth: '42rem', marginInline: 'auto', marginBlock: '2rem' }}
+/>
 
 The runner authenticates with an **environment key**, the only credential it needs for both the control plane and the per-session calls. Your organization API key never reaches the Sprite.
 
@@ -68,7 +74,7 @@
 
 ### Spawn a Sprite per session
 
 The worker creates a Sprite, uploads Anthropic's provider-agnostic runner, installs the SDK, and launches it as a Sprite [service](/concepts/services) rather than a detached `nohup` process. A service is supervised: the Sprite owns it, so it survives beyond the request that created it and is restored on wake, neither of which a process backgrounded inside a single request can be counted on to do. Because a service that exits is otherwise restarted, the one-shot worker stops itself on completion so it is not brought back up.
 
 The `ANTHROPIC_*` variables are written to a file the service sources rather than passed as service arguments, so the environment key never appears in process listings. The service deletes the file right after sourcing it, so the key isn't left on the Sprite's disk.
 
@@ -90,7 +96,7 @@
 # Anthropic's provider-agnostic runner. One call is the whole worker: it builds
 # the per-session tool context, downloads skills, runs the tool loop, and posts
 # results back. See the cookbook for the full file.
 RUNNER_SRC = '''import asyncio, logging, os, sys
 from anthropic import AsyncAnthropic
 
 # The worker reports its lifecycle only through stdlib logging; send it to
@@ -98,9 +104,9 @@
 # (/.sprite/logs/services/agent-runner.log).
 logging.basicConfig(level=logging.INFO, stream=sys.stdout)
 
 async def main():
     key = os.environ["ANTHROPIC_ENVIRONMENT_KEY"]
     async with AsyncAnthropic(auth_token=key) as client:
         # handle_item() services the single already-claimed item, reading
         # ANTHROPIC_WORK_ID / ANTHROPIC_SESSION_ID / ANTHROPIC_ENVIRONMENT_ID /
         # ANTHROPIC_ENVIRONMENT_KEY from the env (written to runner.env below).

src/styles/custom.css

@@ -2135,3 +2135,26 @@ h2.method-title {
   --co-decoration-hover: #1e3a8a99;
   --co-link-hover: #172554;
 }
+
+/* Theme-aware image swap (ThemeImage component)
+   Both variants render into the DOM; CSS shows the one matching the active
+   theme. The images have transparent (keyed) backgrounds, so the artwork floats
+   on any surface with no blend mode or matching backdrop needed. */
+.theme-image-frame {
+  display: block;
+  line-height: 0;
+}
+.theme-image {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+.theme-image--dark {
+  display: none;
+}
+[data-theme='dark'] .theme-image--light {
+  display: none;
+}
+[data-theme='dark'] .theme-image--dark {
+  display: block;
+}