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

fix: ContinuationModal UX - hover tooltips and stay-on-step flow

Browse Source 
- Replace grouped section headers with hover tooltips (title attr) for
  a cleaner flat list of descendant options
- After selecting a descendant, stay on the custom step so the user can
  write notes before proceeding via a "Continue to" button
- Add pendingContinuationNodeId state to track selected descendant
- "Continue to" and custom branch controls are mutually exclusive

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
2026-02-03 21:48:00 -05:00
parent 27624fbe55
commit f49e0b9327
3 changed files with 96 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
docs/plans/2026-02-03-continuation-modal-ux.md Normal file
View File

@@ -0,0 +1,39 @@
# Continuation Modal UX Improvements
**Date:** 2026-02-03
**Status:** Approved
## Changes
### 1. Parent option labels: hover tooltips instead of static headers
The ContinuationModal currently groups descendant nodes under uppercase headers like "FROM: PRINTER WON'T PRINT AT ALL -> NOTHING HAPPENS / NO RESPONSE". These clutter the screen.
**Change:** Move `parentOptionLabel` from static section headers to a `title` attribute on each descendant button. The descendants become a flat list. Hovering shows the path context as a native browser tooltip.
The "Or" divider and "Build Custom Branch" button at the bottom remain unchanged.
**Files:** `frontend/src/components/session/ContinuationModal.tsx`
### 2. Land on custom step before navigating to selected descendant
Currently, selecting a descendant in the ContinuationModal navigates directly to that node. The user should land on their custom step first to write notes, then proceed.
**Change:** Add `pendingContinuationNodeId` state to `TreeNavigationPage`. When the user selects a descendant:
1. Store the selected node ID in `pendingContinuationNodeId`
2. Close the ContinuationModal (user is now viewing their custom step)
3. Render a "Continue to: [node name]" button on the custom step view
4. Clicking it navigates to the descendant and clears `pendingContinuationNodeId`
The "Continue to" button and custom branch controls are mutually exclusive. If the user chose "Build Custom Branch", they get the existing Add Another Step / This Solves My Issue controls instead.
**Files:** `frontend/src/pages/TreeNavigationPage.tsx`
## Summary of state changes
| State | Purpose |
|-------|---------|
| `pendingContinuationNodeId` | Stores which descendant the user selected, so the custom step can show a "Continue to" button |
## No backend changes required

59
frontend/src/components/session/ContinuationModal.tsx
View File

@@ -37,15 +37,6 @@ export function ContinuationModal({
onSelectNode,
onBuildCustomBranch
}: ContinuationModalProps) {
// Group nodes by parent option
const groupedNodes = descendantNodes.reduce((acc, node) => {
if (!acc[node.parentOptionLabel]) {
acc[node.parentOptionLabel] = []
}
acc[node.parentOptionLabel].push(node)
return acc
}, {} as Record<string, DescendantNode[]>)
const hasDescendants = descendantNodes.length > 0
return (
@@ -58,36 +49,28 @@ export function ContinuationModal({
Select the next step in your troubleshooting path:
</p>
<div className="space-y-4">
{Object.entries(groupedNodes).map(([parentOption, nodes]) => (
<div key={parentOption}>
<p className="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
From: {parentOption}
</p>
<div className="space-y-2">
{nodes.map(node => (
<button
key={node.id}
onClick={() => onSelectNode(node.id)}
className={cn(
'flex w-full items-center gap-3 rounded-lg border border-border p-3 text-left transition-colors',
'hover:border-primary hover:bg-accent'
)}
>
<div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-muted">
{nodeTypeIcons[node.type]}
</div>
<div className="min-w-0 flex-1">
<p className="truncate font-medium">{node.label}</p>
<p className="text-xs text-muted-foreground">
{nodeTypeLabels[node.type]}
</p>
</div>
<ArrowRight className="h-4 w-4 flex-shrink-0 text-muted-foreground" />
</button>
))}
<div className="space-y-2">
{descendantNodes.map(node => (
<button
key={node.id}
onClick={() => onSelectNode(node.id)}
title={`From: ${node.parentOptionLabel}`}
className={cn(
'flex w-full items-center gap-3 rounded-lg border border-border p-3 text-left transition-colors',
'hover:border-primary hover:bg-accent'
)}
>
<div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-muted">
{nodeTypeIcons[node.type]}
</div>
</div>
<div className="min-w-0 flex-1">
<p className="truncate font-medium">{node.label}</p>
<p className="text-xs text-muted-foreground">
{nodeTypeLabels[node.type]}
</p>
</div>
<ArrowRight className="h-4 w-4 flex-shrink-0 text-muted-foreground" />
</button>
))}
</div>
</div>

42
frontend/src/pages/TreeNavigationPage.tsx
View File

@@ -8,7 +8,7 @@ import { cn } from '@/lib/utils'
import { MarkdownContent } from '@/components/ui/MarkdownContent'
import { CustomStepModal } from '@/components/step-library/CustomStepModal'
import { PostStepActionModal, ContinuationModal, ForkTreeModal, type DescendantNode } from '@/components/session'
import { Plus, CheckCircle } from 'lucide-react'
import { Plus, CheckCircle, ArrowRight } from 'lucide-react'
interface LocationState {
sessionId?: string
@@ -48,6 +48,7 @@ export function TreeNavigationPage() {
// Continuation flow
const [showContinuationModal, setShowContinuationModal] = useState(false)
const [branchOriginNodeId, setBranchOriginNodeId] = useState<string | null>(null)
const [pendingContinuationNodeId, setPendingContinuationNodeId] = useState<string | null>(null)
// Custom branch mode
const [customBranchMode, setCustomBranchMode] = useState(false)
@@ -409,18 +410,26 @@ export function TreeNavigationPage() {
}
}
// Handle selecting a descendant node from continuation modal
const handleSelectDescendant = async (nodeId: string) => {
// Handle selecting a descendant node from continuation modal.
// Stores the selection so the user can write notes on their custom step first.
const handleSelectDescendant = (nodeId: string) => {
setShowContinuationModal(false)
setBranchOriginNodeId(null)
setPendingContinuationNodeId(nodeId)
}
const newPath = [...pathTaken, nodeId]
// Navigate to the previously-selected descendant node
const handleContinueToDescendant = async () => {
if (!pendingContinuationNodeId || !session) return
const newPath = [...pathTaken, pendingContinuationNodeId]
setPathTaken(newPath)
setCurrentNodeId(nodeId)
setCurrentNodeId(pendingContinuationNodeId)
setNotes('')
setPendingContinuationNodeId(null)
try {
await sessionsApi.update(session!.id, { path_taken: newPath })
await sessionsApi.update(session.id, { path_taken: newPath })
} catch (err) {
console.error('Failed to update session path:', err)
}
@@ -777,6 +786,27 @@ export function TreeNavigationPage() {
</div>
)}
{/* Continue to selected descendant */}
{pendingContinuationNodeId && !customBranchMode && (() => {
const targetNode = findNode(pendingContinuationNodeId, tree?.tree_structure)
const targetLabel = targetNode?.question || targetNode?.title || 'next step'
return (
<div className="mt-6 border-t border-purple-200 pt-4 dark:border-purple-700">
<button
type="button"
onClick={handleContinueToDescendant}
className={cn(
'flex w-full items-center justify-between rounded-md bg-primary px-4 py-3 text-sm font-medium text-primary-foreground',
'hover:bg-primary/90'
)}
>
<span>Continue to: {targetLabel.length > 50 ? `${targetLabel.slice(0, 50)}...` : targetLabel}</span>
<ArrowRight className="h-4 w-4 flex-shrink-0" />
</button>
</div>
)
})()}
{/* Custom Branch Controls */}
{customBranchMode && (
<div className="mt-6 border-t border-purple-200 pt-4 dark:border-purple-700">