feat: add miner detail view

backend/app/frontend/miner_detail_view.py

@@ -0,0 +1,76 @@
+"""Semantic HTML for the Internal Alpha Miner Detail page."""
+
+
+def miner_detail_content() -> str:
+    return """
+<div class="state-message" id="minerDetailLoading" role="status">
+    <strong>Loading miner</strong>
+    <span>Requesting current identity and operational context.</span>
+</div>
+<div class="state-message" id="minerDetailError" data-kind="error" role="alert" hidden>
+    <strong>Miner detail unavailable</strong>
+    <span id="minerDetailErrorText">The miner could not be loaded.</span>
+    <button class="command-button" id="minerDetailRetry" type="button">Retry</button>
+</div>
+<div id="minerDetailContent" hidden>
+    <section class="miner-detail-hero" aria-labelledby="minerIdentityTitle">
+        <div>
+            <p class="eyebrow">Durable miner identity</p>
+            <h2 id="minerIdentityTitle">Miner</h2>
+            <p id="minerDetailModel" class="panel-copy">Model unavailable</p>
+            <p id="minerDetailUuid" class="miner-detail-uuid"></p>
+        </div>
+        <div class="miner-detail-state">
+            <strong id="minerDetailOperational">Operational state unknown</strong>
+            <span id="minerDetailLifecycle">Lifecycle unavailable</span>
+            <span id="minerDetailLocationSummary">Location unavailable</span>
+        </div>
+        <nav class="miner-detail-actions" aria-label="Miner destinations">
+            <a class="quiet-link" id="minerDetailReturn" href="/assets/miners" hidden>Return</a>
+            <a class="quiet-link" href="/assets/miners">Back to Fleet</a>
+            <a class="quiet-link" id="minerDetailMap" href="/monitoring/map" hidden>View on Mine Map</a>
+            <a class="quiet-link" id="minerDetailRepairs" href="/operations/repairs" hidden>Open filtered Repair Center</a>
+            <button class="quiet-button" id="minerDetailRefresh" type="button">Refresh</button>
+        </nav>
+    </section>
+    <div class="miner-detail-grid">
+        <section class="panel" aria-labelledby="minerIdentitySectionTitle">
+            <div class="panel-head"><div><p class="eyebrow">Asset record</p>
+                <h2 id="minerIdentitySectionTitle">Identity</h2></div></div>
+            <dl class="definition-list" id="minerIdentityDetails"></dl>
+            <div id="minerTags" class="tag-list" aria-label="Miner tags"></div>
+        </section>
+        <section class="panel" aria-labelledby="minerCurrentStateTitle">
+            <div class="panel-head"><div><p class="eyebrow">Latest facts</p>
+                <h2 id="minerCurrentStateTitle">Current state</h2></div>
+                <span class="freshness" id="minerTelemetryAge">No observation</span></div>
+            <dl class="metric-grid" id="minerTelemetryDetails"></dl>
+        </section>
+    </div>
+    <section class="panel" id="minerLocationSection" aria-labelledby="minerLocationTitle">
+        <div class="panel-head"><div><p class="eyebrow">Physical context</p>
+            <h2 id="minerLocationTitle">Location</h2></div></div>
+        <div id="minerLocationBody"></div>
+    </section>
+    <section class="panel" id="minerRepairSection" aria-labelledby="minerRepairTitle">
+        <div class="panel-head"><div><p class="eyebrow">Work context</p>
+            <h2 id="minerRepairTitle">Repair context</h2></div></div>
+        <div id="minerRepairBody"></div>
+        <div id="minerRepairEpisodes" class="disclosure-list"></div>
+    </section>
+    <section class="panel" aria-labelledby="minerHistoryTitle">
+        <div class="panel-head"><div><p class="eyebrow">Recorded facts</p>
+            <h2 id="minerHistoryTitle">History</h2></div></div>
+        <div class="disclosure-list">
+            <details id="minerIdentityHistory">
+                <summary>Identity history</summary>
+                <div class="lazy-content" id="minerIdentityHistoryBody" aria-live="polite">Open to load Asset ID and network identity history.</div>
+            </details>
+            <details id="minerObservations">
+                <summary>Recent observations</summary>
+                <div class="lazy-content" id="minerObservationsBody" aria-live="polite">Open to load up to 100 recent factual observations.</div>
+            </details>
+        </div>
+    </section>
+</div>
+"""