@startsimpli/ui 0.4.50 → 0.4.52

package/src/components/document-editor/__tests__/sections.test.ts

@@ -0,0 +1,107 @@
+import {
+  sectionsFromRecord,
+  recordPatchFromSections,
+  readData,
+  toCamelKey,
+  type DocAttribute,
+} from '../sections';
+import type { DocSection } from '../types';
+
+const attrs: DocAttribute[] = [
+  { name: 'blog', dataType: 'longtext', label: 'Blog post' },
+  { name: 'linkedin', dataType: 'text' },
+  { name: 'seo', dataType: 'json' },
+  { name: 'sources', dataType: 'json' },
+  { name: 'status', dataType: 'enum' },
+  { name: 'stage', dataType: 'enum' },
+  { name: 'score', dataType: 'number' },
+  { name: 'created_at', dataType: 'date' },
+];
+
+describe('toCamelKey / readData', () => {
+  it('camelCases snake and kebab keys', () => {
+    expect(toCamelKey('meta_description')).toBe('metaDescription');
+    expect(toCamelKey('primary-keyword')).toBe('primaryKeyword');
+    expect(toCamelKey('blog')).toBe('blog');
+  });
+  it('reads camel form first, then raw', () => {
+    expect(readData({ metaDescription: 'camel' }, 'meta_description')).toBe('camel');
+    expect(readData({ meta_description: 'raw' }, 'meta_description')).toBe('raw');
+    expect(readData(undefined, 'x')).toBeUndefined();
+  });
+});
+
+describe('sectionsFromRecord', () => {
+  const data = {
+    blog: '# Hello\n\nBody',
+    linkedin: 'A short post',
+    seo: { meta_description: 'desc', primary_keyword: 'kw' },
+    sources: [{ url: 'https://a.com' }, 'https://b.com'],
+    status: 'draft',
+    score: 5,
+  };
+
+  it('routes data types to the right kinds and skips enum/system/unknown', () => {
+    const sections = sectionsFromRecord(attrs, data);
+    const byKey = Object.fromEntries(sections.map((s) => [s.key, s]));
+    expect(byKey.blog.kind).toBe('markdown');
+    expect(byKey.linkedin.kind).toBe('text');
+    expect(byKey.seo.kind).toBe('structured');
+    expect(byKey.sources.kind).toBe('list');
+    // enum (status, stage), number (score), date/system (created_at) are skipped
+    expect(sections.map((s) => s.key).sort()).toEqual(['blog', 'linkedin', 'seo', 'sources']);
+  });
+
+  it('coerces values into each kind shape', () => {
+    const { blog, seo, sources } = Object.fromEntries(
+      sectionsFromRecord(attrs, data).map((s) => [s.key, s]),
+    ) as Record<string, DocSection>;
+    expect(typeof blog.value).toBe('string');
+    expect(seo.value).toEqual({ meta_description: 'desc', primary_keyword: 'kw' });
+    // list: array of {url} objects + a bare string → url extracted from objects, strings kept
+    expect(sources.value).toEqual(['https://a.com', 'https://b.com']);
+  });
+
+  it('parses a newline-delimited string into a list', () => {
+    const s = sectionsFromRecord([{ name: 'sources', dataType: 'text' }], { sources: 'https://a.com\nhttps://b.com\n' });
+    expect(s[0].kind).toBe('list');
+    expect(s[0].value).toEqual(['https://a.com', 'https://b.com']);
+  });
+
+  it('honors label, camelCase reads, exclude, readOnlyKeys and includeKinds', () => {
+    const camelData = { blog: 'x', linkedIn: 'y' };
+    const a: DocAttribute[] = [
+      { name: 'blog', dataType: 'longtext', label: 'Blog post' },
+      { name: 'linked_in', dataType: 'text' },
+    ];
+    const sections = sectionsFromRecord(a, camelData, { readOnlyKeys: ['blog'] });
+    expect(sections.find((s) => s.key === 'blog')!.label).toBe('Blog post');
+    expect(sections.find((s) => s.key === 'blog')!.readOnly).toBe(true);
+    // linked_in humanized + camelCase-aware read of `linkedIn`
+    expect(sections.find((s) => s.key === 'linked_in')!.label).toBe('Linked in');
+    expect(sections.find((s) => s.key === 'linked_in')!.value).toBe('y');
+
+    expect(sectionsFromRecord(attrs, data, { exclude: ['seo'] }).some((s) => s.key === 'seo')).toBe(false);
+    expect(
+      sectionsFromRecord(attrs, data, { includeKinds: ['markdown'] }).map((s) => s.kind),
+    ).toEqual(['markdown']);
+  });
+});
+
+describe('recordPatchFromSections', () => {
+  it('produces a data patch keyed by section.key with normalized shapes', () => {
+    const sections: DocSection[] = [
+      { key: 'blog', label: 'Blog', kind: 'markdown', value: '# hi' },
+      { key: 'linkedin', label: 'LinkedIn', kind: 'text', value: 'post' },
+      { key: 'seo', label: 'SEO', kind: 'structured', value: { meta_description: 'd', primary_keyword: 'k' } },
+      { key: 'sources', label: 'Sources', kind: 'list', value: ['https://a.com', ''] },
+    ];
+    const patch = recordPatchFromSections(sections);
+    expect(patch).toEqual({
+      blog: '# hi',
+      linkedin: 'post',
+      seo: { meta_description: 'd', primary_keyword: 'k' },
+      sources: ['https://a.com'],
+    });
+  });
+});

package/src/components/document-editor/index.ts

@@ -0,0 +1,20 @@
+/**
+ * @startsimpli/ui/document-editor — a generic, schema-driven, Google-Docs-like
+ * editor over typed document sub-sections (blog markdown + text + structured SEO
+ * + source lists). Presentational + controlled: bring your own persistence.
+ *
+ * Exposed as its own subpath (like ./blog and ./collection) because it pulls
+ * react-markdown for the markdown preview — kept out of the main components
+ * barrel so consumers that don't edit documents don't drag that dependency.
+ */
+export { DocumentEditor } from './DocumentEditor';
+export type { DocumentEditorProps, SaveStatus } from './DocumentEditor';
+export type { DocSection, DocSectionKind } from './types';
+export {
+  sectionsFromRecord,
+  recordPatchFromSections,
+  readData,
+  toCamelKey,
+  type DocAttribute,
+  type SectionsFromRecordOptions,
+} from './sections';

package/src/components/document-editor/sections.ts

@@ -0,0 +1,170 @@
+/**
+ * Schema-driven mappers between an entity record and DocumentEditor sections.
+ *
+ * These make the editor generic (not OGMC-specific): an app hands the editor an
+ * entity type's attributes + its `data` blob and gets back typed
+ * {@link DocSection}s; on save it turns the edited sections back into a `data`
+ * patch to PATCH. Pure + framework-free (no React) so they're cheap to unit-test
+ * and reuse in a Node route.
+ *
+ * Blob convention mirrors `collection/data.ts`: a tenant API client camelCases
+ * response keys, so a snake_case attr `meta_description` may land as
+ * `metaDescription` — reads try the camel form first, then the raw key.
+ */
+import type { DocSection, DocSectionKind } from './types';
+
+/**
+ * Minimal attribute shape the mapper needs — a structural subset of the entity
+ * schema `AttributeDef` (name + dataType, optional label/config), so callers can
+ * pass their existing attribute objects directly.
+ */
+export interface DocAttribute {
+  name: string;
+  /** Entity data type — `text` | `longtext` | `json` | `enum` | `number` | … */
+  dataType: string;
+  label?: string;
+  config?: Record<string, unknown> | null;
+}
+
+export interface SectionsFromRecordOptions {
+  /** Attribute names to skip outright (in addition to the built-in system/status skips). */
+  exclude?: string[];
+  /** Mark these section keys read-only. */
+  readOnlyKeys?: string[];
+  /** Restrict output to these kinds (e.g. only `markdown` + `text`). */
+  includeKinds?: DocSectionKind[];
+}
+
+/** snake_case / kebab → camelCase (matches collection/data.ts). */
+export function toCamelKey(name: string): string {
+  return name.replace(/[_-]+([a-z0-9])/g, (_m, c: string) => c.toUpperCase());
+}
+
+/** camelCase-aware read of a value out of a `data` blob. */
+export function readData(data: Record<string, unknown> | undefined | null, name: string): unknown {
+  if (!data) return undefined;
+  return data[toCamelKey(name)] ?? data[name];
+}
+
+/** Attribute names that are never editable document sections. */
+const SYSTEM_NAMES = new Set(['id', 'status', 'created_at', 'updated_at', 'createdat', 'updatedat', 'external_id']);
+
+function humanize(name: string): string {
+  const spaced = name.replace(/[_-]+/g, ' ').replace(/([a-z0-9])([A-Z])/g, '$1 $2').trim();
+  return spaced ? spaced.charAt(0).toUpperCase() + spaced.slice(1) : name;
+}
+
+/** A name like `sources`, `source_urls`, `references` → a list section. */
+function looksLikeList(name: string): boolean {
+  return /\bsources?\b/i.test(name) || /^sources?/i.test(name) || /_sources?$/i.test(name);
+}
+
+/** Decide the section kind for an attribute, or `null` to skip it. */
+function kindFor(attr: DocAttribute): DocSectionKind | null {
+  if (looksLikeList(attr.name)) return 'list';
+  switch (attr.dataType) {
+    case 'longtext':
+      return 'markdown';
+    case 'json':
+      return 'structured';
+    case 'text':
+      return 'text';
+    default:
+      // number/boolean/date/enum/etc. are not document-editable sections.
+      return null;
+  }
+}
+
+function toStr(v: unknown): string {
+  return v == null ? '' : String(v);
+}
+
+/** Coerce an arbitrary stored value into the shape a `kind` expects. */
+function coerceValue(kind: DocSectionKind, raw: unknown): unknown {
+  switch (kind) {
+    case 'markdown':
+    case 'text':
+      return toStr(raw);
+    case 'list':
+      if (Array.isArray(raw)) {
+        return raw
+          .map((el) => {
+            if (typeof el === 'string') return el.trim();
+            if (el && typeof el === 'object') {
+              const o = el as Record<string, unknown>;
+              return toStr(o.url ?? o.href ?? o.value ?? o.name).trim();
+            }
+            return toStr(el).trim();
+          })
+          .filter((s) => s.length > 0);
+      }
+      if (typeof raw === 'string') {
+        return raw
+          .split(/\r?\n/)
+          .map((s) => s.trim())
+          .filter((s) => s.length > 0);
+      }
+      return [];
+    case 'structured': {
+      if (raw && typeof raw === 'object' && !Array.isArray(raw)) {
+        const out: Record<string, string> = {};
+        for (const [k, v] of Object.entries(raw as Record<string, unknown>)) out[k] = toStr(v);
+        return out;
+      }
+      return {};
+    }
+  }
+}
+
+/**
+ * Map an entity type's attributes + its `data` blob → editable DocSections.
+ * Skips system/status/enum attributes; heuristically routes `longtext`→markdown,
+ * `json`→structured, `text`→text, and any `source(s)`-ish name→list.
+ */
+export function sectionsFromRecord(
+  attributes: DocAttribute[],
+  data: Record<string, unknown> | undefined | null,
+  opts: SectionsFromRecordOptions = {},
+): DocSection[] {
+  const exclude = new Set((opts.exclude ?? []).map((n) => n.toLowerCase()));
+  const readOnly = new Set(opts.readOnlyKeys ?? []);
+  const sections: DocSection[] = [];
+
+  for (const attr of attributes) {
+    const lname = attr.name.toLowerCase();
+    if (exclude.has(lname) || SYSTEM_NAMES.has(lname)) continue;
+    // Enums are status/vocabulary fields, not document prose.
+    if (attr.dataType === 'enum') continue;
+
+    const kind = kindFor(attr);
+    if (!kind) continue;
+    if (opts.includeKinds && !opts.includeKinds.includes(kind)) continue;
+
+    const placeholder = attr.config && typeof attr.config.placeholder === 'string'
+      ? (attr.config.placeholder as string)
+      : undefined;
+
+    sections.push({
+      key: attr.name,
+      label: attr.label || humanize(attr.name),
+      kind,
+      value: coerceValue(kind, readData(data, attr.name)),
+      placeholder,
+      readOnly: readOnly.has(attr.name) || undefined,
+    });
+  }
+
+  return sections;
+}
+
+/**
+ * Turn edited sections back into a `data` patch object (keyed by section.key) to
+ * merge and PATCH. Values are normalized to their kind's canonical shape.
+ */
+export function recordPatchFromSections(sections: DocSection[]): Record<string, unknown> {
+  const patch: Record<string, unknown> = {};
+  for (const s of sections) {
+    patch[s.key] = coerceValue(s.kind, s.value);
+  }
+  return patch;
+}

package/src/components/document-editor/types.ts

@@ -0,0 +1,32 @@
+/**
+ * Section model for the generic DocumentEditor.
+ *
+ * A "document" here is a typed, multi-part content record — e.g. a marketing
+ * draft = blog markdown + LinkedIn text + SEO fields + sources. Each part is a
+ * {@link DocSection} with a `kind` that decides how it renders + edits. Kept
+ * framework-free so the pure mappers in `./sections` (and any Node/LLM caller)
+ * can import it without dragging React.
+ */
+
+/** How a section renders + edits. */
+export type DocSectionKind = 'markdown' | 'text' | 'structured' | 'list';
+
+/**
+ * One editable part of a document.
+ * `value` is typed by `kind`:
+ * - `markdown` / `text` → `string`
+ * - `structured`        → `Record<string, string>`
+ * - `list`              → `string[]`
+ */
+export interface DocSection {
+  /** Stable id — usually the source attribute name (`blog`, `linkedin`, `seo`, `sources`). */
+  key: string;
+  /** Human label shown above the section. */
+  label: string;
+  kind: DocSectionKind;
+  /** The section's current value (shape depends on `kind`). */
+  value: unknown;
+  placeholder?: string;
+  /** This one section is read-only even when the editor is editable. */
+  readOnly?: boolean;
+}

package/src/components/health/AttentionFeed.tsx

@@ -0,0 +1,95 @@
+import * as React from 'react'
+import { cn } from '../../lib/utils'
+import { Inbox } from 'lucide-react'
+import { formatRelativeTime } from '../../utils'
+import { HealthCard, HealthDot } from './HealthCard'
+import { worstStatus, type HealthStatus } from './health-status'
+
+export interface AttentionItem {
+  id: string
+  label: string
+  /** Optional context line, e.g. "Weekly brief · awaiting review". */
+  meta?: string
+  /** Link target; when set the row is a link. */
+  href?: string
+  /** Row tone (default warn — it's in the attention queue for a reason). */
+  tone?: HealthStatus
+  /** Timestamp shown as relative time on the right. */
+  at?: string | Date | null
+}
+
+export interface AttentionFeedProps {
+  title?: string
+  items: AttentionItem[]
+  limit?: number
+  emptyMessage?: string
+  className?: string
+}
+
+/**
+ * The "needs a human" queue: records flagged for review across every type. Empty
+ * is the healthy state (all clear); anything in the queue pulls the card to warn
+ * (or worse, per item tone). Presentational — a tenant widget collects the items
+ * from whatever it considers actionable (stuck records, drafts awaiting review…).
+ */
+export function AttentionFeed({
+  title = 'Needs attention',
+  items,
+  limit,
+  emptyMessage = 'All clear — nothing needs review.',
+  className,
+}: AttentionFeedProps) {
+  const status: HealthStatus =
+    items.length === 0 ? 'ok' : worstStatus(items.map((it) => it.tone ?? 'warn'))
+  const statusLabel = items.length === 0 ? 'All clear' : `${items.length} to review`
+  const listed = limit ? items.slice(0, limit) : items
+
+  return (
+    <HealthCard
+      title={title}
+      status={status}
+      statusLabel={statusLabel}
+      icon={Inbox}
+      isEmpty={items.length === 0}
+      emptyMessage={emptyMessage}
+      className={className}
+    >
+      <ul className="divide-y divide-gray-100" aria-label={`${title} items`}>
+        {listed.map((item) => {
+          const body = (
+            <span className="flex items-start justify-between gap-3 py-2">
+              <span className="flex items-start gap-2 min-w-0">
+                <HealthDot status={item.tone ?? 'warn'} className="mt-1.5" />
+                <span className="min-w-0">
+                  <span className="block text-sm text-gray-900 truncate">{item.label}</span>
+                  {item.meta && <span className="block text-xs text-gray-500 truncate">{item.meta}</span>}
+                </span>
+              </span>
+              {item.at && (
+                <span className="text-xs text-gray-400 tabular-nums flex-shrink-0 pt-0.5">
+                  {formatRelativeTime(item.at)}
+                </span>
+              )}
+            </span>
+          )
+          return (
+            <li key={item.id}>
+              {item.href ? (
+                <a
+                  href={item.href}
+                  className={cn(
+                    'block rounded px-1 -mx-1 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500',
+                  )}
+                >
+                  {body}
+                </a>
+              ) : (
+                body
+              )}
+            </li>
+          )
+        })}
+      </ul>
+    </HealthCard>
+  )
+}

package/src/components/health/DeliveryHealth.tsx

@@ -0,0 +1,127 @@
+import * as React from 'react'
+import { cn } from '../../lib/utils'
+import { CalendarClock } from 'lucide-react'
+import { formatRelativeTime } from '../../utils'
+import { HealthCard, HealthDot } from './HealthCard'
+import { worstStatus, type HealthStatus } from './health-status'
+
+export type DeliveryState = 'on_time' | 'upcoming' | 'late' | 'missed'
+
+export interface DeliveryItem {
+  label: string
+  /** Explicit state; otherwise derived from due/delivered vs now. */
+  status?: DeliveryState
+  dueAt?: string | Date | null
+  deliveredAt?: string | Date | null
+}
+
+export interface DeliveryHealthProps {
+  title?: string
+  items: DeliveryItem[]
+  /** Compare against this instant (injectable for tests); defaults to Date.now(). */
+  now?: number
+  /** Cap the number of rows listed (summary counts still cover all). */
+  limit?: number
+  emptyMessage?: string
+  className?: string
+}
+
+const STATE_TONE: Record<DeliveryState, HealthStatus> = {
+  on_time: 'ok',
+  upcoming: 'neutral',
+  late: 'warn',
+  missed: 'critical',
+}
+
+const STATE_LABEL: Record<DeliveryState, string> = {
+  on_time: 'On time',
+  upcoming: 'Upcoming',
+  late: 'Late',
+  missed: 'Missed',
+}
+
+function deriveState(item: DeliveryItem, now: number): DeliveryState {
+  if (item.status) return item.status
+  const due = item.dueAt ? new Date(item.dueAt).getTime() : null
+  if (item.deliveredAt) {
+    const delivered = new Date(item.deliveredAt).getTime()
+    return due !== null && delivered > due ? 'late' : 'on_time'
+  }
+  if (due === null) return 'upcoming'
+  return due < now ? 'missed' : 'upcoming'
+}
+
+/**
+ * Delivery / schedule health: were scheduled deliverables (e.g. weekly briefs)
+ * shipped on time? Missed/late deliveries drive the card critical/warn; upcoming
+ * ones are informational. Presentational — a tenant widget derives states from a
+ * type's scheduled_for / delivered_at fields.
+ */
+export function DeliveryHealth({
+  title = 'Delivery',
+  items,
+  now,
+  limit,
+  emptyMessage = 'Nothing scheduled.',
+  className,
+}: DeliveryHealthProps) {
+  const at = now ?? Date.now()
+  const rows = items.map((it) => ({ ...it, state: deriveState(it, at) }))
+  const counts = rows.reduce(
+    (acc, r) => ((acc[r.state] += 1), acc),
+    { on_time: 0, upcoming: 0, late: 0, missed: 0 } as Record<DeliveryState, number>,
+  )
+  const status = worstStatus(rows.map((r) => STATE_TONE[r.state]))
+  const problems = counts.late + counts.missed
+  const statusLabel =
+    items.length === 0 ? undefined : problems > 0 ? `${problems} off-track` : 'On track'
+
+  const listed = limit ? rows.slice(0, limit) : rows
+
+  return (
+    <HealthCard
+      title={title}
+      status={status}
+      statusLabel={statusLabel}
+      icon={CalendarClock}
+      isEmpty={items.length === 0}
+      emptyMessage={emptyMessage}
+      className={className}
+    >
+      <div className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-gray-600">
+        {(['on_time', 'late', 'missed', 'upcoming'] as DeliveryState[])
+          .filter((s) => counts[s] > 0)
+          .map((s) => (
+            <span key={s} className="inline-flex items-center gap-1.5">
+              <HealthDot status={STATE_TONE[s]} />
+              <span className="tabular-nums font-medium text-gray-900">{counts[s]}</span> {STATE_LABEL[s]}
+            </span>
+          ))}
+      </div>
+
+      <ul className="space-y-2" aria-label={`${title} items`}>
+        {listed.map((row, i) => (
+          <li key={`${row.label}-${i}`} className="flex items-center justify-between gap-3 text-sm">
+            <span className="flex items-center gap-2 min-w-0">
+              <HealthDot status={STATE_TONE[row.state]} />
+              <span className="text-gray-700 truncate">{row.label}</span>
+            </span>
+            <span
+              className={cn(
+                'text-xs tabular-nums flex-shrink-0',
+                STATE_TONE[row.state] === 'ok' ? 'text-gray-500' : 'text-gray-900 font-medium',
+              )}
+            >
+              {STATE_LABEL[row.state]}
+              {row.deliveredAt
+                ? ` · ${formatRelativeTime(row.deliveredAt)}`
+                : row.dueAt
+                  ? ` · ${formatRelativeTime(row.dueAt)}`
+                  : ''}
+            </span>
+          </li>
+        ))}
+      </ul>
+    </HealthCard>
+  )
+}

package/src/components/health/HealthCard.tsx

@@ -0,0 +1,108 @@
+import * as React from 'react'
+import { cn } from '../../lib/utils'
+import { HEALTH_TONE, type HealthStatus } from './health-status'
+
+/** A small solid status dot. Pair it with a label — never rely on color alone. */
+export function HealthDot({ status, className }: { status: HealthStatus; className?: string }) {
+  return (
+    <span
+      className={cn('inline-block w-2.5 h-2.5 rounded-full flex-shrink-0', HEALTH_TONE[status].dot, className)}
+      aria-hidden="true"
+    />
+  )
+}
+
+/** A tone pill: icon + label, used in a HealthCard header to name the roll-up state. */
+export function HealthBadge({
+  status,
+  label,
+  className,
+}: {
+  status: HealthStatus
+  label?: string
+  className?: string
+}) {
+  const tone = HEALTH_TONE[status]
+  const Icon = tone.Icon
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium',
+        tone.softBg,
+        tone.text,
+        className,
+      )}
+    >
+      <Icon className="w-3.5 h-3.5" aria-hidden="true" />
+      {label ?? tone.label}
+    </span>
+  )
+}
+
+export interface HealthCardProps {
+  /** Card heading. */
+  title: string
+  /** The rolled-up tone — drives the left accent + the header badge. */
+  status: HealthStatus
+  /** Optional short label overriding the tone's default badge text (e.g. "3 stale"). */
+  statusLabel?: string
+  /** Optional leading icon for the title. */
+  icon?: React.ComponentType<{ className?: string }>
+  /** Optional right-aligned header slot (a link, a period selector…). */
+  action?: React.ReactNode
+  /** Body — the signal-specific content. */
+  children?: React.ReactNode
+  /** Shown (muted, centered) when there is nothing to report. */
+  emptyMessage?: string
+  /** Render the empty state instead of children. */
+  isEmpty?: boolean
+  isLoading?: boolean
+  className?: string
+}
+
+/**
+ * The base surface every SystemHealth block renders into: a titled card with a
+ * left tone-accent and a status badge, so a wall of them reads as a scannable
+ * health board. Presentational only — the tone + contents are computed by the
+ * composer (or, in a tenant app, by the dashboard widget that fetches the data).
+ */
+export function HealthCard({
+  title,
+  status,
+  statusLabel,
+  icon: Icon,
+  action,
+  children,
+  emptyMessage = 'Nothing to report.',
+  isEmpty,
+  isLoading,
+  className,
+}: HealthCardProps) {
+  return (
+    <div
+      className={cn(
+        'rounded-xl border border-l-4 bg-card text-card-foreground shadow p-5 space-y-4',
+        HEALTH_TONE[status].border,
+        isLoading && 'animate-pulse',
+        className,
+      )}
+    >
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex items-center gap-2 min-w-0">
+          {Icon && <Icon className="w-4 h-4 text-gray-400 flex-shrink-0" aria-hidden="true" />}
+          <h3 className="text-sm font-semibold text-gray-900 truncate">{title}</h3>
+        </div>
+        <div className="flex items-center gap-2 flex-shrink-0">
+          {action}
+          <HealthBadge status={status} label={statusLabel} />
+        </div>
+      </div>
+
+      {isEmpty ? (
+        <p className="text-sm text-gray-500 py-4 text-center">{emptyMessage}</p>
+      ) : (
+        children
+      )}
+    </div>
+  )
+}