in-app component editor (#1075)

## Description

Added an in-app component editor feature that allows users to create and edit Oasis components directly within the application. This feature is behind a beta flag called "in-app-component-editor".

This feature is not yet used in the app. It will be wire-up in the next downstream PR. 

The implementation includes:

- A new component editor dialog with support for both YAML and Python editing
- Python code generation using Pyodide for client-side Python execution
- Live preview of components as they're being edited
- Template selection for different component types (Python, Ruby, JavaScript, Bash)
- Support for editing existing components

## Related Issue and Pull requests

## Type of Change

- [x] New feature
- [x] Improvement

## Checklist

- [x] I have tested this does not break current pipelines / runs functionality
- [ ] I have tested the changes on staging

## Screenshots (if applicable)

![image.png](https://app.graphite.dev/user-attachments/assets/ef4ccbe2-98a1-4244-8cf2-b208aafaa139.png)

![image.png](https://app.graphite.dev/user-attachments/assets/823c1c59-4aa5-43bb-9671-e70b86967705.png)

![image.png](https://app.graphite.dev/user-attachments/assets/d8701429-8127-483a-8112-51ca0ab13fb3.png)

## Additional Comments

The feature uses Pyodide to run Python code in the browser, which allows for client-side generation of component YAML from Python functions. This is particularly useful for users who prefer writing components in Python rather than YAML.

Author: maxy-shpfy

package-lock.json

@@ -81,6 +81,7 @@
     "js-yaml": "^4.1.0",
     "localforage": "^1.10.0",
     "lucide-react": "^0.540.0",
+    "pyodide": "^0.28.3",
     "random-words": "^2.0.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
@@ -93,6 +94,9 @@
     "tailwindcss": "^4.1.13",
     "tailwindcss-animate": "^1.0.7"
   },
+  "peerDependencies": {
+    "monaco-editor": "^0.54.0"
+  },
   "devDependencies": {
     "@eslint/js": "^9.31.0",
     "@hey-api/openapi-ts": "^0.81.1",

package.json

@@ -26,4 +26,11 @@ export const ExistingBetaFlags = {
       "Automatically select the 'Created by me' filter when viewing the pipeline run list.",
     default: false,
   } as BetaFlag,
+
+  ["in-app-component-editor"]: {
+    name: "In-app component editor",
+    description:
+      "Enable the in-app component editor for creating and editing Oasis components.",
+    default: false,
+  } as BetaFlag,
 };