@checkstack/ui 1.11.0 → 1.13.0

package/src/components/TimeOfDayInput.tsx

@@ -0,0 +1,116 @@
+import React, { useEffect, useState } from "react";
+import { Clock } from "lucide-react";
+
+const padZero = (value: number): string => String(value).padStart(2, "0");
+const filterNumeric = (value: string): string => value.replaceAll(/[^0-9]/g, "");
+
+export interface TimeOfDayInputProps {
+  /** `"HH:mm"` (24h) or undefined when unset. */
+  value: string | undefined;
+  onChange: (next: string | undefined) => void;
+  disabled?: boolean;
+  id?: string;
+  className?: string;
+}
+
+/** Split a `"HH:mm"` string into its fields, tolerating partial input. */
+function split(value: string | undefined): { hour: string; minute: string } {
+  if (!value) return { hour: "", minute: "" };
+  const [h = "", m = ""] = value.split(":");
+  return { hour: h, minute: m };
+}
+
+/**
+ * 24h time-of-day (HH:MM) input. Two numeric fields mirroring the time
+ * section of {@link DateTimePicker}. Emits a `"HH:mm"` string (or
+ * undefined when either field is empty), the exact shape the automation
+ * `time` condition's `after` / `before` accept - so it round-trips
+ * losslessly through YAML.
+ *
+ * Plain inputs, no animations - no `usePerformance` gating needed.
+ */
+export const TimeOfDayInput: React.FC<TimeOfDayInputProps> = ({
+  value,
+  onChange,
+  disabled,
+  id,
+  className,
+}) => {
+  const [fields, setFields] = useState(() => split(value));
+  const isInternalChange = React.useRef(false);
+
+  // Sync from external value changes (not our own edits).
+  useEffect(() => {
+    if (isInternalChange.current) {
+      isInternalChange.current = false;
+      return;
+    }
+    setFields(split(value));
+  }, [value]);
+
+  const emit = (next: { hour: string; minute: string }) => {
+    isInternalChange.current = true;
+    const cleared: string | undefined = undefined;
+    if (next.hour === "" || next.minute === "") {
+      onChange(cleared);
+      return;
+    }
+    onChange(`${padZero(Number(next.hour))}:${padZero(Number(next.minute))}`);
+  };
+
+  const handleChange = (field: "hour" | "minute", raw: string) => {
+    const filtered = filterNumeric(raw).slice(0, 2);
+    const next = { ...fields, [field]: filtered };
+    setFields(next);
+    emit(next);
+  };
+
+  const handleBlur = (field: "hour" | "minute") => {
+    const raw = fields[field];
+    if (raw === "") return;
+    const n = Number(raw);
+    const max = field === "hour" ? 23 : 59;
+    const clamped = padZero(Math.min(Math.max(n, 0), max));
+    if (clamped !== raw) {
+      const next = { ...fields, [field]: clamped };
+      setFields(next);
+      emit(next);
+    }
+  };
+
+  return (
+    <div
+      className={`inline-flex items-center border rounded-lg bg-background px-2 py-1 ${
+        className ?? ""
+      }`}
+    >
+      <Clock className="h-4 w-4 text-muted-foreground mr-2" />
+      <input
+        id={id}
+        type="text"
+        inputMode="numeric"
+        value={fields.hour}
+        onChange={(event) => handleChange("hour", event.target.value)}
+        onBlur={() => handleBlur("hour")}
+        placeholder="HH"
+        aria-label="Hour"
+        className="w-7 text-center bg-transparent border-none outline-none text-sm font-mono disabled:opacity-50"
+        maxLength={2}
+        disabled={disabled}
+      />
+      <span className="text-muted-foreground">:</span>
+      <input
+        type="text"
+        inputMode="numeric"
+        value={fields.minute}
+        onChange={(event) => handleChange("minute", event.target.value)}
+        onBlur={() => handleBlur("minute")}
+        placeholder="MM"
+        aria-label="Minute"
+        className="w-7 text-center bg-transparent border-none outline-none text-sm font-mono disabled:opacity-50"
+        maxLength={2}
+        disabled={disabled}
+      />
+    </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/comboboxInteraction.ts

@@ -0,0 +1,39 @@
+/**
+ * Marker attribute placed on a combobox's anchor `<input>` so a Radix
+ * `PopoverContent`'s dismissable layer can recognize an interaction that
+ * originated on the anchor itself.
+ *
+ * Radix treats the anchor as "outside" the floating content, so the very
+ * click/focus that opens the list also fires `onPointerDownOutside` /
+ * `onFocusOutside` and dismisses it on the same frame (the "opens then
+ * immediately closes" flicker). Guarding those handlers against anchor-origin
+ * events keeps the list open.
+ *
+ * Usage (see `PackageNameCombobox` / `SecretEnvEditor`):
+ *   1. Spread {@link comboboxAnchorProps} onto the anchor `<input>`.
+ *   2. On `PopoverContent`, in both `onPointerDownOutside` and
+ *      `onFocusOutside`, call `event.preventDefault()` when
+ *      {@link isAnchorInteraction} matches the event target.
+ *   3. Prevent `onCloseAutoFocus` default.
+ *   4. Option buttons use `onMouseDown` + `preventDefault` so a click selects
+ *      before the input blurs.
+ *
+ * Lives in `@checkstack/ui` so every combobox (across plugins) shares one
+ * implementation.
+ */
+export const COMBOBOX_ANCHOR_ATTR = "data-combobox-anchor";
+
+/** Props to spread onto the anchor `<input>` so {@link isAnchorInteraction} can match it. */
+export const comboboxAnchorProps: Record<string, string> = {
+  [COMBOBOX_ANCHOR_ATTR]: "",
+};
+
+/**
+ * Whether an event target is (or is inside) a combobox anchor input. Pure +
+ * DOM-only so it is unit-testable without a React render. Tolerates a null
+ * target and non-Element targets (returns false).
+ */
+export function isAnchorInteraction(target: EventTarget | null): boolean {
+  if (!target || !(target instanceof Element)) return false;
+  return target.closest(`[${COMBOBOX_ANCHOR_ATTR}]`) !== null;
+}

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/components/portalContainer.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+
+/**
+ * The DOM element a floating layer (e.g. a {@link PopoverContent}) should
+ * portal INTO when it is rendered inside a modal Sheet/Dialog.
+ *
+ * Radix modal dialogs lock body scroll via `react-remove-scroll`, which
+ * prevents wheel/touch scrolling on anything portaled to `document.body`
+ * (i.e. outside the dialog's DOM subtree). A Popover whose list overflows
+ * therefore can't scroll while a Sheet/Dialog is open. Portaling the Popover
+ * INTO the dialog content keeps it inside the allowed-scroll subtree, so its
+ * inner `overflow-y-auto` works again. Radix positions popovers with
+ * `position: fixed`, so the container has no effect on placement or clipping.
+ *
+ * `null` (the default, outside any Sheet/Dialog) means portal to `body` as
+ * usual.
+ */
+export const PortalContainerContext = React.createContext<HTMLElement | null>(
+  null,
+);
+
+/** Read the nearest Sheet/Dialog content element to portal a popover into. */
+export const usePortalContainer = (): HTMLElement | null =>
+  React.useContext(PortalContainerContext);

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";
@@ -41,12 +43,15 @@ export * from "./components/Pagination";
 export * from "./components/PaginatedList";
 export * from "./hooks/usePagination";
 export * from "./components/DateTimePicker";
+export * from "./components/DurationInput";
+export * from "./components/TimeOfDayInput";
 export * from "./components/DateRangeFilter";
 export * from "./components/BackLink";
 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";
@@ -61,12 +66,14 @@ export * from "./components/VariablePicker";
 export * from "./components/TemplateInput";
 export * from "./components/TemplateInputToggle";
 export * from "./components/ActionCard";
+export * from "./components/ScriptTestPanel";
 export * from "./components/AnimatedNumber";
 export * from "./hooks/useAnimatedNumber";
 export * from "./components/IDELayout";
 export * from "./components/MetricTile";
 export * from "./components/Sheet";
 export * from "./components/Popover";
+export * from "./components/comboboxInteraction";
 export * from "./hooks/useIsMobile";
 export * from "./hooks/useInitOnceForKey";
 export * from "./components/ListEmptyState";

package/stories/ActionCard.stories.tsx

@@ -60,3 +60,63 @@ export const MinimalNoToggle: Story = {
     </div>
   ),
 };
+
+/**
+ * Home-Assistant-style collapsed summary row. Passing `onOpenSheet` makes the
+ * card a non-expanding summary: clicking the header opens the item's full
+ * config in a side sheet (wired up by the host) instead of expanding inline.
+ * `summary` renders a compact one-line hint under the title, and `actions`
+ * adds a three-dot overflow menu (Duplicate / Disable / Delete).
+ */
+const CollapsedSummaryDemo = () => {
+  const [enabled, setEnabled] = useState(true);
+  return (
+    <div className="w-[680px] space-y-2 p-4">
+      <ActionCard
+        id="notify-1"
+        title="Notify User"
+        category="Notification"
+        icon="Bell"
+        summary="notify_user → on-call engineer"
+        enabled={enabled}
+        onOpenSheet={() => alert("Open config sheet")}
+        actions={[
+          {
+            label: enabled ? "Disable" : "Enable",
+            icon: enabled ? "PowerOff" : "Power",
+            onClick: () => setEnabled((value) => !value),
+          },
+          { label: "Duplicate", icon: "Copy", onClick: () => alert("Duplicate") },
+          {
+            label: "Delete",
+            icon: "Trash2",
+            onClick: () => alert("Delete"),
+            variant: "destructive",
+          },
+        ]}
+      />
+      <ActionCard
+        id="choose-1"
+        title="Choose (if / else)"
+        category="Choose"
+        icon="GitBranch"
+        summary="2 branches + else"
+        onOpenSheet={() => alert("Open config sheet")}
+        errors={["choose.0.when: condition is required"]}
+        actions={[
+          { label: "Duplicate", icon: "Copy", onClick: () => alert("Duplicate") },
+          {
+            label: "Delete",
+            icon: "Trash2",
+            onClick: () => alert("Delete"),
+            variant: "destructive",
+          },
+        ]}
+      />
+    </div>
+  );
+};
+
+export const CollapsedSummary: Story = {
+  render: () => <CollapsedSummaryDemo />,
+};

package/stories/CodeEditor.stories.tsx

@@ -14,9 +14,11 @@ type Story = StoryObj<typeof CodeEditor>;
 const Demo = ({
   language,
   initial,
+  minHeight = "280px",
 }: {
-  language: "json" | "yaml" | "javascript";
+  language: "json" | "yaml" | "javascript" | "typescript" | "shell";
   initial: string;
+  minHeight?: string;
 }) => {
   const [value, setValue] = useState(initial);
   return (
@@ -24,7 +26,7 @@ const Demo = ({
       value={value}
       onChange={setValue}
       language={language}
-      minHeight="280px"
+      minHeight={minHeight}
     />
   );
 };
@@ -65,3 +67,46 @@ export default async function check({ fetch }) {
     />
   ),
 };
+
+/**
+ * The top-right "Expand editor" affordance opens the same editor in a large
+ * full-screen overlay. The inline editor here is deliberately short so the
+ * value of expanding a long script is obvious; both editors share the same
+ * value, so edits made in the overlay persist after closing it.
+ */
+export const Popout: Story = {
+  render: () => (
+    <Demo
+      language="typescript"
+      minHeight="120px"
+      initial={`// A longer script - click the expand icon (top-right) to edit it in a
+// comfortable full-screen overlay. Edits sync back to the inline editor.
+import { setTimeout as sleep } from "node:timers/promises";
+
+export default async function run({ context }) {
+  for (let attempt = 1; attempt <= 5; attempt += 1) {
+    const res = await fetch(context.url);
+    if (res.ok) {
+      return { ok: true, attempt };
+    }
+    await sleep(1000 * attempt);
+  }
+  return { ok: false };
+}`}
+    />
+  ),
+};
+
+/** Shell scripts get a "Edit script - Shell" overlay title. */
+export const Shell: Story = {
+  render: () => (
+    <Demo
+      language="shell"
+      minHeight="120px"
+      initial={`#!/usr/bin/env bash
+set -euo pipefail
+
+curl -fsS "$TARGET_URL" > /dev/null && echo "up" || echo "down"`}
+    />
+  ),
+};

package/stories/DurationInput.stories.tsx

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import {
+  DurationInput,
+  type DurationValue,
+} from "../src/components/DurationInput";
+import { Label } from "../src/components/Label";
+
+const meta: Meta<typeof DurationInput> = {
+  title: "Components/Inputs/DurationInput",
+  component: DurationInput,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof DurationInput>;
+
+const Demo = ({
+  initial,
+  defaultUnit,
+}: {
+  initial?: DurationValue;
+  defaultUnit?: "seconds" | "minutes" | "hours";
+}) => {
+  const [value, setValue] = useState<DurationValue | undefined>(initial);
+  return (
+    <div className="max-w-sm space-y-2">
+      <Label>Fire only if state holds for</Label>
+      <DurationInput
+        value={value}
+        onChange={setValue}
+        defaultUnit={defaultUnit}
+      />
+      <pre className="text-xs text-muted-foreground">
+        {JSON.stringify(value ?? null)}
+      </pre>
+    </div>
+  );
+};
+
+export const Empty: Story = { render: () => <Demo /> };
+
+export const Minutes: Story = {
+  render: () => <Demo initial={{ minutes: 30 }} />,
+};
+
+export const Hours: Story = {
+  render: () => <Demo initial={{ hours: 2 }} />,
+};
+
+export const SecondsDefault: Story = {
+  render: () => <Demo defaultUnit="seconds" />,
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <DurationInput value={{ minutes: 10 }} onChange={() => {}} disabled />
+  ),
+};

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>
+  ),
+};