Skip to content

BRIC-4: Init composable-ui React frontend#1

Merged
Kaiohz merged 9 commits intomainfrom
BRIC-4/init-composable-ui
Apr 6, 2026
Merged

BRIC-4: Init composable-ui React frontend#1
Kaiohz merged 9 commits intomainfrom
BRIC-4/init-composable-ui

Conversation

@Kaiohz
Copy link
Copy Markdown
Contributor

@Kaiohz Kaiohz commented Apr 6, 2026

Jira

BRIC-4

Changes

  • React 18 + TypeScript + Vite 5 frontend for composable-agents API
  • Hexagonal architecture (domain/infrastructure/application layers)
  • Agent management: list, create (YAML upload), view config, delete
  • Real-time chat with SSE streaming via @microsoft/fetch-event-source
  • HITL (Human-in-the-loop) support for tool call approval/rejection
  • Thread history sidebar grouped by agent name
  • Material Design 3 inspired design (Space Grotesk + Inter fonts)
  • Zustand + React Query for state management
  • 44 tests (Vitest + React Testing Library)
  • CI/CD: build + tests + Trivy + SonarQube / Docker + Flux GitOps
  • Multi-stage Dockerfile (bun -> nginx:alpine)

Tests

  • 44 unit tests passing
  • Build passes
  • ESLint + Prettier clean
  • Docker build + compose verified
  • QA on docker compose stack

Kaiohz added 8 commits April 6, 2026 07:38
React + TypeScript + Vite frontend for composable-agents API.

Features:
- Agent management (CRUD with YAML upload)
- Real-time chat with SSE streaming
- HITL (Human-in-the-loop) support
- Thread history grouped by agent

Stack: React 18, Tailwind CSS, shadcn/ui, Zustand, React Query
Architecture: Hexagonal (domain/infrastructure/application)
CI/CD: Build + tests + Trivy + SonarQube / Docker + Flux
- Add agent selection dialog in ThreadSidebar for new conversations
- Show user message immediately (optimistic rendering) before API response
- Add stream/standard mode toggle in ChatInput
- Default to standard mode (streaming has backend issues)
- Show typing indicator during streaming
- 61 tests passing
Backend streaming fix applied (composable-agents PR #8).
Set useStreaming=true as default in useChatStore.
- Auto-scroll triggers on pendingUserMessage and isStreaming changes
- Add overflow-hidden on AI message bubble container
- Add break-words and overflow-wrap-anywhere on markdown content
- Add overflow-x-auto on code blocks
Replace subtle "..." text with a spinner + "Thinking..." label in an
agent-styled bubble. Shows immediately after sending a message, before
any streaming content arrives.
Show spinner throughout the streaming session, not just before first
chunk. Displays "Thinking..." initially, then "Processing..." once
content starts arriving. Stays visible until stream fully completes.
Single agent bubble with content + spinner at the bottom. Shows
"Thinking..." before first chunk, then content + "Processing..." below
until stream completes.
@Kaiohz Kaiohz marked this pull request as ready for review April 6, 2026 07:51
SonarQube fixes (27 of 32 resolved):
- Replace div role="dialog" with native <dialog> elements
- Add Readonly<> to all component props (S6759)
- Fix ambiguous JSX spacing (S6772)
- Extract nested ternary (S3358)
- Remove deprecated FormEvent imports (S1874)
- Remove unnecessary type assertions (S4325)
- Fix unknown|null union type (S6571)

Coverage: 46.9% → 79.1% (148 tests, +87 new tests)
- Hook tests for all agent and chat hooks
- Component tests: AgentConfigViewer, CreateAgentDialog, TopNav,
  MainLayout, HITLReviewPanel
- Infrastructure: axiosInstance interceptor test
@Kaiohz Kaiohz merged commit 949c43c into main Apr 6, 2026
1 check passed
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