@ltm-blueverse/alpha-semantic-hub 0.7.0

package/explorer/src/workspaces/VocabularyWorkspace/ImportDropzone.tsx

@@ -0,0 +1,95 @@
+/**
+ * ImportDropzone.tsx
+ *
+ * Drag & drop upload zone for SKOS .ttl / .rdf files.
+ * Styled for the Palantir dark theme.
+ */
+import React, { useCallback, useState } from 'react';
+import { useDropzone } from 'react-dropzone';
+import { UploadCloud, CheckCircle2, Loader2 } from 'lucide-react';
+import { useImportVocabulary } from './queries';
+import type { ImportResponse } from './types';
+
+export const ImportDropzone: React.FC = () => {
+  const [file, setFile] = useState<File | null>(null);
+  const [importResult, setImportResult] = useState<ImportResponse | null>(null);
+  const importMutation = useImportVocabulary();
+
+  const onDrop = useCallback((acceptedFiles: File[]) => {
+    if (acceptedFiles.length > 0) {
+      const selectedFile = acceptedFiles[0];
+      setFile(selectedFile);
+      setImportResult(null);
+
+      importMutation.mutate(selectedFile, {
+        onSuccess: (data) => {
+          setImportResult(data);
+          setTimeout(() => {
+            setFile(null);
+            setImportResult(null);
+          }, 4000);
+        },
+        onError: (err) => {
+          console.error("Upload failed:", err);
+          setFile(null);
+        }
+      });
+    }
+  }, [importMutation]);
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    accept: {
+      'text/turtle': ['.ttl'],
+      'application/rdf+xml': ['.rdf', '.owl']
+    },
+    maxFiles: 1
+  });
+
+  return (
+    <div>
+      <div
+        {...getRootProps()}
+        style={{
+          border: `2px dashed ${isDragActive ? '#ff2d4b' : 'rgba(255,45,75,0.25)'}`,
+          backgroundColor: isDragActive ? 'rgba(255,45,75,0.06)' : 'rgba(0,0,0,0.2)',
+          borderRadius: 8,
+          padding: '16px 12px',
+          textAlign: 'center',
+          cursor: 'pointer',
+          transition: 'all 0.2s ease',
+        }}
+      >
+        <input {...getInputProps()} />
+
+        {importMutation.isPending ? (
+          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', color: '#b08b93' }}>
+            <Loader2 className="animate-spin" size={20} style={{ marginBottom: 6 }} />
+            <span style={{ fontSize: 12 }}>Uploading {file?.name}…</span>
+          </div>
+        ) : importResult ? (
+          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', color: '#3fb950' }}>
+            <CheckCircle2 size={20} style={{ marginBottom: 6 }} />
+            <span style={{ fontSize: 12, fontWeight: 500 }}>Import Successful!</span>
+            <span style={{ fontSize: 11, marginTop: 2, color: '#43d17a' }}>
+              +{importResult.nodes_added} concepts · +{importResult.edges_added} links
+            </span>
+          </div>
+        ) : (
+          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', color: '#b08b93' }}>
+            <UploadCloud size={20} style={{ marginBottom: 6, color: isDragActive ? '#ff2d4b' : '#484f58' }} />
+            <span style={{ fontSize: 12, fontWeight: 500, color: '#e8ccd1' }}>
+              {isDragActive ? "Drop here…" : "Import Vocabulary"}
+            </span>
+            <span style={{ fontSize: 11, marginTop: 2 }}>.ttl or .rdf</span>
+          </div>
+        )}
+      </div>
+      {importMutation.isError && (
+        <p style={{ color: '#f85149', fontSize: 11, marginTop: 6, textAlign: 'center' }}>
+          Upload failed. Check console.
+        </p>
+      )}
+    </div>
+  );
+};

package/explorer/src/workspaces/VocabularyWorkspace/PropertyPanel.tsx

@@ -0,0 +1,116 @@
+/**
+ * src/workspaces/VocabularyWorkspace/PropertyPanel.tsx
+ *
+ * Detail panel for a selected SKOS concept — shows preferred label,
+ * URI, alt labels, and description.
+ */
+import type { ConceptNode } from './types';
+
+interface PropertyPanelProps {
+  concept: ConceptNode | null;
+}
+
+export function PropertyPanel({ concept }: PropertyPanelProps) {
+  if (!concept) {
+    return (
+      <div style={{
+        display: 'flex', flexDirection: 'column', alignItems: 'center',
+        justifyContent: 'center', height: '100%', color: '#b08b93',
+        textAlign: 'center', padding: 40,
+      }}>
+        <svg width="48" height="48" viewBox="0 0 24 24" fill="none"
+          stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"
+          strokeLinejoin="round" style={{ marginBottom: 16, opacity: 0.4 }}>
+          <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20" />
+        </svg>
+        <p style={{ fontSize: 15, fontWeight: 500, marginBottom: 4 }}>No concept selected</p>
+        <p style={{ fontSize: 13 }}>Click a concept in the tree to view its properties.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ padding: 28, overflowY: 'auto', height: '100%' }}>
+      {/* Header */}
+      <div style={{ borderBottom: '1px solid rgba(255,45,75,0.2)', paddingBottom: 20, marginBottom: 24 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
+          <span style={{
+            display: 'inline-block', width: 8, height: 8, borderRadius: '50%',
+            background: '#d2a8ff', boxShadow: '0 0 8px rgba(210,168,255,0.6)',
+          }} />
+          <span style={{ color: '#d2a8ff', fontSize: 12, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em' }}>
+            SKOS Concept
+          </span>
+        </div>
+        <h2 style={{ margin: 0, color: '#fff', fontSize: 22, fontWeight: 700, wordBreak: 'break-word' }}>
+          {concept.pref_label}
+        </h2>
+      </div>
+
+      {/* URI Badge */}
+      <div style={{
+        marginBottom: 20, padding: '8px 14px',
+        background: 'rgba(255,45,75,0.08)',
+        border: '1px solid rgba(255,45,75,0.2)',
+        borderRadius: 6, fontSize: 13, color: '#ff8fa0',
+        fontFamily: "'JetBrains Mono', monospace",
+        wordBreak: 'break-all',
+      }}>
+        {concept.uri}
+      </div>
+
+      {/* Alt Labels */}
+      {concept.alt_labels && concept.alt_labels.length > 0 && (
+        <section style={{ marginBottom: 24 }}>
+          <h4 style={{
+            color: '#b08b93', fontSize: 12, textTransform: 'uppercase',
+            letterSpacing: '0.08em', marginBottom: 10,
+          }}>
+            Alternative Labels
+          </h4>
+          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+            {concept.alt_labels.map((lbl, i) => (
+              <span key={i} style={{
+                background: '#21262d', color: '#e8ccd1',
+                padding: '4px 10px', borderRadius: 4, fontSize: 13,
+                border: '1px solid rgba(255,255,255,0.06)',
+              }}>
+                {lbl}
+              </span>
+            ))}
+          </div>
+        </section>
+      )}
+
+      {/* Children summary */}
+      <section style={{
+        background: 'rgba(0,0,0,0.2)', padding: 16, borderRadius: 8,
+        border: '1px solid rgba(255,255,255,0.05)',
+      }}>
+        <h4 style={{
+          color: '#b08b93', fontSize: 12, textTransform: 'uppercase',
+          letterSpacing: '0.08em', marginBottom: 10,
+        }}>
+          Narrower Concepts
+        </h4>
+        {concept.children && concept.children.length > 0 ? (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+            {concept.children.map((child) => (
+              <span key={child.uri} style={{
+                color: '#e8ccd1', fontSize: 13, padding: '6px 10px',
+                background: 'rgba(255,45,75,0.06)', borderRadius: 4,
+                border: '1px solid rgba(255,45,75,0.12)',
+              }}>
+                {child.pref_label}
+              </span>
+            ))}
+          </div>
+        ) : (
+          <p style={{ margin: 0, color: '#484f58', fontStyle: 'italic', fontSize: 13 }}>
+            Leaf concept — no narrower concepts.
+          </p>
+        )}
+      </section>
+    </div>
+  );
+}

package/explorer/src/workspaces/VocabularyWorkspace/Sidebar.tsx

@@ -0,0 +1,112 @@
+/**
+ * src/workspaces/VocabularyWorkspace/Sidebar.tsx
+ *
+ * Left sidebar for the Vocabulary workspace.
+ * - Lists available SKOS ConceptSchemes
+ * - Shows the concept hierarchy tree for the active scheme
+ * - Includes the import dropzone
+ */
+import { useState } from 'react';
+import { useVocabularies, useConceptHierarchy } from './queries';
+import { ConceptTree } from './ConceptTree';
+import { ImportDropzone } from './ImportDropzone';
+import type { ConceptNode, VocabularyScheme } from './types';
+
+interface SidebarProps {
+  onSelectConcept: (concept: ConceptNode) => void;
+}
+
+export function Sidebar({ onSelectConcept }: SidebarProps) {
+  const { data: schemes = [], isLoading: schemesLoading } = useVocabularies();
+  const [activeScheme, setActiveScheme] = useState<string | undefined>();
+
+  // Auto-select first scheme
+  const selectedSchemeUri = activeScheme ?? schemes[0]?.uri;
+
+  const {
+    data: hierarchy = [],
+    isLoading: treeLoading,
+  } = useConceptHierarchy(selectedSchemeUri);
+
+  return (
+    <div style={{
+      width: 340, display: 'flex', flexDirection: 'column',
+      borderRight: '1px solid rgba(255,45,75,0.15)',
+      backgroundColor: '#010409', overflow: 'hidden',
+    }}>
+      {/* Header */}
+      <div style={{
+        padding: '20px 20px 16px',
+        borderBottom: '1px solid rgba(255,45,75,0.15)',
+      }}>
+        <h2 style={{ fontSize: 18, color: '#e8ccd1', margin: '0 0 4px 0', fontWeight: 600 }}>
+          Ontology & Vocabulary
+        </h2>
+        <p style={{ color: '#b08b93', fontSize: 13, margin: 0 }}>
+          {schemes.length
+            ? `${schemes.length} vocabulary scheme${schemes.length > 1 ? 's' : ''}`
+            : 'No vocabularies loaded'}
+        </p>
+      </div>
+
+      {/* Scheme selector */}
+      <div style={{ padding: '12px 16px', borderBottom: '1px solid rgba(255,45,75,0.1)' }}>
+        {schemesLoading ? (
+          <div style={{ color: '#b08b93', fontSize: 13 }}>Loading schemes…</div>
+        ) : schemes.length === 0 ? (
+          <div style={{ color: '#484f58', fontSize: 13, fontStyle: 'italic' }}>
+            No schemes found. Import a .ttl or .rdf file below.
+          </div>
+        ) : (
+          <select
+            value={selectedSchemeUri || ''}
+            onChange={(e) => setActiveScheme(e.target.value)}
+            style={{
+              width: '100%', appearance: 'none',
+              background: 'rgba(0,0,0,0.3)',
+              border: '1px solid rgba(255,45,75,0.2)',
+              color: '#e8ccd1', padding: '8px 12px',
+              borderRadius: 6, fontSize: 13, cursor: 'pointer',
+              outline: 'none',
+            }}
+          >
+            {schemes.map((s: VocabularyScheme) => (
+              <option key={s.uri} value={s.uri} style={{ background: '#0a0508' }}>
+                {s.label}
+              </option>
+            ))}
+          </select>
+        )}
+      </div>
+
+      {/* Concept Tree */}
+      <div style={{
+        flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column',
+      }}>
+        {treeLoading ? (
+          <div style={{ padding: 20, color: '#b08b93', fontSize: 13, textAlign: 'center' }}>
+            Loading hierarchy…
+          </div>
+        ) : hierarchy.length === 0 ? (
+          <div style={{ padding: 20, color: '#484f58', fontSize: 13, textAlign: 'center', fontStyle: 'italic' }}>
+            {selectedSchemeUri
+              ? 'No concepts found in this scheme.'
+              : 'Select a scheme to browse concepts.'}
+          </div>
+        ) : (
+          <div style={{ flex: 1, overflow: 'hidden' }}>
+            <ConceptTree data={hierarchy} onSelectConcept={onSelectConcept} />
+          </div>
+        )}
+      </div>
+
+      {/* Import area */}
+      <div style={{
+        padding: '12px 16px',
+        borderTop: '1px solid rgba(255,45,75,0.15)',
+      }}>
+        <ImportDropzone />
+      </div>
+    </div>
+  );
+}

package/explorer/src/workspaces/VocabularyWorkspace/VocabularyWorkspace.tsx

@@ -0,0 +1,70 @@
+/**
+ * src/workspaces/VocabularyWorkspace/VocabularyWorkspace.tsx
+ *
+ * Main Vocabulary workspace — composes the Sidebar (scheme list + tree + import)
+ * and the PropertyPanel (concept details) into a responsive two-column layout.
+ *
+ * All data fetching is handled by TanStack Query hooks in `queries.ts`.
+ */
+import { useState } from 'react';
+import { Sidebar } from './Sidebar';
+import { PropertyPanel } from './PropertyPanel';
+import type { ConceptNode } from './types';
+
+const THEME_CSS = `
+  .vocab-workspace {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    background: #0a0508;
+    overflow: hidden;
+  }
+  .vocab-main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    overflow: hidden;
+  }
+  .vocab-main-content {
+    flex: 1;
+    overflow-y: auto;
+  }
+  .vocab-detail-glass {
+    background: linear-gradient(135deg, rgba(13,17,23,0.75), rgba(22,27,34,0.6));
+    backdrop-filter: blur(16px) saturate(1.2);
+    -webkit-backdrop-filter: blur(16px) saturate(1.2);
+    border: 1px solid rgba(255,45,75,0.15);
+    box-shadow: 0 8px 32px rgba(0,0,0,0.5), inset 1px 1px 0 rgba(255,255,255,0.04);
+    border-radius: 14px;
+    height: 100%;
+  }
+`;
+
+export function VocabularyWorkspace() {
+  const [selectedConcept, setSelectedConcept] = useState<ConceptNode | null>(null);
+
+  return (
+    <div className="vocab-workspace">
+      <style>{THEME_CSS}</style>
+
+      {/* Left: Sidebar with scheme list + concept tree + import */}
+      <Sidebar onSelectConcept={setSelectedConcept} />
+
+      {/* Right: Concept detail panel */}
+      <div className="vocab-main">
+        {/* Decorative background gradient */}
+        <div style={{
+          position: 'absolute', inset: 0, pointerEvents: 'none',
+          background: 'radial-gradient(ellipse at top right, rgba(210,168,255,0.04), transparent 60%)',
+        }} />
+
+        <div className="vocab-main-content" style={{ padding: 32 }}>
+          <div className="vocab-detail-glass">
+            <PropertyPanel concept={selectedConcept} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/explorer/src/workspaces/VocabularyWorkspace/queries.ts

@@ -0,0 +1,52 @@
+// queries.ts
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import type { VocabularyScheme, ConceptNode, ImportResponse } from './types';
+
+const fetchSchemes = async (): Promise<VocabularyScheme[]> => {
+  const res = await fetch('/api/vocabulary/schemes');
+  if (!res.ok) throw new Error('Failed to fetch vocabularies');
+  return res.json();
+};
+
+const fetchHierarchy = async (schemeUri: string): Promise<ConceptNode[]> => {
+  const res = await fetch(`/api/vocabulary/hierarchy?scheme=${encodeURIComponent(schemeUri)}`);
+  if (!res.ok) throw new Error('Failed to fetch hierarchy');
+  return res.json();
+};
+
+// Updated to return the ImportResponse
+const importVocabulary = async (file: File): Promise<ImportResponse> => {
+  const formData = new FormData();
+  formData.append('file', file);
+  const res = await fetch('/api/vocabulary/import', {
+    method: 'POST',
+    body: formData,
+  });
+  if (!res.ok) throw new Error('Failed to import vocabulary');
+  return res.json(); 
+};
+
+export const useVocabularies = () => {
+  return useQuery({ 
+    queryKey: ['vocabularies'], 
+    queryFn: fetchSchemes 
+  });
+};
+
+export const useConceptHierarchy = (schemeUri: string | undefined) => {
+  return useQuery({
+    queryKey: ['hierarchy', schemeUri],
+    queryFn: () => fetchHierarchy(schemeUri!),
+    enabled: !!schemeUri, 
+  });
+};
+
+export const useImportVocabulary = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: importVocabulary,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['vocabularies'] });
+    },
+  });
+};

package/explorer/src/workspaces/VocabularyWorkspace/types.ts

@@ -0,0 +1,24 @@
+export interface VocabularyScheme {
+  uri: string;
+  label: string;
+  description?: string;
+}
+
+export interface ConceptNode {
+  uri: string;
+  pref_label: string;
+  alt_labels: string[];
+  description?: string;
+  notation?: string;
+  scheme_uri?: string;
+  parent_uri?: string;
+  children?: ConceptNode[] | null;
+}
+
+export interface ImportResponse {
+  status: string;
+  filename?: string | null;
+  nodes_added: number;
+  edges_added: number;
+  format?: string;
+}

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@ltm-blueverse/alpha-semantic-hub",
+  "version": "0.7.0",
+  "description": "Alpha Semantic Hub \u2014 Graph-Native Infrastructure for Context and Accountable AI Systems",
+  "keywords": [
+    "alpha-semantic-hub",
+    "pi-package",
+    "knowledge graph",
+    "context graphs",
+    "decision intelligence",
+    "mcp"
+  ],
+  "license": "MIT",
+  "repository": "github:DeejayAI/alpha-semantic-hub",
+  "pi": {
+    "skills": [
+      "plugins/skills"
+    ]
+  },
+  "author": "LTM Blueverse <deejay@ltmb.io>",
+  "files": [
+    "plugins",
+    "explorer/src",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}