@reddb-io/ui 0.1.1

package/src/lib/build-info.ts

@@ -0,0 +1,41 @@
+// Single source of truth for "what version am I" across the Web/PWA, the
+// Embeddable Lib, and the Tauri desktop webview (which all run this same
+// bundle). Mirrors ../red-skills/src/packages/build-info: the version is
+// injected at build time by Vite `define` (see vite.config.ts /
+// vite.embed.config.ts) from `packages/ui/package.json` — overridable by the
+// `RED_BUILD_VERSION` env the release CI sets from the git tag. Falls back to
+// `0.0.0-dev` for an un-stamped local dev build.
+
+declare const __RED_UI_VERSION__: string | undefined;
+declare const __RED_UI_GIT_SHA__: string | undefined;
+declare const __RED_UI_BUILD_TIME__: string | undefined;
+
+export interface BuildInfo {
+  version: string;
+  gitSha: string;
+  buildTime: string;
+}
+
+function injected(read: () => string | undefined): string | undefined {
+  try {
+    const v = read();
+    return typeof v === "string" && v.length > 0 ? v : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+function stripTagPrefix(v: string): string {
+  return v.startsWith("v") ? v.slice(1) : v;
+}
+
+export function readBuildInfo(): BuildInfo {
+  return {
+    version: stripTagPrefix(injected(() => __RED_UI_VERSION__) ?? "0.0.0-dev"),
+    gitSha: injected(() => __RED_UI_GIT_SHA__) ?? "unknown",
+    buildTime: injected(() => __RED_UI_BUILD_TIME__) ?? "unknown",
+  };
+}
+
+/** The resolved app version, e.g. `0.1.1` (or `0.0.0-dev` un-stamped). */
+export const RED_UI_VERSION: string = readBuildInfo().version;

package/src/lib/capability.ts

@@ -0,0 +1,221 @@
+// Per-collection capability detection.
+//
+// Prefer metadata from `GET /collections/<name>` when reddb exposes it.
+// Fallback: run `SELECT * FROM <name> LIMIT 1` and inspect either the
+// QueryResult.capability field or `red_capabilities` on the first row.
+// Default to `table` when the collection is empty or detection fails — this
+// is the honest baseline, since every collection is at least table-shaped.
+
+import type { CollectionMetadata, RedClient } from '#reddb'
+import type { QueryResult } from '#reddb'
+
+export type Capability =
+  | 'table'
+  | 'graph'
+  | 'hypertable'
+  | 'kv'
+  | 'vector'
+  | 'queue'
+  | 'stats'
+  | 'diff'
+  | 'document'
+
+// Priority order: more specific capabilities win over generic ones. A row
+// tagged ["document","structured","table"] should surface as `document`, not
+// `table`, because `table` is the universal fallback.
+const PRIORITY: Capability[] = [
+  'vector',
+  'queue',
+  'stats',
+  'diff',
+  'hypertable',
+  'graph',
+  'kv',
+  'document',
+  'table',
+]
+
+const ALIASES: Record<string, Capability> = {
+  table: 'table',
+  structured: 'table',
+  graph: 'graph',
+  node: 'graph',
+  edge: 'graph',
+  hypertable: 'hypertable',
+  timeseries: 'hypertable',
+  'time-series': 'hypertable',
+  kv: 'kv',
+  'key-value': 'kv',
+  vector: 'vector',
+  embedding: 'vector',
+  queue: 'queue',
+  stream: 'queue',
+  message: 'queue',
+  stats: 'stats',
+  statistic: 'stats',
+  statistics: 'stats',
+  metric: 'stats',
+  metrics: 'stats',
+  document: 'document',
+  doc: 'document',
+  time_series: 'hypertable',
+  key_value: 'kv',
+  mixed: 'table',
+  hll: 'stats',
+  sketch: 'stats',
+  filter: 'stats',
+  cuckoo_filter: 'stats',
+  diff: 'diff',
+  vcs_diff: 'diff',
+}
+
+function sqlString(s: string): string {
+  return `'${s.replace(/'/g, "''")}'`
+}
+
+export function pickCapability(tags: ReadonlyArray<string>): Capability {
+  if (!tags || tags.length === 0) return 'table'
+  const mapped = new Set<Capability>()
+  for (const raw of tags) {
+    const t = String(raw).toLowerCase()
+    const cap = ALIASES[t]
+    if (cap) mapped.add(cap)
+  }
+  for (const cap of PRIORITY) {
+    if (mapped.has(cap)) return cap
+  }
+  return 'table'
+}
+
+export function tagsFromCollectionMetadata(meta: CollectionMetadata): string[] {
+  const tags: string[] = []
+  if (meta.kind) tags.push(meta.kind)
+  if (meta.capability) tags.push(meta.capability)
+  if (Array.isArray(meta.capabilities)) {
+    for (const tag of meta.capabilities) if (typeof tag === 'string') tags.push(tag)
+  }
+  const schemaKind = meta.schema?.['kind']
+  if (typeof schemaKind === 'string') tags.push(schemaKind)
+  const schemaCapability = meta.schema?.['capability']
+  if (typeof schemaCapability === 'string') tags.push(schemaCapability)
+  return tags
+}
+
+export function capabilityFromCatalogModel(model: unknown): Capability | null {
+  if (typeof model !== 'string') return null
+  return ALIASES[model.toLowerCase()] ?? null
+}
+
+async function detectProbabilisticCapability(client: RedClient, collection: string): Promise<Capability | null> {
+  const safe = collection.replace(/[^A-Za-z0-9_./-]/g, '')
+  for (const query of [`HLL INFO ${safe}`, `SKETCH INFO ${safe}`, `FILTER INFO ${safe}`]) {
+    try {
+      const r = await client.query(query)
+      if (r.ok) return 'stats'
+    } catch {
+      // Try the next probabilistic read form. RedDB may report FILTER as
+      // model=mixed in red.collections, so SELECT probing is not enough.
+    }
+  }
+  return null
+}
+
+function columnsFromResult(r: QueryResult): string[] {
+  const cols = new Set((r.result?.columns ?? []).map((c) => c.toLowerCase()))
+  const first = r.result?.records?.[0]?.values
+  if (first) {
+    for (const key of Object.keys(first)) cols.add(key.toLowerCase())
+  }
+  return [...cols]
+}
+
+function inferCapabilityFromShape(r: QueryResult): Capability | null {
+  const cols = columnsFromResult(r)
+  const has = (name: string) => cols.includes(name)
+  const hasAny = (names: string[]) => names.some(has)
+  const first = r.result?.records?.[0]?.values
+  const kind = first?.kind ?? first?.red_kind ?? first?.red_entity_type
+
+  if (kind === 'node' || kind === 'edge' || kind === 'graph') return 'graph'
+  if (kind === 'document') return 'document'
+  if (kind === 'kv' || (has('key') && has('value'))) return 'kv'
+  if (hasAny(['message', 'payload', 'body']) && hasAny(['message_id', 'state', 'status', 'consumer', 'delivery_state'])) return 'queue'
+  if (hasAny(['timestamp', 'time', 'ts', 'event_time', 'bucket']) && hasAny(['value', 'count', 'metric'])) return 'hypertable'
+  if (hasAny(['metric', 'stat', 'name', 'table']) && hasAny(['value', 'count', 'total', 'avg', 'rate', 'row_count', 'page_count', 'cardinality', 'memory_bytes'])) return 'stats'
+  return null
+}
+
+export async function detectCapability(
+  client: RedClient,
+  collection: string,
+  opts: { useMetadata?: boolean } = {},
+): Promise<Capability> {
+  if (opts.useMetadata) {
+    try {
+      const meta = await client.collection(collection)
+      const tags = tagsFromCollectionMetadata(meta)
+      if (tags.length > 0) return pickCapability(tags)
+    } catch {
+      // Metadata is optional for older reddb builds; fall through to row probing.
+    }
+  }
+
+  try {
+    const r = await client.query(`SELECT model FROM red.collections WHERE name = ${sqlString(collection)} LIMIT 1`)
+    const model = r.result?.records?.[0]?.values?.model
+    const cap = capabilityFromCatalogModel(model)
+    if (cap && cap !== 'table') return cap
+    if (typeof model === 'string' && model.toLowerCase() === 'mixed') {
+      const probabilistic = await detectProbabilisticCapability(client, collection)
+      if (probabilistic) return probabilistic
+    }
+  } catch {
+    // Older servers may not expose red.collections; row probing still works.
+  }
+
+  try {
+    const safe = collection.replace(/[^A-Za-z0-9_./-]/g, '')
+    const r = await client.query(`SELECT * FROM ${safe} LIMIT 1`)
+    const tags: string[] = []
+    if (r.capability) tags.push(r.capability)
+    const first = r.result?.records?.[0]?.values
+    const rc = first ? (first['red_capabilities'] as unknown) : undefined
+    if (Array.isArray(rc)) {
+      for (const t of rc) if (typeof t === 'string') tags.push(t)
+    } else if (typeof rc === 'string') {
+      // reddb stamps comma-separated capabilities ("graph,graph_node");
+      // split so each individual tag has a chance to match an alias.
+      for (const t of rc.split(/[,\s]+/)) if (t) tags.push(t)
+    }
+    const tagged = pickCapability(tags)
+    if (tagged !== 'table') return tagged
+    return inferCapabilityFromShape(r) ?? 'table'
+  } catch {
+    return await detectProbabilisticCapability(client, collection) ?? 'table'
+  }
+}
+
+export interface CapabilityGlyph {
+  glyph: string
+  label: string
+}
+
+// Unicode glyphs chosen to read clearly on both light and dark surfaces
+// at 12–14px monospace. Geometric shapes only — no emoji (color-inconsistent).
+export const CAPABILITY_GLYPHS: Record<Capability, CapabilityGlyph> = {
+  table:      { glyph: '▦', label: 'Table' },
+  graph:      { glyph: '◇', label: 'Graph' },
+  hypertable: { glyph: '⊞', label: 'Hypertable' },
+  kv:         { glyph: '⋮', label: 'Key-value' },
+  vector:     { glyph: '→', label: 'Vector' },
+  queue:      { glyph: '≡', label: 'Queue' },
+  stats:      { glyph: '◔', label: 'Stats' },
+  diff:       { glyph: '⇄', label: 'Diff' },
+  document:   { glyph: '¶', label: 'Document' },
+}
+
+const INTERNAL_PREFIX = /^red[._]/i
+
+export function isInternalCollection(name: string): boolean {
+  return INTERNAL_PREFIX.test(name)
+}

package/src/lib/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs))
+}

package/src/lib/collection-catalog.ts

@@ -0,0 +1,116 @@
+import type { QueryRow } from '#reddb'
+
+export interface CollectionCatalogMetadata {
+  name: string
+  model?: string
+  schemaMode?: string
+  entities?: number
+  segments?: number
+  indices?: number
+  inMemoryBytes?: number
+  onDiskBytes?: number
+  internal?: boolean
+  tenantId?: string
+  queueMode?: string
+  dimension?: number
+  metric?: string
+  sessionKey?: string
+  sessionGapMs?: number
+}
+
+export function sqlString(s: string): string {
+  return `'${s.replace(/'/g, "''")}'`
+}
+
+export function collectionCatalogQuery(collection: string): string {
+  return [
+    'SELECT name, model, schema_mode, entities, segments, indices,',
+    'in_memory_bytes, on_disk_bytes, internal, tenant_id, queue_mode,',
+    'dimension, metric, session_key, session_gap_ms',
+    'FROM red.collections',
+    `WHERE name = ${sqlString(collection)}`,
+    'LIMIT 1',
+  ].join(' ')
+}
+
+function asString(v: unknown): string | undefined {
+  return typeof v === 'string' && v.length > 0 ? v : undefined
+}
+
+function asNumber(v: unknown): number | undefined {
+  if (typeof v === 'number' && Number.isFinite(v)) return v
+  if (typeof v === 'string' && v.trim() !== '') {
+    const n = Number(v)
+    if (Number.isFinite(n)) return n
+  }
+  return undefined
+}
+
+function asBoolean(v: unknown): boolean | undefined {
+  if (typeof v === 'boolean') return v
+  if (typeof v === 'string') {
+    if (v.toLowerCase() === 'true') return true
+    if (v.toLowerCase() === 'false') return false
+  }
+  return undefined
+}
+
+export function collectionCatalogFromRow(row: QueryRow | undefined): CollectionCatalogMetadata | null {
+  if (!row) return null
+  const v = row.values
+  const name = asString(v.name)
+  if (!name) return null
+  return {
+    name,
+    model: asString(v.model),
+    schemaMode: asString(v.schema_mode),
+    entities: asNumber(v.entities),
+    segments: asNumber(v.segments),
+    indices: asNumber(v.indices),
+    inMemoryBytes: asNumber(v.in_memory_bytes),
+    onDiskBytes: asNumber(v.on_disk_bytes),
+    internal: asBoolean(v.internal),
+    tenantId: asString(v.tenant_id),
+    queueMode: asString(v.queue_mode),
+    dimension: asNumber(v.dimension),
+    metric: asString(v.metric),
+    sessionKey: asString(v.session_key),
+    sessionGapMs: asNumber(v.session_gap_ms),
+  }
+}
+
+export function formatCount(value: number | undefined): string {
+  if (value === undefined) return 'n/a'
+  return new Intl.NumberFormat('en-US').format(value)
+}
+
+export function formatBytes(value: number | undefined): string {
+  if (value === undefined) return 'n/a'
+  if (value === 0) return '0 B'
+  const units = ['B', 'KiB', 'MiB', 'GiB', 'TiB']
+  const exponent = Math.min(Math.floor(Math.log(value) / Math.log(1024)), units.length - 1)
+  const amount = value / 1024 ** exponent
+  const digits = amount >= 100 || exponent === 0 ? 0 : 1
+  return `${amount.toFixed(digits)} ${units[exponent]}`
+}
+
+export function formatDurationMs(value: number | undefined): string | null {
+  if (value === undefined) return null
+  if (value < 1000) return `${value} ms`
+  if (value < 60_000) return `${(value / 1000).toFixed(value >= 10_000 ? 0 : 1)} s`
+  if (value < 3_600_000) return `${(value / 60_000).toFixed(value >= 600_000 ? 0 : 1)} min`
+  return `${(value / 3_600_000).toFixed(value >= 36_000_000 ? 0 : 1)} h`
+}
+
+export function collectionCatalogBadges(meta: CollectionCatalogMetadata): string[] {
+  const badges: string[] = []
+  if (meta.schemaMode) badges.push(meta.schemaMode)
+  if (meta.dimension !== undefined) badges.push(`${formatCount(meta.dimension)}d`)
+  if (meta.metric) badges.push(meta.metric)
+  if (meta.queueMode) badges.push(meta.queueMode)
+  if (meta.sessionKey) badges.push(`session: ${meta.sessionKey}`)
+  const gap = formatDurationMs(meta.sessionGapMs)
+  if (gap) badges.push(`gap ${gap}`)
+  if (meta.internal) badges.push('internal')
+  return badges
+}

package/src/lib/collection-pages.ts

@@ -0,0 +1,33 @@
+import type { Capability } from './renderers'
+
+export function defaultSubpage(capability: Capability | undefined): string {
+  if (!capability) return 'table'
+  if (capability === 'graph') return 'graph'
+  return capability
+}
+
+export function subpageCapability(subpage: string | undefined, fallback: Capability | undefined): Capability | undefined {
+  switch (subpage) {
+    case 'graph':
+    case 'svg':
+      return 'graph'
+    case 'table':
+      return 'table'
+    case 'json':
+      return 'json'
+    case 'hypertable':
+    case 'kv':
+    case 'vector':
+    case 'queue':
+    case 'stats':
+    case 'diff':
+    case 'document':
+      return subpage
+    default:
+      return fallback
+  }
+}
+
+export function collectionPageHref(collection: string, subpage: string): string {
+  return `/c/${encodeURIComponent(collection)}/p/${encodeURIComponent(subpage)}`
+}