v8.1 / 0.8.1: компактный рабочий экран и управляемый первый запуск

.github/workflows/altair-v5-ui-check.yml

@@ -27,6 +27,7 @@ jobs:
           node --check js/charts.js
           node --check js/v8.js
           node --check js/v8-final.js
+          node --check js/v8.1-ui.js
           node --check js/help.js
           node --check js/flasher-v5.js
           node --check js/serial.js
@@ -36,17 +37,15 @@ jobs:
           node - <<'NODE'
           const fs = require('fs');
           const pkg = JSON.parse(fs.readFileSync('package.json', 'utf8'));
-          if (pkg.version !== '0.8.0') throw new Error(`Expected 0.8.0, got ${pkg.version}`);
+          if (pkg.version !== '0.8.1') throw new Error(`Expected 0.8.1, got ${pkg.version}`);
           if (pkg.build?.win?.icon !== 'assets/altair-logo.png') throw new Error('Altair Windows PNG icon source is not configured');
           if (pkg.author !== 'Антон Т.') throw new Error('Application author metadata is missing');
 
           const parser = fs.readFileSync('js/parser.js', 'utf8');
-          if (!parser.includes('checksumValidation: false')) {
-            throw new Error('Application checksum validation must be disabled in v8 parser');
-          }
+          if (!parser.includes('checksumValidation: false')) throw new Error('Application checksum validation must be disabled in v8 parser');
 
           const app = fs.readFileSync('js/app.js', 'utf8');
-          if (!app.includes('version: "0.8.0"')) throw new Error('app.js must identify v0.8.0');
+          if (!app.includes('Release v8')) throw new Error('app.js must identify v8');
           if (app.includes('applyV6BrandingAndRadioProfile')) throw new Error('Legacy v6 runtime override is still present');
 
           const charts = fs.readFileSync('js/charts.js', 'utf8');
@@ -55,8 +54,14 @@ jobs:
 
           const finalRuntime = fs.readFileSync('js/v8-final.js', 'utf8');
           if (!finalRuntime.includes('bandwidth: "203"')) throw new Error('v8 UI must enforce RX BW 203 kHz');
+          if (!finalRuntime.includes('v8.1-ui.js')) throw new Error('v8.1 layout runtime is not loaded');
+
+          const ui81 = fs.readFileSync('js/v8.1-ui.js', 'utf8');
+          for (const token of ['v81SetupFlow', 'v81IdRoster', 'firmwarePanel', 'rawSerialPanel', 'EXPECTED_IDS']) {
+            if (!ui81.includes(token)) throw new Error(`v8.1 UI feature missing: ${token}`);
+          }
 
-          console.log('Altair v8 JS/package checks OK');
+          console.log('Altair v8.1 JS/package checks OK');
           NODE
 
       - name: Validate v8 radio profile and release files
@@ -73,6 +78,7 @@ jobs:
           grep -Fq '435.000' js/v8.js
           grep -Fq 'rawSerialConsole' js/v8.js
           grep -Fq 'Сбросить принятые данные' js/v8.js
+          grep -Fq 'background: transparent' css/v8.css
           test -f docs/CUP_Altair_v8_Manual.tex
           test -f docs/RELEASE_V8.md
           test -f docs/media/mcc-technoprom.jpg

css/v8.css

@@ -1,16 +1,30 @@
-/* ЦУП Альтаир v8 */
+/* ЦУП Альтаир v8.1 */
 .altairLogo .logoMark.v8LogoMark {
-    width: 42px;
-    height: 42px;
+    width: 46px;
+    height: 46px;
     border: 0;
-    background: rgba(255,255,255,.96);
-    border-radius: 10px;
+    background: transparent;
+    border-radius: 0;
     display: grid;
     place-items: center;
-    overflow: hidden;
-    box-shadow: 0 0 24px rgba(44,108,255,.25);
+    overflow: visible;
+    box-shadow: none;
 }
-.altairLogo .logoMark.v8LogoMark img { width: 36px; height: 36px; object-fit: contain; }
+.altairLogo .logoMark.v8LogoMark img {
+    width: 44px;
+    height: 44px;
+    object-fit: contain;
+    background: transparent;
+}
+
+#topBar {
+    grid-template-columns: minmax(300px, 1.8fr) minmax(180px, .82fr) minmax(235px, 1fr) minmax(110px, .52fr) minmax(150px, .68fr) auto;
+    gap: 12px;
+    min-height: 70px;
+    padding-block: 10px;
+}
+#topBar .topActions { grid-row: 1; align-self: center; flex-wrap: nowrap; }
+.buildBadge { white-space: nowrap; }
 
 .v8FrequencyMetric #v8FrequencyValue {
     color: #73e8ff;
@@ -19,36 +33,136 @@
     white-space: nowrap;
 }
 
-.v8PanelToggle {
+.v8PanelToggle,
+.v81UtilityToggle {
     margin-left: auto;
-    min-width: 118px;
+    min-width: 106px;
     border: 1px solid rgba(79,180,255,.34);
     border-radius: 9px;
     background: rgba(8,29,52,.78);
     color: #a9dfff;
-    padding: 7px 10px;
+    padding: 6px 9px;
     cursor: pointer;
 }
-.v8PanelToggle:hover { border-color: rgba(79,180,255,.7); color: #e3f7ff; }
+.v8PanelToggle:hover,
+.v81UtilityToggle:hover { border-color: rgba(79,180,255,.7); color: #e3f7ff; }
 
 #serialPanel.v8-collapsed > :not(.panelTitleRow):not(.v8ConnectionSummary) { display: none !important; }
-.v8ConnectionSummary {
-    display: none;
-    gap: 8px;
-    flex-wrap: wrap;
-    margin-top: 8px;
-}
+#serialPanel.v8-collapsed { min-height: 0; padding-block: 9px; }
+#serialPanel.v8-collapsed .panelTitleRow { margin: 0; align-items: center; }
+#serialPanel.v8-collapsed .panelTitleRow h2 { margin: 1px 0 0; font-size: 15px; }
+#serialPanel.v8-collapsed .panelEyebrow { font-size: 9px; }
+.v8ConnectionSummary { display: none; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
 #serialPanel.v8-collapsed .v8ConnectionSummary { display: flex; }
 .v8ConnectionSummary span {
-    border: 1px solid rgba(77,116,157,.34);
-    border-radius: 999px;
-    padding: 6px 10px;
-    color: #9fb6cf;
-    background: rgba(4,17,31,.65);
-    font-size: .78rem;
+    border: 0;
+    border-radius: 0;
+    padding: 0 8px 0 0;
+    color: #8198b2;
+    background: transparent;
+    font-size: .72rem;
 }
 .v8ConnectionSummary strong { color: #d9f5ff; }
 
+#v81SetupFlow {
+    grid-column: span 12 !important;
+    padding: 12px 14px;
+    background: linear-gradient(90deg, rgba(0,217,255,.055), rgba(8,18,32,.82));
+}
+.v81SetupTitle { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 9px; }
+.v81SetupTitle strong { display:block; margin-top:2px; color:#eaf8ff; font-size:16px; }
+.v81SetupTitle > span { color:#6f91b1; font: 700 11px/1.2 Consolas,monospace; }
+.v81SetupSteps { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 10px; align-items: stretch; }
+.v81SetupStep {
+    min-width: 0;
+    display: grid;
+    grid-template-columns: 34px minmax(140px,1fr) auto auto;
+    align-items: center;
+    gap: 9px;
+    padding: 9px 10px;
+    border: 1px solid rgba(69,105,143,.42);
+    border-radius: 11px;
+    background: rgba(4,14,26,.72);
+}
+.v81SetupStep.ready { border-color: rgba(0,217,255,.42); }
+.v81SetupStep.done { border-color: rgba(58,219,143,.5); box-shadow: inset 0 0 0 1px rgba(58,219,143,.05); }
+.v81StepNo {
+    width: 28px;
+    height: 28px;
+    display:grid;
+    place-items:center;
+    border-radius:50%;
+    background:rgba(0,217,255,.12);
+    color:#7deaff;
+    font:800 12px Consolas,monospace;
+}
+.v81SetupStep.done .v81StepNo { background:rgba(58,219,143,.15); color:#75efb0; }
+.v81StepText { min-width:0; display:flex; flex-direction:column; gap:2px; }
+.v81StepText strong { color:#dff6ff; font-size:13px; }
+.v81StepText span { color:#8299b3; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+.v81SetupArrow { display:grid; place-items:center; color:#4e789d; font-size:20px; }
+.v81StepButton {
+    width:auto;
+    margin:0;
+    min-height:32px;
+    padding:6px 9px;
+    border-radius:8px;
+    border:1px solid rgba(65,103,142,.55);
+    background:#081a2c;
+    color:#a9bfd5;
+    cursor:pointer;
+    white-space:nowrap;
+}
+.v81StepButton.primary { border-color:rgba(0,217,255,.45); color:#b9f5ff; background:rgba(0,108,144,.18); }
+.v81StepButton:disabled { opacity:.38; cursor:not-allowed; }
+
+#telemetryPanel,
+#chartPanel { grid-column: span 12 !important; }
+#telemetryPanel .altairTelemetryGrid { grid-template-columns: repeat(5, minmax(0,1fr)); }
+#telemetryPanel .telemetryCard { min-height: 96px; }
+
+.v81ChartsLayout { display: grid; grid-template-columns: minmax(0,1fr) 238px; gap: 12px; align-items: stretch; }
+.v81ChartsLayout .altairChartGrid { grid-template-columns: repeat(2, minmax(0,1fr)); }
+.v81ChartsLayout .chartSummaryCard { grid-column: 1 / -1; }
+#v81IdRoster {
+    min-width: 0;
+    border: 1px solid rgba(58,94,132,.45);
+    border-radius: 12px;
+    background: rgba(4,13,24,.78);
+    padding: 11px;
+}
+.v81RosterHeader { display:flex; align-items:flex-end; justify-content:space-between; gap:8px; margin-bottom:7px; }
+.v81RosterHeader strong { display:block; color:#e4f6ff; font-size:14px; }
+#v81RosterCount { color:#73e8ff; font:800 12px Consolas,monospace; }
+#v81IdRoster > p { margin:0 0 9px; color:#7089a3; font-size:10px; line-height:1.4; }
+#v81IdRosterList { display:grid; gap:4px; }
+.v81RosterItem {
+    display:grid;
+    grid-template-columns: 9px 48px minmax(0,1fr) auto;
+    gap:7px;
+    align-items:center;
+    min-height:27px;
+    padding:4px 6px;
+    border-radius:7px;
+    background:rgba(10,24,40,.45);
+}
+.v81RosterDot { width:8px; height:8px; border-radius:50%; background:#43556a; box-shadow:none; }
+.v81RosterItem strong { color:#9fb2c6; font:700 11px Consolas,monospace; }
+.v81RosterStatus { color:#667d95; font-size:9px; font-weight:800; letter-spacing:.04em; }
+.v81RosterItem small { color:#657b91; font:9px Consolas,monospace; white-space:nowrap; }
+.v81RosterItem.seen strong { color:#d7e8f5; }
+.v81RosterItem.seen .v81RosterStatus { color:#9eb5ca; }
+.v81RosterItem.active { background:rgba(10,38,43,.62); }
+.v81RosterItem.active .v81RosterDot { box-shadow:0 0 8px currentColor; }
+.v81RosterItem.active .v81RosterStatus { color:#70e8a8; }
+
+#firmwarePanel,
+#serialPanel,
+#rawSerialPanel { grid-column: span 12 !important; }
+#firmwarePanel.v81-utility-collapsed > :not(.panelTitleRow) { display:none !important; }
+#firmwarePanel.v81-utility-collapsed { min-height:0; padding-block:9px; }
+#firmwarePanel.v81-utility-collapsed .panelTitleRow { margin:0; }
+
 .v8ResetButton {
     border: 1px solid rgba(255,170,70,.38);
     background: rgba(80,42,8,.22);
@@ -59,94 +173,60 @@
 }
 .v8ResetButton:hover { border-color: rgba(255,170,70,.75); }
 
-#rawSerialPanel .rawToolbar {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-    flex-wrap: wrap;
-    margin-bottom: 10px;
-}
+#rawSerialPanel .rawToolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
 #rawSerialConsole {
-    background: #020811;
-    border: 1px solid rgba(72,114,160,.35);
-    border-radius: 10px;
-    min-height: 180px;
-    max-height: 360px;
-    overflow: auto;
-    padding: 10px 12px;
-    color: #a7c8e8;
-    font: 12px/1.45 "Cascadia Mono","Consolas",monospace;
-    white-space: pre-wrap;
-    word-break: break-word;
-}
-#rawSerialConsole .rx { color: #9de9ff; }
-#rawSerialConsole .tx { color: #ffd479; }
-#rawSerialConsole .err { color: #ff8e9a; }
-#rawSerialConsole .info { color: #8cf0b4; }
-
-.v8CommandTarget {
-    display: grid;
-    grid-template-columns: minmax(100px, 180px) 1fr;
-    gap: 10px;
-    align-items: center;
-    margin: 0 0 14px;
-}
-.v8CommandTarget input {
-    width: 100%;
-    box-sizing: border-box;
-    background: rgba(4,17,31,.8);
-    color: #d9f5ff;
-    border: 1px solid rgba(77,116,157,.42);
-    border-radius: 8px;
-    padding: 9px 10px;
-}
-.v8ProtocolNote {
-    margin-top: 10px;
-    color: #8299b4;
-    font-size: .8rem;
-    line-height: 1.45;
+    background:#020811;
+    border:1px solid rgba(72,114,160,.35);
+    border-radius:10px;
+    min-height:180px;
+    max-height:360px;
+    overflow:auto;
+    padding:10px 12px;
+    color:#a7c8e8;
+    font:12px/1.45 "Cascadia Mono","Consolas",monospace;
+    white-space:pre-wrap;
+    word-break:break-word;
 }
-.v8ProtocolNote code { color: #bfeeff; }
+#rawSerialConsole .rx { color:#9de9ff; }
+#rawSerialConsole .tx { color:#ffd479; }
+#rawSerialConsole .err { color:#ff8e9a; }
+#rawSerialConsole .info { color:#8cf0b4; }
 
-.v8AboutButton { font-size: 14px !important; }
-#v8AboutDialog {
-    position: fixed;
-    inset: 0;
-    z-index: 9998;
-    display: none;
-    align-items: center;
-    justify-content: center;
-    background: rgba(0,6,14,.78);
-    backdrop-filter: blur(7px);
-    padding: 24px;
-}
-#v8AboutDialog.open { display: flex; }
-#v8AboutDialog .aboutCard {
-    width: min(680px, 94vw);
-    max-height: 88vh;
-    overflow: auto;
-    background: #071523;
-    border: 1px solid rgba(77,157,216,.45);
-    border-radius: 16px;
-    box-shadow: 0 22px 80px rgba(0,0,0,.55);
-    padding: 24px;
-}
+.v8CommandTarget { display:grid; grid-template-columns:minmax(100px,180px) 1fr; gap:10px; align-items:center; margin:0 0 14px; }
+.v8CommandTarget input { width:100%; box-sizing:border-box; background:rgba(4,17,31,.8); color:#d9f5ff; border:1px solid rgba(77,116,157,.42); border-radius:8px; padding:9px 10px; }
+.v8ProtocolNote { margin-top:10px; color:#8299b4; font-size:.8rem; line-height:1.45; }
+.v8ProtocolNote code { color:#bfeeff; }
+
+.v8AboutButton { font-size:14px !important; }
+#v8AboutDialog { position:fixed; inset:0; z-index:9998; display:none; align-items:center; justify-content:center; background:rgba(0,6,14,.78); backdrop-filter:blur(7px); padding:24px; }
+#v8AboutDialog.open { display:flex; }
+#v8AboutDialog .aboutCard { width:min(680px,94vw); max-height:88vh; overflow:auto; background:#071523; border:1px solid rgba(77,157,216,.45); border-radius:16px; box-shadow:0 22px 80px rgba(0,0,0,.55); padding:24px; }
 #v8AboutDialog .aboutHeader { display:flex; align-items:center; gap:14px; }
-#v8AboutDialog .aboutHeader img { width:56px; height:56px; background:#fff; border-radius:12px; padding:5px; }
+#v8AboutDialog .aboutHeader img { width:56px; height:56px; background:transparent; border-radius:0; padding:0; }
 #v8AboutDialog h2 { margin:0; color:#e8f8ff; }
 #v8AboutDialog p, #v8AboutDialog li { color:#a9bdcf; line-height:1.55; }
 #v8AboutDialog code { color:#7de7ff; }
-#v8AboutDialog .closeAbout {
-    float:right;
-    border:1px solid rgba(105,142,177,.4);
-    background:#0b2137;
-    color:#dceeff;
-    border-radius:8px;
-    padding:7px 10px;
-    cursor:pointer;
-}
+#v8AboutDialog .closeAbout { float:right; border:1px solid rgba(105,142,177,.4); background:#0b2137; color:#dceeff; border-radius:8px; padding:7px 10px; cursor:pointer; }
 
+@media (max-width: 1450px) {
+    #topBar { grid-template-columns:minmax(250px,1.55fr) minmax(170px,.85fr) minmax(210px,1fr) minmax(105px,.52fr) auto; }
+    .topMetric.connection { display:none; }
+    #telemetryPanel .altairTelemetryGrid { grid-template-columns:repeat(5,minmax(0,1fr)); }
+}
+@media (max-width: 1180px) {
+    #topBar { grid-template-columns:minmax(240px,1.5fr) minmax(205px,1fr) minmax(100px,.55fr) auto; }
+    .topMetric.mission { display:none; }
+    .v81SetupSteps { grid-template-columns:1fr; }
+    .v81SetupArrow { display:none; }
+    .v81SetupStep { grid-template-columns:34px minmax(130px,1fr) auto auto; }
+    #telemetryPanel .altairTelemetryGrid { grid-template-columns:repeat(3,minmax(0,1fr)); }
+    .v81ChartsLayout { grid-template-columns:1fr; }
+    #v81IdRosterList { grid-template-columns:repeat(2,minmax(0,1fr)); }
+}
 @media (max-width: 900px) {
-    .v8FrequencyMetric { display: none; }
-    .v8CommandTarget { grid-template-columns: 1fr; }
+    .v8FrequencyMetric { display:none; }
+    .v8CommandTarget { grid-template-columns:1fr; }
+    #telemetryPanel .altairTelemetryGrid { grid-template-columns:repeat(2,minmax(0,1fr)); }
+    .v81SetupStep { grid-template-columns:34px 1fr; }
+    .v81SetupStep .v81StepButton { grid-column:2; }
 }