@echothink-ui/admin 0.1.0

package/src/components/JobQueuePanel.tsx

@@ -0,0 +1,171 @@
+import * as React from "react";
+import {
+  ActionGroup,
+  Badge,
+  type EthAction,
+  type EthSeverity,
+  type SurfaceComponentProps
+} from "@echothink-ui/core";
+import { DataTable, type DataColumn } from "@echothink-ui/data";
+import type { JobQueue } from "./types";
+
+export interface JobQueuePanelProps extends Omit<SurfaceComponentProps, "children" | "actions"> {
+  queues: JobQueue[];
+  actions?: EthAction[];
+}
+
+type JobQueueRow = Record<string, unknown> & JobQueue;
+
+export function JobQueuePanel({
+  queues,
+  actions,
+  title = "Job queues",
+  subtitle,
+  description,
+  density = "compact",
+  className,
+  "aria-labelledby": ariaLabelledBy,
+  eyebrow: _eyebrow,
+  status: _status,
+  severity: _severity,
+  loading: _loading,
+  empty: _empty,
+  error: _error,
+  items: _items,
+  metadata: _metadata,
+  footer: _footer,
+  ...props
+}: JobQueuePanelProps) {
+  const headingId = React.useId();
+  const rows: JobQueueRow[] = queues.map((queue) => ({ ...queue }));
+  const subtitleContent = subtitle ?? description;
+  const totals = queues.reduce(
+    (summary, queue) => ({
+      depth: summary.depth + queue.depth,
+      processing: summary.processing + queue.processing,
+      failed: summary.failed + queue.failed
+    }),
+    { depth: 0, processing: 0, failed: 0 }
+  );
+  const columns: DataColumn<JobQueueRow>[] = [
+    {
+      key: "name",
+      header: "Queue",
+      width: "34%",
+      render: (row) => (
+        <div className="eth-admin-job-queue__queue">
+          <strong>{row.name}</strong>
+          <span>{queueStateLabel(row)}</span>
+        </div>
+      )
+    },
+    {
+      key: "depth",
+      header: "Depth",
+      align: "end",
+      width: "16%",
+      render: (row) => <span className="eth-admin-job-queue__number">{formatCount(row.depth)}</span>
+    },
+    {
+      key: "processing",
+      header: "Processing",
+      align: "end",
+      width: "18%",
+      render: (row) => (
+        <span className="eth-admin-job-queue__number">{formatCount(row.processing)}</span>
+      )
+    },
+    {
+      key: "failed",
+      header: "Failed",
+      align: "end",
+      width: "14%",
+      render: (row) => (
+        <Badge severity={row.failed > 0 ? "danger" : "success"}>{formatCount(row.failed)}</Badge>
+      )
+    },
+    {
+      key: "retryRate",
+      header: "Retry rate",
+      align: "end",
+      width: "18%",
+      render: (row) =>
+        row.retryRate === undefined ? (
+          <span className="eth-admin-job-queue__muted">n/a</span>
+        ) : (
+          <Badge severity={retryRateSeverity(row.retryRate)}>
+            {formatRetryRate(row.retryRate)}
+          </Badge>
+        )
+    }
+  ];
+  const statusSeverity: EthSeverity =
+    queues.length === 0
+      ? "neutral"
+      : totals.failed > 0
+        ? "danger"
+        : totals.processing > 0
+          ? "info"
+          : "success";
+  const statusLabel =
+    queues.length === 0 ? "No queues" : totals.failed > 0 ? "Action needed" : "Operational";
+
+  return (
+    <section
+      {...props}
+      className={["eth-admin-job-queue", className].filter(Boolean).join(" ")}
+      data-eth-component="JobQueuePanel"
+      aria-labelledby={ariaLabelledBy ?? headingId}
+    >
+      <header>
+        <div className="eth-admin-job-queue__heading">
+          <h3 id={headingId}>{title}</h3>
+          {subtitleContent ? (
+            <div className="eth-admin-job-queue__subtitle">{subtitleContent}</div>
+          ) : null}
+        </div>
+        <div className="eth-admin-job-queue__header-actions">
+          <Badge severity={statusSeverity}>{statusLabel}</Badge>
+          <ActionGroup actions={actions} />
+        </div>
+      </header>
+      <dl className="eth-admin-job-queue__summary" aria-label="Queue totals">
+        <div>
+          <dt>Total depth</dt>
+          <dd>{formatCount(totals.depth)}</dd>
+        </div>
+        <div>
+          <dt>Processing</dt>
+          <dd>{formatCount(totals.processing)}</dd>
+        </div>
+        <div>
+          <dt>Failed</dt>
+          <dd>{formatCount(totals.failed)}</dd>
+        </div>
+      </dl>
+      <DataTable rows={rows} columns={columns} density={density} />
+    </section>
+  );
+}
+
+function queueStateLabel(queue: JobQueue) {
+  if (queue.failed > 0) return "Failure requires review";
+  if (queue.processing > 0) return "Workers active";
+  if (queue.depth > 0) return "Waiting for capacity";
+  return "Idle";
+}
+
+function retryRateSeverity(retryRate: number): EthSeverity {
+  if (retryRate >= 1) return "danger";
+  if (retryRate > 0.1) return "warning";
+  if (retryRate > 0) return "info";
+  return "success";
+}
+
+function formatCount(value: number) {
+  return new Intl.NumberFormat("en-US").format(value);
+}
+
+function formatRetryRate(value: number) {
+  return `${value.toLocaleString("en-US", { maximumFractionDigits: 2 })}%`;
+}

package/src/components/PolicyConfigPanel.test.tsx

@@ -0,0 +1,45 @@
+import { render, screen, within } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { PolicyConfigPanel } from "./PolicyConfigPanel";
+
+describe("PolicyConfigPanel", () => {
+  it("renders policy metadata, scope summary, and an enabled save action", () => {
+    render(
+      <PolicyConfigPanel
+        policy={{
+          id: "external-send-review",
+          name: "External send review",
+          description: "External messages require legal review before delivery.",
+          variables: ["recipient_domain", "message_channel", "risk_score"],
+          rules: [
+            {
+              id: "external-domain",
+              when: { kind: "leaf", field: "recipient_domain", op: "eq", value: "external" },
+              then: { type: "require-approval", target: "legal-review" }
+            }
+          ]
+        }}
+        schema={{
+          description: "Approval gates for outbound communications.",
+          properties: {
+            recipient_domain: { type: "string", title: "Recipient domain" },
+            message_channel: { type: "string", title: "Message channel" },
+            risk_score: { type: "number", title: "Risk score" }
+          }
+        }}
+        onChange={() => undefined}
+        onSave={() => undefined}
+      />
+    );
+
+    expect(screen.getByRole("heading", { name: "Policy configuration" })).toBeTruthy();
+
+    const summary = screen.getByRole("complementary", { name: "Policy summary" });
+    expect(within(summary).getByText("Configured")).toBeTruthy();
+    expect(within(summary).getByText("recipient_domain")).toBeTruthy();
+    expect(within(summary).getByText("message_channel")).toBeTruthy();
+
+    const saveButton = screen.getByRole("button", { name: "Save policy" });
+    expect(saveButton.hasAttribute("disabled")).toBe(false);
+  });
+});

package/src/components/PolicyConfigPanel.tsx

@@ -0,0 +1,131 @@
+import { useId } from "react";
+import {
+  Badge,
+  Button,
+  FormField,
+  Surface,
+  Tag,
+  TextInput,
+  Textarea,
+  type SurfaceComponentProps
+} from "@echothink-ui/core";
+import { RuleBuilder } from "@echothink-ui/forms";
+import type { AdminPolicyConfig, JsonSchema } from "./types";
+
+export interface PolicyConfigPanelProps
+  extends Omit<SurfaceComponentProps, "children" | "onChange"> {
+  policy: AdminPolicyConfig;
+  schema: JsonSchema;
+  onChange?: (policy: AdminPolicyConfig) => void;
+  onSave?: (policy: AdminPolicyConfig) => void;
+}
+
+export function PolicyConfigPanel({
+  policy,
+  schema,
+  onChange,
+  onSave,
+  title,
+  description,
+  density = "default",
+  className,
+  ...props
+}: PolicyConfigPanelProps) {
+  const generatedId = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const policyDomId = `eth-admin-policy-${String(policy.id ?? generatedId).replace(
+    /[^a-zA-Z0-9_-]/g,
+    "-"
+  )}`;
+  const update = (patch: Partial<AdminPolicyConfig>) => onChange?.({ ...policy, ...patch });
+  const schemaFields = Object.keys(schema.properties ?? {});
+  const variables = policy.variables?.length ? policy.variables : schemaFields;
+  const rules = policy.rules ?? [];
+  const visibleVariables = variables.slice(0, 5);
+  const hiddenVariableCount = Math.max(0, variables.length - visibleVariables.length);
+
+  return (
+    <Surface
+      {...props}
+      title={title ?? "Policy configuration"}
+      description={
+        description ??
+        schema.description ??
+        "Configure policy metadata and conditional rules for governed operations."
+      }
+      density={density}
+      className={["eth-admin-policy-config", className].filter(Boolean).join(" ")}
+      data-eth-component="PolicyConfigPanel"
+    >
+      <div className="eth-admin-policy-config__layout">
+        <div className="eth-admin-policy-config__fields">
+          <FormField id={`${policyDomId}-name`} label="Policy name" required>
+            <TextInput
+              id={`${policyDomId}-name`}
+              density={density}
+              value={policy.name ?? ""}
+              onChange={(event) => update({ name: event.currentTarget.value })}
+            />
+          </FormField>
+          <FormField id={`${policyDomId}-description`} label="Description">
+            <Textarea
+              id={`${policyDomId}-description`}
+              rows={4}
+              value={policy.description ?? ""}
+              onChange={(event) => update({ description: event.currentTarget.value })}
+            />
+          </FormField>
+        </div>
+
+        <aside className="eth-admin-policy-config__summary" aria-label="Policy summary">
+          <div className="eth-admin-policy-config__summary-header">
+            <h3>Policy scope</h3>
+            <Badge severity={rules.length ? "success" : "warning"}>
+              {rules.length ? "Configured" : "Needs rules"}
+            </Badge>
+          </div>
+          <dl className="eth-admin-policy-config__summary-grid">
+            <div>
+              <dt>Rules</dt>
+              <dd>{rules.length}</dd>
+            </div>
+            <div>
+              <dt>Variables</dt>
+              <dd>{variables.length}</dd>
+            </div>
+            <div>
+              <dt>Schema fields</dt>
+              <dd>{schemaFields.length}</dd>
+            </div>
+          </dl>
+          <div className="eth-admin-policy-config__variables">
+            <span>Rule variables</span>
+            {variables.length ? (
+              <div className="eth-admin-policy-config__variable-list">
+                {visibleVariables.map((variable) => (
+                  <Tag key={variable}>{variable}</Tag>
+                ))}
+                {hiddenVariableCount ? (
+                  <Badge severity="neutral">+{hiddenVariableCount} more</Badge>
+                ) : null}
+              </div>
+            ) : (
+              <p>No variables available.</p>
+            )}
+          </div>
+        </aside>
+      </div>
+
+      <RuleBuilder
+        className="eth-admin-policy-config__rules"
+        rules={rules}
+        variables={variables}
+        onChange={(nextRules) => update({ rules: nextRules })}
+      />
+      <div className="eth-admin-policy-config__actions">
+        <Button type="button" disabled={!onSave} onClick={() => onSave?.(policy)}>
+          Save policy
+        </Button>
+      </div>
+    </Surface>
+  );
+}

package/src/components/QueueDepthChart.tsx

@@ -0,0 +1,70 @@
+import { ChartBlock } from "@echothink-ui/charts";
+import type { SurfaceComponentProps } from "@echothink-ui/core";
+import type { QueueDepthPoint } from "./types";
+
+export interface QueueDepthChartProps extends Omit<SurfaceComponentProps, "children"> {
+  points: QueueDepthPoint[];
+}
+
+const depthFormatter = new Intl.NumberFormat("en-US", { maximumFractionDigits: 1 });
+const queueDepthSeries = [{ key: "depth", label: "Queue depth", color: "#0f62fe" }];
+
+export function QueueDepthChart({
+  points,
+  title,
+  metadata,
+  className,
+  ...props
+}: QueueDepthChartProps) {
+  const data = points.map((point, index) => {
+    const row = {
+      label: point.label ?? point.timestamp ?? String(index + 1),
+      depth: point.depth
+    };
+
+    return point.timestamp ? { ...row, timestamp: point.timestamp } : row;
+  });
+
+  return (
+    <ChartBlock
+      {...props}
+      className={["eth-admin-queue-depth-chart", className].filter(Boolean).join(" ")}
+      title={title ?? "Queue depth"}
+      metadata={metadata ?? queueDepthMetadata(points)}
+      chartType="line"
+      data={data}
+      valueKey="depth"
+      series={queueDepthSeries}
+      data-eth-component="QueueDepthChart"
+    />
+  );
+}
+
+function queueDepthMetadata(points: QueueDepthPoint[]): SurfaceComponentProps["metadata"] {
+  const depths = points.map((point) => point.depth).filter(Number.isFinite);
+  if (!depths.length) return [];
+
+  const current = depths.at(-1) ?? 0;
+  const previous = depths.at(-2);
+  const peak = Math.max(...depths);
+  const average = depths.reduce((total, depth) => total + depth, 0) / depths.length;
+
+  return [
+    { label: "Current depth", value: formatDepth(current) },
+    { label: "Peak", value: formatDepth(peak) },
+    { label: "Average", value: formatDepth(average) },
+    {
+      label: "Latest change",
+      value: previous === undefined ? "n/a" : formatDelta(current - previous)
+    }
+  ];
+}
+
+function formatDepth(value: number) {
+  return depthFormatter.format(value);
+}
+
+function formatDelta(value: number) {
+  if (value === 0) return "No change";
+  return `${value > 0 ? "+" : ""}${formatDepth(value)}`;
+}

package/src/components/RateLimitPanel.test.tsx

@@ -0,0 +1,29 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { RateLimitPanel } from "./RateLimitPanel";
+
+describe("RateLimitPanel", () => {
+  it("renders rate-limit usage, summary state, and non-editable configuration without an update handler", () => {
+    render(
+      <RateLimitPanel
+        limits={[
+          { id: "send", name: "send.email", current: 80, limit: 100, windowSeconds: 60 },
+          { id: "ingest", name: "ingest.docs", current: 200, limit: 1000, windowSeconds: 60 }
+        ]}
+      />
+    );
+
+    expect(screen.getByRole("heading", { name: "Rate limits" })).toBeTruthy();
+    expect(screen.getByText("1 near limit")).toBeTruthy();
+    expect(screen.getByText("send.email 80%")).toBeTruthy();
+
+    const usage = screen.getByRole("progressbar", { name: "send.email usage" });
+    expect(usage.getAttribute("aria-valuenow")).toBe("80");
+    expect(usage.getAttribute("aria-valuetext")).toBe("80% used, 80 of 100 requests");
+
+    const configuredLimit = screen.getByRole("spinbutton", {
+      name: "send.email configured limit"
+    });
+    expect(configuredLimit.hasAttribute("readonly")).toBe(true);
+  });
+});

package/src/components/RateLimitPanel.tsx

@@ -0,0 +1,249 @@
+import * as React from "react";
+import {
+  ActionGroup,
+  Badge,
+  NumberInput,
+  type EthSeverity,
+  type SurfaceComponentProps
+} from "@echothink-ui/core";
+import { DataTable, type DataColumn } from "@echothink-ui/data";
+import type { RateLimit } from "./types";
+
+export interface RateLimitPanelProps extends Omit<SurfaceComponentProps, "children"> {
+  limits: RateLimit[];
+  onUpdate?: (id: string, update: Partial<RateLimit>) => void;
+}
+
+type RateLimitTone = "normal" | "warning" | "danger" | "neutral";
+
+interface RateLimitState {
+  label: string;
+  severity: EthSeverity;
+  tone: RateLimitTone;
+}
+
+type RateLimitMeterStyle = React.CSSProperties & {
+  "--eth-admin-rate-limit-usage": string;
+};
+
+type RateLimitRow = Record<string, unknown> &
+  RateLimit & {
+    cappedPercent: number;
+    percent: number;
+    percentLabel: string;
+    state: RateLimitState;
+    usageLabel: string;
+  };
+
+export function RateLimitPanel({
+  limits,
+  onUpdate,
+  title = "Rate limits",
+  subtitle,
+  description,
+  actions,
+  density = "compact",
+  className,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  eyebrow: _eyebrow,
+  status: _status,
+  severity: _severity,
+  loading: _loading,
+  empty: _empty,
+  error: _error,
+  items: _items,
+  metadata: _metadata,
+  footer: _footer,
+  ...sectionProps
+}: RateLimitPanelProps) {
+  const headingId = React.useId();
+  const rows: RateLimitRow[] = limits.map((limit) => {
+    const percent = limit.limit > 0 ? (limit.current / limit.limit) * 100 : 0;
+    const cappedPercent = Math.min(100, Math.max(0, percent));
+
+    return {
+      ...limit,
+      cappedPercent,
+      percent,
+      percentLabel: limit.limit > 0 ? formatPercent(percent) : "No limit",
+      state: rateLimitState(percent, limit.limit),
+      usageLabel:
+        limit.limit > 0
+          ? `${formatNumber(limit.current)} / ${formatNumber(limit.limit)}`
+          : `${formatNumber(limit.current)} requests`
+    };
+  });
+  const highestUsage = rows.reduce<RateLimitRow | undefined>((highest, row) => {
+    if (row.limit <= 0) return highest;
+    if (!highest || row.percent > highest.percent) return row;
+    return highest;
+  }, undefined);
+  const exceededCount = rows.filter((row) => row.limit > 0 && row.percent >= 100).length;
+  const nearLimitCount = rows.filter(
+    (row) => row.limit > 0 && row.percent >= 80 && row.percent < 100
+  ).length;
+  const statusSummary = rateLimitStatusSummary(limits.length, exceededCount, nearLimitCount);
+  const supportingText = subtitle ?? description;
+  const columns: DataColumn<RateLimitRow>[] = [
+    {
+      key: "name",
+      header: "Limit",
+      width: "28%",
+      render: (row) => (
+        <div className="eth-admin-rate-limit__limit">
+          <strong>{row.name}</strong>
+          <span>{row.state.label}</span>
+        </div>
+      )
+    },
+    {
+      key: "current",
+      header: "Usage",
+      width: "34%",
+      render: (row) => (
+        <div className="eth-admin-rate-limit__usage">
+          <div className="eth-admin-rate-limit__usage-copy">
+            <span>{row.usageLabel}</span>
+            <strong>{row.percentLabel}</strong>
+          </div>
+          <span
+            className="eth-admin-rate-limit__meter"
+            role="progressbar"
+            aria-label={`${row.name} usage`}
+            aria-valuemin={0}
+            aria-valuemax={100}
+            aria-valuenow={Math.round(row.cappedPercent)}
+            aria-valuetext={
+              row.limit > 0
+                ? `${formatPercent(row.percent)} used, ${formatNumber(row.current)} of ${formatNumber(
+                    row.limit
+                  )} requests`
+                : "No configured limit"
+            }
+            style={
+              {
+                "--eth-admin-rate-limit-usage": `${row.cappedPercent}%`
+              } as RateLimitMeterStyle
+            }
+          >
+            <span
+              className={[
+                "eth-admin-rate-limit__meter-fill",
+                `eth-admin-rate-limit__meter-fill--${row.state.tone}`
+              ].join(" ")}
+            />
+          </span>
+        </div>
+      )
+    },
+    {
+      key: "windowSeconds",
+      header: "Window",
+      width: "8rem",
+      render: (row) => (
+        <span className="eth-admin-rate-limit__number">{formatWindow(row.windowSeconds)}</span>
+      )
+    },
+    {
+      key: "limit",
+      header: "Configured limit",
+      width: "13rem",
+      render: (row) => (
+        <NumberInput
+          aria-label={`${row.name} configured limit`}
+          className="eth-admin-rate-limit__limit-input"
+          density={density}
+          hideLabel
+          min={0}
+          step={1}
+          readOnly={!onUpdate}
+          value={row.limit}
+          onChange={(event) => {
+            const nextLimit = Number(event.currentTarget.value);
+            if (Number.isFinite(nextLimit)) onUpdate?.(row.id, { limit: nextLimit });
+          }}
+        />
+      )
+    }
+  ];
+
+  return (
+    <section
+      {...sectionProps}
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledBy ?? (ariaLabel ? undefined : headingId)}
+      className={["eth-admin-rate-limit", className].filter(Boolean).join(" ")}
+      data-eth-component="RateLimitPanel"
+    >
+      <header>
+        <div className="eth-admin-rate-limit__heading">
+          <h3 id={headingId}>{title}</h3>
+          {supportingText ? <p>{supportingText}</p> : null}
+        </div>
+        <div className="eth-admin-rate-limit__header-actions">
+          <Badge severity={statusSummary.severity}>{statusSummary.label}</Badge>
+          <ActionGroup actions={actions} />
+        </div>
+      </header>
+      <dl className="eth-admin-rate-limit__summary" aria-label="Rate limit totals">
+        <div>
+          <dt>Tracked limits</dt>
+          <dd>{formatNumber(limits.length)}</dd>
+        </div>
+        <div>
+          <dt>Highest usage</dt>
+          <dd>
+            {highestUsage ? `${highestUsage.name} ${formatPercent(highestUsage.percent)}` : "n/a"}
+          </dd>
+        </div>
+        <div>
+          <dt>Needs review</dt>
+          <dd>{formatNumber(exceededCount + nearLimitCount)}</dd>
+        </div>
+      </dl>
+      <DataTable
+        rows={rows}
+        columns={columns}
+        rowKey="id"
+        density={density}
+        className="eth-admin-rate-limit__table"
+        emptyState={<p className="eth-admin-rate-limit__empty">No rate limits configured.</p>}
+      />
+    </section>
+  );
+}
+
+function rateLimitState(percent: number, limit: number): RateLimitState {
+  if (limit <= 0) return { label: "No limit", severity: "neutral", tone: "neutral" };
+  if (percent >= 100) return { label: "Exceeded", severity: "danger", tone: "danger" };
+  if (percent >= 80) return { label: "Near limit", severity: "warning", tone: "warning" };
+  return { label: "Within limit", severity: "success", tone: "normal" };
+}
+
+function rateLimitStatusSummary(
+  totalCount: number,
+  exceededCount: number,
+  nearLimitCount: number
+): Pick<RateLimitState, "label" | "severity"> {
+  if (totalCount === 0) return { label: "No limits", severity: "neutral" };
+  if (exceededCount > 0) {
+    return { label: `${formatNumber(exceededCount)} exceeded`, severity: "danger" };
+  }
+  if (nearLimitCount > 0) {
+    return { label: `${formatNumber(nearLimitCount)} near limit`, severity: "warning" };
+  }
+  return { label: "Within limits", severity: "success" };
+}
+
+function formatWindow(seconds: number) {
+  return `${formatNumber(seconds)}s`;
+}
+
+function formatPercent(value: number) {
+  return `${Math.round(value).toLocaleString("en-US")}%`;
+}
+
+function formatNumber(value: number) {
+  return new Intl.NumberFormat("en-US").format(value);
+}