feat(hook): Add frontend feature control and admin hook page#9575
Open
feat(hook): Add frontend feature control and admin hook page#9575
Conversation
Contributor
Greptile SummaryThis PR adds a frontend admin Hook Extensions page ( Key changes and findings:
Confidence Score: 4/5
Important Files Changed
Sequence DiagramsequenceDiagram
participant Browser
participant HooksPage as HooksPage (index.tsx)
participant SettingsCtx as useSettingsContext
participant HooksContent as HooksContent.tsx
participant useHookSpecs
participant API as /api/admin/hooks/specs
participant SettingsAPI as /api/settings
Browser->>HooksPage: Navigate to /admin/hooks
HooksPage->>SettingsCtx: read { settings, settingsLoading }
SettingsCtx-->>HooksPage: settingsLoading=true → render SimpleLoader
SettingsCtx->>SettingsAPI: GET /api/settings
SettingsAPI-->>SettingsCtx: { hooks_enabled: bool, ... }
alt hooks_enabled = false
HooksPage->>Browser: toast.info + router.replace("/")
else hooks_enabled = true
HooksPage->>HooksContent: render
HooksContent->>useHookSpecs: call hook
useHookSpecs->>API: SWR GET /api/admin/hooks/specs
API-->>useHookSpecs: HookPointMeta[]
useHookSpecs-->>HooksContent: { specs, isLoading, error }
HooksContent-->>Browser: render hook cards with search + Connect button
end
Prompt To Fix All With AIThis is a comment left during a code review.
Path: web/src/hooks/useHookSpecs.ts
Line: 5
Comment:
**Hook imports API type from page-specific location**
`useHookSpecs` lives in `web/src/hooks/` — a shared layer — but imports `HookPointMeta` from `@/refresh-pages/admin/HooksPage/interfaces`, which is a page-specific directory. This inverts the natural dependency direction: a generic, reusable hook should not depend on a concrete page's types.
Per AGENTS.md §3, API response shapes ("shared models, API response shapes, enums, etc.") belong in a co-located `interfaces.ts` or in the shared `web/src/interfaces/` directory. Moving `HookPointMeta` (and the other hook API types) there would also make it easier to reuse the hook in a second page (e.g., the upcoming Connect modal) without importing from the first page.
```suggestion
import { HookPointMeta } from "@/interfaces/hooks";
```
Then move `HookPointMeta` (and the rest of the hook-related API types currently in `HooksPage/interfaces.ts`) to `web/src/interfaces/hooks.ts`, and update the import in `HooksContent.tsx` accordingly.
**Rule Used:** For frontend changes (changes that touch the /web ... ([source](https://app.greptile.com/review/custom-context?memory=auto-aaef32fd))
How can I resolve this? If you propose a fix, please make it concise.Reviews (11): Last reviewed commit: "address comments" | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
2 issues found across 10 files
Confidence score: 4/5
- This PR is likely safe to merge: both reported issues are low severity (4/10) and appear to be localized UX/observability gaps rather than functional breakages.
- The most impactful issue is in
web/src/app/admin/hooks/HooksPageContent.tsx: whenfilteredis empty, users can see a blank area with no empty-state message, which can be confusing during search or when no hooks exist. - Missing error logging in
web/src/app/admin/hooks/HooksPageContent.tsxreduces debuggability of SWR fetch failures, but does not by itself indicate a regression in core behavior. - Pay close attention to
web/src/app/admin/hooks/HooksPageContent.tsx- add explicit empty-state rendering and log fetch errors before showing the error callout.
Prompt for AI agents (unresolved issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="web/src/app/admin/hooks/HooksPageContent.tsx">
<violation number="1" location="web/src/app/admin/hooks/HooksPageContent.tsx:46">
P2: Log the SWR fetch error before rendering the error callout so failures are traceable during debugging.
(Based on your team's feedback about always logging underlying errors in error-handling paths.) [FEEDBACK_USED]</violation>
<violation number="2" location="web/src/app/admin/hooks/HooksPageContent.tsx:70">
P2: No empty-state rendered when `filtered` is empty — the user sees a blank area below the search box with no indication whether their search matched nothing or no hooks exist. Add a conditional branch before the `.map()` to show an appropriate message.</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
Contributor
|
Preview Deployment
|
Contributor
🖼️ Visual Regression Report
|
nmgarza5
approved these changes
Mar 24, 2026
Contributor
nmgarza5
left a comment
nmgarza5
left a comment
There was a problem hiding this comment.
some comments that need to be addressed but approving to unblock
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Summary
Not in this PR
Motivation: We want to support customer to inject function into certain point in our pipeline.
Eng Doc: https://docs.google.com/document/d/1wCQ4jcuscDLBIuVwzG8yT6UnHVWgIi5gdteOhe1SqhU/edit?tab=t.0
Linear: https://linear.app/onyx-app/project/hooks-14fc5597dc91/overview
UI mocks:
https://www.figma.com/design/sNcHyrXBLtTFDK0ijjMnSk/Admin-Panel?node-id=4756-763808&p=f&m=dev
How Has This Been Tested?
Checked on UI
hook not enabled
hook enabled
Additional Options
Summary by cubic
Adds an admin Hook Extensions page behind a feature flag. The page shows only when hooks are available (single-tenant +
HOOK_ENABLED=true) and lists hook points with search and docs links.New Features
UserSettings.hooks_enabled(viaHOOKS_AVAILABLE) in/api/settings; addsdocs_urltodocument_ingestionandquery_processingspecs.SvgHookNodesandSvgFileBroadcastto@opal/icons; registersADMIN_ROUTES.HOOKSat/admin/hooks; shows “Hook Extensions” under Integrations only whensettings.hooks_enabled; guards the page with a toast + redirect if disabled; updates theSettingsinterface withhooks_enabled./api/admin/hooks/specsviauseHookSpecs; shows searchable cards with per-hook icons, a placeholder “Connect” button, and optional docs link; adds a reusableInputSearchwith Storybook; adds TS interfaces for hook models.Migration
HOOK_ENABLED=true.Written for commit 75c960c. Summary will update on new commits.