# Gyro layout imagegen triage — 2026-09-12

Built-in imagegen, two separate edit calls, followed by a user-authorized Gyro layout implementation. L beta was separately retired; see `BETA-RETIREMENT-20260912.md`. Initial / imagegen / final captures are visible at `gyro/designs.html`.

## Implemented and verified — 2026-09-12

- Gyro-only `layout.css?v=3` and semantic HTML reordering. No app.js, base CSS,
  transaction/return arithmetic, config or Eiko/Meryl changes. Forks can replace
  this skin without engine changes.
- Personal position, wallet returns and existing Deposit/Withdraw controls lead.
  Vault-wide totals and strike stats are in closed “Vault stats”; Poke remains
  there. LP and fee-history disclosures start closed. Epoch results remain open.
- Large action buttons (54px); selectable chain/asset/strike controls at least
  44px in the 320px check. Secondary text is brighter. Settlement explanation
  is under “At roll”, keeping the accumulation state and record visible.
- Referral tools remain accessible below both tabs. Share-card modal, entry
  fieldsets, hidden states, all 213 pre-existing IDs and handlers are retained.
- `test-user-layout`, `test-dual-deposit-ui`, `test-write-context`,
  `test-buyer-quote-ui` and `test-switch-totals` pass. Config boot/Aave tests pass
  364 assertions. `git diff --check` passes.
- Live checks at 320, 390, 768, 1024 and 1440px: no horizontal page overflow.
  Checked Ethereum WBTC/NUTS, Base EURC (Aave visible), HyperEVM HYPE, Markets,
  deposit open/disabled confirmation, disclosures and the native share dialog.
- The approved public wallet was loaded read-only on WBTC 65k: actual one-share
  holdings and return panel render; Withdraw opens; modal stays centred. No
  signer, transaction, signing request or public share-link creation was used.
- Fresh Astra reviewed DOM/control preservation and found one disclosure-grid
  title mismatch, corrected before final captures. Final review found no
  remaining blocker.
- Comparison captures are unconnected WBTC 65k: desktop 1440×1100, mobile
  390×1500. Final numbers are unmodified live reads at capture time, not promised
  to match the older screenshots. At 390px the primary action ends at y=737px.

Final assets: `img/designs/desktop-final.png`, `img/designs/mobile-final.png`.
The minimum-deposit fix remains separately queued, not bundled into this layout.

## Findings

### User direction after review — takes precedence over the initial triage

The mobile proposal's large interactive buttons and improved density are the
desired direction. Do not reject that direction because the generated canvas
is not a literal phone screenshot. Validate the implementation at real widths.

The key change, also learned from the Eiko redesign, is content priority:
selection → the user's position and returns → Deposit/Withdraw → supporting
vault information. The current hero liquidity/fees/volume numbers matter less
to the user: move them below the personal card, or into a compact closed
“Vault stats” disclosure. Never substitute these for the user's own results.
When disconnected, show Connect Wallet and useful deposit context instead of
invented holdings or empty personal metrics. Keep large tap targets while
reducing non-interactive padding and lower-priority content. Poke and referral
tools remain secondary and reachable. Preserve independent fork styling and
the shared engine's IDs, quote gates and state.

Implemented slice: user-first order and large primary actions, with contrast
and alignment within that hierarchy. The minimum-deposit fix remains the
separate queued functional slice.

### Initial image assessment (superseded where the user direction differs)

Desktop: preserve existing navy/teal identity and the familiar centered workflow. Adopt better secondary-text contrast and deliberate strike spacing, adapt content width modestly. Reject extra glow and generic information icons without a defined accessible explanation. The proposal keeps Poke too prominent and does not materially improve position visibility, so it is not a literal implementation target.

Mobile: source at390px spends over a screen on header/navigation, three full-height global metrics and strike context before actions. Proposal suggests compact metrics, regular strikes and bringing actions upward; these are useful relationships. But its actual canvas/content is wider-looking than a true390px phone, and its three-column metrics, wide Connect Wallet button and equal Poke row would become crowded/small when scaled. Use compact rows or a tested2+1 arrangement, not screenshot tracing. It adds a redundant How it works section after retaining the full accumulation explanation; use one deliberate disclosure, not both. All-strikes/estimated-volume and conditional-settlement meanings must survive any copy shortening. Do not confuse the global fees banner with per-wallet earnings or the selected strike's results.

## Practical sequence

1. Small presentation-only slice: contrast tokens, opt-in `.strike-picker-separated`, tighter desktop spacing/modest max-width. That selector already exists in the shared base from Eiko alpha, but is not enabled in Gyro app.
2. Separate mobile slice: compact vault-wide metric group; move existing Deposit/Withdraw controls nearer selection/position; make Poke/referrals secondary but accessible. Preserve all IDs, entry fieldsets, disabled states, quote freshness, hidden OFF strikes and URL selection. Do not duplicate controls.
3. Test320/390/768/1024/1440, all chains and long token labels/prices, loading/errors, wallet connected/disconnected, Markets tabs and native dialogs.

The initial image study made no app changes; implementation and verification
are recorded above. Generated PNGs are proposals, not live data or proof of
accessibility. App numbers still come from the engine. Built-in output metadata
provides no model identifier.

## Final prompts

### desktop-proposal

References: desktop-ready.png

```text
Use case: precise-object-edit — restrained UI refinement.
This is a real Gyro wheel-vault app, not a landing page. Preserve its navy/teal identity, existing logo, Space Grotesk/Inter-like typography and mono numbers. Improve hierarchy, contrast, grouping and alignment with MINOR buildable changes, not a wholesale redesign. No Eiko lavender, no mascot, no sidebar/navigation invention, no hero artwork, no decorative charts.
Preserve the three chain choices ETHEREUM / HYPEREVM / BASE and six assets WBTC / XAUt / SPYon / SLVon / wstETH / NUTS; ETHEREUM and WBTC selected. Preserve six strikes $65,000 / $70,000 / $75,000 / $80,000 / $85,000 / $90,000; only $65,000 selected. SPOT $77,200 remains read-only. All inactive-but-available controls should be legible, not look disabled.
Keep numeric meaning and scopes exact: Deployed Liquidity $1.41K, Total Fees $44.2, Volume Facilitated ≈ $14.7K; these are THIS VAULT / ALL STRIKES and volume is estimated from LP fees, not wallet returns. Strike Price $65,000, Current $77,214, Distance +18.8%, Vault TVL $2,990, Your share 0%, Est. APY ~5.7%, Epoch Progress 48d 4h 53m, 12%, until Fri 30 Oct 2026 08:00 UTC, Poked 8h ago. No completed epochs yet is CURRENT vault only; never imply no earlier vault history. Keep the USDC accumulation state and conditional settlement meaning; no unconditional guarantee.
This is disconnected: keep Connect Wallet and do not fabricate holdings or earnings. Deposit, Withdraw and Poke are existing actions. Referral link / Referral leaderboard remain available but secondary. Improve currently too-dark secondary text and touch targets. Keep copy short but do not replace estimates with realized returns or omit essential scope. No fake numbers, new assets, chains, yields, states or features. Output the actual revised screen only, no device frame or comparison board.
Input image 1 is the DESKTOP EDIT TARGET. Preserve the familiar centered app and existing section order as much as possible. Use the excessive outer space a little better, align chain/asset/strike selection deliberately, equalize strike targets, improve text contrast, and tighten gaps so actions and the top of Your Position are visible sooner. Keep the three vault-wide metrics visually distinct from the three strike-level cards. Poke should be secondary to Deposit/Withdraw. This should feel like a small polished iteration of Gyro, not a new product. Retain 1440px desktop composition.
```

### mobile-proposal

References: mobile-ready.png, desktop-ready.png

```text
Use case: precise-object-edit — restrained UI refinement.
This is a real Gyro wheel-vault app, not a landing page. Preserve its navy/teal identity, existing logo, Space Grotesk/Inter-like typography and mono numbers. Improve hierarchy, contrast, grouping and alignment with MINOR buildable changes, not a wholesale redesign. No Eiko lavender, no mascot, no sidebar/navigation invention, no hero artwork, no decorative charts.
Preserve the three chain choices ETHEREUM / HYPEREVM / BASE and six assets WBTC / XAUt / SPYon / SLVon / wstETH / NUTS; ETHEREUM and WBTC selected. Preserve six strikes $65,000 / $70,000 / $75,000 / $80,000 / $85,000 / $90,000; only $65,000 selected. SPOT $77,200 remains read-only. All inactive-but-available controls should be legible, not look disabled.
Keep numeric meaning and scopes exact: Deployed Liquidity $1.41K, Total Fees $44.2, Volume Facilitated ≈ $14.7K; these are THIS VAULT / ALL STRIKES and volume is estimated from LP fees, not wallet returns. Strike Price $65,000, Current $77,214, Distance +18.8%, Vault TVL $2,990, Your share 0%, Est. APY ~5.7%, Epoch Progress 48d 4h 53m, 12%, until Fri 30 Oct 2026 08:00 UTC, Poked 8h ago. No completed epochs yet is CURRENT vault only; never imply no earlier vault history. Keep the USDC accumulation state and conditional settlement meaning; no unconditional guarantee.
This is disconnected: keep Connect Wallet and do not fabricate holdings or earnings. Deposit, Withdraw and Poke are existing actions. Referral link / Referral leaderboard remain available but secondary. Improve currently too-dark secondary text and touch targets. Keep copy short but do not replace estimates with realized returns or omit essential scope. No fake numbers, new assets, chains, yields, states or features. Output the actual revised screen only, no device frame or comparison board.
Input image 1 is the MOBILE EDIT TARGET. Image 2 is supporting reference ONLY for the same app's controls and below-crop values, not a second screen to include. Fix the long pre-action scroll with a more compact arrangement of the SAME content. Group the vault-wide summary into a compact strip or compact rows with readable scope, make strikes a regular tap-friendly grid with Spot clearly separate, reduce redundant spacing, and bring the existing Deposit/Withdraw controls (visible in desktop reference, below the mobile crop) within comfortable reach. Keep every chain and asset available. Do not squeeze three unreadably tiny metric columns into phone width. Poke/referrals are secondary, not removed. Do not add a permanent action overlay obscuring content. Can place the existing detailed conditional explanation in a clearly labeled 'How it works' disclosure. Keep mobile layout at an honest 390px scale, readable numbers and realistic text sizes. Single vertical screen/capture, not multiple phones. Do not fake a connected position.
```