feat(ui): surface version and build hash

Author: streamer45

Cargo.lock

@@ -18,7 +18,7 @@ exclude = ["examples", "tests", "plugins"]
 streamkit-core = { version = "0.1", path = "crates/core" }
 streamkit-nodes = { version = "0.1", path = "crates/nodes" }
 streamkit-engine = { version = "0.1", path = "crates/engine" }
-streamkit-server = { version = "0.1", path = "apps/skit" }
+streamkit-server = { version = "0.2", path = "apps/skit" }
 streamkit-client = { version = "0.1", path = "apps/skit-cli" }
 streamkit-api = { version = "0.1", path = "crates/api" }
 streamkit-plugin-wasm = { version = "0.1", path = "crates/plugin-wasm" }

Cargo.toml

@@ -3,7 +3,7 @@ name = "streamkit-server"
 authors = ["Claudio Costa <cstcld91@gmail.com>", "StreamKit Contributors"]
 repository = "https://github.com/streamer45/streamkit"
 license = "MPL-2.0"
-version = "0.1.0"
+version = "0.2.0"
 edition = "2021"
 publish = false
 

apps/skit/Cargo.toml

@@ -0,0 +1,94 @@
+// SPDX-FileCopyrightText: © 2025 StreamKit Contributors
+//
+// SPDX-License-Identifier: MPL-2.0
+
+// Build scripts communicate with Cargo via stdout (`cargo:` directives).
+// Allow `println!` here to emit those directives.
+#![allow(clippy::disallowed_macros)]
+
+use std::{
+    env, fs,
+    path::{Path, PathBuf},
+    process::Command,
+};
+
+fn main() {
+    println!("cargo:rerun-if-env-changed=SKIT_BUILD_HASH");
+    println!("cargo:rerun-if-env-changed=GIT_SHA");
+    println!("cargo:rerun-if-env-changed=GITHUB_SHA");
+
+    let git_head = find_git_head();
+    if let Some(head_path) = git_head.as_ref() {
+        println!("cargo:rerun-if-changed={}", head_path.display());
+
+        if let Ok(head_ref) = fs::read_to_string(head_path) {
+            if let Some(reference) = head_ref.trim().strip_prefix("ref: ") {
+                if let Some(repo_root) = head_path.parent().and_then(|dir| dir.parent()) {
+                    let ref_path = repo_root.join(reference);
+                    println!("cargo:rerun-if-changed={}", ref_path.display());
+                }
+            }
+        }
+    }
+
+    let hash = read_env_hash("SKIT_BUILD_HASH")
+        .or_else(|| read_env_hash("GIT_SHA"))
+        .or_else(|| read_env_hash("GITHUB_SHA"))
+        .or_else(|| {
+            git_hash(git_head.as_ref().and_then(|path| path.parent()).and_then(|p| p.parent()))
+        })
+        .unwrap_or_else(|| "unknown".to_string());
+
+    println!("cargo:rustc-env=SKIT_BUILD_HASH={hash}");
+}
+
+fn read_env_hash(var: &str) -> Option<String> {
+    let value = env::var(var).ok()?;
+    let trimmed = value.trim();
+    if trimmed.is_empty() {
+        None
+    } else {
+        Some(trimmed.to_string())
+    }
+}
+
+fn git_hash(repo_root: Option<&Path>) -> Option<String> {
+    let mut command = Command::new("git");
+    command.args(["rev-parse", "HEAD"]);
+
+    if let Some(root) = repo_root {
+        command.current_dir(root);
+    }
+
+    let output = command.output().ok()?;
+
+    if !output.status.success() {
+        return None;
+    }
+
+    let hash = String::from_utf8(output.stdout).ok()?;
+    let trimmed = hash.trim();
+    if trimmed.is_empty() {
+        None
+    } else {
+        Some(trimmed.to_string())
+    }
+}
+
+fn find_git_head() -> Option<PathBuf> {
+    let manifest_dir = env::var("CARGO_MANIFEST_DIR").ok()?;
+    let mut dir = PathBuf::from(manifest_dir);
+
+    loop {
+        let head_path = dir.join(".git").join("HEAD");
+        if head_path.exists() {
+            return Some(head_path);
+        }
+
+        if !dir.pop() {
+            break;
+        }
+    }
+
+    None
+}

apps/skit/build.rs

@@ -85,10 +85,15 @@ async fn profile_heap_handler(
     crate::profiling::profile_heap().await
 }
 
+fn build_hash() -> &'static str {
+    option_env!("SKIT_BUILD_HASH").unwrap_or("unknown")
+}
+
 async fn health_handler() -> impl IntoResponse {
     Json(serde_json::json!({
         "status": "ok",
         "version": env!("CARGO_PKG_VERSION"),
+        "build_hash": build_hash(),
     }))
 }
 

apps/skit/src/server.rs

@@ -25,6 +25,12 @@ skit auth print-admin-token
 
 See the [Authentication guide](/guides/authentication/) for details.
 
+## Finding Build Info
+
+Click the StreamKit logo in the top-left corner to open the About modal. It shows the server
+version and build hash (commit) for debugging or support. The same data is available from the
+`/healthz` endpoint.
+
 ## Main Routes
 
 The Web UI has four main routes:

docs/src/content/docs/guides/web-ui.md

@@ -0,0 +1,36 @@
+// SPDX-FileCopyrightText: © 2025 StreamKit Contributors
+//
+// SPDX-License-Identifier: MPL-2.0
+
+import { test, expect } from '@playwright/test';
+
+import { ensureLoggedIn } from './auth-helpers';
+
+test.describe('About modal', () => {
+  test('shows version and build hash when clicking the logo', async ({ page }) => {
+    await page.goto('/design');
+    await ensureLoggedIn(page);
+
+    const healthResponse = await page.request.get('/healthz');
+    expect(healthResponse.ok()).toBeTruthy();
+    const health = (await healthResponse.json()) as {
+      version?: string;
+      build_hash?: string;
+      buildHash?: string;
+    };
+
+    await page.getByRole('button', { name: 'About StreamKit' }).click();
+
+    const dialog = page.getByRole('dialog', { name: 'About StreamKit' });
+    await expect(dialog).toBeVisible();
+
+    const versionValue = health.version ?? 'unknown';
+    const buildHashValue = health.build_hash ?? health.buildHash ?? 'unknown';
+
+    await expect(dialog.getByLabel('Version')).toHaveValue(versionValue);
+    await expect(dialog.getByLabel('Build hash')).toHaveValue(buildHashValue);
+
+    await dialog.getByRole('button', { name: 'Close' }).click();
+    await expect(dialog).toBeHidden();
+  });
+});

e2e/tests/about.spec.ts

@@ -11,9 +11,34 @@ import { useShallow } from 'zustand/shallow';
 import logo from './assets/logo.png';
 import { LayoutPresetButtons } from './components/LayoutPresetButtons';
 import { Button } from './components/ui/Button';
+import {
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+  FormGroup,
+  Input,
+  Label,
+} from './components/ui/Dialog';
 import { useTheme, type ColorMode } from './context/ThemeContext';
+import { fetchHealth } from './services/health';
 import { LAYOUT_PRESETS, useLayoutStore, type LayoutPreset } from './stores/layoutStore';
 import { usePermissionStore } from './stores/permissionStore';
+import { getLogger } from './utils/logger';
+
+const logger = getLogger('Layout');
+
+type BuildInfo = {
+  version: string;
+  buildHash: string;
+};
 
 const LayoutContainer = styled.div`
   display: flex;
@@ -44,6 +69,21 @@ const LogoContainer = styled.div`
   user-select: none;
 `;
 
+const LogoButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: var(--sk-focus-ring);
+    border-radius: 8px;
+  }
+`;
+
 const Logo = styled.img`
   height: 42px;
   width: auto;
@@ -190,6 +230,8 @@ const Main = styled.main`
 `;
 
 const Layout: React.FC = () => {
+  const [buildInfo, setBuildInfo] = React.useState<BuildInfo | null>(null);
+  const closeButtonRef = React.useRef<HTMLButtonElement | null>(null);
   const { colorMode, setColorMode } = useTheme();
   const role = usePermissionStore((s) => s.role);
   const { currentPreset, setPreset } = useLayoutStore(
@@ -204,12 +246,75 @@ const Layout: React.FC = () => {
     'focus-canvas',
     'inspector-focus',
   ];
+  const version = buildInfo?.version ?? 'unknown';
+  const buildHash = buildInfo?.buildHash ?? 'unknown';
+  const handleDialogOpenAutoFocus = React.useCallback((event: Event) => {
+    event.preventDefault();
+    closeButtonRef.current?.focus();
+  }, []);
+
+  React.useEffect(() => {
+    let cancelled = false;
+    const controller = new AbortController();
+
+    (async () => {
+      try {
+        const info = await fetchHealth(controller.signal);
+        if (!cancelled) {
+          setBuildInfo(info);
+        }
+      } catch (err) {
+        const isAbortError = err instanceof Error && err.name === 'AbortError';
+        const isAbortRelated = err instanceof DOMException && err.name === 'AbortError';
+        if (!cancelled && !isAbortError && !isAbortRelated) {
+          logger.debug('Failed to load build info', err);
+        }
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+      controller.abort();
+    };
+  }, []);
 
   return (
     <LayoutContainer>
       <Nav>
         <LogoContainer>
-          <Logo src={logo} alt="StreamKit" />
+          <Dialog>
+            <DialogTrigger asChild>
+              <LogoButton type="button" aria-label="About StreamKit">
+                <Logo src={logo} alt="StreamKit" />
+              </LogoButton>
+            </DialogTrigger>
+            <DialogPortal>
+              <DialogOverlay />
+              <DialogContent onOpenAutoFocus={handleDialogOpenAutoFocus}>
+                <DialogHeader>
+                  <DialogTitle>About StreamKit</DialogTitle>
+                  <DialogDescription>Build info for support and debugging.</DialogDescription>
+                </DialogHeader>
+                <DialogBody>
+                  <FormGroup spacing="compact">
+                    <Label htmlFor="about-version">Version</Label>
+                    <Input id="about-version" readOnly value={version} />
+                  </FormGroup>
+                  <FormGroup spacing="compact">
+                    <Label htmlFor="about-build-hash">Build hash</Label>
+                    <Input id="about-build-hash" readOnly value={buildHash} />
+                  </FormGroup>
+                </DialogBody>
+                <DialogFooter>
+                  <DialogClose asChild>
+                    <Button ref={closeButtonRef} variant="primary">
+                      Close
+                    </Button>
+                  </DialogClose>
+                </DialogFooter>
+              </DialogContent>
+            </DialogPortal>
+          </Dialog>
         </LogoContainer>
         <NavLinks>
           <StyledNavLink to="/design">Design</StyledNavLink>

ui/src/Layout.tsx

@@ -0,0 +1,34 @@
+// SPDX-FileCopyrightText: © 2025 StreamKit Contributors
+//
+// SPDX-License-Identifier: MPL-2.0
+
+import { fetchApi } from './base';
+
+interface HealthResponse {
+  status?: string;
+  version?: string;
+  build_hash?: string;
+  buildHash?: string;
+}
+
+export interface HealthStatus {
+  status: string;
+  version: string;
+  buildHash: string;
+}
+
+export async function fetchHealth(signal?: AbortSignal): Promise<HealthStatus> {
+  const response = await fetchApi('/health', { signal });
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch health: ${response.statusText}`);
+  }
+
+  const data = (await response.json()) as HealthResponse;
+
+  return {
+    status: data.status ?? 'unknown',
+    version: data.version ?? 'unknown',
+    buildHash: data.build_hash ?? data.buildHash ?? 'unknown',
+  };
+}