feat: add Function Edit Page

File tree browser and code editor for viewing and editing
function source code on GitHub. Files load from the Git Data
API, the handler file is auto-selected based on func.yaml
runtime. Save & Deploy pushes changes back via updateRepo,
which caches the last commit SHA to handle GitHub's eventually
consistent ref storage.

Migrate test runner from Jest to Vitest with MSW 2.x for
GitHub API mocking. Merge RepoInfo and SourceRepo into single
RepoMetadata type. Extract shared utils (parseNamespaceAndRuntime,
getLanguageFromPath, handlerMap). Add CSP connect-src for
GitHub API in dev mode.

Co-Authored-By: Claude <noreply@anthropic.com>
Signed-off-by: Stanislav Jakuschevskij <sjakusch@redhat.com>

Author: twoGiants

AGENTS.md

@@ -7,6 +7,12 @@ This is the project map. Read this first, every session.
 FaaS PoC UI for OpenShift Console — React + TypeScript + Webpack + PatternFly 6 + OCP Dynamic Plugin SDK.
 See `docs/design/` for full design specs.
 
+## Communication
+
+- Ask before staring modifications of code.
+- Ask before starting a new task or making a design decision.
+- Once actively implementing, keep going without asking. Only stop to ask when blocked by sandbox, permissions, or ambiguous requirements.
+
 ## Writing Style
 
 No em dashes (`—`). Use commas, periods, or parentheses instead.

docs/ARCHITECTURE.md

@@ -39,13 +39,23 @@ Arrows mean "imports / depends on."
 - Services never import Components or Views
 - No circular dependencies
 
-## Page / Component / Hook Rules
+## React
 
-**Components are simple** — they receive data via props, render it, and call callbacks to return data to the parent (or use context). No logic at the top of a component.
+### Page / Component / Hook Rules
 
-**Pages are smart** — they use central hooks (e.g. `useClusterService`, `useSourceControl`) to fetch, prepare, and transform all data needed for downstream components.
+**Components are simple by default** — they receive data via props, render it, and call callbacks. No logic at the top of a component.
 
-**Extract logic into hooks** — if a page or component has any logic (state management, data transformation, side effects), extract it into a co-named hook: `FunctionTable.tsx` → `useFunctionTable.ts`, `FunctionsListPage.tsx` → `useFunctionsListPage.ts`. If there is no logic, no hook is needed.
+**A component may own its own data and state when it encapsulates a self-contained capability that is not specific to any one page** (e.g., forge connection, auth flows, notification subscriptions). The component becomes the single owner of that concern. Pages consume it without orchestrating its internals.
+
+**Pages are smart for page-specific data** — they use central hooks (e.g. `useClusterService`, `useSourceControl`) to fetch, prepare, and transform all data needed for downstream components.
+
+**Extract logic into hooks** — if a page or component has any logic (state management, data transformation, side effects), extract it into a custom hook. If the hook is reused by multiple components, put it in a separate file: `useFunctionTable.ts`. If the hook is only used by one component, keep it in the same file, do not export it. If there is no logic, no hook is needed.
+
+**File ordering** — within a file, put the exported component at the top, then its hook below, then helper functions at the bottom. Readers see the main thing first and can drill down.
+
+### Performance
+
+- **No speculative memoization**: Do not wrap every function in `useCallback` or every value in `useMemo` as a habit. Use them when there is a concrete reason: a `React.memo` child that depends on a stable reference, or a known re-render path (e.g., a sibling component re-rendering on every keystroke). Plain functions and derived values are the default.
 
 ## Architectural Guidance
 

docs/STYLEGUIDE.md

@@ -17,11 +17,17 @@
 - **No `any` type**: Use proper TypeScript types.
 - **No `console.log`**: Use structured approach if logging needed.
 - **Naming**: `use*` for hooks, `*Service` for services, PascalCase for components/types.
+- **Co-locate helper functions**: Keep helper functions in the same file as the component or hook that uses them. Test them indirectly through the consumer's tests. Only extract to `utils/` when shared across multiple unrelated modules.
 
 ## Documentation
 
 - **No em dashes (`—`)**. Use commas, periods, or parentheses instead.
 
+## CSS
+
+- **PatternFly first**: Use PatternFly component props for all layout and spacing. Only fall back to custom CSS when PatternFly does not cover the need.
+- **Relative units only**: When custom CSS is necessary, use `rem` and `em` for all sizing. Never use `px`.
+
 ## OCP Plugin Styling Constraints
 
 The `.stylelintrc.yaml` enforces strict rules to prevent breaking the OpenShift Console:

docs/WORKFLOW.md

@@ -17,7 +17,7 @@ Every session, before doing any work:
 After [Startup Sequence](#startup-sequence), work through the picked feature:
 
 1. **Plan** — read `docs/ARCHITECTURE.md` + `docs/STYLEGUIDE.md` + `docs/TESTING.md`, then use `/brainstorming` to design the chosen feature from `docs/features.json`, then use `/writing-plans` to create implementation plan → `docs/plans/active/<NNN>-<type>-<short-name>.md`
-2. **Branch** — create feature branch per [Branching](#branching) convention
+2. **Branch** — create feature branch per [Branching](#branching) convention. Immediately push and open a **draft PR** (`gh pr create --draft`) to reserve the PR number for other contributors' branch numbering.
 3. **Implement** — using `/executing-plans` skill
 4. **Review** — code review using `/requesting-code-review` skill, fix found issues
 5. **Manual Test** — use browser automation and validate it works in the browser

docs/features.json

@@ -96,6 +96,19 @@
     ],
     "passes": true
   },
+  {
+    "category": "technical",
+    "description": "CI/CD: GitHub Actions pipelines for PR checks and master publish to GHCR, plus lint fixes and README deployment instructions",
+    "steps": [
+      "PR pipeline (.github/workflows/pr.yml): triggers on pull_request to master, runs yarn install --immutable, yarn lint, yarn test — branch cannot merge without passing checks and an approval",
+      "Publish pipeline (.github/workflows/publish.yml): triggers on push to master (merged PRs), runs yarn install --immutable, yarn lint, yarn test, then builds multi-arch container image via docker/build-push-action using existing Dockerfile and pushes to ghcr.io/twogiants/console-functions-plugin with :latest and :sha-<commit> tags",
+      "Both pipelines use actions/setup-node@v4 with node-version 22, corepack enable, and cache: yarn for Yarn install caching (GitHub runners ship Node 20 by default with corepack disabled)",
+      "Both pipelines authenticate to GHCR using GITHUB_TOKEN secret with packages:write permission (token added to repo's Actions secrets)",
+      "Add yarn lint script to package.json if missing, run it, and fix all lint errors in the codebase",
+      "Update README.md deployment section (lines 96-117) — replace generic Helm boilerplate, placeholder commands, and obsolete OCP 4.10 / i18n notes with concrete instructions: oc new-project console-functions-plugin, helm upgrade -i console-functions-plugin charts/openshift-console-plugin -n console-functions-plugin --create-namespace --set plugin.image=ghcr.io/twogiants/console-functions-plugin:latest@sha256:<digest>"
+    ],
+    "passes": true
+  },
   {
     "category": "functional",
     "description": "GitHub PAT Avatar: session-wide PAT entry via modal + avatar component showing authenticated GitHub user",
@@ -127,19 +140,6 @@
     ],
     "passes": false
   },
-  {
-    "category": "technical",
-    "description": "CI/CD: GitHub Actions pipelines for PR checks and master publish to GHCR, plus lint fixes and README deployment instructions",
-    "steps": [
-      "PR pipeline (.github/workflows/pr.yml): triggers on pull_request to master, runs yarn install --immutable, yarn lint, yarn test — branch cannot merge without passing checks and an approval",
-      "Publish pipeline (.github/workflows/publish.yml): triggers on push to master (merged PRs), runs yarn install --immutable, yarn lint, yarn test, then builds multi-arch container image via docker/build-push-action using existing Dockerfile and pushes to ghcr.io/twogiants/console-functions-plugin with :latest and :sha-<commit> tags",
-      "Both pipelines use actions/setup-node@v4 with node-version 22, corepack enable, and cache: yarn for Yarn install caching (GitHub runners ship Node 20 by default with corepack disabled)",
-      "Both pipelines authenticate to GHCR using GITHUB_TOKEN secret with packages:write permission (token added to repo's Actions secrets)",
-      "Add yarn lint script to package.json if missing, run it, and fix all lint errors in the codebase",
-      "Update README.md deployment section (lines 96-117) — replace generic Helm boilerplate, placeholder commands, and obsolete OCP 4.10 / i18n notes with concrete instructions: oc new-project console-functions-plugin, helm upgrade -i console-functions-plugin charts/openshift-console-plugin -n console-functions-plugin --create-namespace --set plugin.image=ghcr.io/twogiants/console-functions-plugin:latest@sha256:<digest>"
-    ],
-    "passes": true
-  },
   {
     "category": "functional",
     "description": "Set GitHub Secret (KUBECONFIG) on created function repos so GH Actions can deploy to the cluster",
@@ -150,5 +150,23 @@
       "GH Actions workflow can authenticate to the cluster and run func deploy"
     ],
     "passes": false
+  },
+  {
+    "category": "functional",
+    "description": "Function Edit Page with TreeView file browser and CodeEditor for editing and deploying function code",
+    "steps": [
+      "SourceControlService extended with fetch(repo) method that retrieves full repo tree and file contents via git.getTree recursive + blob fetches",
+      "GithubService push() updated to support subsequent commits (fetch HEAD SHA as parent, updateRef) in addition to initial commits",
+      "Navigate to /faas/edit/:name loads files from GitHub (uses nav state SourceRepo if available, falls back to listFunctionRepos lookup)",
+      "Page layout: toolbar at top (Back link left, danger Alert center, Save & Deploy button right), FileTreeView left panel (~16rem, horizontally scrollable), CodeEditor fills remaining width",
+      "FileTreeView builds nested tree from flat FileEntry[] paths, directories expand/collapse only, files are selectable and update CodeEditor content",
+      "CodeEditor displays selected file with language auto-detected from file extension via getLanguageFromPath utility",
+      "Handler file auto-selected on load based on runtime from func.yaml (no fallback selection if handler not found)",
+      "Modified files indicated in tree with dot and distinct color, dirty state derived by comparing working content against original per file on every onChange",
+      "Save & Deploy button pushes all files to GitHub, resets dirty state on success, shows spinner and disables button during push",
+      "Back to Functions link navigates to /faas directly if clean, shows unsaved changes confirmation modal if dirty",
+      "Empty tree and empty editor shown when repo not found (no error message), Save & Deploy button disabled, back link always visible"
+    ],
+    "passes": false
   }
 ]