-
-
-
-
setGithubToken(e.target.value)}
- placeholder="ghp_xxxxxxxxxxxxxxxxxxxx"
- className="pr-9"
- />
+ {/* GitHub App section */}
+ {ghAppConfigured && (
+
+
+
+ {ghInstallations.length > 0 ? (
+
+ {ghInstallations.map((inst) => (
+
+
+ {inst.github_account_type === "Organization" ? (
+
+ ) : (
+
+ )}
+
+ {inst.github_account_login}
+
+
+ {inst.github_account_type}
+
+
+
+
+ ))}
+
+ ) : (
+
+ No accounts connected yet. Click "Connect Account" to install the Cohesion GitHub App.
+
+ )}
+
+ {/* Divider before PAT */}
-
- Create a{" "}
-
- Personal Access Token
-
- {" "}with repo scope to scan private repositories.
-
-
+ )}
-
-
Status:
- {githubToken ? (
+ {/* PAT section — shown always if App not configured, collapsible if it is */}
+ {(!ghAppConfigured || showPat) && (
+
+
+
+
+ setGithubToken(e.target.value)}
+ placeholder="ghp_xxxxxxxxxxxxxxxxxxxx"
+ className="pr-9"
+ />
+
+
+
+ Create a{" "}
+
+ Personal Access Token
+
+ {" "}with repo scope to scan private repositories.
+
+
+
+
+ Status:
+ {githubToken ? (
+
+
+ Configured
+
+ ) : (
+ Not configured
+ )}
+
+
+ )}
+
+ {/* Status when App configured and accounts connected and PAT collapsed */}
+ {ghAppConfigured && !showPat && ghInstallations.length > 0 && (
+
+ Status:
- Configured
+ {ghInstallations.length} account{ghInstallations.length !== 1 ? "s" : ""} connected
- ) : (
- Not configured
- )}
-
+
+ )}
)}
diff --git a/cohesion_frontend/src/components/live/live-handshake-view.tsx b/cohesion_frontend/src/components/live/live-handshake-view.tsx
new file mode 100644
index 0000000..ccbdc90
--- /dev/null
+++ b/cohesion_frontend/src/components/live/live-handshake-view.tsx
@@ -0,0 +1,383 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import { motion } from "framer-motion";
+import { Loader2, Zap, Workflow } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { HandshakeView } from "@/components/visualization/handshake-view";
+import { Badge } from "@/components/ui/badge";
+import { api } from "@/lib/api";
+import { SchemaIR, DiffResult, LiveDiffResponse } from "@/lib/types";
+
+interface LiveHandshakeViewProps {
+ projectId: string;
+ frontendSource: string;
+ backendSource: string;
+ requestCountA: number;
+ requestCountB: number;
+}
+
+interface EndpointEntry {
+ endpoint: string;
+ method: string;
+ feSchema: SchemaIR | null;
+ beSchema: SchemaIR | null;
+ diff: DiffResult | null;
+}
+
+export function LiveHandshakeView({
+ projectId,
+ frontendSource,
+ backendSource,
+ requestCountA,
+ requestCountB,
+}: LiveHandshakeViewProps) {
+ const [feSchemas, setFeSchemas] = useState
([]);
+ const [beSchemas, setBeSchemas] = useState([]);
+ const [diffResponse, setDiffResponse] = useState(
+ null
+ );
+ const [isComputing, setIsComputing] = useState(false);
+ const [error, setError] = useState(null);
+ const [selectedEndpoint, setSelectedEndpoint] = useState(0);
+ const [hasComputed, setHasComputed] = useState(false);
+
+ const canCompute = requestCountA > 0 && requestCountB > 0;
+
+ const computeHandshake = async () => {
+ setIsComputing(true);
+ setError(null);
+ try {
+ const [feSch, beSch, diffRes] = await Promise.all([
+ api.live.liveSchemas(projectId, frontendSource),
+ api.live.liveSchemas(projectId, backendSource),
+ api.live.liveDiff(projectId, backendSource, frontendSource),
+ ]);
+ setFeSchemas(feSch);
+ setBeSchemas(beSch);
+ setDiffResponse(diffRes);
+ setSelectedEndpoint(0);
+ setHasComputed(true);
+ } catch (e) {
+ setError((e as Error).message);
+ } finally {
+ setIsComputing(false);
+ }
+ };
+
+ const endpoints: EndpointEntry[] = useMemo(() => {
+ if (!hasComputed) return [];
+
+ const map = new Map();
+ const key = (endpoint: string, method: string) =>
+ `${method}:${endpoint}`;
+
+ for (const s of feSchemas) {
+ const k = key(s.endpoint, s.method);
+ if (!map.has(k)) {
+ map.set(k, {
+ endpoint: s.endpoint,
+ method: s.method,
+ feSchema: s,
+ beSchema: null,
+ diff: null,
+ });
+ } else {
+ map.get(k)!.feSchema = s;
+ }
+ }
+
+ for (const s of beSchemas) {
+ const k = key(s.endpoint, s.method);
+ if (!map.has(k)) {
+ map.set(k, {
+ endpoint: s.endpoint,
+ method: s.method,
+ feSchema: null,
+ beSchema: s,
+ diff: null,
+ });
+ } else {
+ map.get(k)!.beSchema = s;
+ }
+ }
+
+ if (diffResponse) {
+ for (const d of diffResponse.results) {
+ const k = key(d.endpoint, d.method);
+ if (map.has(k)) {
+ map.get(k)!.diff = d;
+ }
+ }
+ }
+
+ return Array.from(map.values()).sort((a, b) =>
+ `${a.method}:${a.endpoint}`.localeCompare(
+ `${b.method}:${b.endpoint}`
+ )
+ );
+ }, [feSchemas, beSchemas, diffResponse, hasComputed]);
+
+ const currentEntry = endpoints[selectedEndpoint] ?? null;
+
+ const getResponseSchema = (schema: SchemaIR | null) => {
+ if (!schema?.response) return null;
+ const codes = Object.keys(schema.response).map(Number).sort();
+ const successCode = codes.find((c) => c >= 200 && c < 300) ?? codes[0];
+ return successCode != null ? schema.response[successCode] : null;
+ };
+
+ return (
+
+ {/* Header bar */}
+
+
+
+ Frontend
+
+
+ {frontendSource}
+
+
+ ({requestCountA})
+
+
+
+
+
+ Backend
+
+
+ {backendSource}
+
+
+ ({requestCountB})
+
+
+
+
+ {error && (
+
+ {error}
+
+ )}
+
+
+
+
+ {/* Content */}
+ {!hasComputed && !isComputing ? (
+
+
+
+
+ Visualize the API handshake between sources
+
+
+ {canCompute
+ ? "Click Compute Handshake to see how frontend and backend schemas align"
+ : "Capture traffic from both sources first"}
+
+
+ Assign which source represents your frontend and
+ backend using the dropdowns above
+
+
+
+ ) : isComputing ? (
+
+
+
+
+ Inferring schemas and building handshake
+ visualization...
+
+
+
+ ) : (
+
+ {/* Endpoint list */}
+
+
+
+ Endpoints ({endpoints.length})
+
+
+
+ {endpoints.map((entry, i) => {
+ const status = entry.diff?.status;
+ const statusColor =
+ status === "match"
+ ? "text-green-500"
+ : status === "partial"
+ ? "text-amber-400"
+ : status === "violation"
+ ? "text-red-400"
+ : "text-white/20";
+ const statusSymbol =
+ status === "match"
+ ? "\u2713"
+ : status === "partial"
+ ? "\u25CB"
+ : status === "violation"
+ ? "\u2715"
+ : "\u2022";
+
+ const hasFe = !!entry.feSchema;
+ const hasBe = !!entry.beSchema;
+
+ return (
+
+ setSelectedEndpoint(i)
+ }
+ className={`px-3 py-2 border-b border-white/5 cursor-pointer hover:bg-white/5 transition-colors ${
+ selectedEndpoint === i
+ ? "bg-white/10"
+ : ""
+ }`}
+ >
+
+
+ {statusSymbol}
+
+
+ {entry.method}
+
+
+ {entry.endpoint}
+
+
+
+ {!hasFe && (
+
+ no frontend
+
+ )}
+ {!hasBe && (
+
+ no backend
+
+ )}
+ {entry.diff &&
+ (entry.diff.mismatches
+ ?.length ?? 0) > 0 && (
+
+ {
+ entry.diff
+ .mismatches
+ .length
+ }{" "}
+ mismatch
+ {entry.diff.mismatches
+ .length !== 1
+ ? "es"
+ : ""}
+
+ )}
+
+
+ );
+ })}
+ {endpoints.length === 0 && (
+
+
+ No endpoints inferred yet
+
+
+ )}
+
+
+
+ {/* Handshake visualization */}
+
+ {currentEntry ? (
+
+
+
+ {currentEntry.method}
+
+
+ {currentEntry.endpoint}
+
+ {currentEntry.diff && (
+
+ {currentEntry.diff.status}
+
+ )}
+
+
+
+ ) : (
+
+
+ Select an endpoint to view the handshake
+
+
+ )}
+
+
+ )}
+
{mismatches.map((mismatch, index) => (
-
+
))}
) : diff.status === "match" ? (
diff --git a/cohesion_frontend/src/components/visualization/handshake-view.tsx b/cohesion_frontend/src/components/visualization/handshake-view.tsx
index ebd8199..b3ef7c5 100644
--- a/cohesion_frontend/src/components/visualization/handshake-view.tsx
+++ b/cohesion_frontend/src/components/visualization/handshake-view.tsx
@@ -12,13 +12,14 @@ import {
} from "@xyflow/react";
import { ObjectSchema, Mismatch } from "@/lib/types";
-type FieldStatus = "match" | "mismatch" | "warning" | "missing";
+type FieldStatus = "match" | "mismatch" | "warning" | "missing" | "info";
const STATUS_COLORS: Record = {
match: "var(--success)",
mismatch: "var(--error)",
warning: "var(--warning)",
missing: "var(--error)",
+ info: "oklch(0.65 0.15 250)",
};
const EDGE_STYLES: Record = {
@@ -26,6 +27,7 @@ const EDGE_STYLES: Record
mismatch: { stroke: "oklch(0.65 0.24 25 / 70%)", strokeWidth: 2.5 },
warning: { stroke: "oklch(0.78 0.16 75 / 70%)", strokeWidth: 2.5 },
missing: { stroke: "oklch(0.65 0.24 25 / 70%)", strokeWidth: 2.5 },
+ info: { stroke: "oklch(0.65 0.15 250 / 45%)", strokeWidth: 1.8 },
};
function getFieldStatus(
@@ -37,9 +39,12 @@ function getFieldStatus(
if (!feNames.has(fieldName) || !beNames.has(fieldName)) return "missing";
const hits = mismatches.filter((m) => m.path.includes(fieldName));
if (hits.length === 0) return "match";
- if (hits.some((m) => m.type === "type_mismatch" || m.type === "missing"))
+ if (hits.some((m) => (m.type === "type_mismatch" || m.type === "missing") && m.severity === "critical"))
return "mismatch";
- if (hits.some((m) => m.type === "optionality_mismatch")) return "warning";
+ if (hits.some((m) => m.type === "optionality_mismatch" || m.severity === "warning"))
+ return "warning";
+ if (hits.some((m) => m.severity === "info"))
+ return "info";
return "mismatch";
}
diff --git a/cohesion_frontend/src/components/visualization/schema-tree.tsx b/cohesion_frontend/src/components/visualization/schema-tree.tsx
index 083359e..9f07c5b 100644
--- a/cohesion_frontend/src/components/visualization/schema-tree.tsx
+++ b/cohesion_frontend/src/components/visualization/schema-tree.tsx
@@ -143,7 +143,8 @@ export function SchemaTree({ schema, source, mismatches: _mismatches, title = "S
.attr("r", 3)
.attr("fill", (d) => {
if (d.data.mismatch) {
- const type = d.data.mismatch.type;
+ const { type, severity } = d.data.mismatch;
+ if (severity === "info") return "#60a5fa";
if (type === "missing" || type === "type_mismatch") return "#f87171";
if (type === "optionality_mismatch") return "#fbbf24";
}
diff --git a/cohesion_frontend/src/lib/api.ts b/cohesion_frontend/src/lib/api.ts
index 4387668..c3e8981 100644
--- a/cohesion_frontend/src/lib/api.ts
+++ b/cohesion_frontend/src/lib/api.ts
@@ -115,7 +115,7 @@ export const api = {
diff: {
compute: (endpointId: string) =>
- fetchAPI(`/api/diff/${endpointId}`),
+ fetchAPI(`/api/diff/${endpointId}`, { method: "POST" }),
},
stats: {
@@ -133,6 +133,29 @@ export const api = {
}),
},
+ github: {
+ status: () =>
+ fetchAPI<{ configured: boolean; install_url?: string }>("/api/github/status"),
+ saveInstallation: (installationId: number) =>
+ fetchAPI<{ message: string; installation_id: number; github_account_login: string; github_account_type: string }>(
+ "/api/github/installations",
+ {
+ method: "POST",
+ body: JSON.stringify({ installation_id: installationId }),
+ },
+ ),
+ listInstallations: () =>
+ fetchAPI>("/api/github/installations"),
+ removeInstallation: (installationId: number) =>
+ fetchAPI(`/api/github/installations/${installationId}`, { method: "DELETE" }),
+ },
+
live: {
ingest: (projectId: string, requests: LiveCapturedRequest[]) =>
fetchAPI<{ message: string; count: string }>("/api/live/ingest", {
@@ -174,6 +197,8 @@ export const api = {
method: "POST",
body: JSON.stringify({ project_id: projectId, source_a: sourceA, source_b: sourceB }),
}),
+ liveSchemas: (projectId: string, source: string) =>
+ fetchAPI(`/api/live/schemas?project_id=${projectId}&source=${encodeURIComponent(source)}`),
configureProxy: (projectId: string, label: string, targetUrl: string) =>
fetchAPI<{ message: string; proxy_url: string }>("/api/live/proxy/configure", {
method: "POST",