@grackle-ai/web-components 0.107.2

package/src/mocks/mockKnowledgeData.ts

@@ -0,0 +1,294 @@
+/**
+ * Mock knowledge graph data for the demo/mock mode.
+ * Extracted from mockData.ts to keep files within the max-lines lint limit.
+ * @module
+ */
+
+import type { GraphNode, GraphLink, NodeDetail } from "../hooks/types.js";
+
+// ─── Knowledge Graph ────────────────────────────────
+
+/** Mock knowledge graph nodes representing concepts, decisions, and references discovered by agents. */
+export const MOCK_KNOWLEDGE_NODES: GraphNode[] = [
+  // ── Concept nodes ──
+  {
+    id: "kn-auth-flow",
+    label: "Authentication Flow",
+    kind: "knowledge",
+    category: "concept",
+    content: "The application uses JWT Bearer tokens for stateless authentication. Access tokens expire after 24h. Refresh tokens are stored in the database and rotated on use. The auth middleware verifies tokens and attaches the decoded payload to req.user.",
+    tags: ["auth", "jwt", "security"],
+    workspaceId: "proj-alpha",
+    createdAt: "2026-02-25T10:30:00Z",
+    updatedAt: "2026-02-27T08:15:00Z",
+    val: 5,
+  },
+  {
+    id: "kn-db-schema",
+    label: "Database Schema",
+    kind: "knowledge",
+    category: "concept",
+    content: "PostgreSQL database with tables: users, sessions, refresh_tokens, audit_log. Uses UUID primary keys, TIMESTAMPTZ for all timestamps, and JSONB for flexible metadata columns. Connection pooling via pg-pool with per-tenant isolation.",
+    tags: ["database", "postgres", "schema"],
+    workspaceId: "proj-alpha",
+    createdAt: "2026-02-23T11:00:00Z",
+    updatedAt: "2026-02-26T22:45:00Z",
+    val: 4,
+  },
+  {
+    id: "kn-error-handling",
+    label: "Error Response Pattern",
+    kind: "knowledge",
+    category: "concept",
+    content: "All API errors follow the shape { error: string, code: string, details?: unknown }. HTTP status codes map to: 400 (validation), 401 (unauthenticated), 403 (forbidden), 404 (not found), 409 (conflict), 429 (rate limited), 500 (internal).",
+    tags: ["api", "errors", "patterns"],
+    workspaceId: "proj-alpha",
+    createdAt: "2026-02-27T08:17:00Z",
+    updatedAt: "2026-02-27T08:17:00Z",
+    val: 3,
+  },
+  {
+    id: "kn-rate-limiting",
+    label: "Rate Limiting Strategy",
+    kind: "knowledge",
+    category: "concept",
+    content: "Token-bucket algorithm with in-memory state per client IP. Default rate: 100 requests/minute, burst: 20. Returns 429 with Retry-After header. Redis adapter available for multi-instance deployments.",
+    tags: ["api", "rate-limiting", "infrastructure"],
+    workspaceId: "proj-alpha",
+    createdAt: "2026-02-27T09:00:00Z",
+    updatedAt: "2026-02-27T09:00:00Z",
+    val: 2,
+  },
+  {
+    id: "kn-etl-pipeline",
+    label: "ETL Pipeline Architecture",
+    kind: "knowledge",
+    category: "concept",
+    content: "Data pipelines follow an Extract-Transform-Load pattern with pluggable stages. Each stage reads from a source (Postgres, S3, API), transforms via configurable mappers, and loads into a target (Parquet, BigQuery, S3). Incremental loads use high-watermark tracking.",
+    tags: ["etl", "pipeline", "architecture"],
+    workspaceId: "proj-beta",
+    createdAt: "2026-02-26T08:00:00Z",
+    updatedAt: "2026-02-27T09:05:00Z",
+    val: 4,
+  },
+  {
+    id: "kn-parquet-format",
+    label: "Parquet Output Format",
+    kind: "knowledge",
+    category: "concept",
+    content: "Parquet files are written with row-group buffering (configurable batch size, default 10000 rows). Supports Snappy, ZSTD, and GZIP compression. Schema is derived from the internal column type system using Arrow type mapping.",
+    tags: ["parquet", "data-format", "compression"],
+    workspaceId: "proj-beta",
+    createdAt: "2026-02-26T08:05:00Z",
+    updatedAt: "2026-02-26T08:15:00Z",
+    val: 3,
+  },
+
+  // ── Decision nodes ──
+  {
+    id: "kn-jwt-over-session",
+    label: "JWT over Session Auth",
+    kind: "knowledge",
+    category: "decision",
+    content: "Chose JWT tokens over server-side sessions for stateless auth. Rationale: (1) no session store needed, (2) works across microservices without shared state, (3) supports mobile clients natively. Trade-off: tokens can't be revoked instantly (mitigated by short expiry + refresh rotation).",
+    tags: ["auth", "decision", "jwt"],
+    workspaceId: "proj-alpha",
+    createdAt: "2026-02-25T10:00:00Z",
+    updatedAt: "2026-02-25T10:00:00Z",
+    val: 3,
+  },
+  {
+    id: "kn-pg-pool-decision",
+    label: "pg-pool over Knex",
+    kind: "knowledge",
+    category: "decision",
+    content: "Chose pg-pool over Knex for connection pooling. pg-pool gives direct control over idle timeout, max connections, and health check queries. Knex wraps pg-pool and adds query-building overhead we don't need since we write raw SQL with parameterized queries.",
+    tags: ["database", "decision", "postgres"],
+    workspaceId: "proj-alpha",
+    createdAt: "2026-02-23T11:30:00Z",
+    updatedAt: "2026-02-23T11:30:00Z",
+    val: 2,
+  },
+  {
+    id: "kn-watermark-decision",
+    label: "Local Watermark Storage",
+    kind: "knowledge",
+    category: "decision",
+    content: "Currently using local SQLite for watermark storage. This works for single-worker pipelines but needs to move to a shared store (Redis or Postgres) for production multi-worker scenarios. Tracked as a follow-up task.",
+    tags: ["pipeline", "decision", "watermarks"],
+    workspaceId: "proj-beta",
+    createdAt: "2026-02-27T09:05:00Z",
+    updatedAt: "2026-02-27T09:05:00Z",
+    val: 2,
+  },
+
+  // ── Snippet nodes ──
+  {
+    id: "kn-jwt-middleware",
+    label: "JWT Verify Middleware",
+    kind: "knowledge",
+    category: "snippet",
+    content: "```typescript\nexport function verifyToken(req: Request, res: Response, next: NextFunction): void {\n  const header = req.headers.authorization;\n  if (!header?.startsWith(\"Bearer \")) {\n    res.status(401).json({ error: \"Missing token\" });\n    return;\n  }\n  const decoded = jwt.verify(header.slice(7), JWT_SECRET) as JwtPayload;\n  req.user = decoded;\n  next();\n}\n```",
+    tags: ["auth", "jwt", "middleware", "typescript"],
+    workspaceId: "proj-alpha",
+    createdAt: "2026-02-27T08:15:14Z",
+    updatedAt: "2026-02-27T08:15:14Z",
+    val: 2,
+  },
+  {
+    id: "kn-audit-schema",
+    label: "Audit Log Schema",
+    kind: "knowledge",
+    category: "snippet",
+    content: "```sql\nCREATE TABLE audit_log (\n  id BIGSERIAL PRIMARY KEY,\n  user_id UUID REFERENCES users(id),\n  action TEXT NOT NULL,\n  entity_type TEXT NOT NULL,\n  entity_id TEXT NOT NULL,\n  old_value JSONB,\n  new_value JSONB,\n  ip_address INET,\n  created_at TIMESTAMPTZ DEFAULT now()\n);\n```",
+    tags: ["database", "audit", "schema", "sql"],
+    workspaceId: "proj-alpha",
+    createdAt: "2026-02-26T22:45:15Z",
+    updatedAt: "2026-02-26T22:45:15Z",
+    val: 2,
+  },
+
+  // ── Insight nodes ──
+  {
+    id: "kn-n1-query",
+    label: "N+1 Query in User List",
+    kind: "knowledge",
+    category: "insight",
+    content: "GET /api/users performs a separate query for each user's role metadata, resulting in N+1 queries. For 500 users this adds ~2 seconds of latency. Solution: use a JOIN or batch lookup to fetch all role data in a single query.",
+    tags: ["performance", "database", "n+1"],
+    workspaceId: "proj-alpha",
+    createdAt: "2026-02-22T09:30:00Z",
+    updatedAt: "2026-02-22T09:30:00Z",
+    val: 2,
+  },
+  {
+    id: "kn-session-race",
+    label: "Session Cleanup Race Condition",
+    kind: "knowledge",
+    category: "insight",
+    content: "When two concurrent requests hit /api/logout, the second call throws a 500 because the session row has already been deleted. Fix: use DELETE ... RETURNING or add IF EXISTS guard to make the operation idempotent.",
+    tags: ["bug", "concurrency", "sessions"],
+    workspaceId: "proj-alpha",
+    createdAt: "2026-02-26T22:50:00Z",
+    updatedAt: "2026-02-26T22:50:00Z",
+    val: 2,
+  },
+
+  // ── Reference nodes (link to tasks/sessions) ──
+  {
+    id: "kn-ref-task-001",
+    label: "JWT Auth Task",
+    kind: "reference",
+    sourceType: "task",
+    sourceId: "task-001",
+    content: "Implement JWT authentication across all protected routes, replacing session-based auth.",
+    workspaceId: "proj-alpha",
+    createdAt: "2026-02-25T10:00:00Z",
+    updatedAt: "2026-02-27T08:15:00Z",
+    val: 3,
+  },
+  {
+    id: "kn-ref-task-006",
+    label: "Parquet Export Task",
+    kind: "reference",
+    sourceType: "task",
+    sourceId: "task-006",
+    content: "Add Parquet export support for pipeline outputs, enabling downstream Spark consumption.",
+    workspaceId: "proj-beta",
+    createdAt: "2026-02-26T08:00:00Z",
+    updatedAt: "2026-02-27T09:00:00Z",
+    val: 3,
+  },
+  {
+    id: "kn-ref-sess-001",
+    label: "Auth Middleware Session",
+    kind: "reference",
+    sourceType: "session",
+    sourceId: "sess-001",
+    content: "Active session implementing JWT auth middleware, rewrote auth.ts, login.ts, and test suite.",
+    workspaceId: "proj-alpha",
+    createdAt: "2026-02-27T08:15:00Z",
+    updatedAt: "2026-02-27T08:15:42Z",
+    val: 2,
+  },
+];
+
+/** Mock knowledge graph edges connecting nodes. */
+export const MOCK_KNOWLEDGE_LINKS: GraphLink[] = [
+  // Auth flow connections
+  { source: "kn-auth-flow", target: "kn-jwt-over-session", type: "decided_by" },
+  { source: "kn-auth-flow", target: "kn-jwt-middleware", type: "implemented_by" },
+  { source: "kn-auth-flow", target: "kn-ref-task-001", type: "tracked_in" },
+  { source: "kn-auth-flow", target: "kn-error-handling", type: "relates_to" },
+  { source: "kn-jwt-over-session", target: "kn-ref-task-001", type: "motivated_by" },
+
+  // Database connections
+  { source: "kn-db-schema", target: "kn-pg-pool-decision", type: "decided_by" },
+  { source: "kn-db-schema", target: "kn-audit-schema", type: "contains" },
+  { source: "kn-db-schema", target: "kn-n1-query", type: "affected_by" },
+  { source: "kn-db-schema", target: "kn-session-race", type: "affected_by" },
+
+  // Rate limiting connections
+  { source: "kn-rate-limiting", target: "kn-error-handling", type: "relates_to" },
+  { source: "kn-rate-limiting", target: "kn-auth-flow", type: "depends_on" },
+
+  // ETL pipeline connections
+  { source: "kn-etl-pipeline", target: "kn-parquet-format", type: "outputs_to" },
+  { source: "kn-etl-pipeline", target: "kn-watermark-decision", type: "decided_by" },
+  { source: "kn-etl-pipeline", target: "kn-ref-task-006", type: "tracked_in" },
+  { source: "kn-parquet-format", target: "kn-ref-task-006", type: "tracked_in" },
+  { source: "kn-watermark-decision", target: "kn-etl-pipeline", type: "relates_to" },
+
+  // Reference connections
+  { source: "kn-ref-task-001", target: "kn-ref-sess-001", type: "has_session" },
+  { source: "kn-jwt-middleware", target: "kn-ref-sess-001", type: "created_in" },
+  { source: "kn-audit-schema", target: "kn-db-schema", type: "part_of" },
+];
+
+/** Lookup map for knowledge nodes by ID. */
+const knowledgeNodeById: Map<string, GraphNode> = new Map(MOCK_KNOWLEDGE_NODES.map((n) => [n.id, n]));
+
+/** Helper to get a knowledge node by ID, throwing if not found (catches typos at startup). */
+function getNode(id: string): GraphNode {
+  const node = knowledgeNodeById.get(id);
+  if (!node) {
+    throw new Error(`MOCK_KNOWLEDGE_NODES is missing node "${id}"`);
+  }
+  return node;
+}
+
+/**
+ * Pre-built detail data for knowledge nodes, keyed by node ID.
+ * Used by the mock provider to populate the detail panel on node selection.
+ */
+export const MOCK_KNOWLEDGE_DETAILS: Record<string, NodeDetail> = {
+  "kn-auth-flow": {
+    node: getNode("kn-auth-flow"),
+    edges: [
+      { fromId: "kn-auth-flow", toId: "kn-jwt-over-session", type: "decided_by" },
+      { fromId: "kn-auth-flow", toId: "kn-jwt-middleware", type: "implemented_by" },
+      { fromId: "kn-auth-flow", toId: "kn-ref-task-001", type: "tracked_in" },
+      { fromId: "kn-auth-flow", toId: "kn-error-handling", type: "relates_to" },
+      { fromId: "kn-rate-limiting", toId: "kn-auth-flow", type: "depends_on" },
+    ],
+  },
+  "kn-db-schema": {
+    node: getNode("kn-db-schema"),
+    edges: [
+      { fromId: "kn-db-schema", toId: "kn-pg-pool-decision", type: "decided_by" },
+      { fromId: "kn-db-schema", toId: "kn-audit-schema", type: "contains" },
+      { fromId: "kn-db-schema", toId: "kn-n1-query", type: "affected_by" },
+      { fromId: "kn-db-schema", toId: "kn-session-race", type: "affected_by" },
+      { fromId: "kn-audit-schema", toId: "kn-db-schema", type: "part_of" },
+    ],
+  },
+  "kn-etl-pipeline": {
+    node: getNode("kn-etl-pipeline"),
+    edges: [
+      { fromId: "kn-etl-pipeline", toId: "kn-parquet-format", type: "outputs_to" },
+      { fromId: "kn-etl-pipeline", toId: "kn-watermark-decision", type: "decided_by" },
+      { fromId: "kn-etl-pipeline", toId: "kn-ref-task-006", type: "tracked_in" },
+      { fromId: "kn-watermark-decision", toId: "kn-etl-pipeline", type: "relates_to" },
+    ],
+  },
+};

package/src/scss.d.ts

@@ -0,0 +1,12 @@
+/** Type declarations for SCSS module imports. */
+declare module "*.module.scss" {
+  /** Map of local class names to their CSS module-scoped equivalents. */
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+/** Type declarations for plain SCSS imports (side-effect only). */
+declare module "*.scss" {
+  const content: string;
+  export default content;
+}

package/src/styles/global.scss

@@ -0,0 +1,244 @@
+// ============================================================================
+// Global Styles — Grackle Web UI
+// ============================================================================
+// Reset, base styles, scrollbars, keyframe animations, and accessibility
+// overrides. Imported once in main.tsx; theme tokens come from theme.scss.
+// ============================================================================
+
+@use './theme.scss';
+@use './prism-theme.scss';
+@import url('https://cdn.jsdelivr.net/npm/firacode@6.2.0/distr/fira_code.css');
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700;800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,400&display=swap');
+
+// =============================================================================
+// Suppress transitions during theme changes (T3 pattern)
+// =============================================================================
+
+.no-transitions,
+.no-transitions *,
+.no-transitions *::before,
+.no-transitions *::after {
+  transition-duration: 0s !important;
+  animation-duration: 0s !important;
+}
+
+// =============================================================================
+// Reset
+// =============================================================================
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html,
+body,
+#root {
+  height: 100%;
+  overflow: hidden;
+}
+
+body {
+  background: var(--bg-base);
+  color: var(--text-primary);
+  font-family: var(--font-ui);
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+// Subtle noise texture overlay (T3-inspired tactile feel)
+body::after {
+  content: '';
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  opacity: var(--noise-opacity);
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  background-repeat: repeat;
+  z-index: 99999;
+}
+
+// =============================================================================
+// Selection
+// =============================================================================
+
+::selection {
+  background: var(--accent-green-selection);
+  color: var(--text-primary);
+}
+
+// =============================================================================
+// Scrollbars
+// =============================================================================
+
+// WebKit (Chrome, Edge, Safari)
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--text-disabled);
+  border-radius: var(--radius-full);
+
+  &:hover {
+    background: var(--text-tertiary);
+  }
+}
+
+// Firefox
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--text-disabled) transparent;
+}
+
+// =============================================================================
+// Focus Ring (Accessibility)
+// =============================================================================
+
+:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+}
+
+// Enable OpenType ligatures and contextual alternates globally
+:root {
+  font-feature-settings: 'liga' 1, 'calt' 1;
+}
+
+// =============================================================================
+// Keyframe Animations
+// =============================================================================
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+// =============================================================================
+// Matrix — CRT scanline overlay + text glow
+// =============================================================================
+
+[data-theme="matrix"] {
+  // Tunable scanline intensity — defaults to atmospheric, override via DevTools
+  --matrix-scanline-opacity: 0.04;
+
+  // Override the noise overlay with CRT scanlines
+  body::after {
+    opacity: var(--matrix-scanline-opacity);
+    background-image: repeating-linear-gradient(
+      0deg,
+      rgba(0, 255, 65, 0.06) 0px,
+      rgba(0, 255, 65, 0.06) 1px,
+      transparent 1px,
+      transparent 3px
+    );
+    background-size: 100% 3px;
+  }
+
+  // CRT text glow — subtle green halo
+  body {
+    text-shadow: 0 0 2px rgba(0, 255, 65, 0.12);
+  }
+
+  // Suppress glow on focused text inputs for readability
+  input:focus,
+  textarea:focus,
+  [contenteditable="true"]:focus {
+    text-shadow: none;
+  }
+}
+
+// =============================================================================
+// Accessibility: High Contrast
+// =============================================================================
+// Increase border visibility and text contrast for high-contrast mode.
+
+@media (prefers-contrast: more) {
+  [data-theme="grackle-light"],
+  [data-theme="brutalist-light"],
+  [data-theme="monokai-light"] {
+    --text-secondary: #4b5563;
+    --text-tertiary: #6b7280;
+    --text-disabled: #9ca3af;
+    --border-subtle: rgba(0, 0, 0, 0.20);
+    --border-input: rgba(0, 0, 0, 0.30);
+  }
+
+  [data-theme="grackle-dark"],
+  [data-theme="glass"],
+  [data-theme="matrix"],
+  [data-theme="monokai-dark"],
+  [data-theme="brutalist-dark"],
+  [data-theme="ubuntu"],
+  [data-theme="sandstone"],
+  [data-theme="verdigris"],
+  [data-theme="primer"] {
+    --text-secondary: #d1d5db;
+    --text-tertiary: #9ca3af;
+    --text-disabled: #6b7280;
+    --border-subtle: rgba(255, 255, 255, 0.15);
+    --border-input: rgba(255, 255, 255, 0.25);
+  }
+}
+
+// =============================================================================
+// Accessibility: Reduced Motion
+// =============================================================================
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}