docs(examples): default Pages to the openhop showcase flow

README.md

@@ -164,29 +164,13 @@ Flags: `-p, --port <port>` (serve), `-s, --server <url>` (all others).
 
 ## How it works
 
-```mermaid
-flowchart LR
-    user([User])
-    cli[CLI<br/>zod validation]
-    api[Fastify API]
-    web[Web UI<br/>PIXI]
-    browser([Browser])
-
-    subgraph agentBlock [ ]
-        direction TB
-        agent[Agent]
-        skill([SKILL.md])
-    end
-
-    user -- prompt --> agent
-    skill -- teaches --> agent
-    agent -- YAML --> cli
-    cli -- JSON --> api
-    api --> web
-    browser --> web
-
-    style agentBlock fill:transparent,stroke:none
-```
+<p align="center">
+  <a href="https://naorsabag.github.io/openhop/">
+    <img src="assets/openhop-self-flow.png" width="720" alt="OpenHop rendering its own end-to-end flow — Human → AI Agent → SKILL.md / openhop CLI → openhop server → Flow Store, plus Browser. Click to view live." />
+  </a>
+</p>
+
+<p align="center"><a href="https://naorsabag.github.io/openhop/"><b>▶ View this flow live on the Pages playground</b></a></p>
 
 The CLI validates YAML against a zod schema (with fuzzy typo hints), posts the flow to the API,
 and prints a URL. The web UI subscribes and animates data pixels along the edges.

examples/showcase/openhop.yaml

@@ -1,5 +1,5 @@
 meta:
-  title: OpenHop, visualized in OpenHop
+  title: openhop
   path: showcase/openhop
   description: How an AI agent turns "explain how X works" into an animated flow you can share — the self-referential hero demo.
 

packages/server/src/seed-examples.test.ts

@@ -14,14 +14,14 @@ describe('seedBundledExamples', () => {
 
     // Every YAML in examples/ + examples/showcase/ should land as a new flow.
     // We don't pin an exact count (it'll change as examples are added) — just
-    // assert "more than the previous one-shot seed" and that known anchors
-    // (order-flow, langgraph, ai-browsing-agent) are present.
+    // assert "more than the previous one-shot seed" and that a couple of
+    // stable anchors (top-level example, showcase entry) are present.
     expect(result.created.length).toBeGreaterThan(5)
     expect(result.updated.length).toBe(0)
     expect(result.failed.length).toBe(0)
     expect(result.created).toContain('example-order-flow')
     expect(result.created).toContain('example-langgraph')
-    expect(result.created).toContain('example-ai-browsing-agent')
+    expect(result.created).toContain('example-openhop')
   })
 
   it('updates an existing example in place on the second run', async () => {

packages/web/src/lib/example-flows.ts

@@ -14,7 +14,6 @@ import nodeIcons from '../../../../examples/node-icons.yaml?raw'
 import parallel from '../../../../examples/parallel.yaml?raw'
 import subFlows from '../../../../examples/sub-flows.yaml?raw'
 import createDestroy from '../../../../examples/create-destroy.yaml?raw'
-import aiBrowsingAgent from '../../../../examples/ai-browsing-agent.yaml?raw'
 
 import showcaseOpenhop from '../../../../examples/showcase/openhop.yaml?raw'
 import showcaseLanggraph from '../../../../examples/showcase/langgraph.yaml?raw'
@@ -37,6 +36,16 @@ const EXAMPLES = 'examples'
 const SHOWCASE = 'examples/showcase'
 
 export const EXAMPLE_FLOWS: ExampleFlow[] = [
+  // First entry doubles as the Pages site's default landing flow
+  // (AppFragment auto-routes to EXAMPLE_FLOWS[0] when the URL has no hash).
+  {
+    id: 'showcase-openhop',
+    title: 'openhop',
+    description: 'The self-referential hero — agent prompt → SKILL.md → CLI → playground URL.',
+    path: SHOWCASE,
+    yaml: showcaseOpenhop,
+  },
+
   {
     id: 'node-icons',
     title: 'Node Icons',
@@ -65,22 +74,8 @@ export const EXAMPLE_FLOWS: ExampleFlow[] = [
     path: EXAMPLES,
     yaml: createDestroy,
   },
-  {
-    id: 'ai-browsing-agent',
-    title: 'AI Browsing Agent',
-    description: 'User → ai_agent ↔ LLM, agent ↔ browser ↔ website. Showcases the new sprites.',
-    path: EXAMPLES,
-    yaml: aiBrowsingAgent,
-  },
 
   // ── Showcase: hand-authored flows visualizing real code paths in OSS projects.
-  {
-    id: 'showcase-openhop',
-    title: 'OpenHop, visualized in OpenHop',
-    description: 'The self-referential hero — agent prompt → SKILL.md → CLI → playground URL.',
-    path: SHOWCASE,
-    yaml: showcaseOpenhop,
-  },
   {
     id: 'showcase-langgraph',
     title: 'LangGraph ReAct',