@reddb-io/ui 0.1.1

package/src/lib/graph-loader/drilldown.ts

@@ -0,0 +1,334 @@
+import type { QueryResult } from "#reddb";
+import type { LoadedGraph, LoadedGraphEdge, LoadedGraphNode } from "./contract";
+
+type GraphModel = LoadedGraph["model"];
+
+export interface DrilldownNodeSummary {
+  id: string;
+  label: string;
+  type: string;
+  degree: number;
+  incoming: number;
+  outgoing: number;
+}
+
+export interface DrilldownComponent {
+  id: string;
+  label: string;
+  nodeCount: number;
+  connectionCount: number;
+  internalConnectionCount: number;
+  externalConnectionCount: number;
+  nodeIds: string[];
+  nodes: DrilldownNodeSummary[];
+}
+
+export interface DrilldownLayer {
+  id: string;
+  label: string;
+  color: string;
+  nodeCount: number;
+  componentCount: number;
+  connectionCount: number;
+  internalConnectionCount: number;
+  externalConnectionCount: number;
+  nodeIds: string[];
+  components: DrilldownComponent[];
+}
+
+export interface GraphDrilldown {
+  layers: DrilldownLayer[];
+}
+
+const LAYER_FIELDS = [
+  "layer",
+  "layer_name",
+  "layerName",
+  "layer_id",
+  "layerId",
+  "domain",
+  "namespace",
+];
+
+const COMMUNITY_FIELDS = [
+  "community",
+  "community_name",
+  "communityName",
+  "community_id",
+  "communityId",
+];
+
+const COMPONENT_FIELDS = [
+  "component",
+  "component_name",
+  "componentName",
+  "component_id",
+  "componentId",
+  "package",
+  "module",
+  "service",
+  "collection",
+  "file",
+  "path",
+];
+
+const FALLBACK_LAYER = {
+  id: "unassigned",
+  label: "Unassigned",
+  color: "#94a3b8",
+};
+
+const SAFE_COLOR_PATTERN =
+  /^(#[0-9a-f]{3,8}|rgba?\([\d\s.,%+-]+\)|hsla?\([\d\s.,%+-]+\)|oklch\([\d\s.%+-]+(?:\/\s*[\d.]+%?)?\))$/i;
+
+function safeColor(value: string): string {
+  const trimmed = value.trim();
+  return SAFE_COLOR_PATTERN.test(trimmed) ? trimmed : FALLBACK_LAYER.color;
+}
+
+function firstPresentString(
+  data: Record<string, unknown>,
+  fields: string[]
+): string | null {
+  for (const field of fields) {
+    const value = data[field];
+    if (value === null || value === undefined || value === "") continue;
+    if (typeof value === "string" || typeof value === "number")
+      return String(value);
+  }
+  return null;
+}
+
+function stableId(prefix: string, value: string): string {
+  return `${prefix}:${value.toLowerCase().replace(/[^a-z0-9._:/-]+/g, "-")}`;
+}
+
+function communityMap(
+  model: GraphModel
+): Map<number, { label: string; color: string }> {
+  return new Map(
+    model.communities.map((community) => [
+      community.id,
+      { label: community.label, color: safeColor(community.color) },
+    ])
+  );
+}
+
+function layerIdentity(
+  node: LoadedGraphNode,
+  communities: Map<number, { label: string; color: string }>
+): { id: string; label: string; color: string } {
+  const explicitLayer = firstPresentString(node.data, LAYER_FIELDS);
+  if (explicitLayer) {
+    return {
+      id: stableId("layer", explicitLayer),
+      label: explicitLayer,
+      color: "#94a3b8",
+    };
+  }
+
+  if (typeof node.community === "number") {
+    const community = communities.get(node.community);
+    return {
+      id: `community:${node.community}`,
+      label: community?.label ?? `Community ${node.community}`,
+      color: community?.color ?? "#94a3b8",
+    };
+  }
+
+  const explicitCommunity = firstPresentString(node.data, COMMUNITY_FIELDS);
+  if (explicitCommunity) {
+    return {
+      id: stableId("community", explicitCommunity),
+      label: explicitCommunity,
+      color: "#94a3b8",
+    };
+  }
+
+  return FALLBACK_LAYER;
+}
+
+function componentIdentity(node: LoadedGraphNode): {
+  id: string;
+  label: string;
+} {
+  const explicit = firstPresentString(node.data, COMPONENT_FIELDS);
+  if (explicit) return { id: stableId("component", explicit), label: explicit };
+
+  const type =
+    node.type ?? firstPresentString(node.data, ["node_type", "kind"]);
+  if (type) return { id: stableId("type", type), label: `${type} nodes` };
+
+  return { id: "component:unassigned", label: "Unassigned" };
+}
+
+function connectionStats(ids: Set<string>, edges: LoadedGraphEdge[]) {
+  let connectionCount = 0;
+  let internalConnectionCount = 0;
+  let externalConnectionCount = 0;
+
+  for (const edge of edges) {
+    const hasSource = ids.has(edge.source);
+    const hasTarget = ids.has(edge.target);
+    if (!hasSource && !hasTarget) continue;
+
+    connectionCount += 1;
+    if (hasSource && hasTarget) internalConnectionCount += 1;
+    else externalConnectionCount += 1;
+  }
+
+  return { connectionCount, internalConnectionCount, externalConnectionCount };
+}
+
+function nodeSummary(
+  node: LoadedGraphNode,
+  edges: LoadedGraphEdge[]
+): DrilldownNodeSummary {
+  let incoming = 0;
+  let outgoing = 0;
+  for (const edge of edges) {
+    if (edge.source === node.id) outgoing += 1;
+    if (edge.target === node.id) incoming += 1;
+  }
+
+  return {
+    id: node.id,
+    label: node.label,
+    type:
+      node.type ??
+      firstPresentString(node.data, ["node_type", "kind"]) ??
+      "node",
+    degree: incoming + outgoing,
+    incoming,
+    outgoing,
+  };
+}
+
+function byLargestThenLabel<
+  T extends {
+    nodeCount: number;
+    connectionCount: number;
+    label: string;
+    id: string;
+  },
+>(a: T, b: T): number {
+  const nodes = b.nodeCount - a.nodeCount;
+  if (nodes !== 0) return nodes;
+  const connections = b.connectionCount - a.connectionCount;
+  if (connections !== 0) return connections;
+  const label = a.label.localeCompare(b.label);
+  if (label !== 0) return label;
+  return a.id.localeCompare(b.id);
+}
+
+export function buildGraphDrilldown(model: GraphModel): GraphDrilldown {
+  const communities = communityMap(model);
+  const layerBuckets = new Map<
+    string,
+    { id: string; label: string; color: string; nodes: LoadedGraphNode[] }
+  >();
+
+  for (const node of model.nodes) {
+    const layer = layerIdentity(node, communities);
+    const bucket = layerBuckets.get(layer.id);
+    if (bucket) bucket.nodes.push(node);
+    else layerBuckets.set(layer.id, { ...layer, nodes: [node] });
+  }
+
+  const layers = [...layerBuckets.values()].map((layer): DrilldownLayer => {
+    const nodeIds = layer.nodes.map((node) => node.id);
+    const idSet = new Set(nodeIds);
+    const stats = connectionStats(idSet, model.edges);
+    const componentBuckets = new Map<
+      string,
+      { id: string; label: string; nodes: LoadedGraphNode[] }
+    >();
+
+    for (const node of layer.nodes) {
+      const component = componentIdentity(node);
+      const bucket = componentBuckets.get(component.id);
+      if (bucket) bucket.nodes.push(node);
+      else componentBuckets.set(component.id, { ...component, nodes: [node] });
+    }
+
+    const components = [...componentBuckets.values()]
+      .map((component): DrilldownComponent => {
+        const componentNodeIds = component.nodes.map((node) => node.id);
+        const componentStats = connectionStats(
+          new Set(componentNodeIds),
+          model.edges
+        );
+        return {
+          id: component.id,
+          label: component.label,
+          nodeCount: component.nodes.length,
+          nodeIds: componentNodeIds,
+          nodes: component.nodes
+            .map((node) => nodeSummary(node, model.edges))
+            .sort(
+              (a, b) => b.degree - a.degree || a.label.localeCompare(b.label)
+            ),
+          ...componentStats,
+        };
+      })
+      .sort(byLargestThenLabel);
+
+    return {
+      id: layer.id,
+      label: layer.label,
+      color: layer.color,
+      nodeCount: layer.nodes.length,
+      componentCount: components.length,
+      nodeIds,
+      components,
+      ...stats,
+    };
+  });
+
+  return { layers: layers.sort(byLargestThenLabel) };
+}
+
+export function graphResultForNodeIds(
+  model: GraphModel,
+  nodeIds: Iterable<string> | null
+): QueryResult {
+  const selectedIds = nodeIds === null ? null : new Set(nodeIds);
+  const nodes = selectedIds
+    ? model.nodes.filter((node) => selectedIds.has(node.id))
+    : model.nodes;
+  const visibleIds = new Set(nodes.map((node) => node.id));
+  const edges = model.edges.filter(
+    (edge) => visibleIds.has(edge.source) && visibleIds.has(edge.target)
+  );
+
+  const nodeMap: Record<string, Record<string, unknown>> = {};
+  for (const node of nodes) {
+    nodeMap[node.id] = {
+      ...node.data,
+      id: node.id,
+      label: node.label,
+      ...(node.type !== undefined ? { node_type: node.type } : {}),
+    };
+  }
+
+  const edgeMap: Record<string, Record<string, unknown>> = {};
+  for (const edge of edges) {
+    edgeMap[edge.id] = {
+      ...edge.data,
+      source: edge.source,
+      target: edge.target,
+      ...(edge.type !== undefined ? { type: edge.type } : {}),
+    };
+  }
+
+  return {
+    ok: true,
+    query: "",
+    capability: "graph",
+    record_count: nodes.length + edges.length,
+    result: {
+      columns: ["nodes", "edges"],
+      records: [{ values: {}, nodes: nodeMap, edges: edgeMap }],
+    },
+  } as QueryResult;
+}

package/src/lib/graph-loader/index.ts

@@ -0,0 +1,13 @@
+export {
+  parseGraphExport,
+  parseGraphExportJson,
+  loadGraphExport,
+  GraphContractError,
+  SUPPORTED_GRAPH_VERSION_MAJOR,
+} from './contract'
+export type {
+  LoadedGraph,
+  LoadedGraphNode,
+  LoadedGraphEdge,
+  LoadedGraphCommunity,
+} from './contract'

package/src/lib/index.ts

@@ -0,0 +1,114 @@
+export { RED_UI_VERSION, readBuildInfo, type BuildInfo } from "./build-info";
+export { default as ActivityIndicator } from "./ActivityIndicator.svelte";
+export { default as ClusterNode } from "./ClusterNode.svelte";
+export { default as ClusterView } from "./ClusterView.svelte";
+export { default as CollectionsView } from "./CollectionsView.svelte";
+export { default as CollectionHistory } from "./CollectionHistory.svelte";
+export { default as CommandPalette } from "./CommandPalette.svelte";
+export { default as ConnectDropdown } from "./ConnectDropdown.svelte";
+export { default as EmptyState } from "./EmptyState.svelte";
+export { default as LiveChanges } from "./LiveChanges.svelte";
+export { default as MasterPasswordDialog } from "./MasterPasswordDialog.svelte";
+export { default as PageHeader } from "./PageHeader.svelte";
+export { default as PendingChangesPanel } from "./PendingChangesPanel.svelte";
+export { default as QueryEditor } from "./QueryEditor.svelte";
+export { default as ResultsPane } from "./ResultsPane.svelte";
+export { default as SchemaTree } from "./SchemaTree.svelte";
+export { default as SecurityView } from "./SecurityView.svelte";
+export { default as ShortcutOverlay } from "./ShortcutOverlay.svelte";
+export { default as Splash } from "./Splash.svelte";
+export { default as StatusBar } from "./StatusBar.svelte";
+export { default as SubNav } from "./SubNav.svelte";
+export { default as Topbar } from "./Topbar.svelte";
+export { default as Workspace } from "./Workspace.svelte";
+
+export * from "./renderers";
+export {
+  capabilityFromCatalogModel,
+  detectCapability,
+  pickCapability,
+  tagsFromCollectionMetadata,
+} from "./capability";
+export type { Capability as CollectionCapability } from "./capability";
+export * from "./collection-catalog";
+export * from "./collection-pages";
+export * from "./router.svelte";
+export * from "./cn";
+export * from "./connections.svelte";
+export * from "./shortcuts";
+export * from "./tabs.svelte";
+export * from "./query-tabs.svelte";
+export * from "@reddb-io/ui-kit";
+export {
+  BROWSER_TRANSPORTS,
+  CDCStreamClient,
+  DESKTOP_TRANSPORTS,
+  DEFAULT_PERSISTED_CONNECTION_KEY,
+  EMPTY_SERVER_CAPABILITIES,
+  InjectedClientProvider,
+  LocalUrlProvider,
+  NotConnectedError,
+  OpenContractError,
+  capabilitiesFromSignal,
+  encodeOpenContract,
+  hasBootEndpoint,
+  hasBootRoute,
+  isUrlReachable,
+  parseOpenContract,
+  parseBootParams,
+  readInjectedGlobalBootstrap,
+  readPersistedLocalBootstrap,
+  readTauriIpcBootstrap,
+  readUrlOpenContractBootstrap,
+  resolveConnectionBootstrap,
+  transportForUrl,
+  RedClient,
+  SecureStoreError,
+  TauriEncryptedStore,
+  UnknownConnectionError,
+  UnreachableConnectionError,
+  WebEncryptedStore,
+  localStorageHistory,
+  parseRedUri,
+} from "#reddb";
+export type {
+  ActiveConnection,
+  AuthPolicy,
+  AuthTenant,
+  AuthUser,
+  BootParams,
+  CDCStreamClientOptions,
+  ChangeEvent,
+  ClusterStatus,
+  CollectionMetadata,
+  Connection,
+  ConnectionBootstrap,
+  ConnectionBootstrapPayload,
+  ConnectionBootstrapResolverOptions,
+  ConnectionProvider,
+  ConnectionRole,
+  ConnectionTarget,
+  EncryptedStore,
+  EventSourceLike,
+  Identity,
+  InjectedClientOptions,
+  NodeRole,
+  NodeStats,
+  OpenContract,
+  OpenContractErrorCode,
+  QueryResult,
+  QueryRow,
+  RawCapabilities,
+  RedClientOptions,
+  ReplicationStatus,
+  ServerCapabilities,
+  SseFactory,
+  Stats,
+  SubscribeOpts,
+  Subscription,
+  Topology,
+  Transport,
+  VcsCommit,
+  VcsDiff,
+  VcsEnvelope,
+} from "#reddb";

package/src/lib/pending-changes.svelte.ts

@@ -0,0 +1,149 @@
+// PendingChangesPanel — TablePlus-style batch staging for cell edits.
+//
+// Deep module: staging, preview SQL, and transactional commit live here.
+// The Svelte component layer reads `changes`/`count` reactively and calls
+// `stage`/`unstage`/`commitAll`/`discardAll`. SQL generation is naive on
+// purpose — it assumes reddb's physical `rid` is the row identifier, which
+// matches how the TableRenderer passes `row` in from the dataset index.
+
+export interface StagedChange {
+  id: string
+  table: string
+  row: number
+  col: string
+  oldValue: unknown
+  newValue: string
+  error?: string
+}
+
+export interface CommitOutcome {
+  id: string
+  ok: boolean
+  error?: string
+}
+
+export type CommitExecutor = (changes: StagedChange[]) => Promise<CommitOutcome[]>
+
+function quote(v: string): string {
+  return `'${v.replace(/'/g, "''")}'`
+}
+
+function uid(): string {
+  return Math.random().toString(36).slice(2, 10)
+}
+
+export function buildUpdateSql(change: StagedChange): string {
+  return `UPDATE ${change.table} SET ${change.col} = ${quote(change.newValue)} WHERE rid = ${change.row};`
+}
+
+class PendingChangesStore {
+  changes = $state<StagedChange[]>([])
+  // Reactive count derived from the staged list.
+  count = $derived(this.changes.length)
+
+  private executor: CommitExecutor | null = null
+
+  /** Inject the commit backend. Pass null to detach (e.g. on disconnect). */
+  setExecutor(fn: CommitExecutor | null): void {
+    this.executor = fn
+  }
+
+  /**
+   * Stage a cell change. If a stage already exists for the same
+   * (table, row, col) it is replaced in place (preserving its id and
+   * position), so re-editing the same cell never produces duplicates.
+   */
+  stage(table: string, row: number, col: string, oldValue: unknown, newValue: string): string {
+    const idx = this.changes.findIndex(
+      (c) => c.table === table && c.row === row && c.col === col,
+    )
+    if (idx >= 0) {
+      const existing = this.changes[idx]
+      const updated: StagedChange = {
+        ...existing,
+        oldValue: existing.oldValue,
+        newValue,
+        error: undefined,
+      }
+      const next = this.changes.slice()
+      next[idx] = updated
+      this.changes = next
+      return existing.id
+    }
+    const id = uid()
+    this.changes = [
+      ...this.changes,
+      { id, table, row, col, oldValue, newValue },
+    ]
+    return id
+  }
+
+  unstage(id: string): void {
+    this.changes = this.changes.filter((c) => c.id !== id)
+  }
+
+  /** Look up an existing staged change for a given cell. */
+  find(table: string, row: number, col: string): StagedChange | undefined {
+    return this.changes.find(
+      (c) => c.table === table && c.row === row && c.col === col,
+    )
+  }
+
+  /** SQL preview — one statement per staged change, in insertion order. */
+  previewSql(): string[] {
+    return this.changes.map(buildUpdateSql)
+  }
+
+  /**
+   * Apply every staged change via the configured executor. Successful
+   * changes are removed from the queue; failures stay staged with their
+   * error attached, so the user can retry or unstage them individually.
+   */
+  async commitAll(): Promise<{ applied: number; failed: StagedChange[] }> {
+    if (this.changes.length === 0) return { applied: 0, failed: [] }
+    if (!this.executor) throw new Error('PendingChanges: no commit executor configured')
+
+    const snapshot = this.changes.slice()
+    const outcomes = await this.executor(snapshot)
+    const outcomeById = new Map(outcomes.map((o) => [o.id, o]))
+
+    const failed: StagedChange[] = []
+    let applied = 0
+    for (const change of snapshot) {
+      const outcome = outcomeById.get(change.id)
+      if (outcome?.ok) {
+        applied += 1
+      } else {
+        failed.push({ ...change, error: outcome?.error ?? 'commit failed' })
+      }
+    }
+
+    // Replace the queue: drop committed changes, keep the failures (with
+    // any concurrent stages that landed during commitAll preserved).
+    const survivorIds = new Set(failed.map((c) => c.id))
+    const concurrent = this.changes.filter(
+      (c) => !snapshot.some((s) => s.id === c.id),
+    )
+    const failedById = new Map(failed.map((c) => [c.id, c]))
+    this.changes = [
+      ...this.changes
+        .filter((c) => survivorIds.has(c.id))
+        .map((c) => failedById.get(c.id) ?? c),
+      ...concurrent,
+    ]
+
+    return { applied, failed }
+  }
+
+  discardAll(): void {
+    this.changes = []
+  }
+
+  /** Test helper — reset everything between cases. */
+  clear(): void {
+    this.changes = []
+  }
+}
+
+export const pendingChanges = new PendingChangesStore()
+export type PendingChangesPanel = PendingChangesStore