Skip to content

feat: implement drag-and-drop agent builder with bug fixes#36

Open
sheikhlimon wants to merge 23 commits intomukulboro:mainfrom
sheikhlimon:sheikhlimon/agent-builder-redesign
Open

feat: implement drag-and-drop agent builder with bug fixes#36
sheikhlimon wants to merge 23 commits intomukulboro:mainfrom
sheikhlimon:sheikhlimon/agent-builder-redesign

Conversation

@sheikhlimon
Copy link
Copy Markdown

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.md in the repo.

Bugs Fixed

Bug Issue Solution
State mutation Direct .push() on state array Immutable updates with spread operator
Unnecessary refetch API called on every selection Fetch only on mount, cache in Zustand
Stale closure Analytics interval captured stale agentName Direct store access via getState()
Missing dependencies useEffect deps arrays incorrect Used Zustand store outside React cycle
Inefficient finds Duplicate .find() calls on every render Zustand selectors with memoized lookups

Architecture Decisions

  • State: Zustand with persist middleware for saved agents
  • Drag & Drop: @dnd-kit/core with DragOverlay
  • Styling: Tailwind CSS v4 with custom theme
  • Responsive: Desktop drag-and-drop, mobile tap-to-select

AI Tools Used

  • Claude Code (glm-5) — code generation, debugging, refactoring, and documentation throughout the project

CV

Added to /public folder as a PDF.

- 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
@sheikhlimon
Copy link
Copy Markdown
Author

sheikhlimon commented Apr 1, 2026

@mukulboro Enjoyed the challenge, really liked the approach. Thanks for putting it together.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant