@echothink-ui/admin 0.1.0

package/src/components/RuntimeLogViewer.test.tsx

@@ -0,0 +1,60 @@
+import { fireEvent, render, screen, within } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { RuntimeLogViewer } from "./RuntimeLogViewer";
+
+const entries = [
+  {
+    id: "1",
+    timestamp: "10:42:01",
+    level: "info" as const,
+    source: "ingest",
+    message: "Started batch ingest."
+  },
+  {
+    id: "2",
+    timestamp: "10:42:04",
+    level: "warning" as const,
+    source: "render",
+    message: "Latency 1.2s above threshold."
+  },
+  {
+    id: "3",
+    timestamp: "10:42:08",
+    level: "error" as const,
+    source: "billing",
+    message: "5xx from upstream."
+  }
+];
+
+describe("RuntimeLogViewer", () => {
+  it("renders streaming log controls, status, filters, and summary counts", () => {
+    const onPause = vi.fn();
+
+    render(
+      <RuntimeLogViewer
+        entries={entries}
+        streaming
+        onPause={onPause}
+        filters={<span>Source: billing</span>}
+      />
+    );
+
+    const viewer = screen.getByRole("region", { name: "Runtime logs" });
+
+    expect(within(viewer).getByText("Streaming")).toBeTruthy();
+    expect(within(viewer).getByText("3 entries")).toBeTruthy();
+    expect(within(viewer).getByText("1 warning")).toBeTruthy();
+    expect(within(viewer).getAllByText("1 error")).toHaveLength(2);
+    expect(within(viewer).getByText("Source: billing")).toBeTruthy();
+
+    fireEvent.click(within(viewer).getByRole("button", { name: "Pause runtime stream" }));
+
+    expect(onPause).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not render an inert pause action without a handler", () => {
+    render(<RuntimeLogViewer entries={entries} streaming />);
+
+    expect(screen.queryByRole("button", { name: "Pause runtime stream" })).toBeNull();
+  });
+});

package/src/components/RuntimeLogViewer.tsx

@@ -0,0 +1,185 @@
+import * as React from "react";
+import { Pause } from "@carbon/icons-react";
+import { Badge, Button, type EthSeverity, type SurfaceComponentProps } from "@echothink-ui/core";
+import { DataTable, type DataColumn } from "@echothink-ui/data";
+import type { LogEntry } from "./types";
+
+export interface RuntimeLogViewerProps extends Omit<SurfaceComponentProps, "children"> {
+  entries: LogEntry[];
+  filters?: React.ReactNode;
+  onPause?: () => void;
+  streaming?: boolean;
+}
+
+type LogRow = Record<string, unknown> & LogEntry;
+
+export function RuntimeLogViewer({
+  entries,
+  filters,
+  onPause,
+  streaming = false,
+  className,
+  title = "Runtime logs",
+  subtitle,
+  description,
+  density = "compact",
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy
+}: RuntimeLogViewerProps) {
+  const headingId = React.useId();
+  const warningCount = countLevel(entries, "warning");
+  const errorCount = countLevel(entries, "error");
+  const latestTimestamp = entries[entries.length - 1]?.timestamp ?? "No activity";
+  const supportingText =
+    subtitle ?? description ?? `${formatEntryCount(entries.length)} buffered from runtime stream.`;
+  const hasToolbar = Boolean(filters || (streaming && onPause));
+  const rows: LogRow[] = entries.map((entry) => ({ ...entry }));
+  const columns: DataColumn<LogRow>[] = [
+    {
+      key: "timestamp",
+      header: "Time",
+      width: "7rem",
+      render: (row) => (
+        <time className="eth-admin-runtime-log__timestamp" dateTime={row.timestamp}>
+          {row.timestamp}
+        </time>
+      )
+    },
+    {
+      key: "level",
+      header: "Level",
+      width: "7rem",
+      render: (row) => (
+        <Badge severity={levelSeverity(row.level)}>{formatLevel(row.level)}</Badge>
+      )
+    },
+    {
+      key: "source",
+      header: "Source",
+      width: "11rem",
+      render: (row) => (
+        <span className="eth-admin-runtime-log__source">{row.source ?? "system"}</span>
+      )
+    },
+    {
+      key: "message",
+      header: "Message",
+      render: (row) => (
+        <span
+          className={[
+            "eth-admin-runtime-log__message",
+            `eth-admin-runtime-log__message--${row.level ?? "info"}`
+          ].join(" ")}
+        >
+          {row.message}
+        </span>
+      )
+    }
+  ];
+
+  return (
+    <section
+      role="region"
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledBy ?? (ariaLabel ? undefined : headingId)}
+      className={[
+        "eth-admin-runtime-log",
+        streaming ? "eth-admin-runtime-log--streaming" : "eth-admin-runtime-log--paused",
+        className
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      data-eth-component="RuntimeLogViewer"
+    >
+      <header className="eth-admin-runtime-log__header">
+        <div className="eth-admin-runtime-log__heading">
+          <h3 id={headingId}>{title}</h3>
+          <p>{supportingText}</p>
+        </div>
+        <div className="eth-admin-runtime-log__status" aria-live="polite">
+          <Badge severity={streaming ? "success" : "neutral"}>
+            {streaming ? "Streaming" : "Paused"}
+          </Badge>
+          <span>{errorCount ? formatLevelCount(errorCount, "error") : "No errors"}</span>
+        </div>
+      </header>
+      {hasToolbar ? (
+        <div
+          className="eth-admin-runtime-log__toolbar"
+          role="toolbar"
+          aria-label="Runtime log controls"
+        >
+          {filters ? <div className="eth-admin-runtime-log__filters">{filters}</div> : null}
+          {streaming && onPause ? (
+            <Button
+              type="button"
+              intent="secondary"
+              density="compact"
+              icon={<Pause size={16} />}
+              aria-label="Pause runtime stream"
+              onClick={onPause}
+            >
+              Pause stream
+            </Button>
+          ) : null}
+        </div>
+      ) : null}
+      <dl className="eth-admin-runtime-log__summary" aria-label="Runtime log summary">
+        <div>
+          <dt>Entries</dt>
+          <dd>{formatEntryCount(entries.length)}</dd>
+        </div>
+        <div>
+          <dt>Warnings</dt>
+          <dd>{formatLevelCount(warningCount, "warning")}</dd>
+        </div>
+        <div>
+          <dt>Errors</dt>
+          <dd>{formatLevelCount(errorCount, "error")}</dd>
+        </div>
+        <div>
+          <dt>Latest</dt>
+          <dd>{latestTimestamp}</dd>
+        </div>
+      </dl>
+      <div className="eth-admin-runtime-log__table-shell" aria-live={streaming ? "polite" : "off"}>
+        <DataTable
+          rows={rows}
+          columns={columns}
+          density={density}
+          rowKey="id"
+          className="eth-admin-runtime-log__table"
+          emptyState={
+            <div className="eth-admin-runtime-log__empty" role="status">
+              <h4>No runtime logs</h4>
+              <p>Events will appear here when the stream receives output.</p>
+            </div>
+          }
+        />
+      </div>
+    </section>
+  );
+}
+
+function countLevel(entries: LogEntry[], level: NonNullable<LogEntry["level"]>) {
+  return entries.filter((entry) => entry.level === level).length;
+}
+
+function formatEntryCount(count: number) {
+  return `${count} ${count === 1 ? "entry" : "entries"}`;
+}
+
+function formatLevelCount(count: number, label: string) {
+  return `${count} ${count === 1 ? label : `${label}s`}`;
+}
+
+function formatLevel(level: LogEntry["level"]) {
+  return (level ?? "info").toUpperCase();
+}
+
+function levelSeverity(level: LogEntry["level"]): EthSeverity {
+  if (level === "error") return "danger";
+  if (level === "warning") return "warning";
+  if (level === "debug") return "neutral";
+  return "info";
+}

package/src/components/ServiceStatusCard.tsx

@@ -0,0 +1,91 @@
+import { Badge, Surface, type EthSeverity, type SurfaceComponentProps } from "@echothink-ui/core";
+import type { ServiceHealthStatus, ServiceStatusSummary } from "./types";
+
+const percentFormatter = new Intl.NumberFormat("en", { maximumFractionDigits: 2 });
+
+export interface ServiceStatusCardProps extends Omit<SurfaceComponentProps, "children"> {
+  service: ServiceStatusSummary;
+}
+
+export function ServiceStatusCard({ service, className, ...props }: ServiceStatusCardProps) {
+  const statusSeverity = severityForStatus(service.status);
+  const statusText = statusLabel(service.status);
+  const metrics = [
+    {
+      label: "Latency",
+      value: service.latencyMs !== undefined ? `${service.latencyMs} ms` : "Unavailable",
+      muted: service.latencyMs === undefined
+    },
+    {
+      label: "Uptime",
+      value: service.uptimePercent !== undefined ? formatPercent(service.uptimePercent) : "Not reported",
+      muted: service.uptimePercent === undefined
+    },
+    {
+      label: service.incidentsCount !== undefined ? "Open incidents" : "Last incident",
+      value:
+        service.incidentsCount !== undefined
+          ? service.incidentsCount
+          : service.lastIncidentAt ?? "None reported",
+      muted:
+        service.incidentsCount !== undefined ? service.incidentsCount === 0 : !service.lastIncidentAt
+    }
+  ];
+
+  return (
+    <Surface
+      {...props}
+      title={
+        <span className="eth-admin-service-status-card__title">
+          <span>{service.name}</span>
+          <Badge aria-label={`Service status: ${statusText}`} severity={statusSeverity}>
+            {statusText}
+          </Badge>
+        </span>
+      }
+      description={statusDescription(service.status)}
+      className={[
+        "eth-admin-service-status-card",
+        `eth-admin-service-status-card--${service.status}`,
+        className
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      data-eth-component="ServiceStatusCard"
+    >
+      <dl className="eth-admin-service-status-card__metrics">
+        {metrics.map((metric) => (
+          <div
+            key={metric.label}
+            className={metric.muted ? "eth-admin-service-status-card__metric--muted" : undefined}
+          >
+            <dt>{metric.label}</dt>
+            <dd>{metric.value}</dd>
+          </div>
+        ))}
+      </dl>
+    </Surface>
+  );
+}
+
+export function severityForStatus(status: ServiceHealthStatus): EthSeverity {
+  if (status === "healthy") return "success";
+  if (status === "degraded") return "warning";
+  return "danger";
+}
+
+function statusLabel(status: ServiceHealthStatus) {
+  if (status === "healthy") return "Healthy";
+  if (status === "degraded") return "Degraded";
+  return "Down";
+}
+
+function statusDescription(status: ServiceHealthStatus) {
+  if (status === "healthy") return "Operational within expected thresholds";
+  if (status === "degraded") return "Elevated latency or partial failures detected";
+  return "Service unavailable or actively failing";
+}
+
+function formatPercent(value: number) {
+  return `${percentFormatter.format(value)}%`;
+}

package/src/components/SystemHealthDashboard.tsx

@@ -0,0 +1,214 @@
+import {
+  Badge,
+  Surface,
+  type EthOperationalStatus,
+  type EthSeverity,
+  type SurfaceComponentProps
+} from "@echothink-ui/core";
+import { KPIBlock } from "@echothink-ui/charts";
+import { ServiceStatusCard } from "./ServiceStatusCard";
+import type { AdminIncident, AdminMetric, HealthService } from "./types";
+
+export interface SystemHealthDashboardProps extends Omit<SurfaceComponentProps, "children"> {
+  services: HealthService[];
+  incidents?: AdminIncident[];
+  metrics?: AdminMetric[];
+}
+
+export function SystemHealthDashboard({
+  services,
+  incidents = [],
+  metrics = [],
+  title,
+  description,
+  severity,
+  status,
+  className,
+  ...props
+}: SystemHealthDashboardProps) {
+  const serviceCount = services.length;
+  const healthyCount = services.filter((service) => service.status === "healthy").length;
+  const degradedCount = services.filter((service) => service.status === "degraded").length;
+  const downCount = services.filter((service) => service.status === "down").length;
+  const criticalIncidentCount = incidents.filter(
+    (incident) => incident.severity === "critical" || incident.severity === "error"
+  ).length;
+  const openIncidentCount = incidents.length;
+  const defaultSeverity = severityForHealth(
+    downCount,
+    degradedCount,
+    criticalIncidentCount,
+    openIncidentCount
+  );
+  const defaultStatus = statusForHealth(serviceCount, downCount, degradedCount);
+  const computedMetrics = metrics.length
+    ? metrics
+    : [
+        {
+          label: "Healthy services",
+          value: serviceCount ? `${healthyCount} / ${serviceCount}` : "0",
+          trend: serviceHealthTrend(healthyCount, degradedCount, downCount)
+        },
+        {
+          label: "Open incidents",
+          value: openIncidentCount,
+          trend: incidentTrend(criticalIncidentCount, openIncidentCount)
+        },
+        {
+          label: "Avg latency",
+          value: average(
+            services
+              .map((service) => service.latencyMs)
+              .filter((value): value is number => value !== undefined)
+          ),
+          trend: serviceCount ? `${serviceCount} monitored` : undefined
+        }
+      ];
+
+  return (
+    <Surface
+      {...props}
+      title={title ?? "System health"}
+      description={
+        description ??
+        healthSummary(serviceCount, healthyCount, degradedCount, downCount, openIncidentCount)
+      }
+      severity={severity ?? defaultSeverity}
+      status={status ?? defaultStatus}
+      className={["eth-admin-system-health", className].filter(Boolean).join(" ")}
+      data-eth-component="SystemHealthDashboard"
+    >
+      <div className="eth-admin-system-health__metrics">
+        {computedMetrics.map((metric) => (
+          <KPIBlock
+            key={String(metric.label)}
+            title={metric.label}
+            value={metric.value}
+            status={metric.trend}
+          />
+        ))}
+      </div>
+      <div className="eth-admin-system-health__services">
+        {services.length ? (
+          services.map((service) => {
+            const serviceIncidents = incidents.filter((incident) =>
+              incident.title.toLowerCase().includes(service.name.toLowerCase())
+            );
+
+            return (
+              <ServiceStatusCard
+                key={service.id}
+                service={{
+                  name: service.name,
+                  status: service.status,
+                  latencyMs: service.latencyMs,
+                  uptimePercent: service.status === "healthy" ? 99.9 : undefined,
+                  incidentsCount: service.incidentsCount ?? serviceIncidents.length,
+                  lastIncidentAt: serviceIncidents[0]?.startedAt
+                }}
+              />
+            );
+          })
+        ) : (
+          <p className="eth-admin-system-health__empty">No services are currently registered.</p>
+        )}
+      </div>
+      {incidents.length ? (
+        <section className="eth-admin-system-health__incidents">
+          <h3>Incidents</h3>
+          <ul>
+            {incidents.map((incident) => (
+              <li key={incident.id}>
+                <Badge severity={severityForIncident(incident.severity)}>{incident.severity}</Badge>
+                <span>{incident.title}</span>
+                <time>{incident.startedAt}</time>
+              </li>
+            ))}
+          </ul>
+        </section>
+      ) : null}
+    </Surface>
+  );
+}
+
+function average(values: number[]) {
+  if (!values.length) return "0 ms";
+  return `${Math.round(values.reduce((sum, value) => sum + value, 0) / values.length)} ms`;
+}
+
+function healthSummary(
+  serviceCount: number,
+  healthyCount: number,
+  degradedCount: number,
+  downCount: number,
+  openIncidentCount: number
+) {
+  if (!serviceCount) return "No services registered for this tenant.";
+
+  const exceptions: string[] = [];
+  if (degradedCount) exceptions.push(`${degradedCount} degraded`);
+  if (downCount) exceptions.push(`${downCount} down`);
+  if (openIncidentCount) {
+    exceptions.push(`${openIncidentCount} open ${pluralize(openIncidentCount, "incident")}`);
+  }
+
+  const serviceSummary = `${healthyCount} of ${serviceCount} ${pluralize(serviceCount, "service")} healthy`;
+  return exceptions.length
+    ? `${serviceSummary}; ${exceptions.join(", ")}.`
+    : `${serviceSummary}; no open incidents.`;
+}
+
+function serviceHealthTrend(healthyCount: number, degradedCount: number, downCount: number) {
+  if (downCount) {
+    return <Badge severity="danger">{`${downCount} down`}</Badge>;
+  }
+  if (degradedCount) {
+    return <Badge severity="warning">{`${degradedCount} degraded`}</Badge>;
+  }
+  if (healthyCount) {
+    return <Badge severity="success">Nominal</Badge>;
+  }
+  return undefined;
+}
+
+function incidentTrend(criticalIncidentCount: number, openIncidentCount: number) {
+  if (criticalIncidentCount) {
+    return <Badge severity="danger">{`${criticalIncidentCount} critical`}</Badge>;
+  }
+  if (openIncidentCount) {
+    return <Badge severity="warning">Investigating</Badge>;
+  }
+  return <Badge severity="success">Clear</Badge>;
+}
+
+function severityForHealth(
+  downCount: number,
+  degradedCount: number,
+  criticalIncidentCount: number,
+  openIncidentCount: number
+): EthSeverity | undefined {
+  if (downCount || criticalIncidentCount) return "danger";
+  if (degradedCount || openIncidentCount) return "warning";
+  return undefined;
+}
+
+function statusForHealth(
+  serviceCount: number,
+  downCount: number,
+  degradedCount: number
+): EthOperationalStatus {
+  if (!serviceCount) return "inactive";
+  if (downCount) return "failed";
+  if (degradedCount) return "warning";
+  return "active";
+}
+
+function pluralize(count: number, singular: string) {
+  return count === 1 ? singular : `${singular}s`;
+}
+
+function severityForIncident(severity: AdminIncident["severity"]): EthSeverity {
+  if (severity === "critical" || severity === "error") return "danger";
+  if (severity === "warning") return "warning";
+  return "info";
+}

package/src/components/TenantSettingsPanel.test.tsx

@@ -0,0 +1,38 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { TenantSettingsPanel } from "./TenantSettingsPanel";
+
+describe("TenantSettingsPanel", () => {
+  it("renders tenant settings with an admin styling hook and explicit save action", () => {
+    const { container } = render(
+      <TenantSettingsPanel
+        submitLabel="Save settings"
+        values={{ tenantName: "EchoThink, Inc.", region: "us-west" }}
+        sections={[
+          {
+            id: "general",
+            title: "General",
+            description: "Tenant identity and default region.",
+            fields: [
+              { name: "tenantName", type: "text", label: "Tenant name", required: true },
+              {
+                name: "region",
+                type: "select",
+                label: "Region",
+                options: [
+                  { value: "us-west", label: "US West" },
+                  { value: "eu-west", label: "EU West" }
+                ]
+              }
+            ]
+          }
+        ]}
+      />
+    );
+
+    expect(container.querySelector(".eth-admin-tenant-settings")).toBeTruthy();
+    expect(screen.getByRole("heading", { name: "Tenant settings" })).toBeTruthy();
+    expect(screen.getByText("Tenant identity and default region.")).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Save settings" })).toBeTruthy();
+  });
+});

package/src/components/TenantSettingsPanel.tsx

@@ -0,0 +1,44 @@
+import { ConfigForm, type FormValues } from "@echothink-ui/forms";
+import type { SurfaceComponentProps } from "@echothink-ui/core";
+import type { TenantSettingsSection } from "./types";
+
+export interface TenantSettingsPanelProps
+  extends Omit<SurfaceComponentProps, "children" | "onChange" | "onSubmit"> {
+  sections: TenantSettingsSection[];
+  values: FormValues;
+  onChange?: (values: FormValues) => void;
+  onSubmit?: (values: FormValues) => void;
+  submitLabel?: string;
+}
+
+export function TenantSettingsPanel({
+  sections,
+  values,
+  onChange,
+  onSubmit,
+  submitLabel = "Save settings",
+  title,
+  description,
+  className,
+  ...props
+}: TenantSettingsPanelProps) {
+  const effectiveDescription =
+    description === undefined
+      ? "Manage tenant identity, regional placement, and governance defaults."
+      : description;
+
+  return (
+    <ConfigForm
+      {...props}
+      title={title ?? "Tenant settings"}
+      description={effectiveDescription}
+      className={["eth-admin-tenant-settings", className].filter(Boolean).join(" ")}
+      sections={sections}
+      values={values}
+      onChange={onChange}
+      onSubmit={onSubmit}
+      submitLabel={submitLabel}
+      data-eth-component="TenantSettingsPanel"
+    />
+  );
+}

package/src/components/WorkerPoolPanel.test.tsx

@@ -0,0 +1,32 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { WorkerPoolPanel } from "./WorkerPoolPanel";
+
+describe("WorkerPoolPanel", () => {
+  it("renders worker capacity, health summary, and scale controls", () => {
+    const onScale = vi.fn();
+
+    render(
+      <WorkerPoolPanel
+        pools={[
+          { id: "render", name: "render", active: 12, total: 16, idle: 4, failed: 0 },
+          { id: "send", name: "send", active: 5, total: 8, idle: 3, failed: 1 }
+        ]}
+        onScale={onScale}
+      />
+    );
+
+    expect(screen.getByRole("heading", { name: "Worker pools" })).toBeTruthy();
+    expect(screen.getByText("2 pools")).toBeTruthy();
+    expect(screen.getByText("17 / 24")).toBeTruthy();
+    expect(screen.getByText("1 failed")).toBeTruthy();
+    expect(screen.getByText("Failure in pool")).toBeTruthy();
+
+    const capacity = screen.getByRole("progressbar", { name: "render capacity" });
+    expect(capacity.getAttribute("aria-valuenow")).toBe("75");
+    expect(capacity.getAttribute("aria-valuetext")).toBe("12 of 16 workers active");
+
+    fireEvent.click(screen.getByRole("button", { name: "Scale render up by 1" }));
+    expect(onScale).toHaveBeenCalledWith("render", 1);
+  });
+});