M4

src/components/ActionPanel.svelte

@@ -60,6 +60,8 @@
         return { label: s?.installed ? "Updating" : "Installing", tone: "accent", pulse: true, meta: stage };
       case "restoring":
         return { label: "Restoring database", tone: "accent", pulse: true, meta: stage };
+      case "syncing":
+        return { label: "Syncing with the DHP", tone: "accent", pulse: true, meta: version(s?.installed) };
       case "update":
         return { label: "Update required", tone: "warn", pulse: false, meta: `${s?.installed} → ${s?.available}` };
       case "launch":
@@ -165,6 +167,21 @@
         Offline: ODIAN <strong>{s?.installed}</strong> runs on local data and map tiles.
       {/if}
     </p>
+    {#if launcher.syncAttention > 0}
+      <p class="secondary attention">
+        <Icon name="alert" size={14} />
+        <span>
+          <strong>{launcher.syncAttention}</strong>
+          {launcher.syncAttention === 1 ? "change needs" : "changes need"} your decision.
+          <button class="btn-link" disabled={blocked} onclick={() => launcher.openSync()}>Review</button>
+        </span>
+      </p>
+    {:else if s?.online || s?.sync}
+      <p class="secondary small">
+        Operator data syncs with {site} before every launch.
+        <button class="btn-link" disabled={blocked} onclick={() => launcher.openSync()}>Sync</button>
+      </p>
+    {/if}
   {:else if action === "installing"}
     <div class="progress">
       <div class="stage-line">
@@ -211,6 +228,14 @@
       {#if p?.stage === "restore" && p.message}<p class="message mono" title={p.message}>{p.message}</p>{/if}
     </div>
     <p class="secondary">This can take a few minutes. Keep the launcher open until it finishes.</p>
+  {:else if action === "syncing"}
+    <div class="progress">
+      <div class="stage-line">
+        <span class="stage-name">Exchanging operator data</span>
+      </div>
+      <ProgressBar value={null} label="Syncing with the DHP" />
+    </div>
+    <p class="secondary">Sending this PC's changes to {site} and taking in the other operators' work.</p>
   {:else if action === "stack"}
     <StackList stack={launcher.stack} phase={s?.phase ?? "launching"} />
     <button class="btn btn-danger wide" disabled={launcher.stopping || busy !== null} onclick={() => launcher.stop()}>
@@ -371,6 +396,16 @@
   .secondary.small {
     font-size: var(--text-xs);
   }
+  .attention {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    color: var(--ink-2);
+  }
+  .attention :global(.icon) {
+    margin-top: 3px;
+    color: var(--warn);
+  }
   .secondary strong {
     color: var(--ink-2);
     font-weight: 500;