@echothink-ui/developer 0.1.0

package/src/components/JSONViewer.tsx

@@ -0,0 +1,189 @@
+import * as React from "react";
+import type { JSONViewerProps } from "./types";
+
+export function JSONViewer({
+  value,
+  defaultExpandedDepth = 2,
+  className,
+  ...props
+}: JSONViewerProps) {
+  const [view, setView] = React.useState<"tree" | "raw">("tree");
+  const treeTabRef = React.useRef<HTMLButtonElement>(null);
+  const rawTabRef = React.useRef<HTMLButtonElement>(null);
+  const treeTabId = React.useId();
+  const rawTabId = React.useId();
+  const treePanelId = React.useId();
+  const rawPanelId = React.useId();
+  const selectView = (nextView: "tree" | "raw", shouldFocus = false) => {
+    setView(nextView);
+
+    if (shouldFocus) {
+      window.requestAnimationFrame(() => {
+        (nextView === "tree" ? treeTabRef : rawTabRef).current?.focus();
+      });
+    }
+  };
+  const onTabKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
+    if (event.key === "ArrowLeft" || event.key === "Home") {
+      event.preventDefault();
+      selectView("tree", true);
+    } else if (event.key === "ArrowRight" || event.key === "End") {
+      event.preventDefault();
+      selectView("raw", true);
+    }
+  };
+
+  return (
+    <section
+      {...props}
+      className={`eth-dev-json-viewer ${className ?? ""}`}
+      data-eth-component="JSONViewer"
+    >
+      <header className="eth-dev-json-viewer__tabs" role="tablist" aria-label="JSON view mode">
+        <button
+          aria-controls={treePanelId}
+          aria-selected={view === "tree"}
+          className="eth-dev-json-viewer__tab"
+          id={treeTabId}
+          ref={treeTabRef}
+          role="tab"
+          tabIndex={view === "tree" ? 0 : -1}
+          type="button"
+          onClick={() => selectView("tree")}
+          onKeyDown={onTabKeyDown}
+        >
+          Tree
+        </button>
+        <button
+          aria-controls={rawPanelId}
+          aria-selected={view === "raw"}
+          className="eth-dev-json-viewer__tab"
+          id={rawTabId}
+          ref={rawTabRef}
+          role="tab"
+          tabIndex={view === "raw" ? 0 : -1}
+          type="button"
+          onClick={() => selectView("raw")}
+          onKeyDown={onTabKeyDown}
+        >
+          Raw
+        </button>
+      </header>
+      <div
+        aria-labelledby={treeTabId}
+        className="eth-dev-json-viewer__tree"
+        hidden={view !== "tree"}
+        id={treePanelId}
+        role="tabpanel"
+        tabIndex={0}
+      >
+        <div className="eth-dev-json-viewer__tree-body">
+          <JSONNode name="root" value={value} depth={0} expandedDepth={defaultExpandedDepth} />
+        </div>
+      </div>
+      <pre
+        aria-labelledby={rawTabId}
+        className="eth-dev-json-viewer__raw"
+        hidden={view !== "raw"}
+        id={rawPanelId}
+        role="tabpanel"
+        tabIndex={0}
+      >
+        <code>{formatRawValue(value)}</code>
+      </pre>
+    </section>
+  );
+}
+
+function JSONNode({
+  name,
+  value,
+  depth,
+  expandedDepth
+}: {
+  name: string;
+  value: unknown;
+  depth: number;
+  expandedDepth: number;
+}) {
+  if (value === null || typeof value !== "object") {
+    const type = leafType(value);
+
+    return (
+      <div className="eth-dev-json-viewer__leaf">
+        <span className="eth-dev-json-viewer__key">{name}</span>
+        <span className="eth-dev-json-viewer__punctuation">:</span>
+        <span className={`eth-dev-json-viewer__value eth-dev-json-viewer__value--${type}`}>
+          {formatLeafValue(value)}
+        </span>
+      </div>
+    );
+  }
+
+  const entries = Array.isArray(value)
+    ? value.map((item, index) => [String(index), item] as const)
+    : Object.entries(value as Record<string, unknown>);
+  const isArray = Array.isArray(value);
+  const collectionMeta = isArray ? `[${entries.length}]` : `{${entries.length}}`;
+
+  if (entries.length === 0) {
+    return (
+      <div className="eth-dev-json-viewer__leaf eth-dev-json-viewer__leaf--empty">
+        <span className="eth-dev-json-viewer__key">{name}</span>
+        <span className="eth-dev-json-viewer__node-meta">{isArray ? "[]" : "{}"}</span>
+      </div>
+    );
+  }
+
+  return (
+    <details open={depth < expandedDepth} className="eth-dev-json-viewer__branch">
+      <summary>
+        <span className="eth-dev-json-viewer__disclosure" aria-hidden="true" />
+        <span className="eth-dev-json-viewer__summary-label">{name}</span>
+        <span className="eth-dev-json-viewer__node-meta">{collectionMeta}</span>
+      </summary>
+      <div className="eth-dev-json-viewer__children">
+        {entries.map(([key, child]) => (
+          <JSONNode
+            key={key}
+            name={key}
+            value={child}
+            depth={depth + 1}
+            expandedDepth={expandedDepth}
+          />
+        ))}
+      </div>
+    </details>
+  );
+}
+
+function leafType(value: unknown) {
+  if (value === null) return "null";
+  return typeof value;
+}
+
+function formatRawValue(value: unknown) {
+  try {
+    const formatted = JSON.stringify(value, null, 2);
+
+    if (typeof formatted === "string") return formatted;
+  } catch {
+    // Fall back to the same scalar formatter used by the tree view.
+  }
+
+  return formatLeafValue(value);
+}
+
+function formatLeafValue(value: unknown) {
+  if (typeof value === "string") return JSON.stringify(value);
+  if (typeof value === "undefined") return "undefined";
+  if (typeof value === "symbol") return value.toString();
+  if (typeof value === "function") return "[Function]";
+  if (value === null) return "null";
+
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+}

package/src/components/LogConsole.tsx

@@ -0,0 +1,160 @@
+import * as React from "react";
+import { Pause, Play } from "@carbon/icons-react";
+import { Badge, Button } from "@echothink-ui/core";
+import type { LogConsoleProps, LogEntry } from "./types";
+
+type LogEntryTone = "debug" | "info" | "warn" | "error" | "stdout" | "stderr";
+
+const levelAliases: Record<string, LogEntryTone> = {
+  debug: "debug",
+  error: "error",
+  err: "error",
+  fatal: "error",
+  info: "info",
+  notice: "info",
+  stderr: "stderr",
+  stdout: "stdout",
+  trace: "debug",
+  warn: "warn",
+  warning: "warn"
+};
+
+function getEntryLevel(entry: LogEntry) {
+  return (entry.level ?? entry.stream ?? "info").toString();
+}
+
+function getEntryTone(entry: LogEntry) {
+  return levelAliases[getEntryLevel(entry).toLowerCase()] ?? "info";
+}
+
+function isWarning(entry: LogEntry) {
+  return getEntryTone(entry) === "warn";
+}
+
+function isError(entry: LogEntry) {
+  const tone = getEntryTone(entry);
+  return tone === "error" || tone === "stderr";
+}
+
+function formatLevel(entry: LogEntry) {
+  return getEntryLevel(entry).toUpperCase();
+}
+
+function formatMessage(entry: LogEntry) {
+  return entry.message ?? entry.text ?? "";
+}
+
+export function LogConsole({
+  entries,
+  onPause,
+  streaming = false,
+  filters,
+  className,
+  role = "region",
+  "aria-label": ariaLabel = "Streaming log console",
+  "aria-labelledby": ariaLabelledBy,
+  ...props
+}: LogConsoleProps) {
+  const warningCount = entries.filter(isWarning).length;
+  const errorCount = entries.filter(isError).length;
+  const latestEntry = entries[entries.length - 1];
+  const latestTimestamp = latestEntry?.timestamp ?? "No activity";
+  const hasToolbar = Boolean(filters || onPause);
+
+  return (
+    <section
+      {...props}
+      role={role}
+      aria-label={ariaLabelledBy ? undefined : ariaLabel}
+      aria-labelledby={ariaLabelledBy}
+      className={`eth-dev-log-console ${streaming ? "eth-dev-log-console--streaming" : "eth-dev-log-console--paused"} ${className ?? ""}`}
+      data-eth-component="LogConsole"
+    >
+      <header className="eth-dev-log-console__header">
+        <div className="eth-dev-log-console__heading">
+          <p className="eth-dev-log-console__eyebrow">Developer console</p>
+          <h3>Streaming logs</h3>
+          <p>
+            {entries.length} {entries.length === 1 ? "entry" : "entries"} buffered from the active
+            stream.
+          </p>
+        </div>
+        <div className="eth-dev-log-console__status" aria-live="polite">
+          <Badge severity={streaming ? "success" : "neutral"}>
+            {streaming ? "Streaming" : "Paused"}
+          </Badge>
+          <span>{errorCount ? `${errorCount} errors` : "No errors"}</span>
+        </div>
+      </header>
+      {hasToolbar ? (
+        <div className="eth-dev-log-console__toolbar" role="toolbar" aria-label="Log controls">
+          {filters ? <div className="eth-dev-log-console__filters">{filters}</div> : null}
+          {onPause ? (
+            <Button
+              intent={streaming ? "secondary" : "primary"}
+              density="compact"
+              icon={streaming ? <Pause size={16} /> : <Play size={16} />}
+              onClick={onPause}
+            >
+              {streaming ? "Pause stream" : "Resume stream"}
+            </Button>
+          ) : null}
+        </div>
+      ) : null}
+      <dl className="eth-dev-log-console__summary" aria-label="Log summary">
+        <div>
+          <dt>Entries</dt>
+          <dd>{entries.length}</dd>
+        </div>
+        <div>
+          <dt>Warnings</dt>
+          <dd>{warningCount}</dd>
+        </div>
+        <div>
+          <dt>Errors</dt>
+          <dd>{errorCount}</dd>
+        </div>
+        <div>
+          <dt>Latest</dt>
+          <dd>{latestTimestamp}</dd>
+        </div>
+      </dl>
+      <div className="eth-dev-log-console__viewport">
+        {entries.length ? (
+          <div
+            className="eth-dev-log-console__entries"
+            role="log"
+            aria-live={streaming ? "polite" : "off"}
+            aria-relevant="additions text"
+            aria-atomic="false"
+          >
+            {entries.map((entry) => {
+              const tone = getEntryTone(entry);
+
+              return (
+                <div
+                  key={entry.id}
+                  className={`eth-dev-log-console__entry eth-dev-log-console__entry--${tone}`}
+                >
+                  <time className="eth-dev-log-console__timestamp">
+                    {entry.timestamp ?? "--:--:--"}
+                  </time>
+                  <span className="eth-dev-log-console__level">{formatLevel(entry)}</span>
+                  <span className="eth-dev-log-console__source">
+                    {entry.source ?? entry.stream ?? "system"}
+                  </span>
+                  <code className="eth-dev-log-console__message">{formatMessage(entry)}</code>
+                </div>
+              );
+            })}
+          </div>
+        ) : (
+          <div className="eth-dev-log-console__empty" role="status">
+            <h4>No log entries</h4>
+            <p>Events will appear here when the stream receives output.</p>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}

package/src/components/PullRequestPanel.test.tsx

@@ -0,0 +1,52 @@
+import { fireEvent, render, screen, within } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { PullRequestPanel } from "./PullRequestPanel";
+
+describe("PullRequestPanel", () => {
+  it("renders pull request summary, file deltas, and review actions", () => {
+    const approve = vi.fn();
+    const comment = vi.fn();
+
+    render(
+      <PullRequestPanel
+        pr={{
+          id: "42",
+          title: "Add approval gate v2",
+          body: "Adds a richer approval gate with evidence and policy refs.",
+          state: "open",
+          author: "JD",
+          reviewers: ["MK", "AL"],
+          commits: 6,
+          files: [
+            { path: "src/api.ts", additions: 12, deletions: 3 },
+            { path: "src/ui.tsx", additions: 4, deletions: 8 }
+          ]
+        }}
+        onApprove={approve}
+        onComment={comment}
+      />
+    );
+
+    const panel = screen.getByRole("region", {
+      name: "Pull request Add approval gate v2"
+    });
+    expect(within(panel).getByText("Open")).toBeTruthy();
+    expect(within(panel).getByText("#42")).toBeTruthy();
+    expect(within(panel).getByText("MK, AL")).toBeTruthy();
+
+    const filesTable = within(panel).getByRole("table", { name: "Changed files" });
+    expect(within(filesTable).getByText("src/api.ts")).toBeTruthy();
+    expect(within(filesTable).getByText("+12")).toBeTruthy();
+    expect(within(filesTable).getByText("-3")).toBeTruthy();
+
+    fireEvent.click(within(panel).getByRole("button", { name: "Approve pull request" }));
+    expect(approve).toHaveBeenCalledTimes(1);
+
+    fireEvent.change(within(panel).getByRole("textbox", { name: "Review comment" }), {
+      target: { value: "Looks good." }
+    });
+    fireEvent.click(within(panel).getByRole("button", { name: "Submit review comment" }));
+
+    expect(comment).toHaveBeenCalledWith("Looks good.");
+  });
+});

package/src/components/PullRequestPanel.tsx

@@ -0,0 +1,215 @@
+import * as React from "react";
+import { Checkmark, PullRequest } from "@carbon/icons-react";
+import { Button, EmptyState, Textarea } from "@echothink-ui/core";
+import { DataTable, type DataColumn } from "@echothink-ui/data";
+import type { PullRequestPanelProps } from "./types";
+
+type FileRow = { path: string; additions: number; deletions: number } & Record<string, unknown>;
+
+function formatState(state: string) {
+  const normalized = state.trim();
+  if (!normalized) return "Unknown";
+  return normalized
+    .split(/[\s_-]+/)
+    .map((part) => `${part.charAt(0).toUpperCase()}${part.slice(1).toLowerCase()}`)
+    .join(" ");
+}
+
+function stateClassName(state: string) {
+  const normalized = state.trim().toLowerCase();
+  if (["open", "opened", "ready"].includes(normalized)) {
+    return "eth-dev-pull-request-panel__state--open";
+  }
+  if (["merged", "approved"].includes(normalized)) {
+    return "eth-dev-pull-request-panel__state--merged";
+  }
+  if (["closed", "rejected", "blocked"].includes(normalized)) {
+    return "eth-dev-pull-request-panel__state--closed";
+  }
+  if (["draft", "pending"].includes(normalized)) {
+    return "eth-dev-pull-request-panel__state--draft";
+  }
+  return "eth-dev-pull-request-panel__state--unknown";
+}
+
+export function PullRequestPanel({
+  pr,
+  onApprove,
+  onComment,
+  className,
+  ...props
+}: PullRequestPanelProps) {
+  const [comment, setComment] = React.useState("");
+  const titleId = React.useId().replace(/:/g, "");
+  const filesTitleId = React.useId().replace(/:/g, "");
+  const files = pr.files ?? [];
+  const reviewers = pr.reviewers?.length ? pr.reviewers.join(", ") : "No reviewers";
+  const additions = files.reduce((sum, file) => sum + file.additions, 0);
+  const deletions = files.reduce((sum, file) => sum + file.deletions, 0);
+  const formattedState = formatState(pr.state);
+  const ariaLabel =
+    props["aria-label"] ?? (props["aria-labelledby"] ? undefined : `Pull request ${pr.title}`);
+
+  const columns: DataColumn<FileRow>[] = [
+    {
+      key: "path",
+      header: "File",
+      render: (row) => (
+        <code className="eth-dev-pull-request-panel__file-path" title={row.path}>
+          {row.path}
+        </code>
+      )
+    },
+    {
+      key: "additions",
+      header: "Additions",
+      align: "end",
+      width: "7rem",
+      render: (row) => (
+        <span className="eth-dev-pull-request-panel__count eth-dev-pull-request-panel__count--added">
+          +{row.additions}
+        </span>
+      )
+    },
+    {
+      key: "deletions",
+      header: "Deletions",
+      align: "end",
+      width: "7rem",
+      render: (row) => (
+        <span className="eth-dev-pull-request-panel__count eth-dev-pull-request-panel__count--removed">
+          -{row.deletions}
+        </span>
+      )
+    }
+  ];
+  const submitComment = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const nextComment = comment.trim();
+    if (!nextComment) return;
+    onComment?.(nextComment);
+    setComment("");
+  };
+
+  return (
+    <section
+      {...props}
+      aria-label={ariaLabel}
+      className={`eth-dev-pull-request-panel ${className ?? ""}`}
+      data-eth-component="PullRequestPanel"
+      role="region"
+    >
+      <header className="eth-dev-pull-request-panel__header">
+        <div className="eth-dev-pull-request-panel__identity">
+          <span className="eth-dev-pull-request-panel__icon" aria-hidden="true">
+            <PullRequest size={20} />
+          </span>
+          <div className="eth-dev-pull-request-panel__heading">
+            <p>
+              Pull request <span>#{pr.id}</span>
+            </p>
+            <h3 id={titleId}>{pr.title}</h3>
+            <div className="eth-dev-pull-request-panel__meta">
+              <span
+                className={`eth-dev-pull-request-panel__state ${stateClassName(pr.state)}`}
+              >
+                {formattedState}
+              </span>
+              <span>by {pr.author}</span>
+            </div>
+          </div>
+        </div>
+        {onApprove ? (
+          <Button
+            aria-label="Approve pull request"
+            className="eth-dev-pull-request-panel__approve"
+            density="compact"
+            icon={<Checkmark size={16} />}
+            intent="success"
+            onClick={onApprove}
+          >
+            Approve
+          </Button>
+        ) : null}
+      </header>
+      <div className="eth-dev-pull-request-panel__body">
+        {pr.body ? <p className="eth-dev-pull-request-panel__description">{pr.body}</p> : null}
+        <dl className="eth-dev-pull-request-panel__metrics" aria-label="Pull request summary">
+          <div>
+            <dt>Reviewers</dt>
+            <dd title={reviewers}>{reviewers}</dd>
+          </div>
+          <div>
+            <dt>Commits</dt>
+            <dd>{pr.commits ?? 0}</dd>
+          </div>
+          <div>
+            <dt>Files changed</dt>
+            <dd>{files.length}</dd>
+          </div>
+          <div>
+            <dt>Line delta</dt>
+            <dd>
+              <span className="eth-dev-pull-request-panel__count eth-dev-pull-request-panel__count--added">
+                +{additions}
+              </span>
+              <span aria-hidden="true"> / </span>
+              <span className="eth-dev-pull-request-panel__count eth-dev-pull-request-panel__count--removed">
+                -{deletions}
+              </span>
+            </dd>
+          </div>
+        </dl>
+      </div>
+      <section className="eth-dev-pull-request-panel__files" aria-labelledby={filesTitleId}>
+        <div className="eth-dev-pull-request-panel__files-header">
+          <h4 id={filesTitleId}>Changed files</h4>
+          <span>{files.length} files</span>
+        </div>
+        {files.length ? (
+          <DataTable
+            aria-label="Changed files"
+            className="eth-dev-pull-request-panel__table"
+            columns={columns}
+            density="compact"
+            rowKey="path"
+            rows={files as FileRow[]}
+          />
+        ) : (
+          <EmptyState
+            title="No file changes"
+            description="Changed files will appear when this pull request has a diff."
+          />
+        )}
+      </section>
+      {onComment ? (
+        <form
+          aria-label="Review comment form"
+          className="eth-dev-pull-request-panel__comment"
+          onSubmit={submitComment}
+        >
+          <Textarea
+            helperText="Add a blocking question, approval note, or evidence reference."
+            labelText="Review comment"
+            onChange={(event) => setComment(event.currentTarget.value)}
+            placeholder="Reference tests, policy checks, or follow-up questions."
+            rows={4}
+            value={comment}
+          />
+          <div className="eth-dev-pull-request-panel__comment-footer">
+            <span>Comment will be attached to this pull request.</span>
+            <Button
+              aria-label="Submit review comment"
+              density="compact"
+              disabled={!comment.trim()}
+              intent="secondary"
+              type="submit"
+            >
+              Comment
+            </Button>
+          </div>
+        </form>
+      ) : null}
+    </section>
+  );
+}

package/src/components/RequestResponseViewer.test.tsx

@@ -0,0 +1,45 @@
+import { fireEvent, render, screen, within } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { RequestResponseViewer } from "./RequestResponseViewer";
+
+describe("RequestResponseViewer", () => {
+  it("renders HTTP metadata and accessible request/response tabs", () => {
+    render(
+      <RequestResponseViewer
+        request={{
+          method: "POST",
+          url: "/v1/tasks/q3/approve",
+          headers: { "content-type": "application/json", authorization: "Bearer ***" },
+          body: { reason: "approved by Jane" }
+        }}
+        response={{
+          status: 200,
+          headers: { "content-type": "application/json" },
+          body: { ok: true, taskId: "q3" },
+          durationMs: 184
+        }}
+      />
+    );
+
+    const region = screen.getByRole("region", {
+      name: "POST /v1/tasks/q3/approve 200"
+    });
+
+    expect(within(region).getByText("POST")).toBeTruthy();
+    expect(within(region).getByText("/v1/tasks/q3/approve")).toBeTruthy();
+    expect(within(region).getByText("200")).toBeTruthy();
+    expect(within(region).getByText("184 ms")).toBeTruthy();
+
+    const tabs = within(region).getAllByRole("tab");
+    expect(tabs).toHaveLength(4);
+    expect(
+      within(region).getByRole("tab", { name: "Request headers" }).getAttribute("aria-selected")
+    ).toBe("true");
+
+    fireEvent.click(within(region).getByRole("tab", { name: "Response body" }));
+
+    expect(within(region).getByRole("tabpanel", { name: "Response body" }).textContent).toContain(
+      '"taskId": "q3"'
+    );
+  });
+});