# Agent UI Workflows

> Build or modify Fleet Pi's React Agent Elements UI, including InputBar controls, tool cards, question prompts, resource drawer, model picker, mode selector, and streaming state.

- Skill: `qredence/agent-ui-workflows` (Agent Skill)
- Install (CLI): `npx skillmds@latest add qredence/agent-ui-workflows`
- Raw SKILL.md: https://api.skillmd.com/api/skills/qredence/agent-ui-workflows/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: Qredence (https://skillmd.com/u/qredence)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/qredence/agent-ui-workflows

---


# Agent UI Workflows

Use this skill for UI changes in the chat surface or shared Agent Elements package.

## Key Files

- Chat page composition: `apps/web/src/routes/index.tsx`
- Chat message and tool types: `@workspace/pi-protocol/chat-types` (shim: `packages/hax-design/src/components/agent-elements/chat-types.ts`)
- Input composer: `packages/hax-design/src/components/agent-elements/input-bar.tsx`
- Mode and model controls: `packages/hax-design/src/components/agent-elements/input/`
- Tool dispatch: `packages/hax-design/src/components/agent-elements/tools/tool-renderer.tsx`
- Tool metadata: `packages/hax-design/src/components/agent-elements/tools/tool-registry.ts`
- Question prompt: `packages/hax-design/src/components/agent-elements/question/`

## Design Rules

- Keep controls compact and scannable; this is an operational coding tool, not a landing page.
- Use existing Agent Elements primitives and direct-file imports.
- Prefer icon buttons with `aria-label` and `title` for compact actions.
- Keep `InputBar` mode/model controls inside `leftActions`.
- Avoid editing `apps/web/src/routeTree.gen.ts` manually.

## Validation

```zsh
pnpm --filter web typecheck
pnpm --filter @workspace/ui typecheck
pnpm --filter web lint
pnpm --filter @workspace/ui lint
```