feat: plugin system UI extensions, error modal, and test fixes by debba · Pull Request #101 · debba/tabularis

debba · 2026-03-23T10:46:23Z

Summary

Plugin UI Extensions (Phase 2): Full plugin slot system with PluginSlotProvider, SlotAnchor, error boundaries, and IIFE module loading for external plugin bundles. Plugins can contribute UI components to predefined slots (toolbar, context menu, sidebar, row editor, settings, connection modal).
Plugin Modal & API: Added PluginModalContext/PluginModalProvider for plugin-managed modals, and usePluginApi hooks (usePluginQuery, usePluginConnection, usePluginToast, usePluginModal, usePluginTheme, usePluginTranslation, usePluginSetting).
manage_tables capability: Gating for table management actions (create, rename, drop, truncate) based on driver capabilities — external plugin drivers can now opt in or out.
ErrorModal component: New in-app error modal replacing native Tauri message() dialogs in DataGrid.tsx and Editor.tsx for a consistent UX.
Test fixes: Fixed SlotAnchor, PluginSlotProvider, and EditorProvider tests — added missing SettingsContext wrapper, removed stale builtinPluginContributions import, and handled load_editor_preferences mock.
Docs & guides: Plugin guide, wiki page, and updated UI extensions spec.

Test plan

Rust tests: 97/97 passed
Frontend tests: 1540/1540 passed (all 3 previously failing tests fixed)
Manual: verify plugin slot rendering with an external plugin (e.g. Google Sheets auth UI)
Manual: verify ErrorModal displays correctly on update/delete failures
Manual: verify manage_tables gating hides actions for plugins without the capability

Adds a slot-based UI extension system allowing plugins to inject React components into predefined locations throughout the application. Includes PluginSlotRegistry context, SlotAnchor component with ErrorBoundary isolation, plugin API hooks (usePluginQuery, usePluginConnection, usePluginToast, usePluginSetting, usePluginTheme), dynamic module loader, and 8 slot anchors across NewRowModal, RowEditorSidebar, TableToolbar, DataGrid context menu, Sidebar footer, and Settings plugin actions. https://claude.ai/code/session_01CJqE5Hdg5nXnEJSK4SCXbt

Update spec from Draft v0.1 to Implemented v0.2 with actual types matching the implementation (SlotName, SlotContext, SlotComponentProps, PluginSlotRegistryType). Add the 8th slot (settings.plugin.actions) to spec, blog post, wiki, and plugin guide. Add UI Extensions section to wiki/plugins.md and PLUGIN_GUIDE.md. Update plugins/README.md with UI extension references. https://claude.ai/code/session_01CJqE5Hdg5nXnEJSK4SCXbt

Add a built-in JSON Viewer plugin demonstrating the slot-based UI extension system. The plugin renders collapsible, syntax-highlighted JSON trees for JSON/JSONB columns in the row editor sidebar and new row modal. - Create JsonPreview component with recursive JSON tree rendering - Register builtin plugin contributions in PluginSlotProvider - Add 12 tests for JsonPreview and fix 3 PluginSlotProvider tests - Update plugin documentation (wiki, guide) with example plugin details https://claude.ai/code/session_01CJqE5Hdg5nXnEJSK4SCXbt

export usePluginModal and PluginModalOptions; integrate provider into App and plugin API

replace tauri dialog messages in DataGrid and Editor

load_editor_preferences

kilo-code-bot · 2026-03-23T10:49:15Z

Code Review Summary

Status: 5 Issues Found (all pre-existing) | Recommendation: Address before merge

Overview

Severity	Count
CRITICAL	0
WARNING	5
SUGGESTION	0

Summary

This PR introduces a comprehensive Plugin UI Extensions system (Phase 2) including:

Slot-based UI extension system - Plugins can inject React components into predefined slots (toolbar, context menu, sidebar, row editor, settings)
Plugin API hooks - usePluginQuery, usePluginConnection, usePluginToast, usePluginModal, usePluginTheme, usePluginTranslation
Driver capabilities - manage_tables and readonly flags for fine-grained UI control
UI-only plugins - Support for plugins without executables
ErrorModal component - Consistent in-app error dialogs replacing native Tauri messages

Pre-existing Issues

File	Line	Issue
`src/components/ui/DataGrid.tsx`	412	Missing separator between translated message and error object
`src/components/ui/SlotAnchor.tsx`	27	Context object in useMemo dependency array may cause excessive re-renders
`src/pages/Editor.tsx`	1046	Missing space between translated message and error
`src/pages/Editor.tsx`	1156	Missing space between translated message and error
`src/pages/Editor.tsx`	1272	Missing space between translated message and error

Code Quality Observations

Positive:

Proper error isolation with SlotErrorBoundary for plugin components
Good use of dynamic imports with IIFE bundle loading for external plugins
Security-conscious path validation in read_plugin_file command (prevents directory traversal)
Clean separation between driver-based and UI-only plugins
Comprehensive TypeScript types for slot system

Notes:

The SlotAnchor.tsx context dependency issue (line 27) is a React best practice concern - consider using a stable context reference or memoizing at the call site
String concatenation for error messages should include separators for readability (e.g., t("key") + ": " + String(err) instead of direct concatenation)

Files Reviewed (33 files)

Core Plugin System:

src/components/ui/SlotAnchor.tsx
src/components/ui/SlotErrorBoundary.tsx
src/contexts/PluginSlotProvider.tsx
src/contexts/PluginModalProvider.tsx
src/hooks/usePluginApi.ts
src/types/pluginSlots.ts
src/utils/pluginModuleLoader.ts
src/pluginApi.ts

UI Components:

src/components/ui/DataGrid.tsx
src/components/ui/RowEditorSidebar.tsx
src/components/ui/TableToolbar.tsx
src/components/modals/ErrorModal.tsx
src/components/modals/NewRowModal.tsx
src/components/modals/NewConnectionModal.tsx

Layout Components:

src/components/layout/ExplorerSidebar.tsx
src/components/layout/Sidebar.tsx
src/components/layout/sidebar/*.tsx

Backend (Rust):

src-tauri/src/plugins/commands.rs
src-tauri/src/plugins/manager.rs
src-tauri/src/drivers/driver_trait.rs
src-tauri/src/drivers/registry.rs

Other:

src/App.tsx
src/pages/Editor.tsx
src/pages/Settings.tsx
src/utils/driverCapabilities.ts
Documentation and test files

Fix these issues in Kilo Cloud

_{Reviewed by kimi-k2.5-0127 · 410,279 tokens}

src/components/ui/DataGrid.tsx

src/components/ui/SlotAnchor.tsx

kilo-code-bot · 2026-03-23T10:53:43Z

src/pages/Editor.tsx

-        title: t("general.error"),
-        kind: "error",
-      });
+      setErrorModal({ isOpen: true, message: t("editor.failedCreateRow") + String(err) });


WARNING: Missing space between translated message and error

The error message concatenation is missing a separator space:

Suggested change

setErrorModal({ isOpen: true, message: t("editor.failedCreateRow") + String(err) });

setErrorModal({ isOpen: true, message: t("editor.failedCreateRow") + " " + String(err) });

kilo-code-bot · 2026-03-23T10:53:44Z

src/pages/Editor.tsx

-          title: t("common.error"),
-          kind: "error",
-        });
+        setErrorModal({ isOpen: true, message: t("editor.failedProcessInsertions") + String(err) });


WARNING: Missing space between translated message and error

The error message concatenation is missing a separator space:

Suggested change

setErrorModal({ isOpen: true, message: t("editor.failedProcessInsertions") + String(err) });

setErrorModal({ isOpen: true, message: t("editor.failedProcessInsertions") + " " + String(err) });

kilo-code-bot · 2026-03-23T10:53:44Z

src/pages/Editor.tsx

-        title: t("common.error"),
-        kind: "error",
-      });
+      setErrorModal({ isOpen: true, message: t("dataGrid.updateFailed") + String(e) });


WARNING: Missing space between translated message and error

The error message concatenation is missing a separator space:

Suggested change

setErrorModal({ isOpen: true, message: t("dataGrid.updateFailed") + String(e) });

setErrorModal({ isOpen: true, message: t("dataGrid.updateFailed") + " " + String(e) });

utilities

claude and others added 12 commits March 15, 2026 21:41

feat(plugins): support UI-only plugins and external UI bundles

065307c

feat(plugin-modal): add plugin modal context and provider

57b89fc

export usePluginModal and PluginModalOptions; integrate provider into App and plugin API

Merge branch 'main' into feat/plugin-system-ui

192ce6b

Merge branch 'main' into feat/plugin-system-ui

c3bbc2b

feat(plugins): add plugin slots and external opener support

6725a6c

feat(plugins): add manage_tables capability and UI gating

df07072

chore(release): bump version to 0.9.10

66688f7

feat(modals): add error modal and use it for async errors

4373b9f

replace tauri dialog messages in DataGrid and Editor

test(tests): provide SettingsContext in tests and mock

11ede19

load_editor_preferences

debba self-assigned this Mar 23, 2026

debba added the enhancement New feature or request label Mar 23, 2026

kilo-code-bot bot reviewed Mar 23, 2026

View reviewed changes

src/components/ui/DataGrid.tsx Show resolved Hide resolved

src/components/ui/SlotAnchor.tsx Show resolved Hide resolved

refactor(typescript): use explicit type guards and casts for safety

ef80f2a

kilo-code-bot bot reviewed Mar 23, 2026

View reviewed changes

debba added 6 commits March 23, 2026 12:09

feat(plugins): default manage_tables to true and use helper

6a2a0c5

feat(drivers): add readonly capability to disable data writes

2846a2c

docs(plugins): clarify UI extension spec and slot contexts

67b12af

refactor(ui-and-utils): standardize component typings and plugin

61a7f13

utilities

chore(deps): remove tailwind-merge dependency

8c3ae3a

Merge remote-tracking branch 'origin/main' into feat/plugin-system-ui

c87728d

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: plugin system UI extensions, error modal, and test fixes#101

feat: plugin system UI extensions, error modal, and test fixes#101
debba wants to merge 19 commits intomainfrom
feat/plugin-system-ui

debba commented Mar 23, 2026 •

edited

Loading

Uh oh!

kilo-code-bot bot commented Mar 23, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

kilo-code-bot bot Mar 23, 2026

Uh oh!

kilo-code-bot bot Mar 23, 2026

Uh oh!

kilo-code-bot bot Mar 23, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	setErrorModal({ isOpen: true, message: t("editor.failedCreateRow") + String(err) });
	setErrorModal({ isOpen: true, message: t("editor.failedCreateRow") + " " + String(err) });

Uh oh!

Conversation

debba commented Mar 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test plan

Uh oh!

kilo-code-bot bot commented Mar 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review Summary

Overview

Summary

Pre-existing Issues

Code Quality Observations

Files Reviewed (33 files)

Uh oh!

Uh oh!

Uh oh!

kilo-code-bot bot Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

kilo-code-bot bot Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

kilo-code-bot bot Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

debba commented Mar 23, 2026 •

edited

Loading

kilo-code-bot bot commented Mar 23, 2026 •

edited

Loading