Qredence 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-labelandtitlefor compact actions. - Keep
InputBarmode/model controls insideleftActions. - Avoid editing
apps/web/src/routeTree.gen.tsmanually.
Validation
pnpm --filter web typecheck
pnpm --filter @workspace/ui typecheck
pnpm --filter web lint
pnpm --filter @workspace/ui lint