add a preview component for tabs, update contextmenu model w/ getInstance method (#2927)

Author: sawka

.kilocode/skills/context-menu/SKILL.md

@@ -40,7 +40,7 @@ import { ContextMenuModel } from "@/app/store/contextmenu";
 To display the context menu, call:
 
 ```ts
-ContextMenuModel.showContextMenu(menu, event);
+ContextMenuModel.getInstance().showContextMenu(menu, event);
 ```
 
 - **menu**: An array of `ContextMenuItem`.
@@ -75,7 +75,7 @@ const menu: ContextMenuItem[] = [
   },
 ];
 
-ContextMenuModel.showContextMenu(menu, e);
+ContextMenuModel.getInstance().showContextMenu(menu, e);
 ```
 
 ---
@@ -111,7 +111,7 @@ const menu: ContextMenuItem[] = [
   },
 ];
 
-ContextMenuModel.showContextMenu(menu, e);
+ContextMenuModel.getInstance().showContextMenu(menu, e);
 ```
 
 ---
@@ -143,7 +143,7 @@ Open a configuration file (e.g., `widgets.json`) in preview mode:
 - **Actions**: Use `click` for actions; use `submenu` for nested options.
 - **Separators**: Use `type: "separator"` to group items.
 - **Toggles**: Use `type: "checkbox"` or `"radio"` with the `checked` property.
-- **Displaying**: Use `ContextMenuModel.showContextMenu(menu, event)` to render the menu.
+- **Displaying**: Use `ContextMenuModel.getInstance().showContextMenu(menu, event)` to render the menu.
 
 ## Common Use Cases
 

.roo/rules/rules.md

@@ -93,6 +93,7 @@ The full API is defined in custom.d.ts as type ElectronApi.
 - **CRITICAL** - useAtomValue and useAtom are React HOOKS. They cannot be used inline in JSX code, they must appear at the top of a component in the hooks area of the react code.
 - for simple functions, we prefer `if (!cond) { return }; functionality;` pattern overn `if (cond) { functionality }` because it produces less indentation and is easier to follow.
 - It is now 2026, so if you write new files, or update files use 2026 for the copyright year
+- React.MutableRefObject is deprecated, just use React.RefObject now (current is now always mutable)
 
 ### Strict Comment Rules