@gmickel/gno 1.19.0 → 1.20.0

package/src/serve/public/components/AskVerificationPanel.tsx

@@ -0,0 +1,189 @@
+import { AlertTriangle, CheckCircle2, CircleHelp, ShieldX } from "lucide-react";
+
+import type { AskResult } from "../../../pipeline/types";
+
+import { cn } from "../lib/utils";
+import { Badge } from "./ui/badge";
+
+export type AskVerification = NonNullable<AskResult["verification"]>;
+
+interface AskVerificationPanelProps {
+  navigate: (to: string) => void;
+  verification: AskVerification;
+}
+
+const STATUS_PRESENTATION = {
+  supported: {
+    label: "supported",
+    icon: CheckCircle2,
+    className: "border-emerald-500/30 bg-emerald-500/10 text-emerald-300",
+  },
+  contradicted: {
+    label: "contradicted",
+    icon: ShieldX,
+    className: "border-destructive/40 bg-destructive/10 text-destructive",
+  },
+  insufficient: {
+    label: "insufficient",
+    icon: AlertTriangle,
+    className: "border-amber-500/30 bg-amber-500/10 text-amber-300",
+  },
+  uncertain: {
+    label: "uncertain",
+    icon: CircleHelp,
+    className: "border-sky-500/30 bg-sky-500/10 text-sky-300",
+  },
+} as const;
+
+const evidenceLabel = (uri: string, startLine: number, endLine: number) =>
+  `${uri}:L${startLine}${startLine === endLine ? "" : `-L${endLine}`}`;
+
+export function AskVerificationPanel({
+  navigate,
+  verification,
+}: AskVerificationPanelProps) {
+  const { claims, capsule, semantic } = verification;
+  const degradedCapabilities = Object.entries(
+    capsule.retrieval.capabilityStates
+  ).filter(([, state]) => state.requested && state.outcome !== "used");
+  const gaps = capsule.coverage.gaps;
+
+  return (
+    <details className="group rounded-lg border border-border/50 bg-card/55">
+      <summary className="flex cursor-pointer list-none items-center justify-between gap-3 px-4 py-3">
+        <div className="min-w-0">
+          <div className="flex flex-wrap items-center gap-2">
+            <span className="font-medium text-sm">
+              {claims.answerStatus === "verified"
+                ? "All claims verified"
+                : "Answer withheld"}
+            </span>
+            <Badge
+              className="font-mono text-[9px]"
+              variant={
+                claims.answerStatus === "verified" ? "default" : "outline"
+              }
+            >
+              {claims.coverage.supportedClaims}/{claims.coverage.totalClaims}{" "}
+              supported
+            </Badge>
+          </div>
+          <p className="mt-1 text-muted-foreground text-xs">
+            {claims.abstentionReason ??
+              `${claims.coverage.supportedRatio * 100}% support coverage`}
+          </p>
+        </div>
+        <span className="shrink-0 font-mono text-[10px] text-muted-foreground group-open:hidden">
+          details
+        </span>
+      </summary>
+
+      <div className="space-y-4 border-border/40 border-t px-4 py-4">
+        <div className="flex flex-wrap gap-2">
+          <Badge className="font-mono text-[9px]" variant="outline">
+            semantic: {semantic.status}/{semantic.reason}
+          </Badge>
+          {degradedCapabilities.map(([name, state]) => (
+            <Badge
+              className="font-mono text-[9px]"
+              key={name}
+              variant="outline"
+            >
+              {name}: {state.outcome}
+              {state.fallbackReasons.length > 0
+                ? ` (${state.fallbackReasons.join(", ")})`
+                : ""}
+            </Badge>
+          ))}
+        </div>
+
+        <div className="grid grid-cols-2 gap-2 font-mono text-[10px] text-muted-foreground sm:grid-cols-4">
+          <span>{claims.coverage.supportedClaims} supported</span>
+          <span>{claims.coverage.contradictedClaims} contradicted</span>
+          <span>{claims.coverage.insufficientClaims} insufficient</span>
+          <span>{claims.coverage.uncertainClaims} uncertain</span>
+        </div>
+
+        <div className="space-y-2">
+          {claims.claims.map((claim) => {
+            const presentation = STATUS_PRESENTATION[claim.status];
+            const StatusIcon = presentation.icon;
+            return (
+              <details
+                className="rounded-md border border-border/35 bg-background/20"
+                key={claim.claimId}
+              >
+                <summary className="flex cursor-pointer list-none items-start gap-2 px-3 py-2">
+                  <StatusIcon className="mt-0.5 size-3.5 shrink-0" />
+                  <span className="min-w-0 flex-1 text-xs">{claim.text}</span>
+                  <Badge
+                    className={cn(
+                      "shrink-0 font-mono text-[9px]",
+                      presentation.className
+                    )}
+                    variant="outline"
+                  >
+                    {presentation.label}
+                  </Badge>
+                </summary>
+                <div className="space-y-2 border-border/30 border-t px-3 py-2">
+                  {claim.evidence.length > 0 ? (
+                    claim.evidence.map((evidence) => (
+                      <button
+                        className="block w-full truncate text-left font-mono text-[10px] text-primary hover:underline"
+                        key={evidence.evidenceId}
+                        onClick={() =>
+                          navigate(
+                            `/doc?uri=${encodeURIComponent(evidence.uri)}`
+                          )
+                        }
+                        title={evidenceLabel(
+                          evidence.uri,
+                          evidence.startLine,
+                          evidence.endLine
+                        )}
+                        type="button"
+                      >
+                        {evidenceLabel(
+                          evidence.uri,
+                          evidence.startLine,
+                          evidence.endLine
+                        )}
+                      </button>
+                    ))
+                  ) : (
+                    <p className="text-muted-foreground text-xs">
+                      No retained evidence span.
+                    </p>
+                  )}
+                  <p className="font-mono text-[10px] text-muted-foreground">
+                    {claim.rationaleCode}
+                    {claim.confidence === null
+                      ? ""
+                      : ` · confidence ${claim.confidence.toFixed(2)}`}
+                  </p>
+                </div>
+              </details>
+            );
+          })}
+        </div>
+
+        {(capsule.coverage.unresolvedFacets.length > 0 || gaps.length > 0) && (
+          <div className="rounded-md border border-amber-500/25 bg-amber-500/5 px-3 py-2">
+            <p className="font-medium text-amber-200 text-xs">Evidence gaps</p>
+            <ul className="mt-1 space-y-1 font-mono text-[10px] text-muted-foreground">
+              {capsule.coverage.unresolvedFacets.map((facet) => (
+                <li key={`facet:${facet}`}>unresolved facet: {facet}</li>
+              ))}
+              {gaps.map((gap) => (
+                <li key={`${gap.facet}:${gap.code}`}>
+                  {gap.facet}: {gap.code}
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+      </div>
+    </details>
+  );
+}