lhumina_code/hero_compute

Fork 0

fix UI zos compute #130

New issue

Open

opened 2026-05-26 04:19:50 +00:00 by despiegk · 3 comments

despiegk commented

2026-05-26 04:19:50 +00:00

Owner

RESERVATIONS TAB

We are creating a server called My Compute ZOS.

The way it works is that a user starts with a reservation, which represents a set of resources that can be combined. A reservation can have a secret attached to it and one or more SSH keys. Anything deployed within this reservation—whether a VM or a WebGateway—inherits those attributes. The secret protects the resources inside the reservation, while the SSH keys are relevant only for virtual machines.

Inside reservations we want the main pannel to displays the main statistics. allowing us to see which virtual machines exist. For each VM we should display its public IP address and provide a link that jumps to the console on the router (or a console tab for remote SSH access).

Below the main view, there should be a grid listing the contracts, with sections for virtual machines and lab gateways. When a user clicks on a virtual machine, a summary panel appears, showing basic information such as memory, CPU, and some statistics. Clicking again on that virtual machine opens a full‑page view with all details obtainable from the grid.

All information is cached in the database, so the UI always displays data from the database first. The database is kept in sync with the grid: we regularly run synchronisation tools (approximately hourly, or at random intervals as needed) that fetch the current status of each virtual machine and web gateway. This ensures that the status shown in the database matches the actual status on the grid.

CONTRACTS TAB

❯ we can have a tab of contracts, these are all contracts which are oned by the user of TFGrid, as defined by
his/her pub/private key = TFGRID_MNEMONIC

sync (in background) all known TFContracts, they to find to which reservation they belond and show, we can then
click on the reservation from the contract item

also multi select, we can delete

per contract we show if there is billing

## RESERVATIONS TAB We are creating a server called **My Compute ZOS**. The way it works is that a user starts with a **reservation**, which represents a set of resources that can be combined. A reservation can have a **secret** attached to it and one or more **SSH keys**. Anything deployed within this reservation—whether a VM or a WebGateway—inherits those attributes. The secret protects the resources inside the reservation, while the SSH keys are relevant only for virtual machines. Inside reservations we want the main pannel to displays the main statistics. allowing us to see which virtual machines exist. For each VM we should display its public IP address and provide a link that jumps to the console on the router (or a console tab for remote SSH access). Below the main view, there should be a grid listing the contracts, with sections for virtual machines and lab gateways. When a user clicks on a virtual machine, a summary panel appears, showing basic information such as memory, CPU, and some statistics. Clicking again on that virtual machine opens a full‑page view with all details obtainable from the grid. All information is cached in the database, so the UI always displays data from the database first. The database is kept in sync with the grid: we regularly run synchronisation tools (approximately hourly, or at random intervals as needed) that fetch the current status of each virtual machine and web gateway. This ensures that the status shown in the database matches the actual status on the grid. ## CONTRACTS TAB ❯ we can have a tab of contracts, these are all contracts which are oned by the user of TFGrid, as defined by his/her pub/private key = TFGRID_MNEMONIC sync (in background) all known TFContracts, they to find to which reservation they belond and show, we can then click on the reservation from the contract item also multi select, we can delete per contract we show if there is billing

despiegk commented

2026-05-26 04:24:47 +00:00

Author

Owner

Implementation Spec for Issue #130

Objective

Bring the "My Compute ZOS" admin UI in line with issue #130's two-tab design. (1) A Reservations tab whose main panel shows VM statistics with public IP and console/SSH links, a contracts grid grouped into VMs and lab gateways, a click-to-expand VM summary panel and a full-page VM detail view, all served from the DB cache and kept in sync with the grid by a periodic background sync. (2) A Contracts tab that lists all TFGrid contracts owned by the operator twin (TFGRID_MNEMONIC), syncs them into the DB in the background, maps each to its reservation (clickable), supports multi-select delete, and shows per-contract billing.

Current State

Backend data model (types.rs): Reservation { sid, name, secret, ssh_keys } exists. Vm and Webgateway both carry a reservation_sid: Option<String> and on-chain meta structs. There is no Contract entity and no billing field.
DB (db.rs): reservations table + full CRUD. Helpers vm_list_for_reservation/webgateway_list_for_reservation exist. No contracts table. The explorer_nodes table + sync_explorer_nodes is the proven template for a DB-cached, gridproxy-fed, prune-stale sync.
RPC (rpc.rs): reservation CRUD wired through dispatch(). tfgrid_twin_id() resolves the operator twin. cancel_rent_contract/gateway_driver::cancel_contract_on_tfgrid can cancel a contract by id. grid_driver::scan_orphan_contracts_since + ProxyContract query gridproxy contracts. No sync_contracts/list_contracts RPC; ProxyContract does not parse type/details/billing.
SDK (generated client): has computeservice_* for current methods incl. reservations and sync_explorer_nodes; no contract-sync method.
UI panes: index.html tab bar has Dashboard / Explorer / Reservations (id tab-deployments) / API Docs / Settings. No Contracts tab button even though panes/contracts.html and panes/vms.html are included. panes/deployments.html is the Reservations pane (list + drill-in detail with VMs/Web Gateways/TFGrid Contracts cards). No VM public-IP/console column, no VM summary panel, no full-page VM view. panes/contracts.html exists but is unreachable, driven by list_vms/list_webgateways + direct browser fetch to gridproxy, with no reservation column/multi-select/billing.
JS (panes.js, dashboard.js): reservation + contract render fns exist; _startTab('contracts') is never triggered (no tab). No multi-select, billing, VM console/IP link, or VM summary/full-page view.

Requirements

Reservations tab: main panel shows VM stats; per VM show public IP + console/SSH link.
Below: a contracts grid split into VMs and lab (web) gateways sections.
Click a VM -> summary panel (memory, CPU, basic stats); click again -> full-page VM detail view.
UI always reads from DB first; background sync (~hourly / on demand) reconciles VM + webgateway status against the grid.
Contracts tab: list all TFGrid contracts owned by TFGRID_MNEMONIC twin.
Background-sync all TFContracts into DB; map each to its reservation (clickable); multi-select + delete; per-contract billing.

Files to Modify/Create

crates/my_compute_zos_server/src/cloud/types.rs - Add Contract struct + ContractSyncResult + trait methods sync_contracts, list_contracts, delete_contract, reservation/workload sync.
crates/my_compute_zos_server/src/cloud/db.rs - Add contracts table + accessors (contract_upsert/get/list/list_for_reservation/delete, contracts_delete_not_in, contracts_last_synced_at, row_to_contract).
crates/my_compute_zos_server/src/cloud/grid_driver.rs - Extend ProxyContract (type/twin_id/details/billing via serde(default)); add fetch_twin_contracts and optional fetch_contract_bills.
crates/my_compute_zos_server/src/cloud/rpc.rs - Implement sync_contracts/list_contracts/delete_contract + VM/WG reconcile + dispatch() arms.
crates/my_compute_zos_sdk/src/generated/openrpc.openrpc.client.generated.rs + crates/my_compute_zos_server/src/cloud/openrpc.json - Add new method signatures.
crates/my_compute_zos_admin/templates/index.html - Add Contracts tab button.
crates/my_compute_zos_admin/templates/panes/contracts.html - Reservation column, multi-select + bulk-delete, billing column.
crates/my_compute_zos_admin/templates/panes/deployments.html - VM public-IP + console/SSH columns; VM summary panel + full-page wiring.
crates/my_compute_zos_admin/templates/panes/vms.html - Full-page VM detail view.
crates/my_compute_zos_admin/static/js/panes.js - Rewrite loadContractsPage/loadRentals to read list_contracts; add contracts background/stale sync; multi-select + bulkCancelContracts; VM summary + full-page handlers; IP/console link rendering.
crates/my_compute_zos_admin/static/js/dashboard.js - VM console/SSH link helpers; trigger reservation VM/WG sync on entering Reservations tab.
crates/my_compute_zos_server/tests/integration.rs - Tests for sync/list/delete contracts, mapping, and reconcile.

Implementation Plan

Step 1: Define Contract entity + billing data model

Files: types.rs

Add Contract struct (contract_id, twin_id, kind, state, node_id, resource_sid, reservation_sid, billing fields, created_at, synced_at) + ContractSyncResult.
Add trait methods sync_contracts, list_contracts, delete_contract, and a reservation/workload state sync.
Dependencies: none

Step 2: Add contracts table + DB accessors

Files: db.rs

CREATE TABLE IF NOT EXISTS contracts in migrate() (follow explorer_nodes).
Add upsert/get/list/list_for_reservation/delete, contracts_delete_not_in, contracts_last_synced_at, row_to_contract.
Dependencies: Step 1

Step 3: Gridproxy contract + billing fetch

Files: grid_driver.rs

Extend ProxyContract (type/twin_id/details/billing via serde(default)); add fetch_twin_contracts; optional fetch_contract_bills.
Dependencies: none (parallel with 1-2)

Step 4: Implement sync_contracts/list_contracts/reconcile in RPC + dispatch

Files: rpc.rs

sync_contracts: resolve operator twin, fetch contracts, map to reservation via stored vm/wg meta contract ids, upsert + prune.
list_contracts, delete_contract, VM/WG reconcile sync; add dispatch() arms.
Dependencies: Steps 1,2,3

Step 5: Expose new methods in SDK + openrpc.json

Files: generated client, openrpc.json

Add method entries + computeservice_* client fns following the existing sync_explorer_nodes block.
Dependencies: Step 4

Step 6: Add Contracts tab + multi-select + billing + reservation link (UI)

Files: index.html, panes/contracts.html, panes.js

Add Contracts tab button; reservation column (clickable), checkboxes + bulk-delete toolbar, billing column.
Rewrite loadContractsPage to read list_contracts; add _startTab('contracts') background sync + stale check; multi-select + bulkCancelContracts.
Dependencies: Step 5

Step 7: Reservations VM IP/console links, summary panel, full-page view (UI)

Files: panes/deployments.html, panes/vms.html, panes.js, dashboard.js

Add public-IP + console/SSH columns to VM table; first click -> summary panel; second click -> full-page VM view.
Trigger reservation VM/WG status sync on entering Reservations tab; read DB first.
Dependencies: Step 5 (parallel with Step 6)

Step 8: Tests

Files: tests/integration.rs

Tests for sync_contracts cache population, contract->reservation mapping, list_contracts filter, delete_contract cancel+prune, VM/WG reconcile. Reuse mock gridproxy + COMPUTE_TEST_FAKE_DEPLOY harness.
Dependencies: Step 4 (backend), Step 5 (SDK)

Acceptance Criteria

A Contracts tab is visible and renders the contracts pane.
Contracts are fetched from the operator twin, stored in a DB contracts table, listed from cache (DB first, background sync).
Each contract row shows its reservation; clicking opens that reservation.
Contracts support multi-select + bulk delete (on-chain cancel + DB prune).
Each contract row shows billing info.
Reservations main panel shows VM stats; each VM shows public IP + console/SSH link.
Reservation detail shows a contracts grid split into VM and web-gateway sections.
Clicking a VM shows a summary panel; a second click opens a full-page VM detail view.
A background sync reconciles VM and webgateway status from the grid into the DB.
New RPC methods exist in trait, dispatch, openrpc.json, and SDK; integration tests pass.

Notes

Branch development_no_osis; listed files already dirty from recent reservation commits. Reservations pane is panes/deployments.html (id prefix deployments) - do not rename ids without updating switchTab/_startTab.
sync_explorer_nodes + explorer_nodes table are the canonical pattern to copy for the contracts cache (paged fetch -> upsert -> delete_not_in prune -> last_synced_at + JS stale-check).
Contract->reservation mapping comes from on-chain ids stored on workloads (HypervisorMeta.vm/network_contract_id, WebgatewayMeta.contract/name_contract_id) joined to each workload's reservation_sid. Rent contracts have no reservation.
Billing: gridproxy exposes /contracts/{id}/bills; confirm exact field names before committing serde names; keep serde(default) on new fields.
dispatch() method strings are lowercase computeservice.; SDK/JS call ComputeService. (transport lowercases prefix).
panes.js (1715 lines) and dashboard.js (2274 lines) are large - make surgical additions, not rewrites.

## Implementation Spec for Issue #130 ### Objective Bring the "My Compute ZOS" admin UI in line with issue #130's two-tab design. (1) A **Reservations** tab whose main panel shows VM statistics with public IP and console/SSH links, a contracts grid grouped into VMs and lab gateways, a click-to-expand VM summary panel and a full-page VM detail view, all served from the DB cache and kept in sync with the grid by a periodic background sync. (2) A **Contracts** tab that lists all TFGrid contracts owned by the operator twin (TFGRID_MNEMONIC), syncs them into the DB in the background, maps each to its reservation (clickable), supports multi-select delete, and shows per-contract billing. ### Current State - **Backend data model** (types.rs): `Reservation { sid, name, secret, ssh_keys }` exists. `Vm` and `Webgateway` both carry a `reservation_sid: Option<String>` and on-chain meta structs. There is no Contract entity and no billing field. - **DB** (db.rs): `reservations` table + full CRUD. Helpers `vm_list_for_reservation`/`webgateway_list_for_reservation` exist. No `contracts` table. The `explorer_nodes` table + `sync_explorer_nodes` is the proven template for a DB-cached, gridproxy-fed, prune-stale sync. - **RPC** (rpc.rs): reservation CRUD wired through `dispatch()`. `tfgrid_twin_id()` resolves the operator twin. `cancel_rent_contract`/`gateway_driver::cancel_contract_on_tfgrid` can cancel a contract by id. `grid_driver::scan_orphan_contracts_since` + `ProxyContract` query gridproxy contracts. No `sync_contracts`/`list_contracts` RPC; `ProxyContract` does not parse type/details/billing. - **SDK** (generated client): has `computeservice_*` for current methods incl. reservations and `sync_explorer_nodes`; no contract-sync method. - **UI panes**: `index.html` tab bar has Dashboard / Explorer / Reservations (id tab-deployments) / API Docs / Settings. No Contracts tab button even though `panes/contracts.html` and `panes/vms.html` are included. `panes/deployments.html` is the Reservations pane (list + drill-in detail with VMs/Web Gateways/TFGrid Contracts cards). No VM public-IP/console column, no VM summary panel, no full-page VM view. `panes/contracts.html` exists but is unreachable, driven by `list_vms`/`list_webgateways` + direct browser fetch to gridproxy, with no reservation column/multi-select/billing. - **JS** (panes.js, dashboard.js): reservation + contract render fns exist; `_startTab('contracts')` is never triggered (no tab). No multi-select, billing, VM console/IP link, or VM summary/full-page view. ### Requirements - Reservations tab: main panel shows VM stats; per VM show public IP + console/SSH link. - Below: a contracts grid split into VMs and lab (web) gateways sections. - Click a VM -> summary panel (memory, CPU, basic stats); click again -> full-page VM detail view. - UI always reads from DB first; background sync (~hourly / on demand) reconciles VM + webgateway status against the grid. - Contracts tab: list all TFGrid contracts owned by TFGRID_MNEMONIC twin. - Background-sync all TFContracts into DB; map each to its reservation (clickable); multi-select + delete; per-contract billing. ### Files to Modify/Create - `crates/my_compute_zos_server/src/cloud/types.rs` - Add `Contract` struct + `ContractSyncResult` + trait methods `sync_contracts`, `list_contracts`, `delete_contract`, reservation/workload sync. - `crates/my_compute_zos_server/src/cloud/db.rs` - Add `contracts` table + accessors (`contract_upsert/get/list/list_for_reservation/delete`, `contracts_delete_not_in`, `contracts_last_synced_at`, `row_to_contract`). - `crates/my_compute_zos_server/src/cloud/grid_driver.rs` - Extend `ProxyContract` (type/twin_id/details/billing via serde(default)); add `fetch_twin_contracts` and optional `fetch_contract_bills`. - `crates/my_compute_zos_server/src/cloud/rpc.rs` - Implement `sync_contracts`/`list_contracts`/`delete_contract` + VM/WG reconcile + `dispatch()` arms. - `crates/my_compute_zos_sdk/src/generated/openrpc.openrpc.client.generated.rs` + `crates/my_compute_zos_server/src/cloud/openrpc.json` - Add new method signatures. - `crates/my_compute_zos_admin/templates/index.html` - Add Contracts tab button. - `crates/my_compute_zos_admin/templates/panes/contracts.html` - Reservation column, multi-select + bulk-delete, billing column. - `crates/my_compute_zos_admin/templates/panes/deployments.html` - VM public-IP + console/SSH columns; VM summary panel + full-page wiring. - `crates/my_compute_zos_admin/templates/panes/vms.html` - Full-page VM detail view. - `crates/my_compute_zos_admin/static/js/panes.js` - Rewrite `loadContractsPage`/`loadRentals` to read `list_contracts`; add contracts background/stale sync; multi-select + `bulkCancelContracts`; VM summary + full-page handlers; IP/console link rendering. - `crates/my_compute_zos_admin/static/js/dashboard.js` - VM console/SSH link helpers; trigger reservation VM/WG sync on entering Reservations tab. - `crates/my_compute_zos_server/tests/integration.rs` - Tests for sync/list/delete contracts, mapping, and reconcile. ### Implementation Plan #### Step 1: Define Contract entity + billing data model Files: `types.rs` - Add `Contract` struct (contract_id, twin_id, kind, state, node_id, resource_sid, reservation_sid, billing fields, created_at, synced_at) + `ContractSyncResult`. - Add trait methods `sync_contracts`, `list_contracts`, `delete_contract`, and a reservation/workload state sync. Dependencies: none #### Step 2: Add contracts table + DB accessors Files: `db.rs` - `CREATE TABLE IF NOT EXISTS contracts` in `migrate()` (follow `explorer_nodes`). - Add upsert/get/list/list_for_reservation/delete, `contracts_delete_not_in`, `contracts_last_synced_at`, `row_to_contract`. Dependencies: Step 1 #### Step 3: Gridproxy contract + billing fetch Files: `grid_driver.rs` - Extend `ProxyContract` (type/twin_id/details/billing via serde(default)); add `fetch_twin_contracts`; optional `fetch_contract_bills`. Dependencies: none (parallel with 1-2) #### Step 4: Implement sync_contracts/list_contracts/reconcile in RPC + dispatch Files: `rpc.rs` - `sync_contracts`: resolve operator twin, fetch contracts, map to reservation via stored vm/wg meta contract ids, upsert + prune. - `list_contracts`, `delete_contract`, VM/WG reconcile sync; add `dispatch()` arms. Dependencies: Steps 1,2,3 #### Step 5: Expose new methods in SDK + openrpc.json Files: generated client, `openrpc.json` - Add method entries + `computeservice_*` client fns following the existing `sync_explorer_nodes` block. Dependencies: Step 4 #### Step 6: Add Contracts tab + multi-select + billing + reservation link (UI) Files: `index.html`, `panes/contracts.html`, `panes.js` - Add Contracts tab button; reservation column (clickable), checkboxes + bulk-delete toolbar, billing column. - Rewrite `loadContractsPage` to read `list_contracts`; add `_startTab('contracts')` background sync + stale check; multi-select + `bulkCancelContracts`. Dependencies: Step 5 #### Step 7: Reservations VM IP/console links, summary panel, full-page view (UI) Files: `panes/deployments.html`, `panes/vms.html`, `panes.js`, `dashboard.js` - Add public-IP + console/SSH columns to VM table; first click -> summary panel; second click -> full-page VM view. - Trigger reservation VM/WG status sync on entering Reservations tab; read DB first. Dependencies: Step 5 (parallel with Step 6) #### Step 8: Tests Files: `tests/integration.rs` - Tests for sync_contracts cache population, contract->reservation mapping, list_contracts filter, delete_contract cancel+prune, VM/WG reconcile. Reuse mock gridproxy + COMPUTE_TEST_FAKE_DEPLOY harness. Dependencies: Step 4 (backend), Step 5 (SDK) ### Acceptance Criteria - [ ] A Contracts tab is visible and renders the contracts pane. - [ ] Contracts are fetched from the operator twin, stored in a DB contracts table, listed from cache (DB first, background sync). - [ ] Each contract row shows its reservation; clicking opens that reservation. - [ ] Contracts support multi-select + bulk delete (on-chain cancel + DB prune). - [ ] Each contract row shows billing info. - [ ] Reservations main panel shows VM stats; each VM shows public IP + console/SSH link. - [ ] Reservation detail shows a contracts grid split into VM and web-gateway sections. - [ ] Clicking a VM shows a summary panel; a second click opens a full-page VM detail view. - [ ] A background sync reconciles VM and webgateway status from the grid into the DB. - [ ] New RPC methods exist in trait, dispatch, openrpc.json, and SDK; integration tests pass. ### Notes - Branch `development_no_osis`; listed files already dirty from recent reservation commits. Reservations pane is `panes/deployments.html` (id prefix deployments) - do not rename ids without updating switchTab/_startTab. - `sync_explorer_nodes` + `explorer_nodes` table are the canonical pattern to copy for the contracts cache (paged fetch -> upsert -> delete_not_in prune -> last_synced_at + JS stale-check). - Contract->reservation mapping comes from on-chain ids stored on workloads (HypervisorMeta.vm/network_contract_id, WebgatewayMeta.contract/name_contract_id) joined to each workload's reservation_sid. Rent contracts have no reservation. - Billing: gridproxy exposes /contracts/{id}/bills; confirm exact field names before committing serde names; keep serde(default) on new fields. - dispatch() method strings are lowercase computeservice.<snake>; SDK/JS call ComputeService.<snake> (transport lowercases prefix). - panes.js (1715 lines) and dashboard.js (2274 lines) are large - make surgical additions, not rewrites.

despiegk commented

2026-05-26 05:38:18 +00:00

Author

Owner

Test Results

Workspace check: pass
Total: 60
Passed: 60
Failed: 0
Ignored: 0

New contract tests (integration suite):

contracts_cache_upsert_and_list_all
contracts_upsert_updates_existing_row
contracts_delete_removes_row
contracts_last_synced_at_returns_max
contracts_prune_not_in_keep_set
contracts_reservation_mapping_and_filter

Breakdown:

Integration tests (my_compute_zos_server --features cloud --test integration): 22 passed
Server lib unit tests (my_compute_zos_server --features cloud --lib): 38 passed
SDK tests (my_compute_zos_sdk): 0 tests

## Test Results - Workspace check: pass - Total: 60 - Passed: 60 - Failed: 0 - Ignored: 0 New contract tests (integration suite): - contracts_cache_upsert_and_list_all - contracts_upsert_updates_existing_row - contracts_delete_removes_row - contracts_last_synced_at_returns_max - contracts_prune_not_in_keep_set - contracts_reservation_mapping_and_filter Breakdown: - Integration tests (my_compute_zos_server --features cloud --test integration): 22 passed - Server lib unit tests (my_compute_zos_server --features cloud --lib): 38 passed - SDK tests (my_compute_zos_sdk): 0 tests

despiegk commented

2026-05-26 05:39:14 +00:00

Author

Owner

Implementation Summary

Implemented the two-tab "My Compute ZOS" UI described in this issue: a Contracts tab backed by a new DB-cached contract store, and Reservations VM enhancements (public IP / console-SSH links, click-to-summary, full-page VM view).

Backend

types.rs - Added Contract and ContractSyncResult structs; declared trait methods sync_contracts, list_contracts, delete_contract, sync_workloads on ComputeServiceTrait.
db.rs - Added the contracts table to migrate() plus accessors contract_upsert, contract_get, contract_list, contract_list_for_reservation, contract_delete, contracts_delete_not_in, contracts_last_synced_at, and a row_to_contract mapper. Modeled on the existing explorer_nodes cache.
grid_driver.rs - Extended ProxyContract (type/twin_id/details, all serde(default)); added fetch_twin_contracts (paginated, all non-deleted contracts for a twin) and fetch_contract_bills (sums billed amount).
rpc.rs - Implemented the four trait methods. sync_contracts resolves the operator twin, fetches contracts, maps each to a reservation by matching on-chain contract ids stored on VMs (hypervisor_meta.vm/network_contract_id) and webgateways (meta.contract/name_contract_id), upserts and prunes. list_contracts reads from the DB cache. delete_contract cancels on-chain (idempotent on already-cancelled) then prunes. sync_workloads reconciles VM/WG state from the grid. Added the matching dispatch() arms.
openrpc.json + generated SDK - Added Contract / ContractSyncResult / ExplorerSyncResult schemas and the four method entries; the openrpc_client! macro regenerates the typed SDK client.

UI

index.html - Added the Contracts tab button to the top tab bar (the pane was already included but unreachable).
panes/contracts.html - Restructured the contracts table to be driven by list_contracts: select-all + per-row checkboxes, a bulk-delete toolbar with live count, a clickable Reservation column, and a Billing column.
panes.js (Contracts) - Rewrote loadContractsPage to read the DB cache; added cache-first load with background sync_contracts and a _contractsAutoSyncIfStale (>1h) check mirroring the explorer pattern; multi-select state, bulkCancelContracts, and openReservationFromContract.
panes/deployments.html - Added Mycelium IP, Public IP, and Console/SSH columns to the reservation VM table.
panes/vms.html - Added a full-page VM detail view (list view + detail view with a Back button).
panes.js (Reservations) - Two-stage VM interaction: first click expands an inline summary (state, CPU, memory, IP, SSH), second click opens the full-page view (toggleVmSummary / openVmDetail / closeVmDetail). Entering the Reservations tab now triggers sync_workloads in the background. Lightly grouped the detail Contracts card into VM and Web Gateway sections.
dashboard.js - Added defensive vmPublicIp, vmConsoleUrl, and vmSshCommand helpers.

Tests

Added 6 integration tests in tests/integration.rs covering the contract cache, reservation mapping/filter, prune, delete, and last-synced-at. Full suite: 60 passed, 0 failed (22 integration + 38 server lib unit). Workspace compiles cleanly.

Notes / known gaps

There is no public-IP field on the Vm / HypervisorMeta model today; the only routable address is mycelium_ip. The Public IP column and console/SSH links fall back to the mycelium IPv6, and Public IP renders a dash when no dedicated public IP is present. The helper picks up a real public-IP field automatically if one is added later.
sync_contracts / delete_contract exercise the live grid proxy and on-chain cancel respectively, so the integration tests validate the DB cache / mapping / prune / filter data-flow offline rather than the network path.

## Implementation Summary Implemented the two-tab "My Compute ZOS" UI described in this issue: a Contracts tab backed by a new DB-cached contract store, and Reservations VM enhancements (public IP / console-SSH links, click-to-summary, full-page VM view). ### Backend - `types.rs` - Added `Contract` and `ContractSyncResult` structs; declared trait methods `sync_contracts`, `list_contracts`, `delete_contract`, `sync_workloads` on `ComputeServiceTrait`. - `db.rs` - Added the `contracts` table to `migrate()` plus accessors `contract_upsert`, `contract_get`, `contract_list`, `contract_list_for_reservation`, `contract_delete`, `contracts_delete_not_in`, `contracts_last_synced_at`, and a `row_to_contract` mapper. Modeled on the existing `explorer_nodes` cache. - `grid_driver.rs` - Extended `ProxyContract` (type/twin_id/details, all serde(default)); added `fetch_twin_contracts` (paginated, all non-deleted contracts for a twin) and `fetch_contract_bills` (sums billed amount). - `rpc.rs` - Implemented the four trait methods. `sync_contracts` resolves the operator twin, fetches contracts, maps each to a reservation by matching on-chain contract ids stored on VMs (hypervisor_meta.vm/network_contract_id) and webgateways (meta.contract/name_contract_id), upserts and prunes. `list_contracts` reads from the DB cache. `delete_contract` cancels on-chain (idempotent on already-cancelled) then prunes. `sync_workloads` reconciles VM/WG state from the grid. Added the matching `dispatch()` arms. - `openrpc.json` + generated SDK - Added Contract / ContractSyncResult / ExplorerSyncResult schemas and the four method entries; the `openrpc_client!` macro regenerates the typed SDK client. ### UI - `index.html` - Added the Contracts tab button to the top tab bar (the pane was already included but unreachable). - `panes/contracts.html` - Restructured the contracts table to be driven by `list_contracts`: select-all + per-row checkboxes, a bulk-delete toolbar with live count, a clickable Reservation column, and a Billing column. - `panes.js` (Contracts) - Rewrote `loadContractsPage` to read the DB cache; added cache-first load with background `sync_contracts` and a `_contractsAutoSyncIfStale` (>1h) check mirroring the explorer pattern; multi-select state, `bulkCancelContracts`, and `openReservationFromContract`. - `panes/deployments.html` - Added Mycelium IP, Public IP, and Console/SSH columns to the reservation VM table. - `panes/vms.html` - Added a full-page VM detail view (list view + detail view with a Back button). - `panes.js` (Reservations) - Two-stage VM interaction: first click expands an inline summary (state, CPU, memory, IP, SSH), second click opens the full-page view (`toggleVmSummary` / `openVmDetail` / `closeVmDetail`). Entering the Reservations tab now triggers `sync_workloads` in the background. Lightly grouped the detail Contracts card into VM and Web Gateway sections. - `dashboard.js` - Added defensive `vmPublicIp`, `vmConsoleUrl`, and `vmSshCommand` helpers. ### Tests Added 6 integration tests in `tests/integration.rs` covering the contract cache, reservation mapping/filter, prune, delete, and last-synced-at. Full suite: 60 passed, 0 failed (22 integration + 38 server lib unit). Workspace compiles cleanly. ### Notes / known gaps - There is no public-IP field on the `Vm` / `HypervisorMeta` model today; the only routable address is `mycelium_ip`. The Public IP column and console/SSH links fall back to the mycelium IPv6, and Public IP renders a dash when no dedicated public IP is present. The helper picks up a real public-IP field automatically if one is added later. - `sync_contracts` / `delete_contract` exercise the live grid proxy and on-chain cancel respectively, so the integration tests validate the DB cache / mapping / prune / filter data-flow offline rather than the network path.