okengine 0.11.2 → 0.13.0

package/src/console/ui-next/src/components/explorer/explorer-chrome.ts

@@ -0,0 +1,123 @@
+/**
+ * Shared explorer chrome — Overview / Flows / Store / Vault speak one layout language.
+ */
+
+/** Full-bleed page shell — same `svh` box as `ShellLayout` so mobile chrome cannot clip. */
+export const EXPLORER_PAGE_CLASS = "flex h-svh max-h-svh flex-col overflow-hidden";
+
+/** Left explorer / right inspector split (Flows · Store · Vault · Overview). */
+export const EXPLORER_SPLIT = {
+  start: { defaultSize: "28%", minSize: "18%" },
+  end: { defaultSize: "72%", minSize: "40%" },
+} as const;
+
+/** Flush search field inside {@link EXPLORER_TOOLBAR_CLASS}. */
+export const EXPLORER_SEARCH_CLASS =
+  "h-full min-w-0 flex-1 rounded-none border-0 bg-transparent px-2 text-xs shadow-none focus-visible:border-0 focus-visible:ring-0 dark:bg-transparent";
+
+/** Search + icon-action row at the top of every left pane. */
+export const EXPLORER_TOOLBAR_CLASS = "flex h-10 shrink-0 items-stretch border-b border-border/60";
+
+/** h-10 filter / command / results bar — tokens stretch to fill. */
+export const EXPLORER_STRIP_CLASS = "flex h-10 shrink-0 items-stretch border-b border-border/60";
+
+/** Full-height token in {@link EXPLORER_STRIP_CLASS} — hover fills the bar. */
+export const EXPLORER_STRIP_TOKEN_CLASS =
+  "inline-flex h-full items-center gap-1 px-2 text-[10px] font-medium transition-colors hover:bg-muted/50 hover:text-foreground";
+
+/** Pressed strip token — ink only, no well. */
+export const EXPLORER_STRIP_TOKEN_ACTIVE_CLASS = "text-foreground";
+
+/** Pressed strip token with a full-height wash (lookback, toggles). */
+export const EXPLORER_STRIP_TOKEN_SELECTED_CLASS = "bg-muted/70 text-foreground";
+
+/** Idle strip token ink. */
+export const EXPLORER_STRIP_TOKEN_IDLE_CLASS = "text-muted-foreground";
+
+/** Icon-only control on a toolbar or strip — flat fill, no border well. */
+export const EXPLORER_ICON_BUTTON_CLASS =
+  "inline-flex h-full min-w-8 shrink-0 items-center justify-center text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-40";
+
+/** Icon-only control on a band / folder row (no chrome). */
+export const EXPLORER_ICON_BUTTON_BARE_CLASS =
+  "inline-flex size-6 shrink-0 items-center justify-center border-0 bg-transparent text-muted-foreground transition-colors hover:bg-transparent hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-40";
+
+/** Facet / trigger / kind band — flush, no fill (Traces language). */
+export const EXPLORER_BAND_CLASS = "overflow-hidden border-b border-border/60 last:border-b-0";
+
+/** Band header row. */
+export const EXPLORER_BAND_HEADER_CLASS =
+  "group/band flex w-full items-center gap-2 border-b border-border/60 px-2 py-1.5 text-left transition-colors hover:bg-muted/50";
+
+/** Uppercase band title. */
+export const EXPLORER_BAND_LABEL_CLASS =
+  "min-w-0 truncate text-[10px] font-semibold tracking-[0.08em] text-muted-foreground uppercase group-hover/band:text-foreground";
+
+/** Count — tabular nums, no chip. */
+export const EXPLORER_COUNT_CLASS =
+  "shrink-0 text-[10px] font-medium tabular-nums text-muted-foreground";
+
+/** Selectable leaf row — same density as a TraceRow. */
+export const EXPLORER_ROW_CLASS =
+  "group relative flex w-full items-center gap-2 border-b border-border/60 py-1.5 pr-2 pl-2.5 text-left text-xs transition-colors hover:bg-muted/50";
+
+/** Selected leaf fill. */
+export const EXPLORER_ROW_SELECTED_CLASS = "bg-muted/70 text-foreground";
+
+/** Left selection rail — full-height, traces. */
+export const EXPLORER_RAIL_CLASS = "absolute inset-y-0 left-0 w-0.5 transition-colors";
+
+/** Default selection rail ink — Overview / Flows / Store. */
+export const EXPLORER_RAIL_ACTIVE_CLASS = "bg-sky-500";
+
+/** Folder / group row (same density as a leaf). */
+export const EXPLORER_GROUP_ROW_CLASS =
+  "group/folder flex w-full items-center gap-2 border-b border-border/60 px-2 py-1.5 text-left text-xs transition-colors hover:bg-muted/50";
+
+/** Bare chevron on a band or folder. */
+export const EXPLORER_CHEVRON_CLASS = "size-3 shrink-0 text-muted-foreground transition-transform";
+
+/** Bare icon (no well) — traces. */
+export const EXPLORER_ICON_CLASS = "size-3.5 shrink-0";
+
+/** Hover-reveal actions on a band header. */
+export const EXPLORER_BAND_ACTIONS_CLASS =
+  "flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity group-hover/band:opacity-100 group-focus-within/band:opacity-100";
+
+/** Size-5 tinted icon well — detail headers / posture marks. */
+export const EXPLORER_WELL_CLASS =
+  "flex size-5 shrink-0 items-center justify-center rounded-md border";
+
+/** Folder well (neutral) — kept for callers that still box a folder. */
+export const EXPLORER_FOLDER_WELL_CLASS =
+  "flex size-5 shrink-0 items-center justify-center rounded-md border border-border/60 bg-muted/40 text-muted-foreground transition-colors";
+
+/**
+ * Keep only text-tint classes from a well spec so a bare icon can reuse it.
+ *
+ * @param wellClass - Border / fill / text well classes
+ */
+export function explorerIconInk(wellClass: string): string {
+  return wellClass
+    .split(/\s+/)
+    .filter((token) => token.startsWith("text-") || token.startsWith("dark:text-"))
+    .join(" ");
+}
+
+/** Inspector identity header — same h-10 strip as Monitoring Query / Metrics. */
+export const DETAIL_HEADER_CLASS = `${EXPLORER_STRIP_CLASS} gap-2 px-2`;
+
+/** Size-8 rounded-lg well in a detail header. */
+export const DETAIL_WELL_CLASS =
+  "flex size-8 shrink-0 items-center justify-center rounded-lg border border-border/70";
+
+/** Detail title. */
+export const DETAIL_TITLE_CLASS =
+  "min-w-0 truncate text-sm font-semibold tracking-tight text-foreground";
+
+/** Uppercase section eyebrow. */
+export const SECTION_HEAD_CLASS =
+  "text-[10px] font-semibold tracking-[0.08em] text-muted-foreground uppercase";
+
+/** Compact empty copy inside a left explorer (too narrow for the Empty primitive). */
+export const EXPLORER_LIST_EMPTY_CLASS = "px-2 py-4 text-sm text-muted-foreground";

package/src/console/ui-next/src/components/explorer/explorer-empty.tsx

@@ -0,0 +1,67 @@
+/**
+ * Centered empty / loading pane for explorer inspectors.
+ */
+
+import { HugeiconsIcon } from "@hugeicons/react";
+import type { JSX, ReactNode } from "react";
+import { DETAIL_HEADER_CLASS } from "./explorer-chrome.ts";
+import {
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/components/ui/empty";
+import type { ElementHugeIcon } from "@/lib/element-icons.ts";
+
+/** Props for {@link ExplorerEmpty}. */
+export interface ExplorerEmptyProps {
+  readonly icon?: ElementHugeIcon;
+  readonly iconClassName?: string;
+  readonly title: string;
+  readonly description?: ReactNode;
+  readonly children?: ReactNode;
+  /** First control on an identity strip (start-panel toggle). */
+  readonly leading?: ReactNode;
+}
+
+/**
+ * Full-pane empty state — same Empty primitive as Traces and Vault.
+ *
+ * @param props - Icon + copy
+ */
+export function ExplorerEmpty({
+  icon,
+  iconClassName,
+  title,
+  description,
+  children,
+  leading,
+}: ExplorerEmptyProps): JSX.Element {
+  return (
+    <div className="flex h-full min-h-0 flex-col">
+      {leading ? (
+        <header className={DETAIL_HEADER_CLASS}>
+          <div className="-ml-2 flex h-full shrink-0 items-stretch">
+            {leading}
+            <span className="w-px shrink-0 self-stretch bg-border/60" aria-hidden />
+          </div>
+        </header>
+      ) : null}
+      <div className="flex min-h-0 flex-1 items-center justify-center p-6">
+        <Empty className="border-0">
+          <EmptyHeader>
+            {icon ? (
+              <EmptyMedia variant="icon" className={iconClassName}>
+                <HugeiconsIcon icon={icon} />
+              </EmptyMedia>
+            ) : null}
+            <EmptyTitle>{title}</EmptyTitle>
+            {description ? <EmptyDescription>{description}</EmptyDescription> : null}
+          </EmptyHeader>
+          {children}
+        </Empty>
+      </div>
+    </div>
+  );
+}

package/src/console/ui-next/src/components/explorer/explorer-search.tsx

@@ -0,0 +1,20 @@
+/**
+ * Borderless explorer search — same field on Units, Store, Vault, and Traces.
+ */
+
+import type { ComponentProps, JSX } from "react";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils.ts";
+import { EXPLORER_SEARCH_CLASS } from "./explorer-chrome.ts";
+
+/**
+ * Flush search input for an explorer toolbar.
+ *
+ * @param props - Native input props (`flat` is always on)
+ */
+export function ExplorerSearch({
+  className,
+  ...props
+}: Omit<ComponentProps<typeof Input>, "flat">): JSX.Element {
+  return <Input flat className={cn(EXPLORER_SEARCH_CLASS, className)} {...props} />;
+}

package/src/console/ui-next/src/components/explorer/explorer-start-toggle.tsx

@@ -0,0 +1,52 @@
+/**
+ * Collapse / expand the start-side explorer on a split page.
+ */
+
+import type { JSX } from "react";
+import { LayoutAlignLeftIcon, LayoutAlignRightIcon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { EXPLORER_ICON_BUTTON_CLASS } from "./explorer-chrome.ts";
+import { ToolbarTip } from "@/components/ui/toolbar-tip.tsx";
+
+/** Props for {@link ExplorerStartToggle}. */
+export interface ExplorerStartToggleProps {
+  readonly open: boolean;
+  readonly onToggle: () => void;
+  /** Spoken noun — `Collapse {noun}` / `Expand {noun}`. */
+  readonly noun: string;
+  readonly controlsId: string;
+  readonly dataSlot: string;
+}
+
+/**
+ * Flush-left layout-align control for a start explorer panel.
+ *
+ * @param props - Open state + spoken noun
+ */
+export function ExplorerStartToggle({
+  open,
+  onToggle,
+  noun,
+  controlsId,
+  dataSlot,
+}: ExplorerStartToggleProps): JSX.Element {
+  const label = open ? `Collapse ${noun}` : `Expand ${noun}`;
+  return (
+    <ToolbarTip label={label} className="flex self-stretch">
+      <button
+        type="button"
+        aria-expanded={open}
+        aria-controls={controlsId}
+        aria-label={label}
+        data-slot={dataSlot}
+        onClick={onToggle}
+        className={EXPLORER_ICON_BUTTON_CLASS}
+      >
+        <HugeiconsIcon
+          icon={open ? LayoutAlignLeftIcon : LayoutAlignRightIcon}
+          className="size-3.5"
+        />
+      </button>
+    </ToolbarTip>
+  );
+}

package/src/console/ui-next/src/components/explorer/section-head.tsx

@@ -0,0 +1,33 @@
+/**
+ * Uppercase section eyebrow — contract panels, vault inspector, traces sheet.
+ */
+
+import type { JSX } from "react";
+import { cn } from "@/lib/utils.ts";
+import { SECTION_HEAD_CLASS } from "./explorer-chrome.ts";
+
+/** Props for {@link SectionHead}. */
+export interface SectionHeadProps {
+  readonly title: string;
+  readonly meta?: string;
+  readonly ruled?: boolean;
+}
+
+/**
+ * Section label with optional mono meta and a hairline rule.
+ *
+ * @param props - Title + optional meta
+ */
+export function SectionHead({ title, meta, ruled = true }: SectionHeadProps): JSX.Element {
+  return (
+    <div
+      className={cn(
+        "flex items-baseline justify-between gap-2",
+        ruled && "border-b border-border/60 pb-1.5",
+      )}
+    >
+      <h3 className={SECTION_HEAD_CLASS}>{title}</h3>
+      {meta ? <span className="font-mono text-[10px] text-muted-foreground">{meta}</span> : null}
+    </div>
+  );
+}

package/src/console/ui-next/src/components/explorer/tree-expand-toggle.tsx

@@ -0,0 +1,69 @@
+/**
+ * Unfold control for explorer trees (search bar or a band / folder row).
+ */
+
+import { UnfoldLessIcon, UnfoldMoreIcon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
+import type { JSX } from "react";
+import { ToolbarTip } from "@/components/ui/toolbar-tip.tsx";
+import { cn } from "@/lib/utils.ts";
+import { EXPLORER_ICON_BUTTON_BARE_CLASS, EXPLORER_ICON_BUTTON_CLASS } from "./explorer-chrome.ts";
+
+/** Props for {@link TreeExpandToggle}. */
+export interface TreeExpandToggleProps {
+  readonly allOpen: boolean;
+  readonly disabled?: boolean;
+  readonly onToggle: () => void;
+  readonly collapseLabel?: string;
+  readonly expandLabel?: string;
+  readonly dataSlot: string;
+  readonly className?: string;
+  /** When true, the button discloses one section (`aria-expanded`). */
+  readonly disclose?: boolean;
+  /** Icon-only — no chrome. Used on band / folder rows. */
+  readonly bare?: boolean;
+}
+
+/**
+ * Expand / collapse all nodes in a tree, band, or folder.
+ *
+ * @param props - Open state + toggle + placement
+ */
+export function TreeExpandToggle({
+  allOpen,
+  disabled,
+  onToggle,
+  collapseLabel = "Collapse all",
+  expandLabel = "Expand all",
+  dataSlot,
+  className,
+  disclose = false,
+  bare = false,
+}: TreeExpandToggleProps): JSX.Element {
+  const label = allOpen ? collapseLabel : expandLabel;
+  return (
+    <ToolbarTip label={label} className={bare ? undefined : "flex self-stretch"}>
+      <button
+        type="button"
+        aria-label={label}
+        aria-expanded={disclose ? allOpen : undefined}
+        data-slot={dataSlot}
+        disabled={disabled}
+        onClick={(event) => {
+          event.stopPropagation();
+          onToggle();
+        }}
+        className={cn(
+          bare ? EXPLORER_ICON_BUTTON_BARE_CLASS : EXPLORER_ICON_BUTTON_CLASS,
+          className,
+        )}
+      >
+        <HugeiconsIcon
+          icon={allOpen ? UnfoldLessIcon : UnfoldMoreIcon}
+          className="size-3.5"
+          aria-hidden
+        />
+      </button>
+    </ToolbarTip>
+  );
+}

package/src/console/ui-next/src/components/explorer/use-explorer-start-panel.ts

@@ -0,0 +1,34 @@
+/**
+ * Collapse / expand the start panel of an explorer split.
+ */
+
+import { useState } from "react";
+import { usePanelRef } from "@/components/ui/resizable";
+
+/**
+ * Imperative start-panel collapse for a horizontal explorer split.
+ *
+ * @returns Panel ref, open flag, toggle, and resize sync
+ */
+export function useExplorerStartPanel() {
+  const panelRef = usePanelRef();
+  const [open, setOpen] = useState(true);
+
+  const toggle = () => {
+    const panel = panelRef.current;
+    if (!panel) return;
+    if (panel.isCollapsed()) {
+      panel.expand();
+      setOpen(true);
+    } else {
+      panel.collapse();
+      setOpen(false);
+    }
+  };
+
+  const onResize = () => {
+    setOpen(!(panelRef.current?.isCollapsed() ?? false));
+  };
+
+  return { panelRef, open, toggle, onResize };
+}

package/src/console/ui-next/src/components/gate-list.tsx

@@ -0,0 +1,70 @@
+/**
+ * Shared Gate list rows (Traces sheet + Units contract panel).
+ */
+
+import { HugeiconsIcon } from "@hugeicons/react";
+import type { JSX } from "react";
+import {
+  EXPLORER_COUNT_CLASS,
+  EXPLORER_ICON_CLASS,
+  EXPLORER_ROW_CLASS,
+  EXPLORER_STRIP_CLASS,
+  SECTION_HEAD_CLASS,
+} from "@/components/explorer/explorer-chrome.ts";
+import { cn } from "@/lib/utils.ts";
+import { gateChipIcon, type TraceGateInfo } from "@/features/flows/traces/trace-gates.ts";
+
+const GATE_ACCENT = "#A78BFA";
+
+/** Props for {@link GateList}. */
+export interface GateListProps {
+  readonly gates: readonly TraceGateInfo[];
+  /** Optional heading override (default "Gates"). */
+  readonly heading?: string;
+}
+
+/**
+ * One Gate row — kind + name; description on hover.
+ *
+ * @param props - Resolved gate info
+ */
+export function GateRow({ gate }: { readonly gate: TraceGateInfo }): JSX.Element {
+  const label = gate.variant ?? "undeclared";
+  const meta = [gate.variant, gate.description].filter(Boolean).join(" · ") || "undeclared";
+  return (
+    <li className={EXPLORER_ROW_CLASS} title={meta} data-slot="trace-gate-row">
+      <HugeiconsIcon
+        icon={gateChipIcon(gate.variant)}
+        className={EXPLORER_ICON_CLASS}
+        style={{ color: GATE_ACCENT }}
+        aria-hidden
+      />
+      <span className="min-w-0 flex-1 truncate font-mono text-xs">
+        <span className="text-muted-foreground">{label}</span>
+        <span className="text-foreground/90"> {gate.name}</span>
+      </span>
+    </li>
+  );
+}
+
+/**
+ * Gates section — uppercase heading + rows.
+ *
+ * @param props - Resolved gate infos
+ */
+export function GateList({ gates, heading = "Gates" }: GateListProps): JSX.Element | null {
+  if (gates.length === 0) return null;
+  return (
+    <section className="flex flex-col" data-slot="gate-list" aria-label={heading}>
+      <div className={EXPLORER_STRIP_CLASS}>
+        <h3 className={cn(SECTION_HEAD_CLASS, "flex items-center px-2")}>{heading}</h3>
+        <span className={cn(EXPLORER_COUNT_CLASS, "flex items-center")}>{gates.length}</span>
+      </div>
+      <ul>
+        {gates.map((g) => (
+          <GateRow key={g.name} gate={g} />
+        ))}
+      </ul>
+    </section>
+  );
+}

package/src/console/ui-next/src/components/generate-password-button.tsx

@@ -0,0 +1,76 @@
+/**
+ * Claim-form control — mint a policy password and copy it.
+ */
+
+import { ShuffleIcon, Tick02Icon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { useEffect, useRef, useState } from "react";
+import { generateConsolePassword } from "@console/password-policy";
+import { Button } from "@/components/ui/button";
+
+/** Props for {@link GeneratePasswordButton}. */
+export interface GeneratePasswordButtonProps {
+  /** Receives the generated password (always filled, even if copy fails). */
+  readonly onGenerate: (password: string) => void;
+  /** Disable while the claim request is in flight. */
+  readonly disabled?: boolean;
+  /** Clipboard write (tests). */
+  readonly copyText?: (text: string) => Promise<void>;
+}
+
+/**
+ * Generate a Console-policy password, fill the field, and copy it.
+ *
+ * @param props - Fill callback + optional clipboard seam
+ */
+export function GeneratePasswordButton({
+  onGenerate,
+  disabled,
+  copyText = async (text) => {
+    await navigator.clipboard.writeText(text);
+  },
+}: GeneratePasswordButtonProps) {
+  const [copied, setCopied] = useState(false);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(
+    () => () => {
+      if (timer.current) clearTimeout(timer.current);
+    },
+    [],
+  );
+
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="xs"
+      disabled={disabled}
+      data-slot="generate-password"
+      aria-label={copied ? "Password generated and copied" : "Generate a password and copy it"}
+      className="text-muted-foreground"
+      onClick={() => {
+        const password = generateConsolePassword();
+        onGenerate(password);
+        void copyText(password)
+          .then(() => {
+            setCopied(true);
+            if (timer.current) clearTimeout(timer.current);
+            timer.current = setTimeout(() => setCopied(false), 1600);
+          })
+          .catch(() => {
+            setCopied(false);
+          });
+      }}
+    >
+      <HugeiconsIcon
+        icon={copied ? Tick02Icon : ShuffleIcon}
+        data-icon="inline-start"
+        color="currentColor"
+        strokeWidth={1.5}
+        aria-hidden
+      />
+      {copied ? "Copied" : "Generate"}
+    </Button>
+  );
+}

package/src/console/ui-next/src/components/highlighted-json.tsx

@@ -0,0 +1,73 @@
+/**
+ * Shared Shiki-highlighted JSON viewer (Traces + Units Call API).
+ */
+
+import { useEffect, useMemo, useState, type JSX } from "react";
+import { useTheme } from "@/components/theme-provider";
+import { highlightCode } from "@/lib/highlight.ts";
+
+/** Props for {@link HighlightedJson}. */
+export interface HighlightedJsonProps {
+  /** Pre-serialized JSON text. */
+  readonly json: string;
+  /** `data-slot` for tests / a11y. */
+  readonly dataSlot: string;
+  /** Optional layout class (default is a compact 14rem cap). */
+  readonly className?: string;
+}
+
+/**
+ * Shiki-highlighted JSON block with line numbers.
+ *
+ * @param props - Pre-serialized JSON
+ */
+export function HighlightedJson({ json, dataSlot, className }: HighlightedJsonProps): JSX.Element {
+  const { theme } = useTheme();
+  const [painted, setPainted] = useState<{
+    readonly json: string;
+    readonly nodes: JSX.Element;
+  } | null>(null);
+  const lines = useMemo(() => json.split("\n"), [json]);
+  const nodes = painted?.json === json ? painted.nodes : null;
+
+  useEffect(() => {
+    let cancelled = false;
+    const root = window.document.documentElement;
+    const dark = theme === "dark" || (theme === "system" && root.classList.contains("dark"));
+    void highlightCode(json, {
+      lang: "json",
+      theme: dark ? "github-dark" : "github-light",
+    }).then((el) => {
+      if (!cancelled) setPainted({ json, nodes: el });
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [json, theme]);
+
+  return (
+    <div
+      data-slot={dataSlot}
+      className={
+        className ??
+        "flex max-h-56 overflow-auto [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+      }
+    >
+      <div
+        className="sticky left-0 self-stretch select-none border-r border-border/40 bg-muted/30 px-1.5 py-1.5 text-right font-mono text-[10px] leading-snug text-muted-foreground/80"
+        aria-hidden
+      >
+        {lines.map((_, i) => (
+          <div key={i}>{i + 1}</div>
+        ))}
+      </div>
+      <div className="min-w-0 flex-1 px-2 py-1.5 text-[11px] leading-snug [&_pre]:m-0 [&_pre]:bg-transparent! [&_code]:font-mono">
+        {nodes ?? (
+          <pre className="m-0 bg-transparent font-mono text-[11px] leading-snug whitespace-pre">
+            {json}
+          </pre>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/console/ui-next/src/components/http-method-badge.tsx

@@ -0,0 +1,35 @@
+/**
+ * HTTP method badge — shared Traces / Units chrome.
+ */
+
+import type { JSX } from "react";
+import { Badge } from "@/components/ui/badge";
+import { httpMethodBadgeClass } from "@/features/flows/traces/http-method.ts";
+import { cn } from "@/lib/utils";
+
+/** Props for {@link HttpMethodBadge}. */
+export interface HttpMethodBadgeProps {
+  readonly method: string;
+  readonly className?: string;
+}
+
+/**
+ * Outline badge colored by HTTP method.
+ *
+ * @param props - Method string
+ */
+export function HttpMethodBadge({ method, className }: HttpMethodBadgeProps): JSX.Element {
+  return (
+    <Badge
+      variant="outline"
+      className={cn(
+        "h-5 px-1.5 font-mono text-[10px] uppercase",
+        httpMethodBadgeClass(method),
+        className,
+      )}
+      data-slot="http-method-badge"
+    >
+      {method}
+    </Badge>
+  );
+}