55d24118e0
- Sidebar: click-and-drag resize handle (200-500px range), accent highlight on drag, cursor changes to col-resize - BranchNode: hover/active expands to show context_summary (tried, result), status_reason, and step count with smooth animation - ForkCard: "Fork Point" label changed from text-muted to text-accent-text for visibility against bg-card Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
65 lines
2.0 KiB
TypeScript
65 lines
2.0 KiB
TypeScript
import { GitFork } from 'lucide-react'
|
|
import { cn } from '@/lib/utils'
|
|
import type { ForkPointResponse } from '@/types/branching'
|
|
|
|
interface ForkCardProps {
|
|
fork: ForkPointResponse
|
|
selectedBranchId: string | null
|
|
onSelectOption: (branchId: string) => void
|
|
}
|
|
|
|
export function ForkCard({ fork, selectedBranchId, onSelectOption }: ForkCardProps) {
|
|
return (
|
|
<div className="rounded-lg border border-default bg-card p-4 flex flex-col gap-3">
|
|
{/* Header */}
|
|
<div className="flex items-center gap-2">
|
|
<GitFork size={16} className="text-accent shrink-0" />
|
|
<span className="text-[10px] font-semibold uppercase tracking-wider text-accent-text">
|
|
Fork Point
|
|
</span>
|
|
</div>
|
|
|
|
{/* Fork reason */}
|
|
<p className="text-sm text-heading leading-snug">{fork.fork_reason}</p>
|
|
|
|
{/* Options */}
|
|
<div className="flex flex-col gap-2">
|
|
{fork.options.map((option) => {
|
|
const isSelected = option.branch_id === selectedBranchId
|
|
return (
|
|
<button
|
|
key={option.branch_id}
|
|
type="button"
|
|
onClick={() => onSelectOption(option.branch_id)}
|
|
className={cn(
|
|
'w-full text-left rounded-[5px] border px-3 py-2.5 transition-colors',
|
|
'hover:bg-elevated',
|
|
isSelected
|
|
? 'border-accent bg-accent-dim'
|
|
: 'border-default bg-elevated/50'
|
|
)}
|
|
>
|
|
<p
|
|
className={cn(
|
|
'text-sm font-medium',
|
|
isSelected ? 'text-accent-text' : 'text-heading'
|
|
)}
|
|
>
|
|
{option.label}
|
|
</p>
|
|
{option.description && (
|
|
<p className={cn(
|
|
'text-xs mt-0.5 leading-snug',
|
|
isSelected ? 'text-primary' : 'text-primary'
|
|
)}>
|
|
{option.description}
|
|
</p>
|
|
)}
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|