Move project description and tech stack research from CLAUDE.md into openspec/specs/project/ and openspec/specs/stack/. Slim CLAUDE.md to a pointer file. Populate config.yaml with project context. Add OpenSpec CLI skills and commands. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2.5 KiB
Purpose
Define the chat interface — message display, input handling, auto-scroll, and routing.
Requirements
Requirement: Message display
The chat page SHALL display messages in a vertically scrolling list, with each message showing the sender role (user or assistant), the message content, and a visual distinction between user and assistant messages (e.g., alignment, color, or avatar).
Scenario: User message displayed
- WHEN the user sends a message
- THEN the message appears in the message list aligned or styled to indicate it is from the user
Scenario: Assistant message displayed
- WHEN the assistant responds
- THEN the response appears in the message list with distinct styling from user messages (different alignment, color, or avatar)
Scenario: Message ordering
- WHEN multiple messages exist in the conversation
- THEN messages are displayed in chronological order, oldest at top
Requirement: Message input
The chat page SHALL provide a text input area at the bottom of the page where the user can type and submit messages.
Scenario: Submit via button
- WHEN the user types text and clicks the send button
- THEN the message is added to the conversation and the input is cleared
Scenario: Submit via Enter key
- WHEN the user types text and presses Enter
- THEN the message is submitted (same as clicking send)
Scenario: Empty input blocked
- WHEN the user attempts to send an empty or whitespace-only message
- THEN nothing is sent and no message is added
Requirement: Hardcoded response
In this phase, the assistant SHALL reply with a hardcoded message to every user input. This stubs the AI integration point for future phases.
Scenario: Bot replies to any input
- WHEN the user sends any message
- THEN the assistant replies with a hardcoded response (e.g., "This is a placeholder response. AI integration coming soon!")
Requirement: Auto-scroll
The message list SHALL automatically scroll to the newest message when a new message is added.
Scenario: New message scrolls into view
- WHEN a new message (user or assistant) is added to the conversation
- THEN the message list scrolls to the bottom so the new message is visible
Requirement: Chat page is default route
The chat page SHALL be the default route (/) of the application.
Scenario: App opens to chat
- WHEN the user navigates to the root URL
- THEN the chat page is displayed