import { requiresExecutionReconciliation } from "@paperclipai/shared";
import type { ReactNode } from "react";
import type { ExternalObjectSummary, Issue, IssueRecoveryAction } from "@paperclipai/shared";
import { Link } from "@/lib/router";
import { Archive, Flag } from "lucide-react";
import {
createIssueDetailPath,
rememberIssueDetailLocationState,
withIssueDetailHeaderSeed,
} from "../lib/issueDetailBreadcrumb";
import { cn } from "../lib/utils";
import {
deriveActiveRecoveryDisplayState,
RECOVERY_CHIP_DEFAULT_TONE,
recoveryChipLabel,
} from "../lib/recovery-display";
import {
formatRecoveryLineageSummary,
readRecoveryRetryLineage,
type RecoveryLivenessContext,
} from "../lib/recovery-lineage";
import { StatusIcon } from "./StatusIcon";
import { hasAssignedBacklogBlocker } from "../lib/issue-blockers";
import { ExternalObjectStatusSummary } from "./ExternalObjectStatusSummary";
import { Badge } from "@/components/ui/badge";
export type IssueRowUnreadState = "hidden" | "visible" | "fading";
export type IssueRowPresentation = "legacy" | "task";
export interface IssueRowProps {
issue: Issue;
issueLinkState?: unknown;
selected?: boolean;
/** Opt-in canonical collection layout. Legacy remains the default until each surface migrates. */
presentation?: IssueRowPresentation;
/** Interactive disclosure or selection control before the canonical status glyph. */
leadingControl?: ReactNode;
/** Optional status override; defaults to the task's shared StatusIcon. */
statusSlot?: ReactNode;
/** Stable metadata slot before the task's optional collection columns. */
metadata?: ReactNode;
/** Stable interactive action slot before the identifier and timestamp columns. */
actions?: ReactNode;
/** Controls the canonical trailing identifier without affecting legacy layouts. */
showIdentifier?: boolean;
mobileLeading?: ReactNode;
desktopMetaLeading?: ReactNode;
desktopLeadingSpacer?: boolean;
mobileMeta?: ReactNode;
/** Compact mobile timestamp beside the title in canonical task lists. */
mobileTitleMeta?: ReactNode;
desktopTrailing?: ReactNode;
/**
* Optional pre-fetched external-object summary. Renders a compact severity
* marker before the rest of `desktopTrailing` on desktop only.
*/
externalObjectSummary?: ExternalObjectSummary | null;
trailingMeta?: ReactNode;
titleSuffix?: ReactNode;
titleClassName?: string;
checklistStepNumber?: number | string | null;
checklistCurrentStep?: boolean;
checklistDependencyChips?: ReactNode;
checklistRowId?: string;
unreadState?: IssueRowUnreadState | null;
onMarkRead?: () => void;
onArchive?: () => void;
archiveDisabled?: boolean;
className?: string;
/** Pointer entered the row (used by list keyboard nav to track hover). */
onMouseEnter?: () => void;
/** Ancestor levels; renders that many vertical tree-guide slots (desktop). */
treeGuides?: number;
/**
* This nested row has its own collapse chevron aligned with the innermost
* guide. Breaks the guide line there so the chevron is not crossed out.
*/
chevronInGuide?: boolean;
/** Legacy-only opt in to a bottom divider; canonical task rows stay divider-free. */
showDivider?: boolean;
}
export function InboxArchiveButton({
onArchive,
disabled,
compact = false,
}: {
onArchive: () => void;
disabled?: boolean;
compact?: boolean;
}) {
return (
{
event.preventDefault();
event.stopPropagation();
onArchive();
}}
onKeyDown={(event) => {
if (event.key !== "Enter" && event.key !== " ") return;
event.preventDefault();
event.stopPropagation();
onArchive();
}}
disabled={disabled}
className={cn(
"inline-flex shrink-0 items-center gap-1.5 rounded-md px-2 text-xs font-medium text-muted-foreground opacity-0 transition-opacity hover:bg-accent hover:text-foreground group-hover:opacity-100 focus-visible:opacity-100 disabled:pointer-events-none disabled:opacity-30",
compact ? "h-5 py-0" : "py-1",
)}
aria-label="Archive"
>
);
}
export function IssueRow({
issue,
issueLinkState,
selected = false,
presentation = "legacy",
leadingControl,
statusSlot,
metadata,
actions,
showIdentifier = true,
mobileLeading,
desktopMetaLeading,
desktopLeadingSpacer = false,
mobileMeta,
mobileTitleMeta,
desktopTrailing,
externalObjectSummary,
trailingMeta,
titleSuffix,
titleClassName,
checklistStepNumber = null,
checklistCurrentStep = false,
checklistDependencyChips,
checklistRowId,
unreadState = null,
onMarkRead,
onArchive,
archiveDisabled,
className,
onMouseEnter,
treeGuides = 0,
chevronInGuide = false,
showDivider = false,
}: IssueRowProps) {
const issuePathId = issue.identifier ?? issue.id;
const identifier = issue.identifier ?? issue.id.slice(0, 8);
// A row participates in the unread system whenever `unreadState` is supplied.
// Canonical rows overlay this affordance in their shared gutter, while legacy
// inbox rows retain their reserved slot until that presentation is migrated.
const showUnreadSlot = unreadState != null;
const showUnreadDot = unreadState === "visible" || unreadState === "fading";
const unreadDotButton = (
{
event.preventDefault();
event.stopPropagation();
onMarkRead?.();
}}
onKeyDown={(event) => {
if (event.key === "Enter" || event.key === " ") {
event.preventDefault();
event.stopPropagation();
onMarkRead?.();
}
}}
className={cn(
"inline-flex h-4 w-4 items-center justify-center rounded-full transition-colors",
selected ? "hover:bg-muted/80" : "hover:bg-blue-500/20",
)}
aria-label="Mark as read"
>
);
const selectedStatusClass = selected ? "!text-muted-foreground !border-muted-foreground" : undefined;
const detailState = withIssueDetailHeaderSeed(issueLinkState, issue);
const hasChecklistStep = checklistStepNumber !== null;
const checklistStep = hasChecklistStep ? (
{checklistStepNumber}.
) : null;
const recoveryAction = issue.activeRecoveryAction ?? null;
// The row already carries the issue's own scheduled retry, so the chip can tell a retry the
// scheduler is actually running from one whose due time simply passed.
const recoveryIndicator = recoveryAction && !requiresExecutionReconciliation(recoveryAction.cause)
? renderRecoveryChip(recoveryAction, selected, { scheduledRetry: issue.scheduledRetry ?? null })
: null;
const parkedBlockerIndicator = hasAssignedBacklogBlocker(issue.blockedBy) ? (
) : null;
if (presentation === "task") {
const isUnread = unreadState === "visible" || unreadState === "fading";
return (
Open {identifier}: {issue.title}
{showUnreadSlot ? (
{showUnreadDot ? unreadDotButton : null}
) : null}
{treeGuides > 0
? Array.from({ length: treeGuides }, (_, level) => {
const gapForChevron = chevronInGuide && level === treeGuides - 1;
return (
{gapForChevron ? (
) : (
);
})
: null}
{leadingControl}
{statusSlot ?? (
{issue.title}{titleSuffix}
{recoveryIndicator}
{mobileTitleMeta ? (
{mobileTitleMeta}
) : null}
{checklistDependencyChips ? (
{checklistDependencyChips}
) : null}
{mobileMeta ? (
{mobileMeta}
) : null}
{externalObjectSummary ? (
{metadata} : null}
{desktopTrailing}
{actions ? {actions} : null}
{onArchive ?
{identifier}
) : null}
{trailingMeta ? (
{trailingMeta}
) : null}
);
}
return (
Open {identifier}: {issue.title}
{mobileLeading ??
{issue.title}{titleSuffix}
{recoveryIndicator}
{checklistDependencyChips ? (
{checklistDependencyChips}
) : null}
{showUnreadSlot ? (
// Reserved leftmost dot gutter (desktop). Present on read and unread
// rows so the mark-read dot lives to the LEFT of any leading control
// (a parent's collapse caret, a tree guide) without indenting the row
// relative to its siblings, and aligns with the non-issue inbox rows
// that reserve the same w-4 slot.
{showUnreadDot ? unreadDotButton : null}
) : null}
{treeGuides > 0
? Array.from({ length: treeGuides }, (_, level) => {
// The innermost guide lands on THIS row's own chevron column; if
// the row has a chevron, break the line around it so it isn't
// crossed out.
const gapForChevron = chevronInGuide && level === treeGuides - 1;
return (
// Tree guide: occupies the same flex slot as the parent's
// chevron column so the line lands under the parent's status
// column; stretched past the row padding so consecutive rows
// read as one continuous line.
{/* The connector drops from under the ancestor's STATUS icon,
not its chevron: the status column sits one level (w-4 slot
+ gap-2 = 2rem) right of this guide slot's left edge.
bg-background underlay: dark-mode --border is translucent,
so overlapping row segments would stack brighter without
an opaque base. */}
{gapForChevron ? (
// Two border segments centering a 14px (h-3.5) transparent
// gap for the row's own chevron.
) : (
);
})
: null}
{desktopLeadingSpacer ? (
{checklistStep}
{identifier}
{parkedBlockerIndicator}
)}
{mobileMeta ? (
<>
·
{mobileMeta}
) : null}
{(onArchive || desktopTrailing || trailingMeta || externalObjectSummary) ? (
{onArchive ? (
{trailingMeta}
) : null}
) : null}
{showUnreadDot ? (
// Inbox rows reserve a mobile gutter on both read and unread rows. The
// full control stays inside overflow-clipping row containers while its
// absolute position avoids shifting or covering the leading control.
{unreadDotButton}
) : null}
);
}
function renderRecoveryChip(
action: IssueRecoveryAction,
selected: boolean,
liveness: RecoveryLivenessContext,
): ReactNode {
const state = deriveActiveRecoveryDisplayState(action, liveness);
if (!state) return null;
const tone = RECOVERY_CHIP_DEFAULT_TONE[state];
const Icon = tone.icon;
const lineage = readRecoveryRetryLineage(action, liveness);
const label = recoveryChipLabel(state, action.kind, lineage);
const detail = lineage ? formatRecoveryLineageSummary(lineage) : null;
return (
);
}