feat: expose store access to plugins and consolidate demo (#108)

Author: iamdin

docs/designs/2026-02-10-plugin-store-access.md

@@ -0,0 +1,58 @@
+# Plugin Store Access via RendererApp
+
+**Date:** 2026-02-10
+
+## Context
+
+Plugin components (Sidebar Panel and Content Panel) need access to the current repository path information (`repoPath` and `worktreePath`) in order to:
+
+1. Call backend APIs that require a `cwd` parameter
+2. Display repository information in the UI
+3. Adjust plugin behavior based on the current repository context
+
+Currently, plugin components only receive `app: RendererApp` as a prop. Repository and workspace information lives in the Zustand store (`selectedRepoPath`, `workspaces[id].worktreePath`), but plugins have no official API to access it. Built-in components (FileTree, GitPanel, SearchPanel) directly import `useStore`, which is not appropriate for plugins.
+
+## Discussion
+
+Four approaches were evaluated:
+
+| Approach | Verdict | Reason |
+|----------|---------|--------|
+| **A: Add fields to Props** | Rejected | Props would bloat as more context fields are needed over time |
+| **B: Custom hooks on RendererApp** | Rejected | Mounting React hooks on a class instance is unnatural |
+| **C: Plugins directly import store** | Rejected | Hard-couples plugins to internal module paths |
+| **D: Plugin Context + Provider** | Rejected | Premature abstraction — no third-party plugins exist yet, YAGNI |
+
+A fifth approach emerged: expose the `useStore` reference on the `RendererApp` instance. This is a pragmatic middle ground — plugins access the store through the `app` prop they already receive, without importing internal modules or introducing new abstractions.
+
+Key trade-off acknowledged: a React hook as a property on a class instance is slightly unconventional, but the `use` prefix signals hook calling rules, and all current plugins are first-party.
+
+## Approach
+
+Expose `useStore` as a property on `RendererApp`. Plugin components access it via `app.useStore(selector)`.
+
+This is consistent with the existing `beforeRender` hook which already receives `{ store: typeof useStore }` during initialization. The same store reference is now available at component render time through the `app` prop.
+
+## Architecture
+
+### Change surface
+
+1. **`RendererApp`** — Add a `useStore` property initialized in the constructor
+2. **Plugin component types** — No changes needed (`app` is already in `SidebarPanelProps` and `ContentPanelProps`)
+3. **Plugin rendering** — No changes needed (no new Provider or Context)
+
+### Usage in plugin components
+
+```tsx
+function MySidebar({ app }: SidebarPanelProps) {
+  const repoPath = app.useStore((s) => s.selectedRepoPath);
+  const workspace = app.useStore((s) =>
+    s.selectedWorkspaceId ? s.workspaces[s.selectedWorkspaceId] : null
+  );
+  const cwd = workspace?.worktreePath;
+}
+```
+
+### Future evolution
+
+If third-party plugins or sandboxing are needed later, a Context/Provider layer can be added on top of this without breaking existing plugin code — `app.useStore` would simply point to a scoped store proxy instead of the global store.

src/renderer/core/app.tsx

@@ -43,6 +43,7 @@ export class RendererApp {
     RendererPluginConfig
   >;
   readonly i18nManager: I18nManager;
+  readonly useStore: typeof useStore;
 
   /** Plugin UI contributions collected at startup */
   contributions: PluginConfigContribution[] = [];
@@ -60,9 +61,6 @@ export class RendererApp {
    *   focuses the existing window instead of creating a duplicate. Different
    *   `windowId` values with the same `windowType` open independent windows
    *   that render the same component.
-   *   focuses the existing window instead of creating a duplicate. Different
-   *   `windowId` values with the same `windowType` open independent windows
-   *   that render the same component.
    *
    * Flow: `app.window.open(...)` → IPC → BrowserWindowManager creates
    * BrowserWindow with `?windowId=xxx&windowType=yyy` → renderer loads →
@@ -78,6 +76,7 @@ export class RendererApp {
     this.windows = options?.windows ?? [];
     this.pluginManager = new PluginManager(options?.plugins);
     this.i18nManager = new I18nManager();
+    this.useStore = useStore;
   }
 
   async start(): Promise<void> {
@@ -92,17 +91,16 @@ export class RendererApp {
       (r): r is LazyNamespaceConfig => r != null,
     );
 
+    // Hydrate store for both main and sub windows (locale, etc.)
+    await hydrateStore(useStore);
+    await this.i18nManager.init({ store: useStore });
+
     // Sub window: render matched component directly
     if (windowConfig) {
-      await this.i18nManager.init();
       this.i18nManager.setupLazyNamespaces(lazyNamespaceConfigs);
       this.render(lazy(windowConfig.componentLoader));
       return;
     }
-
-    // Main window: hydrate store first, then init everything else
-    await hydrateStore(useStore);
-    await this.i18nManager.init({ store: useStore });
     this.i18nManager.setupLazyNamespaces(lazyNamespaceConfigs);
 
     // Collect plugin UI contributions

src/renderer/core/i18n/manager.ts

@@ -39,7 +39,7 @@ export class I18nManager {
   async init(options: I18nInitOptions = {}): Promise<void> {
     const { store } = options;
 
-    // Get saved locale from store if available
+    // Get locale from store or browser detection
     const savedLocale = store?.getState().locale;
 
     await this.instance.init({

src/renderer/core/i18n/types.d.ts

@@ -1,17 +1,20 @@
 /**
- * i18n type safety for default namespace.
+ * i18n type safety.
  *
- * Plugins can add their own namespaces by creating a types.d.ts:
- * @see src/renderer/plugins/demo-i18n/types.d.ts
+ * Core declares I18nResources inside i18next module with the default namespace.
+ * Plugins augment I18nResources via `declare module 'i18next'` to add their namespaces.
+ * @see src/renderer/plugins/demo/types.d.ts
  */
 import 'i18next';
 import type en from '../../locales/en.json';
 
 declare module 'i18next' {
+  interface I18nResources {
+    translation: typeof en;
+  }
+
   interface CustomTypeOptions {
     defaultNS: 'translation';
-    resources: {
-      translation: typeof en;
-    };
+    resources: I18nResources;
   }
 }

src/renderer/main.tsx

@@ -1,9 +1,15 @@
 import './index.css';
 import { RendererApp } from './core';
+import { demoPlugin } from './plugins/demo';
 
 const rendererApp = new RendererApp({
-  plugins: [],
-  windows: [],
+  plugins: [demoPlugin],
+  windows: [
+    {
+      windowType: 'demo',
+      componentLoader: () => import('./plugins/demo/DemoWindow'),
+    },
+  ],
 });
 
 rendererApp.start();