@le-space/ui 0.9.8 → 0.10.0

package/svelte/SponsorRelayFab.svelte

@@ -1,7 +1,7 @@
 <script>
   import { onDestroy, onMount } from 'svelte'
 
-  import { UI_PACKAGE_VERSION, anchorPanelToLauncher, clampToViewport, createSponsorRelayController, readStoredPosition, resolveCornerPlacement, writeStoredPosition, formatDateTime, formatNumber, formatTierSpecLabel, joinMappedPorts, joinRequiredPortForwards, shortHash } from '../shared/index'
+  import { UI_PACKAGE_VERSION, anchorPanelToLauncher, clampToViewport, createSponsorRelayController, readStoredPosition, resolveCornerPlacement, writeStoredPosition, formatDateTime, formatNumber, formatTierSpecLabel, joinMappedPorts, joinRequiredPortForwards, formatCrnOptionLabel, shortHash } from '../shared/index'
   import AccordionSection from './components/AccordionSection.svelte'
   import CopyButton from './components/CopyButton.svelte'
   import LauncherButton from './components/LauncherButton.svelte'
@@ -21,6 +21,8 @@ export let apiHost = undefined
 export let apiHosts = undefined
   export let crnListUrl = undefined
   export let crnSource = undefined
+  export let confidential = undefined
+  export let confidentialStart = undefined
   export let schedulerApiHost = undefined
   export let twoN6ApiHost = undefined
   export let position = 'bottom-right'
@@ -40,6 +42,8 @@ export let apiHosts = undefined
   apiHosts,
     crnListUrl,
     crnSource,
+    confidential,
+    confidentialStart,
     schedulerApiHost,
     twoN6ApiHost
   })
@@ -404,6 +408,33 @@ export let apiHosts = undefined
       </div>
       <div class="metric-card">
         <span>CRN</span>
+        <label class="confidential-toggle">
+          <input
+            type="checkbox"
+            aria-label="Confidential VM"
+            checked={state.confidential}
+            disabled={state.busy.refreshing || state.busy.deploying}
+            on:change={(event) => controller.setConfidential(event.currentTarget.checked)}
+          />
+          Confidential VM (AMD SEV-SNP)
+        </label>
+        {#if state.confidential}
+          {#if state.confidentialStartAvailable}
+            <input
+              class="crn-select"
+              type="password"
+              autocomplete="off"
+              aria-label="Rootfs passphrase"
+              placeholder="Passphrase of the encrypted rootfs"
+              value={state.confidentialPassphrase}
+              disabled={state.busy.deploying}
+              on:input={(event) => controller.setConfidentialPassphrase(event.currentTarget.value)}
+            />
+            <small>Sent only to the attested VM, after your wallet signs the unlock.</small>
+          {:else}
+            <small>This site has not set up confidential starts.</small>
+          {/if}
+        {/if}
         <select
           class="crn-select"
           aria-label="Select CRN"
@@ -413,7 +444,7 @@ export let apiHosts = undefined
           <option value="">Auto ({state.crnOptions[0]?.name ?? 'best score'})</option>
           {#each state.crnOptions as option (option.hash)}
             <option value={option.hash}>
-              {option.name ?? option.hash.slice(0, 8)}{option.score != null ? ` · ${option.score.toFixed(2)}` : ''}
+              {formatCrnOptionLabel(option, state.confidential)}
             </option>
           {/each}
         </select>