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

2.9 KiB

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):

    {
      "dependencies": {
        "next": "16.2.6"
      },
      "devDependencies": {
        "eslint-config-next": "16.2.6"
      }
    }
    
  2. Regenerate the lockfile without deleting node_modules:

    cd panel
    pnpm install
    

    This updates pnpm-lock.yaml while preserving node_modules, keeping the resolution deterministic.

  3. Run the quality gate:

    cd panel
    pnpm lint
    pnpm typecheck
    pnpm test
    pnpm build
    

    All must pass with no errors before committing.

  4. Commit the changes:

    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