@flamingo-stack/openframe-frontend-core 0.0.486 → 0.0.487

package/dist/index.js

@@ -504,6 +504,7 @@ import {
   ScrollFadeOverlay,
   ScrollShadow,
   SearchInput,
+  SearchableSelect,
   SectionSelector,
   Select,
   SelectButton,
@@ -586,6 +587,9 @@ import {
   TagsSelector,
   TaskTypeIcon,
   TermsAgreementLabel,
+  TestResultsSkeleton,
+  TestResultsTable,
+  TestRunResults,
   Textarea,
   ThemeProvider,
   ThinkingDisplay,
@@ -604,6 +608,7 @@ import {
   TimeTrackerHeaderButton,
   TimeTrackerPanel,
   TimeTrackerProvider,
+  TimingStat,
   TitleBlock,
   TitleContentBlock,
   Toggle,
@@ -749,6 +754,7 @@ import {
   formatRelativeTime,
   formatReleaseDate,
   formatSingularLookupInvocation,
+  formatTestRunDuration,
   formatTicketFullTimestamp,
   formatTicketRelativeTime,
   formatTimeWithTimezone,
@@ -965,6 +971,7 @@ import {
   useSlashCommandRegistry,
   useSlashCommands,
   useSseChatAdapter,
+  useTestRunState,
   useTheme,
   useThemeToggle,
   useTimeTracker,
@@ -980,7 +987,7 @@ import {
   walkthroughDismissCookieName,
   withFirstTouchAttribution,
   writeDismissCookie
-} from "./chunk-REURWDBC.js";
+} from "./chunk-BC74IKAX.js";
 import {
   CommandApprovalToast,
   DEFAULT_MIN_FILL_MS,
@@ -1956,6 +1963,7 @@ export {
   ScrollShadow,
   SearchIcon,
   SearchInput,
+  SearchableSelect,
   SectionSelector,
   Select,
   SelectButton,
@@ -2064,6 +2072,9 @@ export {
   TaskTypeIcon,
   TelegramIcon,
   TermsAgreementLabel,
+  TestResultsSkeleton,
+  TestResultsTable,
+  TestRunResults,
   Textarea,
   ThemeProvider,
   ThinkingDisplay,
@@ -2084,6 +2095,7 @@ export {
   TimeTrackerHeaderButton,
   TimeTrackerPanel,
   TimeTrackerProvider,
+  TimingStat,
   TitleBlock,
   TitleContentBlock,
   ToastCard,
@@ -2267,6 +2279,7 @@ export {
   formatRelativeTime,
   formatReleaseDate,
   formatSingularLookupInvocation,
+  formatTestRunDuration,
   formatTicketFullTimestamp,
   formatTicketRelativeTime,
   formatTimeWithTimezone,
@@ -2570,6 +2583,7 @@ export {
   useSseChatAdapter,
   useSuppressCloneFocus,
   useTablePagination,
+  useTestRunState,
   useTheme,
   useThemeToggle,
   useThrottle,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.486",
+  "version": "0.0.487",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/ui/assignee-dropdown.tsx

@@ -1,11 +1,10 @@
 'use client'
 
-import * as PopoverPrimitive from '@radix-ui/react-popover'
 import * as React from 'react'
-import { CheckIcon, PenEditIcon, SearchIcon, UserIcon, UserPlusIcon } from '../icons-v2-generated'
+import { PenEditIcon, UserIcon, UserPlusIcon } from '../icons-v2-generated'
 import { cn } from '../../utils/cn'
 import { Autocomplete, type AutocompleteOption } from './autocomplete'
-import { Input } from './input'
+import { SearchableSelect, type SearchableSelectOption } from './searchable-select'
 import { SquareAvatar } from './square-avatar'
 
 export interface TicketAssigneeOption {
@@ -42,31 +41,33 @@ function CompactAssigneeDropdown({
   onAssign,
   className,
 }: AssigneeDropdownProps) {
-  const [isOpen, setIsOpen] = React.useState(false)
-  const [search, setSearch] = React.useState('')
   const hasAssignee = !!currentAssignee
 
-  React.useEffect(() => {
-    if (!isOpen) setSearch('')
-  }, [isOpen])
-
-  const filtered = React.useMemo(() => {
-    const q = search.trim().toLowerCase()
-    if (!q) return options
-    return options.filter(o => o.label.toLowerCase().includes(q))
-  }, [options, search])
-
-  const orderedOptions = React.useMemo(() => {
-    if (!currentAssignee) return filtered
-    const current = filtered.find(o => o.value === currentAssignee.id)
-    if (!current) return filtered
-    return [current, ...filtered.filter(o => o.value !== currentAssignee.id)]
-  }, [filtered, currentAssignee])
+  // Current assignee first; SearchableSelect filters but never reorders.
+  const orderedOptions = React.useMemo<SearchableSelectOption[]>(() => {
+    const withAvatars = options.map(o => ({
+      value: o.value,
+      label: o.label,
+      icon: (
+        <SquareAvatar
+          src={o.imageUrl}
+          alt={o.label}
+          fallback={o.label}
+          size="sm"
+          variant="round"
+          className="h-6 w-6 shrink-0"
+        />
+      ),
+    }))
+    if (!currentAssignee) return withAvatars
+    const current = withAvatars.find(o => o.value === currentAssignee.id)
+    if (!current) return withAvatars
+    return [current, ...withAvatars.filter(o => o.value !== currentAssignee.id)]
+  }, [options, currentAssignee])
 
   const handleSelect = (userId: string) => {
-    const next = currentAssignee?.id === userId ? null : userId
-    onAssign(next)
-    setIsOpen(false)
+    // Selecting the current assignee again unassigns.
+    onAssign(currentAssignee?.id === userId ? null : userId)
   }
 
   const trigger = hasAssignee ? (
@@ -102,73 +103,17 @@ function CompactAssigneeDropdown({
   )
 
   return (
-    <PopoverPrimitive.Root open={isOpen} onOpenChange={setIsOpen} modal={false}>
-      <PopoverPrimitive.Trigger asChild>{trigger}</PopoverPrimitive.Trigger>
-      <PopoverPrimitive.Portal>
-        <PopoverPrimitive.Content
-          align="end"
-          sideOffset={6}
-          className={cn(
-            'z-50 w-72 bg-ods-card border border-ods-border rounded-[6px] shadow-lg overflow-hidden',
-            'data-[state=open]:animate-in data-[state=closed]:animate-out',
-            'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-            'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
-            'data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2',
-          )}
-        >
-          <div className="border-b border-ods-border">
-            <Input
-              autoFocus
-              value={search}
-              onChange={e => setSearch(e.target.value)}
-              placeholder="Search users..."
-              startAdornment={<SearchIcon className="size-4 text-ods-text-secondary" />}
-              className="rounded-none border-0"
-            />
-          </div>
-          <div className="max-h-80 overflow-y-auto py-[var(--spacing-system-xs)]" role="listbox">
-            {isLoading ? (
-              <div className="px-[var(--spacing-system-sf)] py-[var(--spacing-system-s)] text-h5 text-ods-text-secondary">
-                Loading…
-              </div>
-            ) : orderedOptions.length === 0 ? (
-              <div className="px-[var(--spacing-system-sf)] py-[var(--spacing-system-s)] text-h5 text-ods-text-secondary">
-                No users found
-              </div>
-            ) : (
-              orderedOptions.map(opt => {
-                const isCurrent = currentAssignee?.id === opt.value
-                return (
-                  <button
-                    key={opt.value}
-                    type="button"
-                    role="option"
-                    aria-selected={isCurrent}
-                    onClick={() => handleSelect(opt.value)}
-                    className={cn(
-                      'flex items-center gap-[var(--spacing-system-xs)] w-full px-[var(--spacing-system-sf)] py-[var(--spacing-system-xs)] text-left',
-                      'hover:bg-ods-bg-hover transition-colors',
-                      isCurrent && 'bg-ods-bg-hover',
-                    )}
-                  >
-                    <SquareAvatar
-                      src={opt.imageUrl}
-                      alt={opt.label}
-                      fallback={opt.label}
-                      size="sm"
-                      variant="round"
-                      className="h-6 w-6 shrink-0"
-                    />
-                    <span className="flex-1 truncate text-h4 text-ods-text-primary" title={opt.label}>{opt.label}</span>
-                    {isCurrent && <CheckIcon className="size-4 shrink-0 text-ods-accent" />}
-                  </button>
-                )
-              })
-            )}
-          </div>
-        </PopoverPrimitive.Content>
-      </PopoverPrimitive.Portal>
-    </PopoverPrimitive.Root>
+    <SearchableSelect
+      options={orderedOptions}
+      value={currentAssignee?.id ?? null}
+      onValueChange={handleSelect}
+      searchPlaceholder="Search users..."
+      emptyText="No users found"
+      isLoading={isLoading}
+      trigger={trigger}
+      align="end"
+      contentClassName="w-72"
+    />
   )
 }
 

package/src/components/ui/index.ts

@@ -167,6 +167,8 @@ export * from './ticket-status-tag'
 export * from './ticket-status-config-row'
 export * from './color-swatch'
 export * from './color-preset-select'
+export * from './searchable-select'
+export * from './test-run'
 export * from './assignee-dropdown'
 export * from './ticket-info-section'
 export * from './ticket-detail-section'

package/src/components/ui/searchable-select.tsx

@@ -0,0 +1,186 @@
+'use client'
+
+import * as PopoverPrimitive from '@radix-ui/react-popover'
+import * as React from 'react'
+import { CheckIcon, SearchIcon } from '../icons-v2-generated'
+import { Chevron02DownIcon } from '../icons-v2-generated/arrows/chevron-02-down-icon'
+import { cn } from '../../utils/cn'
+import { Input } from './input'
+
+export interface SearchableSelectOption {
+  value: string
+  label: string
+  /** Optional leading visual for the option row (avatar, icon, badge). */
+  icon?: React.ReactNode
+}
+
+export interface SearchableSelectProps {
+  options: SearchableSelectOption[]
+  /** Currently selected option value; null/undefined when nothing is selected. */
+  value?: string | null
+  onValueChange: (value: string) => void
+  /** Default trigger text while nothing is selected. */
+  placeholder?: string
+  /** Placeholder of the search input rendered as the first dropdown item. */
+  searchPlaceholder?: string
+  emptyText?: string
+  loadingText?: string
+  isLoading?: boolean
+  disabled?: boolean
+  /**
+   * Custom trigger node (rendered via Popover.Trigger asChild). When omitted,
+   * a select-like button (Input/SelectTrigger styling, chevron, placeholder)
+   * is rendered.
+   */
+  trigger?: React.ReactNode
+  /** Custom option-row renderer; default is icon + label + selected check. */
+  renderOption?: (option: SearchableSelectOption, isSelected: boolean) => React.ReactNode
+  align?: 'start' | 'center' | 'end'
+  /** Classes for the default trigger button. */
+  className?: string
+  /** Classes for the popover content (e.g. a fixed width for icon triggers). */
+  contentClassName?: string
+}
+
+/**
+ * Select-style dropdown whose first item is a search field filtering the
+ * option list — the pattern used by the ticket assignee picker ("Search
+ * users...") generalized for any entity (devices, users, ...). Provide a
+ * custom `trigger` for icon-button use cases; the default trigger looks and
+ * behaves like `SelectTrigger`.
+ */
+export function SearchableSelect({
+  options,
+  value = null,
+  onValueChange,
+  placeholder = 'Select...',
+  searchPlaceholder = 'Search...',
+  emptyText = 'No results found',
+  loadingText = 'Loading…',
+  isLoading = false,
+  disabled = false,
+  trigger,
+  renderOption,
+  align = 'start',
+  className,
+  contentClassName,
+}: SearchableSelectProps) {
+  const [isOpen, setIsOpen] = React.useState(false)
+  const [search, setSearch] = React.useState('')
+
+  React.useEffect(() => {
+    if (!isOpen) setSearch('')
+  }, [isOpen])
+
+  const filtered = React.useMemo(() => {
+    const q = search.trim().toLowerCase()
+    if (!q) return options
+    return options.filter(o => o.label.toLowerCase().includes(q))
+  }, [options, search])
+
+  const selectedOption = React.useMemo(
+    () => (value != null ? options.find(o => o.value === value) : undefined),
+    [options, value],
+  )
+
+  const handleSelect = (optionValue: string) => {
+    onValueChange(optionValue)
+    setIsOpen(false)
+  }
+
+  const defaultTrigger = (
+    <button
+      type="button"
+      disabled={disabled}
+      className={cn(
+        // Mirrors SelectTrigger so the closed state is indistinguishable from
+        // the regular Select.
+        'flex w-full items-center justify-between gap-2 rounded-md border px-3 h-11 md:h-12 outline-none text-left',
+        'text-h4 bg-ods-card border-ods-border',
+        selectedOption ? 'text-ods-text-primary' : 'text-ods-text-secondary',
+        'enabled:hover:bg-ods-bg-hover enabled:hover:border-ods-border-hover enabled:active:bg-ods-bg-active enabled:active:border-ods-border-active',
+        'data-[state=open]:border-ods-accent data-[state=open]:hover:border-ods-accent',
+        'group disabled:!cursor-not-allowed disabled:bg-ods-bg transition-colors duration-200 cursor-pointer',
+        className,
+      )}
+    >
+      <span className="line-clamp-1">{selectedOption ? selectedOption.label : placeholder}</span>
+      <Chevron02DownIcon
+        className="shrink-0 text-ods-text-secondary transition-all duration-200 group-data-[state=open]:rotate-180 group-data-[state=open]:text-ods-accent"
+        size={24}
+      />
+    </button>
+  )
+
+  return (
+    <PopoverPrimitive.Root open={isOpen} onOpenChange={disabled ? undefined : setIsOpen} modal={false}>
+      <PopoverPrimitive.Trigger asChild>{trigger ?? defaultTrigger}</PopoverPrimitive.Trigger>
+      <PopoverPrimitive.Portal>
+        <PopoverPrimitive.Content
+          align={align}
+          sideOffset={6}
+          className={cn(
+            'z-50 min-w-[var(--radix-popover-trigger-width)] bg-ods-card border border-ods-border rounded-md shadow-lg overflow-hidden',
+            'data-[state=open]:animate-in data-[state=closed]:animate-out',
+            'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+            'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+            'data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2',
+            contentClassName,
+          )}
+        >
+          <div className="border-b border-ods-border">
+            <Input
+              autoFocus
+              value={search}
+              onChange={e => setSearch(e.target.value)}
+              placeholder={searchPlaceholder}
+              startAdornment={<SearchIcon className="size-4 text-ods-text-secondary" />}
+              className="rounded-none border-0"
+            />
+          </div>
+          <div className="max-h-80 overflow-y-auto py-[var(--spacing-system-xs)]" role="listbox">
+            {isLoading ? (
+              <div className="px-[var(--spacing-system-sf)] py-[var(--spacing-system-s)] text-h5 text-ods-text-secondary">
+                {loadingText}
+              </div>
+            ) : filtered.length === 0 ? (
+              <div className="px-[var(--spacing-system-sf)] py-[var(--spacing-system-s)] text-h5 text-ods-text-secondary">
+                {emptyText}
+              </div>
+            ) : (
+              filtered.map(opt => {
+                const isSelected = value === opt.value
+                return (
+                  <button
+                    key={opt.value}
+                    type="button"
+                    role="option"
+                    aria-selected={isSelected}
+                    onClick={() => handleSelect(opt.value)}
+                    className={cn(
+                      'flex items-center gap-[var(--spacing-system-xs)] w-full px-[var(--spacing-system-sf)] py-[var(--spacing-system-xs)] text-left',
+                      'hover:bg-ods-bg-hover transition-colors',
+                      isSelected && 'bg-ods-bg-hover',
+                    )}
+                  >
+                    {renderOption ? (
+                      renderOption(opt, isSelected)
+                    ) : (
+                      <>
+                        {opt.icon}
+                        <span className="flex-1 truncate text-h4 text-ods-text-primary" title={opt.label}>
+                          {opt.label}
+                        </span>
+                        {isSelected && <CheckIcon className="size-4 shrink-0 text-ods-accent" />}
+                      </>
+                    )}
+                  </button>
+                )
+              })
+            )}
+          </div>
+        </PopoverPrimitive.Content>
+      </PopoverPrimitive.Portal>
+    </PopoverPrimitive.Root>
+  )
+}