Files
roboco/panel/UPGRADE.md
T
6e57066bd6 [a360b6e3] Redesign A2A page with conversation-first layout and agent identity (#401)
* [54b94e44] A2A page: filter controls + agent identity consistency (#387) (#392)

* [54b94e44] feat(a2a): add filter bar and unify agent avatars + pulse across views

Adds a status (active/all) + free-text search filter bar above the A2A
switchboard/list content, backed by a shared a2a-filter-utils module so
both A2ASwitchboard's pairs and A2AConversationList's conversations
narrow identically. Extracts A2APairCard's pulse-flash state into a
reusable usePulseFlash hook and exports its PairAvatar so the classic
conversation list now renders the same two-participant avatar and
emerald pulse-flash affordance the switchboard already had.

* [54b94e44] docs(a2a): add comprehensive filtering and avatar documentation

Documented the new A2A filter bar, filter utilities, pulse-flash hook, and
conversation list API changes. Includes examples, testing guidance, and
migration notes for the pulses prop requirement.

---------

Co-authored-by: Frontend Developer 1 <fe-dev-1@roboco.tech>
Co-authored-by: Frontend Documenter <fe-doc@roboco.tech>

* [54417f0c] UX/UI: design A2A conversation-first layout and agent identity (#399)

* [f612a5ab] Add conversation-first layout, agent identity, and live-stream affordance spec (#384)

Co-authored-by: UX/UI Developer 1 <ux-dev-1@roboco.tech>

* [7ed2ef71] docs(ux_ui): add filter-control design spec for A2A conversations (#383)

Co-authored-by: UX/UI Developer 2 <ux-dev-2@roboco.tech>

---------

Co-authored-by: UX/UI Developer 1 <ux-dev-1@roboco.tech>
Co-authored-by: UX/UI Developer 2 <ux-dev-2@roboco.tech>

* [f563bbc9] Implement conversation-first A2A layout, identity colors, connection states, transcript motion, and empty/error states (#423) (#427)

* [f563bbc9] feat(a2a): conversation-first layout, team-color identity, connection states, transcript motion, empty/error states

Implements docs/ux_ui/design/02-conversation-first-layout-agent-identity-live-stream.md:
- xl:+ collapsible Context pane (identity cards, linked-task summary, no-task hint), persisted via the existing zustand ui-store
- getAgentTeamColor + TEAM_COLOR_CLASSES in agent-utils.ts, applied to PairAvatar, the transcript row avatar, and the context pane
- A2AConnectionBadge/A2AConnectionBanner rendering all four ConnectionState values distinctly with a motion-reduce-guarded pulsing dot and a dismissable reconnecting/disconnected strip
- A2ATranscript: transform/opacity-only new-row entrance transition, scrolled-up "New messages" pill, split hasSelection/empty/error states with a scoped Retry
- Unit tests for every new pure helper and component

* [f563bbc9] docs(a2a): conversation-first layout, team-color identity, connection states, transcript motion, empty/error states

Document the new conversation-first A2A layout features:
- Agent team-color system (getAgentTeamColor, TEAM_COLOR_CLASSES) for six cell buckets
- A2AContextPane component with identity cards, linked task summary, no-task hint
- Connection state rendering (A2AConnectionBadge, A2AConnectionBanner) for all four ConnectionState values
- Transcript entrance motion with transform/opacity-only transitions and prefers-reduced-motion guards
- Split empty/error states (no selection, no messages, fetch error with scoped retry)
- Page-level integration with xl:+ responsive grid layout

Includes component API, usage examples, testing guidance, accessibility notes, and design rationale.

---------

Co-authored-by: Frontend Developer 2 <fe-dev-2@roboco.tech>
Co-authored-by: Frontend Documenter <fe-doc@roboco.tech>

* [478f027c] Implement A2A conversations filter control per conversations-filter-control.md (#445) (#448)

* [478f027c] feat(a2a): add multi-dimension Popover filter panel for A2A conversations

Replace the free-text search + active/all toggle with the Popover-triggered
filter control from conversations-filter-control.md: Agent multi-select
checkboxes, a Task id-fragment input with a "No linked task" toggle, Status
toggle buttons, and a date range, plus an active-filter chip row and Clear
all. Filtering applies to both the switchboard (Agent only) and conversation
list (all four dimensions) per the design doc's per-view rules.

* [478f027c] docs(a2a): add comprehensive filter-control guide covering component API, filter dimensions, and per-view rules

Documents A2AFilterBar component and filter utilities with:
- Component API and props
- All 4 filter dimensions (Agent, Task, Status, Date range)
- Per-view rules (Switchboard vs List)
- Usage examples and parent setup
- Filter logic and match predicates
- Testing guide and accessibility notes
- Design notes on client-side filtering limitation
- Links to related components and the design spec

Helps developers understand, use, and maintain the A2A conversations
filter control without needing to read the design doc or component source.

---------

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 1 <fe-dev-1@roboco.tech>
Co-authored-by: Frontend Documenter <fe-doc@roboco.tech>
Co-authored-by: UX/UI Developer 1 <ux-dev-1@roboco.tech>
Co-authored-by: UX/UI Developer 2 <ux-dev-2@roboco.tech>
Co-authored-by: Frontend Developer 2 <fe-dev-2@roboco.tech>
Co-authored-by: Renn F <rennf93@users.noreply.github.com>
2026-07-11 07:46:29 +02:00

81 lines
2.9 KiB
Markdown

# Panel Upgrade Guide
## Next.js Version Bumps
The RoboCo control panel runs on **Next.js 16** with **TypeScript** and **Tailwind CSS**. Upgrading Next.js requires careful attention to dependency alignment.
### Critical: eslint-config-next must track the same version as next
When you bump the `next` package, **always update `eslint-config-next` to match**. This package is Next.js's official ESLint configuration and must stay in sync with the version of Next.js itself.
**Example:** if you upgrade `next` from `16.1.1` to `16.2.6`, also upgrade `eslint-config-next` from `16.1.1` to `16.2.6`.
### Upgrade Procedure
1. **Update package.json** with the new version(s):
```json
{
"dependencies": {
"next": "16.2.6"
},
"devDependencies": {
"eslint-config-next": "16.2.6"
}
}
```
2. **Regenerate the lockfile without deleting node_modules:**
```bash
cd panel
pnpm install
```
This updates `pnpm-lock.yaml` while preserving `node_modules`, keeping the resolution deterministic.
3. **Run the quality gate:**
```bash
cd panel
pnpm lint
pnpm typecheck
pnpm test
pnpm build
```
All must pass with no errors before committing.
4. **Commit the changes:**
```bash
git add panel/package.json panel/pnpm-lock.yaml
git commit -m "chore(panel): align dependencies to Next.js X.Y.Z"
```
### What Changed in 16.1.1 → 16.2.6
This bump included updates to:
- `@babel/parser`, `@babel/types`, `@babel/template`, `@babel/traverse` — minor version improvements
- `@babel/generator`, `@babel/helper-module-imports`, `@babel/helper-validator-identifier` — updated to handle edge cases
- `tinyglobby` — dependency used by ESLint, upgraded from 0.2.15 to 0.2.17
- `semver` — dev tooling dependency updated
- Removal of stale `@babel/*` and `@emnapi/*` package variants (transitive deduplication)
**No breaking changes to panel code were required** — the bump was purely dependency-graph alignment. If a future Next.js bump does require code changes (e.g., API deprecations), those will be noted by TypeScript or runtime errors during testing.
### Troubleshooting
- **If `pnpm install` fails:** Check that you have write permissions in `panel/` and that your `pnpm` version is up to date (`pnpm -v`).
- **If lint/typecheck/test fail after the bump:** Read the error messages carefully. They may point to:
- Removed or deprecated ESLint rules (consult the Next.js changelog for your target version)
- Type incompatibilities (update any TypeScript-related types)
- Runtime incompatibilities (these are rare but need investigation)
- **If the build fails:** Check the Next.js release notes for your target version for any breaking changes to the build process.
### References
- [Next.js Releases](https://github.com/vercel/next.js/releases)
- [Next.js Upgrade Guide](https://nextjs.org/docs/upgrading)
- [ESLint Config for Next.js](https://www.npmjs.com/package/eslint-config-next)