Skip to content

PikoClaw Web UI Demo Script — Panathenea 2026, Athens

Last updated: 2026-05-19 for v0.6.0 Target audience: Conference attendees (non-technical focus) Duration: 2–3 minutes (was 60s — expanded to cover full upload→explore→search→export flow) Frontend: https://dev.pappas.work (Next.js on Cloudflare Pages) API: https://api.pappas.work (Cloudflare Worker)

Pre-demo health check

This script assumes a healthy backend. Two endpoints are known-broken in production as of 2026-05-19:

  • /topics is 500ing (issue #347 — D1 is missing the message_topics table). Backs the Topics view on /explore.
  • /graph is 500ing (issue #348 — D1 CPU-time limit exceeded; fix is to pre-compute via pikoclaw graph-compute and cache). Backs the knowledge-graph visualization on /explore.

Both must be green before T-0 (Panathenea opening, May 27). Run this curl sequence the morning of the demo:

curl -fsS https://api.pappas.work/health     # expect 200 {"status":"ok"}
curl -fsS https://api.pappas.work/uploads    # expect 200, JSON array
curl -fsS https://api.pappas.work/contacts   # expect 200, JSON array
curl -fsS https://api.pappas.work/topics     # MUST be 200 — currently 500, see #347
curl -fsS https://api.pappas.work/graph      # MUST be 200 — currently 500, see #348
curl -fsS "https://api.pappas.work/search?q=budget"  # expect 200, results array

If /topics or /graph is still red on the day, fall back to the CLI demo (docs/demo-script.md) instead — do not click into a known-broken page in front of an audience.

What's new in v0.6.0 — surfaces in this script

  • /agent-stream SSE scaffold (api/src/agent-stream.ts) — /agents page subscribes live. Demo shows extraction phases streaming in real time.
  • Presidio PII redaction (#241) — uploads honor a server-side redaction policy. Worth a one-line callout when showing extracted contacts.
  • graph-compute precompute path (#285) — once #348 lands, the /graph payload is served from a precomputed cache, so the visualization renders fast. Talking point if asked "how does this scale?"
  • Provenance + manifest artifacts (#260) — /uploads/:id exposes the provenance.json summary (SHA-256, tool version, warnings). Shown on the upload details view.

Demo flow

The flow is upload → extract → contacts → topics → graph → search → export, mapped to the corresponding dev.pappas.work pages. Each scene has a single screen, a single talking point, and a single click to advance.

Page Component file Purpose in demo
/ (home) web/src/app/page.tsx Set context: what is PikoClaw
/upload web/src/app/upload/page.tsx Drop a file, get a real upload
/agents web/src/app/agents/page.tsx Watch extraction stream live via SSE
/explore (contacts) web/src/app/explore/page.tsx (contacts tab) Show extracted contacts
/explore (topics) web/src/app/explore/page.tsx (topics tab) Show extracted topics (requires #347 fixed)
/explore (graph) web/src/app/explore/page.tsx (graph tab) Interactive knowledge graph (requires #348)
/search web/src/app/search/page.tsx Natural-language full-text search
Export (download link) /uploads/:id API + download Export JSON/CSV/Obsidian wiki

Script

Time Page / Action Voiceover Presenter notes
0:00–0:15 Open dev.pappas.work. Pause on the hero. "Good morning, Athens. PikoClaw turns email archives — PST, MBOX, EML, Maildir — into navigable knowledge. Today I'm going to take a real archive, upload it, and pull out everything that matters in under three minutes." Browser pre-warmed to /. Check the hero loaded and the nav shows the active-page indicator (components/NavLinks.tsx).
0:15–0:35 Click Upload. Drag a sample .mbox (or .pst) into the dropzone on /upload. "One drag. The file goes to Cloudflare R2 — encrypted at rest, never leaves the edge. The Worker registers the upload in D1 and kicks off the extraction pipeline." The dropzone is on web/src/app/upload/page.tsx, wired to POST /upload. Use a pre-staged ~5MB MBOX so the upload completes in <3 seconds. Note the returned upload_id.
0:35–0:55 Click Agents. The /agents page subscribes to /agent-stream over SSE. "Behind the scenes, our extraction agent is working through phases — parsing, threading, contact resolution, redaction. The stream is live; we're not pre-canning this." The SSE scaffold lives in api/src/agent-stream.ts (CLAUDE.md notes: "product behavior may still evolve"). Wait until at least 2 phases stream in before clicking away.
0:55–1:15 Click Explore → Contacts tab. "Within seconds we've got a contact graph. Every sender, every recipient, ranked by message volume. Notice that personal emails have been Presidio-redacted from the previews — that's GDPR-grade PII scrubbing, on by default." Backed by GET /contacts (top 100). Hover one row to show the count. Mention Presidio (#241) only briefly — it's a credibility signal, not the demo's main beat.
1:15–1:30 Click the Topics tab on the same /explore page. "Topics are extracted automatically — projects, themes, recurring threads. Click any topic to filter messages by it." Requires #347 fixed. If /topics still 500s on the day, skip this scene and go directly to Graph; pivot the voiceover to "and we surface the network behind it all".
1:30–1:55 Click the Graph tab on /explore. Let the D3 force-directed view settle, then drag a node. "Here's the network — who talks to whom, weighted by message count. Colors are community clusters; node size is volume. This is rendered in the browser from a precomputed graph payload, so it loads instantly even on very large archives." Requires #348 fixed. The fix path is pikoclaw graph-compute (#285, ICD §8.3) precomputing and caching the payload — so the /graph Worker query stays under D1's budget.
1:55–2:15 Click Search. Type "budget Q3 2017" and hit enter. "Natural-language search across every message body, with TF-IDF relevance scoring. Filters by sender, date range, and topic come right out of the same extraction." Backed by GET /search?q=... (TF-IDF in the Worker, see api/src/index.ts). Use a query you've validated against the sample archive so you know there are non-zero results.
2:15–2:35 Click Upload Details for the current upload (link from /upload or /explore). Show the provenance summary. "Every extraction has provenance. The source file's SHA-256, the PikoClaw version that processed it, every warning that was raised. Forensics-ready audit trail, automatic." Backed by GET /uploads/:id which surfaces summary counts and (per #260) the provenance snapshot. SHA-256 visible on screen is the talking point.
2:35–2:55 Click an Export action — JSON, CSV, or Obsidian wiki. Download begins. "And it's yours. Export to JSON for your pipeline, CSV for the analyst, or an Obsidian wiki for the team. Your data, your formats, no lock-in." Export endpoints are served via the upload artifact links. If the artifact links aren't wired into the UI yet, download via curl https://api.pappas.work/uploads/<id>/....
2:55–3:00 Return to / hero. Show the GitHub repo + pip install pikoclaw line. "PikoClaw. v0.6.0, MIT-licensed, on GitHub now. [DEMO END]" Final beat. If running long, drop the export scene and end on search.

Fallback plan

If the network is flaky or /topics//graph go red mid-demo:

  1. Drop to the local CLI demo — docs/demo-script.md runs entirely offline against a pre-staged Maildir. You lose the upload-flow narrative but keep the extraction story intact.
  2. Skip the broken page. If only one tab on /explore is down, narrate around it ("our topic view is queued up next quarter") and go straight to the working tab. Do not click into a known-500 endpoint live.
  3. Pre-record the upload scene. A 5-second screen capture of a successful upload is a cheap insurance policy.

Pre-flight checklist (morning of)

  • [ ] dev.pappas.work loads, nav shows active indicator
  • [ ] pikoclaw doctor (local) shows version 0.6.0 — sanity check on the source-of-truth CLI
  • [ ] All six API endpoints in the health-check block above return 200
  • [ ] Sample archive uploaded once already, so a backup upload_id exists
  • [ ] Browser cache cleared for dev.pappas.work (avoid showing stale data)
  • [ ] Network: tested on conference WiFi and with phone hotspot as backup
  • [ ] Recording / screen-share set to 1920×1080
  • [ ] Slide-deck fallback (see docs/demo-script.md) loaded on a second monitor

Prepared for Panathenea 2026, Athens (May 27–29).