Enhance architecture diagram and UI components - #255
Merged
Conversation
- Add proper authentication error handling with user feedback - Fix button disable bug by resetting isGenerating state - Improve interval cleanup with null checks to prevent memory leaks - Fix race condition by redirecting after successful API response - Add support for displaying documentation commit warnings - Ensure proper state management in success and error paths Generated with [Devin](https://devin.ai) Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
- Add trailing comma removal for objects and arrays - Normalize single quotes to double quotes for valid JSON - Implement fallback JSON extraction from embedded text - Add response structure validation - Enhance error logging with detailed parse error information - Prevent hard failures from common JSON formatting issues Generated with [Devin](https://devin.ai) Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
- Track documentation commit errors without blocking project creation - Include warning messages in API response for partial success scenarios - Allow project creation to succeed even if documentation commits fail - Provide user feedback through toast notifications for warnings - Improve error logging with detailed GitHub API error information Generated with [Devin](https://devin.ai) Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
- Update CreateProject toast progress bars with gradient effects and shimmer animations - Add percentage indicators and improved status text formatting - Enhance success/error states with icons and better visual feedback - Improve dark mode support for toast colors Generated with [Devin](https://devin.ai) Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
- Implement AI chat interface for architecture diagram exploration - Add details dialog showing comprehensive architecture information - Enhance node rendering with expandable tech stack display - Add glass morphism styling and improved visual hierarchy - Support component, API, and database information display Generated with [Devin](https://devin.ai) Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
- Add expandable tech stack display with show/hide functionality - Refine node styling with smaller, more compact design - Improve handle styling and border visibility - Add better spacing and typography for node content - Support longer tech stack lists with expand/collapse Generated with [Devin](https://devin.ai) Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
- Implement shimmer animation for progress bars and loading states - Add bounce animation for interactive elements - Provide smooth visual feedback for user interactions Generated with [Devin](https://devin.ai) Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
github-actions
Bot
added
area:backend
There was a problem hiding this comment.
Pull request overview
This PR upgrades the “ZLAM” architecture visualization experience by adding an interactive architecture view (details + agent chat panel), refining node/toast UI styling, and improving project-generation resilience through better backend parsing and GitHub-doc commit warning propagation.
Changes:
- Add architecture details dialog + “Architecture Agent” chat side panel, and refresh several architecture map UI panels/controls.
- Update node/toast styling and introduce shimmer/bounce animation utilities for richer progress/typing feedback.
- Improve project creation UX and backend robustness by adding auth failure handling, JSON parsing hardening, and non-fatal GitHub documentation commit warnings.
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| src/index.css | Adds shimmer/bounce keyframes and utility classes used by progress/typing indicators. |
| src/components/zlam/LiquidGlassNode.tsx | Adds expandable tech stack display and refines node layout/styling. |
| src/components/zlam/ArchitectureView.tsx | Introduces architecture details dialog and an agent-style chat panel with regenerate action. |
| src/components/zlam/ArchitectureMap.tsx | Refactors map UI (palette/search/panels) and adjusts imports/controls. |
| src/components/ui/toaster.tsx | Tweaks toast layout to better accommodate actions/content alignment. |
| src/components/ui/toast.tsx | Enhances toast visuals (blur, shadows, transitions) and viewport spacing. |
| src/components/dashboard/CreateProject.tsx | Improves create-project flow with auth error handling, richer progress UI, and warning display. |
| backend/services/kiloCodeGateway.js | Improves robustness of parsing LLM JSON responses (cleanup + extraction + validation). |
| backend/routes/generateProjectRoutes.js | Adds graceful warning propagation when GitHub documentation commits fail. |
Suppressed comments (3)
src/components/zlam/ArchitectureMap.tsx:148
FlowPositionFnis now unused, and thisconst elk = new ELK();redeclareselk(there’s already one earlier in the file), which will cause a compile error. Remove both declarations here.
type FlowPositionFn = (clientPos: { x: number; y: number }) => { x: number; y: number };
const elk = new ELK();
src/components/zlam/ArchitectureView.tsx:138
- In the quick-action path,
setChatInput(action)is followed immediately byhandleSendMessage(). Because React state updates are async,handleSendMessagecan see the previouschatInputvalue and send nothing.
} else {
setChatInput(action);
handleSendMessage();
}
};
backend/services/kiloCodeGateway.js:207
- Same issue as above:
/'/gwill also replace apostrophes inside values and can make JSON invalid. Prefer converting only single-quoted string literals.
jsonString = jsonString
.replace(/,\s*}/g, '}') // Remove trailing commas in objects
.replace(/,\s*]/g, ']') // Remove trailing commas in arrays
.replace(/'/g, '"') // Replace single quotes with double quotes
.trim();
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
17
to
21
| import ELK from 'elkjs/lib/elk.bundled.js'; | ||
| import '@xyflow/react/dist/style.css'; | ||
| import { mockArchitectureData } from './mockArchitectureData'; | ||
| import mockArchitectureData from './mockArchitectureData'; | ||
| import LiquidGlassNode from './LiquidGlassNode'; | ||
| import type { ArchitectureNode, ArchitectureEdge, ArchitectureDiagram } from './mockArchitectureData'; |
Comment on lines
+58
to
+63
| const architecture = projectData?.architecture || {}; | ||
| const highLevel = architecture.highLevel || 'No architecture description available.'; | ||
| const frontend = architecture.frontend || {}; | ||
| const backend = architecture.backend || {}; | ||
| const database = architecture.database || {}; | ||
| const integrations = architecture.integrations || []; |
Comment on lines
+71
to
+78
| const handleSendMessage = async () => { | ||
| if (!chatInput.trim()) return; | ||
|
|
||
| const userMessage = chatInput.trim(); | ||
| console.log('Sending message:', userMessage); | ||
| setChatMessages(prev => [...prev, { role: 'user', content: userMessage }]); | ||
| setChatInput(''); | ||
| setIsTyping(true); |
Comment on lines
60
to
64
| {nodeData.sublabel && ( | ||
| <p className="text-xs text-muted-foreground truncate">{nodeData.sublabel}</p> | ||
| <p className="text-[10px] text-muted-foreground truncate mb-1.5" title={nodeData.sublabel}> | ||
| {nodeData.sublabel} | ||
| </p> | ||
| )} |
Comment on lines
+104
to
111
| {(hasMoreTech || nodeData.sublabel?.length > 50) && ( | ||
| <button | ||
| onClick={() => setIsExpanded(!isExpanded)} | ||
| className="text-muted-foreground hover:text-foreground transition-colors" | ||
| > | ||
| {isExpanded ? <ChevronUp className="w-3 h-3" /> : <ChevronDown className="w-3 h-3" />} | ||
| </button> | ||
| )} |
Comment on lines
+90
to
+94
| jsonString = jsonString | ||
| .replace(/,\s*}/g, '}') // Remove trailing commas in objects | ||
| .replace(/,\s*]/g, ']') // Remove trailing commas in arrays | ||
| .replace(/'/g, '"') // Replace single quotes with double quotes | ||
| .trim(); |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
Test plan
Generated with Devin