932927b9df
Move completed plan docs to docs/plans/archive/. Add survey migration 046 and reference HTML/plan files. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
54 lines
3.6 KiB
Markdown
54 lines
3.6 KiB
Markdown
# Frontend UX Improvements
|
|
|
|
Based on a review of the current codebase (specifically `TreeNavigationPage.tsx`, `MyTreesPage.tsx`, and `AppLayout.tsx`), here are 5 suggested UX improvements to enhance usability and engineer workflow.
|
|
|
|
## 1. Interactive Breadcrumbs for Non-Linear Navigation
|
|
|
|
**Problem:**
|
|
Currently, the breadcrumbs in `TreeNavigationPage.tsx` are static text (`<span>`). Users can only go back one step at a time using the "Back" button or browser history, which is tedious if they realize a mistake 3-4 steps ago.
|
|
|
|
**Solution:**
|
|
Make breadcrumb items clickable links.
|
|
- **Action:** Convert breadcrumb items to clickable elements that navigate to that specific historical state.
|
|
- **Benefit:** Allows engineers to quickly jump back to a specific decision point without multiple clicks, improving the "exploratory" nature of troubleshooting.
|
|
|
|
## 2. Enhanced Command Output Experience
|
|
|
|
**Problem:**
|
|
The "Command Output" text area in `TreeNavigationPage.tsx` is a simple text box. Engineers often need to copy commands to their terminal and then copy the output back. The current "code" blocks for commands are also static.
|
|
|
|
**Solution:**
|
|
- **Add "Copy" Button to Commands:** Next to every command block (`currentNode.commands`), add a small copy icon/button for one-click copying.
|
|
- **Paste Formatting:** Ensure the command output text area handles large pastes gracefully (it currently has a 10k char limit which is good) and considers a "Copy" button for the output itself if it needs to be moved elsewhere.
|
|
- **Benefit:** Reduces friction in the core "read command -> execute -> paste result" loop.
|
|
|
|
## 3. Prominent "Create Tree" Call-to-Action
|
|
|
|
**Problem:**
|
|
`MyTreesPage.tsx` has a header but lacks a primary "Create Tree" button. The empty state only guides users to "Browse Trees" (implying they should fork). Experienced users who want to build from scratch have to find the option elsewhere or navigate to "Trees" -> "New" (if that path exists/is obvious).
|
|
|
|
**Solution:**
|
|
- **Header Action:** Add a prominent "Create Tree" button (using the `Plus` icon) to the header of `MyTreesPage.tsx`.
|
|
- **Empty State:** Update the empty state to offer both "Browse Library" AND "Create from Scratch" options.
|
|
- **Benefit:** Encourages content creation and reduces friction for power users.
|
|
|
|
## 4. Keyboard Shortcuts Discovery
|
|
|
|
**Problem:**
|
|
The app supports keyboard shortcuts (1-9 for options, Esc for back, etc.), but they are not visible in the UI. Users may not know they exist, leading to slower interaction times.
|
|
|
|
**Solution:**
|
|
- **Visual Hints:** Add small keycap hints (e.g., `[1]`, `[2]`) next to the decision options in `TreeNavigationPage.tsx`.
|
|
- **Tooltip/Modal:** Add a subtle "Keyboard shortcuts" help icon or a `?` modal that lists available shortcuts map.
|
|
- **Benefit:** drastically improves speed for power users (engineers love keyboard-first workflows).
|
|
|
|
## 5. Session Timer & Progress Visibility
|
|
|
|
**Problem:**
|
|
The session timer in `TreeNavigationPage.tsx` is small and low-contrast (`text-white/40`). For a tool valuable for its time-saving metrics, this feedback is too subtle. Also, actions like "Continue" lack immediate local loading feedback, potentially causing double-clicks.
|
|
|
|
**Solution:**
|
|
- **Prominent Timer:** Make the timer more visible (e.g., brighter text, perhaps a dedicated badge) to reinforce the "time-sensitive" nature of troubleshooting.
|
|
- **Action Feedback:** Add loading spinners directly to the "Continue" and Option buttons when `isLoading` is true, rather than relying solely on global skeletons or page loaders.
|
|
- **Benefit:** Provides better system status feedback and reinforces the value proposition of the tool.
|