Files
pig/docs/screenshots.md
karti 10d79fc35d Shoot the README screenshots, and make them regenerable
The screenshot section had been a placeholder since the shell was rebuilt as
three panes, because there was no cheap way to re-shoot and a stale image is
worse than no image. So this ships the capture, not just the captures:
scripts/screenshots.mjs takes all ten pages at 1440x900 and 393x852, in light
and dark, and screenshots-encode.py halves and re-encodes them to WebP — 16MB
of PNG becomes 1.9MB in the tree.

Two things would silently ruin a run, and the script exists to encode both.
Seeding localStorage['pig.themeMode'] is not enough: the appearance preference
is authoritative server-side and adopted after hydration, so every dark capture
snapped back to light a beat after first paint. The /api/me/profile response is
rewritten instead. And pig.sidebarOpen / pig.piggyDockOpen are per-device, so
whatever the last human left behind would otherwise leak in. The run also fails
on a wrong theme, a horizontal scrollbar or a console error — three things a
screenshot cannot show you.

Piggy is not pictured mid-conversation. It is off by default and no inference
credential exists, so such an image would be a staged transcript rather than a
capture. The README says that rather than implying the feature is missing.

Correcting what the README asserted while shooting against the running code:
read authorisation IS enforced — createReadGuardRoutes is mounted ahead of the
feature routes, and routes/learn.ts and routes/activities.ts are mounted too,
so only the HubSpot pair is still unreachable. The remaining read gap is that a
grant cannot be narrowed, there being no row-level team filter in the query
layer. Counts refreshed against the tree: 275 tests, ~47k lines, 14 migrations.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-08-13 21:15:45 -07:00

7.5 KiB
Raw Permalink Blame History

Screenshots

Every page of PIG, at 1440px and at 393px, in light and in dark.

Captured from a local instance running the seed plus demo book — pnpm run db:seed then pnpm run db:demo. Records prefixed DEMO — are fictional and exist to make the arithmetic legible; everything else is the sourced, cited seed described in seed-data.md. Every figure shown is computed by the code in this repository, not drawn.

Piggy is absent deliberately. It is off by default (PIGGY_ENABLED=false, and the Compose service sits behind a profile), and it needs an inference credential to answer at all — so any screenshot of it mid-conversation would be a staged transcript rather than a capture.

Desktop captures are the 1440×900 viewport, not the full scroll height: what you see is what fits above the fold.

Regenerating. Start the API and the web dev server against a seeded database, then run the capture:

pnpm run dev:api
pnpm run dev:web
node scripts/screenshots.mjs

It forces the theme, the sidebar and the dock so nothing a previous session left in localStorage leaks into a capture, fails the run if any page reports a horizontal scrollbar, a console error or the wrong theme, and re-encodes everything to WebP. Do not hand-edit these files — re-shoot them.

Back to the README.

Jump to: Overview · Margin · Capacity · Availability · Capacity · Match a requirement · Growth · Calendar · Demand pipeline · Supply pipeline · Accounts · Contracts

Overview

/ — margin, sold ratio, idle capacity and the ranked idle-cost exposure across the whole book.

Desktop · 1440px · light

Overview, desktop, light

Desktop · 1440px · dark

Overview, desktop, dark

Mobile · 393px

Light Dark
Overview, 393px, light Overview, 393px, dark

Margin

/margin — revenue against the full cost of every commitment, with break-even price per GPU-hour.

Desktop · 1440px · light

Margin, desktop, light

Desktop · 1440px · dark

Margin, desktop, dark

Mobile · 393px

Light Dark
Margin, 393px, light Margin, 393px, dark

Capacity · Availability

/capacity — what is held, what is sold, what is still sellable, and what is merely reserved by a live hold.

Desktop · 1440px · light

Capacity · Availability, desktop, light

Desktop · 1440px · dark

Capacity · Availability, desktop, dark

Mobile · 393px

Light Dark
Capacity · Availability, 393px, light Capacity · Availability, 393px, dark

Capacity · Match a requirement

/capacity — score a customer requirement against capacity already under commitment, then allocate against it.

Desktop · 1440px · light

Capacity · Match a requirement, desktop, light

Desktop · 1440px · dark

Capacity · Match a requirement, desktop, dark

Mobile · 393px

Light Dark
Capacity · Match a requirement, 393px, light Capacity · Match a requirement, 393px, dark

Growth

/growth — deterministic attention scores over paper, activity and sold or reserved capacity, with every signal explained.

Desktop · 1440px · light

Growth, desktop, light

Desktop · 1440px · dark

Growth, desktop, dark

Mobile · 393px

Light Dark
Growth, 393px, light Growth, 393px, dark

Calendar

/calendar — closes, renewals, obligations and expiring export authorisations on one quarter timeline.

Desktop · 1440px · light

Calendar, desktop, light

Desktop · 1440px · dark

Calendar, desktop, dark

Mobile · 393px

Light Dark
Calendar, 393px, light Calendar, 393px, dark

Demand pipeline

/demand — the sell side. Legal sits second, because MSA and DPA execution gates delivery rather than closing the deal.

Desktop · 1440px · light

Demand pipeline, desktop, light

Desktop · 1440px · dark

Demand pipeline, desktop, dark

Mobile · 393px

Light Dark
Demand pipeline, 393px, light Demand pipeline, 393px, dark

Supply pipeline

/supply — the buy side, from sourced through diligence and pricing to live and renewal.

Desktop · 1440px · light

Supply pipeline, desktop, light

Desktop · 1440px · dark

Supply pipeline, desktop, dark

Mobile · 393px

Light Dark
Supply pipeline, 393px, light Supply pipeline, 393px, dark

Accounts

/accounts — both sides of the market in one book, each record carrying its confidence grade and source.

Desktop · 1440px · light

Accounts, desktop, light

Desktop · 1440px · dark

Accounts, desktop, dark

Mobile · 393px

Light Dark
Accounts, 393px, light Accounts, 393px, dark

Contracts

/contracts — MSA, DPA, SLA, order form and capacity commitment, polymorphic over party and type.

Desktop · 1440px · light

Contracts, desktop, light

Desktop · 1440px · dark

Contracts, desktop, dark

Mobile · 393px

Light Dark
Contracts, 393px, light Contracts, 393px, dark