feat: add procedural flows with intake forms, navigation, and seed templates
Adds a new "procedural" tree type for linear step-by-step project workflows (domain controller setup, M365 onboarding, VPN config, etc). Includes intake form builder, two-panel step navigation, variable resolution, procedural exports, 3 seed templates, and UI rename from "Trees" to "Flows". Also archives 19 implemented plan docs and creates deferred features backlog. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
chihlasm
53
docs/plans/Frontend/ux_improvements.md
Normal file
53
docs/plans/Frontend/ux_improvements.md
Normal file
@@ -0,0 +1,53 @@
|
||||
# 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.
|
||||
101
docs/plans/deferred-procedural-features.md
Normal file
101
docs/plans/deferred-procedural-features.md
Normal file
@@ -0,0 +1,101 @@
|
||||
# Deferred Procedural Flow Features
|
||||
|
||||
> **Created:** February 14, 2026
|
||||
> **Status:** Backlog — prioritize based on engineer feedback
|
||||
> **Related:** Procedural Flows v1 shipped (Phases 1-4 complete, archived)
|
||||
|
||||
---
|
||||
|
||||
## Tier 1 — High Impact / Most Requested
|
||||
|
||||
### Conditional Steps
|
||||
Show or hide steps based on intake form values. For example, skip "Configure DNS Forwarders" if the intake form says the DC won't be the primary DNS server.
|
||||
|
||||
- Requires: step-level `condition` field (e.g., `{ field: "is_primary_dns", operator: "equals", value: "yes" }`)
|
||||
- UI: condition builder in StepEditor, runtime evaluation in ProceduralNavigationPage
|
||||
- Complexity: Medium
|
||||
|
||||
### Sub-Checklists Within Steps
|
||||
Break a single step into smaller checkable items. For instance, "Install Windows Features" could have sub-items: AD DS, DNS, DHCP.
|
||||
|
||||
- Requires: `sub_items: { label: string, required: boolean }[]` on ProceduralStep
|
||||
- UI: checkable list within StepDetail, all sub-items must be checked before "Mark Complete"
|
||||
- Complexity: Low-Medium
|
||||
|
||||
### Step Templates / Reusable Step Library
|
||||
Save commonly used steps (e.g., "Verify DNS resolution", "Create AD OU structure") and insert them into any procedural flow.
|
||||
|
||||
- Requires: new StepTemplate model, API endpoints for CRUD, "Insert from Library" button in editor
|
||||
- UI: step template browser modal, search/filter by category
|
||||
- Complexity: Medium
|
||||
|
||||
---
|
||||
|
||||
## Tier 2 — Valuable Enhancements
|
||||
|
||||
### Screenshot Verification Type
|
||||
Upload a screenshot as proof of completion for a step. Useful for "confirm the dashboard shows X" type verification.
|
||||
|
||||
- Requires: file upload endpoint, `verification_type: 'screenshot'` option, image preview in StepDetail
|
||||
- Dependency: file attachment infrastructure (Phase 3 roadmap)
|
||||
- Complexity: Medium-High
|
||||
|
||||
### Session Assignment / Handoff
|
||||
Assign a procedural session to another engineer, or hand off mid-procedure. Track who completed which steps.
|
||||
|
||||
- Requires: `assigned_to` field on Session, assignment API, notification on assignment
|
||||
- UI: assign button in session list, "Assigned to you" filter
|
||||
- Complexity: Medium
|
||||
|
||||
### Approval Workflows
|
||||
Certain steps or entire procedures require manager/lead approval before proceeding. Step marked as "pending approval" until approved.
|
||||
|
||||
- Requires: approval model, notification system integration, approval status on steps
|
||||
- UI: approval request button, approval queue for managers
|
||||
- Complexity: High
|
||||
|
||||
---
|
||||
|
||||
## Tier 3 — Advanced / Future
|
||||
|
||||
### AI-Assisted Template Generation
|
||||
Describe a procedure in plain text and generate a structured flow with steps, commands, and intake form fields.
|
||||
|
||||
- Requires: LLM integration, prompt engineering for step generation, review/edit UI
|
||||
- Complexity: High
|
||||
|
||||
### Automated PowerShell/CLI Execution
|
||||
Run commands directly from a step against a connected endpoint (via agent or SSH).
|
||||
|
||||
- Requires: secure agent infrastructure, command execution sandbox, output capture
|
||||
- Security: significant — needs careful scoping
|
||||
- Complexity: Very High
|
||||
|
||||
### Branching Hybrid
|
||||
Mini decision-tree within a procedure step. "If the server responds with error X, do A. If it responds normally, continue."
|
||||
|
||||
- Requires: nested decision node within a procedural step, conditional next-step logic
|
||||
- Complexity: High
|
||||
|
||||
### Procedural Code-Mode Editor
|
||||
YAML/JSON editor for power users who want to define procedures as code rather than using the visual editor.
|
||||
|
||||
- Requires: code editor component, schema validation, bidirectional sync with visual editor
|
||||
- Complexity: Medium
|
||||
|
||||
### Template Marketplace
|
||||
Share and discover procedure templates across accounts. Community-contributed flows.
|
||||
|
||||
- Requires: public/private visibility, template publishing flow, discovery/search, ratings
|
||||
- Dependency: subscription tier integration (which tiers can publish/access)
|
||||
- Complexity: Very High
|
||||
|
||||
---
|
||||
|
||||
## Prioritization Notes
|
||||
|
||||
Start with **Conditional Steps** and **Sub-Checklists** — these are the most common requests from engineers using procedural flows in the field. They're also relatively contained changes that don't require new infrastructure.
|
||||
|
||||
**Step Templates** would be the next logical addition once multiple procedural flows exist and engineers start noticing repeated patterns.
|
||||
|
||||
Everything in Tier 3 requires either new infrastructure (file uploads, agent system, LLM integration) or significant architectural work. Defer until Tiers 1-2 are validated.
|
||||
Reference in New Issue
Block a user