@echothink-ui/developer 0.1.0

package/src/components/RequestResponseViewer.tsx

@@ -0,0 +1,169 @@
+import * as React from "react";
+import type { RequestResponseViewerProps } from "./types";
+import { formatUnknown } from "./devUtils";
+
+type Tab = "request-headers" | "request-body" | "response-headers" | "response-body";
+
+const tabs: Array<{ id: Tab; label: string; emptyLabel: string }> = [
+  { id: "request-headers", label: "Request headers", emptyLabel: "No request headers." },
+  { id: "request-body", label: "Request body", emptyLabel: "No request body." },
+  { id: "response-headers", label: "Response headers", emptyLabel: "No response headers." },
+  { id: "response-body", label: "Response body", emptyLabel: "No response body." }
+];
+
+export function RequestResponseViewer({
+  request,
+  response,
+  className,
+  "aria-label": ariaLabel,
+  ...props
+}: RequestResponseViewerProps) {
+  const [tab, setTab] = React.useState<Tab>("request-headers");
+  const tabRefs = React.useRef<Array<HTMLButtonElement | null>>([]);
+  const generatedId = React.useId().replace(/:/g, "");
+  const activeIndex = Math.max(
+    tabs.findIndex((item) => item.id === tab),
+    0
+  );
+  const regionLabel = `${request.method} ${request.url} ${response.status}`;
+  const durationLabel =
+    typeof response.durationMs === "number" ? `${response.durationMs} ms` : "Duration unavailable";
+
+  const selectTab = (nextIndex: number, shouldFocus = false) => {
+    const nextTab = tabs[nextIndex] ?? tabs[0]!;
+
+    setTab(nextTab.id);
+
+    if (shouldFocus) {
+      window.requestAnimationFrame(() => tabRefs.current[nextIndex]?.focus());
+    }
+  };
+
+  const onTabKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      selectTab((activeIndex - 1 + tabs.length) % tabs.length, true);
+    } else if (event.key === "ArrowRight") {
+      event.preventDefault();
+      selectTab((activeIndex + 1) % tabs.length, true);
+    } else if (event.key === "Home") {
+      event.preventDefault();
+      selectTab(0, true);
+    } else if (event.key === "End") {
+      event.preventDefault();
+      selectTab(tabs.length - 1, true);
+    }
+  };
+
+  return (
+    <section
+      {...props}
+      aria-label={ariaLabel ?? regionLabel}
+      className={`eth-dev-request-response-viewer ${className ?? ""}`.trim()}
+      data-eth-component="RequestResponseViewer"
+    >
+      <header className="eth-dev-request-response-viewer__header">
+        <div className="eth-dev-request-response-viewer__request">
+          <span
+            className={`eth-dev-request-response-viewer__method eth-dev-request-response-viewer__method--${tokenize(request.method)}`}
+          >
+            {request.method}
+          </span>
+          <code title={request.url}>{request.url}</code>
+        </div>
+        <dl className="eth-dev-request-response-viewer__meta" aria-label="HTTP response summary">
+          <div>
+            <dt>Status</dt>
+            <dd
+              className={`eth-dev-request-response-viewer__status eth-dev-request-response-viewer__status--${statusTone(response.status)}`}
+            >
+              {response.status}
+            </dd>
+          </div>
+          <div>
+            <dt>Time</dt>
+            <dd>{durationLabel}</dd>
+          </div>
+        </dl>
+      </header>
+      <div
+        className="eth-dev-request-response-viewer__tabs"
+        role="tablist"
+        aria-label="HTTP message sections"
+      >
+        {tabs.map((item, index) => (
+          <button
+            key={item.id}
+            aria-controls={`${generatedId}-${item.id}-panel`}
+            aria-selected={tab === item.id}
+            className="eth-dev-request-response-viewer__tab"
+            id={`${generatedId}-${item.id}-tab`}
+            ref={(node) => {
+              tabRefs.current[index] = node;
+            }}
+            role="tab"
+            tabIndex={tab === item.id ? 0 : -1}
+            type="button"
+            onClick={() => selectTab(index)}
+            onKeyDown={onTabKeyDown}
+          >
+            {item.label}
+          </button>
+        ))}
+      </div>
+      {tabs.map((item) => {
+        const content = contentFor(item.id, request, response);
+
+        return (
+          <pre
+            key={item.id}
+            aria-labelledby={`${generatedId}-${item.id}-tab`}
+            className={`eth-dev-request-response-viewer__panel ${
+              content ? "" : "eth-dev-request-response-viewer__panel--empty"
+            }`.trim()}
+            hidden={tab !== item.id}
+            id={`${generatedId}-${item.id}-panel`}
+            role="tabpanel"
+            tabIndex={tab === item.id ? 0 : -1}
+          >
+            <code>{content || item.emptyLabel}</code>
+          </pre>
+        );
+      })}
+    </section>
+  );
+}
+
+function contentFor(
+  tab: Tab,
+  request: RequestResponseViewerProps["request"],
+  response: RequestResponseViewerProps["response"]
+) {
+  switch (tab) {
+    case "request-headers":
+      return formatHeaders(request.headers);
+    case "request-body":
+      return formatUnknown(request.body);
+    case "response-headers":
+      return formatHeaders(response.headers);
+    case "response-body":
+      return formatUnknown(response.body);
+  }
+}
+
+function formatHeaders(headers: Record<string, string> | undefined) {
+  if (!headers || Object.keys(headers).length === 0) return "";
+  return formatUnknown(headers);
+}
+
+function statusTone(status: number) {
+  if (status >= 200 && status < 300) return "success";
+  if (status >= 300 && status < 400) return "redirect";
+  if (status >= 400 && status < 500) return "warning";
+  if (status >= 500) return "error";
+  return "neutral";
+}
+
+function tokenize(value: string) {
+  return value.toLowerCase().replace(/[^a-z0-9-]/g, "");
+}

package/src/components/SchemaViewer.tsx

@@ -0,0 +1,157 @@
+import * as React from "react";
+import { CheckmarkFilled, ErrorFilled, WarningFilled } from "@carbon/icons-react";
+import type { SchemaViewerProps } from "./types";
+import { JSONViewer } from "./JSONViewer";
+
+type ValidationTone = "valid" | "invalid" | "warning" | "unknown";
+
+interface SchemaStats {
+  nodes: number;
+  topLevelKeys: number;
+  properties: number;
+  required: number;
+}
+
+export function SchemaViewer({
+  schema,
+  validationState,
+  className,
+  ...props
+}: SchemaViewerProps) {
+  const stats = React.useMemo(() => collectSchemaStats(schema), [schema]);
+  const tone = normalizeValidationState(validationState);
+  const status = getStatusConfig(tone, stats);
+
+  return (
+    <section
+      {...props}
+      className={`eth-dev-schema-viewer ${className ?? ""}`}
+      data-eth-component="SchemaViewer"
+      data-validation-state={tone}
+    >
+      <header className="eth-dev-schema-viewer__status">
+        <span className="eth-dev-schema-viewer__status-icon" aria-hidden="true">
+          <StatusIcon tone={tone} />
+        </span>
+        <div className="eth-dev-schema-viewer__status-copy">
+          <p className="eth-dev-schema-viewer__status-title">{status.title}</p>
+          <p className="eth-dev-schema-viewer__status-description">{status.description}</p>
+        </div>
+        <dl className="eth-dev-schema-viewer__stats" aria-label="Schema summary">
+          <div>
+            <dt>Keys</dt>
+            <dd>{stats.topLevelKeys}</dd>
+          </div>
+          <div>
+            <dt>Properties</dt>
+            <dd>{stats.properties}</dd>
+          </div>
+          <div>
+            <dt>Required</dt>
+            <dd>{stats.required}</dd>
+          </div>
+        </dl>
+      </header>
+      <JSONViewer className="eth-dev-schema-viewer__json" value={schema} defaultExpandedDepth={2} />
+    </section>
+  );
+}
+
+function normalizeValidationState(validationState: SchemaViewerProps["validationState"]): ValidationTone {
+  if (validationState === "valid" || validationState === "invalid" || validationState === "warning") {
+    return validationState;
+  }
+
+  return "unknown";
+}
+
+function getStatusConfig(tone: ValidationTone, stats: SchemaStats) {
+  const summary = `${stats.nodes} nodes inspected across ${stats.properties} properties`;
+
+  switch (tone) {
+    case "valid":
+      return {
+        title: "Schema valid",
+        description: summary
+      };
+    case "invalid":
+      return {
+        title: "Schema invalid",
+        description: "Review schema structure and validation rules before publishing."
+      };
+    case "warning":
+      return {
+        title: "Schema warning",
+        description: "Schema is readable, but validation reported conditions that need review."
+      };
+    default:
+      return {
+        title: "Schema status unknown",
+        description: summary
+      };
+  }
+}
+
+function collectSchemaStats(schema: object): SchemaStats {
+  const stats: SchemaStats = {
+    nodes: 0,
+    topLevelKeys: isPlainObject(schema)
+      ? Object.keys(schema).length
+      : Array.isArray(schema)
+        ? schema.length
+        : 1,
+    properties: 0,
+    required: 0
+  };
+  const seen = new WeakSet<object>();
+
+  const visit = (node: unknown, key?: string) => {
+    stats.nodes += 1;
+
+    if (Array.isArray(node)) {
+      if (seen.has(node)) {
+        return;
+      }
+
+      seen.add(node);
+
+      if (key === "required" && node.every((item) => typeof item === "string")) {
+        stats.required += node.length;
+      }
+
+      node.forEach((item) => visit(item));
+      return;
+    }
+
+    if (!isPlainObject(node) || seen.has(node)) {
+      return;
+    }
+
+    seen.add(node);
+
+    if (isPlainObject(node.properties)) {
+      stats.properties += Object.keys(node.properties).length;
+    }
+
+    Object.entries(node).forEach(([entryKey, entryValue]) => visit(entryValue, entryKey));
+  };
+
+  visit(schema);
+  return stats;
+}
+
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+function StatusIcon({ tone }: { tone: ValidationTone }) {
+  if (tone === "valid") {
+    return <CheckmarkFilled size={20} />;
+  }
+
+  if (tone === "invalid") {
+    return <ErrorFilled size={20} />;
+  }
+
+  return <WarningFilled size={20} />;
+}

package/src/components/TerminalPanel.test.tsx

@@ -0,0 +1,33 @@
+import { fireEvent, render, screen, within } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { TerminalPanel } from "./TerminalPanel";
+
+describe("TerminalPanel", () => {
+  it("renders a sandbox terminal region and submits typed commands", () => {
+    const onCommand = vi.fn();
+
+    render(
+      <TerminalPanel
+        lines={[
+          { id: "1", stream: "stdout", text: "$ ls -la" },
+          { id: "2", stream: "stdout", text: "total 24" },
+          { id: "3", stream: "stderr", text: "warning: untracked file 'tmp.txt'" }
+        ]}
+        onCommand={onCommand}
+      />
+    );
+
+    const panel = screen.getByRole("region", { name: "Sandbox terminal" });
+    expect(within(panel).getByRole("log", { name: "Terminal output" })).toBeTruthy();
+    expect(within(panel).getByText("Sandboxed")).toBeTruthy();
+    expect(within(panel).getByText("ERR")).toBeTruthy();
+    expect(within(panel).getByText("warning: untracked file 'tmp.txt'")).toBeTruthy();
+
+    const input = within(panel).getByRole("textbox", { name: "Terminal command" });
+    fireEvent.change(input, { target: { value: "pwd" } });
+    fireEvent.click(within(panel).getByRole("button", { name: "Run command" }));
+
+    expect(onCommand).toHaveBeenCalledWith("pwd");
+    expect((input as HTMLInputElement).value).toBe("");
+  });
+});

package/src/components/TerminalPanel.tsx

@@ -0,0 +1,134 @@
+import * as React from "react";
+import { Play } from "@carbon/icons-react";
+import { Button } from "@echothink-ui/core";
+import type { TerminalPanelProps } from "./types";
+
+export function TerminalPanel({
+  lines,
+  prompt = "$",
+  onCommand,
+  disabled,
+  className,
+  role = "region",
+  "aria-label": ariaLabel = "Sandbox terminal",
+  "aria-labelledby": ariaLabelledBy,
+  ...props
+}: TerminalPanelProps) {
+  const [command, setCommand] = React.useState("");
+  const inputId = React.useId();
+  const errorCount = lines.filter((line) => line.stream === "stderr").length;
+  const canSubmit = !disabled && command.trim().length > 0;
+  const statusLabel = disabled ? "Input disabled" : "Sandboxed";
+  const panelClassName = [
+    "eth-dev-terminal-panel",
+    disabled ? "eth-dev-terminal-panel--disabled" : "",
+    className ?? ""
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const submit = (event: React.FormEvent) => {
+    event.preventDefault();
+    if (!canSubmit) return;
+    onCommand?.(command);
+    setCommand("");
+  };
+
+  return (
+    <section
+      {...props}
+      className={panelClassName}
+      data-eth-component="TerminalPanel"
+      role={role}
+      aria-label={ariaLabelledBy ? undefined : ariaLabel}
+      aria-labelledby={ariaLabelledBy}
+    >
+      <header className="eth-dev-terminal-panel__header">
+        <div className="eth-dev-terminal-panel__heading">
+          <p className="eth-dev-terminal-panel__eyebrow">Developer terminal</p>
+          <h3>Sandbox terminal</h3>
+          <p>Review command output and send scoped commands into the configured sandbox.</p>
+        </div>
+        <div className="eth-dev-terminal-panel__status" aria-live="polite">
+          <span className="eth-dev-terminal-panel__status-indicator" aria-hidden="true" />
+          <span>{statusLabel}</span>
+        </div>
+      </header>
+      <dl className="eth-dev-terminal-panel__summary" aria-label="Terminal summary">
+        <div>
+          <dt>Lines</dt>
+          <dd>{lines.length}</dd>
+        </div>
+        <div>
+          <dt>Stderr</dt>
+          <dd>{errorCount}</dd>
+        </div>
+        <div>
+          <dt>Prompt</dt>
+          <dd>{prompt}</dd>
+        </div>
+      </dl>
+      <div className="eth-dev-terminal-panel__viewport">
+        {lines.length ? (
+          <pre
+            className="eth-dev-terminal-panel__output"
+            role="log"
+            aria-label="Terminal output"
+            aria-live="polite"
+            aria-relevant="additions text"
+            aria-atomic="false"
+          >
+            <code className="eth-dev-terminal-panel__output-code">
+              {lines.map((line) => (
+                <span
+                  key={line.id}
+                  className={`eth-dev-terminal-panel__line eth-dev-terminal-panel__line--${line.stream}`}
+                >
+                  <span
+                    className="eth-dev-terminal-panel__stream"
+                    aria-label={line.stream === "stderr" ? "Standard error" : "Standard output"}
+                  >
+                    {line.stream === "stderr" ? "ERR" : "OUT"}
+                  </span>
+                  <span className="eth-dev-terminal-panel__line-text">{line.text}</span>
+                </span>
+              ))}
+            </code>
+          </pre>
+        ) : (
+          <div className="eth-dev-terminal-panel__empty" role="status">
+            <h4>No terminal output</h4>
+            <p>Command output will appear here when the sandbox emits data.</p>
+          </div>
+        )}
+      </div>
+      <form className="eth-dev-terminal-panel__input" onSubmit={submit}>
+        <label className="eth-dev-terminal-panel__visually-hidden" htmlFor={inputId}>
+          Terminal command
+        </label>
+        <span className="eth-dev-terminal-panel__prompt" aria-hidden="true">
+          {prompt}
+        </span>
+        <input
+          id={inputId}
+          value={command}
+          disabled={disabled}
+          onChange={(event) => setCommand(event.currentTarget.value)}
+          autoComplete="off"
+          spellCheck={false}
+          placeholder={disabled ? "Input disabled" : "Type a command"}
+        />
+        <Button
+          type="submit"
+          density="compact"
+          intent="primary"
+          icon={<Play size={16} />}
+          disabled={!canSubmit}
+          aria-label="Run command"
+        >
+          Run
+        </Button>
+      </form>
+    </section>
+  );
+}

package/src/components/TraceTimeline.test.tsx

@@ -0,0 +1,63 @@
+import { render, screen, within } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { TraceTimeline } from "./TraceTimeline";
+
+describe("TraceTimeline", () => {
+  it("renders trace summary, axis, and accessible span rows", () => {
+    render(
+      <TraceTimeline
+        spans={[
+          {
+            id: "s1",
+            name: "ingest.batch",
+            startMs: 0,
+            durationMs: 240,
+            service: "ingest",
+            status: "succeeded"
+          },
+          {
+            id: "s2",
+            name: "render.frame",
+            startMs: 240,
+            durationMs: 1800,
+            service: "render",
+            parentId: "s1",
+            status: "running"
+          },
+          {
+            id: "s3",
+            name: "send.email",
+            startMs: 2040,
+            durationMs: 600,
+            service: "send",
+            parentId: "s1",
+            status: "failed"
+          }
+        ]}
+      />
+    );
+
+    const timeline = screen.getByRole("region", { name: "Trace timeline" });
+    expect(within(timeline).getByText("Spans").parentElement?.textContent).toContain("3");
+    expect(within(timeline).getByText("2.64 s")).toBeTruthy();
+    expect(within(timeline).getByText("1 issue")).toBeTruthy();
+    expect(within(timeline).getByText("0 ms")).toBeTruthy();
+
+    const spans = within(timeline).getByRole("list", { name: "Trace spans" });
+    expect(within(spans).getByText("ingest.batch")).toBeTruthy();
+    expect(within(spans).getByText("render.frame")).toBeTruthy();
+    expect(within(spans).getByText("send.email")).toBeTruthy();
+    expect(within(spans).getByText("Failed")).toBeTruthy();
+    expect(
+      within(spans).getByRole("img", {
+        name: "send.email in send, Failed, starts at 2.04 s, duration 600 ms"
+      })
+    ).toBeTruthy();
+  });
+
+  it("renders an empty state when no spans are available", () => {
+    render(<TraceTimeline spans={[]} />);
+
+    expect(screen.getByRole("status").textContent).toContain("No spans recorded");
+  });
+});