31 lines
2.2 KiB
Markdown
31 lines
2.2 KiB
Markdown
# Learnings & Best Practices
|
|
|
|
## User Preferences & Constraints
|
|
- **NO AUTO-BROWSER TESTING**: Do **not** automatically test features in the browser to save tokens. **ALWAYS ASK** the user before running browser verification steps.
|
|
- **Keep it Simple**: Avoid over-engineering. Use standard, robust solutions (e.g., Flexbox) over complex libraries (e.g., `react-resizable-panels`) unless necessary.
|
|
|
|
## Technical Learnings
|
|
|
|
### Layout Architecture
|
|
- **Issue**: `react-resizable-panels` caused significant layout instability ("fluid shit"), with panels shrinking to unusable widths and overlapping content.
|
|
- **Solution**: Use a **Fixed Sidebar + Fluid Content** pattern using standard Flexbox (`flex-none w-[300px]` + `flex-1 min-w-0`). This is robust, predictable, and easier to maintain.
|
|
- **Consistency**: Standardize layout across related pages (Skills, Memory, Cron, Sessions) to reduce cognitive load and maintenance overhead.
|
|
- **Critical CSS**: Always use `min-w-0` on flex children to prevent text overflow from breaking the layout.
|
|
|
|
### API & File Handling
|
|
- **Root Files**: When accessing core files like `MEMORY.md` at the project root via API routes, explicitly handle the path traversal (e.g., `../MEMORY.md`) to avoid being restricted to subdirectories.
|
|
- **Path Security**: Always validate or sanitize dynamic path segments to prevent arbitrary file access, but allow controlled exceptions for known root files.
|
|
|
|
### Tool Integration
|
|
- **Agentation**: Integrated for visual feedback.
|
|
- **Workflow**: Defined in `docs/AGENTATION_WORKFLOW.md`.
|
|
- **Implementation**: Added to `layout.tsx` for global availability.
|
|
|
|
### Feature Implementation
|
|
- **Navigation**: Wrap interactive cards (Memory, Cron) in `Link` components to match the behavior of Skills cards.
|
|
- **Status Indicators**: Use simple visual cues (e.g., green/red dots) in the Sidebar to convey system status (fetching from `/api/status` via SWR).
|
|
|
|
## Workflow Improvements
|
|
- **Prompting**: Use the structured output from `agentation` to clearly communicate UI changes.
|
|
- **Documentation**: Keep `.agent/` updated with new architectural decisions to prevent regression.
|
|
- **Git Sync**: Regularly commit changes to `.agent` and `.claude` to keep the agent's self-knowledge in sync with the repository.
|