diff --git a/CHANGELOG.md b/CHANGELOG.md index 91dbe2d0..fff35850 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,13 +7,48 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +- **Feature: Ontology Hub — Visual Ontology Editor, Drafts, Versions & Change Proposals** (closes #519, part of #517, by @KaifAhmad1): + - **Visual Ontology Editor tab (`OntologyEditor`)** — @xyflow/react canvas for visual ontology authoring without hand-writing OWL or Turtle. Classes render as nodes, properties as edges. Toolbar provides Add Class, Add Property, Add Individual, Add Restriction, Add Axiom, Auto Layout, and Propose actions. Context menus on nodes (rename, add superclass/subclass, add restriction, mark deprecated, add SKOS metadata, delete with impact count) and edges (change domain/range, toggle functional/symmetric/transitive/reflexive/inverse-functional, add inverse property, delete). Detail panel edits metadata for classes, properties, individuals, and SKOS concepts. All edits are debounced and staged as pending diffs via `PATCH /api/ontology/draft`; nothing commits to the live ontology until proposal publish. + - **Versions tab (`VersionsTab`)** — version timeline showing version ID, state (draft/published), author, date, and diff summary. Proposal list with state indicators (draft/proposed/approved/published/rejected). Propose modal with summary input, auto-computed impact analysis using `VersionManager.diff_ontologies()` and `OntologyEngine.validate()`, and SHACL pre-validation using `OntologyEngine.validate_graph()`. Compare action for versions with side-by-side diff modal using `VersionManager.compare_versions()` and `VersionManager.diff_ontologies()`. Approve, Request Changes, Reject, and Publish actions. Publishing calls `VersionManager.create_version()` and promotes the draft diff to the live ontology graph. + - **Proposal Review (`ProposalReview`)** — diff viewer showing added, removed, and modified elements with change icons. Impact analysis display from `VersionManager.diff_ontologies()`. SHACL validation results from `OntologyEngine.validate_graph()`. Inline comments per changed element via `POST /api/ontology/proposals/{id}/comment`. Review actions: Approve, Reject, Publish (approved proposals only). + - **Backend (`semantica/explorer/routes/ontology.py`)** — 10 new FastAPI endpoints under `/api/ontology`: + - `PATCH /draft` — stage editor diffs as a draft in `app.state.ontology_drafts` with `ChangeLogEntry` audit trail. + - `GET /drafts/{ontology_uri:path}` — list staged drafts for an ontology. + - `GET /draft/{draft_id}` — get a specific draft by ID. + - `POST /propose` — submit change proposal with impact analysis using `VersionManager.diff_ontologies()`, validation using `OntologyEngine.validate()`, and SHACL pre-validation using `OntologyEngine.validate_graph()`. + - `GET /proposals` — list proposals with optional `ontology_uri` and `state` filters. + - `GET /proposals/{proposal_id}` — get proposal detail. + - `POST /proposals/{proposal_id}/approve` — approve a proposal. + - `POST /proposals/{proposal_id}/reject` — reject a proposal (can return to draft). + - `POST /proposals/{proposal_id}/publish` — publish an approved proposal using `VersionManager.create_version()`. + - `POST /proposals/{proposal_id}/comment` — add inline comment to a proposal. + - `GET /versions/{ontology_uri:path}` — list version history for an ontology. + - `POST /versions/{ontology_uri:path}/compare` — compare two ontology versions using `VersionManager.compare_versions()` and `VersionManager.diff_ontologies()`. + - `POST /alignments` — create alignment using `OntologyEngine.create_alignment()`. + - `GET /alignments/{entity_uri:path}` — get alignments for an entity using `OntologyEngine.get_alignments()`. + - `GET /alignments` — list all alignments using `OntologyEngine.list_alignments()`. + - **Enhanced existing endpoints** with proper Semantica module integration: + - `POST /load` — now uses `OntologyIngestor.ingest_ontology()` for proper RDF parsing and conversion to Semantica's internal ontology format, with fallback to basic parsing. Supports multiple formats (Turtle, RDF/XML, JSON-LD, N3, NT) with automatic format detection and conversion to graph nodes/edges. + - `POST /create` — now uses `OntologyEngine.from_data()` for sample data mode and `OntologyEngine.from_text()` for text mode with provider/model support. Converts OntologyEngine result to graph nodes/edges including classes, properties with domain/range edges, and subclass relationships. + - `GET /skos/schemes` — now uses `OntologyEngine.list_vocabularies()` with fallback to session-based implementation. + - `GET /skos/concept/{uri:path}` — now uses `OntologyEngine.list_concepts()` with fallback to session-based implementation. + - `POST /skos/search` — new endpoint using `OntologyEngine.search_concepts()` with fallback to session-based search. + - **Change Management module integration**: + - `VersionManager.diff_ontologies()` — structured diff computation for proposals and version comparison. + - `VersionManager.compare_versions()` — metadata comparison for version comparison. + - `VersionManager.create_version()` — version record creation with proper config and graph store. + - `ChangeLogEntry` — audit trail metadata for draft creation with timestamp, author, and description validation. + - **Server registration** — ontology router registered in `semantica/server.py` imports and router mounting. + - **Schemas added** — `DraftDiff`, `DraftRequest`, `DraftResponse`, `ProposalRequest`, `ProposalResponse`, `CommentRequest`, `VersionEntry`, `VersionCompareRequest`, `VersionCompareResponse`, `AlignmentRequest`, `AlignmentResponse`, `SKOSConceptSearchRequest`. + - **OntologyWorkspace index.tsx** — updated to use `OntologyEditor` and `VersionsTab` components instead of stubs for Editor and Versions tabs. + - **Fix: Ontology Hub post-review bug fixes and security hardening** (follow-up to #518, closes security advisory #23, by @KaifAhmad1): - **Broken registry filters** — `fetchRegistry` was sending toolbar filter values (`owl`, `skos`, `internal`, `external`) to the backend as the `status` query param, which only accepts `published|draft|external`, causing those filters to return empty lists. Removed the spurious `status` param; all format/kind filtering is now applied client-side via `filteredEntries`, which already had the correct logic. - **Toggle/refresh URI corruption** — `toggle_ontology` and `refresh_ontology` applied `.removesuffix("/toggle")` / `.removesuffix("/refresh")` to the captured path parameter, which would silently corrupt any ontology URI that legitimately ends with those strings. Starlette's route regex (`/{uri:path}/toggle`) already strips the literal suffix via backtracking, so the `removesuffix` calls were removed and the raw `ontology_uri` parameter is used directly. - **SSRF in URL fetch** — `_fetch_url_sync()` accepted arbitrary user-supplied URLs and called `requests.get()` with no validation, enabling server-side request forgery against internal services. Added `_validate_fetch_url()` which rejects non-`http`/`https` schemes and resolves the hostname via `socket.getaddrinfo`, blocking loopback, private, link-local, reserved, and multicast addresses. Applied to all three fetch sites: preview, load, and refresh. - **File upload format misdetected** — the file picker accepted `.xml` and `.json` but `fmtMap` had no entries for those extensions, causing them to default to `turtle`. Added `xml: "xml"` and `json: "json-ld"` mappings. Changed the unknown-extension fallback from `|| "turtle"` to `?? ""` (empty string), and omit the `format` key from the request body when empty so the backend `_detect_format()` runs instead of receiving a forced incorrect value. Also added `.n3` to the accepted extension list and dropzone hint. - - **Inconsistent XML hardening** — `_parse_rdf_sync()` called `rdflib.Graph().parse()` directly, bypassing the `defusedxml`-based XXE protection already present in `semantica/explorer/utils/rdf_parser.py`. Now routes through `_safe_parse_rdf()` from that module, applying consistent protection for all RDF/XML parse paths. - - **Search scans whole graph** (`GET /api/ontology/search`) — the endpoint fetched up to 999 999 nodes and performed a linear Python substring scan on every request. Replaced with `session.search(q, limit * 6)` which uses the `GraphSearchIndex`; results are then post-filtered by `_SEARCHABLE_TYPES` and `entity_type` before being returned up to the requested limit. + - **Inconsistent XML hardening** — `_parse_rdf_sync()` called `rdflib.Graph().parse()` directly, bypassing the `defusedxml`-based XXE protection already present in `semantica/explorer/utils/rdf_parser.py`. Now routes through `_safe_parse_rdf()` from that module, applying consistent defusedxml-based XXE protection for all RDF/XML parse paths. + - **Search scans whole graph** (`GET /api/ontology/search`) — the endpoint fetched up to 999 999 nodes and performed a linear Python substring scan on every request. Replaced with `session.search(q, limit * 6)` which uses the existing `GraphSearchIndex` for efficient indexed search; results are then post-filtered by `_SEARCHABLE_TYPES` and `entity_type` before being returned up to the requested limit. - **ReDoS in format detector** (security advisory #23, CodeQL `py/polynomial-redos`, CWE-1333/730/400) — `_detect_format()` used `re.match(r"_:\w+|<[^>]+>\s+<[^>]+>", ...)` to detect N-Triples content. The `<[^>]+>\s+<[^>]+>` alternative was flagged as a polynomial regular expression on uncontrolled data. The URI-subject branch was already unreachable (strings starting with `<` return `"xml"` two lines above), so the entire regex was replaced with two O(1) string operations: `stripped.startswith("_:")` and `" <" in stripped`. `import re` removed as now unused. - **Feature: Ontology Hub — Registry, Loader, Entity Search & SKOS Vocabulary Manager** (closes #518, part of #517, by @KaifAhmad1): diff --git a/explorer/src/workspaces/OntologyWorkspace/OntologyEditor.tsx b/explorer/src/workspaces/OntologyWorkspace/OntologyEditor.tsx new file mode 100644 index 00000000..69643dd0 --- /dev/null +++ b/explorer/src/workspaces/OntologyWorkspace/OntologyEditor.tsx @@ -0,0 +1,438 @@ +import { useCallback, useEffect, useState, useMemo } from "react"; +import { + ReactFlow, + Background, + Controls, + MiniMap, + addEdge, + useNodesState, + useEdgesState, + Connection, + Edge, + Node, + MarkerType, +} from "@xyflow/react"; +import "@xyflow/react/dist/style.css"; +import { + Plus, + Box, + GitBranch, + User, + Shield, + FileText, + Download, + Layout, + Send, + MoreVertical, + Pencil, + Trash2, + Link, + ArrowRight, + ArrowLeft, + GitMerge, +} from "lucide-react"; + +const nodeTypes = { + classNode: ({ data }: { data: any }) => ( +
+
{data.label}
+
{data.type}
+
+ ), +}; + +const classNodeStyle: React.CSSProperties = { + padding: "12px 16px", + borderRadius: "8px", + background: "linear-gradient(135deg, rgba(74, 163, 255, 0.15), rgba(74, 163, 255, 0.05))", + border: "1px solid rgba(127, 208, 255, 0.3)", + color: "#ebf3ff", + fontSize: "13px", + fontWeight: "600", + minWidth: "140px", + textAlign: "center", + boxShadow: "0 4px 12px rgba(0, 0, 0, 0.2)", +}; + +const classNodeHeader: React.CSSProperties = { + fontSize: "14px", + fontWeight: "700", + marginBottom: "4px", +}; + +const classNodeSub: React.CSSProperties = { + fontSize: "11px", + color: "#8fa8c6", + fontWeight: "500", +}; + +interface DraftDiff { + added_classes: string[]; + removed_classes: string[]; + modified_classes: Record>; + added_properties: string[]; + removed_properties: string[]; + modified_properties: Record>; + added_restrictions: Record[]; + removed_restrictions: Record[]; + added_axioms: Record[]; + removed_axioms: Record[]; + annotation_changes: Record>; +} + +export function OntologyEditor() { + const [nodes, setNodes, onNodesChange] = useNodesState([]); + const [edges, setEdges, onEdgesChange] = useEdgesState([]); + const [selectedElement, setSelectedElement] = useState(null); + const [ontologyUri, setOntologyUri] = useState(""); + const [draftDiff, setDraftDiff] = useState({ + added_classes: [], + removed_classes: [], + modified_classes: {}, + added_properties: [], + removed_properties: [], + modified_properties: {}, + added_restrictions: [], + removed_restrictions: [], + added_axioms: [], + removed_axioms: [], + annotation_changes: {}, + }); + const [isSaving, setIsSaving] = useState(false); + const [showContext, setShowContext] = useState<{ x: number; y: number; type: string; element: any } | null>(null); + + const onConnect = useCallback( + (params: Connection) => setEdges((eds) => addEdge({ ...params, markerEnd: { type: MarkerType.ArrowClosed } }, eds)), + [setEdges] + ); + + const addClass = useCallback(() => { + const newId = `class_${Date.now()}`; + const newNode: Node = { + id: newId, + type: "classNode", + position: { x: Math.random() * 400, y: Math.random() * 300 }, + data: { label: "NewClass", type: "owl:Class" }, + }; + setNodes((nds) => [...nds, newNode]); + setDraftDiff((prev) => ({ + ...prev, + added_classes: [...prev.added_classes, newId], + })); + }, [setNodes]); + + const addProperty = useCallback(() => { + const newId = `prop_${Date.now()}`; + const newEdge: Edge = { + id: newId, + source: nodes[0]?.id || "", + target: nodes[1]?.id || nodes[0]?.id || "", + label: "hasProperty", + type: "smoothstep", + animated: true, + }; + setEdges((eds) => [...eds, newEdge]); + setDraftDiff((prev) => ({ + ...prev, + added_properties: [...prev.added_properties, newId], + })); + }, [nodes, setEdges]); + + const addIndividual = useCallback(() => { + const newId = `ind_${Date.now()}`; + const newNode: Node = { + id: newId, + type: "classNode", + position: { x: Math.random() * 400, y: Math.random() * 300 }, + data: { label: "NewIndividual", type: "owl:NamedIndividual" }, + }; + setNodes((nds) => [...nds, newNode]); + }, [setNodes]); + + const addRestriction = useCallback(() => { + setDraftDiff((prev) => ({ + ...prev, + added_restrictions: [...prev.added_restrictions, { type: "someValuesFrom", value: "" }], + })); + }, []); + + const addAxiom = useCallback(() => { + setDraftDiff((prev) => ({ + ...prev, + added_axioms: [...prev.added_axioms, { type: "subClassOf", value: "" }], + })); + }, []); + + const autoLayout = useCallback(() => { + const layoutNodes = nodes.map((node, index) => ({ + ...node, + position: { x: (index % 4) * 200, y: Math.floor(index / 4) * 150 }, + })); + setNodes(layoutNodes); + }, [nodes, setNodes]); + + const saveDraft = useCallback(async () => { + if (!ontologyUri) { + alert("Please select an ontology first"); + return; + } + setIsSaving(true); + try { + const response = await fetch("/api/ontology/draft", { + method: "PATCH", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ + ontology_uri: ontologyUri, + diff: draftDiff, + author: "user", + summary: "Visual editor changes", + }), + }); + if (response.ok) { + const data = await response.json(); + alert(`Draft saved: ${data.draft_id}`); + } + } catch (error) { + console.error("Failed to save draft:", error); + alert("Failed to save draft"); + } finally { + setIsSaving(false); + } + }, [ontologyUri, draftDiff]); + + const handleNodeContextMenu = useCallback((event: React.MouseEvent, node: Node) => { + event.preventDefault(); + setShowContext({ x: event.clientX, y: event.clientY, type: "node", element: node }); + }, []); + + const handleEdgeContextMenu = useCallback((event: React.MouseEvent, edge: Edge) => { + event.preventDefault(); + setShowContext({ x: event.clientX, y: event.clientY, type: "edge", element: edge }); + }, []); + + const deleteSelected = useCallback(() => { + if (selectedElement) { + if ("source" in selectedElement) { + setEdges((eds) => eds.filter((e) => e.id !== selectedElement.id)); + setDraftDiff((prev) => ({ + ...prev, + removed_properties: [...prev.removed_properties, selectedElement.id], + })); + } else { + setNodes((nds) => nds.filter((n) => n.id !== selectedElement.id)); + setDraftDiff((prev) => ({ + ...prev, + removed_classes: [...prev.removed_classes, selectedElement.id], + })); + } + setSelectedElement(null); + } + setShowContext(null); + }, [selectedElement, setNodes, setEdges]); + + const renameSelected = useCallback(() => { + if (selectedElement && !("source" in selectedElement)) { + const newLabel = prompt("Enter new name:", selectedElement.data.label); + if (newLabel) { + setNodes((nds) => + nds.map((n) => (n.id === selectedElement.id ? { ...n, data: { ...n.data, label: newLabel } } : n)) + ); + setDraftDiff((prev) => ({ + ...prev, + modified_classes: { ...prev.modified_classes, [selectedElement.id]: { label: newLabel } }, + })); + } + } + setShowContext(null); + }, [selectedElement, setNodes]); + + useEffect(() => { + const handleClick = () => setShowContext(null); + window.addEventListener("click", handleClick); + return () => window.removeEventListener("click", handleClick); + }, []); + + const toolbarStyle: React.CSSProperties = { + display: "flex", + gap: "8px", + padding: "12px 16px", + background: "rgba(3, 9, 18, 0.92)", + borderBottom: "1px solid rgba(140, 192, 255, 0.12)", + flexWrap: "wrap", + }; + + const toolbarButtonStyle: React.CSSProperties = { + display: "inline-flex", + alignItems: "center", + gap: "6px", + padding: "8px 12px", + borderRadius: "8px", + border: "1px solid rgba(127, 208, 255, 0.18)", + background: "rgba(74, 163, 255, 0.08)", + color: "#ebf3ff", + fontSize: "12px", + fontWeight: "600", + cursor: "pointer", + transition: "160ms ease", + }; + + const contextMenuStyle: React.CSSProperties = { + position: "fixed", + background: "rgba(9, 19, 34, 0.95)", + border: "1px solid rgba(127, 208, 255, 0.3)", + borderRadius: "8px", + padding: "8px 0", + minWidth: "180px", + boxShadow: "0 8px 24px rgba(0, 0, 0, 0.4)", + zIndex: 1000, + }; + + const contextItemStyle: React.CSSProperties = { + padding: "8px 16px", + display: "flex", + alignItems: "center", + gap: "10px", + color: "#ebf3ff", + fontSize: "13px", + cursor: "pointer", + transition: "160ms ease", + }; + + const detailPanelStyle: React.CSSProperties = { + position: "absolute", + right: 0, + top: 0, + bottom: 0, + width: "320px", + background: "rgba(9, 19, 34, 0.95)", + borderLeft: "1px solid rgba(140, 192, 255, 0.12)", + padding: "20px", + overflow: "auto", + backdropFilter: "blur(18px)", + }; + + return ( +
+
+ + + + + + +
+ +
+ +
+ setSelectedElement(node)} + onEdgeClick={(_, edge) => setSelectedElement(edge)} + onNodeContextMenu={handleNodeContextMenu} + onEdgeContextMenu={handleEdgeContextMenu} + nodeTypes={nodeTypes} + fitView + style={{ background: "#07111f" }} + > + + + + + + {showContext && ( +
+
+ + Rename +
+
+ + Delete +
+
+ )} + + {selectedElement && ( +
+

+ {"source" in selectedElement ? "Property Details" : "Class Details"} +

+
+ +
+ {selectedElement.id} +
+
+ {!("source" in selectedElement) && ( + <> +
+ + { + setNodes((nds) => + nds.map((n) => + n.id === selectedElement.id + ? { ...n, data: { ...n.data, label: e.target.value } } + : n + ) + ); + }} + style={{ + width: "100%", + padding: "8px", + borderRadius: "6px", + border: "1px solid rgba(127, 208, 255, 0.2)", + background: "rgba(3, 9, 18, 0.8)", + color: "#ebf3ff", + fontSize: "13px", + }} + /> +
+
+ +
+ {selectedElement.data.type || "owl:Class"} +
+
+ + )} +
+ )} +
+
+ ); +} diff --git a/explorer/src/workspaces/OntologyWorkspace/ProposalReview.tsx b/explorer/src/workspaces/OntologyWorkspace/ProposalReview.tsx new file mode 100644 index 00000000..226778a3 --- /dev/null +++ b/explorer/src/workspaces/OntologyWorkspace/ProposalReview.tsx @@ -0,0 +1,413 @@ +import { useCallback, useEffect, useState } from "react"; +import { + GitMerge, + CheckCircle, + XCircle, + AlertCircle, + Send, + MessageSquare, + User, + Clock, + Plus, + Minus, + Edit, +} from "lucide-react"; + +interface Proposal { + proposal_id: string; + draft_id: string; + ontology_uri: string; + summary: string; + author: string; + reviewer: string | null; + state: "draft" | "proposed" | "approved" | "published" | "rejected"; + impact_analysis: Record; + shacl_validation: Record; + created_at: string; + updated_at: string; + comments: Record[]; +} + +interface DiffChange { + type: "added" | "removed" | "modified"; + element: string; + details?: Record; +} + +export function ProposalReview({ proposalId }: { proposalId: string }) { + const [proposal, setProposal] = useState(null); + const [diff, setDiff] = useState([]); + const [selectedElement, setSelectedElement] = useState(null); + const [commentText, setCommentText] = useState(""); + + const loadProposal = useCallback(async () => { + try { + const response = await fetch(`/api/ontology/proposals/${proposalId}`); + if (response.ok) { + const data = await response.json(); + setProposal(data); + generateDiff(data); + } + } catch (error) { + console.error("Failed to load proposal:", error); + } + }, [proposalId]); + + const generateDiff = useCallback((prop: Proposal) => { + const changes: DiffChange[] = []; + + // Generate diff from impact analysis + if (prop.impact_analysis) { + if (prop.impact_analysis.class_adds > 0) { + changes.push({ type: "added", element: `Classes (${prop.impact_analysis.class_adds})` }); + } + if (prop.impact_analysis.class_removals > 0) { + changes.push({ type: "removed", element: `Classes (${prop.impact_analysis.class_removals})` }); + } + if (prop.impact_analysis.property_changes > 0) { + changes.push({ type: "modified", element: `Properties (${prop.impact_analysis.property_changes})` }); + } + if (prop.impact_analysis.restriction_changes > 0) { + changes.push({ type: "modified", element: `Restrictions (${prop.impact_analysis.restriction_changes})` }); + } + } + + setDiff(changes); + }, []); + + useEffect(() => { + loadProposal(); + }, [loadProposal]); + + const addComment = useCallback(async () => { + if (!selectedElement || !commentText || !proposal) return; + try { + const response = await fetch(`/api/ontology/proposals/${proposal.proposal_id}/comment`, { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ + element_uri: selectedElement, + text: commentText, + author: "user", + }), + }); + if (response.ok) { + setCommentText(""); + loadProposal(); + } + } catch (error) { + console.error("Failed to add comment:", error); + alert("Failed to add comment"); + } + }, [selectedElement, commentText, proposal, loadProposal]); + + const approveProposal = useCallback(async () => { + if (!proposal) return; + try { + const response = await fetch(`/api/ontology/proposals/${proposal.proposal_id}/approve`, { + method: "POST", + }); + if (response.ok) { + alert("Proposal approved"); + loadProposal(); + } + } catch (error) { + console.error("Failed to approve proposal:", error); + alert("Failed to approve proposal"); + } + }, [proposal, loadProposal]); + + const rejectProposal = useCallback(async () => { + if (!proposal) return; + try { + const response = await fetch(`/api/ontology/proposals/${proposal.proposal_id}/reject`, { + method: "POST", + }); + if (response.ok) { + alert("Proposal rejected"); + loadProposal(); + } + } catch (error) { + console.error("Failed to reject proposal:", error); + alert("Failed to reject proposal"); + } + }, [proposal, loadProposal]); + + const publishProposal = useCallback(async () => { + if (!proposal) return; + try { + const response = await fetch(`/api/ontology/proposals/${proposal.proposal_id}/publish`, { + method: "POST", + }); + if (response.ok) { + alert("Proposal published"); + loadProposal(); + } + } catch (error) { + console.error("Failed to publish proposal:", error); + alert("Failed to publish proposal"); + } + }, [proposal, loadProposal]); + + const getChangeIcon = (type: string) => { + switch (type) { + case "added": + return ; + case "removed": + return ; + case "modified": + return ; + default: + return null; + } + }; + + const getStateIcon = (state: string) => { + switch (state) { + case "published": + return ; + case "approved": + return ; + case "rejected": + return ; + case "proposed": + return ; + default: + return ; + } + }; + + const containerStyle: React.CSSProperties = { + display: "flex", + flexDirection: "column", + height: "100%", + background: "#07111f", + padding: "20px", + overflow: "auto", + }; + + const headerStyle: React.CSSProperties = { + display: "flex", + justifyContent: "space-between", + alignItems: "center", + marginBottom: "20px", + paddingBottom: "16px", + borderBottom: "1px solid rgba(140, 192, 255, 0.12)", + }; + + const titleStyle: React.CSSProperties = { + margin: 0, + color: "#ebf3ff", + fontSize: "20px", + fontWeight: "700", + }; + + const contentStyle: React.CSSProperties = { + display: "flex", + gap: "20px", + flex: 1, + minHeight: 0, + }; + + const diffPanelStyle: React.CSSProperties = { + flex: 1, + background: "rgba(9, 19, 34, 0.8)", + borderRadius: "8px", + border: "1px solid rgba(127, 208, 255, 0.12)", + padding: "16px", + overflow: "auto", + }; + + const commentsPanelStyle: React.CSSProperties = { + width: "320px", + background: "rgba(9, 19, 34, 0.8)", + borderRadius: "8px", + border: "1px solid rgba(127, 208, 255, 0.12)", + padding: "16px", + display: "flex", + flexDirection: "column", + }; + + const diffItemStyle: React.CSSProperties = { + display: "flex", + alignItems: "center", + gap: "10px", + padding: "10px 12px", + borderRadius: "6px", + background: "rgba(3, 9, 18, 0.6)", + marginBottom: "8px", + cursor: "pointer", + transition: "160ms ease", + }; + + const buttonStyle: React.CSSProperties = { + display: "inline-flex", + alignItems: "center", + gap: "6px", + padding: "8px 14px", + borderRadius: "6px", + border: "1px solid rgba(127, 208, 255, 0.2)", + background: "rgba(74, 163, 255, 0.1)", + color: "#ebf3ff", + fontSize: "12px", + fontWeight: "600", + cursor: "pointer", + transition: "160ms ease", + }; + + const textareaStyle: React.CSSProperties = { + width: "100%", + padding: "10px 12px", + borderRadius: "6px", + border: "1px solid rgba(127, 208, 255, 0.2)", + background: "rgba(3, 9, 18, 0.8)", + color: "#ebf3ff", + fontSize: "13px", + resize: "vertical", + minHeight: "80px", + }; + + if (!proposal) { + return ( +
+
Loading proposal...
+
+ ); + } + + return ( +
+
+
+ {getStateIcon(proposal.state)} +
+

{proposal.summary}

+
+ {proposal.author} • {new Date(proposal.created_at).toLocaleString()} +
+
+
+
+ {proposal.state === "proposed" && ( + <> + + + + )} + {proposal.state === "approved" && ( + + )} +
+
+ +
+
+

+ + Diff Viewer +

+ {diff.length === 0 ? ( +
No changes detected
+ ) : ( + diff.map((change, index) => ( +
setSelectedElement(change.element)} + > + {getChangeIcon(change.type)} +
+
+ {change.element} +
+
+ {change.type} +
+
+
+ )) + )} + +
+

+ Impact Analysis +

+ 
+              {JSON.stringify(proposal.impact_analysis, null, 2)}
+
+
+ +
+

+ SHACL Validation +

+ 
+              {JSON.stringify(proposal.shacl_validation, null, 2)}
+
+
+
+ +
+

+ + Comments ({proposal.comments.length}) +

+
+ {proposal.comments.length === 0 ? ( +
No comments yet
+ ) : ( + proposal.comments.map((comment) => ( +
+
+ + + {comment.author} + +
+
{comment.text}
+
+ {new Date(comment.created_at).toLocaleString()} +
+
+ )) + )} +
+ {selectedElement && ( +
+