chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

chore: archive old plan docs + add survey foundation files

Browse Source 
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>
This commit is contained in:
chihlasm
2026-03-05 02:03:38 -05:00
parent da3788afbc
commit 932927b9df
52 changed files with 1250 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

290
docs/plans/Frontend/COMPONENT_EXAMPLES.md
View File

@@ -1,290 +0,0 @@
# Component Migration Examples
## Common Component Transformations
### 1. Card Component
**BEFORE (Old Design):**
```tsx
<div className="bg-slate-900 border border-slate-800 rounded-lg p-6">
<h3 className="text-slate-200">Title</h3>
<p className="text-slate-400">Content</p>
</div>
```
**AFTER (New Design):**
```tsx
<div className="bg-gradient-to-br from-white/[0.04] to-white/[0.01] border border-white/8 backdrop-blur-xl rounded-2xl p-6 hover:from-white/[0.06] hover:to-white/[0.02] hover:border-white/12 transition-all">
<h3 className="text-white font-bold">Title</h3>
<p className="text-white/40">Content</p>
</div>
```
---
### 2. Active/Highlighted Card
**BEFORE:**
```tsx
<div className="bg-purple-900/20 border border-purple-700 rounded-lg p-8">
{/* content */}
</div>
```
**AFTER (Bright Glow):**
```tsx
<div className="bg-gradient-to-br from-white/[0.08] to-white/[0.04] border border-white/20 rounded-2xl p-8 shadow-[0_0_40px_rgba(255,255,255,0.1)]">
{/* content */}
</div>
```
---
### 3. Icon in Card
**BEFORE:**
```tsx
<div className="w-10 h-10 rounded-lg bg-purple-600 flex items-center justify-center">
<Icon className="w-5 h-5 text-white" />
</div>
```
**AFTER (with subtle color):**
```tsx
<div className="w-12 h-12 rounded-xl bg-white/5 border border-white/10 flex items-center justify-center">
<Icon className="w-6 h-6 text-blue-400" />
</div>
```
---
### 4. Badge/Status
**BEFORE:**
```tsx
<span className="px-3 py-1 bg-purple-900 text-purple-200 rounded-md text-sm">
Admin
</span>
```
**AFTER:**
```tsx
<div className="px-4 py-2 rounded-xl bg-white/10 border border-white/20">
<span className="text-sm text-white font-semibold">Admin</span>
</div>
```
---
### 5. Primary Button
**BEFORE:**
```tsx
<button className="px-6 py-3 bg-purple-600 hover:bg-purple-700 text-white rounded-lg">
Click Me
</button>
```
**AFTER:**
```tsx
<button className="px-6 py-3 bg-white text-black font-semibold rounded-xl hover:bg-white/90 transition-all hover:scale-105">
Click Me
</button>
```
---
### 6. Secondary Button
**BEFORE:**
```tsx
<button className="px-6 py-3 border border-slate-700 text-slate-300 hover:bg-slate-800 rounded-lg">
Cancel
</button>
```
**AFTER:**
```tsx
<button className="px-6 py-3 bg-white/10 border border-white/20 text-white font-medium rounded-xl hover:bg-white/20 transition-all">
Cancel
</button>
```
---
### 7. Input/Search
**BEFORE:**
```tsx
<input
className="bg-slate-800 border border-slate-700 text-white placeholder-slate-400 rounded-lg px-4 py-3"
placeholder="Search..."
/>
```
**AFTER:**
```tsx
<div className="bg-gradient-to-br from-white/[0.04] to-white/[0.01] border border-white/8 backdrop-blur-xl rounded-2xl p-1">
<div className="flex items-center bg-black/50 rounded-xl">
<svg className="ml-5 w-5 h-5 text-blue-400">{/* search icon */}</svg>
<input
className="flex-1 bg-transparent py-4 px-4 text-white placeholder:text-white/30 focus:outline-none"
placeholder="Search..."
/>
</div>
</div>
```
---
### 8. Progress Bar
**BEFORE:**
```tsx
<div className="h-2 bg-slate-800 rounded-full overflow-hidden">
<div className="h-full bg-purple-600 rounded-full" style={{width: '60%'}}></div>
</div>
```
**AFTER:**
```tsx
<div className="h-2 bg-white/10 rounded-full overflow-hidden">
<div className="h-full bg-white rounded-full" style={{width: '60%'}}></div>
</div>
```
---
### 9. Stat Card with Trend
**BEFORE:**
```tsx
<div className="bg-slate-900 border border-slate-800 rounded-lg p-6">
<div className="text-slate-400 text-sm">Active Users</div>
<div className="text-2xl font-bold text-white">1,234</div>
</div>
```
**AFTER:**
```tsx
<div className="bg-[rgba(20,20,25,0.5)] border border-white/[0.06] backdrop-blur-xl rounded-2xl p-6 hover:scale-105 transition-transform">
<div className="text-sm text-white/40 mb-2 font-medium">Active Users</div>
<div className="text-4xl font-bold text-white mb-1">1,234</div>
<div className="flex items-center gap-1 text-xs text-emerald-400 font-medium">
<svg className="w-3 h-3">{/* up arrow */}</svg>
12% vs last week
</div>
</div>
```
---
### 10. Section Header
**BEFORE:**
```tsx
<div className="mb-8">
<h2 className="text-2xl font-bold text-slate-100">Recent Trees</h2>
<p className="text-slate-400 mt-1">Your recently accessed decision trees</p>
</div>
```
**AFTER:**
```tsx
<div className="flex items-center justify-between mb-6">
<h2 className="text-2xl font-bold text-white">Recent Trees</h2>
<button className="text-sm text-white/60 hover:text-white font-medium transition-colors">
View all →
</button>
</div>
```
---
## Icon Color Guidelines
### AI/Automation Icons
```tsx
<svg className="w-5 h-5 text-cyan-400">{/* sparkle/star */}</svg>
```
### Search Icons
```tsx
<svg className="w-5 h-5 text-blue-400">{/* magnifying glass */}</svg>
```
### Active/Playing State
```tsx
<svg className="w-6 h-6 text-violet-400">{/* play button */}</svg>
```
### Network Category
```tsx
<svg className="w-6 h-6 text-blue-400">{/* wifi/network */}</svg>
```
### Printer Category
```tsx
<svg className="w-6 h-6 text-indigo-400">{/* printer */}</svg>
```
### Email Category
```tsx
<svg className="w-6 h-6 text-cyan-400">{/* envelope */}</svg>
```
### Success Indicators
```tsx
<svg className="w-4 h-4 text-emerald-400">{/* check/arrow up */}</svg>
```
### Error Indicators
```tsx
<svg className="w-4 h-4 text-red-400">{/* x/arrow down */}</svg>
```
### Time/Clock (NO COLOR - keep gray)
```tsx
<svg className="w-4 h-4 text-white/30">{/* clock */}</svg>
```
---
## Common Mistakes to Avoid
❌ **DON'T:**
- Use colored backgrounds on cards
- Use gradient text
- Color ALL icons
- Use slate-900, slate-800 (use white/opacity instead)
- Use purple gradients anywhere
✅ **DO:**
- Use white/black with opacity for all backgrounds
- Keep text white (with varying opacity)
- Only color functional icons
- Use backdrop-blur on cards
- Use white for primary buttons
---
## Quick Reference: Opacity Levels
**Text:**
- Primary: `text-white`
- Secondary: `text-white/70`
- Tertiary: `text-white/40`
- Placeholder: `text-white/30`
**Backgrounds:**
- Card: `bg-white/[0.04]` to `bg-white/[0.01]`
- Card hover: `bg-white/[0.06]` to `bg-white/[0.02]`
- Active card: `bg-white/[0.08]` to `bg-white/[0.04]`
- Button secondary: `bg-white/10`
- Badge: `bg-white/10`
**Borders:**
- Subtle: `border-white/8`
- Normal: `border-white/10`
- Prominent: `border-white/20`
- Active: `border-white/30`

53
docs/plans/Frontend/ux_improvements.md
View File

@@ -1,53 +0,0 @@
# 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.