feat: implement drag-and-drop agent builder with bug fixes#36
Open
sheikhlimon wants to merge 23 commits intomukulboro:mainfrom
Open
feat: implement drag-and-drop agent builder with bug fixes#36sheikhlimon wants to merge 23 commits intomukulboro:mainfrom
sheikhlimon wants to merge 23 commits intomukulboro:mainfrom
Conversation
- AGENTS.md: Project rules and conventions - PLAN.md: Master plan with 6 phases - BUGS.md: Analysis of 5 intentional bugs in original code Co-Authored-By: Claude (glm-5)
- Initialize husky with bunx - Add prepare script to package.json - Configure pre-commit hook to run lint
- Add DESIGN.md with UI reference
- Install @dnd-kit packages for drag-and-drop - Install Tailwind CSS v4 and Vite plugin - Configure vite.config.ts with Tailwind plugin - Add Tailwind import to index.css - Update pre-commit hook to run lint
- PLAN.md: Add Zustand, restructure phases with checkboxes - DESIGN.md: Replace generic design with Figma annotations - AGENTS.md: Update file organization and dependencies
- Add Prettier for code formatting - Add eslint-config-prettier to avoid conflicts - Configure lint-staged for staged files only - Update pre-commit hook to use lint-staged
- Use useRef to track current agentName value - Fix TypeScript error by replacing 'any' with 'unknown' - Remove tsc-files from lint-staged (incompatible with project references)
- Create centralized TypeScript interfaces in src/types/index.ts - Create Zustand store with persist middleware for savedAgents - Refactor App.tsx to use store instead of useState hooks - Stale closure fixed via getState() pattern for analytics interval
- Create ComponentLibrary, DraggableChip, AssemblyCanvas, DropSlot - Create AgentPreview with live updates, SavedAgentsGallery - Add dnd-kit for drag-and-drop with typed slots - Implement warm neutral design system (DESIGN-v2.md) - Add CSS variables for colors, spacing, chip variants - Fixed panel widths: 260px left, 300px right - Inter font for UI, IBM Plex Mono for preview panel only
- Replace custom CSS classes with Tailwind utilities - Fix DragOverlay to show actual dragged chip - Add CSS Grid responsive layout (lg: 3-panel, md: 2-col, sm: stack) - Use 12px text throughout for readability - Move provider display from preview to canvas - Update DESIGN.md header spec (session timer, no traffic lights) - Delete unused App.css
- Items disappear from library when dropped in canvas, reappear when removed - Click chip in canvas to remove (no X button needed) - Add DropPlaceholder component for consistent "+ drop here" styling - Profile+Provider shown in single bordered card in preview - Preview tags use neutral colors matching DESIGN.md - Add resetForm action to store for clearing selection
- Increase text sizes for better readability (text-xs body, text-sm titles) - Add collapsible saved agents gallery with agent count - Add clear all saved agents functionality - Improve save button (border-only style, disabled when no name) - Add timer icon and terminal-style loading state - Remove console.log, keep analytics structure with comment - Update DESIGN.md to match actual implementation - Update PLAN.md to mark Phase 6 complete - Update AGENTS.md file structure to reflect reality
- Tap chips on mobile/tablet (<960px) to add them to slots - Disable drag on smaller screens, use click instead - Single vertical scroll on mobile instead of separate panel scrolls - Horizontal borders between sections on mobile, side borders on desktop - Chips stay visible in library on mobile for easy reuse
- Save button now uses green background with solid border (not rounded) - Provider dot changed to subtle rounded square (1px radius) - Select provider has subtle focus border change for accessibility - Add shrink-0 to provider dot to prevent flex shrinking
Author
|
@mukulboro Enjoyed the challenge, really liked the approach. Thanks for putting it together. |
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
Transformed the buggy, unstyled scaffold into a polished, performant AI Agent Builder with a terminal-inspired drag-and-drop interface. The original dropdown-based UI has been replaced with a three-panel motherboard layout — component library, assembly canvas, and live agent preview — with full drag-and-drop interaction via dnd-kit.
Design
Figma: Link
Demo video:
screenrecording-2026-04-01_02-04-31.mp4
Full design spec documented in
.claude/DESIGN.mdin the repo.Bugs Fixed
.push()on state arrayagentNamegetState()useEffectdeps arrays incorrect.find()calls on every renderArchitecture Decisions
AI Tools Used
CV
Added to
/publicfolder as a PDF.