From b08e28030bf9ec7bad1ecd1e4faea10c3f18c68d Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Tue, 24 Mar 2026 10:01:45 +0000
Subject: [PATCH] feat: add ForkCard component for in-chat fork decision points

Renders fork reason text and a list of option buttons. Selected option
gets an accent border and accent-dim background. Unselected options use
border-default. GitFork icon in header.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/session/ForkCard.tsx | 61 ++++++++++++++++++++
 1 file changed, 61 insertions(+)
 create mode 100644 frontend/src/components/session/ForkCard.tsx

diff --git a/frontend/src/components/session/ForkCard.tsx b/frontend/src/components/session/ForkCard.tsx
new file mode 100644
index 00000000..7974faf5
--- /dev/null
+++ b/frontend/src/components/session/ForkCard.tsx
@@ -0,0 +1,61 @@
+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-muted">
+          Fork Point
+        </span>
+      </div>
+
+      {/* Fork reason */}
+      <p className="text-sm text-primary 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-transparent'
+              )}
+            >
+              <p
+                className={cn(
+                  'text-sm font-medium',
+                  isSelected ? 'text-accent-text' : 'text-primary'
+                )}
+              >
+                {option.label}
+              </p>
+              {option.description && (
+                <p className="text-xs text-secondary mt-0.5 leading-snug">
+                  {option.description}
+                </p>
+              )}
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}