From f3c16f894bc4986881dffbcc2987b3aaf87b2409 Mon Sep 17 00:00:00 2001
From: Artur Shiriev <lesnik512@gmail.com>
Date: Wed, 14 Oct 2026 13:33:40 +0300
Subject: [PATCH 1/3] Mark fully deployed services and move Release into a
 tabbed side column

---
 README.md                        |  8 ++--
 release_scope/_static/index.html | 63 ++++++++++++++++++++------------
 2 files changed, 45 insertions(+), 26 deletions(-)

diff --git a/README.md b/README.md
index 9941565..e759bb0 100644
--- a/README.md
+++ b/README.md
@@ -129,7 +129,8 @@ as one line: what production runs, the picked tag, how many merge requests or co
 failed jobs of the picked tag, or of the newest tag before a pick, with the ones allowed to fail counted apart, a mark
 when the range was cut at `RELEASE_SCOPE_MAX_COMMITS`, and how many rows have no tag yet, with a `+` when the cut
 range holds no tag, so more untagged rows may lie below it. The failed jobs are those of the tag's pipeline and of
-the main pipeline of its commit; failures in other rows show only when the line is opened.
+the main pipeline of its commit; failures in other rows show only when the line is opened. A service whose
+production runs the head of the default branch, with no rows left to ship, is marked green as fully deployed.
 Opening a line shows the service's environments with when each was deployed, warnings, a link to create the next tag
 on the head when rows have no tag yet, merge requests that are not merged yet, and its rows with tags and their
 pipelines, merge requests or commits with when they were merged or committed, Jira keys with their status,
@@ -144,8 +145,9 @@ them. An address with picks replaces the release tags of a `--jira` report; pick
 a tag that a later run no longer lists, are skipped with a warning. Clearing every pick empties the address, so a
 reload starts from the release tags again.
 
-**Release** at the bottom turns the picked tags into three lists and a release post, each with a copy button and a
-text box to copy from by hand, since browsers allow the copy button only over HTTPS:
+**Release**, in a column next to the services that stays in view while they scroll, or below them on a narrow screen,
+turns the picked tags into three lists and a release post. Each has a tab of its own, with a copy button and a text box
+to copy from by hand, since browsers allow the copy button only over HTTPS:
 
 - **Jira tasks**: the keys of every in-scope row from each picked tag down to production, without duplicates, with
   summary and a status badge: grey to do, blue in progress, green done. Copy them one per line or as a JQL
diff --git a/release_scope/_static/index.html b/release_scope/_static/index.html
index dfd7bcb..b874b2b 100644
--- a/release_scope/_static/index.html
+++ b/release_scope/_static/index.html
@@ -33,10 +33,9 @@
   [x-cloak] { display: none !important; }
   * { box-sizing: border-box; }
   body { margin: 0; background: var(--bg); color: var(--fg); font: 14px/1.5 system-ui, sans-serif; }
-  main { max-width: 1200px; margin: 0 auto; padding: 16px; }
+  main { max-width: 1680px; margin: 0 auto; padding: 16px; }
   h1 { font-size: 24px; margin: 0 0 4px; }
   h2 { font-size: 18px; margin: 32px 0 8px; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
-  h3 { font-size: 15px; margin: 0 0 8px; }
   a { color: var(--accent); text-decoration: none; }
   a:hover { text-decoration: underline; }
   code { font: 12px ui-monospace, monospace; }
@@ -57,9 +56,15 @@
   .warn { color: var(--warn); }
   .message { white-space: pre-line; }
   .scroll { overflow-x: auto; }
-  .outputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; margin-top: 16px; }
-  .outputs .wide { grid-column: 1 / -1; }
-  .out-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
+  .layout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 24px; align-items: start; }
+  .layout > aside { position: sticky; top: 0; max-height: 100vh; overflow-y: auto; padding: 0 4px 16px; }
+  @media (max-width: 1000px) {
+    .layout { display: block; }
+    .layout > aside { position: static; max-height: none; }
+  }
+  .tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
+  .outputs textarea { min-height: 160px; }
+  .out-head { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
   tr.out-of-scope td { opacity: 0.55; }
   tr.shipped td { background: color-mix(in srgb, var(--accent) 12%, transparent); }
   .tag { white-space: nowrap; }
@@ -67,6 +72,8 @@
   .service > summary { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 8px 12px; cursor: pointer;
     list-style: none; }
   .service[open] > summary { border-bottom: 1px solid var(--border); }
+  .service.deployed { border-left: 4px solid var(--good); background: color-mix(in srgb, var(--good) 6%, transparent); }
+  .service.deployed .name { color: var(--good); }
   .service > summary::before { content: "▸"; color: var(--muted); }
   .service[open] > summary::before { content: "▾"; }
   .service .name { min-width: 200px; font-weight: 600; }
@@ -119,11 +126,13 @@ <h1 x-text="report.jira_scope.length ? t('titleIssues', { keys: report.jira_scop
         <p class="bad message"><template x-for="(part, index) in messageParts(item)" :key="index"><span><template x-if="part.url"><a :href="part.url" x-text="part.text"></a></template><template x-if="!part.url"><span x-text="part.text"></span></template></span></template></p>
       </template>
 
+      <div class="layout">
+      <section>
       <h2 x-text="t('services')"></h2>
       <p x-show="pickable.length" class="muted" x-text="t('servicesIntro')"></p>
       <p x-show="ignored.length" class="warn" x-text="t('ignored', { picks: ignored.join(', ') })"></p>
       <template x-for="service in listed" :key="service.project">
-        <details class="service" name="services">
+        <details class="service" :class="{ deployed: deployed(service) }" name="services">
           <summary>
             <span class="name" x-text="service.project"></span>
             <span x-show="service.error" class="bad" x-text="t('failedToCollect')"></span>
@@ -131,6 +140,7 @@ <h2 x-text="t('services')"></h2>
               <span class="muted" x-text="productionRef(service) + ' →'"></span>
               <span x-show="pickOf(service)" class="picked-tag" x-text="picks[service.project]"></span>
               <span x-show="!pickOf(service)" class="muted" x-text="pickHint(service)"></span>
+              <span x-show="deployed(service)" class="status status-done" x-text="t('upToDate')"></span>
               <span x-show="service.untagged" class="warn" x-text="untaggedText(service, 'untagged', 'untaggedAtLeast')"></span>
             </span>
             <span class="muted" x-text="lineDetails(service)"></span>
@@ -238,20 +248,25 @@ <h2 x-text="t('services')"></h2>
           </div>
         </details>
       </template>
+      </section>
 
+      <aside>
       <h2 x-text="t('release')"></h2>
       <p x-show="!pickable.length" class="muted" x-text="t('noCandidates')"></p>
       <p x-show="pickable.length && !picked.length" class="muted" x-text="t('pickToFill')"></p>
       <p x-show="copyFailed" class="warn" x-text="t('copyFailed')"></p>
 
       <div class="outputs" x-show="picked.length">
-        <section>
+        <div class="tabs">
+          <button type="button" :class="{ picked: tab === 'tasks' }" @click="tab = 'tasks'" x-text="t('tasks', { count: tasks.length })"></button>
+          <button type="button" :class="{ picked: tab === 'pipelines' }" @click="tab = 'pipelines'" x-text="t('tagPipelines')"></button>
+          <button type="button" :class="{ picked: tab === 'compare' }" @click="tab = 'compare'" x-text="t('compare')"></button>
+          <button type="button" :class="{ picked: tab === 'post' }" @click="tab = 'post'" x-text="t('releasePost')"></button>
+        </div>
+        <section x-show="tab === 'tasks'">
           <div class="out-head">
-            <h3 x-text="t('tasks', { count: tasks.length })"></h3>
-            <span>
-              <button type="button" @click="copy(taskKeys)" x-text="t('copyKeys')"></button>
-              <button type="button" @click="copy(taskJql)" x-text="t('copyJql')"></button>
-            </span>
+            <button type="button" @click="copy(taskKeys)" x-text="t('copyKeys')"></button>
+            <button type="button" @click="copy(taskJql)" x-text="t('copyJql')"></button>
           </div>
           <ul>
             <template x-for="task in tasks" :key="task.key">
@@ -266,9 +281,8 @@ <h3 x-text="t('tasks', { count: tasks.length })"></h3>
           <textarea readonly x-text="taskKeys"></textarea>
           <textarea readonly x-text="taskJql"></textarea>
         </section>
-        <section>
+        <section x-show="tab === 'pipelines'">
           <div class="out-head">
-            <h3 x-text="t('tagPipelines')"></h3>
             <button type="button" @click="copy(pipelinesMarkdown)" x-text="t('copy')"></button>
           </div>
           <ul>
@@ -285,9 +299,8 @@ <h3 x-text="t('tagPipelines')"></h3>
           </ul>
           <textarea readonly x-text="pipelinesMarkdown"></textarea>
         </section>
-        <section>
+        <section x-show="tab === 'compare'">
           <div class="out-head">
-            <h3 x-text="t('compare')"></h3>
             <button type="button" @click="copy(compareMarkdown)" x-text="t('copy')"></button>
           </div>
           <ul>
@@ -300,14 +313,15 @@ <h3 x-text="t('compare')"></h3>
           </ul>
           <textarea readonly x-text="compareMarkdown"></textarea>
         </section>
-        <section class="wide">
+        <section x-show="tab === 'post'">
           <div class="out-head">
-            <h3 x-text="t('releasePost')"></h3>
             <button type="button" @click="copy(releasePost)" x-text="t('copy')"></button>
           </div>
-          <textarea readonly rows="12" x-text="releasePost"></textarea>
+          <textarea readonly rows="16" x-text="releasePost"></textarea>
         </section>
       </div>
+      </aside>
+      </div>
 
       <p class="muted" x-text="t('legend')"></p>
     </div>
@@ -353,7 +367,7 @@ <h3 x-text="t('releasePost')"></h3>
       },
       createTag: "Create tag {name}",
       createAnyTag: "Create a tag",
-      upToDate: "up to date",
+      upToDate: "✓ fully deployed",
       rows: { one: "{count} merge request or commit", other: "{count} merge requests or commits" },
       rowsOf: { one: "{count} merge request or commit", other: "{count} merge requests or commits" },
       taskCount: { one: "{count} task", other: "{count} tasks" },
@@ -429,7 +443,7 @@ <h3 x-text="t('releasePost')"></h3>
       },
       createTag: "Создать тег {name}",
       createAnyTag: "Создать тег",
-      upToDate: "всё на проде",
+      upToDate: "✓ всё на проде",
       rows: { one: "{count} MR или коммит", few: "{count} MR или коммита", many: "{count} MR или коммитов" },
       rowsOf: { one: "{count} MR или коммита", few: "{count} MR или коммитов", many: "{count} MR или коммитов" },
       taskCount: { one: "{count} задача", few: "{count} задачи", many: "{count} задач" },
@@ -539,6 +553,7 @@ <h3 x-text="t('releasePost')"></h3>
       copyFailed: false,
       ignored: [],
       picks: {},
+      tab: "tasks",
       lang: "en",
       theme: "auto",
 
@@ -704,8 +719,10 @@ <h3 x-text="t('releasePost')"></h3>
         return service.candidates.find((item) => item.tag.name === this.picks[service.project]);
       },
       pickHint(service) {
-        if (service.candidates.length) return this.t("pickTag");
-        return service.rows.length ? "" : this.t("upToDate");
+        return service.candidates.length ? this.t("pickTag") : "";
+      },
+      deployed(service) {
+        return Boolean(!service.error && this.production(service) && !service.rows.length);
       },
       lineDetails(service) {
         const candidate = this.pickOf(service);

From 94e8f8073c4cc3f826c11fa339b965eee9f27f1c Mon Sep 17 00:00:00 2001
From: Artur Shiriev <lesnik512@gmail.com>
Date: Wed, 14 Oct 2026 13:34:38 +0300
Subject: [PATCH 2/3] Mark services with a picked tag and clear the pick from
 the line

---
 README.md                        | 3 ++-
 release_scope/_static/index.html | 8 ++++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index e759bb0..c2da50e 100644
--- a/README.md
+++ b/README.md
@@ -136,7 +136,8 @@ on the head when rows have no tag yet, merge requests that are not merged yet, a
 pipelines, merge requests or commits with when they were merged or committed, Jira keys with their status,
 environments with the time each first ran the row, and failed jobs; rows out of scope are dimmed.
 Links, including the GitLab settings pages that warnings and errors point to, open in a new
-tab. Each tag has a **pick** button: picking it highlights the rows it ships and closes the line again. A `--jira`
+tab. Each tag has a **pick** button: picking it highlights the rows it ships, marks the service's line blue, and
+closes the line again. The `×` next to the picked tag on the line clears the pick without opening it. A `--jira`
 report starts with each service's release tag picked. Services with neither a production deployment nor rows are left
 out of the page.
 
diff --git a/release_scope/_static/index.html b/release_scope/_static/index.html
index b874b2b..0de0b43 100644
--- a/release_scope/_static/index.html
+++ b/release_scope/_static/index.html
@@ -74,6 +74,9 @@
   .service[open] > summary { border-bottom: 1px solid var(--border); }
   .service.deployed { border-left: 4px solid var(--good); background: color-mix(in srgb, var(--good) 6%, transparent); }
   .service.deployed .name { color: var(--good); }
+  .service.chosen { border-left: 4px solid var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
+  .service.chosen .name { color: var(--accent); }
+  button.unpick { padding: 0 6px; margin-left: 2px; line-height: 1.2; }
   .service > summary::before { content: "▸"; color: var(--muted); }
   .service[open] > summary::before { content: "▾"; }
   .service .name { min-width: 200px; font-weight: 600; }
@@ -132,13 +135,14 @@ <h2 x-text="t('services')"></h2>
       <p x-show="pickable.length" class="muted" x-text="t('servicesIntro')"></p>
       <p x-show="ignored.length" class="warn" x-text="t('ignored', { picks: ignored.join(', ') })"></p>
       <template x-for="service in listed" :key="service.project">
-        <details class="service" :class="{ deployed: deployed(service) }" name="services">
+        <details class="service" :class="{ deployed: deployed(service), chosen: pickOf(service) }" name="services">
           <summary>
             <span class="name" x-text="service.project"></span>
             <span x-show="service.error" class="bad" x-text="t('failedToCollect')"></span>
             <span x-show="!service.error">
               <span class="muted" x-text="productionRef(service) + ' →'"></span>
-              <span x-show="pickOf(service)" class="picked-tag" x-text="picks[service.project]"></span>
+              <span x-show="pickOf(service)" class="picked-tag"><span x-text="picks[service.project]"></span><button type="button" class="unpick"
+                :title="t('clearPick')" :aria-label="t('clearPick')" @click.prevent="pick(service, '', $el)">×</button></span>
               <span x-show="!pickOf(service)" class="muted" x-text="pickHint(service)"></span>
               <span x-show="deployed(service)" class="status status-done" x-text="t('upToDate')"></span>
               <span x-show="service.untagged" class="warn" x-text="untaggedText(service, 'untagged', 'untaggedAtLeast')"></span>

From af9c20df583fbb18bb2db4d7b74787def988269b Mon Sep 17 00:00:00 2001
From: Artur Shiriev <lesnik512@gmail.com>
Date: Wed, 14 Oct 2026 13:49:36 +0300
Subject: [PATCH 3/3] Show the picked tag as a chip and fold the Release column
 while a service is open

---
 README.md                        |  9 +++++----
 release_scope/_static/index.html | 32 +++++++++++++++++++++++++-------
 2 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index c2da50e..901440a 100644
--- a/README.md
+++ b/README.md
@@ -136,9 +136,9 @@ on the head when rows have no tag yet, merge requests that are not merged yet, a
 pipelines, merge requests or commits with when they were merged or committed, Jira keys with their status,
 environments with the time each first ran the row, and failed jobs; rows out of scope are dimmed.
 Links, including the GitLab settings pages that warnings and errors point to, open in a new
-tab. Each tag has a **pick** button: picking it highlights the rows it ships, marks the service's line blue, and
-closes the line again. The `×` next to the picked tag on the line clears the pick without opening it. A `--jira`
-report starts with each service's release tag picked. Services with neither a production deployment nor rows are left
+tab. Each tag has a **pick** button: picking it highlights the rows it ships and closes the line again, which then
+shows the picked tag as a blue chip. The chip's `×` clears the pick without opening the line. A `--jira` report starts
+with each service's release tag picked. Services with neither a production deployment nor rows are left
 out of the page.
 
 The address keeps the picks after `#`, as `team/api=2.4.0&team/web=5.12.0`, so sharing or reloading the page keeps
@@ -147,7 +147,8 @@ a tag that a later run no longer lists, are skipped with a warning. Clearing eve
 reload starts from the release tags again.
 
 **Release**, in a column next to the services that stays in view while they scroll, or below them on a narrow screen,
-turns the picked tags into three lists and a release post. Each has a tab of its own, with a copy button and a text box
+turns the picked tags into three lists and a release post. While a service is open, the column folds into a strip
+with the number of picked tags and tasks, so the rows get the full width; clicking the strip closes the service. Each has a tab of its own, with a copy button and a text box
 to copy from by hand, since browsers allow the copy button only over HTTPS:
 
 - **Jira tasks**: the keys of every in-scope row from each picked tag down to production, without duplicates, with
diff --git a/release_scope/_static/index.html b/release_scope/_static/index.html
index 0de0b43..60649d4 100644
--- a/release_scope/_static/index.html
+++ b/release_scope/_static/index.html
@@ -58,9 +58,16 @@
   .scroll { overflow-x: auto; }
   .layout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 24px; align-items: start; }
   .layout > aside { position: sticky; top: 0; max-height: 100vh; overflow-y: auto; padding: 0 4px 16px; }
+  .strip { display: none; writing-mode: vertical-rl; width: 40px; min-height: 240px; margin-top: 32px; padding: 12px 4px;
+    border-color: var(--accent); color: var(--accent); font-weight: 600; }
+  .layout.folded { grid-template-columns: minmax(0, 1fr) 44px; gap: 12px; }
+  .layout.folded .strip { display: block; }
+  .layout.folded .aside-body { display: none; }
   @media (max-width: 1000px) {
     .layout { display: block; }
     .layout > aside { position: static; max-height: none; }
+    .layout.folded .strip { display: none; }
+    .layout.folded .aside-body { display: block; }
   }
   .tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
   .outputs textarea { min-height: 160px; }
@@ -74,15 +81,15 @@
   .service[open] > summary { border-bottom: 1px solid var(--border); }
   .service.deployed { border-left: 4px solid var(--good); background: color-mix(in srgb, var(--good) 6%, transparent); }
   .service.deployed .name { color: var(--good); }
-  .service.chosen { border-left: 4px solid var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
-  .service.chosen .name { color: var(--accent); }
-  button.unpick { padding: 0 6px; margin-left: 2px; line-height: 1.2; }
+  .chip { display: inline-flex; align-items: center; gap: 4px; padding: 0 4px 0 10px; border-radius: 999px;
+    background: var(--accent); color: var(--bg); font-weight: 600; }
+  .chip button { border: 0; border-radius: 999px; padding: 0 6px; background: transparent; color: inherit; }
+  .chip button:hover { background: color-mix(in srgb, var(--bg) 25%, transparent); }
   .service > summary::before { content: "▸"; color: var(--muted); }
   .service[open] > summary::before { content: "▾"; }
   .service .name { min-width: 200px; font-weight: 600; }
   .service .body { padding: 8px 12px; }
   .service .body > p:first-child { margin-top: 0; }
-  .picked-tag { font-weight: 600; }
   .status { display: inline-block; padding: 0 8px; border: 1px solid currentColor; border-radius: 10px; font-size: 12px;
     font-weight: 600; white-space: nowrap; color: var(--muted); }
   .status-indeterminate { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
@@ -129,19 +136,20 @@ <h1 x-text="report.jira_scope.length ? t('titleIssues', { keys: report.jira_scop
         <p class="bad message"><template x-for="(part, index) in messageParts(item)" :key="index"><span><template x-if="part.url"><a :href="part.url" x-text="part.text"></a></template><template x-if="!part.url"><span x-text="part.text"></span></template></span></template></p>
       </template>
 
-      <div class="layout">
+      <div class="layout" :class="{ folded: openCount > 0 }">
       <section>
       <h2 x-text="t('services')"></h2>
       <p x-show="pickable.length" class="muted" x-text="t('servicesIntro')"></p>
       <p x-show="ignored.length" class="warn" x-text="t('ignored', { picks: ignored.join(', ') })"></p>
       <template x-for="service in listed" :key="service.project">
-        <details class="service" :class="{ deployed: deployed(service), chosen: pickOf(service) }" name="services">
+        <details class="service" :class="{ deployed: deployed(service) }" name="services"
+          @toggle="openCount = document.querySelectorAll('details.service[open]').length">
           <summary>
             <span class="name" x-text="service.project"></span>
             <span x-show="service.error" class="bad" x-text="t('failedToCollect')"></span>
             <span x-show="!service.error">
               <span class="muted" x-text="productionRef(service) + ' →'"></span>
-              <span x-show="pickOf(service)" class="picked-tag"><span x-text="picks[service.project]"></span><button type="button" class="unpick"
+              <span x-show="pickOf(service)" class="chip"><span x-text="picks[service.project]"></span><button type="button"
                 :title="t('clearPick')" :aria-label="t('clearPick')" @click.prevent="pick(service, '', $el)">×</button></span>
               <span x-show="!pickOf(service)" class="muted" x-text="pickHint(service)"></span>
               <span x-show="deployed(service)" class="status status-done" x-text="t('upToDate')"></span>
@@ -255,6 +263,9 @@ <h2 x-text="t('services')"></h2>
       </section>
 
       <aside>
+      <button type="button" class="strip" @click="closeServices()"
+        x-text="[t('release'), t('tagCount', { count: picked.length }), t('taskCount', { count: tasks.length })].join(' · ')"></button>
+      <div class="aside-body">
       <h2 x-text="t('release')"></h2>
       <p x-show="!pickable.length" class="muted" x-text="t('noCandidates')"></p>
       <p x-show="pickable.length && !picked.length" class="muted" x-text="t('pickToFill')"></p>
@@ -324,6 +335,7 @@ <h2 x-text="t('release')"></h2>
           <textarea readonly rows="16" x-text="releasePost"></textarea>
         </section>
       </div>
+      </div>
       </aside>
       </div>
 
@@ -375,6 +387,7 @@ <h2 x-text="t('release')"></h2>
       rows: { one: "{count} merge request or commit", other: "{count} merge requests or commits" },
       rowsOf: { one: "{count} merge request or commit", other: "{count} merge requests or commits" },
       taskCount: { one: "{count} task", other: "{count} tasks" },
+      tagCount: { one: "{count} tag", other: "{count} tags" },
       shipsOf: "{shipped} of {rows}",
       failedCount: "❌ {count} failed",
       allowedCount: "{count} failed, allowed to fail",
@@ -451,6 +464,7 @@ <h2 x-text="t('release')"></h2>
       rows: { one: "{count} MR или коммит", few: "{count} MR или коммита", many: "{count} MR или коммитов" },
       rowsOf: { one: "{count} MR или коммита", few: "{count} MR или коммитов", many: "{count} MR или коммитов" },
       taskCount: { one: "{count} задача", few: "{count} задачи", many: "{count} задач" },
+      tagCount: { one: "{count} тег", few: "{count} тега", many: "{count} тегов" },
       shipsOf: "{shipped} из {rows}",
       failedCount: "❌ упало: {count}",
       allowedCount: "упало, но падать разрешено: {count}",
@@ -558,6 +572,7 @@ <h2 x-text="t('release')"></h2>
       ignored: [],
       picks: {},
       tab: "tasks",
+      openCount: 0,
       lang: "en",
       theme: "auto",
 
@@ -691,6 +706,9 @@ <h2 x-text="t('release')"></h2>
         element.closest("details").open = false;
         this.writeHash();
       },
+      closeServices() {
+        for (const item of document.querySelectorAll("details.service[open]")) item.open = false;
+      },
       readHash() {
         const decode = (value) => {
           try {