mirror of
https://github.com/rennf93/roboco.git
synced 2026-08-03 07:23:24 +02:00
08c02e2251
* [870467e6] Frontend: page-scoped refresh provider, hook, and navbar button (#347) * [55376b8a] Create page-scoped refresh provider and context (#327) * [55376b8a] feat(panel): add page-scoped refresh context and provider * [55376b8a] docs(frontend): add page-refresh-provider component documentation --------- Co-authored-by: Frontend Developer 1 <fe-dev-1@roboco.tech> Co-authored-by: Frontend Documenter <fe-doc@roboco.tech> * [a0c02d0f] Add public usePageRefresh hook (#332) * [a0c02d0f] test(hooks): assert usePageRefresh is exported from hooks barrel * [a0c02d0f] feat(hooks): add public usePageRefresh hook with provider and tests * [a0c02d0f] fix(panel): move hook test wrappers to components and rename providers.tsx to unshadow barrel * [a0c02d0f] docs(panel): document usePageRefresh hook and PageRefreshProvider API --------- Co-authored-by: Frontend Developer 2 <fe-dev-2@roboco.tech> Co-authored-by: Frontend Documenter <fe-doc@roboco.tech> Co-authored-by: Renn F <rennf93@users.noreply.github.com> * [5f28dd9b] Add navbar refresh button and remove inline dashboard refresh buttons (#336) * [5f28dd9b] Align PageRefreshProvider with active hook API and remove inline dashboard refresh buttons * [5f28dd9b] Remove unused scope-keyed PageRefreshProvider, context, and associated tests * [5f28dd9b] Address QA revision: add header refresh tests, page-scoped label, remove dead provider code and .venv symlink, revert formatting-only changes * [5f28dd9b] Remove remaining inline dashboard refresh buttons and committed .venv symlink * [5f28dd9b] docs(frontend): update page-refresh provider docs and panel README for navbar refresh button * [5f28dd9b] fix(panel): remove .venv symlink, ignore root .venv entries, and thin task-detail page data fetch into useTaskDetail hook * [5f28dd9b] Extract GitBrowser data fetching into useGitBrowser hook and add tests; verify .venv cleanup and task-detail thin hook usage * [5f28dd9b] fix(panel): remove root .venv symlink, restore .gitignore anchored rule, and revert lifecycle.json formatting noise * Delete .venv --------- Co-authored-by: Frontend Developer 2 <fe-dev-2@roboco.tech> Co-authored-by: Frontend Documenter <fe-doc@roboco.tech> --------- Co-authored-by: Frontend Developer 1 <fe-dev-1@roboco.tech> Co-authored-by: Frontend Documenter <fe-doc@roboco.tech> Co-authored-by: Frontend Developer 2 <fe-dev-2@roboco.tech> Co-authored-by: Renn F <rennf93@users.noreply.github.com> * [b8e1de1b] Fix navbar refresh button disabled state when registry is empty (#356) (#358) * [b8e1de1b] fix(panel): derive navbar refresh disabled state from registry, not unused prop PageRefreshProvider now computes `disabled` from whether any refresh callback is currently registered (registry size > 0) instead of a static, never-passed `disabled` prop that left the button permanently enabled. header.tsx now destructures `disabled` from usePageRefresh() and disables the button on `disabled || loading`. Updated the tests that asserted the old always-enabled-by-default behavior and added a new header test asserting the button is disabled with zero registered callbacks. * [b8e1de1b] docs(panel): document PageRefreshProvider disabled state derived from registry Updated documentation to reflect the refactored PageRefreshProvider behavior: the `disabled` state is now derived from whether any refresh callbacks are currently registered (empty registry = disabled), rather than a static `disabled` prop. Clarified in both panel/README.md and the full component guide that the navbar refresh button disables when no callbacks are registered and when a refresh cycle is in progress. Updated API documentation to remove the now-removed `disabled` prop from PageRefreshProviderProps and updated code examples and test coverage descriptions to reflect the new callback-driven semantics. --------- Co-authored-by: Frontend Developer 1 <fe-dev-1@roboco.tech> Co-authored-by: Frontend Documenter <fe-doc@roboco.tech> * test(panel): mock usePageRefresh in tests predating the provider Merge-skew: the page-refresh feature makes CommandCenter and the agent detail page call usePageRefresh; three tests merged from master render them without the new provider. Mock the hook module, matching the files' stub-everything style. --------- Co-authored-by: Frontend Developer 1 <fe-dev-1@roboco.tech> Co-authored-by: Frontend Documenter <fe-doc@roboco.tech> Co-authored-by: Frontend Developer 2 <fe-dev-2@roboco.tech> Co-authored-by: Renn F <rennf93@users.noreply.github.com>
85 lines
3.5 KiB
Markdown
85 lines
3.5 KiB
Markdown
# RoboCo Control Panel
|
|
|
|
Next.js 16 control panel for the RoboCo AI agent system. Formerly a separate repository (`rennf93/roboco-panel`), now vendored under `panel/` in this monorepo so `docker compose up -d` brings up the whole stack from one place.
|
|
|
|
## Stack
|
|
|
|
- Next.js 16 (App Router, standalone output)
|
|
- TypeScript
|
|
- Tailwind CSS
|
|
- Radix UI primitives
|
|
- `dnd-kit` for drag/drop (kanban)
|
|
- pnpm for package management
|
|
|
|
## Running in production (the normal path)
|
|
|
|
Use the root-level Docker Compose:
|
|
|
|
```bash
|
|
# from the repo root (one level up from this directory)
|
|
docker compose up -d
|
|
```
|
|
|
|
The panel is built as part of the compose stack via `docker/panel.Dockerfile` and served internally on port 3000. Nginx (also in the compose stack) is the single externally-exposed service on `http://localhost:3000` and routes:
|
|
|
|
- `/api/*` and `/ws/*` → orchestrator (FastAPI, port 8000)
|
|
- everything else → the Next.js panel
|
|
|
|
The panel uses relative URLs (`/api/v1`, `/ws`) so nothing here needs a backend URL in `.env`.
|
|
|
|
## Running the panel alone for UI development
|
|
|
|
```bash
|
|
cd panel
|
|
pnpm install
|
|
pnpm dev
|
|
```
|
|
|
|
That gives you Next dev-server on `localhost:3000`, but you still need the orchestrator reachable at `localhost:8000` (or via nginx) for API calls to work. Easiest: `docker compose up -d` the backend services, then run `pnpm dev` against that.
|
|
|
|
## Build scripts
|
|
|
|
- `pnpm dev` — development server with hot reload
|
|
- `pnpm build` — production build (outputs `.next/standalone/`)
|
|
- `pnpm start` — run the standalone build
|
|
- `pnpm lint` — ESLint
|
|
|
|
## Where things live
|
|
|
|
- `src/app/` — Next.js App Router pages
|
|
- `src/components/` — React components (organized by feature: tasks, agents, channels, …)
|
|
- `src/lib/api/` — typed API client (thin wrappers over `fetch`)
|
|
- `src/lib/` — constants, utilities, WebSocket hooks
|
|
- `src/types/` — shared TypeScript types mirroring backend schemas
|
|
- `src/hooks/` — reusable React hooks (see [Frontend hooks](../docs/frontend/hooks.md))
|
|
|
|
## Hooks
|
|
|
|
The panel exposes public hooks under `@/hooks`. See [Frontend hooks](../docs/frontend/hooks.md) for full API reference and examples.
|
|
|
|
### `usePageRefresh`
|
|
|
|
Page-scoped refresh coordinator. Pages register data-refetch callbacks; the navbar refresh button in `src/components/layout/header.tsx` calls `refresh()` and reflects the combined `loading`/`disabled` state. The button is disabled when no callbacks are registered (the registry is empty) and while a refresh is in progress.
|
|
|
|
```tsx
|
|
import { usePageRefresh } from "@/hooks";
|
|
|
|
const { register, unregister, refresh, loading, disabled } = usePageRefresh();
|
|
```
|
|
|
|
- `disabled` is `true` when no callbacks are registered (there is nothing to refresh)
|
|
- `disabled` becomes `false` once a callback is registered
|
|
- `disabled` returns to `true` when all callbacks are unregistered
|
|
|
|
Wrap your page or layout in `PageRefreshProvider` from `@/components/providers` before consuming the hook. Dashboard pages should register their refetch callbacks and avoid adding inline "Refresh" buttons; see [`docs/frontend/components/page-refresh-provider.md`](../docs/frontend/components/page-refresh-provider.md) for the full wiring list and examples.
|
|
|
|
## Dependency Management
|
|
|
|
### Version Alignment
|
|
|
|
When bumping **Next.js**, always update **eslint-config-next** to match the same version. These packages must stay in sync. See `UPGRADE.md` for detailed procedures and troubleshooting.
|
|
|
|
## Backend schema changes
|
|
|
|
When the backend changes response shapes, mirror them in `src/types/` and the relevant `src/lib/api/` module. Keep API paths relative so nginx routing keeps working.
|