@stigmer/react 3.1.16 → 3.2.0

package/src/workflow/execution-inspector/InputOutputTab.tsx

@@ -1,325 +0,0 @@
-"use client";
-
-import { memo, useCallback, useMemo, useState } from "react";
-import { cn } from "@stigmer/theme";
-import type { JsonObject } from "@bufbuild/protobuf";
-import type { TaskDetailIO } from "./derive-task-detail.js";
-import { formatJson } from "../../execution/tool-rendering-primitives.js";
-import { StructuredDataViewer } from "./StructuredDataViewer.js";
-
-type ViewMode = "structured" | "json";
-
-const COPIED_FEEDBACK_MS = 2000;
-
-export interface InputOutputTabProps {
-  readonly data: TaskDetailIO | null;
-  readonly label: "Input" | "Output";
-  readonly className?: string;
-}
-
-/**
- * Renders task input or output data with a structured/JSON view toggle
- * and copy/download actions.
- *
- * Default view is the {@link StructuredDataViewer} which renders data
- * as human-readable key-value pairs following the `McpArgsView` pattern.
- * Users can toggle to a syntax-highlighted raw JSON view for debugging.
- *
- * Copy and Download buttons follow the {@link ArtifactPreviewModal}
- * interaction pattern: clipboard copy with brief feedback, and
- * browser-triggered file download.
- */
-export const InputOutputTab = memo(function InputOutputTab({
-  data,
-  label,
-  className,
-}: InputOutputTabProps) {
-  const [viewMode, setViewMode] = useState<ViewMode>("structured");
-  const [copied, setCopied] = useState(false);
-
-  const jsonContent = useMemo(
-    () => (data ? formatJson(data.data) : ""),
-    [data],
-  );
-
-  const handleCopy = useCallback(() => {
-    if (!jsonContent) return;
-    copyToClipboard(jsonContent).then(() => {
-      setCopied(true);
-      setTimeout(() => setCopied(false), COPIED_FEEDBACK_MS);
-    });
-  }, [jsonContent]);
-
-  const handleDownload = useCallback(() => {
-    if (!jsonContent) return;
-    downloadFile(jsonContent, `${label.toLowerCase()}.json`, "application/json");
-  }, [jsonContent, label]);
-
-  if (!data) {
-    return (
-      <div className={cn("flex flex-col items-center justify-center px-4 py-8 text-center", className)}>
-        <EmptyDataIcon />
-        <p className="mt-2 text-xs text-muted-foreground">
-          {label} data not available for this execution
-        </p>
-        {label === "Input" && (
-          <p className="mt-1 text-[10px] text-muted-foreground">
-            The workflow runner may not have recorded task inputs for this run.
-          </p>
-        )}
-      </div>
-    );
-  }
-
-  return (
-    <div className={cn("flex flex-col gap-2", className)}>
-      {/* Toolbar: view toggle + actions */}
-      <div className="flex items-center justify-between">
-        <div
-          className="inline-flex rounded-md bg-muted p-0.5"
-          role="tablist"
-          aria-label={`${label} view mode`}
-        >
-          <ViewToggleButton
-            active={viewMode === "structured"}
-            onClick={() => setViewMode("structured")}
-            label="Structured"
-          />
-          <ViewToggleButton
-            active={viewMode === "json"}
-            onClick={() => setViewMode("json")}
-            label="JSON"
-          />
-        </div>
-
-        <div className="flex items-center gap-1">
-          <button
-            type="button"
-            onClick={handleCopy}
-            aria-label={copied ? "Copied to clipboard" : `Copy ${label.toLowerCase()} as JSON`}
-            className={cn(
-              "inline-flex items-center justify-center rounded-sm p-1.5 transition-colors",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-              copied
-                ? "text-success"
-                : "text-muted-foreground hover:text-foreground hover:bg-muted",
-            )}
-          >
-            {copied ? <CheckIcon /> : <CopyIcon />}
-          </button>
-          <button
-            type="button"
-            onClick={handleDownload}
-            aria-label={`Download ${label.toLowerCase()} as JSON file`}
-            className={cn(
-              "inline-flex items-center justify-center rounded-sm p-1.5 transition-colors",
-              "text-muted-foreground hover:text-foreground hover:bg-muted",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-            )}
-          >
-            <DownloadIcon />
-          </button>
-        </div>
-      </div>
-
-      {/* Banners */}
-      {data.source === "event-summary" && (
-        <p className="text-[10px] text-muted-foreground">
-          Showing truncated summary from the event log. Full data will be available when the runner is updated.
-        </p>
-      )}
-      {data.artifactIds.length > 0 && (
-        <p className="text-[10px] text-muted-foreground">
-          {data.artifactIds.length} artifact{data.artifactIds.length > 1 ? "s" : ""} associated
-        </p>
-      )}
-
-      {/* Content */}
-      {viewMode === "structured" ? (
-        <StructuredDataViewer data={data.data as JsonObject} />
-      ) : (
-        <pre className="max-h-96 overflow-auto whitespace-pre-wrap break-words rounded-md border border-border bg-muted-subtle p-2.5 font-mono text-xs leading-relaxed text-foreground">
-          <code>{highlightJson(jsonContent)}</code>
-        </pre>
-      )}
-
-      {/* Screen reader clipboard feedback */}
-      <div role="status" aria-live="polite" aria-atomic="true" className="sr-only">
-        {copied && "Content copied to clipboard"}
-      </div>
-    </div>
-  );
-});
-
-// ---------------------------------------------------------------------------
-// View toggle button (follows ArtifactContentRenderer.TabButton pattern)
-// ---------------------------------------------------------------------------
-
-function ViewToggleButton({
-  active,
-  onClick,
-  label,
-}: {
-  readonly active: boolean;
-  readonly onClick: () => void;
-  readonly label: string;
-}) {
-  return (
-    <button
-      type="button"
-      role="tab"
-      aria-selected={active}
-      onClick={onClick}
-      className={cn(
-        "rounded-sm px-2.5 py-1 text-xs font-medium transition-colors",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-        active
-          ? "bg-background text-foreground shadow-sm"
-          : "text-muted-foreground hover:text-foreground",
-      )}
-    >
-      {label}
-    </button>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// JSON syntax highlighting (follows ArtifactContentRenderer.highlightJson)
-// ---------------------------------------------------------------------------
-
-function highlightJson(content: string): React.ReactNode {
-  return content.split("\n").map((line, i) => {
-    const keyMatch = line.match(/^(\s*)"([^"]+)"(\s*:)(.*)/);
-    if (keyMatch) {
-      const [, indent, key, colon, rest] = keyMatch;
-      return (
-        <span key={i}>
-          {i > 0 && "\n"}
-          {indent}
-          <span className="text-primary">&quot;{key}&quot;</span>
-          <span className="text-muted-foreground">{colon}</span>
-          {highlightJsonValue(rest)}
-        </span>
-      );
-    }
-    return (
-      <span key={i}>
-        {i > 0 && "\n"}
-        {line}
-      </span>
-    );
-  });
-}
-
-function highlightJsonValue(value: string): React.ReactNode {
-  const trimmed = value.trim().replace(/,\s*$/, "");
-  const trailingComma = value.trim().endsWith(",") ? "," : "";
-
-  if (/^".*"$/.test(trimmed)) {
-    return (
-      <>
-        {" "}
-        <span className="text-success">{trimmed}</span>
-        {trailingComma}
-      </>
-    );
-  }
-
-  if (/^(true|false|null)$/.test(trimmed)) {
-    return (
-      <>
-        {" "}
-        <span className="font-medium">{trimmed}</span>
-        {trailingComma}
-      </>
-    );
-  }
-
-  if (/^-?\d/.test(trimmed)) {
-    return (
-      <>
-        {" "}
-        <span className="text-warning">{trimmed}</span>
-        {trailingComma}
-      </>
-    );
-  }
-
-  return <>{value}</>;
-}
-
-// ---------------------------------------------------------------------------
-// Clipboard + download utilities (follows useExportResource / ArtifactPreviewModal)
-// ---------------------------------------------------------------------------
-
-async function copyToClipboard(text: string): Promise<void> {
-  try {
-    await navigator.clipboard.writeText(text);
-  } catch {
-    const textarea = document.createElement("textarea");
-    textarea.value = text;
-    textarea.style.position = "fixed";
-    textarea.style.opacity = "0";
-    document.body.appendChild(textarea);
-    textarea.select();
-    document.execCommand("copy");
-    document.body.removeChild(textarea);
-  }
-}
-
-function downloadFile(
-  content: string,
-  filename: string,
-  mimeType: string,
-): void {
-  const blob = new Blob([content], { type: `${mimeType};charset=utf-8;` });
-  const url = URL.createObjectURL(blob);
-  const link = document.createElement("a");
-  link.href = url;
-  link.download = filename;
-  link.style.display = "none";
-  document.body.appendChild(link);
-  link.click();
-  document.body.removeChild(link);
-  URL.revokeObjectURL(url);
-}
-
-// ---------------------------------------------------------------------------
-// Inline SVG icons (SDK pattern: no external icon dependency)
-// ---------------------------------------------------------------------------
-
-function EmptyDataIcon() {
-  return (
-    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" className="text-muted-foreground" aria-hidden="true">
-      <rect x="3" y="3" width="18" height="18" rx="2" />
-      <path d="M9 9h6M9 13h4" />
-    </svg>
-  );
-}
-
-function CopyIcon() {
-  return (
-    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" className="shrink-0" aria-hidden="true">
-      <rect x="4" y="4" width="6.5" height="6.5" rx="1" />
-      <path d="M8 4V2.5C8 1.95 7.55 1.5 7 1.5H2.5C1.95 1.5 1.5 1.95 1.5 2.5V7C1.5 7.55 1.95 8 2.5 8H4" />
-    </svg>
-  );
-}
-
-function DownloadIcon() {
-  return (
-    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="shrink-0" aria-hidden="true">
-      <path d="M6 1.5V8.5" />
-      <path d="M3 6L6 9L9 6" />
-      <path d="M2 10.5H10" />
-    </svg>
-  );
-}
-
-function CheckIcon() {
-  return (
-    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="shrink-0" aria-hidden="true">
-      <path d="M2 6.5L4.5 9L10 3" />
-    </svg>
-  );
-}

package/src/workflow/execution-inspector/RetriesTab.tsx

@@ -1,68 +0,0 @@
-"use client";
-
-import { memo } from "react";
-import { cn } from "@stigmer/theme";
-import type { TaskDetailRetryHistory } from "./derive-task-detail.js";
-import { formatDuration, formatTimestamp } from "../format-utils.js";
-
-export interface RetriesTabProps {
-  readonly retries: TaskDetailRetryHistory;
-  readonly className?: string;
-}
-
-export const RetriesTab = memo(function RetriesTab({ retries, className }: RetriesTabProps) {
-  return (
-    <div className={cn("flex flex-col gap-2", className)}>
-      <p className="text-xs text-muted-foreground">
-        {retries.attempts.length} attempt{retries.attempts.length !== 1 ? "s" : ""}
-        {retries.currentAttempt > 1 && <> · currently on attempt {retries.currentAttempt}</>}
-      </p>
-
-      <div className="flex flex-col gap-1">
-        {retries.attempts.map((attempt) => (
-          <div
-            key={attempt.attemptNumber}
-            className={cn(
-              "flex flex-col gap-0.5 rounded-md border px-2.5 py-2 text-xs",
-              attempt.status === "failed"
-                ? "border-destructive/20 bg-destructive/5"
-                : "border-border bg-muted/30",
-            )}
-          >
-            <div className="flex items-center gap-2">
-              <span className={cn(
-                "flex size-3.5 items-center justify-center rounded-full text-[8px]",
-                attempt.status === "failed" ? "bg-destructive text-destructive-foreground" : "bg-success text-success-foreground",
-              )}>
-                {attempt.status === "failed" ? "✕" : "✓"}
-              </span>
-              <span className="font-medium text-foreground">
-                Attempt {attempt.attemptNumber}
-              </span>
-              {attempt.durationMs > 0 && (
-                <span className="tabular-nums text-muted-foreground">{formatDuration(attempt.durationMs)}</span>
-              )}
-              {attempt.startedAt && (
-                <span className="ml-auto text-[10px] tabular-nums text-muted-foreground">
-                  {formatTimestamp(attempt.startedAt)}
-                </span>
-              )}
-            </div>
-
-            {attempt.error && (
-              <p className="mt-0.5 whitespace-pre-wrap break-words text-[11px] text-destructive/80">
-                {attempt.error}
-              </p>
-            )}
-
-            {attempt.delayBeforeMs > 0 && (
-              <p className="text-[10px] text-muted-foreground">
-                Backoff: {formatDuration(attempt.delayBeforeMs)}
-              </p>
-            )}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-});

package/src/workflow/execution-inspector/SummaryTab.tsx

@@ -1,62 +0,0 @@
-"use client";
-
-import { memo } from "react";
-import { cn } from "@stigmer/theme";
-import type { TaskDetailSummary } from "./derive-task-detail.js";
-import { formatDuration, formatMicroUsd, formatTokenCount, formatTimestamp } from "../format-utils.js";
-
-export interface SummaryTabProps {
-  readonly summary: TaskDetailSummary;
-  readonly className?: string;
-}
-
-export const SummaryTab = memo(function SummaryTab({ summary, className }: SummaryTabProps) {
-  const BZ = BigInt(0);
-  return (
-    <dl className={cn("grid grid-cols-[auto_1fr] gap-x-3 gap-y-2 text-xs", className)}>
-      {summary.startedAt && (
-        <>
-          <dt className="text-muted-foreground">Started</dt>
-          <dd className="text-foreground">{formatTimestamp(summary.startedAt)}</dd>
-        </>
-      )}
-      {summary.completedAt && (
-        <>
-          <dt className="text-muted-foreground">Completed</dt>
-          <dd className="text-foreground">{formatTimestamp(summary.completedAt)}</dd>
-        </>
-      )}
-      {summary.durationMs > 0 && (
-        <>
-          <dt className="text-muted-foreground">Duration</dt>
-          <dd className="tabular-nums text-foreground">{formatDuration(summary.durationMs)}</dd>
-        </>
-      )}
-      {summary.costMicros > BZ && (
-        <>
-          <dt className="text-muted-foreground">Cost</dt>
-          <dd className="tabular-nums text-foreground">{formatMicroUsd(summary.costMicros)}</dd>
-        </>
-      )}
-      {summary.totalTokens > BZ && (
-        <>
-          <dt className="text-muted-foreground">Tokens</dt>
-          <dd className="tabular-nums text-foreground">
-            {formatTokenCount(summary.totalTokens)}
-            {summary.inputTokens > BZ && summary.outputTokens > BZ && (
-              <span className="ml-1 text-muted-foreground">
-                ({formatTokenCount(summary.inputTokens)} in / {formatTokenCount(summary.outputTokens)} out)
-              </span>
-            )}
-          </dd>
-        </>
-      )}
-      {summary.attemptNumber > 1 && (
-        <>
-          <dt className="text-muted-foreground">Attempt</dt>
-          <dd className="text-foreground">{summary.attemptNumber}</dd>
-        </>
-      )}
-    </dl>
-  );
-});