mirror of
https://github.com/semantica-agi/semantica.git
synced 2026-09-11 04:01:32 +00:00
KaifAhmad1andClaude Sonnet 4.6
3ea1283626
## Folder & Project
- Renamed `semantica-explorer/` → `explorer/` (cleaner path)
- Browser tab title: `Semantica Knowledge Explorer`
- Brand pill: `SEM` → `SKE` (tooltip: Semantica Knowledge Explorer)
- Nav rail label: `Explore` → `Knowledge Explorer`
- package.json name: `semantica-knowledge-explorer`
- Downgraded Vite 8 → Vite 5 for Node v20.17.0 compatibility
## App Shell
- Dynamic per-workspace kicker labels replacing static "Workspace" pill:
Graph Studio · Vocabulary Browser · Reasoning Engine · SPARQL Query ·
Decision Intelligence · Knowledge Audit · Graph Governance
## Enrich Workspace — 2 new tabs
### Entity Resolution tab
- Similarity threshold slider (0.50–0.99)
- Run Dedup Scan → POST /api/enrich/dedup
- Flagged pairs list with colour-coded score bars (red/amber/green)
- Expandable inline diff: primary vs duplicate side-by-side
- One-click Merge → POST /api/enrich/merge with logEvent dispatch
- Dismiss per pair; Clear all button
- Merge history sidebar pulled live from Registry store
### Registry tab (Document Registry)
- Live chronological audit log of all KG mutations in-session
- Colour-coded op-type badges: IMPORT · MERGE · ADD NODE · ADD EDGE ·
INFER · DELETE · EXPORT · VOCAB
- Filter pills to narrow by operation type
- Expandable JSON detail rows per entry
- Clear log button
- Entirely client-side via registryStore (no backend needed)
## Manage Workspace — 2 new tabs
### KG Overview tab
- Stats chips: total nodes, edges, graph density
- Node type breakdown bar chart (up to 8 types, colour-coded)
- Edge type breakdown bar chart from /api/graph/stats
- Top-10 most connected nodes ranked by degree
- Skeleton loading states + Refresh button
### Ontology Summary tab
- Read-only SKOS scheme tree (scheme → top concepts → narrower)
- Concept detail panel: labels, notation, description, narrower nav
- "Open Full Browser" button deep-links to Vocabulary Browser tab
## Decision Workspace polish
- CausalFlowDiagram: vertical node cards connected by relationship pills
- Outcome badges: colour-coded (green=approved, red=rejected, amber=deferred)
- Live filter input across decision ID, category, and outcome
- Animated skeleton loading while list fetches
## Graph Inspector polish
- PathFlowViz: clickable node chips connected by edge-type labels;
clicking a chip focuses that node in the canvas
- Link Prediction button shows spinner while computing
- Empty states for path trace and candidate links sections
## Registry dispatch — WebSocket
- ADD_NODE events → logEvent("add-node", …) in GraphWorkspace WS handler
- ADD_EDGE events → logEvent("add-edge", …) in GraphWorkspace WS handler
- Import, Export, Merge already dispatched logEvent on API response
## Graph visibility overhaul
### Edge colours (were nearly transparent, now clearly visible)
- edgeBackbone: rgba(…, 0.04) → rgba(…, 0.38)
- edgeStructure: rgba(…, 0.009) → rgba(…, 0.28)
- edgeInspection: rgba(…, 0.026) → rgba(…, 0.48)
- Muted edges: 0.009–0.02 → 0.12–0.26
- Focus edges: 0.16 → 0.42
### Edge sizes
- default minSize: 0.18 → 0.9 (always at least 1 pixel wide)
- path minSize: 1.8 → 2.4
- inactive/muted: hide:true → hide:false (dimmed not hidden)
### Node sizes
- default sizeMultiplier: 0.72 → 0.92
- default minSize: 0.68 → 3.5 (visible at all zoom levels)
- overview nodeScale: 0.66 → 0.88
- nodeTintMix (colour): 0.03 → 0.14
- nodeCoreMix (brightness): 0.52 → 0.72
### Label budget
- overview: 10 → 28 labels
- structure: 36 → 60 labels
- inspection: 80 → 120 labels
### Sigma settings
- renderEdgeLabels: false → true (relationship type on every edge)
- edgeLabelSize: — → 10
- labelRenderedSizeThreshold: 4 → 2
- labelDensity: 0.86 → 1.1
- hideLabelsOnMove: true → false (labels stay visible while panning)
- hideEdgesOnMove: true → false (edges stay visible while panning)
- minCameraRatio: — → 0.04 (prevents zooming inside a node)
- maxCameraRatio: — → 8 (graph stays visible when zoomed out)
### Zoom controls
- Added Zoom In (+) and Zoom Out (−) buttons to graph toolbar
- Smooth animated zoom via camera.animatedZoom / animatedUnzoom (200ms)
- Mouse scroll wheel clamped between minCameraRatio and maxCameraRatio
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
385 lines
7.7 KiB
CSS
385 lines
7.7 KiB
CSS
.sem-workspace-frame {
|
|
width: 100%;
|
|
height: 100%;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
gap: 18px;
|
|
padding: 20px;
|
|
background:
|
|
radial-gradient(circle at top, rgba(103, 182, 255, 0.08), transparent 24%),
|
|
linear-gradient(180deg, rgba(8, 17, 29, 0.94), rgba(3, 7, 14, 0.98));
|
|
}
|
|
|
|
.sem-workspace-frame > :last-child {
|
|
width: 100%;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
flex: 1;
|
|
align-self: stretch;
|
|
}
|
|
|
|
.sem-workspace-hero {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 18px;
|
|
padding: 20px 22px;
|
|
border-radius: 26px;
|
|
border: 1px solid var(--panel-border);
|
|
background:
|
|
linear-gradient(180deg, rgba(8, 18, 33, 0.88), rgba(11, 22, 38, 0.72)),
|
|
radial-gradient(circle at top right, rgba(255, 179, 109, 0.08), transparent 28%);
|
|
box-shadow: var(--shadow-strong), inset 0 1px 0 rgba(255,255,255,0.04);
|
|
backdrop-filter: blur(18px);
|
|
-webkit-backdrop-filter: blur(18px);
|
|
}
|
|
|
|
.sem-workspace-kicker {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: var(--text-2);
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.sem-workspace-kicker::before {
|
|
content: "";
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 999px;
|
|
background: linear-gradient(135deg, var(--accent-2), var(--warm));
|
|
box-shadow: 0 0 14px rgba(158, 217, 255, 0.45);
|
|
}
|
|
|
|
.sem-workspace-title {
|
|
color: var(--text-1);
|
|
font-size: 28px;
|
|
line-height: 0.98;
|
|
letter-spacing: -0.05em;
|
|
font-weight: 800;
|
|
margin: 0;
|
|
}
|
|
|
|
.sem-workspace-subtitle {
|
|
margin-top: 8px;
|
|
color: var(--text-2);
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
max-width: 58ch;
|
|
}
|
|
|
|
.sem-workspace-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.sem-grid-two {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
|
|
gap: 20px;
|
|
min-height: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.sem-grid-split {
|
|
display: grid;
|
|
grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
|
|
gap: 18px;
|
|
min-height: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.sem-surface {
|
|
border-radius: 24px;
|
|
border: 1px solid var(--panel-border);
|
|
background:
|
|
linear-gradient(180deg, rgba(9, 18, 32, 0.84), rgba(10, 18, 31, 0.72)),
|
|
radial-gradient(circle at top, rgba(103, 182, 255, 0.05), transparent 34%);
|
|
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255,255,255,0.04);
|
|
backdrop-filter: blur(18px);
|
|
-webkit-backdrop-filter: blur(18px);
|
|
}
|
|
|
|
.sem-surface--subtle {
|
|
background: linear-gradient(180deg, rgba(9, 18, 32, 0.7), rgba(9, 16, 28, 0.52));
|
|
}
|
|
|
|
.sem-surface--accent {
|
|
border-color: var(--panel-border-strong);
|
|
}
|
|
|
|
.sem-surface-body {
|
|
padding: 20px;
|
|
}
|
|
|
|
.sem-surface-body--tight {
|
|
padding: 14px;
|
|
}
|
|
|
|
.sem-section-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.sem-section-eyebrow {
|
|
color: var(--text-3);
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.sem-section-title {
|
|
color: var(--text-1);
|
|
font-size: 18px;
|
|
font-weight: 800;
|
|
letter-spacing: -0.04em;
|
|
margin: 0;
|
|
}
|
|
|
|
.sem-section-copy {
|
|
margin-top: 6px;
|
|
color: var(--text-2);
|
|
font-size: 13px;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.sem-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 6px 10px;
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(103, 182, 255, 0.16);
|
|
background: rgba(103, 182, 255, 0.08);
|
|
color: #9ed9ff;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.sem-chip--warm {
|
|
color: #ffce97;
|
|
border-color: rgba(255, 179, 109, 0.16);
|
|
background: rgba(255, 179, 109, 0.08);
|
|
}
|
|
|
|
.sem-chip--success {
|
|
color: #8bf0bf;
|
|
border-color: rgba(80, 210, 159, 0.16);
|
|
background: rgba(80, 210, 159, 0.08);
|
|
}
|
|
|
|
.sem-command-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
padding: 12px 14px;
|
|
border-radius: 20px;
|
|
border: 1px solid rgba(132, 197, 255, 0.12);
|
|
background: rgba(0, 0, 0, 0.18);
|
|
box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
|
|
}
|
|
|
|
.sem-command-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.sem-segmented {
|
|
display: inline-flex;
|
|
gap: 4px;
|
|
padding: 4px;
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(132, 197, 255, 0.12);
|
|
background: rgba(8, 16, 28, 0.58);
|
|
}
|
|
|
|
.sem-button,
|
|
.sem-button-secondary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
min-height: 40px;
|
|
padding: 10px 14px;
|
|
border-radius: 14px;
|
|
cursor: pointer;
|
|
transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, opacity 180ms ease;
|
|
}
|
|
|
|
.sem-button:hover,
|
|
.sem-button-secondary:hover {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.sem-button {
|
|
color: white;
|
|
border: 1px solid rgba(103, 182, 255, 0.2);
|
|
background: linear-gradient(180deg, rgba(53, 130, 245, 0.3), rgba(25, 88, 185, 0.18));
|
|
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.sem-button-secondary {
|
|
color: #d8e8fb;
|
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
background: rgba(255, 255, 255, 0.035);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.sem-button:disabled,
|
|
.sem-button-secondary:disabled {
|
|
opacity: 0.55;
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
}
|
|
|
|
.sem-segmented button {
|
|
min-height: 36px;
|
|
padding: 8px 12px;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.sem-segmented button[data-active="true"] {
|
|
background: linear-gradient(180deg, rgba(53, 130, 245, 0.34), rgba(25, 88, 185, 0.2));
|
|
border-color: rgba(132, 197, 255, 0.2);
|
|
}
|
|
|
|
.sem-input,
|
|
.sem-select,
|
|
.sem-textarea {
|
|
width: 100%;
|
|
border-radius: 14px;
|
|
border: 1px solid rgba(132, 197, 255, 0.14);
|
|
background: rgba(0, 0, 0, 0.22);
|
|
color: var(--text-1);
|
|
padding: 12px 14px;
|
|
box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
|
|
}
|
|
|
|
.sem-input::placeholder,
|
|
.sem-textarea::placeholder {
|
|
color: var(--text-3);
|
|
}
|
|
|
|
.sem-textarea {
|
|
min-height: 160px;
|
|
resize: vertical;
|
|
}
|
|
|
|
.sem-inspector {
|
|
height: 100%;
|
|
overflow: auto;
|
|
}
|
|
|
|
.sem-empty-state,
|
|
.sem-loading-state {
|
|
height: 100%;
|
|
min-height: 240px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
padding: 28px;
|
|
color: var(--text-2);
|
|
}
|
|
|
|
.sem-empty-state-title,
|
|
.sem-loading-state-title {
|
|
color: var(--text-1);
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
margin: 14px 0 6px;
|
|
}
|
|
|
|
.sem-empty-state-copy,
|
|
.sem-loading-state-copy {
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
max-width: 42ch;
|
|
}
|
|
|
|
.sem-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.sem-list-item {
|
|
width: 100%;
|
|
text-align: left;
|
|
padding: 14px;
|
|
border-radius: 16px;
|
|
border: 1px solid rgba(132, 197, 255, 0.08);
|
|
background: rgba(255, 255, 255, 0.025);
|
|
color: var(--text-1);
|
|
transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sem-list-item:hover {
|
|
transform: translateY(-1px);
|
|
border-color: rgba(132, 197, 255, 0.18);
|
|
background: rgba(103, 182, 255, 0.08);
|
|
}
|
|
|
|
.sem-list-item[data-active="true"] {
|
|
border-color: rgba(132, 197, 255, 0.22);
|
|
background: linear-gradient(180deg, rgba(53, 130, 245, 0.18), rgba(25, 88, 185, 0.1));
|
|
}
|
|
|
|
.sem-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
color: var(--text-1);
|
|
}
|
|
|
|
.sem-table th {
|
|
text-align: left;
|
|
color: var(--text-2);
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
padding: 10px 12px;
|
|
border-bottom: 1px solid rgba(255,255,255,0.08);
|
|
}
|
|
|
|
.sem-table td {
|
|
padding: 12px;
|
|
border-bottom: 1px solid rgba(255,255,255,0.05);
|
|
font-size: 13px;
|
|
}
|
|
|
|
@media (max-width: 1180px) {
|
|
.sem-grid-two,
|
|
.sem-grid-split {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.sem-workspace-hero {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.sem-workspace-actions {
|
|
justify-content: flex-start;
|
|
}
|
|
}
|