+
+
+
+ ` : html`
+ `;
+ }
+}
+
+customElements.define('rseal-client', RSealClientElement);
diff --git a/web/static/pages/remote-seal/rseal-pipeline.mjs b/web/static/pages/remote-seal/rseal-pipeline.mjs
new file mode 100644
index 000000000..b16c91188
--- /dev/null
+++ b/web/static/pages/remote-seal/rseal-pipeline.mjs
@@ -0,0 +1,199 @@
+import { LitElement, html, css } from 'https://cdn.jsdelivr.net/gh/lit/dist@3/all/lit-all.min.js';
+import RPCCall from '/lib/jsonrpc.mjs';
+import '/ux/task.mjs';
+
+class RSealPipelineElement extends LitElement {
+ static properties = {
+ providerPipeline: { type: Array },
+ clientPipeline: { type: Array },
+ providerStats: { type: Object },
+ clientStats: { type: Object },
+ };
+
+ constructor() {
+ super();
+ this.providerPipeline = [];
+ this.clientPipeline = [];
+ this.providerStats = null;
+ this.clientStats = null;
+ this.loadData();
+ this.refreshInterval = setInterval(() => this.loadData(), 5000);
+ }
+
+ createRenderRoot() {
+ return this;
+ }
+
+ disconnectedCallback() {
+ super.disconnectedCallback();
+ if (this.refreshInterval) clearInterval(this.refreshInterval);
+ }
+
+ async loadData() {
+ try {
+ this.providerPipeline = await RPCCall('RSealProviderPipeline', []) || [];
+ } catch (err) {
+ console.error('Failed to load provider pipeline:', err);
+ this.providerPipeline = [];
+ }
+ try {
+ this.clientPipeline = await RPCCall('RSealClientPipeline', []) || [];
+ } catch (err) {
+ console.error('Failed to load client pipeline:', err);
+ this.clientPipeline = [];
+ }
+ try {
+ this.providerStats = await RPCCall('RSealProviderStats', []);
+ } catch (err) {
+ console.error('Failed to load provider stats:', err);
+ this.providerStats = null;
+ }
+ try {
+ this.clientStats = await RPCCall('RSealClientStats', []);
+ } catch (err) {
+ console.error('Failed to load client stats:', err);
+ this.clientStats = null;
+ }
+ this.requestUpdate();
+ }
+
+ renderStats(stats, title) {
+ if (!stats || !stats.Stages) return html``;
+
+ const totalRunning = stats.Stages.reduce((sum, s) => sum + (s.Running || 0), 0);
+ const totalPending = stats.Stages.reduce((sum, s) => sum + (s.Pending || 0), 0);
+
+ return html`
+ Provider Connections
+Configure remote seal providers that will handle SDR and tree computation for this node's sectors.
+ + ${this.ourURL ? html` +Our Partner URL:
+ ` : html`
+ ${this.ourURL} (share this with providers when they add you as a partner)
+ HTTP.DomainName not configured. Remote seal callbacks will not work until it is set.
+
+ `}
+
+ Add Provider
+
+
+
+ ${this.providers.length > 0 ? html`
+
+
+ ${this.actors.length > 0 ? html`
+
+ ` : html`
+ this.newSpAddr = e.target.value} />
+ `}
+
+
+
+ this.newConnectString = e.target.value} />
+
+
+
+
+
+ + Providers + +
+| ID | +Miner | +Provider URL | +Name | +Enabled | +Available | +Created | +Actions | +
|---|---|---|---|---|---|---|---|
| ${p.id} | +f0${p.sp_id} | +${p.provider_url} | ++ this.renameProvider(p.id, p.provider_name)} style="cursor:pointer" title="Click to rename"> + ${p.provider_name || html`unnamed`} + + | ++ ${p.enabled ? 'Yes' : 'No'} + | +${this.renderAvailability(p.id)} | +${new Date(p.created_at).toLocaleDateString()} | ++ + + + | +
No providers configured yet.
`} +
+
+ `;
+ }
+
+ renderStage(done) {
+ return done
+ ? html`Done`
+ : html`-`;
+ }
+
+ renderTaskStage(taskId, done) {
+ if (taskId) {
+ return html`${title} Stats
+
+
+
+ Total: ${stats.Total || 0}
+
+
+ Running: ${totalRunning}
+
+
+ Pending: ${totalPending}
+
+
+ ${stats.Stages.map(stage => html`
+
+
+
+ ${stage.Name}: ${stage.Running || 0} running, ${stage.Pending || 0} pending
+
+
+ `)}
+
+
+ `;
+ }
+}
+
+customElements.define('rseal-pipeline', RSealPipelineElement);
diff --git a/web/static/pages/remote-seal/rseal-provider.mjs b/web/static/pages/remote-seal/rseal-provider.mjs
new file mode 100644
index 000000000..1aed9bea5
--- /dev/null
+++ b/web/static/pages/remote-seal/rseal-provider.mjs
@@ -0,0 +1,327 @@
+import { LitElement, html, css } from 'https://cdn.jsdelivr.net/gh/lit/dist@3/all/lit-all.min.js';
+import RPCCall from '/lib/jsonrpc.mjs';
+
+// Proof types: value -> label. For mainnet/calibnet only 32GiB and 64GiB V1.1 matter.
+const PROOF_TYPES = [
+ { value: 8, label: '32GiB 1.1' },
+ { value: 9, label: '64GiB 1.1' },
+];
+
+class RSealProviderElement extends LitElement {
+ static properties = {
+ partners: { type: Array },
+ newName: { type: String },
+ newURL: { type: String },
+ newAllowance: { type: Number },
+ newProofTypes: { type: Array },
+ connectStringPartnerID: { type: Number },
+ connectString: { type: String },
+ ourURL: { type: String },
+ };
+
+ constructor() {
+ super();
+ this.partners = [];
+ this.newName = '';
+ this.newURL = '';
+ this.newAllowance = 10;
+ this.newProofTypes = PROOF_TYPES.map(p => p.value); // all checked by default
+ this.connectStringPartnerID = null;
+ this.connectString = '';
+ this.ourURL = '';
+ this.loadData();
+ }
+
+ createRenderRoot() {
+ return this;
+ }
+
+ async loadData() {
+ try {
+ this.partners = await RPCCall('RSealListPartners', []);
+ } catch (err) {
+ console.error('Failed to load partners:', err);
+ this.partners = [];
+ }
+ try {
+ this.ourURL = await RPCCall('RSealGetPartnerURL', []) || '';
+ } catch (err) {
+ console.error('Failed to load partner URL:', err);
+ }
+ this.requestUpdate();
+ }
+
+ toggleProofType(value) {
+ const idx = this.newProofTypes.indexOf(value);
+ if (idx >= 0) {
+ this.newProofTypes = this.newProofTypes.filter(v => v !== value);
+ } else {
+ this.newProofTypes = [...this.newProofTypes, value];
+ }
+ }
+
+ proofTypeLabels(types) {
+ if (!types || types.length === 0) return 'Any';
+ return types.map(v => {
+ const pt = PROOF_TYPES.find(p => p.value === v);
+ return pt ? pt.label : `proof:${v}`;
+ }).join(', ');
+ }
+
+ async addPartner() {
+ if (!this.newName || !this.newURL) {
+ alert('Name and URL are required');
+ return;
+ }
+ if (this.newProofTypes.length === 0) {
+ alert('Select at least one allowed proof type');
+ return;
+ }
+ try {
+ await RPCCall('RSealAddPartner', [this.newName, this.newURL, this.newAllowance, this.newProofTypes]);
+ this.newName = '';
+ this.newURL = '';
+ this.newAllowance = 10;
+ this.newProofTypes = PROOF_TYPES.map(p => p.value);
+ await this.loadData();
+ } catch (err) {
+ alert(`Failed to add partner: ${err.message || err}`);
+ }
+ }
+
+ async removePartner(id) {
+ if (!confirm(`Remove partner ${id}?`)) return;
+ try {
+ await RPCCall('RSealRemovePartner', [id]);
+ await this.loadData();
+ } catch (err) {
+ alert(`Failed to remove partner: ${err.message || err}`);
+ }
+ }
+
+ async updateAllowance(id) {
+ const total = prompt('New total allowance:');
+ if (total === null) return;
+ const remaining = prompt('New remaining allowance:');
+ if (remaining === null) return;
+ try {
+ await RPCCall('RSealUpdatePartnerAllowance', [id, parseInt(total), parseInt(remaining)]);
+ await this.loadData();
+ } catch (err) {
+ alert(`Failed to update allowance: ${err.message || err}`);
+ }
+ }
+
+ async getConnectString(id) {
+ try {
+ const cs = await RPCCall('RSealGetConnectString', [id]);
+ this.connectStringPartnerID = id;
+ this.connectString = cs;
+ this.requestUpdate();
+ } catch (err) {
+ alert(`Failed to get connect string: ${err.message || err}`);
+ }
+ }
+
+ copyConnectString() {
+ navigator.clipboard.writeText(this.connectString).then(() => {
+ alert('Connect string copied to clipboard');
+ });
+ }
+
+ render() {
+ return html`
+
+
+
+
+ Remote Seal Pipeline Status
+ + ${this.renderStats(this.providerStats, 'Provider')} + +Provider Pipeline
+ ${this.providerPipeline.length > 0 ? html` +
+
+
+
+
+ ` : html`| SP | +Sector | +Partner | +SDR | +TreeD | +TreeC | +TreeR | +Notify | +C1 | +Finalize | +Cleanup | +Status | +
|---|---|---|---|---|---|---|---|---|---|---|---|
| f0${r.sp_id} | +${r.sector_number} | +${r.partner_name} | +${this.renderTaskStage(r.task_id_sdr, r.after_sdr)} | +${this.renderTaskStage(r.task_id_tree_d, r.after_tree_d)} | +${this.renderTaskStage(r.task_id_tree_c, r.after_tree_c)} | +${this.renderTaskStage(r.task_id_tree_r, r.after_tree_r)} | +${this.renderTaskStage(r.task_id_notify_client, r.after_notify_client)} | +${this.renderStage(r.after_c1_supplied)} | +${this.renderTaskStage(r.task_id_finalize, r.after_finalize)} | +${this.renderTaskStage(r.task_id_cleanup, r.after_cleanup)} | +${r.failed ? html`Failed` : html`Active`} | +
No active provider pipeline rows.
`} + + ${this.renderStats(this.clientStats, 'Client')} + +Client Pipeline
+ ${this.clientPipeline.length > 0 ? html` +
+
+
+
+
+ ` : html`| SP | +Sector | +Provider | +Delegate | +Poll | +Fetch | +Cleanup | +Status | +
|---|---|---|---|---|---|---|---|
| f0${r.sp_id} | +${r.sector_number} | +${r.provider_name} | +${this.renderTaskStage(r.task_id_delegate, r.after_delegate)} | +${this.renderTaskStage(r.task_id_poll, r.after_sdr)} | +${this.renderTaskStage(r.task_id_fetch, r.after_fetch)} | +${this.renderTaskStage(r.task_id_cleanup, r.after_cleanup)} | +${r.failed ? html`Failed` : html`Active`} | +
No active client pipeline rows.
`} +
+
+
+
+ ` : html`
+ `;
+ }
+}
+
+customElements.define('rseal-provider', RSealProviderElement);
diff --git a/web/static/ux/curio-ux.mjs b/web/static/ux/curio-ux.mjs
index 71416927f..b000f9ae7 100644
--- a/web/static/ux/curio-ux.mjs
+++ b/web/static/ux/curio-ux.mjs
@@ -4,6 +4,7 @@ import RPCCall from '/lib/jsonrpc.mjs';
class CurioUX extends LitElement {
static properties = {
alertCount: { type: Number },
+ instanceColor: { type: Number },
};
static styles = css`
.curio-slot {
@@ -142,6 +143,7 @@ class CurioUX extends LitElement {
constructor() {
super();
this.alertCount = 0;
+ this.instanceColor = null;
}
connectedCallback() {
@@ -163,6 +165,22 @@ class CurioUX extends LitElement {
// Load alert status
this.loadAlertStatus();
+
+ // Load instance color
+ this.loadInstanceColor();
+ }
+
+ async loadInstanceColor() {
+ try {
+ const color = await RPCCall('InstanceColor');
+ if (color > 0) {
+ this.instanceColor = color;
+ this.requestUpdate();
+ }
+ } catch (e) {
+ // Silently fail - color endpoint may not exist
+ this.instanceColor = null;
+ }
}
async loadAlertStatus() {
@@ -211,8 +229,11 @@ class CurioUX extends LitElement {
}
renderMenu(active) {
+ const menuStyle = this.instanceColor !== null
+ ? `width: 240px; min-height:100vh; margin-right: 1rem; background-color: #2a2a2e; border-right: 3px solid hsl(${this.instanceColor}, 35%, 45%);`
+ : 'width: 240px; min-height:100vh; margin-right: 1rem; background-color: #2a2a2e;';
return html`
- Partner Management
+Manage partners that are allowed to delegate sealing to this node.
+ + ${this.ourURL ? html` +Our Partner URL:
+ ` : html`
+ ${this.ourURL}
+ HTTP.DomainName not configured. Connect strings will not work until it is set.
+
+ `}
+
+ Add Partner
+
+
+
+
+ this.newName = e.target.value} />
+
+
+
+ this.newURL = e.target.value} />
+
+
+
+ this.newAllowance = parseInt(e.target.value)} />
+
+
+
+
+
+
+
+ ${PROOF_TYPES.map(pt => html`
+
+ `)}
+
+
+ ${this.connectString ? html`
+
+ Connect String (Partner ID ${this.connectStringPartnerID}):
+
+ ` : ''}
+
+ ${this.partners.length > 0 ? html`
+
+
+
+
+ Share this with the client operator to configure their provider connection.
+ Partners
+| ID | +Name | +URL | +Sectors Remaining | +Sectors Total | +Proof Types | +Created | +Actions | +
|---|---|---|---|---|---|---|---|
| ${p.id} | +${p.partner_name} | +${p.partner_url} | +${p.allowance_remaining} | +${p.allowance_total} | +${this.proofTypeLabels(p.allowed_proof_types)} | +${new Date(p.created_at).toLocaleDateString()} | ++ + + + | +
No partners configured yet.
`} +