[Feature] Frontend: god components + inconsistent api/services patterns

[chronoai-shining]

Severity: Medium

God components mixing data fetching, parsing, drag, rendering

File	Lines	Responsibilities
sisyphus-web/src/components/workflows/WorkflowEditorPage.tsx	751	form-state schema, YAML↔form conversion, save/compile/deploy orchestration, hardcoded fetch('https://aevatar-console-backend-api.aevatar.ai/...') (line 410-415), response popup, sync popup, drag splitter, sortable items, tab UI
sisyphus-web/src/components/schemas/SchemaEditorPage.tsx	578	similar mix
sisyphus-web/src/components/connectors/ConnectorEditorPage.tsx	367	similar mix

Single files contain orchestration + business logic + rendering. Almost untestable.

Inconsistent API client patterns

sisyphus-web/src/api/*.ts repeats the exact pattern fetch(url(...), { headers: authHeaders(token) }); if (!res.ok) throw new Error(...) ~30 times across 6 files, with subtly different error parsing (some await res.text(), some not, some .catch(() => '')).

sisyphus-web/src/hooks/use-api.ts exists as the centralized version — but no caller uses it. It's dead code with an existing seam.

sisyphus-web/src/api/ (per-domain HTTP clients) and sisyphus-web/src/services/ (higher-level orchestration) overlap with no clear boundary — graph-api.ts does fetch('/api/graph/*'), graph-service.ts does fetch(\${PROXY_URL}/...`)`. Why both?

Inline fetch in components: CompilePopup.tsx:62-101, WorkflowEditorPage.tsx:410, 454. SSE parsing duplicated inline at CompilePopup.tsx:113-136 instead of using the existing utils/sse-parser.ts.

Remediation

• Extract from WorkflowEditorPage:
  • Pure converters: yamlToForm, formToYaml → utils/workflow-yaml.ts
  • Orchestration hook: useWorkflowEditor(workflowId) → owns save/compile/deploy state
  • Visualizer + runs panels → sibling components
• Same pattern for SchemaEditorPage and ConnectorEditorPage.
• Pick one API pattern: either delete useApi/apiFetch and standardize the inline helper, or migrate api/*.ts to use apiFetch. Pick one error-shape contract.
• Document the api/ vs services/ boundary in CLAUDE.md (or merge them).
• All inline component-level fetches move to api/<domain>-api.ts.

Coupled with #1 (delete legacy api.ts) and #7 (resolve src structure).