Skip to content

refactor(kilo-console): use Kilo UI boundary - #11288

Merged
markijbema merged 6 commits into
mainfrom
mark/kilo-console-ui-boundary
Jun 16, 2026
Merged

refactor(kilo-console): use Kilo UI boundary#11288
markijbema merged 6 commits into
mainfrom
mark/kilo-console-ui-boundary

Conversation

@kilo-code-bot

@kilo-code-bot kilo-code-bot Bot commented Jun 16, 2026

Copy link
Copy Markdown
Contributor

Summary

Route the project console's file and session review components through @kilocode/kilo-web-ui instead of importing the upstream OpenCode UI package directly.

This preserves the existing implementation while keeping Kilo product code behind the Kilo-owned UI boundary. It also allows the direct @opencode-ai/ui dependency to be removed from kilo-console separately.

Comment thread packages/kilo-console/src/routes/projects/ProjectConsoleRoute.tsx
@kilo-code-bot

kilo-code-bot Bot commented Jun 16, 2026

Copy link
Copy Markdown
Contributor Author

Code Review Summary

Status: No Issues Found | Recommendation: Merge

All issues from the previous review have been addressed:

  • packages/kilo-web-ui/src/components/file.tsx now properly re-exports @opencode-ai/ui/file instead of a stub ✅
  • packages/kilo-web-ui/src/components/diff.tsx redundant createEffect removed; annotation-only changes now handled via single effect with same guard ✅
  • packages/kilo-web-ui/src/components/session-review.tsx hardcoded Loading diff... string replaced with i18n.t(...)
Files Reviewed (87 files)
  • packages/kilo-console/package.json - dependency cleanup
  • packages/kilo-console/src/client.ts - import refactor
  • packages/kilo-console/src/routes/projects/ProjectConsoleRoute.tsx - ResizeObserver + sidebar width dedup + CSS variable
  • packages/kilo-console/src/styles/project-console.css - CSS variable for max info width
  • packages/kilo-console/vite.config.ts - @pierre/diffs dedupe
  • packages/kilo-web-ui/package.json - new deps
  • packages/kilo-web-ui/src/components/diff.tsx - EagerDiff implementation
  • packages/kilo-web-ui/src/components/file.tsx - re-export from @opencode-ai/ui/file
  • packages/kilo-web-ui/src/components/session-review.tsx - full component implementation
  • packages/kilo-web-ui/src/pierre/* - re-export from @opencode-ai/ui
  • packages/kilo-web-ui/src/styles/misc.css - loading state style
  • 76 re-export files (@kilocode/kilo-ui → @opencode-ai/ui)
Previous Review Summaries (3 snapshots, latest commit 6291375)

Current summary above is authoritative. Previous snapshots are kept for context only.

Previous review (commit 6291375)

Status: 2 Issues Found | Recommendation: Address before merge

Overview

Severity Count
CRITICAL 0
WARNING 1
SUGGESTION 1
Issue Details (click to expand)

WARNING

File Line Issue
packages/kilo-web-ui/src/components/diff.tsx 99 Redundant createEffect — annotation changes trigger full instance recreate AND redundant setLineAnnotations/rerender()

SUGGESTION

File Line Issue
packages/kilo-web-ui/src/components/session-review.tsx 229 Hardcoded "Loading diff..." string should use i18n

Resolved from previous review

File Line Issue
packages/kilo-web-ui/src/components/file.tsx File component is no longer a stub; now re-exports from @opencode-ai/ui/file
Files Reviewed (45 files)
  • packages/kilo-web-ui/src/components/diff.tsx - 1 issue
  • packages/kilo-web-ui/src/components/session-review.tsx - 1 issue
  • packages/kilo-web-ui/src/components/file.tsx - resolved
  • packages/kilo-web-ui/src/components/diff-changes.tsx - re-export change
  • packages/kilo-web-ui/src/components/accordion.tsx - re-export change
  • packages/kilo-web-ui/src/components/animated-number.tsx - re-export change
  • packages/kilo-web-ui/src/components/app-icon.tsx - re-export change
  • packages/kilo-web-ui/src/components/avatar.tsx - re-export change
  • packages/kilo-web-ui/src/components/checkbox.tsx - re-export change
  • packages/kilo-web-ui/src/components/collapsible.tsx - re-export change
  • packages/kilo-web-ui/src/components/context-menu.tsx - re-export change
  • packages/kilo-web-ui/src/components/dialog.tsx - re-export change
  • packages/kilo-web-ui/src/components/dock-prompt.tsx - re-export change
  • packages/kilo-web-ui/src/components/dock-surface.tsx - re-export change
  • packages/kilo-web-ui/src/components/dropdown-menu.tsx - re-export change
  • packages/kilo-web-ui/src/components/favicon.tsx - re-export change
  • packages/kilo-web-ui/src/components/file-icon.tsx - re-export change
  • packages/kilo-web-ui/src/components/font.tsx - re-export change
  • packages/kilo-web-ui/src/components/hover-card.tsx - re-export change
  • packages/kilo-web-ui/src/components/image-preview.tsx - re-export change
  • packages/kilo-web-ui/src/components/inline-input.tsx - re-export change
  • packages/kilo-web-ui/src/components/keybind.tsx - re-export change
  • packages/kilo-web-ui/src/components/line-comment-annotations.tsx - re-export change
  • packages/kilo-web-ui/src/components/line-comment.tsx - re-export change
  • packages/kilo-web-ui/src/components/list.tsx - re-export change
  • packages/kilo-web-ui/src/components/logo.tsx - re-export change
  • packages/kilo-web-ui/src/components/markdown.tsx - re-export change
  • packages/kilo-web-ui/src/components/message-nav.tsx - re-export change
  • packages/kilo-web-ui/src/components/motion-spring.tsx - re-export change
  • packages/kilo-web-ui/src/components/popover.tsx - re-export change
  • packages/kilo-web-ui/src/components/progress.tsx - re-export change
  • packages/kilo-web-ui/src/components/progress-circle.tsx - re-export change
  • packages/kilo-web-ui/src/components/radio-group.tsx - re-export change
  • packages/kilo-web-ui/src/components/resize-handle.tsx - re-export change
  • packages/kilo-web-ui/src/components/scroll-view.tsx - re-export change
  • packages/kilo-web-ui/src/components/select.tsx - re-export change
  • packages/kilo-web-ui/src/components/spinner.tsx - re-export change
  • packages/kilo-web-ui/src/components/sticky-accordion-header.tsx - re-export change
  • packages/kilo-web-ui/src/components/switch.tsx - re-export change
  • packages/kilo-web-ui/src/components/tabs.tsx - re-export change
  • packages/kilo-web-ui/src/components/text-field.tsx - re-export change
  • packages/kilo-web-ui/src/components/text-reveal.tsx - re-export change
  • packages/kilo-web-ui/src/components/text-shimmer.tsx - re-export change
  • packages/kilo-web-ui/src/components/text-strikethrough.tsx - re-export change
  • packages/kilo-web-ui/src/components/session-turn.tsx - re-export change
  • packages/kilo-web-ui/src/components/toast.tsx - re-export change
  • packages/kilo-web-ui/src/components/tooltip.tsx - re-export change
  • packages/kilo-web-ui/src/components/typewriter.tsx - re-export change
  • packages/kilo-web-ui/src/context/data.tsx - re-export change
  • packages/kilo-web-ui/src/context/dialog.tsx - re-export change
  • packages/kilo-web-ui/src/context/file.tsx - re-export change
  • packages/kilo-web-ui/src/context/helper.tsx - re-export change
  • packages/kilo-web-ui/src/context/i18n.tsx - re-export change
  • packages/kilo-web-ui/src/context/index.ts - re-export change
  • packages/kilo-web-ui/src/context/marked.tsx - re-export change
  • packages/kilo-web-ui/src/context/worker-pool.tsx - re-export change
  • packages/kilo-web-ui/src/i18n/ar.ts - re-export change
  • packages/kilo-web-ui/src/i18n/br.ts - re-export change
  • packages/kilo-web-ui/src/i18n/bs.ts - re-export change
  • packages/kilo-web-ui/src/i18n/da.ts - re-export change
  • packages/kilo-web-ui/src/i18n/de.ts - re-export change
  • packages/kilo-web-ui/src/i18n/en.ts - re-export change
  • packages/kilo-web-ui/src/i18n/es.ts - re-export change
  • packages/kilo-web-ui/src/i18n/fr.ts - re-export change
  • packages/kilo-web-ui/src/i18n/it.ts - new file
  • packages/kilo-web-ui/src/i18n/ja.ts - re-export change
  • packages/kilo-web-ui/src/i18n/ko.ts - re-export change
  • packages/kilo-web-ui/src/i18n/nl.ts - re-export change
  • packages/kilo-web-ui/src/i18n/no.ts - re-export change
  • packages/kilo-web-ui/src/i18n/pl.ts - re-export change
  • packages/kilo-web-ui/src/i18n/ru.ts - re-export change
  • packages/kilo-web-ui/src/i18n/th.ts - re-export change
  • packages/kilo-web-ui/src/i18n/tr.ts - re-export change
  • packages/kilo-web-ui/src/i18n/uk.ts - re-export change
  • packages/kilo-web-ui/src/i18n/zh.ts - re-export change
  • packages/kilo-web-ui/src/i18n/zht.ts - re-export change
  • packages/kilo-web-ui/src/icons/app.ts - re-export change
  • packages/kilo-web-ui/src/icons/file-type.ts - re-export change
  • packages/kilo-web-ui/src/icons/provider.ts - re-export change
  • packages/kilo-web-ui/src/pierre/index.ts - re-export change
  • packages/kilo-web-ui/src/pierre/selection-bridge.ts - re-export change
  • packages/kilo-web-ui/src/pierre/worker.ts - re-export change
  • packages/kilo-web-ui/src/theme/color.ts - re-export change
  • packages/kilo-web-ui/src/theme/loader.ts - re-export change
  • packages/kilo-web-ui/src/theme/resolve.ts - re-export change
  • packages/kilo-web-ui/src/theme/types.ts - re-export change
  • packages/kilo-web-ui/src/styles/misc.css - loading state style
  • packages/kilo-web-ui/package.json - new dependencies
  • packages/kilo-console/vite.config.ts - dedupe addition
  • packages/kilo-console/src/routes/projects/ProjectConsoleRoute.tsx - layout/sidebar resizing
  • packages/kilo-console/src/styles/project-console.css - CSS variable

Fix these issues in Kilo Cloud

Previous review (commit 6866133)

Status: 1 Issue Found | Recommendation: Address before merge

Overview

Severity Count
CRITICAL 1
WARNING 0
SUGGESTION 0
Issue Details (click to expand)

CRITICAL

File Line Issue
packages/kilo-console/src/routes/projects/ProjectConsoleRoute.tsx 9 File from @kilocode/kilo-web-ui/file is a 5-line stub (<div data-component="file" />) that replaces the full 1132-line file/diff viewer from @opencode-ai/ui/file. Diff rendering in the project review panel will break.
Files Reviewed (1 file)
  • packages/kilo-console/src/routes/projects/ProjectConsoleRoute.tsx - 1 issue

Fix these issues in Kilo Cloud

Previous review (commit f216118)

Status: 1 Issue Found | Recommendation: Address before merge

Overview

Severity Count
CRITICAL 1
WARNING 0
SUGGESTION 0
Issue Details (click to expand)

CRITICAL

File Line Issue
packages/kilo-console/src/routes/projects/ProjectConsoleRoute.tsx 9 File from @kilocode/kilo-web-ui/file is a 5-line stub (<div data-component="file" />) that replaces the full 1132-line file/diff viewer from @opencode-ai/ui/file. Diff rendering in the project review panel will break.
Files Reviewed (1 file)
  • packages/kilo-console/src/routes/projects/ProjectConsoleRoute.tsx - 1 issue

Fix these issues in Kilo Cloud


Reviewed by deepseek-v4-pro-20260423 · 745,379 tokens

Review guidance: REVIEW.md from base branch main

@catrielmuller
catrielmuller force-pushed the mark/kilo-console-ui-boundary branch from 6866133 to 6291375 Compare June 16, 2026 14:09
local.onRendered?.()
})

createEffect(() => {

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

WARNING: Redundant annotation re-rendering — the first createEffect (line 71) already recreates the FileDiff instance whenever local.annotations changes because it reads local.annotations reactively on line 72. This second effect calls setLineAnnotations + rerender() on the new instance, applying the same annotations twice. Annotation-only changes (e.g. a comment on a diff line) shouldn't require full instance teardown and recreation.

Consider removing the second effect and instead merging its logic into the first effect so that annotation-only changes call setLineAnnotations/rerender() without recreating the instance.


Reply with @kilocode-bot fix it to have Kilo Code address this issue.

<div data-slot="session-review-large-diff">
<div data-slot="session-review-large-diff-title" data-state="loading">
<Spinner />
<span>Loading diff...</span>

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

SUGGESTION: Hardcoded English string "Loading diff..." — the rest of this component uses i18n.t(...) for user-visible text. This should be localized via the i18n context for consistency.

Suggested change
<span>Loading diff...</span>
<span>{i18n.t("ui.sessionReview.loading")}</span>

Reply with @kilocode-bot fix it to have Kilo Code address this issue.

@markijbema
markijbema merged commit 2c1a483 into main Jun 16, 2026
18 checks passed
@markijbema
markijbema deleted the mark/kilo-console-ui-boundary branch June 16, 2026 14:39
t7tran pushed a commit to t7tran/kilocode that referenced this pull request Aug 14, 2026
…boundary

refactor(kilo-console): use Kilo UI boundary
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.

2 participants