Skip to content

Comments

feat(acp-client): sticky plan button and modal for chat window#168

Merged
raphaeltm merged 1 commit intomainfrom
feat/sticky-plan-button
Feb 23, 2026
Merged

feat(acp-client): sticky plan button and modal for chat window#168
raphaeltm merged 1 commit intomainfrom
feat/sticky-plan-button

Conversation

@raphaeltm
Copy link
Owner

Summary

  • When an agent creates a plan, it scrolls out of view as the conversation grows. This adds a persistent sticky button above the chat input that shows plan progress at a glance.
  • Clicking the button opens a modal with the full plan, status indicators, and a progress bar.
  • The button adapts its styling: blue/pulsing when work is in progress, green when all complete, gray when all pending.

Validation

  • pnpm lint
  • pnpm typecheck
  • pnpm test — 227 tests pass (21 new)
  • Additional validation run (if applicable)
  • Mobile and desktop verification notes added for UI changes

UI Compliance Checklist (Required for UI changes)

  • Mobile-first layout verified — button is compact, modal respects small screens with max-height 60vh
  • Accessibility checks completed — dialog role, aria-modal, aria-label, Escape key, focus trap
  • Shared UI components used or exception documented — follows ConfirmDialog modal pattern

Exceptions (If any)

N/A

Agent Preflight (Required)

  • Preflight completed before code changes

Classification

  • external-api-change
  • cross-component-change
  • business-logic-change
  • public-surface-change
  • docs-sync-change
  • security-sensitive-change
  • ui-change
  • infra-change

External References

N/A: Frontend-only change within existing acp-client package. No external APIs involved.

Codebase Impact Analysis

  • packages/acp-client/src/components/StickyPlanButton.tsx — New component
  • packages/acp-client/src/components/PlanModal.tsx — New component
  • packages/acp-client/src/components/AgentPanel.tsx — Integration (imports, state, render)
  • packages/acp-client/src/index.ts — New exports

Documentation & Specs

N/A: No behavior change to existing APIs or user-facing documentation. Components are self-documented via types and tests.

Constitution & Risk Check

  • Principle XI (No Hardcoded Values): No hardcoded URLs, timeouts, or limits. Modal z-index uses inline value consistent with existing patterns.
  • No security implications — purely presentational components reading existing plan data from conversation items.

When an agent creates a plan, a floating button now appears above the
chat input showing completion progress (e.g., "2/5"). Clicking it opens
a modal with the full plan and status indicators. The button pulses blue
when work is in progress and turns green when all steps complete.

- Add StickyPlanButton component with progress badge and status glow
- Add PlanModal component with backdrop, Escape-to-close, focus trap
- Integrate both into AgentPanel (plan derived from conversation items)
- Export new components and types from package index
- Add 21 unit tests covering rendering, interactions, and accessibility

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@raphaeltm raphaeltm merged commit 1326579 into main Feb 23, 2026
16 checks passed
simple-agent-manager bot pushed a commit that referenced this pull request Feb 23, 2026
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant