From 59a9547a279deac2cc9899a8aa7c25bca39cd867 Mon Sep 17 00:00:00 2001
From: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Date: Wed, 10 Jun 2026 14:39:32 +0200
Subject: [PATCH] sbx-cli: render experimental indicators for commands and
 flags

The sbx-cli layout had no handling for the experimental: true field
present in many data/sbx_cli/*.yaml files. Add visual indicators
matching the Docker CLI layout:

- Command-level (experimental: true at YAML root): magenta callout
  block below the summary table
- Flag-level (experimental: true on an option): violet badge before
  the flag description in Options and Global options tables
- Subcommands table: violet badge alongside the synopsis for
  experimental child commands

The title heading stays plain, consistent with cli.html, which signals
experimental status only through the command-level callout.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 layouts/sbx-cli.html | 47 +++++++++++++++++++++++++++++++++++++-------
 1 file changed, 40 insertions(+), 7 deletions(-)

diff --git a/layouts/sbx-cli.html b/layouts/sbx-cli.html
index 0b10f5e0fa..77c59e9e47 100644
--- a/layouts/sbx-cli.html
+++ b/layouts/sbx-cli.html
@@ -28,6 +28,22 @@
       </table>
     </div>
 
+    {{- /* Experimental callout (command-level) */ -}}
+    {{ if $data.experimental }}
+      <div class="px-4 border-l-2 border-l-magenta-light dark:border-l-magenta-dark">
+        <p class="not-prose flex gap-2 items-center text-magenta-light dark:text-magenta-dark">
+          <span class="icon-svg pb-1">{{ partialCached "icon" "beaker" "beaker" }}</span>
+          <strong>{{ i18n "experimental" }}</strong>
+        </p>
+        <p><strong>This command is experimental.</strong></p>
+        <p>
+          Experimental features are intended for testing and feedback as their
+          functionality or design may change between releases without warning or
+          can be removed entirely in a future release.
+        </p>
+      </div>
+    {{ end }}
+
     {{- /* Description */ -}}
     {{ with $data.description }}
       {{ $heading := dict "level" 2 "text" "Description" }}
@@ -54,7 +70,14 @@
               {{ $child := index hugo.Data.sbx_cli .Params.datafile }}
               <tr>
                 <td class="text-left"><a class="link" href="{{ .Permalink }}"><code>{{ .Title }}</code></a></td>
-                <td class="text-left">{{ $child.synopsis }}</td>
+                <td class="text-left">
+                  <span class="inline-flex items-center gap-2">
+                    {{ if $child.experimental }}
+                      {{ partialCached "components/badge.html" (dict "color" "violet" "content" "experimental") "sbx-exp" }}
+                    {{ end }}
+                    {{ $child.synopsis }}
+                  </span>
+                </td>
               </tr>
             {{ end }}
           {{ end }}
@@ -91,9 +114,14 @@
                     {{ end }}
                   </td>
                   <td>
-                    {{ with .usage }}
-                      {{ strings.TrimSpace . }}
-                    {{ end }}
+                    <span class="inline-flex items-center gap-2">
+                      {{ with .experimental }}
+                        {{ partialCached "components/badge.html" (dict "color" "violet" "content" "experimental") "sbx-exp" }}
+                      {{ end }}
+                      {{ with .usage }}
+                        {{ strings.TrimSpace . }}
+                      {{ end }}
+                    </span>
                   </td>
                 </tr>
               {{ end }}
@@ -132,9 +160,14 @@
                     {{ end }}
                   </td>
                   <td>
-                    {{ with .usage }}
-                      {{ strings.TrimSpace . }}
-                    {{ end }}
+                    <span class="inline-flex items-center gap-2">
+                      {{ with .experimental }}
+                        {{ partialCached "components/badge.html" (dict "color" "violet" "content" "experimental") "sbx-exp" }}
+                      {{ end }}
+                      {{ with .usage }}
+                        {{ strings.TrimSpace . }}
+                      {{ end }}
+                    </span>
                   </td>
                 </tr>
               {{ end }}