Initial ForgeLM import
This commit is contained in:
Evandro Fonseca Junior committed
commit
a392b9dc60
4296 files changed
+1212675
No files matched your search
@@ -0,0 +1,125 @@
|
||||
# UI Review
|
||||
|
||||
**Audited:** 2026-03-28
|
||||
**Baseline:** Abstract UI/UX standards (no `UI-SPEC.md` found)
|
||||
**Screenshots:** Captured. CLI screenshots saved in `.planning/ui-reviews/audit-20260328-180142/`; loaded-state validation captured via browser at `loaded-shell.png`, `loaded-mobile.png`, and `loaded-tablet.png`.
|
||||
|
||||
---
|
||||
|
||||
## Pillar Scores
|
||||
|
||||
| Pillar | Score | Key Finding |
|
||||
|--------|-------|-------------|
|
||||
| 1. Copywriting | 3/4 | Product framing is clear, but some controls are vague or overly system-oriented. |
|
||||
| 2. Visuals | 3/4 | Desktop hierarchy is strong, but the main canvas feels sparse and mobile breaks badly. |
|
||||
| 3. Color | 3/4 | Palette is cohesive and intentional, with a few hardcoded accents and status colors bypassing tokens. |
|
||||
| 4. Typography | 3/4 | Type scale is disciplined and readable, though contrast and emphasis are a bit muted in secondary text. |
|
||||
| 5. Spacing | 2/4 | Desktop spacing is solid, but fixed sidebar widths create overflow on smaller screens. |
|
||||
| 6. Experience Design | 2/4 | Good empty-state foundation, but accessibility, destructive flows, and runtime error handling need work. |
|
||||
|
||||
**Overall: 16/24**
|
||||
|
||||
---
|
||||
|
||||
## Major UX Strengths
|
||||
|
||||
- Clear information architecture on desktop: runtime controls live in the sidebar and chat lives in the main pane, which reduces mode confusion.
|
||||
- Strong visual hierarchy in the runtime summary card; status, mode, endpoint, and next action are easy to scan in `tauri-app/src/features/runtime/components/RuntimeStatusCard.tsx:30`.
|
||||
- Consistent dark visual language with shared tokens in `tauri-app/src/index.css:4` and polished gradients in `tauri-app/src/components/Sidebar.css:4`.
|
||||
- Helpful empty state with product promise and persistent-history cue in `tauri-app/src/components/ChatView.tsx:281`.
|
||||
- Thoughtful advanced UX touches like token summaries, TPS badges, live reasoning, edit-and-resend, and copy actions in `tauri-app/src/components/ChatView.tsx:256` and `tauri-app/src/components/MessageBubble.tsx:121`.
|
||||
|
||||
## Major UI/UX Weaknesses
|
||||
|
||||
- Mobile responsiveness is currently broken: the 280px fixed sidebar plus full chat pane causes horizontal clipping and partially hidden content, visible in `loaded-mobile.png` and driven by `tauri-app/src/components/Sidebar.css:2` plus `tauri-app/src/App.css:1`.
|
||||
- The app ships with severe console noise and broken highlight loading. `tauri-app/src/lib/markdown.ts:17` injects CDN language scripts that throw repeated runtime errors, undermining confidence in code rendering.
|
||||
- Several interactive elements are mouse-centric instead of keyboard/touch friendly: chat rows are clickable `div`s in `tauri-app/src/components/Sidebar.tsx:103`, destructive affordances are hover-revealed in `tauri-app/src/components/Sidebar.css:317` and `tauri-app/src/components/MessageBubble.css:128`, and icon-only buttons rely on `title` instead of accessible labels in `tauri-app/src/components/Sidebar.tsx:45` and `tauri-app/src/components/Sidebar.tsx:82`.
|
||||
- Error handling is not product-grade yet. Missing model/server cases use blocking `alert()` calls in `tauri-app/src/components/ChatView.tsx:95`, while backend failures surface as assistant text rather than inline actionable UI in `tauri-app/src/components/ChatView.tsx:205`.
|
||||
- Destructive actions have no confirmation or undo path for deleting chats/messages in `tauri-app/src/components/Sidebar.tsx:111` and `tauri-app/src/components/MessageBubble.tsx:167`.
|
||||
- The main canvas feels visually under-filled when there is no conversation; the large central void weakens first-run momentum in `loaded-shell.png`.
|
||||
|
||||
---
|
||||
|
||||
## Improvement Ideas Prioritized By Impact/Effort
|
||||
|
||||
1. **High impact / medium effort - Fix the responsive shell.** Convert the sidebar into a drawer or overlay below tablet widths, let the chat pane own the viewport, and add a mobile header/menu trigger. This resolves the biggest usability failure shown in `loaded-mobile.png`.
|
||||
2. **High impact / low-medium effort - Replace hover-only and div-based interactions with accessible controls.** Make conversation rows real buttons, add `aria-label`s to icon buttons, keep message/chat actions visible or tappable on touch, and add keyboard support.
|
||||
3. **High impact / medium effort - Remove the highlight.js CDN script-loading failure.** Bundle/register languages properly in app code or lazy-load an ESM-safe client path so Markdown/code rendering does not throw on every load.
|
||||
4. **Medium impact / low effort - Replace blocking alerts with inline guidance.** Show validation banners near the composer/model picker for missing model, offline server, or runtime setup issues.
|
||||
5. **Medium impact / low-medium effort - Add confirmation or undo for deletes.** A lightweight confirm popover or toast-based undo will reduce accidental loss.
|
||||
6. **Medium impact / low effort - Improve empty and offline states.** Add suggested starter prompts, explain why model loading failed, and offer a direct CTA to open runtime setup when the endpoint is offline.
|
||||
|
||||
## Quick Wins For Design Polish
|
||||
|
||||
- Add a subtle empty-state prompt grid or starter chips so the center pane does not feel empty before first use.
|
||||
- Increase contrast on secondary helper text like the empty conversation copy and footer version label.
|
||||
- Turn the top-right toggles into a labeled settings cluster so they do not feel detached from the composer.
|
||||
- Add a compact page title or chat title in the top bar to reduce the long strip of unused header space.
|
||||
- Standardize hardcoded accent/link/status colors onto tokens; examples are in `tauri-app/src/components/ChatView.css:144`, `tauri-app/src/features/runtime/components/RuntimeStatusCard.css:110`, and `tauri-app/src/features/runtime/components/RuntimeSettingsDrawer.css:309`.
|
||||
|
||||
---
|
||||
|
||||
## Detailed Findings
|
||||
|
||||
### 1. Copywriting (3/4)
|
||||
|
||||
- The app explains its purpose well in the empty state and runtime summary (`tauri-app/src/components/ChatView.tsx:284`, `tauri-app/src/features/runtime/components/RuntimeStatusCard.tsx:41`).
|
||||
- Some button labels are too generic for a mixed local/remote runtime flow: `Manage`, `Set up`, `Start`, `Stop`, and `Browse` require extra interpretation (`tauri-app/src/features/runtime/components/RuntimeStatusCard.tsx:26`, `tauri-app/src/features/runtime/components/RuntimeSettingsDrawer.tsx:311`).
|
||||
- System-oriented fallback copy like `Start server to load models` is functional but not especially user-friendly in `tauri-app/src/components/Sidebar.tsx:75`.
|
||||
|
||||
### 2. Visuals (3/4)
|
||||
|
||||
- Desktop composition is good: the runtime card gives the left rail a clear focal object while the chat pane stays visually calm.
|
||||
- The runtime card uses strong visual hierarchy through kicker/title/meta/actions in `tauri-app/src/features/runtime/components/RuntimeStatusCard.css:24`.
|
||||
- The center pane is too empty on first load, leaving a lot of dead space with little guidance, visible in `loaded-shell.png`.
|
||||
- Mobile visual integrity breaks because the app preserves desktop proportions instead of reflowing, visible in `loaded-mobile.png`.
|
||||
|
||||
### 3. Color (3/4)
|
||||
|
||||
- The shared dark palette is coherent and modern, defined centrally in `tauri-app/src/index.css:4`.
|
||||
- Accent use is focused mostly on primary actions and runtime emphasis, which helps hierarchy.
|
||||
- Some UI colors bypass tokens and create maintenance drift, including link blue and warning/error foregrounds in `tauri-app/src/components/ChatView.css:144`, `tauri-app/src/features/runtime/components/RuntimeStatusCard.css:110`, and `tauri-app/src/features/runtime/components/RuntimeSettingsDrawer.css:309`.
|
||||
|
||||
### 4. Typography (3/4)
|
||||
|
||||
- The project uses a restrained scale with strong headings and readable body text across the runtime card, empty state, and composer.
|
||||
- The font stack is more intentional than default system-only UI and includes mono support for technical values in `tauri-app/src/index.css:39` and `tauri-app/src/features/runtime/components/RuntimeSettingsDrawer.css:127`.
|
||||
- Secondary text often trends too faint on the dark background, especially empty/sidebar helper copy in `tauri-app/src/components/Sidebar.css:248` and `tauri-app/src/components/ChatView.css:78`.
|
||||
|
||||
### 5. Spacing (2/4)
|
||||
|
||||
- Desktop spacing is consistent and componentized across cards, bubbles, and control groups.
|
||||
- Responsiveness is the main spacing failure: `tauri-app/src/components/Sidebar.css:2` hard-locks a 280px sidebar while `tauri-app/src/App.css:1` keeps a two-column flex shell with no mobile fallback.
|
||||
- Only the chat top bar and runtime drawer receive mobile breakpoints (`tauri-app/src/components/ChatView.css:303`, `tauri-app/src/features/runtime/components/RuntimeSettingsDrawer.css:339`), so the global layout does not adapt as a system.
|
||||
|
||||
### 6. Experience Design (2/4)
|
||||
|
||||
- Empty state, loading spinner, disabled send button, streaming stop button, and runtime status feedback are all positive signs (`tauri-app/src/App.tsx:50`, `tauri-app/src/components/ChatView.tsx:363`).
|
||||
- Accessibility is partial: the drawer has dialog semantics (`tauri-app/src/features/runtime/components/RuntimeSettingsDrawer.tsx:225`), but conversation rows are not keyboard-native and icon buttons depend on `title` text.
|
||||
- Deletion actions lack confirmation/undo and are hidden until hover, which is risky for both touch and desktop (`tauri-app/src/components/Sidebar.tsx:111`, `tauri-app/src/components/MessageBubble.css:121`).
|
||||
- Runtime and Markdown behavior generate repeated console failures, documented in `.planning/ui-reviews/playwright-console.md:4`, which hurts perceived reliability before the user even chats.
|
||||
- Offline model loading keeps failing against `http://127.0.0.1:8080/v1/models` without an inline recovery affordance, documented in `.planning/ui-reviews/playwright-network.md:1`.
|
||||
|
||||
---
|
||||
|
||||
## Files Audited
|
||||
|
||||
- `tauri-app/src/App.tsx`
|
||||
- `tauri-app/src/App.css`
|
||||
- `tauri-app/src/index.css`
|
||||
- `tauri-app/src/components/Sidebar.tsx`
|
||||
- `tauri-app/src/components/Sidebar.css`
|
||||
- `tauri-app/src/components/ChatView.tsx`
|
||||
- `tauri-app/src/components/ChatView.css`
|
||||
- `tauri-app/src/components/MessageBubble.tsx`
|
||||
- `tauri-app/src/components/MessageBubble.css`
|
||||
- `tauri-app/src/features/runtime/components/RuntimeStatusCard.tsx`
|
||||
- `tauri-app/src/features/runtime/components/RuntimeStatusCard.css`
|
||||
- `tauri-app/src/features/runtime/components/RuntimeSettingsDrawer.tsx`
|
||||
- `tauri-app/src/features/runtime/components/RuntimeSettingsDrawer.css`
|
||||
- `tauri-app/src/features/runtime/api.ts`
|
||||
- `tauri-app/src/features/runtime/useRuntimeManager.ts`
|
||||
- `tauri-app/src/hooks/useModels.ts`
|
||||
- `tauri-app/src/hooks/useDB.ts`
|
||||
- `tauri-app/src/lib/db.ts`
|
||||
- `tauri-app/src/lib/markdown.ts`
|
||||
Reference in new issue
Block a user