@flamingo-stack/openframe-frontend-core 0.0.486-snapshot.20260727163255 → 0.0.486

package/dist/components/ui/searchable-select.d.ts

@@ -1,43 +0,0 @@
-import * as React from 'react';
-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 declare function SearchableSelect({ options, value, onValueChange, placeholder, searchPlaceholder, emptyText, loadingText, isLoading, disabled, trigger, renderOption, align, className, contentClassName, }: SearchableSelectProps): React.JSX.Element;
-//# sourceMappingURL=searchable-select.d.ts.map

package/dist/components/ui/searchable-select.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"searchable-select.d.ts","sourceRoot":"","sources":["../../../src/components/ui/searchable-select.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,wEAAwE;IACxE,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,sBAAsB,EAAE,CAAA;IACjC,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,2EAA2E;IAC3E,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,4EAA4E;IAC5E,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,EAAE,UAAU,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAA;IACvF,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,8EAA8E;IAC9E,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,KAAY,EACZ,aAAa,EACb,WAAyB,EACzB,iBAA+B,EAC/B,SAA8B,EAC9B,WAAwB,EACxB,SAAiB,EACjB,QAAgB,EAChB,OAAO,EACP,YAAY,EACZ,KAAe,EACf,SAAS,EACT,gBAAgB,GACjB,EAAE,qBAAqB,qBAuHvB"}

package/dist/components/ui/test-run.d.ts

@@ -1,74 +0,0 @@
-import * as React from 'react';
-import type { QueryResultRow } from './query-report-table';
-export declare function formatTestRunDuration(ms: number): string;
-/** Column-bar skeleton (header cells + one card row): fixed 160px columns on
-    every breakpoint, scrolling horizontally when they do not fit. Bars use
-    bg-ods-bg-surface like the table skeletons — the bg-ods-skeleton token is
-    the same color as the card background and would be invisible on the row. */
-export declare function TestResultsSkeleton(): React.JSX.Element;
-/**
- * Live test results rendered with the core DataTable (identical header,
- * skeleton, and card-row styling to the standard tables). Columns are derived
- * from the keys of the returned rows; wide result sets scroll horizontally.
- * Unlike the default tables, headers stay visible on every breakpoint.
- */
-export declare function TestResultsTable({ rows, loading }: {
-    rows: QueryResultRow[];
-    loading: boolean;
-}): React.JSX.Element;
-export interface TestRunResultsProps {
-    isActive: boolean;
-    displayRows: QueryResultRow[];
-    firstError: string | null;
-    className?: string;
-}
-/** Error line + empty state + result table for a finished/running test run. */
-export declare function TestRunResults({ isActive, displayRows, firstError, className }: TestRunResultsProps): React.JSX.Element;
-/** Started / Duration stat cell shown in a test-run controls row. */
-export declare function TimingStat({ value, label, className }: {
-    value: string;
-    label: string;
-    className?: string;
-}): React.JSX.Element;
-/**
- * The transport-side contract `useTestRunState` observes. Matches the shape
- * of a live-campaign hook (e.g. Fleet live queries in OpenFrame) without
- * depending on any concrete backend.
- */
-export interface TestRunCampaignState {
-    isRunning: boolean;
-    startedAt: Date | null;
-    /** '' before the first run, then 'pending' → 'finished'. */
-    campaignStatus: string;
-    results: QueryResultRow[];
-    errors: Array<{
-        error: string;
-    }>;
-    stopCampaign: () => void;
-}
-/**
- * State machine for one live test run: wraps a campaign-shaped object with
- * the run/stop/reset flow, elapsed-duration ticking, and the display flags
- * test panels render from. The consumer starts the actual campaign inside the
- * `start` callback passed to `run`:
- *
- * ```tsx
- * const campaign = useLiveCampaign()               // app-owned transport
- * const test = useTestRunState(campaign)
- * const handleRun = () => test.run(() => campaign.startCampaign(sql, [hostId]))
- * ```
- */
-export declare function useTestRunState(campaign: TestRunCampaignState): {
-    hasRun: boolean;
-    isActive: boolean;
-    isFinished: boolean;
-    showResults: boolean;
-    firstError: string | null;
-    startedLabel: string;
-    durationLabel: string;
-    displayRows: QueryResultRow[];
-    run: (start: () => Promise<unknown>) => Promise<void>;
-    stop: () => void;
-    reset: () => void;
-};
-//# sourceMappingURL=test-run.d.ts.map

package/dist/components/ui/test-run.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"test-run.d.ts","sourceRoot":"","sources":["../../../src/components/ui/test-run.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAY1D,wBAAgB,qBAAqB,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAMxD;AAKD;;;+EAG+E;AAC/E,wBAAgB,mBAAmB,sBA2BlC;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAAE,IAAI,EAAE,cAAc,EAAE,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,qBAkD/F;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,OAAO,CAAA;IACjB,WAAW,EAAE,cAAc,EAAE,CAAA;IAC7B,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,+EAA+E;AAC/E,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,mBAAmB,qBAsBnG;AAED,qEAAqE;AACrE,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,qBAO3G;AAED;;;;GAIG;AACH,MAAM,WAAW,oBAAoB;IACnC,SAAS,EAAE,OAAO,CAAA;IAClB,SAAS,EAAE,IAAI,GAAG,IAAI,CAAA;IACtB,4DAA4D;IAC5D,cAAc,EAAE,MAAM,CAAA;IACtB,OAAO,EAAE,cAAc,EAAE,CAAA;IACzB,MAAM,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IAChC,YAAY,EAAE,MAAM,IAAI,CAAA;CACzB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAAC,QAAQ,EAAE,oBAAoB;;;;;;;;;iBAwBhB,MAAM,OAAO,CAAC,OAAO,CAAC;;;EAgEnE"}

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

@@ -1,186 +0,0 @@
-'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>
-  )
-}

package/src/components/ui/test-run.tsx

@@ -1,282 +0,0 @@
-'use client'
-
-import type { ColumnDef, Row } from '@tanstack/react-table'
-import * as React from 'react'
-import { SearchIcon } from '../icons-v2-generated'
-import { cn } from '../../utils/cn'
-import { formatTime } from '../../utils/format-date'
-import { DataTable } from './data-table'
-import { useDataTable } from './data-table/use-data-table'
-import { NoData } from './no-data'
-import type { QueryResultRow } from './query-report-table'
-import { ScrollShadow } from './scroll-fade'
-
-/*
- * Live test-run building blocks: the UI (timing stats, one-row skeleton,
- * results table) and the run state machine for "run a query/script somewhere
- * and stream tabular results back" flows. The transport is NOT part of this
- * module — consumers own campaign creation (Fleet live queries, script runs,
- * ...) and pass a `TestRunCampaignState`-shaped object into
- * `useTestRunState`.
- */
-
-export function formatTestRunDuration(ms: number): string {
-  const totalSeconds = Math.floor(ms / 1000)
-  const hours = Math.floor(totalSeconds / 3600)
-  const minutes = Math.floor((totalSeconds % 3600) / 60)
-  const seconds = totalSeconds % 60
-  return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`
-}
-
-const RESULT_COLUMN_MIN_WIDTH = 176
-const SKELETON_COLUMNS = 6
-
-/** Column-bar skeleton (header cells + one card row): fixed 160px columns on
-    every breakpoint, scrolling horizontally when they do not fit. Bars use
-    bg-ods-bg-surface like the table skeletons — the bg-ods-skeleton token is
-    the same color as the card background and would be invisible on the row. */
-export function TestResultsSkeleton() {
-  return (
-    <ScrollShadow axis="horizontal">
-      {/* No gap between the header bars and the row card — the real table's
-          header and body sit flush. */}
-      <div className="flex w-max min-w-full flex-col">
-        <div className="flex items-center gap-[var(--spacing-system-mf)] px-[var(--spacing-system-mf)]">
-          {Array.from({ length: SKELETON_COLUMNS }).map((_, i) => (
-            <div key={`skeleton-header-${i}`} className="flex h-12 w-[160px] shrink-0 items-center">
-              <div className="h-4 w-3/4 rounded-sm bg-ods-bg-surface animate-pulse" />
-            </div>
-          ))}
-        </div>
-        <div className="rounded-[6px] border border-ods-border bg-ods-card overflow-hidden animate-pulse">
-          {/* Same INNER row heights as the DataTable (66/78px + the 1px card
-              border on each side = 68/80px total, per design). */}
-          <div className="flex h-[66px] md:h-[78px] items-center gap-[var(--spacing-system-mf)] px-[var(--spacing-system-mf)]">
-            {Array.from({ length: SKELETON_COLUMNS }).map((_, i) => (
-              <div key={`skeleton-cell-${i}`} className="w-[160px] shrink-0">
-                <div className="h-5 w-3/4 rounded-sm bg-ods-bg-surface" />
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    </ScrollShadow>
-  )
-}
-
-/**
- * Live test results rendered with the core DataTable (identical header,
- * skeleton, and card-row styling to the standard tables). Columns are derived
- * from the keys of the returned rows; wide result sets scroll horizontally.
- * Unlike the default tables, headers stay visible on every breakpoint.
- */
-export function TestResultsTable({ rows, loading }: { rows: QueryResultRow[]; loading: boolean }) {
-  const columnKeys = React.useMemo(() => (rows.length > 0 ? Object.keys(rows[0]) : []), [rows])
-
-  const columns = React.useMemo<ColumnDef<QueryResultRow>[]>(() => {
-    return columnKeys.map(key => ({
-      id: key,
-      accessorFn: (row: QueryResultRow) => row[key],
-      header: key,
-      enableSorting: false,
-      cell: ({ row }: { row: Row<QueryResultRow> }) => {
-        const value = row.original[key]
-        return (
-          <span className="text-h4 text-ods-text-primary truncate">
-            {value === null || value === undefined ? '-' : String(value)}
-          </span>
-        )
-      },
-      meta: {
-        width: 'flex-1 min-w-[176px]',
-        // Show headers on every breakpoint; headerClassName sizes the cells
-        // below lg where meta.width is not applied.
-        alwaysShowHeader: true,
-        headerClassName: 'flex-1 min-w-[176px]',
-      },
-    }))
-  }, [columnKeys])
-
-  const table = useDataTable<QueryResultRow>({
-    data: rows,
-    columns,
-    getRowId: (_row: QueryResultRow, index: number) => String(index),
-    enableSorting: false,
-  })
-
-  if (loading) {
-    return <TestResultsSkeleton />
-  }
-
-  return (
-    <ScrollShadow axis="horizontal">
-      <div style={{ minWidth: Math.max(1, columnKeys.length) * RESULT_COLUMN_MIN_WIDTH }}>
-        <DataTable table={table}>
-          {/* "flex" overrides the header's default "hidden md:flex" so the
-              headers render on mobile too. */}
-          <DataTable.Header className="flex flex-col" />
-          <DataTable.Body loading={false} />
-        </DataTable>
-      </div>
-    </ScrollShadow>
-  )
-}
-
-export interface TestRunResultsProps {
-  isActive: boolean
-  displayRows: QueryResultRow[]
-  firstError: string | null
-  className?: string
-}
-
-/** Error line + empty state + result table for a finished/running test run. */
-export function TestRunResults({ isActive, displayRows, firstError, className }: TestRunResultsProps) {
-  return (
-    <div className={cn('flex flex-col gap-[var(--spacing-system-xsf)]', className)}>
-      {firstError && (
-        <p role="alert" className="text-h6 text-ods-error">
-          {firstError}
-        </p>
-      )}
-      {!isActive && displayRows.length === 0 ? (
-        // With zero rows the error line alone explains the outcome; a
-        // "No results returned" empty state next to it would mislead.
-        // Otherwise: fixed-height empty state matching the 1-row
-        // skeleton/result height (48px header + 80px row, no gap) so the
-        // block does not jump between loading/result/empty.
-        !firstError && (
-          <NoData icon={<SearchIcon />} title="No results returned" className="h-[128px] justify-center !py-0" />
-        )
-      ) : (
-        <TestResultsTable rows={displayRows} loading={isActive && displayRows.length === 0} />
-      )}
-    </div>
-  )
-}
-
-/** Started / Duration stat cell shown in a test-run controls row. */
-export function TimingStat({ value, label, className }: { value: string; label: string; className?: string }) {
-  return (
-    <div className={cn('flex flex-col justify-center min-w-0', className)}>
-      <span className="text-h4 text-ods-text-secondary truncate">{value}</span>
-      <span className="text-h6 text-ods-text-secondary truncate">{label}</span>
-    </div>
-  )
-}
-
-/**
- * The transport-side contract `useTestRunState` observes. Matches the shape
- * of a live-campaign hook (e.g. Fleet live queries in OpenFrame) without
- * depending on any concrete backend.
- */
-export interface TestRunCampaignState {
-  isRunning: boolean
-  startedAt: Date | null
-  /** '' before the first run, then 'pending' → 'finished'. */
-  campaignStatus: string
-  results: QueryResultRow[]
-  errors: Array<{ error: string }>
-  stopCampaign: () => void
-}
-
-/**
- * State machine for one live test run: wraps a campaign-shaped object with
- * the run/stop/reset flow, elapsed-duration ticking, and the display flags
- * test panels render from. The consumer starts the actual campaign inside the
- * `start` callback passed to `run`:
- *
- * ```tsx
- * const campaign = useLiveCampaign()               // app-owned transport
- * const test = useTestRunState(campaign)
- * const handleRun = () => test.run(() => campaign.startCampaign(sql, [hostId]))
- * ```
- */
-export function useTestRunState(campaign: TestRunCampaignState) {
-  // Sticky "a run has been started" flag: campaignStatus resets to '' for a
-  // moment when a new run starts, which would flash the initial Run button
-  // between "Test Again" clicks without it.
-  const [hasRun, setHasRun] = React.useState(false)
-  // True while the campaign is being created (before isRunning flips) —
-  // without it the button would flash "Test Again" right after a Run click.
-  const [isStarting, setIsStarting] = React.useState(false)
-  const [durationMs, setDurationMs] = React.useState(0)
-
-  React.useEffect(() => {
-    if (!campaign.startedAt || !campaign.isRunning) {
-      if (campaign.startedAt && !campaign.isRunning) {
-        setDurationMs(Date.now() - campaign.startedAt.getTime())
-      }
-      return
-    }
-    setDurationMs(Date.now() - campaign.startedAt.getTime())
-    const interval = setInterval(() => {
-      setDurationMs(Date.now() - campaign.startedAt!.getTime())
-    }, 1000)
-    return () => clearInterval(interval)
-  }, [campaign.startedAt, campaign.isRunning])
-
-  const run = React.useCallback(async (start: () => Promise<unknown>) => {
-    setHasRun(true)
-    setDurationMs(0)
-    setIsStarting(true)
-    try {
-      await start()
-    } finally {
-      setIsStarting(false)
-    }
-  }, [])
-
-  // Stop/reset also drop isStarting so the Stop button doesn't stay "active"
-  // for the moment between the user's click and the pending start promise
-  // settling (its finally clears the flag again — harmless).
-  const stop = React.useCallback(() => {
-    setIsStarting(false)
-    campaign.stopCampaign()
-  }, [campaign.stopCampaign])
-
-  /** Stop anything in flight and clear the run state (panel close/cancel). */
-  const reset = React.useCallback(() => {
-    setIsStarting(false)
-    campaign.stopCampaign()
-    setDurationMs(0)
-    setHasRun(false)
-  }, [campaign.stopCampaign])
-
-  const isActive = campaign.isRunning || isStarting
-  const isFinished = campaign.campaignStatus === 'finished'
-  const showResults = isActive || (hasRun && isFinished)
-
-  const firstError = isFinished && campaign.errors.length > 0 ? campaign.errors[0].error : null
-
-  // Started/Duration show zeros until the current run's timing is real:
-  // hasRun=false after a reset, and campaignStatus resets while the next
-  // run is being created, so stale values never linger on screen.
-  const showTiming = hasRun && campaign.startedAt !== null && (campaign.isRunning || isFinished)
-
-  const startedLabel = showTiming && campaign.startedAt ? formatTime(campaign.startedAt) : '00:00 PM'
-  const durationLabel = showTiming ? formatTestRunDuration(durationMs) : '00:00:00'
-
-  // Humanize raw result keys for the table headers (snake_case -> spaced
-  // words); the row data itself is shown exactly as returned.
-  const displayRows = React.useMemo<QueryResultRow[]>(
-    () =>
-      campaign.results.map(row =>
-        Object.fromEntries(Object.entries(row).map(([key, value]) => [key.replace(/_/g, ' '), value])),
-      ),
-    [campaign.results],
-  )
-
-  return {
-    hasRun,
-    isActive,
-    isFinished,
-    showResults,
-    firstError,
-    startedLabel,
-    durationLabel,
-    displayRows,
-    run,
-    stop,
-    reset,
-  }
-}