# 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](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](../README.md).

**Jump to:** [Overview](#overview) · [Margin](#margin) · [Capacity · Availability](#capacity--availability) · [Capacity · Match a requirement](#capacity--match-a-requirement) · [Growth](#growth) · [Calendar](#calendar) · [Demand pipeline](#demand-pipeline) · [Supply pipeline](#supply-pipeline) · [Accounts](#accounts) · [Contracts](#contracts)


## Overview

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

**Desktop · 1440px · light**

<img src="screenshots/overview-desktop-light.webp" alt="Overview, desktop, light">

**Desktop · 1440px · dark**

<img src="screenshots/overview-desktop-dark.webp" alt="Overview, desktop, dark">

**Mobile · 393px**

| Light | Dark |
| --- | --- |
| <img src="screenshots/overview-mobile-light.webp" alt="Overview, 393px, light"> | <img src="screenshots/overview-mobile-dark.webp" alt="Overview, 393px, dark"> |


## Margin

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

**Desktop · 1440px · light**

<img src="screenshots/margin-desktop-light.webp" alt="Margin, desktop, light">

**Desktop · 1440px · dark**

<img src="screenshots/margin-desktop-dark.webp" alt="Margin, desktop, dark">

**Mobile · 393px**

| Light | Dark |
| --- | --- |
| <img src="screenshots/margin-mobile-light.webp" alt="Margin, 393px, light"> | <img src="screenshots/margin-mobile-dark.webp" alt="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**

<img src="screenshots/capacity-desktop-light.webp" alt="Capacity · Availability, desktop, light">

**Desktop · 1440px · dark**

<img src="screenshots/capacity-desktop-dark.webp" alt="Capacity · Availability, desktop, dark">

**Mobile · 393px**

| Light | Dark |
| --- | --- |
| <img src="screenshots/capacity-mobile-light.webp" alt="Capacity · Availability, 393px, light"> | <img src="screenshots/capacity-mobile-dark.webp" alt="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**

<img src="screenshots/capacity-match-desktop-light.webp" alt="Capacity · Match a requirement, desktop, light">

**Desktop · 1440px · dark**

<img src="screenshots/capacity-match-desktop-dark.webp" alt="Capacity · Match a requirement, desktop, dark">

**Mobile · 393px**

| Light | Dark |
| --- | --- |
| <img src="screenshots/capacity-match-mobile-light.webp" alt="Capacity · Match a requirement, 393px, light"> | <img src="screenshots/capacity-match-mobile-dark.webp" alt="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**

<img src="screenshots/growth-desktop-light.webp" alt="Growth, desktop, light">

**Desktop · 1440px · dark**

<img src="screenshots/growth-desktop-dark.webp" alt="Growth, desktop, dark">

**Mobile · 393px**

| Light | Dark |
| --- | --- |
| <img src="screenshots/growth-mobile-light.webp" alt="Growth, 393px, light"> | <img src="screenshots/growth-mobile-dark.webp" alt="Growth, 393px, dark"> |


## Calendar

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

**Desktop · 1440px · light**

<img src="screenshots/calendar-desktop-light.webp" alt="Calendar, desktop, light">

**Desktop · 1440px · dark**

<img src="screenshots/calendar-desktop-dark.webp" alt="Calendar, desktop, dark">

**Mobile · 393px**

| Light | Dark |
| --- | --- |
| <img src="screenshots/calendar-mobile-light.webp" alt="Calendar, 393px, light"> | <img src="screenshots/calendar-mobile-dark.webp" alt="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**

<img src="screenshots/demand-desktop-light.webp" alt="Demand pipeline, desktop, light">

**Desktop · 1440px · dark**

<img src="screenshots/demand-desktop-dark.webp" alt="Demand pipeline, desktop, dark">

**Mobile · 393px**

| Light | Dark |
| --- | --- |
| <img src="screenshots/demand-mobile-light.webp" alt="Demand pipeline, 393px, light"> | <img src="screenshots/demand-mobile-dark.webp" alt="Demand pipeline, 393px, dark"> |


## Supply pipeline

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

**Desktop · 1440px · light**

<img src="screenshots/supply-desktop-light.webp" alt="Supply pipeline, desktop, light">

**Desktop · 1440px · dark**

<img src="screenshots/supply-desktop-dark.webp" alt="Supply pipeline, desktop, dark">

**Mobile · 393px**

| Light | Dark |
| --- | --- |
| <img src="screenshots/supply-mobile-light.webp" alt="Supply pipeline, 393px, light"> | <img src="screenshots/supply-mobile-dark.webp" alt="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**

<img src="screenshots/accounts-desktop-light.webp" alt="Accounts, desktop, light">

**Desktop · 1440px · dark**

<img src="screenshots/accounts-desktop-dark.webp" alt="Accounts, desktop, dark">

**Mobile · 393px**

| Light | Dark |
| --- | --- |
| <img src="screenshots/accounts-mobile-light.webp" alt="Accounts, 393px, light"> | <img src="screenshots/accounts-mobile-dark.webp" alt="Accounts, 393px, dark"> |


## Contracts

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

**Desktop · 1440px · light**

<img src="screenshots/contracts-desktop-light.webp" alt="Contracts, desktop, light">

**Desktop · 1440px · dark**

<img src="screenshots/contracts-desktop-dark.webp" alt="Contracts, desktop, dark">

**Mobile · 393px**

| Light | Dark |
| --- | --- |
| <img src="screenshots/contracts-mobile-light.webp" alt="Contracts, 393px, light"> | <img src="screenshots/contracts-mobile-dark.webp" alt="Contracts, 393px, dark"> |