@checkstack/ui 1.12.0 → 1.13.0

package/src/components/Markdown.tsx

@@ -1,7 +1,36 @@
 import ReactMarkdown from "react-markdown";
 import type { Components } from "react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypeRaw from "rehype-raw";
+import rehypeSanitize from "rehype-sanitize";
 import { cn } from "../utils";
 
+/**
+ * Allow a SAFE subset of raw HTML in rendered markdown so model output that uses
+ * native disclosure widgets (`<details>` / `<summary>` for a foldable diff) and
+ * other plain formatting renders as intended instead of leaking the literal
+ * tags as text. `rehype-raw` parses the embedded HTML; `rehype-sanitize` then
+ * strips anything unsafe (scripts, event handlers, `javascript:` URLs, ...) - its
+ * default schema already allow-lists `details`/`summary` plus the usual markdown
+ * elements, so the XSS surface stays closed even though chat content is
+ * model-generated. Order matters: raw MUST run before sanitize.
+ */
+const rehypePlugins = [rehypeRaw, rehypeSanitize];
+
+/** Shared `<details>`/`<summary>` renderers: a styled, click-to-expand fold. */
+const disclosureComponents: Pick<Components, "details" | "summary"> = {
+  details: ({ children }) => (
+    <details className="my-2 rounded-md border border-border bg-muted/40 px-3 py-2 [&[open]>summary]:mb-2">
+      {children}
+    </details>
+  ),
+  summary: ({ children }) => (
+    <summary className="cursor-pointer select-none font-medium text-foreground marker:text-muted-foreground">
+      {children}
+    </summary>
+  ),
+};
+
 export interface MarkdownProps {
   /** The markdown content to render */
   children: string;
@@ -69,11 +98,20 @@ export function Markdown({
     del: ({ children }) => (
       <del className="line-through text-muted-foreground">{children}</del>
     ),
+
+    // Collapsible disclosure (e.g. a model-emitted "view diff" fold)
+    ...disclosureComponents,
   };
 
   return (
     <span className={cn(sizeClasses[size], className)}>
-      <ReactMarkdown components={components}>{children}</ReactMarkdown>
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        rehypePlugins={rehypePlugins}
+        components={components}
+      >
+        {children}
+      </ReactMarkdown>
     </span>
   );
 }
@@ -190,6 +228,28 @@ export function MarkdownBlock({
     del: ({ children }) => (
       <del className="line-through text-muted-foreground">{children}</del>
     ),
+
+    // GFM tables (enabled via remark-gfm). Styled to the design tokens; the
+    // wrapper scrolls horizontally so a wide table never overflows its bubble.
+    table: ({ children }) => (
+      <div className="mb-4 overflow-x-auto">
+        <table className="w-full border-collapse text-sm">{children}</table>
+      </div>
+    ),
+    thead: ({ children }) => <thead className="bg-muted">{children}</thead>,
+    tbody: ({ children }) => <tbody>{children}</tbody>,
+    tr: ({ children }) => <tr className="border-b border-border">{children}</tr>,
+    th: ({ children }) => (
+      <th className="border border-border px-2 py-1 text-left font-semibold text-foreground">
+        {children}
+      </th>
+    ),
+    td: ({ children }) => (
+      <td className="border border-border px-2 py-1 align-top">{children}</td>
+    ),
+
+    // Collapsible disclosure (e.g. a model-emitted "view diff" fold)
+    ...disclosureComponents,
   };
 
   return (
@@ -200,7 +260,13 @@ export function MarkdownBlock({
         className
       )}
     >
-      <ReactMarkdown components={components}>{children}</ReactMarkdown>
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        rehypePlugins={rehypePlugins}
+        components={components}
+      >
+        {children}
+      </ReactMarkdown>
     </div>
   );
 }

package/src/components/Spinner.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { Loader2 } from "lucide-react";
+import { cn } from "../utils";
+import { usePerformance } from "./PerformanceProvider";
+
+const sizeClasses = {
+  sm: "h-4 w-4",
+  md: "h-5 w-5",
+  lg: "h-6 w-6",
+} as const;
+
+export interface SpinnerProps
+  extends Omit<React.ComponentProps<typeof Loader2>, "ref"> {
+  /**
+   * Visual size of the spinner. Defaults to `sm` (`h-4 w-4`), the dominant
+   * inline-in-button need.
+   */
+  size?: keyof typeof sizeClasses;
+  className?: string;
+}
+
+/**
+ * Spinner - a small INLINE loading indicator (e.g. next to button text or in a
+ * table cell). For a centered full-block loader, use `LoadingSpinner` instead.
+ *
+ * The `animate-spin` class is gated INTERNALLY behind
+ * `usePerformance().isLowPower`: on low-power devices the icon renders static
+ * (no spin), satisfying `.claude/rules/performance.md` so call sites inherit the
+ * guard without re-implementing it.
+ *
+ * Accessibility: decorative by default (`aria-hidden`), for the common case of
+ * sitting next to visible text like "Saving...". Pass `aria-label` to announce
+ * it on its own; that switches the icon to `role="status"` and drops
+ * `aria-hidden`.
+ */
+export const Spinner: React.FC<SpinnerProps> = ({
+  size = "sm",
+  className,
+  "aria-label": ariaLabel,
+  ...props
+}) => {
+  const { isLowPower } = usePerformance();
+
+  const accessibility =
+    ariaLabel === undefined
+      ? { "aria-hidden": true }
+      : { "aria-label": ariaLabel, role: "status" as const };
+
+  return (
+    <Loader2
+      className={cn(!isLowPower && "animate-spin", sizeClasses[size], className)}
+      {...accessibility}
+      {...props}
+    />
+  );
+};

package/src/components/StatusBadge.tsx

@@ -0,0 +1,78 @@
+import * as React from "react";
+import { cn } from "../utils";
+
+export type StatusTone = "ok" | "warn" | "error" | "info" | "neutral";
+
+const toneClass: Record<StatusTone, string> = {
+  ok: "bg-success/10 text-success",
+  warn: "bg-warning/10 text-warning",
+  error: "bg-destructive/10 text-destructive",
+  info: "bg-info/10 text-info",
+  neutral: "bg-secondary text-secondary-foreground",
+};
+
+/**
+ * Severity sort order via CSS flex `order`, so the most urgent signal always
+ * sits left regardless of plugin registration order: error (red) -> warn
+ * (yellow) -> info -> neutral -> ok. Only takes effect when badges share a
+ * flex container (every `SystemStateBadgesSlot` render site wraps them in one).
+ */
+const orderClass: Record<StatusTone, string> = {
+  error: "order-1",
+  warn: "order-2",
+  info: "order-3",
+  neutral: "order-4",
+  ok: "order-5",
+};
+
+export interface StatusBadgeProps {
+  /** Severity tone driving the (subtle, tinted) color. */
+  tone: StatusTone;
+  /** Lucide-style icon component. */
+  icon: React.ComponentType<{ className?: string }>;
+  /** Full description: shown on hover/focus and exposed to assistive tech. */
+  label: string;
+  className?: string;
+}
+
+/**
+ * A compact, uniform status symbol: a small tinted chip holding an icon, with
+ * the full label revealed on hover/focus (and via `aria-label`). All system
+ * state badges (health, incident, SLO, maintenance, anomaly, dependency) render
+ * through this so a system's status reads as a tidy, consistent row of icons
+ * instead of a stack of differently-styled text pills.
+ */
+export const StatusBadge: React.FC<StatusBadgeProps> = ({
+  tone,
+  icon: Icon,
+  label,
+  className,
+}) => {
+  return (
+    <span
+      className={cn(
+        "group/status-badge relative inline-flex shrink-0",
+        orderClass[tone],
+        className,
+      )}
+    >
+      <span
+        role="img"
+        aria-label={label}
+        tabIndex={0}
+        className={cn(
+          "inline-flex size-6 items-center justify-center rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          toneClass[tone],
+        )}
+      >
+        <Icon className="h-3.5 w-3.5" />
+      </span>
+      <span
+        role="tooltip"
+        className="pointer-events-none invisible absolute bottom-full left-1/2 z-[100] mb-1.5 -translate-x-1/2 whitespace-nowrap rounded border border-border bg-popover px-2 py-1 text-xs text-popover-foreground opacity-0 shadow-lg transition-opacity group-hover/status-badge:visible group-hover/status-badge:opacity-100 group-focus-within/status-badge:visible group-focus-within/status-badge:opacity-100"
+      >
+        {label}
+      </span>
+    </span>
+  );
+};

package/src/components/StrategyConfigCard.tsx

@@ -6,7 +6,7 @@ import { Badge, type BadgeProps } from "./Badge";
 import { Toggle } from "./Toggle";
 import { DynamicForm } from "./DynamicForm";
 import type { OptionsResolver } from "./DynamicForm/types";
-import { DynamicIcon, type LucideIconName } from "./DynamicIcon";
+import { DynamicIcon, type IconName } from "./DynamicIcon";
 import { MarkdownBlock } from "./Markdown";
 import { cn } from "../utils";
 
@@ -38,8 +38,8 @@ export interface StrategyConfigCardData {
   displayName: string;
   /** Optional description shown below the title */
   description?: string;
-  /** Lucide icon name in PascalCase (e.g., 'AlertCircle', 'HeartPulse') */
-  icon?: LucideIconName;
+  /** Icon name in PascalCase - a lucide icon or a vendored brand icon. */
+  icon?: IconName;
   /** Whether the strategy is currently enabled */
   enabled: boolean;
 }

package/src/components/Tabs.tsx

@@ -1,4 +1,6 @@
 import React, { useRef } from "react";
+import { cn } from "../utils";
+import { usePerformance } from "./PerformanceProvider";
 
 export interface TabItem {
   id: string;
@@ -126,13 +128,17 @@ export const TabPanel: React.FC<TabPanelProps> = ({
   className = "",
 }) => {
   const isActive = activeTab === id;
+  const { isLowPower } = usePerformance();
 
   return isActive ? (
     <div
       id={`tabpanel-${id}`}
       role="tabpanel"
       aria-labelledby={`tab-${id}`}
-      className={`animate-in fade-in-0 duration-200 ${className}`}
+      className={cn(
+        !isLowPower && "animate-in fade-in-0 duration-200",
+        className,
+      )}
     >
       {children}
     </div>

package/src/components/UserMenu.logic.test.ts

@@ -0,0 +1,37 @@
+import { describe, expect, it } from "bun:test";
+import {
+  DESKTOP_POPOVER_CONTENT_CLASS,
+  shouldRenderProfileHeaderLink,
+} from "./UserMenu.logic";
+
+describe("UserMenu - desktop popover overflow fix", () => {
+  it("bounds the popover height to the available viewport space", () => {
+    // The core of issue #252: without a max-height the menu overflows past
+    // the viewport bottom on short screens and the lower items are unreachable.
+    expect(DESKTOP_POPOVER_CONTENT_CLASS).toContain(
+      "max-h-[var(--radix-popover-content-available-height)]",
+    );
+  });
+
+  it("enables vertical scroll so clipped items stay reachable", () => {
+    expect(DESKTOP_POPOVER_CONTENT_CLASS).toContain("overflow-y-auto");
+  });
+
+  it("retains the two-column grid layout", () => {
+    expect(DESKTOP_POPOVER_CONTENT_CLASS).toContain("sm:grid-cols-2");
+  });
+});
+
+describe("UserMenu - profile header link decision", () => {
+  it("renders a link when a non-empty profileHref is provided", () => {
+    expect(shouldRenderProfileHeaderLink("/profile")).toBe(true);
+  });
+
+  it("renders a non-interactive label when profileHref is omitted", () => {
+    expect(shouldRenderProfileHeaderLink(undefined)).toBe(false);
+  });
+
+  it("treats an empty string as no link (avoids an href-less anchor)", () => {
+    expect(shouldRenderProfileHeaderLink("")).toBe(false);
+  });
+});

package/src/components/UserMenu.logic.ts

@@ -0,0 +1,30 @@
+/**
+ * Pure, DOM-free logic for {@link UserMenu}, separated so it can be unit
+ * tested without a browser environment.
+ *
+ * The repo's CI runs `bun test` from the repo root, which does NOT load the
+ * frontend happy-dom preload (that only applies when `bun test` runs with cwd
+ * inside `core/ui`). Component-render tests therefore cannot run in CI, so the
+ * testable behaviour lives here and is exercised by `UserMenu.logic.test.ts`
+ * (the same `*.logic.ts` + `*.logic.test.ts` split used by `ScriptTestPanel`).
+ */
+
+/**
+ * Class names for the desktop user-menu popover content.
+ *
+ * Bounds the popover to the space the trigger leaves below it
+ * (`--radix-popover-content-available-height`) and makes the body scroll, so
+ * on short viewports the lower menu items stay reachable. The two-column grid
+ * (`sm:grid-cols-2`) is retained.
+ */
+export const DESKTOP_POPOVER_CONTENT_CLASS =
+  "w-[400px] md:w-[460px] p-2 grid grid-cols-1 sm:grid-cols-2 gap-1 max-h-[var(--radix-popover-content-available-height)] overflow-y-auto";
+
+/**
+ * The name/email header renders as a clickable profile link only when a
+ * non-empty `profileHref` is provided; otherwise it is a non-interactive
+ * label. This is the single source of truth for that branch in `UserMenu`.
+ */
+export function shouldRenderProfileHeaderLink(profileHref?: string): boolean {
+  return typeof profileHref === "string" && profileHref.length > 0;
+}

package/src/components/UserMenu.tsx

@@ -11,6 +11,10 @@ import {
 import { MenuCloseContext, DropdownMenuLabel, DropdownMenuSeparator } from "./Menu";
 import { useIsMobile } from "../hooks/useIsMobile";
 import { cn } from "../utils";
+import {
+  DESKTOP_POPOVER_CONTENT_CLASS,
+  shouldRenderProfileHeaderLink,
+} from "./UserMenu.logic";
 
 interface UserMenuProps {
   user: {
@@ -18,12 +22,21 @@ interface UserMenuProps {
     name?: string;
     image?: string;
   };
+  /**
+   * Optional href for the profile link rendered in the user info header.
+   * When provided, the name/email header becomes a focusable anchor that
+   * navigates to the profile page - supporting middle-click / open-in-new-tab.
+   * UserMenu must NOT import router hooks, so the caller is responsible for
+   * constructing this href (e.g. `resolveRoute(authRoutes.routes.profile)`).
+   */
+  profileHref?: string;
   children?: React.ReactNode;
   className?: string;
 }
 
 export const UserMenu: React.FC<UserMenuProps> = ({
   user,
+  profileHref,
   children,
   className,
 }) => {
@@ -68,17 +81,32 @@ export const UserMenu: React.FC<UserMenuProps> = ({
     </button>
   );
 
-  const userInfo = (
-    <DropdownMenuLabel>
-      <div className="flex flex-col">
-        <span className="text-sm font-bold text-foreground truncate">
-          {user.name || "User"}
-        </span>
-        <span className="text-xs font-normal text-muted-foreground truncate">
-          {user.email}
-        </span>
-      </div>
-    </DropdownMenuLabel>
+  const userInfoContent = (
+    <div className="flex flex-col">
+      <span className="text-sm font-bold text-foreground truncate">
+        {user.name || "User"}
+      </span>
+      <span className="text-xs font-normal text-muted-foreground truncate">
+        {user.email}
+      </span>
+    </div>
+  );
+
+  const userInfo = shouldRenderProfileHeaderLink(profileHref) ? (
+    <a
+      href={profileHref}
+      onClick={() => setIsOpen(false)}
+      className={cn(
+        "col-span-full block px-4 py-2 rounded-sm",
+        "hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+        "transition-colors",
+      )}
+    >
+      {userInfoContent}
+      <span className="sr-only"> - Go to profile</span>
+    </a>
+  ) : (
+    <DropdownMenuLabel>{userInfoContent}</DropdownMenuLabel>
   );
 
   if (isMobile) {
@@ -111,7 +139,7 @@ export const UserMenu: React.FC<UserMenuProps> = ({
         <PopoverTrigger asChild>{trigger}</PopoverTrigger>
         <PopoverContent
           align="end"
-          className="w-[400px] md:w-[460px] p-2 grid grid-cols-1 sm:grid-cols-2 gap-1"
+          className={DESKTOP_POPOVER_CONTENT_CLASS}
           onCloseAutoFocus={(e) => e.preventDefault()}
         >
           {userInfo}

package/src/components/iconRegistry.tsx

@@ -0,0 +1,27 @@
+import { icons } from "lucide-react";
+import type { LucideIconName } from "@checkstack/common";
+
+// Lazy-loaded icon registry.
+//
+// Importing lucide's `icons` map pulls the ENTIRE ~1600-icon set into one
+// module. This file is therefore imported ONLY via `React.lazy` from
+// `DynamicIcon`, so that whole set lands in a single on-demand chunk that the
+// initial load never fetches (DynamicIcon isn't rendered in the global nav -
+// it's used in dialogs, cards, and specific pages). Statically named-imported
+// icons elsewhere (`import { Plus } from "lucide-react"`) are unaffected and
+// tree-shaken normally into their eager chunks.
+
+/**
+ * Render a lucide icon by its PascalCase name. Falls back to the `Settings`
+ * icon for an unknown name (matching the previous DynamicIcon behaviour).
+ */
+export default function RegistryIcon({
+  name,
+  className,
+}: {
+  name: LucideIconName;
+  className?: string;
+}) {
+  const Icon = icons[name] ?? icons.Settings;
+  return <Icon className={className} />;
+}

package/src/index.ts

@@ -10,11 +10,13 @@ export * from "./components/SectionHeader";
 export * from "./components/StatusCard";
 export * from "./components/EmptyState";
 export * from "./components/LoadingSpinner";
+export * from "./components/Spinner";
 export * from "./components/Menu";
 export * from "./components/UserMenu";
 export * from "./components/EditableText";
 export * from "./components/ConfirmationModal";
 export * from "./components/HealthBadge";
+export * from "./components/StatusBadge";
 export * from "./components/Table";
 export * from "./utils";
 export * from "./components/Select";
@@ -49,6 +51,7 @@ export * from "./components/StatusUpdateTimeline";
 export * from "./components/LinksEditor";
 export * from "./components/Slider";
 export * from "./components/DynamicIcon";
+export * from "./components/BrandIcon";
 export * from "./components/StrategyConfigCard";
 export * from "./components/Markdown";
 export * from "./components/ColorPicker";

package/stories/Introduction.mdx

@@ -46,5 +46,5 @@ inherit light/dark mode. Use semantic Tailwind classes (`bg-primary`,
 - Components are built on Radix primitives where keyboard / focus / ARIA
   behavior is non-trivial.
 - Animation-heavy components respect the `usePerformance` hook's `isLowPower`
-  flag — see [the performance rule](https://github.com/enyineer/checkstack/blob/main/.agent/rules/performance.md)
+  flag — see [the performance rule](https://github.com/enyineer/checkstack/blob/main/.claude/rules/performance.md)
   for the full contract plugins are expected to follow.

package/stories/Markdown.stories.tsx

@@ -33,3 +33,59 @@ Read more in the [strategies guide](https://example.com).`}
     </MarkdownBlock>
   ),
 };
+
+// GFM tables (and strikethrough / autolinks) render via remark-gfm. The
+// assistant frequently summarizes a draft as a table, so this must render as a
+// real table, not a collapsed line of pipes.
+export const Table: Story = {
+  render: () => (
+    <MarkdownBlock>
+      {`Here's the draft:
+
+| Field | Value |
+|---|---|
+| URL | https://example.com/status |
+| Method | GET |
+| Assertion | statusCode = 200 |
+| Interval | 60s |
+| Timeout | 10s |
+
+~~old value~~ replaced.`}
+    </MarkdownBlock>
+  ),
+};
+
+// The assistant sometimes folds a long diff behind a native <details> disclosure.
+// Raw HTML is parsed (rehype-raw) and sanitized (rehype-sanitize) so the
+// collapsible renders as a click-to-expand widget instead of leaking the literal
+// tags as text. Click the summary to expand.
+export const Disclosure: Story = {
+  render: () => (
+    <MarkdownBlock>
+      {`Here are the planned changes - please confirm:
+
+<details>
+<summary>📝 View diff</summary>
+
+**Inline-Script:**
+
+\`\`\`diff
+- success: load < 0.6
++ success: load < (cpus().length * 0.6)
+\`\`\`
+
+</details>`}
+    </MarkdownBlock>
+  ),
+};
+
+// Sanitization closes the XSS surface: a script tag / event handler in model
+// output is stripped, so only the safe text survives. This must render the bold
+// text WITHOUT executing or showing any script.
+export const SanitizesUnsafeHtml: Story = {
+  render: () => (
+    <MarkdownBlock>
+      {`Safe **bold** text.<script>window.__pwned = true</script><img src=x onerror="window.__pwned = true">`}
+    </MarkdownBlock>
+  ),
+};

package/stories/Spinner.stories.tsx

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Loader2 } from "lucide-react";
+import { Spinner } from "../src/components/Spinner";
+import { Button } from "../src/components/Button";
+import { cn } from "../src/utils";
+
+const meta: Meta<typeof Spinner> = {
+  title: "Components/Feedback/Spinner",
+  component: Spinner,
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg"],
+    },
+  },
+  args: {
+    size: "sm",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Spinner>;
+
+export const Default: Story = {};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-6">
+      <div className="flex flex-col items-center gap-2">
+        <Spinner size="sm" />
+        <span className="text-xs text-muted-foreground">sm (h-4 w-4)</span>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <Spinner size="md" />
+        <span className="text-xs text-muted-foreground">md (h-5 w-5)</span>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <Spinner size="lg" />
+        <span className="text-xs text-muted-foreground">lg (h-6 w-6)</span>
+      </div>
+    </div>
+  ),
+};
+
+export const InButton: Story = {
+  render: () => (
+    <div className="flex items-center gap-3">
+      <Button disabled>
+        <Spinner size="sm" className="mr-2" />
+        Saving...
+      </Button>
+      <Button variant="outline" disabled>
+        <Spinner size="sm" className="mr-2" />
+        Loading
+      </Button>
+    </div>
+  ),
+};
+
+export const WithAriaLabel: Story = {
+  args: {
+    "aria-label": "Loading",
+  },
+};
+
+/**
+ * On low-power devices (or when the OS requests reduced motion) the spinner
+ * renders the static icon with no spin. The component handles this internally
+ * via `usePerformance().isLowPower`; this story renders the static icon
+ * directly to illustrate the result, since stories run with motion enabled.
+ */
+export const LowPowerStatic: Story = {
+  render: () => (
+    <div className="flex items-center gap-6">
+      <div className="flex flex-col items-center gap-2">
+        <Loader2 className={cn("h-4 w-4")} aria-hidden />
+        <span className="text-xs text-muted-foreground">sm (no spin)</span>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <Loader2 className={cn("h-5 w-5")} aria-hidden />
+        <span className="text-xs text-muted-foreground">md (no spin)</span>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <Loader2 className={cn("h-6 w-6")} aria-hidden />
+        <span className="text-xs text-muted-foreground">lg (no spin)</span>
+      </div>
+    </div>
+  ),
+};

package/tsconfig.json

@@ -13,6 +13,9 @@
     {
       "path": "../frontend-api"
     },
+    {
+      "path": "../template-engine"
+    },
     {
       "path": "../test-utils-frontend"
     }