feat: Agentic AI UI #275
Draft
feat: Agentic AI UI #275
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Add AgentPage with ChatGPT-style chat interface - Add AgentLayout with sidebar containing: - ShipSec AI branding with "Powered by Claude Opus" - New Chat button - Search conversations - Collapsible Studio section with nav links - Your Chats conversation history - Settings and theme toggle - Add chatStore for managing conversations with Zustand - Add user/assistant avatars to chat messages - Move existing studio routes to /studio/* path - Support light/dark theme via existing theme store Signed-off-by: Aseem Shrey <LuD1161@users.noreply.github.com>
- Add renameConversation action to chatStore - Add inline edit mode for conversation titles in sidebar - Show pencil icon on hover to start rename - Support Enter to save, Escape to cancel - Frontend-only, no backend API changes Signed-off-by: Aseem Shrey <LuD1161@users.noreply.github.com>
Move send button outside textarea wrapper to fix positioning issue. Button now aligns properly as a flex sibling of the input. Signed-off-by: Aseem Shrey <LuD1161@users.noreply.github.com>
- Add ThinkingSection component with live elapsed time display
("Thinking Xs" while active, "Thought for X seconds" when collapsed)
- Simplify all chat handlers from nested setTimeout patterns to single
timeouts for a clean thinking → content flow
- Add rich message content types (workflow buttons, finding cards,
GuardDuty alerts, action buttons, repo selection)
- Add conversation persistence with module-level cache and Zustand store
- Fix race condition in conversation-switching effect that overwrote
richMessages when creating new conversations from addRichMessage
- Add multi-step investigation flow for security alert analysis
- Add JIRA ticket creation flow via text input
- Remove unused AWSIcon and StreamingText components
Signed-off-by: Aseem Shrey <LuD1161@users.noreply.github.com>
When typing text containing "finding", "review", or "aws" in the chat input, handleSend was calling handleReviewFindings() which added its own user message, resulting in a duplicate bubble. Now uses simulateStreamingResponse() directly, matching the pattern of the workflow and scan branches. Signed-off-by: Aseem Shrey <LuD1161@users.noreply.github.com>
Add StatusBar component showing live status for security scanners, GitHub repo integrations, and MCP tools. Integrate into AgentPage. Signed-off-by: Aseem Shrey <LuD1161@users.noreply.github.com>
…hat UX Signed-off-by: Krishna Mohan <krishanmohank974@gmail.com>
Signed-off-by: Krishna Mohan <krishanmohank974@gmail.com>
|
Codex usage limits have been reached for code reviews. Please check with the admins of this repo to increase the limits by adding credits. |
|
Codex usage limits have been reached for code reviews. Please check with the admins of this repo to increase the limits by adding credits. |
1 similar comment
|
Codex usage limits have been reached for code reviews. Please check with the admins of this repo to increase the limits by adding credits. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR implements significant UI/UX improvements to the ShipSec Studio frontend, including proper authentication integration, sidebar enhancements, improved scroll behavior, and better code readability.
🎯 Key Changes
1. Authentication Integration ✅
user.imageUrluser.firstNameoruser.email.env.exampleVITE_AUTH_PROVIDERoptions (local, clerk)VITE_CLERK_PUBLISHABLE_KEYandVITE_CLERK_SECRET_KEYFiles:
AppLayout.tsx,AgentPage.tsx,.env.example2. Sidebar Enhancements 📱
Sidebar Scroll Structure
flex-shrink-0for top,flex-1 overflow-y-autofor bottomBefore: Entire sidebar was scrollable
After: Navigation stays fixed, only chat history scrolls
Sidebar Collapse Behavior
Files:
AppLayout.tsx3. Chat History Simplification 💬
Removed unnecessary UI elements from chat history items:
Result: Cleaner, more minimal UI as requested
Files:
AppLayout.tsx4. Chat Interface User Images 👤
AgentPage.tsxFiles:
AgentPage.tsx5. Code Syntax Highlighting 🎨
Added syntax highlighting for code blocks in markdown content:
Supported languages: All Prism.js supported languages (JavaScript, TypeScript, Python, Go, etc.)
Files:
markdown.tsx,CodeBlock.tsx(new)6. MoMA Diagram Support 📊
Enhanced chat interface to render Mermaid/MoMA diagrams:
Files:
AgentPage.tsx,MoMADiagram.tsx(new component from previous work)7. Sidebar Toggle Buttons 🔘
Added sidebar toggle buttons to pages that previously didn't have them:
Files:
AgentPage.tsx,WorkflowList.tsx8. Minor UI Cleanup 🧹
AgentLayout.tsxandAgentPage.tsxSparklesicon import fromAgentLayout.tsxBefore:
After:
Testing
bun run testbun run lintbun run typecheckDocumentation
docs/guide.md) or checked that no updates are needed..ailogs when applicable.