docs: track superpowers working documents in git

The uups-bank-demo wave's SDD records (ledger, six task briefs and reports,
review diffs) and the brainstorm design mockups were git-ignored, so they
existed only on one sandbox VM and reached no remote — this repo had no remote
at all until now.

Removes `.superpowers/` from .gitignore and the `*` .gitignore the superpowers
plugin writes inside .superpowers/sdd/; the second blocks the directory even
with the first removed.

Excluded as ephemeral local-server state, and now ignored by name:
.last-port, .last-token (a 64-char session token for a brainstorm server on a
port that is long gone), and the per-session state/ directories.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Fnwzj6McD6kSkXwjUKFKxe
This commit is contained in:
golem
2026-08-20 14:38:00 -06:00
co-authored by Claude Opus 5
parent 14980e6083
commit fa36215def
28 changed files with 9368 additions and 1 deletions
@@ -0,0 +1,97 @@
<div class="label">Design review · Section 1 of 4</div>
<h2>Terminal-orchestrated architecture</h2>
<p class="subtitle">All state-changing demo actions originate in auditable Foundry scripts. The operations console is a read-only window into the chain.</p>
<div class="mockup" style="margin-top:22px">
<div class="mockup-header">System boundaries and data flow</div>
<div class="mockup-body" style="padding:22px;background:#f6f8fb;color:#172033">
<div style="display:grid;grid-template-columns:1fr 42px 1.1fr 42px 1.35fr;align-items:center;gap:5px">
<div style="display:grid;gap:12px">
<div style="padding:16px;border:2px solid #59677e;border-radius:12px;background:white">
<div class="label">Codex + presenter</div>
<strong>Foundry terminal</strong>
<div style="font-size:12px;margin-top:8px;line-height:1.7;color:#596477">
DeployV1.s.sol<br>
SeedDemo.s.sol<br>
UpgradeV2.s.sol<br>
forge test / inspect
</div>
<div style="margin-top:9px;padding:7px 9px;background:#edf2f8;border-radius:7px;font-size:11px">Only state-changing control plane</div>
</div>
<div style="padding:16px;border:2px solid #5e806c;border-radius:12px;background:white">
<div class="label">Audience view</div>
<strong>React operations console</strong>
<div style="font-size:12px;margin-top:8px;line-height:1.7;color:#596477">
Balances + total liabilities<br>
USDC reserves + reserve ratio<br>
Proxy / implementation / version<br>
Event-driven activity timeline
</div>
<div style="margin-top:9px;padding:7px 9px;background:#ebf5ef;border-radius:7px;font-size:11px">Read-only via viem</div>
</div>
</div>
<div style="text-align:center;color:#65728a;font-size:25px">
<div title="JSON-RPC writes"></div>
<div style="height:118px"></div>
<div title="JSON-RPC reads"></div>
</div>
<div style="padding:18px;border:2px solid #7f6caf;border-radius:14px;background:#f0ecf9;text-align:center">
<div class="label">Same interface, selectable target</div>
<strong style="font-size:18px">Ethereum JSON-RPC</strong>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:16px">
<div style="padding:13px 8px;background:white;border-radius:9px;border:1px solid #cfc5e4">
<strong>Anvil</strong><br><small>Default live demo<br>fast + deterministic</small>
</div>
<div style="padding:13px 8px;background:white;border-radius:9px;border:1px solid #cfc5e4">
<strong>Base Sepolia</strong><br><small>Optional public proof<br>same scripts</small>
</div>
</div>
<div style="margin-top:13px;font-size:11px;color:#625879">Network config supplies RPC URL, chain ID, and deployed addresses.</div>
</div>
<div style="text-align:center;color:#65728a;font-size:25px"></div>
<div style="display:grid;gap:11px">
<div style="padding:15px;border:2px solid #23536a;border-radius:12px;background:white">
<div class="label">Stable public address</div>
<strong>ERC1967 Proxy</strong>
<div style="margin-top:8px;font-size:11px;color:#526170">Owns all bank storage: owner, asset, paused flag, balances, total liabilities.</div>
</div>
<div style="text-align:center;color:#23536a;font-size:18px">delegatecall ↓</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px">
<div style="padding:13px;border:2px solid #83909f;border-radius:10px;background:white">
<strong>Bank V1</strong><br><small>deposit<br>withdraw<br>pause</small>
</div>
<div style="padding:13px;border:2px solid #269064;border-radius:10px;background:#eaf7f0">
<strong>Bank V2</strong><br><small>V1 behavior<br>+ internal transfer</small>
</div>
</div>
<div style="padding:13px;border:2px solid #2772a5;border-radius:10px;background:#eaf4fb">
<strong>MockUSDC</strong><br><small>The proxy holds reserves; liabilities must never exceed its token balance.</small>
</div>
</div>
</div>
<div style="margin-top:20px;padding:13px 16px;background:#152239;color:white;border-radius:10px;display:flex;justify-content:space-between;gap:18px;font-size:12px">
<span><strong>V1 prepared:</strong> deploy, seed accounts, deposit, withdraw</span>
<span></span>
<span><strong>Codex live:</strong> implement + test V2</span>
<span></span>
<span><strong>Reveal:</strong> upgrade, transfer, prove preserved state</span>
</div>
</div>
</div>
<div class="options" style="margin-top:22px">
<div class="option" data-choice="architecture-approved" onclick="toggleSelect(this)">
<div class="letter"></div>
<div class="content"><h3>Architecture approved</h3><p>Continue to contract responsibilities and invariants.</p></div>
</div>
<div class="option" data-choice="architecture-changes" onclick="toggleSelect(this)">
<div class="letter"></div>
<div class="content"><h3>Needs changes</h3><p>Select this and describe the adjustment in the terminal.</p></div>
</div>
</div>
@@ -0,0 +1,98 @@
<h2>What should the demo dashboard emphasize?</h2>
<p class="subtitle">All three support connect wallet, mock-USDC deposits and withdrawals, and the V1 → V2 upgrade. Click the layout that tells the clearest story.</p>
<div class="cards" style="grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch">
<div class="card" data-choice="customer-first" onclick="toggleSelect(this)">
<div class="card-image" style="padding:14px;background:#f5f7fb;min-height:330px;color:#162033">
<div style="display:flex;justify-content:space-between;align-items:center;font-size:11px;margin-bottom:14px">
<strong>MY BANK</strong><span style="padding:5px 8px;border:1px solid #ccd4e0;border-radius:12px">0x71…9a2</span>
</div>
<div style="padding:18px;border-radius:12px;background:#17243c;color:white;margin-bottom:10px">
<div style="font-size:10px;opacity:.7">AVAILABLE BALANCE</div>
<div style="font-size:27px;font-weight:700;margin:6px 0">1,250.00 USDC</div>
<div style="font-size:10px;color:#9ee6bf">Backed 1:1 by contract reserves</div>
</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px">
<button class="mock-button" style="margin:0">Deposit</button>
<button class="mock-button" style="margin:0;background:#e7ecf4;color:#17243c">Withdraw</button>
</div>
<div style="background:white;border:1px solid #dde3ec;border-radius:10px;padding:12px">
<div style="display:flex;justify-content:space-between;font-size:11px;margin-bottom:10px"><strong>Recent activity</strong><span>View all</span></div>
<div style="display:flex;justify-content:space-between;font-size:10px;padding:7px 0;border-top:1px solid #edf0f5"><span>Deposit</span><strong style="color:#168451">+500 USDC</strong></div>
<div style="display:flex;justify-content:space-between;font-size:10px;padding:7px 0;border-top:1px solid #edf0f5"><span>Withdrawal</span><strong>50 USDC</strong></div>
</div>
<div style="font-size:9px;text-align:center;margin-top:11px;color:#687387">Bank V1 · Proxy 0x8B…42</div>
</div>
<div class="card-body">
<h3>A · Customer-first</h3>
<p>Feels like a consumer banking app. The upgrade story stays mostly behind the scenes.</p>
</div>
</div>
<div class="card" data-choice="operations-console" onclick="toggleSelect(this)">
<div class="card-image" style="padding:0;background:#101827;min-height:330px;color:#dfe8f5;display:grid;grid-template-columns:74px 1fr">
<div style="padding:14px 8px;background:#0b1220;font-size:9px">
<strong style="font-size:10px">BANK OPS</strong>
<div style="margin-top:22px;padding:6px;background:#24314a;border-radius:5px">Overview</div>
<div style="padding:7px 6px">Accounts</div>
<div style="padding:7px 6px">Reserves</div>
<div style="padding:7px 6px">Upgrades</div>
</div>
<div style="padding:14px">
<div style="display:flex;justify-content:space-between;font-size:11px;margin-bottom:14px"><strong>System overview</strong><span style="color:#83d9a8">● Healthy</span></div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:10px">
<div style="padding:10px;background:#19243a;border-radius:8px"><small>Total deposits</small><div style="font-size:16px;font-weight:700;margin-top:5px">25,000 USDC</div></div>
<div style="padding:10px;background:#19243a;border-radius:8px"><small>Reserve ratio</small><div style="font-size:16px;font-weight:700;margin-top:5px">100.0%</div></div>
<div style="padding:10px;background:#19243a;border-radius:8px"><small>Proxy version</small><div style="font-size:16px;font-weight:700;margin-top:5px">V1</div></div>
<div style="padding:10px;background:#19243a;border-radius:8px"><small>Status</small><div style="font-size:16px;font-weight:700;margin-top:5px">Active</div></div>
</div>
<div style="padding:11px;background:#19243a;border-radius:8px;font-size:9px;line-height:1.7">
<strong>Contract addresses</strong><br>
Proxy&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0x8B31…A942<br>
Implementation&nbsp;0x19F4…71C0<br>
Asset&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Mock USDC
</div>
<button class="mock-button" style="width:100%;margin-top:10px">Upgrade to V2</button>
</div>
</div>
<div class="card-body">
<h3>B · Operations console</h3>
<p>Highlights reserves, proxy state, and owner controls. Strong technically, less relatable to customers.</p>
</div>
</div>
<div class="card" data-choice="upgrade-studio" onclick="toggleSelect(this)">
<div class="card-image" style="padding:14px;background:#f7f4ed;min-height:330px;color:#202926">
<div style="display:flex;justify-content:space-between;align-items:center;font-size:11px;margin-bottom:12px">
<strong>UUPS BANK LAB</strong><span style="padding:5px 8px;background:#dff3e7;color:#16643c;border-radius:12px">● V1 live</span>
</div>
<div style="display:grid;grid-template-columns:1.15fr .85fr;gap:9px">
<div>
<div style="padding:14px;background:#173f36;color:white;border-radius:10px;margin-bottom:8px">
<small>ALICE'S BALANCE</small><div style="font-size:22px;font-weight:700;margin-top:6px">1,250 USDC</div>
</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px">
<button class="mock-button" style="margin:0">Deposit</button><button class="mock-button" style="margin:0;background:#e6e2d8;color:#26322e">Withdraw</button>
</div>
<div style="padding:10px;border:1px dashed #aab2aa;border-radius:8px;font-size:9px;color:#737c75">
Transfer to another customer<br><strong>Unlocks after V2 upgrade</strong>
</div>
</div>
<div style="padding:11px;background:white;border:1px solid #ddd8cc;border-radius:10px;font-size:9px">
<strong>Upgrade journey</strong>
<div style="margin-top:11px;padding-left:9px;border-left:2px solid #3d8967;line-height:1.5"><strong>1 · V1 deployed</strong><br><span style="color:#6a736e">Deposit + withdraw</span></div>
<div style="margin-top:11px;padding-left:9px;border-left:2px solid #cbd0ca;line-height:1.5"><strong>2 · Upgrade V2</strong><br><span style="color:#6a736e">Owner only</span></div>
<div style="margin-top:11px;padding-left:9px;border-left:2px solid #cbd0ca;line-height:1.5"><strong>3 · Transfer</strong><br><span style="color:#6a736e">Balances persist</span></div>
<button class="mock-button" style="width:100%;margin-top:14px;font-size:9px">Run upgrade</button>
</div>
</div>
<div style="display:flex;justify-content:space-between;margin-top:10px;padding:9px;background:#ece7dc;border-radius:8px;font-size:9px">
<span>Proxy stays <strong>0x8B…42</strong></span><span>Reserves <strong>100%</strong></span>
</div>
</div>
<div class="card-body">
<h3>C · Upgrade demo studio — recommended</h3>
<p>Pairs a usable customer account with a guided UUPS timeline, making state preservation obvious.</p>
</div>
</div>
</div>
@@ -0,0 +1,94 @@
<div class="label">Design review · Section 3 of 4</div>
<h2>The live demo as a three-act story</h2>
<p class="subtitle">The audience sees every command, every test, and every state transition. The operations console mirrors the chain without controlling it.</p>
<div style="display:grid;grid-template-columns:1fr 54px 1fr 54px 1fr;align-items:stretch;margin-top:22px">
<div style="padding:18px;border:2px solid #6c7a8f;border-radius:14px;background:#f8fafc">
<div class="label">Act 1 · Prepared V1</div>
<h3 style="margin-top:5px">Establish trust</h3>
<div style="padding:9px 11px;background:#18243a;color:#d9e5f4;border-radius:7px;font-family:monospace;font-size:11px">make demo-v1</div>
<ol style="font-size:12px;line-height:1.65;padding-left:18px">
<li>Deploy MockUSDC, BankV1, and proxy</li>
<li>Mint demo funds to Alice and Bob</li>
<li>Deposit 1,000 + 500 USDC</li>
<li>Alice withdraws 100 USDC</li>
</ol>
<div style="padding:10px;background:white;border:1px solid #d8dee8;border-radius:8px;font-size:11px">
<strong>Console proves</strong><br>
Proxy: <strong>0x8B…42</strong><br>
Version: <strong>V1</strong><br>
Reserves: <strong>1,400</strong><br>
Liabilities: <strong>1,400</strong>
</div>
</div>
<div style="display:flex;align-items:center;justify-content:center;font-size:28px;color:#68768d"></div>
<div style="padding:18px;border:2px solid #7a64b0;border-radius:14px;background:#f4f0fb">
<div class="label">Act 2 · Codex live</div>
<h3 style="margin-top:5px">Change the system safely</h3>
<div style="padding:10px;background:white;border:1px solid #d8cfee;border-radius:8px;font-size:12px;line-height:1.55">
Ask Codex to add customer-to-customer transfers while preserving all V1 state.
</div>
<ol style="font-size:12px;line-height:1.65;padding-left:18px">
<li>Implement BankV2</li>
<li>Add unit, fuzz, and invariant tests</li>
<li>Add upgrade and transfer scripts</li>
<li>Update ABI and console timeline</li>
<li>Explain the storage-safety choices</li>
</ol>
<div style="padding:9px 11px;background:#221b35;color:#e8e0fa;border-radius:7px;font-family:monospace;font-size:11px">forge test --force</div>
<div style="margin-top:7px;font-size:11px;color:#665d78">No upgrade runs until tests and layout validation pass.</div>
</div>
<div style="display:flex;align-items:center;justify-content:center;font-size:28px;color:#68768d"></div>
<div style="padding:18px;border:2px solid #27865f;border-radius:14px;background:#edf8f2">
<div class="label">Act 3 · V2 reveal</div>
<h3 style="margin-top:5px">Prove state survived</h3>
<div style="padding:9px 11px;background:#14382d;color:#ddf5e9;border-radius:7px;font-family:monospace;font-size:11px">make upgrade-v2<br>make demo-transfer</div>
<ol style="font-size:12px;line-height:1.65;padding-left:18px">
<li>Owner upgrades proxy to BankV2</li>
<li>Proxy address remains unchanged</li>
<li>Alice transfers 250 to Bob internally</li>
<li>No MockUSDC moves during transfer</li>
</ol>
<div style="padding:10px;background:white;border:1px solid #cde6d8;border-radius:8px;font-size:11px">
<strong>Console proves</strong><br>
Alice: 900 → <strong>650</strong><br>
Bob: 500 → <strong>750</strong><br>
Reserves = liabilities = <strong>1,400</strong><br>
Version: <strong>V2</strong>
</div>
</div>
</div>
<div style="margin-top:18px;padding:15px 18px;border:1px solid #d6dce6;border-radius:11px;background:white;display:grid;grid-template-columns:1fr 1fr;gap:22px;font-size:12px">
<div>
<strong>Failure behavior</strong>
<ul style="line-height:1.65;margin-bottom:0">
<li>Scripts stop on wrong owner, network, address, or failed postcondition.</li>
<li>The console shows disconnected/stale state instead of fake zero balances.</li>
<li>Contract reverts are decoded into named, teachable errors.</li>
</ul>
</div>
<div>
<strong>Optional public encore</strong>
<ul style="line-height:1.65;margin-bottom:0">
<li>Repeat the same scripts on Base Sepolia with an explicit network flag.</li>
<li>Load deployed addresses into the same console.</li>
<li>Show explorer links for the proxy, upgrade, and transfer events.</li>
</ul>
</div>
</div>
<div class="options" style="margin-top:22px">
<div class="option" data-choice="sequence-approved" onclick="toggleSelect(this)">
<div class="letter"></div>
<div class="content"><h3>Demo sequence approved</h3><p>Continue to testing, documentation, and presentation safeguards.</p></div>
</div>
<div class="option" data-choice="sequence-changes" onclick="toggleSelect(this)">
<div class="letter"></div>
<div class="content"><h3>Needs changes</h3><p>Select this and describe what should change in the terminal.</p></div>
</div>
</div>
@@ -0,0 +1,6 @@
<div style="display:flex;align-items:center;justify-content:center;min-height:60vh;text-align:center">
<div>
<h2>Architecture approved</h2>
<p class="subtitle">Continuing in the terminal with the contract model, safety rules, and teaching notes…</p>
</div>
</div>
@@ -0,0 +1,6 @@
<div style="display:flex;align-items:center;justify-content:center;min-height:60vh;text-align:center">
<div>
<h2>Operations console selected</h2>
<p class="subtitle">Continuing in the terminal to shape the live Codex demonstration…</p>
</div>
</div>
@@ -0,0 +1,6 @@
<div style="display:flex;align-items:center;justify-content:center;min-height:60vh;text-align:center">
<div>
<h2>Demo sequence approved</h2>
<p class="subtitle">Continuing in the terminal with the final design section: safe setup, testing, and learning materials…</p>
</div>
</div>