Skip to content

feat(ui): dedupe ui-core components#128

Merged
Vunovati merged 2 commits into
mainfrom
fix/dedupe-ui-core
May 7, 2026
Merged

feat(ui): dedupe ui-core components#128
Vunovati merged 2 commits into
mainfrom
fix/dedupe-ui-core

Conversation

@Vunovati
Copy link
Copy Markdown
Collaborator

@Vunovati Vunovati commented Apr 20, 2026

Summary by CodeRabbit

  • Refactor
    • Consolidated UI internals into a shared core package: @kopai/ui now re-exports DOM-free runtime utilities, catalogs, and hooks from @kopai/ui-core.
    • Local implementations were replaced by core exports; exported APIs and runtime behavior remain unchanged for consumers.

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Apr 20, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 74ce05e5-a380-4d65-8347-2927865f0b23

📥 Commits

Reviewing files that changed from the base of the PR and between 6e77085 and b6e71f4.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (6)
  • .changeset/ui-core-dedup.md
  • packages/ui/package.json
  • packages/ui/src/components/observability/DynamicDashboard/index.tsx
  • packages/ui/src/components/observability/renderers/OtelMetricTimeSeries.tsx
  • packages/ui/src/components/observability/renderers/OtelTraceDetail.tsx
  • packages/ui/src/pages/observability.tsx
✅ Files skipped from review due to trivial changes (6)
  • packages/ui/package.json
  • packages/ui/src/components/observability/renderers/OtelMetricTimeSeries.tsx
  • packages/ui/src/components/observability/renderers/OtelTraceDetail.tsx
  • packages/ui/src/components/observability/DynamicDashboard/index.tsx
  • .changeset/ui-core-dedup.md
  • packages/ui/src/pages/observability.tsx

📝 Walkthrough

Walkthrough

Consolidates DOM-free UI infrastructure into @kopai/ui-core and updates @kopai/ui to re-export those symbols. Local implementations and tests for catalog, renderer, provider, hooks, LogBuffer, and related utilities were removed; many UI components now import runtime values and types from @kopai/ui-core. A Changeset was added documenting the version/exports change.

Changes

Core Library Consolidation

Layer / File(s) Summary
Public exports / Data shape
packages/ui-core/src/index.ts
Adds CatalogueComponentProps export to ui-core's public barrel.
Core implementation removal
packages/ui/src/lib/component-catalog.ts, packages/ui/src/lib/renderer.tsx, packages/ui/src/lib/observability-catalog.ts, packages/ui/src/lib/generate-prompt-instructions.ts, packages/ui/src/lib/log-buffer.ts
Deleted local implementations of component catalog, renderer, observability catalog, prompt generator, and LogBuffer (moved to ui-core).
Providers & hooks removal
packages/ui/src/providers/kopai-provider.tsx, packages/ui/src/hooks/use-kopai-data.ts, packages/ui/src/hooks/use-live-logs.ts
Deleted local Kopai provider, shared queryClient, useKopaiData, and useLiveLogs implementations (now provided from ui-core).
Package wiring / re-exports
packages/ui/src/index.ts, packages/ui/package.json
packages/ui now depends on @kopai/ui-core (workspace:*) and re-exports catalog/renderer/provider/hooks/types/runtime symbols from @kopai/ui-core instead of local modules. ObservabilityPage remains a DOM-only local re-export.
Component import updates
packages/ui/src/components/... (dashboard/, observability/, renderers/*, DynamicDashboard/index.tsx, pages/observability.tsx)
Updated many components and the Observability page to import observabilityCatalog, renderer utilities, hooks, and related types from @kopai/ui-core instead of relative local modules.
Tests removed / adjusted
packages/ui/src/**/*.test.tsx, packages/ui/src/lib/*.test.ts, packages/ui/src/hooks/*.test.ts
Multiple unit/integration tests and test helpers for renderer, catalog, hooks, LogBuffer, and generate-prompt-instructions were deleted; a few tests updated imports to use @kopai/ui-core (e.g., queryClient).
Changelog / Release metadata
.changeset/ui-core-dedup.md
New Changeset documenting minor bump for @kopai/ui and minor/patch for @kopai/ui-core and describing the internal re-export restructuring.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

  • kopai-app/kopai-mono#123 — Continues/overlaps work moving DOM-free implementations (catalog, renderer, provider, hooks, LogBuffer) into @kopai/ui-core and adjusting consumers.
  • kopai-app/kopai-mono#121 — Centralizes and re-exports catalog/renderer/provider symbols from @kopai/ui-core, affecting the same public surface.
  • kopai-app/kopai-mono#35 — Overlapping consolidation of ui-core symbols and import/export locations for observability/catalog/renderer APIs.

Poem

🐰 Hop-hop, I tidied the stacks with care,

Moved kernels to core and cleared duplicate ware.
One barrel to rule them, one import to find,
Fewer paths, one source — tidy and kind.
A carrot of exports for all to share.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'feat(ui): dedupe ui-core components' accurately describes the main change: deduplicating shared component logic and types by consolidating them in @kopai/ui-core and having @kopai/ui re-export them instead of maintaining duplicate copies.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/dedupe-ui-core

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (5)
packages/ui/src/components/observability/renderers/OtelMetricTimeSeries.tsx (1)

1-2: LGTM! Import consolidation is correct.

The final renderer component correctly updates its imports to @kopai/ui-core, completing the consistent refactoring pattern across all observability renderers.

Optional: Verify the complete build chain.

Since this PR refactors multiple import paths across the codebase, you may want to verify that the monorepo build order and resolution work correctly:

#!/bin/bash
# Verify that all imports resolve correctly after the refactoring

# Check that `@kopai/ui-core` builds successfully
cd packages/ui-core && pnpm build && cd ../..

# Check that `@kopai/ui` builds successfully with the new imports
cd packages/ui && pnpm build && cd ../..

# Run type checking to ensure all imports resolve
cd packages/ui && pnpm type-check
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/ui/src/components/observability/renderers/OtelMetricTimeSeries.tsx`
around lines 1 - 2, The imports in OtelMetricTimeSeries.tsx were updated to
`@kopai/ui-core` (observabilityCatalog and RendererComponentProps); run the
monorepo build and type-check to ensure import resolution and build order are
correct: build packages/ui-core then packages/ui and run type-check in
packages/ui, fix any broken exports or tsconfig paths if errors surface, and
ensure the component OtelMetricTimeSeries (and related observability renderers)
compiles against the new package surface.
packages/ui/src/components/observability/renderers/OtelTraceDetail.tsx (1)

3-8: Optional: consolidate @kopai/ui-core imports.

Lines 3, 4, and 8 all import from @kopai/ui-core but are split across an unrelated local import at lines 5–7. Merging them into a single import statement would be slightly tidier.

♻️ Proposed refactor
-import { observabilityCatalog } from "@kopai/ui-core";
-import type { RendererComponentProps } from "@kopai/ui-core";
+import { observabilityCatalog, useKopaiSDK } from "@kopai/ui-core";
+import type { RendererComponentProps } from "@kopai/ui-core";
 import { TraceDetail } from "../index.js";
 import { TraceSearch } from "../TraceSearch/index.js";
 import type { TraceSummary } from "../TraceSearch/index.js";
-import { useKopaiSDK } from "@kopai/ui-core";
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/ui/src/components/observability/renderers/OtelTraceDetail.tsx`
around lines 3 - 8, Consolidate the three separate imports from `@kopai/ui-core`
into a single import statement: replace the separate imports of
observabilityCatalog, RendererComponentProps, and useKopaiSDK with one grouped
import from "@kopai/ui-core" (while leaving local imports TraceDetail,
TraceSearch, and TraceSummary unchanged) so the file imports
observabilityCatalog, RendererComponentProps, and useKopaiSDK together to tidy
the module imports.
.changeset/ui-core-dedup.md (1)

1-6: Consider bumping @kopai/ui-core as minor rather than patch.

The changeset notes that @kopai/ui-core is adding CatalogueComponentProps to its public barrel. Under semver, adding a new public export is typically a minor bump (additive API change), not a patch. Patch is conventionally reserved for bug fixes / no public API surface changes.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In @.changeset/ui-core-dedup.md around lines 1 - 6, The changeset incorrectly
marks "@kopai/ui-core" as a patch even though it adds a new public export;
update the changeset header so "@kopai/ui-core" is bumped to minor (change the
value from patch to minor) and keep the descriptive note as-is; reference the
package name "@kopai/ui-core" and ensure the YAML header reflects the minor bump
for the added CatalogueComponentProps export.
packages/ui/src/components/observability/DynamicDashboard/index.tsx (1)

1-3: Consolidate the three @kopai/ui-core imports into one statement.

All three lines source from the same module; merging improves readability.

♻️ Proposed consolidation
-import { createRendererFromCatalog, type UITree } from "@kopai/ui-core";
-import { KopaiSDKProvider, type KopaiClient } from "@kopai/ui-core";
-import { observabilityCatalog } from "@kopai/ui-core";
+import {
+  createRendererFromCatalog,
+  KopaiSDKProvider,
+  observabilityCatalog,
+  type KopaiClient,
+  type UITree,
+} from "@kopai/ui-core";
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/ui/src/components/observability/DynamicDashboard/index.tsx` around
lines 1 - 3, Consolidate the three separate imports from "@kopai/ui-core" into a
single import statement: combine createRendererFromCatalog, UITree,
KopaiSDKProvider, KopaiClient, and observabilityCatalog into one import to
improve readability and reduce redundancy (referencing the symbols
createRendererFromCatalog, UITree, KopaiSDKProvider, KopaiClient, and
observabilityCatalog).
packages/ui/src/pages/observability.tsx (1)

9-16: Consolidate the @kopai/ui-core imports.

Five separate import statements target the same module. A single combined statement improves readability and matches typical module-import style.

♻️ Proposed consolidation
-import { KopaiSDKProvider, useKopaiSDK } from "@kopai/ui-core";
 import { useQuery } from "@tanstack/react-query";
 import { KopaiClient } from "@kopai/sdk";
-import { useKopaiData } from "@kopai/ui-core";
-import { useLiveLogs } from "@kopai/ui-core";
 import type { denormalizedSignals, dataFilterSchemas } from "@kopai/core";
-import type { DataSource } from "@kopai/ui-core";
-import { observabilityCatalog } from "@kopai/ui-core";
+import {
+  KopaiSDKProvider,
+  useKopaiSDK,
+  useKopaiData,
+  useLiveLogs,
+  observabilityCatalog,
+  type DataSource,
+} from "@kopai/ui-core";
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/ui/src/pages/observability.tsx` around lines 9 - 16, Multiple
imports from "@kopai/ui-core" should be consolidated into a single import
statement: combine KopaiSDKProvider, useKopaiSDK, useKopaiData, useLiveLogs,
DataSource, and observabilityCatalog into one import from "@kopai/ui-core"
(replace the separate import lines that reference useKopaiSDK, useKopaiData,
useLiveLogs, DataSource, and observabilityCatalog with a single grouped import
while keeping the existing KopaiSDKProvider import merged).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In @.changeset/ui-core-dedup.md:
- Around line 1-6: The changeset incorrectly marks "@kopai/ui-core" as a patch
even though it adds a new public export; update the changeset header so
"@kopai/ui-core" is bumped to minor (change the value from patch to minor) and
keep the descriptive note as-is; reference the package name "@kopai/ui-core" and
ensure the YAML header reflects the minor bump for the added
CatalogueComponentProps export.

In `@packages/ui/src/components/observability/DynamicDashboard/index.tsx`:
- Around line 1-3: Consolidate the three separate imports from "@kopai/ui-core"
into a single import statement: combine createRendererFromCatalog, UITree,
KopaiSDKProvider, KopaiClient, and observabilityCatalog into one import to
improve readability and reduce redundancy (referencing the symbols
createRendererFromCatalog, UITree, KopaiSDKProvider, KopaiClient, and
observabilityCatalog).

In `@packages/ui/src/components/observability/renderers/OtelMetricTimeSeries.tsx`:
- Around line 1-2: The imports in OtelMetricTimeSeries.tsx were updated to
`@kopai/ui-core` (observabilityCatalog and RendererComponentProps); run the
monorepo build and type-check to ensure import resolution and build order are
correct: build packages/ui-core then packages/ui and run type-check in
packages/ui, fix any broken exports or tsconfig paths if errors surface, and
ensure the component OtelMetricTimeSeries (and related observability renderers)
compiles against the new package surface.

In `@packages/ui/src/components/observability/renderers/OtelTraceDetail.tsx`:
- Around line 3-8: Consolidate the three separate imports from `@kopai/ui-core`
into a single import statement: replace the separate imports of
observabilityCatalog, RendererComponentProps, and useKopaiSDK with one grouped
import from "@kopai/ui-core" (while leaving local imports TraceDetail,
TraceSearch, and TraceSummary unchanged) so the file imports
observabilityCatalog, RendererComponentProps, and useKopaiSDK together to tidy
the module imports.

In `@packages/ui/src/pages/observability.tsx`:
- Around line 9-16: Multiple imports from "@kopai/ui-core" should be
consolidated into a single import statement: combine KopaiSDKProvider,
useKopaiSDK, useKopaiData, useLiveLogs, DataSource, and observabilityCatalog
into one import from "@kopai/ui-core" (replace the separate import lines that
reference useKopaiSDK, useKopaiData, useLiveLogs, DataSource, and
observabilityCatalog with a single grouped import while keeping the existing
KopaiSDKProvider import merged).

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 85a270ad-3310-434d-9c81-ba37ed09d849

📥 Commits

Reviewing files that changed from the base of the PR and between 3d870fe and 6e77085.

⛔ Files ignored due to path filters (2)
  • packages/ui/src/lib/__snapshots__/generate-prompt-instructions.test.ts.snap is excluded by !**/*.snap
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (38)
  • .changeset/ui-core-dedup.md
  • packages/ui-core/src/index.ts
  • packages/ui/package.json
  • packages/ui/src/components/dashboard/Badge/index.tsx
  • packages/ui/src/components/dashboard/Card/index.tsx
  • packages/ui/src/components/dashboard/Divider/index.tsx
  • packages/ui/src/components/dashboard/Empty/index.tsx
  • packages/ui/src/components/dashboard/Grid/index.tsx
  • packages/ui/src/components/dashboard/Heading/index.tsx
  • packages/ui/src/components/dashboard/Stack/index.tsx
  • packages/ui/src/components/dashboard/Text/index.tsx
  • packages/ui/src/components/observability/DynamicDashboard/DynamicDashboard.test.tsx
  • packages/ui/src/components/observability/DynamicDashboard/index.tsx
  • packages/ui/src/components/observability/TraceComparison/index.tsx
  • packages/ui/src/components/observability/renderers/OtelLogTimeline.tsx
  • packages/ui/src/components/observability/renderers/OtelMetricDiscovery.tsx
  • packages/ui/src/components/observability/renderers/OtelMetricHistogram.tsx
  • packages/ui/src/components/observability/renderers/OtelMetricStat.tsx
  • packages/ui/src/components/observability/renderers/OtelMetricTable.tsx
  • packages/ui/src/components/observability/renderers/OtelMetricTimeSeries.tsx
  • packages/ui/src/components/observability/renderers/OtelTraceDetail.tsx
  • packages/ui/src/hooks/use-kopai-data.test.ts
  • packages/ui/src/hooks/use-kopai-data.ts
  • packages/ui/src/hooks/use-live-logs.test.ts
  • packages/ui/src/hooks/use-live-logs.ts
  • packages/ui/src/index.ts
  • packages/ui/src/lib/component-catalog.test.ts
  • packages/ui/src/lib/component-catalog.ts
  • packages/ui/src/lib/generate-prompt-instructions.test.ts
  • packages/ui/src/lib/generate-prompt-instructions.ts
  • packages/ui/src/lib/log-buffer.test.ts
  • packages/ui/src/lib/log-buffer.ts
  • packages/ui/src/lib/observability-catalog.ts
  • packages/ui/src/lib/renderer.test.tsx
  • packages/ui/src/lib/renderer.tsx
  • packages/ui/src/pages/observability.test.tsx
  • packages/ui/src/pages/observability.tsx
  • packages/ui/src/providers/kopai-provider.tsx
💤 Files with no reviewable changes (14)
  • packages/ui/src/lib/generate-prompt-instructions.test.ts
  • packages/ui/src/lib/observability-catalog.ts
  • packages/ui/src/lib/log-buffer.test.ts
  • packages/ui/src/hooks/use-live-logs.test.ts
  • packages/ui/src/hooks/use-kopai-data.test.ts
  • packages/ui/src/lib/log-buffer.ts
  • packages/ui/src/lib/renderer.tsx
  • packages/ui/src/providers/kopai-provider.tsx
  • packages/ui/src/lib/generate-prompt-instructions.ts
  • packages/ui/src/lib/renderer.test.tsx
  • packages/ui/src/hooks/use-kopai-data.ts
  • packages/ui/src/hooks/use-live-logs.ts
  • packages/ui/src/lib/component-catalog.test.ts
  • packages/ui/src/lib/component-catalog.ts

@Vunovati Vunovati merged commit d2bbff8 into main May 7, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant