@darkrishabh/bench-ai 1.0.0

package/src/components/MarkdownOutput.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+interface MarkdownOutputProps {
+  content: string;
+}
+
+export function MarkdownOutput({ content }: MarkdownOutputProps) {
+  return (
+    <div className="md">
+      <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
+    </div>
+  );
+}

package/src/components/ModelResponseCard.tsx

@@ -0,0 +1,313 @@
+"use client";
+
+import { useState } from "react";
+import { formatCost } from "@darkrishabh/bench-ai";
+import type { WebProviderResult } from "../types";
+import { MarkdownOutput } from "./MarkdownOutput";
+import { formatProviderDisplayName, providerUi } from "../lib/provider-ui";
+
+type BadgeVariant = "good" | "warn" | "muted";
+
+function StarButton({
+  n,
+  active,
+  onClick,
+}: {
+  n: number;
+  active: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-label={`${n} star${n > 1 ? "s" : ""}`}
+      style={{
+        border: "none",
+        background: "transparent",
+        cursor: "pointer",
+        padding: "0.12rem",
+        lineHeight: 0,
+        color: active ? "var(--amber)" : "var(--text-3)",
+        fontFamily: "inherit",
+      }}
+    >
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden>
+        <path
+          d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
+          fill={active ? "currentColor" : "none"}
+          stroke="currentColor"
+          strokeWidth="1.35"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </button>
+  );
+}
+
+function badgeColors(variant: BadgeVariant) {
+  switch (variant) {
+    case "good":
+      return {
+        bg: "var(--green-subtle)",
+        color: "var(--green)",
+        border: "rgba(4, 120, 87, 0.22)",
+      };
+    case "warn":
+      return {
+        bg: "var(--red-subtle)",
+        color: "var(--red)",
+        border: "rgba(185, 28, 28, 0.2)",
+      };
+    default:
+      return {
+        bg: "var(--surface-muted)",
+        color: "var(--text-2)",
+        border: "var(--border)",
+      };
+  }
+}
+
+export function ModelResponseCard({
+  r,
+  badge,
+  latencyTone,
+  rating,
+  onRate,
+}: {
+  r: WebProviderResult;
+  badge: { label: string; variant: BadgeVariant } | null;
+  latencyTone: "fast" | "slow" | "neutral";
+  rating: number;
+  onRate: (stars: number) => void;
+}) {
+  const color = providerUi(r.provider).color;
+  const hasError = Boolean(r.error);
+  const [copied, setCopied] = useState(false);
+  const providerUpper = formatProviderDisplayName(r.provider);
+
+  const latencyColor =
+    hasError || latencyTone === "neutral"
+      ? "var(--text-1)"
+      : latencyTone === "fast"
+        ? "var(--green)"
+        : "var(--red)";
+
+  const costColor =
+    hasError ? "var(--text-1)" : r.costUsd === 0 ? "var(--green)" : "var(--amber)";
+
+  const copyOutput = async () => {
+    if (hasError || !r.output) return;
+    try {
+      await navigator.clipboard.writeText(r.output);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      /* ignore */
+    }
+  };
+
+  const badgeStyle = badge && !hasError ? badgeColors(badge.variant) : null;
+
+  return (
+    <div
+      style={{
+        background: "var(--surface)",
+        border: "1px solid var(--border)",
+        borderRadius: "var(--r-xl)",
+        overflow: "hidden",
+        boxShadow: "var(--shadow-sm)",
+        display: "flex",
+        flexDirection: "column",
+        minWidth: 0,
+      }}
+    >
+      <div
+        style={{
+          padding: "0.85rem 1.05rem",
+          borderBottom: "1px solid var(--border)",
+          background: "var(--surface)",
+          display: "flex",
+          alignItems: "flex-start",
+          gap: "0.65rem",
+          borderLeft: `3px solid ${hasError ? "var(--red)" : color}`,
+        }}
+      >
+        <div
+          style={{
+            width: 8,
+            height: 8,
+            borderRadius: "50%",
+            background: hasError ? "var(--red)" : color,
+            flexShrink: 0,
+            marginTop: "0.35rem",
+            opacity: hasError ? 1 : 0.9,
+          }}
+        />
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <div
+            style={{
+              fontSize: "0.68rem",
+              fontWeight: 700,
+              color: "var(--text-3)",
+              letterSpacing: "0.06em",
+            }}
+          >
+            {providerUpper}
+          </div>
+          <div
+            style={{
+              fontSize: "0.9rem",
+              color: "var(--text-1)",
+              fontWeight: 700,
+              marginTop: 3,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+              fontFamily: "var(--font-mono)",
+            }}
+          >
+            {r.model}
+          </div>
+        </div>
+        <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: "0.35rem", flexShrink: 0 }}>
+          {badgeStyle && badge && (
+              <span
+                style={{
+                  fontSize: "0.62rem",
+                  fontWeight: 700,
+                  textTransform: "uppercase",
+                  letterSpacing: "0.04em",
+                  padding: "0.22rem 0.5rem",
+                  borderRadius: 999,
+                  background: badgeStyle.bg,
+                  color: badgeStyle.color,
+                  border: `1px solid ${badgeStyle.border}`,
+                  whiteSpace: "nowrap",
+                }}
+              >
+                {badge.label}
+              </span>
+          )}
+          {hasError && (
+            <span
+              style={{
+                fontSize: "0.62rem",
+                color: "var(--red)",
+                background: "var(--red-subtle)",
+                border: "1px solid rgba(185, 28, 28, 0.2)",
+                borderRadius: 999,
+                padding: "0.22rem 0.5rem",
+                fontWeight: 700,
+              }}
+            >
+              Failed
+            </span>
+          )}
+        </div>
+      </div>
+
+      {!hasError && (
+        <div
+          style={{
+            display: "grid",
+            gridTemplateColumns: "repeat(3, 1fr)",
+            gap: 0,
+            borderBottom: "1px solid var(--border)",
+            background: "var(--surface-subtle)",
+          }}
+        >
+          <div style={{ padding: "0.55rem 0.65rem", borderRight: "1px solid var(--border)" }}>
+            <div style={{ fontSize: "0.62rem", fontWeight: 600, color: "var(--text-3)", textTransform: "uppercase", letterSpacing: "0.04em" }}>
+              Latency
+            </div>
+            <div style={{ fontSize: "0.82rem", fontWeight: 700, color: latencyColor, marginTop: 2, fontVariantNumeric: "tabular-nums" }}>
+              {r.latencyMs.toLocaleString()}ms
+            </div>
+          </div>
+          <div style={{ padding: "0.55rem 0.65rem", borderRight: "1px solid var(--border)" }}>
+            <div style={{ fontSize: "0.62rem", fontWeight: 600, color: "var(--text-3)", textTransform: "uppercase", letterSpacing: "0.04em" }}>
+              Tokens in → out
+            </div>
+            <div style={{ fontSize: "0.82rem", fontWeight: 600, color: "var(--text-1)", marginTop: 2, fontFamily: "var(--font-mono)", fontVariantNumeric: "tabular-nums" }}>
+              {r.inputTokens} → {r.outputTokens}
+            </div>
+          </div>
+          <div style={{ padding: "0.55rem 0.65rem" }}>
+            <div style={{ fontSize: "0.62rem", fontWeight: 600, color: "var(--text-3)", textTransform: "uppercase", letterSpacing: "0.04em" }}>
+              Cost
+            </div>
+            <div style={{ fontSize: "0.82rem", fontWeight: 700, color: costColor, marginTop: 2, fontVariantNumeric: "tabular-nums" }}>
+              {r.costUsd === 0 ? "$0.00" : formatCost(r.costUsd)}
+            </div>
+          </div>
+        </div>
+      )}
+
+      <div
+        style={{
+          padding: "1rem 1.1rem",
+          overflowY: "auto",
+          maxHeight: 480,
+          flex: 1,
+          background: "var(--surface)",
+        }}
+      >
+        {hasError ? (
+          <div
+            style={{
+              color: "var(--red)",
+              background: "var(--red-subtle)",
+              border: "1px solid rgba(185, 28, 28, 0.18)",
+              borderRadius: "var(--r-md)",
+              padding: "0.85rem 1rem",
+              fontSize: "0.875rem",
+              lineHeight: 1.6,
+            }}
+          >
+            {r.error}
+          </div>
+        ) : (
+          <MarkdownOutput content={r.output} />
+        )}
+      </div>
+
+      {!hasError && (
+        <div
+          style={{
+            borderTop: "1px solid var(--border)",
+            padding: "0.55rem 1rem",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: "0.75rem",
+            background: "var(--surface-subtle)",
+          }}
+        >
+          <div style={{ display: "flex", alignItems: "center", gap: "0.05rem" }} role="group" aria-label="Rate this response">
+            {[1, 2, 3, 4, 5].map((n) => (
+              <StarButton key={n} n={n} active={n <= rating} onClick={() => onRate(n === rating ? 0 : n)} />
+            ))}
+          </div>
+          <button
+            type="button"
+            onClick={copyOutput}
+            style={{
+              border: "1px solid var(--border)",
+              background: "var(--surface)",
+              borderRadius: "var(--r-md)",
+              padding: "0.35rem 0.75rem",
+              fontSize: "0.78rem",
+              fontWeight: 600,
+              color: "var(--text-2)",
+              cursor: "pointer",
+              fontFamily: "inherit",
+            }}
+          >
+            {copied ? "Copied" : "Copy"}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/QuickComparisonBar.tsx

@@ -0,0 +1,184 @@
+"use client";
+
+import type { ReactNode } from "react";
+import type { WebProviderResult } from "../types";
+import { formatCost } from "@darkrishabh/bench-ai";
+
+function MiniChart({
+  label,
+  labelIcon,
+  results,
+  getValue,
+  format,
+  lowerIsBetter,
+  barColor,
+}: {
+  label: string;
+  labelIcon?: ReactNode;
+  results: WebProviderResult[];
+  getValue: (r: WebProviderResult) => number;
+  format: (v: number) => string;
+  lowerIsBetter?: boolean;
+  barColor: string;
+}) {
+  const values = results.map(getValue);
+  const max = Math.max(...values, 1e-9);
+  const min = Math.min(...values);
+  const span = Math.max(max - min, 1e-9);
+
+  return (
+    <div style={{ flex: "1 1 140px", minWidth: 120 }}>
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: "0.35rem",
+          marginBottom: "0.4rem",
+        }}
+      >
+        {labelIcon}
+        <div
+          style={{
+            fontSize: "0.65rem",
+            fontWeight: 600,
+            color: "var(--text-3)",
+            textTransform: "uppercase",
+            letterSpacing: "0.05em",
+          }}
+        >
+          {label}
+        </div>
+      </div>
+      <div style={{ display: "flex", alignItems: "flex-end", gap: "0.35rem", height: 52 }}>
+        {results.map((r) => {
+          const v = getValue(r);
+          const t = lowerIsBetter ? (max - v) / span : (v - min) / span;
+          const h = 8 + Math.round(t * 44);
+          return (
+            <div
+              key={r.instanceId}
+              title={`${r.label}: ${format(v)}`}
+              style={{
+                flex: 1,
+                minWidth: 6,
+                maxWidth: 28,
+                height: h,
+                borderRadius: 4,
+                background: r.error ? "var(--border-strong)" : barColor,
+                opacity: r.error ? 0.35 : 0.92,
+                transition: "height 0.25s ease",
+              }}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export function QuickComparisonBar({
+  results,
+  onFullCompare,
+}: {
+  results: WebProviderResult[];
+  onFullCompare: () => void;
+}) {
+  if (results.length === 0) return null;
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        bottom: 0,
+        left: 0,
+        right: 0,
+        zIndex: 40,
+        background: "var(--surface)",
+        borderTop: "1px solid var(--border)",
+        boxShadow: "0 -6px 24px rgba(15, 23, 42, 0.05)",
+      }}
+    >
+      <div
+        style={{
+          maxWidth: 1120,
+          margin: "0 auto",
+          padding: "0.65rem 1.5rem 0.75rem",
+          display: "flex",
+          alignItems: "stretch",
+          gap: "1rem",
+          flexWrap: "wrap",
+        }}
+      >
+        <div
+          style={{
+            fontSize: "0.72rem",
+            fontWeight: 700,
+            color: "var(--text-2)",
+            textTransform: "uppercase",
+            letterSpacing: "0.06em",
+            paddingTop: "0.35rem",
+            flexShrink: 0,
+          }}
+        >
+          Quick comparison
+        </div>
+        <div style={{ display: "flex", flex: 1, gap: "1.25rem", flexWrap: "wrap", minWidth: 0 }}>
+          <MiniChart
+            label="Latency (ms)"
+            labelIcon={
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--chart-latency)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+                <path d="M12 5v14M19 12l-7 7-7-7" />
+              </svg>
+            }
+            results={results}
+            getValue={(r) => (r.error ? 0 : r.latencyMs)}
+            format={(v) => `${Math.round(v)}ms`}
+            lowerIsBetter
+            barColor="var(--chart-latency)"
+          />
+          <MiniChart
+            label="Output tokens"
+            results={results}
+            getValue={(r) => (r.error ? 0 : r.outputTokens)}
+            format={(v) => `${Math.round(v)}`}
+            barColor="var(--chart-tokens)"
+          />
+          <MiniChart
+            label="Cost"
+            results={results}
+            getValue={(r) => (r.error ? 0 : r.costUsd)}
+            format={(v) => (v === 0 ? "$0" : formatCost(v))}
+            lowerIsBetter
+            barColor="var(--chart-cost)"
+          />
+        </div>
+        <button
+          type="button"
+          onClick={onFullCompare}
+          style={{
+            alignSelf: "center",
+            display: "inline-flex",
+            alignItems: "center",
+            gap: "0.35rem",
+            padding: "0.5rem 1rem",
+            borderRadius: "var(--r-md)",
+            border: "1px solid var(--border)",
+            background: "var(--surface)",
+            color: "var(--text-1)",
+            fontSize: "0.8125rem",
+            fontWeight: 600,
+            cursor: "pointer",
+            fontFamily: "inherit",
+            boxShadow: "var(--shadow-xs)",
+            flexShrink: 0,
+          }}
+        >
+          Full compare
+          <span style={{ fontSize: "0.95rem", lineHeight: 1, color: "var(--text-2)" }} aria-hidden>
+            ↗
+          </span>
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/components/ResponsesLineDiff.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+import { useMemo } from "react";
+import type { WebProviderResult } from "../types";
+import { diffLines } from "../lib/simple-line-diff";
+import { providerUi } from "../lib/provider-ui";
+
+export function ResponsesLineDiff({
+  results,
+  leftId,
+  rightId,
+  onLeftId,
+  onRightId,
+}: {
+  results: WebProviderResult[];
+  leftId: string;
+  rightId: string;
+  onLeftId: (id: string) => void;
+  onRightId: (id: string) => void;
+}) {
+  const ok = results.filter((r) => !r.error && r.output.trim().length > 0);
+  const left = results.find((r) => r.instanceId === leftId) ?? ok[0];
+  const right = results.find((r) => r.instanceId === rightId) ?? ok[1] ?? ok[0];
+
+  const lines = useMemo(() => {
+    if (!left || !right || left.instanceId === right.instanceId) return [];
+    return diffLines(left.output, right.output);
+  }, [left, right]);
+
+  const selectStyle = {
+    flex: 1,
+    minWidth: 0,
+    padding: "0.45rem 0.6rem",
+    borderRadius: "var(--r-md)",
+    border: "1px solid var(--border)",
+    background: "var(--surface)",
+    color: "var(--text-1)",
+    fontSize: "0.8rem",
+    fontFamily: "var(--font-mono)",
+  } as const;
+
+  if (ok.length < 2) {
+    return (
+      <div style={{ padding: "2rem", textAlign: "center", color: "var(--text-3)", fontSize: "0.875rem" }}>
+        Need at least two successful responses to diff.
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+      <div style={{ display: "flex", flexWrap: "wrap", gap: "0.65rem", alignItems: "center" }}>
+        <label style={{ display: "flex", flexDirection: "column", gap: "0.25rem", flex: "1 1 200px" }}>
+          <span style={{ fontSize: "0.65rem", fontWeight: 600, color: "var(--text-3)", textTransform: "uppercase", letterSpacing: "0.05em" }}>
+            Baseline
+          </span>
+          <select value={left?.instanceId ?? ""} onChange={(e) => onLeftId(e.target.value)} style={selectStyle}>
+            {results.map((r) => (
+              <option
+                key={r.instanceId}
+                value={r.instanceId}
+                disabled={Boolean(r.error) || !r.output.trim()}
+              >
+                {r.label}
+                {r.error ? " (error)" : ""}
+              </option>
+            ))}
+          </select>
+        </label>
+        <label style={{ display: "flex", flexDirection: "column", gap: "0.25rem", flex: "1 1 200px" }}>
+          <span style={{ fontSize: "0.65rem", fontWeight: 600, color: "var(--text-3)", textTransform: "uppercase", letterSpacing: "0.05em" }}>
+            Compare
+          </span>
+          <select value={right?.instanceId ?? ""} onChange={(e) => onRightId(e.target.value)} style={selectStyle}>
+            {results.map((r) => (
+              <option
+                key={r.instanceId}
+                value={r.instanceId}
+                disabled={Boolean(r.error) || !r.output.trim()}
+              >
+                {r.label}
+                {r.error ? " (error)" : ""}
+              </option>
+            ))}
+          </select>
+        </label>
+      </div>
+
+      <div
+        style={{
+          fontSize: "0.72rem",
+          color: "var(--text-3)",
+          display: "flex",
+          gap: "1rem",
+          flexWrap: "wrap",
+        }}
+      >
+        <span>
+          <span style={{ color: providerUi(left!.provider).color, fontWeight: 600 }}>{left!.label}</span>
+          <span style={{ margin: "0 0.35rem" }}>vs</span>
+          <span style={{ color: providerUi(right!.provider).color, fontWeight: 600 }}>{right!.label}</span>
+        </span>
+      </div>
+
+      <div
+        style={{
+          border: "1px solid var(--border)",
+          borderRadius: "var(--r-lg)",
+          background: "var(--surface-muted)",
+          maxHeight: 560,
+          overflow: "auto",
+          fontFamily: "var(--font-mono)",
+          fontSize: "0.78rem",
+          lineHeight: 1.55,
+        }}
+      >
+        {lines.map((line, i) => {
+          const bg =
+            line.type === "add"
+              ? "rgba(4, 120, 87, 0.12)"
+              : line.type === "remove"
+                ? "rgba(185, 28, 28, 0.1)"
+                : "transparent";
+          const prefix = line.type === "add" ? "+ " : line.type === "remove" ? "− " : "  ";
+          const color =
+            line.type === "add" ? "var(--green)" : line.type === "remove" ? "var(--red)" : "var(--text-2)";
+          return (
+            <div
+              key={i}
+              style={{
+                padding: "0.08rem 0.65rem",
+                background: bg,
+                color,
+                whiteSpace: "pre-wrap",
+                wordBreak: "break-word",
+              }}
+            >
+              {prefix}
+              {line.text}
+            </div>
+          );
+        })}
+      </div>
+      <p style={{ fontSize: "0.75rem", color: "var(--text-3)", margin: 0 }}>
+        Line-level diff (LCS). Green lines appear only in the compare model; red only in the baseline.
+      </p>
+    </div>
+  );
+}