Engineering
Components
Frontend organization, shells, and UI rules used across Urmate.
Components
Urmate is a dashboard-heavy product. Most UI should feel dense, direct, and useful rather than decorative. The visual system uses dark dashboards, compact cards, icon-first controls, and feature-specific shells.
Major Component Areas
| Area | Examples |
|---|---|
| Dashboard shells | Global dashboard, Study shell, instructor shell, chat shell, community shell. |
| Chat workspace | Agent pages, channel setup, tasks board, community catalog, prompt box. |
| Study | Find Instructor, course/library/board/podcast pages, instructor application, admin screens. |
| XRouter | Endpoint panels, provider cards, model catalog, quota cards, gateway settings. |
| Builders | File tree, preview frame, terminal, browser tools, media controls. |
| Shared UI | Buttons, cards, dialogs, dropdowns, toasts, prompt boxes, markdown renderers. |
Design Rules
- Keep text sizes modest inside dashboards.
- Use cards for repeated items and modals, not for every section.
- Use icon buttons for simple actions like copy, refresh, delete, edit, open, and close.
- Keep sidebar labels short and scannable.
- Avoid fake placeholder data in production views.
- Use empty states only when the API genuinely returns no records.
- Keep controls close to the thing they modify.
Markdown And AI Output
AI workrooms, task canvas results, tutor explanations, and generated study content should render readable markdown:
- headings with stable hierarchy;
- lists for steps;
- tables for comparisons;
- code blocks with language labels;
- math notation where needed;
- citations or source notes when research/search is used.
Responsive Behavior
Mobile dashboards should prefer drawers, tabs, and collapsible side panels. Desktop dashboards can use split panes, but every fixed-height panel must handle overflow with a styled scrollbar and must not hide primary actions below the fold.