it begins

ui/app/components/job-page/parts/job-status-panel.hbs

@@ -0,0 +1,32 @@
+<div class="job-status-panel boxed-section">
+  <div class="boxed-section-head">
+    <h2>Status</h2>
+    <div class="select-mode">
+      <button type="button"
+        class="button is-small is-borderless {{if (eq this.mode "current") "is-active"}}"
+        {{on "click" (action (mut this.mode) "current")}}
+      >
+        Current
+      </button>
+      <button type="button"
+        class="button is-small is-borderless {{if (eq this.mode "historical") "is-active"}}"
+        {{on "click" (action (mut this.mode) "historical")}}>
+        Historical
+      </button>
+    </div>
+  </div>
+  <div class="boxed-section-body">
+    {{#if (eq this.mode "current")}}
+      <h3 class="title is-4 running-allocs-title"><strong>{{@job.latestDeployment.placedAllocs}}/{{@job.latestDeployment.desiredTotal}}</strong> Allocations Running</h3>
+      <div class="alloc-representation">
+        {{#each (range 0 @job.latestDeployment.desiredTotal) as |alloc|}}
+          <span class="represented-allocation"></span>
+        {{/each}}
+      </div>
+    {{/if}}
+    {{#if (eq this.mode "historical")}}
+      But what about before?
+    {{/if}}
+    {{log @job}}
+  </div>
+</div>

ui/app/components/job-page/parts/job-status-panel.js

@@ -0,0 +1,11 @@
+// @ts-check
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+
+export default class JobPagePartsJobStatusPanelComponent extends Component {
+  /**
+   * @type {('current'|'historical')}
+   */
+  @tracked mode = "current" // can be either "current" or "historical"
+}

ui/app/styles/components.scss

@@ -53,3 +53,4 @@
 @import './components/authorization';
 @import './components/policies';
 @import './components/metadata-editor';
+@import './components/job-status-panel';

ui/app/styles/components/job-status-panel.scss

@@ -0,0 +1,45 @@
+.job-status-panel {
+  .select-mode {
+    border: 1px solid $grey-blue;
+    background: rgba(0,0,0,0.05);
+    border-radius: 2px;
+    display: grid;
+    gap: 0.5rem;
+    grid-template-columns: 1fr 1fr;
+    padding: 0.25rem 0.5rem;
+    margin-left: 1rem;
+
+    button {
+      height: auto;
+      padding: 0 0.5rem;
+      background: transparent;
+      transition: 0.1s;
+
+      &:hover {
+        background: rgba(255,255,255,0.5);
+      }
+
+      &.is-active {
+        background: $white;
+      }
+    }
+  }
+
+  .running-allocs-title {
+    strong {
+      font-weight: 800;
+    }
+  }
+
+  .alloc-representation {
+    display: grid;
+    gap: 0.5rem;
+    grid-template-columns: repeat( auto-fit, minmax(auto, 20px) );
+    .represented-allocation {
+      background: $green;
+      width: 20px;
+      height: 20px;
+      border-radius: 4px;
+    }
+  }
+}

ui/app/templates/components/job-page.hbs

@@ -28,6 +28,11 @@
         "job-page/parts/job-client-status-summary" job=@job
       )
       Children=(component "job-page/parts/children" job=@job)
+
+      StatusPanel=(component
+        "job-page/parts/job-status-panel" job=@job
+      )
+
     )
   )
 }}

ui/app/templates/components/job-page/service.hbs

@@ -4,6 +4,7 @@
     <jobPage.ui.Title />
     <jobPage.ui.StatsBox />
     <jobPage.ui.DasRecommendations />
+    <jobPage.ui.StatusPanel />
     <jobPage.ui.Summary />
     <jobPage.ui.PlacementFailures />
     <jobPage.ui.LatestDeployment />