backend.ai-webui

Bump version to next alpha and update dependencies after release.

Create a release branch, tag, and GitHub release for Backend.AI WebUI.

Enhance React component documentation with JSDoc, improved Storybook stories, and autodoc configuration.

Create or Update BUI Component Story (project)

Update React components with JSDoc and enhanced Storybook stories with autodoc functionality.

Generate Relay-based Nodes components with BAITable integration following established patterns (BAIUserNodes, SessionNodes, BAISchedulingHistoryNodes, BAIRouteNodes). Automatically creates component file with GraphQL fragment, type definitions, column configurations, and customization patterns. Minimal user input required - just provide GraphQL type name and the skill generates a complete starting template.

Use when creating a new React component under `react/src/` or `packages/backend.ai-ui/src/`, or refactoring one's file layout, import order, `'use memo'` placement, hook call order, or prop interface. Covers naming conventions (`BAI*`, `*Nodes`, `*Page`) and React 19 rules.

Use when refactoring logic out of a fat component into a custom hook, deciding hook vs helper, applying `useEffectEvent` to avoid stale closures, or designing a hook's return shape. Covers hook placement, naming, and parameterization conventions.

Use when creating a `*Nodes` component bound to a Relay fragment, wiring a page to one with `customizeColumns` / URL state / pagination, adding row selection and bulk actions, or setting up CSV export. Covers the query orchestrator + fragment split and `BAITable` conventions.

Create Relay-based infinite scroll select components extending BAISelect. Supports name-based values (usePaginationFragment) and id-based values (useLazyLoadQuery + useLazyPaginatedQuery) with search, optimistic updates, and multiple selection modes.

Start the project's development server. For backend.ai-webui this means `pnpm dev` (no separate wsproxy needed by default). For other projects, read the project's README.md and package.json to determine the right command. When a Claude Code `/color <name>` slash command is visible in the current conversation history, set VITE_THEME_HEADER_COLOR to the matching hex so the dev server's header reflects this Claude session's color. When `/rename <name>` is visible, slugify the name and pass it as PORTLESS_APP_NAME so the dev URL reflects the session name (falls back to FR-XXXX from the branch, then to the current PR number). When the current branch's PR description names a backend test server (bare IP, `host:port`, or full URL), set VITE_DEFAULT_API_ENDPOINT so the login screen pre-fills that endpoint and any stale session targeting a different backend is logged out. Trigger on: "start dev server", "run dev", "pnpm dev 띄워", "개발 서버 띄워", "dev 서버 시작", "boot the dev environment", "실행해줘 dev".

Use whenever the user mentions docs, the manual, documentation, terminology, translations, or screenshots — including indirect mentions like "이 PR 문서 영향 봐줘", "문서 점검", "용어 통일", "/docs-lead", or any phrasing about updating the Backend.AI WebUI user manual under packages/backend.ai-webui-docs/. Single entry point that runs docs-lint diagnosis, surfaces a prioritized queue via AskUserQuestion, and orchestrates the four docs worker subagents (planner / writer / screenshot-capturer / reviewer) through approval gates.

Use when creating or editing a modal/drawer, adding a form inside one, debugging stale state or close-animation issues, or deciding between `BAIModal` and `modal.confirm`. Covers `BAIUnmountAfterClose` wrapping, `onRequestClose` convention, and id-based open state.

Download a released backend.ai-webui bundle from GitHub Releases and serve it locally via Portless so the URL carries the version name (e.g. `https://v26-4-8-rc-3.localhost:1355`). Uses `scripts/serve-release.sh` under the hood, which fetches the bundle, copies the local `config.toml` / plugins into the extracted folder, and runs `serve` behind Portless. Trigger on: "릴리즈 띄워", "릴리즈 버전 실행", "serve release", "run release", "release 띄워줘", "특정 버전 띄워줘", "released bundle 띄워줘", "stage release", or any request that names a specific webui release version (e.g. "v26.4.8-rc.3 실행해줘", "26.4.7 띄워줘").

Find WebUI dev server address and Backend.AI API endpoint/credentials for testing. Trigger on: "which server", "connection info", "login credentials", "dev server URL", "API endpoint", "where to connect", "how to login", "test server", or when needing to interact with the running WebUI (screenshots, live checks, E2E).

Use when wiring an async button (submit, delete, save, toggle), batch mutation, or showing success/error feedback. Covers `BAIButton.action`, `Promise.allSettled` + `_.groupBy`, `App.useApp()` (message/modal), `upsertNotification` for long-running work, and `updateFetchKey()` for refresh.

Use when writing or editing components that use `antd` `Form`/`Form.Item`, adding `rules` validators, extracting grouped `*FormItems`, or migrating `setValue` callback props to `onChange`. Covers `initialValues` vs `defaultValue`, required markers, and cross-field validation.

Use when laying out a page, card header, or action row with `BAIFlex`, choosing spacing values, or migrating `<Space>` / raw `<Flex>` to `BAIFlex`. Covers gap token scale, `token.*` spacing, `BAICard` extra alignment, and responsive grid patterns.

Use when fetching Relay data with `useLazyLoadQuery`, choosing a `fetchPolicy`, placing Suspense boundaries, triggering a refetch after mutation, or deciding when `useTanQuery` (REST) is acceptable. Covers `fetchKey` + `useDeferredValue` and auto-refresh patterns.

Use when page state (filter, order, tab, pagination, modal-open) must survive reload or be URL-shareable, or when migrating `use-query-params` to `nuqs`. Covers `useQueryStates`, `parseAs*` parsers, `history: 'replace'`, and pairing with `useDeferredValue` for React Transitions.

GraphQL/Relay integration patterns for Backend.AI WebUI React components. Covers useLazyLoadQuery, useFragment, useRefetchableFragment, fragment architecture (query orchestrator + fragment component), naming conventions, modern directives (@required, @alias), client directives (@since, @deprecatedSince, @skipOnClient), and query optimization.