mirror of
https://github.com/alkimake/paperclip.git
synced 2026-06-14 01:50:39 +09:00
2169 lines
84 KiB
TypeScript
2169 lines
84 KiB
TypeScript
import { type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
import { Link, useLocation, useNavigate } from "@/lib/router";
|
|
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
|
import { INBOX_MINE_ISSUE_STATUS_FILTER } from "@paperclipai/shared";
|
|
import { approvalsApi } from "../api/approvals";
|
|
import { accessApi } from "../api/access";
|
|
import { authApi } from "../api/auth";
|
|
import { ApiError } from "../api/client";
|
|
import { dashboardApi } from "../api/dashboard";
|
|
import { executionWorkspacesApi } from "../api/execution-workspaces";
|
|
import { issuesApi } from "../api/issues";
|
|
import { agentsApi } from "../api/agents";
|
|
import { heartbeatsApi } from "../api/heartbeats";
|
|
import { instanceSettingsApi } from "../api/instanceSettings";
|
|
import { projectsApi } from "../api/projects";
|
|
import { useCompany } from "../context/CompanyContext";
|
|
import { useBreadcrumbs } from "../context/BreadcrumbContext";
|
|
import { useGeneralSettings } from "../context/GeneralSettingsContext";
|
|
import { useSidebar } from "../context/SidebarContext";
|
|
import { queryKeys } from "../lib/queryKeys";
|
|
import {
|
|
applyIssueFilters,
|
|
countActiveIssueFilters,
|
|
defaultIssueFilterState,
|
|
type IssueFilterState,
|
|
} from "../lib/issue-filters";
|
|
import {
|
|
armIssueDetailInboxQuickArchive,
|
|
createIssueDetailLocationState,
|
|
createIssueDetailPath,
|
|
rememberIssueDetailLocationState,
|
|
withIssueDetailHeaderSeed,
|
|
} from "../lib/issueDetailBreadcrumb";
|
|
import { hasBlockingShortcutDialog, isKeyboardShortcutTextInputTarget } from "../lib/keyboardShortcuts";
|
|
import { EmptyState } from "../components/EmptyState";
|
|
import { PageSkeleton } from "../components/PageSkeleton";
|
|
import {
|
|
InboxIssueMetaLeading,
|
|
InboxIssueTrailingColumns,
|
|
IssueColumnPicker,
|
|
issueActivityText,
|
|
issueTrailingColumns,
|
|
} from "../components/IssueColumns";
|
|
import { IssueFiltersPopover } from "../components/IssueFiltersPopover";
|
|
import { IssueRow } from "../components/IssueRow";
|
|
import { SwipeToArchive } from "../components/SwipeToArchive";
|
|
|
|
import { StatusIcon } from "../components/StatusIcon";
|
|
import { cn } from "../lib/utils";
|
|
import { StatusBadge } from "../components/StatusBadge";
|
|
import { approvalLabel, defaultTypeIcon, typeIcon } from "../components/ApprovalPayload";
|
|
import { timeAgo } from "../lib/timeAgo";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { Tabs } from "@/components/ui/tabs";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
|
import {
|
|
Inbox as InboxIcon,
|
|
AlertTriangle,
|
|
Check,
|
|
ChevronRight,
|
|
Layers,
|
|
XCircle,
|
|
X,
|
|
RotateCcw,
|
|
UserPlus,
|
|
Search,
|
|
ListTree,
|
|
} from "lucide-react";
|
|
import { Input } from "@/components/ui/input";
|
|
import { PageTabBar } from "../components/PageTabBar";
|
|
import type { Approval, HeartbeatRun, Issue, JoinRequest } from "@paperclipai/shared";
|
|
import {
|
|
ACTIONABLE_APPROVAL_STATUSES,
|
|
DEFAULT_INBOX_ISSUE_COLUMNS,
|
|
buildInboxNesting,
|
|
getAvailableInboxIssueColumns,
|
|
getApprovalsForTab,
|
|
getInboxWorkItems,
|
|
getInboxKeyboardSelectionIndex,
|
|
getLatestFailedRunsByAgent,
|
|
getRecentTouchedIssues,
|
|
groupInboxWorkItems,
|
|
isInboxEntityDismissed,
|
|
isMineInboxTab,
|
|
loadInboxIssueColumns,
|
|
loadInboxNesting,
|
|
loadInboxWorkItemGroupBy,
|
|
normalizeInboxIssueColumns,
|
|
resolveInboxNestingEnabled,
|
|
resolveIssueWorkspaceName,
|
|
resolveInboxSelectionIndex,
|
|
saveInboxIssueColumns,
|
|
saveInboxNesting,
|
|
saveInboxWorkItemGroupBy,
|
|
type InboxApprovalFilter,
|
|
type InboxIssueColumn,
|
|
saveLastInboxTab,
|
|
shouldShowInboxSection,
|
|
type InboxTab,
|
|
type InboxWorkItem,
|
|
type InboxWorkItemGroupBy,
|
|
} from "../lib/inbox";
|
|
import { useDismissedInboxAlerts, useInboxDismissals, useReadInboxItems } from "../hooks/useInboxBadge";
|
|
|
|
export { InboxIssueMetaLeading, InboxIssueTrailingColumns } from "../components/IssueColumns";
|
|
|
|
type InboxCategoryFilter =
|
|
| "everything"
|
|
| "issues_i_touched"
|
|
| "join_requests"
|
|
| "approvals"
|
|
| "failed_runs"
|
|
| "alerts";
|
|
type SectionKey =
|
|
| "work_items"
|
|
| "alerts";
|
|
|
|
/** A flat navigation entry for keyboard j/k traversal that includes expanded children. */
|
|
type NavEntry =
|
|
| { type: "top"; index: number; item: InboxWorkItem }
|
|
| { type: "child"; parentIndex: number; issue: Issue };
|
|
|
|
type InboxGroupedSection = {
|
|
key: string;
|
|
label: string | null;
|
|
displayItems: InboxWorkItem[];
|
|
childrenByIssueId: Map<string, Issue[]>;
|
|
};
|
|
|
|
function firstNonEmptyLine(value: string | null | undefined): string | null {
|
|
if (!value) return null;
|
|
const line = value.split("\n").map((chunk) => chunk.trim()).find(Boolean);
|
|
return line ?? null;
|
|
}
|
|
|
|
function runFailureMessage(run: HeartbeatRun): string {
|
|
return firstNonEmptyLine(run.error) ?? firstNonEmptyLine(run.stderrExcerpt) ?? "Run exited with an error.";
|
|
}
|
|
|
|
function approvalStatusLabel(status: Approval["status"]): string {
|
|
return status.replaceAll("_", " ");
|
|
}
|
|
|
|
function readIssueIdFromRun(run: HeartbeatRun): string | null {
|
|
const context = run.contextSnapshot;
|
|
if (!context) return null;
|
|
|
|
const issueId = context["issueId"];
|
|
if (typeof issueId === "string" && issueId.length > 0) return issueId;
|
|
|
|
const taskId = context["taskId"];
|
|
if (typeof taskId === "string" && taskId.length > 0) return taskId;
|
|
|
|
return null;
|
|
}
|
|
|
|
|
|
type NonIssueUnreadState = "visible" | "fading" | "hidden" | null;
|
|
|
|
export function FailedRunInboxRow({
|
|
run,
|
|
issueById,
|
|
agentName: linkedAgentName,
|
|
issueLinkState,
|
|
onDismiss,
|
|
onRetry,
|
|
isRetrying,
|
|
unreadState = null,
|
|
onMarkRead,
|
|
onArchive,
|
|
archiveDisabled,
|
|
selected = false,
|
|
className,
|
|
}: {
|
|
run: HeartbeatRun;
|
|
issueById: Map<string, Issue>;
|
|
agentName: string | null;
|
|
issueLinkState: unknown;
|
|
onDismiss: () => void;
|
|
onRetry: () => void;
|
|
isRetrying: boolean;
|
|
unreadState?: NonIssueUnreadState;
|
|
onMarkRead?: () => void;
|
|
onArchive?: () => void;
|
|
archiveDisabled?: boolean;
|
|
selected?: boolean;
|
|
className?: string;
|
|
}) {
|
|
const issueId = readIssueIdFromRun(run);
|
|
const issue = issueId ? issueById.get(issueId) ?? null : null;
|
|
const displayError = runFailureMessage(run);
|
|
const showUnreadSlot = unreadState !== null;
|
|
const showUnreadDot = unreadState === "visible" || unreadState === "fading";
|
|
|
|
return (
|
|
<div className={cn(
|
|
"group border-b border-border px-2 py-2.5 last:border-b-0 sm:px-1 sm:pr-3 sm:py-2",
|
|
className,
|
|
)}>
|
|
<div className="flex items-start gap-2 sm:items-center">
|
|
{showUnreadSlot ? (
|
|
<span className="hidden sm:inline-flex h-4 w-4 shrink-0 items-center justify-center self-center">
|
|
{showUnreadDot ? (
|
|
<button
|
|
type="button"
|
|
onClick={onMarkRead}
|
|
className={cn(
|
|
"inline-flex h-4 w-4 items-center justify-center rounded-full transition-colors",
|
|
"hover:bg-blue-500/20",
|
|
)}
|
|
aria-label="Mark as read"
|
|
>
|
|
<span className={cn(
|
|
"block h-2 w-2 rounded-full transition-opacity duration-300",
|
|
"bg-blue-600 dark:bg-blue-400",
|
|
unreadState === "fading" ? "opacity-0" : "opacity-100",
|
|
)} />
|
|
</button>
|
|
) : onArchive ? (
|
|
<button
|
|
type="button"
|
|
onClick={onArchive}
|
|
disabled={archiveDisabled}
|
|
className="inline-flex h-4 w-4 items-center justify-center rounded-md text-muted-foreground opacity-0 transition-opacity hover:text-foreground group-hover:opacity-100 disabled:pointer-events-none disabled:opacity-30"
|
|
aria-label="Dismiss from inbox"
|
|
>
|
|
<X className="h-3.5 w-3.5" />
|
|
</button>
|
|
) : (
|
|
<span className="inline-flex h-4 w-4" aria-hidden="true" />
|
|
)}
|
|
</span>
|
|
) : null}
|
|
<Link
|
|
to={`/agents/${run.agentId}/runs/${run.id}`}
|
|
className={cn(
|
|
"flex min-w-0 flex-1 items-start gap-2 no-underline text-inherit transition-colors",
|
|
selected ? "hover:bg-transparent" : "hover:bg-accent/50",
|
|
)}
|
|
>
|
|
{!showUnreadSlot && <span className="hidden h-2 w-2 shrink-0 sm:inline-flex" aria-hidden="true" />}
|
|
<span className="hidden h-3.5 w-3.5 shrink-0 sm:inline-flex" aria-hidden="true" />
|
|
<span className="mt-0.5 shrink-0 rounded-md bg-red-500/20 p-1.5 sm:mt-0">
|
|
<XCircle className="h-4 w-4 text-red-600 dark:text-red-400" />
|
|
</span>
|
|
<span className="min-w-0 flex-1">
|
|
<span className="line-clamp-2 text-sm font-medium sm:truncate sm:line-clamp-none">
|
|
{issue ? (
|
|
<>
|
|
<span className="font-mono text-muted-foreground mr-1.5">
|
|
{issue.identifier ?? issue.id.slice(0, 8)}
|
|
</span>
|
|
{issue.title}
|
|
</>
|
|
) : (
|
|
<>Failed run{linkedAgentName ? ` — ${linkedAgentName}` : ""}</>
|
|
)}
|
|
</span>
|
|
<span className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
|
|
<StatusBadge status={run.status} />
|
|
{linkedAgentName && issue ? <span>{linkedAgentName}</span> : null}
|
|
<span className="truncate max-w-[300px]">{displayError}</span>
|
|
<span>{timeAgo(run.createdAt)}</span>
|
|
</span>
|
|
</span>
|
|
</Link>
|
|
<div className="hidden shrink-0 items-center gap-2 sm:flex">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
className="h-8 shrink-0 px-2.5"
|
|
onClick={onRetry}
|
|
disabled={isRetrying}
|
|
>
|
|
<RotateCcw className="mr-1.5 h-3.5 w-3.5" />
|
|
{isRetrying ? "Retrying…" : "Retry"}
|
|
</Button>
|
|
{!showUnreadSlot && (
|
|
<button
|
|
type="button"
|
|
onClick={onDismiss}
|
|
className="rounded-md p-1 text-muted-foreground opacity-0 transition-opacity hover:bg-accent hover:text-foreground group-hover:opacity-100"
|
|
aria-label="Dismiss"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="mt-3 flex gap-2 sm:hidden">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
className="h-8 shrink-0 px-2.5"
|
|
onClick={onRetry}
|
|
disabled={isRetrying}
|
|
>
|
|
<RotateCcw className="mr-1.5 h-3.5 w-3.5" />
|
|
{isRetrying ? "Retrying…" : "Retry"}
|
|
</Button>
|
|
{!showUnreadSlot && (
|
|
<button
|
|
type="button"
|
|
onClick={onDismiss}
|
|
className="rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
|
|
aria-label="Dismiss"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ApprovalInboxRow({
|
|
approval,
|
|
requesterName,
|
|
onApprove,
|
|
onReject,
|
|
isPending,
|
|
unreadState = null,
|
|
onMarkRead,
|
|
onArchive,
|
|
archiveDisabled,
|
|
selected = false,
|
|
className,
|
|
}: {
|
|
approval: Approval;
|
|
requesterName: string | null;
|
|
onApprove: () => void;
|
|
onReject: () => void;
|
|
isPending: boolean;
|
|
unreadState?: NonIssueUnreadState;
|
|
onMarkRead?: () => void;
|
|
onArchive?: () => void;
|
|
archiveDisabled?: boolean;
|
|
selected?: boolean;
|
|
className?: string;
|
|
}) {
|
|
const Icon = typeIcon[approval.type] ?? defaultTypeIcon;
|
|
const label = approvalLabel(approval.type, approval.payload as Record<string, unknown> | null);
|
|
const showResolutionButtons =
|
|
approval.type !== "budget_override_required" &&
|
|
ACTIONABLE_APPROVAL_STATUSES.has(approval.status);
|
|
const showUnreadSlot = unreadState !== null;
|
|
const showUnreadDot = unreadState === "visible" || unreadState === "fading";
|
|
|
|
return (
|
|
<div className={cn(
|
|
"group border-b border-border px-2 py-2.5 last:border-b-0 sm:px-1 sm:pr-3 sm:py-2",
|
|
className,
|
|
)}>
|
|
<div className="flex items-start gap-2 sm:items-center">
|
|
{showUnreadSlot ? (
|
|
<span className="hidden sm:inline-flex h-4 w-4 shrink-0 items-center justify-center self-center">
|
|
{showUnreadDot ? (
|
|
<button
|
|
type="button"
|
|
onClick={onMarkRead}
|
|
className={cn(
|
|
"inline-flex h-4 w-4 items-center justify-center rounded-full transition-colors",
|
|
"hover:bg-blue-500/20",
|
|
)}
|
|
aria-label="Mark as read"
|
|
>
|
|
<span className={cn(
|
|
"block h-2 w-2 rounded-full transition-opacity duration-300",
|
|
"bg-blue-600 dark:bg-blue-400",
|
|
unreadState === "fading" ? "opacity-0" : "opacity-100",
|
|
)} />
|
|
</button>
|
|
) : onArchive ? (
|
|
<button
|
|
type="button"
|
|
onClick={onArchive}
|
|
disabled={archiveDisabled}
|
|
className="inline-flex h-4 w-4 items-center justify-center rounded-md text-muted-foreground opacity-0 transition-opacity hover:text-foreground group-hover:opacity-100 disabled:pointer-events-none disabled:opacity-30"
|
|
aria-label="Dismiss from inbox"
|
|
>
|
|
<X className="h-3.5 w-3.5" />
|
|
</button>
|
|
) : (
|
|
<span className="inline-flex h-4 w-4" aria-hidden="true" />
|
|
)}
|
|
</span>
|
|
) : null}
|
|
<Link
|
|
to={`/approvals/${approval.id}`}
|
|
className={cn(
|
|
"flex min-w-0 flex-1 items-start gap-2 no-underline text-inherit transition-colors",
|
|
selected ? "hover:bg-transparent" : "hover:bg-accent/50",
|
|
)}
|
|
>
|
|
{!showUnreadSlot && <span className="hidden h-2 w-2 shrink-0 sm:inline-flex" aria-hidden="true" />}
|
|
<span className="hidden h-3.5 w-3.5 shrink-0 sm:inline-flex" aria-hidden="true" />
|
|
<span className="mt-0.5 shrink-0 rounded-md bg-muted p-1.5 sm:mt-0">
|
|
<Icon className="h-4 w-4 text-muted-foreground" />
|
|
</span>
|
|
<span className="min-w-0 flex-1">
|
|
<span className="line-clamp-2 text-sm font-medium sm:truncate sm:line-clamp-none">
|
|
{label}
|
|
</span>
|
|
<span className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
|
|
<span className="capitalize">{approvalStatusLabel(approval.status)}</span>
|
|
{requesterName ? <span>requested by {requesterName}</span> : null}
|
|
<span>updated {timeAgo(approval.updatedAt)}</span>
|
|
</span>
|
|
</span>
|
|
</Link>
|
|
{showResolutionButtons ? (
|
|
<div className="hidden shrink-0 items-center gap-2 sm:flex">
|
|
<Button
|
|
size="sm"
|
|
className="h-8 bg-green-700 px-3 text-white hover:bg-green-600"
|
|
onClick={onApprove}
|
|
disabled={isPending}
|
|
>
|
|
Approve
|
|
</Button>
|
|
<Button
|
|
variant="destructive"
|
|
size="sm"
|
|
className="h-8 px-3"
|
|
onClick={onReject}
|
|
disabled={isPending}
|
|
>
|
|
Reject
|
|
</Button>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
{showResolutionButtons ? (
|
|
<div className="mt-3 flex gap-2 sm:hidden">
|
|
<Button
|
|
size="sm"
|
|
className="h-8 bg-green-700 px-3 text-white hover:bg-green-600"
|
|
onClick={onApprove}
|
|
disabled={isPending}
|
|
>
|
|
Approve
|
|
</Button>
|
|
<Button
|
|
variant="destructive"
|
|
size="sm"
|
|
className="h-8 px-3"
|
|
onClick={onReject}
|
|
disabled={isPending}
|
|
>
|
|
Reject
|
|
</Button>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function JoinRequestInboxRow({
|
|
joinRequest,
|
|
onApprove,
|
|
onReject,
|
|
isPending,
|
|
unreadState = null,
|
|
onMarkRead,
|
|
onArchive,
|
|
archiveDisabled,
|
|
selected = false,
|
|
className,
|
|
}: {
|
|
joinRequest: JoinRequest;
|
|
onApprove: () => void;
|
|
onReject: () => void;
|
|
isPending: boolean;
|
|
unreadState?: NonIssueUnreadState;
|
|
onMarkRead?: () => void;
|
|
onArchive?: () => void;
|
|
archiveDisabled?: boolean;
|
|
selected?: boolean;
|
|
className?: string;
|
|
}) {
|
|
const label =
|
|
joinRequest.requestType === "human"
|
|
? "Human join request"
|
|
: `Agent join request${joinRequest.agentName ? `: ${joinRequest.agentName}` : ""}`;
|
|
const showUnreadSlot = unreadState !== null;
|
|
const showUnreadDot = unreadState === "visible" || unreadState === "fading";
|
|
|
|
return (
|
|
<div className={cn(
|
|
"group border-b border-border px-2 py-2.5 last:border-b-0 sm:px-1 sm:pr-3 sm:py-2",
|
|
className,
|
|
)}>
|
|
<div className="flex items-start gap-2 sm:items-center">
|
|
{showUnreadSlot ? (
|
|
<span className="hidden sm:inline-flex h-4 w-4 shrink-0 items-center justify-center self-center">
|
|
{showUnreadDot ? (
|
|
<button
|
|
type="button"
|
|
onClick={onMarkRead}
|
|
className={cn(
|
|
"inline-flex h-4 w-4 items-center justify-center rounded-full transition-colors",
|
|
"hover:bg-blue-500/20",
|
|
)}
|
|
aria-label="Mark as read"
|
|
>
|
|
<span className={cn(
|
|
"block h-2 w-2 rounded-full transition-opacity duration-300",
|
|
"bg-blue-600 dark:bg-blue-400",
|
|
unreadState === "fading" ? "opacity-0" : "opacity-100",
|
|
)} />
|
|
</button>
|
|
) : onArchive ? (
|
|
<button
|
|
type="button"
|
|
onClick={onArchive}
|
|
disabled={archiveDisabled}
|
|
className="inline-flex h-4 w-4 items-center justify-center rounded-md text-muted-foreground opacity-0 transition-opacity hover:text-foreground group-hover:opacity-100 disabled:pointer-events-none disabled:opacity-30"
|
|
aria-label="Dismiss from inbox"
|
|
>
|
|
<X className="h-3.5 w-3.5" />
|
|
</button>
|
|
) : (
|
|
<span className="inline-flex h-4 w-4" aria-hidden="true" />
|
|
)}
|
|
</span>
|
|
) : null}
|
|
<div className="flex min-w-0 flex-1 items-start gap-2">
|
|
{!showUnreadSlot && <span className="hidden h-2 w-2 shrink-0 sm:inline-flex" aria-hidden="true" />}
|
|
<span className="hidden h-3.5 w-3.5 shrink-0 sm:inline-flex" aria-hidden="true" />
|
|
<span className="mt-0.5 shrink-0 rounded-md bg-muted p-1.5 sm:mt-0">
|
|
<UserPlus className="h-4 w-4 text-muted-foreground" />
|
|
</span>
|
|
<span className="min-w-0 flex-1">
|
|
<span className="line-clamp-2 text-sm font-medium sm:truncate sm:line-clamp-none">
|
|
{label}
|
|
</span>
|
|
<span className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
|
|
<span>requested {timeAgo(joinRequest.createdAt)} from IP {joinRequest.requestIp}</span>
|
|
{joinRequest.adapterType && <span>adapter: {joinRequest.adapterType}</span>}
|
|
</span>
|
|
</span>
|
|
</div>
|
|
<div className="hidden shrink-0 items-center gap-2 sm:flex">
|
|
<Button
|
|
size="sm"
|
|
className="h-8 bg-green-700 px-3 text-white hover:bg-green-600"
|
|
onClick={onApprove}
|
|
disabled={isPending}
|
|
>
|
|
Approve
|
|
</Button>
|
|
<Button
|
|
variant="destructive"
|
|
size="sm"
|
|
className="h-8 px-3"
|
|
onClick={onReject}
|
|
disabled={isPending}
|
|
>
|
|
Reject
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className="mt-3 flex gap-2 sm:hidden">
|
|
<Button
|
|
size="sm"
|
|
className="h-8 bg-green-700 px-3 text-white hover:bg-green-600"
|
|
onClick={onApprove}
|
|
disabled={isPending}
|
|
>
|
|
Approve
|
|
</Button>
|
|
<Button
|
|
variant="destructive"
|
|
size="sm"
|
|
className="h-8 px-3"
|
|
onClick={onReject}
|
|
disabled={isPending}
|
|
>
|
|
Reject
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function Inbox() {
|
|
const { selectedCompanyId } = useCompany();
|
|
const { setBreadcrumbs } = useBreadcrumbs();
|
|
const { isMobile } = useSidebar();
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
const queryClient = useQueryClient();
|
|
const [actionError, setActionError] = useState<string | null>(null);
|
|
const { keyboardShortcutsEnabled } = useGeneralSettings();
|
|
const { data: experimentalSettings } = useQuery({
|
|
queryKey: queryKeys.instance.experimentalSettings,
|
|
queryFn: () => instanceSettingsApi.getExperimental(),
|
|
retry: false,
|
|
});
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
const [allCategoryFilter, setAllCategoryFilter] = useState<InboxCategoryFilter>("everything");
|
|
const [allApprovalFilter, setAllApprovalFilter] = useState<InboxApprovalFilter>("all");
|
|
const [issueFilters, setIssueFilters] = useState<IssueFilterState>(defaultIssueFilterState);
|
|
const [groupBy, setGroupBy] = useState<InboxWorkItemGroupBy>(() => loadInboxWorkItemGroupBy());
|
|
const [visibleIssueColumns, setVisibleIssueColumns] = useState<InboxIssueColumn[]>(loadInboxIssueColumns);
|
|
const { dismissed: dismissedAlerts, dismiss: dismissAlert } = useDismissedInboxAlerts();
|
|
const { dismissedAtByKey, dismiss: dismissInboxItem } = useInboxDismissals(selectedCompanyId);
|
|
const { readItems, markRead: markItemRead, markUnread: markItemUnread } = useReadInboxItems();
|
|
|
|
const pathSegment = location.pathname.split("/").pop() ?? "mine";
|
|
const tab: InboxTab =
|
|
pathSegment === "mine" || pathSegment === "recent" || pathSegment === "all" || pathSegment === "unread"
|
|
? pathSegment
|
|
: "mine";
|
|
const canArchiveFromTab = isMineInboxTab(tab);
|
|
const issueLinkState = useMemo(
|
|
() =>
|
|
createIssueDetailLocationState(
|
|
"Inbox",
|
|
`${location.pathname}${location.search}${location.hash}`,
|
|
"inbox",
|
|
),
|
|
[location.pathname, location.search, location.hash],
|
|
);
|
|
|
|
const { data: session } = useQuery({
|
|
queryKey: queryKeys.auth.session,
|
|
queryFn: () => authApi.getSession(),
|
|
});
|
|
|
|
const { data: agents } = useQuery({
|
|
queryKey: queryKeys.agents.list(selectedCompanyId!),
|
|
queryFn: () => agentsApi.list(selectedCompanyId!),
|
|
enabled: !!selectedCompanyId,
|
|
});
|
|
|
|
const { data: projects } = useQuery({
|
|
queryKey: queryKeys.projects.list(selectedCompanyId!),
|
|
queryFn: () => projectsApi.list(selectedCompanyId!),
|
|
enabled: !!selectedCompanyId,
|
|
});
|
|
const { data: labels } = useQuery({
|
|
queryKey: queryKeys.issues.labels(selectedCompanyId!),
|
|
queryFn: () => issuesApi.listLabels(selectedCompanyId!),
|
|
enabled: !!selectedCompanyId,
|
|
});
|
|
const isolatedWorkspacesEnabled = experimentalSettings?.enableIsolatedWorkspaces === true;
|
|
const { data: executionWorkspaces = [] } = useQuery({
|
|
queryKey: selectedCompanyId
|
|
? queryKeys.executionWorkspaces.list(selectedCompanyId)
|
|
: ["execution-workspaces", "__disabled__"],
|
|
queryFn: () => executionWorkspacesApi.list(selectedCompanyId!),
|
|
enabled: !!selectedCompanyId && isolatedWorkspacesEnabled,
|
|
});
|
|
|
|
useEffect(() => {
|
|
setBreadcrumbs([{ label: "Inbox" }]);
|
|
}, [setBreadcrumbs]);
|
|
|
|
useEffect(() => {
|
|
saveLastInboxTab(tab);
|
|
setSelectedIndex(-1);
|
|
setSearchQuery("");
|
|
}, [tab]);
|
|
|
|
const {
|
|
data: approvals,
|
|
isLoading: isApprovalsLoading,
|
|
error: approvalsError,
|
|
} = useQuery({
|
|
queryKey: queryKeys.approvals.list(selectedCompanyId!),
|
|
queryFn: () => approvalsApi.list(selectedCompanyId!),
|
|
enabled: !!selectedCompanyId,
|
|
});
|
|
|
|
const {
|
|
data: joinRequests = [],
|
|
isLoading: isJoinRequestsLoading,
|
|
} = useQuery({
|
|
queryKey: queryKeys.access.joinRequests(selectedCompanyId!),
|
|
queryFn: async () => {
|
|
try {
|
|
return await accessApi.listJoinRequests(selectedCompanyId!, "pending_approval");
|
|
} catch (err) {
|
|
if (err instanceof ApiError && (err.status === 403 || err.status === 401)) {
|
|
return [];
|
|
}
|
|
throw err;
|
|
}
|
|
},
|
|
enabled: !!selectedCompanyId,
|
|
retry: false,
|
|
});
|
|
|
|
const { data: dashboard, isLoading: isDashboardLoading } = useQuery({
|
|
queryKey: queryKeys.dashboard(selectedCompanyId!),
|
|
queryFn: () => dashboardApi.summary(selectedCompanyId!),
|
|
enabled: !!selectedCompanyId,
|
|
});
|
|
|
|
const { data: issues, isLoading: isIssuesLoading } = useQuery({
|
|
queryKey: [...queryKeys.issues.list(selectedCompanyId!), "with-routine-executions"],
|
|
queryFn: () => issuesApi.list(selectedCompanyId!, { includeRoutineExecutions: true }),
|
|
enabled: !!selectedCompanyId,
|
|
});
|
|
const {
|
|
data: mineIssuesRaw = [],
|
|
isLoading: isMineIssuesLoading,
|
|
} = useQuery({
|
|
queryKey: [...queryKeys.issues.listMineByMe(selectedCompanyId!), "with-routine-executions"],
|
|
queryFn: () =>
|
|
issuesApi.list(selectedCompanyId!, {
|
|
touchedByUserId: "me",
|
|
inboxArchivedByUserId: "me",
|
|
status: INBOX_MINE_ISSUE_STATUS_FILTER,
|
|
includeRoutineExecutions: true,
|
|
}),
|
|
enabled: !!selectedCompanyId,
|
|
});
|
|
const {
|
|
data: touchedIssuesRaw = [],
|
|
isLoading: isTouchedIssuesLoading,
|
|
} = useQuery({
|
|
queryKey: [...queryKeys.issues.listTouchedByMe(selectedCompanyId!), "with-routine-executions"],
|
|
queryFn: () =>
|
|
issuesApi.list(selectedCompanyId!, {
|
|
touchedByUserId: "me",
|
|
status: INBOX_MINE_ISSUE_STATUS_FILTER,
|
|
includeRoutineExecutions: true,
|
|
}),
|
|
enabled: !!selectedCompanyId,
|
|
});
|
|
|
|
const { data: heartbeatRuns, isLoading: isRunsLoading } = useQuery({
|
|
queryKey: queryKeys.heartbeats(selectedCompanyId!),
|
|
queryFn: () => heartbeatsApi.list(selectedCompanyId!),
|
|
enabled: !!selectedCompanyId,
|
|
});
|
|
const currentUserId = session?.user.id ?? session?.session.userId ?? null;
|
|
|
|
const mineIssues = useMemo(() => getRecentTouchedIssues(mineIssuesRaw), [mineIssuesRaw]);
|
|
const touchedIssues = useMemo(() => getRecentTouchedIssues(touchedIssuesRaw), [touchedIssuesRaw]);
|
|
const visibleMineIssues = useMemo(
|
|
() => applyIssueFilters(mineIssues, issueFilters, currentUserId, true),
|
|
[mineIssues, issueFilters, currentUserId],
|
|
);
|
|
const visibleTouchedIssues = useMemo(
|
|
() => applyIssueFilters(touchedIssues, issueFilters, currentUserId, true),
|
|
[touchedIssues, issueFilters, currentUserId],
|
|
);
|
|
const unreadTouchedIssues = useMemo(
|
|
() => visibleTouchedIssues.filter((issue) => issue.isUnreadForMe),
|
|
[visibleTouchedIssues],
|
|
);
|
|
const issuesToRender = useMemo(
|
|
() => {
|
|
if (tab === "mine") return visibleMineIssues;
|
|
if (tab === "unread") return unreadTouchedIssues;
|
|
return visibleTouchedIssues;
|
|
},
|
|
[tab, visibleMineIssues, visibleTouchedIssues, unreadTouchedIssues],
|
|
);
|
|
|
|
const agentById = useMemo(() => {
|
|
const map = new Map<string, string>();
|
|
for (const agent of agents ?? []) map.set(agent.id, agent.name);
|
|
return map;
|
|
}, [agents]);
|
|
|
|
const issueById = useMemo(() => {
|
|
const map = new Map<string, Issue>();
|
|
for (const issue of issues ?? []) map.set(issue.id, issue);
|
|
return map;
|
|
}, [issues]);
|
|
const projectById = useMemo(() => {
|
|
const map = new Map<string, { name: string; color: string | null }>();
|
|
for (const project of projects ?? []) {
|
|
map.set(project.id, { name: project.name, color: project.color });
|
|
}
|
|
return map;
|
|
}, [projects]);
|
|
const projectWorkspaceById = useMemo(() => {
|
|
const map = new Map<string, { name: string }>();
|
|
for (const project of projects ?? []) {
|
|
for (const workspace of project.workspaces ?? []) {
|
|
map.set(workspace.id, { name: workspace.name });
|
|
}
|
|
}
|
|
return map;
|
|
}, [projects]);
|
|
const defaultProjectWorkspaceIdByProjectId = useMemo(() => {
|
|
const map = new Map<string, string>();
|
|
for (const project of projects ?? []) {
|
|
const defaultWorkspaceId =
|
|
project.executionWorkspacePolicy?.defaultProjectWorkspaceId
|
|
?? project.primaryWorkspace?.id
|
|
?? null;
|
|
if (defaultWorkspaceId) map.set(project.id, defaultWorkspaceId);
|
|
}
|
|
return map;
|
|
}, [projects]);
|
|
const executionWorkspaceById = useMemo(() => {
|
|
const map = new Map<string, {
|
|
name: string;
|
|
mode: "shared_workspace" | "isolated_workspace" | "operator_branch" | "adapter_managed" | "cloud_sandbox";
|
|
projectWorkspaceId: string | null;
|
|
}>();
|
|
for (const workspace of executionWorkspaces) {
|
|
map.set(workspace.id, {
|
|
name: workspace.name,
|
|
mode: workspace.mode,
|
|
projectWorkspaceId: workspace.projectWorkspaceId ?? null,
|
|
});
|
|
}
|
|
return map;
|
|
}, [executionWorkspaces]);
|
|
const visibleIssueColumnSet = useMemo(() => new Set(visibleIssueColumns), [visibleIssueColumns]);
|
|
const availableIssueColumns = useMemo(
|
|
() => getAvailableInboxIssueColumns(isolatedWorkspacesEnabled),
|
|
[isolatedWorkspacesEnabled],
|
|
);
|
|
const availableIssueColumnSet = useMemo(() => new Set(availableIssueColumns), [availableIssueColumns]);
|
|
const visibleTrailingIssueColumns = useMemo(
|
|
() => issueTrailingColumns.filter((column) => visibleIssueColumnSet.has(column) && availableIssueColumnSet.has(column)),
|
|
[availableIssueColumnSet, visibleIssueColumnSet],
|
|
);
|
|
|
|
const failedRuns = useMemo(
|
|
() =>
|
|
getLatestFailedRunsByAgent(heartbeatRuns ?? []).filter(
|
|
(r) => !isInboxEntityDismissed(dismissedAtByKey, `run:${r.id}`, r.createdAt),
|
|
),
|
|
[heartbeatRuns, dismissedAtByKey],
|
|
);
|
|
const liveIssueIds = useMemo(() => {
|
|
const ids = new Set<string>();
|
|
for (const run of heartbeatRuns ?? []) {
|
|
if (run.status !== "running" && run.status !== "queued") continue;
|
|
const issueId = readIssueIdFromRun(run);
|
|
if (issueId) ids.add(issueId);
|
|
}
|
|
return ids;
|
|
}, [heartbeatRuns]);
|
|
|
|
const approvalsToRender = useMemo(() => {
|
|
let filtered = getApprovalsForTab(approvals ?? [], tab, allApprovalFilter);
|
|
if (tab === "mine") {
|
|
filtered = filtered.filter(
|
|
(a) => !isInboxEntityDismissed(dismissedAtByKey, `approval:${a.id}`, a.updatedAt),
|
|
);
|
|
}
|
|
return filtered;
|
|
}, [approvals, tab, allApprovalFilter, dismissedAtByKey]);
|
|
const showJoinRequestsCategory =
|
|
allCategoryFilter === "everything" || allCategoryFilter === "join_requests";
|
|
const showTouchedCategory =
|
|
allCategoryFilter === "everything" || allCategoryFilter === "issues_i_touched";
|
|
const showApprovalsCategory =
|
|
allCategoryFilter === "everything" || allCategoryFilter === "approvals";
|
|
const showFailedRunsCategory =
|
|
allCategoryFilter === "everything" || allCategoryFilter === "failed_runs";
|
|
const showAlertsCategory = allCategoryFilter === "everything" || allCategoryFilter === "alerts";
|
|
const failedRunsForTab = useMemo(() => {
|
|
if (tab === "all" && !showFailedRunsCategory) return [];
|
|
return failedRuns;
|
|
}, [failedRuns, tab, showFailedRunsCategory]);
|
|
|
|
const joinRequestsForTab = useMemo(() => {
|
|
if (tab === "all" && !showJoinRequestsCategory) return [];
|
|
if (tab === "mine") {
|
|
return joinRequests.filter(
|
|
(jr) => !isInboxEntityDismissed(dismissedAtByKey, `join:${jr.id}`, jr.updatedAt ?? jr.createdAt),
|
|
);
|
|
}
|
|
return joinRequests;
|
|
}, [joinRequests, tab, showJoinRequestsCategory, dismissedAtByKey]);
|
|
|
|
const workItemsToRender = useMemo(
|
|
() =>
|
|
getInboxWorkItems({
|
|
issues: tab === "all" && !showTouchedCategory ? [] : issuesToRender,
|
|
approvals: tab === "all" && !showApprovalsCategory ? [] : approvalsToRender,
|
|
failedRuns: failedRunsForTab,
|
|
joinRequests: joinRequestsForTab,
|
|
}),
|
|
[approvalsToRender, issuesToRender, showApprovalsCategory, showTouchedCategory, tab, failedRunsForTab, joinRequestsForTab],
|
|
);
|
|
|
|
const filteredWorkItems = useMemo(() => {
|
|
const q = searchQuery.trim().toLowerCase();
|
|
if (!q) return workItemsToRender;
|
|
return workItemsToRender.filter((item) => {
|
|
if (item.kind === "issue") {
|
|
const issue = item.issue;
|
|
if (issue.title.toLowerCase().includes(q)) return true;
|
|
if (issue.identifier?.toLowerCase().includes(q)) return true;
|
|
if (issue.description?.toLowerCase().includes(q)) return true;
|
|
if (isolatedWorkspacesEnabled) {
|
|
const workspaceName = resolveIssueWorkspaceName(issue, {
|
|
executionWorkspaceById,
|
|
projectWorkspaceById,
|
|
defaultProjectWorkspaceIdByProjectId,
|
|
});
|
|
if (workspaceName?.toLowerCase().includes(q)) return true;
|
|
}
|
|
return false;
|
|
}
|
|
if (item.kind === "approval") {
|
|
const a = item.approval;
|
|
const label = approvalLabel(a.type, a.payload as Record<string, unknown> | null);
|
|
if (label.toLowerCase().includes(q)) return true;
|
|
if (a.type.toLowerCase().includes(q)) return true;
|
|
return false;
|
|
}
|
|
if (item.kind === "failed_run") {
|
|
const run = item.run;
|
|
const name = agentById.get(run.agentId);
|
|
if (name?.toLowerCase().includes(q)) return true;
|
|
const msg = runFailureMessage(run);
|
|
if (msg.toLowerCase().includes(q)) return true;
|
|
const issueId = readIssueIdFromRun(run);
|
|
if (issueId) {
|
|
const issue = issueById.get(issueId);
|
|
if (issue?.title.toLowerCase().includes(q)) return true;
|
|
if (issue?.identifier?.toLowerCase().includes(q)) return true;
|
|
}
|
|
return false;
|
|
}
|
|
if (item.kind === "join_request") {
|
|
const jr = item.joinRequest;
|
|
if (jr.agentName?.toLowerCase().includes(q)) return true;
|
|
if (jr.capabilities?.toLowerCase().includes(q)) return true;
|
|
return false;
|
|
}
|
|
return false;
|
|
});
|
|
}, [
|
|
workItemsToRender,
|
|
searchQuery,
|
|
agentById,
|
|
defaultProjectWorkspaceIdByProjectId,
|
|
executionWorkspaceById,
|
|
issueById,
|
|
isolatedWorkspacesEnabled,
|
|
projectWorkspaceById,
|
|
]);
|
|
|
|
// --- Parent-child nesting for inbox issues ---
|
|
const [nestingPreferenceEnabled, setNestingPreferenceEnabled] = useState(() => loadInboxNesting());
|
|
const nestingEnabled = resolveInboxNestingEnabled(nestingPreferenceEnabled, isMobile);
|
|
const toggleNesting = useCallback(() => {
|
|
setNestingPreferenceEnabled((prev) => {
|
|
const next = !prev;
|
|
saveInboxNesting(next);
|
|
return next;
|
|
});
|
|
}, []);
|
|
const [collapsedInboxParents, setCollapsedInboxParents] = useState<Set<string>>(new Set());
|
|
const groupedSections = useMemo<InboxGroupedSection[]>(() => {
|
|
return groupInboxWorkItems(filteredWorkItems, groupBy).map((group) => {
|
|
const nestedGroup = nestingEnabled && group.items.some((item) => item.kind === "issue")
|
|
? buildInboxNesting(group.items)
|
|
: { displayItems: group.items, childrenByIssueId: new Map<string, Issue[]>() };
|
|
|
|
return {
|
|
key: group.key,
|
|
label: group.label,
|
|
displayItems: nestedGroup.displayItems,
|
|
childrenByIssueId: nestedGroup.childrenByIssueId,
|
|
};
|
|
});
|
|
}, [filteredWorkItems, groupBy, nestingEnabled]);
|
|
const nestedWorkItems = useMemo(
|
|
() => groupedSections.flatMap((group) => group.displayItems),
|
|
[groupedSections],
|
|
);
|
|
const childrenByIssueId = useMemo(() => {
|
|
const merged = new Map<string, Issue[]>();
|
|
for (const group of groupedSections) {
|
|
for (const [issueId, children] of group.childrenByIssueId) {
|
|
merged.set(issueId, children);
|
|
}
|
|
}
|
|
return merged;
|
|
}, [groupedSections]);
|
|
const totalVisibleWorkItems = useMemo(
|
|
() => groupedSections.reduce((count, group) => count + group.displayItems.length, 0),
|
|
[groupedSections],
|
|
);
|
|
const toggleInboxParentCollapse = useCallback((parentId: string) => {
|
|
setCollapsedInboxParents((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(parentId)) next.delete(parentId);
|
|
else next.add(parentId);
|
|
return next;
|
|
});
|
|
}, []);
|
|
|
|
// Build flat navigation list including expanded children for keyboard traversal
|
|
const flatNavItems = useMemo((): NavEntry[] => {
|
|
const entries: NavEntry[] = [];
|
|
let topIndex = 0;
|
|
for (const group of groupedSections) {
|
|
for (const item of group.displayItems) {
|
|
entries.push({ type: "top", index: topIndex, item });
|
|
if (item.kind === "issue") {
|
|
const children = group.childrenByIssueId.get(item.issue.id);
|
|
const isExpanded = children?.length && !collapsedInboxParents.has(item.issue.id);
|
|
if (isExpanded) {
|
|
for (const child of children) {
|
|
entries.push({ type: "child", parentIndex: topIndex, issue: child });
|
|
}
|
|
}
|
|
}
|
|
topIndex += 1;
|
|
}
|
|
}
|
|
return entries;
|
|
}, [groupedSections, collapsedInboxParents]);
|
|
|
|
const agentName = (id: string | null) => {
|
|
if (!id) return null;
|
|
return agentById.get(id) ?? null;
|
|
};
|
|
const setIssueColumns = useCallback((next: InboxIssueColumn[]) => {
|
|
const normalized = normalizeInboxIssueColumns(next);
|
|
setVisibleIssueColumns(normalized);
|
|
saveInboxIssueColumns(normalized);
|
|
}, []);
|
|
const toggleIssueColumn = useCallback((column: InboxIssueColumn, enabled: boolean) => {
|
|
if (enabled) {
|
|
setIssueColumns([...visibleIssueColumns, column]);
|
|
return;
|
|
}
|
|
setIssueColumns(visibleIssueColumns.filter((value) => value !== column));
|
|
}, [setIssueColumns, visibleIssueColumns]);
|
|
const updateIssueFilters = useCallback((patch: Partial<IssueFilterState>) => {
|
|
setIssueFilters((previous) => ({ ...previous, ...patch }));
|
|
}, []);
|
|
const updateGroupBy = useCallback((nextGroupBy: InboxWorkItemGroupBy) => {
|
|
setGroupBy(nextGroupBy);
|
|
saveInboxWorkItemGroupBy(nextGroupBy);
|
|
}, []);
|
|
|
|
const approveMutation = useMutation({
|
|
mutationFn: (id: string) => approvalsApi.approve(id),
|
|
onSuccess: (_approval, id) => {
|
|
setActionError(null);
|
|
queryClient.invalidateQueries({ queryKey: queryKeys.approvals.list(selectedCompanyId!) });
|
|
navigate(`/approvals/${id}?resolved=approved`);
|
|
},
|
|
onError: (err) => {
|
|
setActionError(err instanceof Error ? err.message : "Failed to approve");
|
|
},
|
|
});
|
|
|
|
const rejectMutation = useMutation({
|
|
mutationFn: (id: string) => approvalsApi.reject(id),
|
|
onSuccess: () => {
|
|
setActionError(null);
|
|
queryClient.invalidateQueries({ queryKey: queryKeys.approvals.list(selectedCompanyId!) });
|
|
},
|
|
onError: (err) => {
|
|
setActionError(err instanceof Error ? err.message : "Failed to reject");
|
|
},
|
|
});
|
|
|
|
const approveJoinMutation = useMutation({
|
|
mutationFn: (joinRequest: JoinRequest) =>
|
|
accessApi.approveJoinRequest(selectedCompanyId!, joinRequest.id),
|
|
onSuccess: () => {
|
|
setActionError(null);
|
|
queryClient.invalidateQueries({ queryKey: queryKeys.access.joinRequests(selectedCompanyId!) });
|
|
queryClient.invalidateQueries({ queryKey: queryKeys.sidebarBadges(selectedCompanyId!) });
|
|
queryClient.invalidateQueries({ queryKey: queryKeys.agents.list(selectedCompanyId!) });
|
|
queryClient.invalidateQueries({ queryKey: queryKeys.companies.all });
|
|
},
|
|
onError: (err) => {
|
|
setActionError(err instanceof Error ? err.message : "Failed to approve join request");
|
|
},
|
|
});
|
|
|
|
const rejectJoinMutation = useMutation({
|
|
mutationFn: (joinRequest: JoinRequest) =>
|
|
accessApi.rejectJoinRequest(selectedCompanyId!, joinRequest.id),
|
|
onSuccess: () => {
|
|
setActionError(null);
|
|
queryClient.invalidateQueries({ queryKey: queryKeys.access.joinRequests(selectedCompanyId!) });
|
|
queryClient.invalidateQueries({ queryKey: queryKeys.sidebarBadges(selectedCompanyId!) });
|
|
},
|
|
onError: (err) => {
|
|
setActionError(err instanceof Error ? err.message : "Failed to reject join request");
|
|
},
|
|
});
|
|
|
|
const [retryingRunIds, setRetryingRunIds] = useState<Set<string>>(new Set());
|
|
|
|
const retryRunMutation = useMutation({
|
|
mutationFn: async (run: HeartbeatRun) => {
|
|
const payload: Record<string, unknown> = {};
|
|
const context = run.contextSnapshot as Record<string, unknown> | null;
|
|
if (context) {
|
|
if (typeof context.issueId === "string" && context.issueId) payload.issueId = context.issueId;
|
|
if (typeof context.taskId === "string" && context.taskId) payload.taskId = context.taskId;
|
|
if (typeof context.taskKey === "string" && context.taskKey) payload.taskKey = context.taskKey;
|
|
}
|
|
const result = await agentsApi.wakeup(run.agentId, {
|
|
source: "on_demand",
|
|
triggerDetail: "manual",
|
|
reason: "retry_failed_run",
|
|
payload,
|
|
});
|
|
if (!("id" in result)) {
|
|
throw new Error(result.message ?? "Retry was skipped.");
|
|
}
|
|
return { newRun: result, originalRun: run };
|
|
},
|
|
onMutate: (run) => {
|
|
setRetryingRunIds((prev) => new Set(prev).add(run.id));
|
|
},
|
|
onSuccess: ({ newRun, originalRun }) => {
|
|
queryClient.invalidateQueries({ queryKey: queryKeys.heartbeats(originalRun.companyId) });
|
|
queryClient.invalidateQueries({ queryKey: queryKeys.heartbeats(originalRun.companyId, originalRun.agentId) });
|
|
navigate(`/agents/${originalRun.agentId}/runs/${newRun.id}`);
|
|
},
|
|
onSettled: (_data, _error, run) => {
|
|
if (!run) return;
|
|
setRetryingRunIds((prev) => {
|
|
const next = new Set(prev);
|
|
next.delete(run.id);
|
|
return next;
|
|
});
|
|
},
|
|
});
|
|
|
|
const [fadingOutIssues, setFadingOutIssues] = useState<Set<string>>(new Set());
|
|
const [showMarkAllReadConfirm, setShowMarkAllReadConfirm] = useState(false);
|
|
const [archivingIssueIds, setArchivingIssueIds] = useState<Set<string>>(new Set());
|
|
const [fadingNonIssueItems, setFadingNonIssueItems] = useState<Set<string>>(new Set());
|
|
const [archivingNonIssueIds, setArchivingNonIssueIds] = useState<Set<string>>(new Set());
|
|
const [selectedIndex, setSelectedIndex] = useState<number>(-1);
|
|
const listRef = useRef<HTMLDivElement>(null);
|
|
|
|
const invalidateInboxIssueQueries = () => {
|
|
if (!selectedCompanyId) return;
|
|
queryClient.invalidateQueries({ queryKey: queryKeys.issues.listMineByMe(selectedCompanyId) });
|
|
queryClient.invalidateQueries({ queryKey: queryKeys.issues.listTouchedByMe(selectedCompanyId) });
|
|
queryClient.invalidateQueries({ queryKey: queryKeys.issues.listUnreadTouchedByMe(selectedCompanyId) });
|
|
queryClient.invalidateQueries({ queryKey: queryKeys.sidebarBadges(selectedCompanyId) });
|
|
};
|
|
|
|
const archiveIssueMutation = useMutation({
|
|
mutationFn: (id: string) => issuesApi.archiveFromInbox(id),
|
|
onMutate: async (id) => {
|
|
setActionError(null);
|
|
setArchivingIssueIds((prev) => new Set(prev).add(id));
|
|
|
|
// Cancel in-flight refetches so they don't overwrite our optimistic update
|
|
const queryKeys_ = [
|
|
[...queryKeys.issues.listMineByMe(selectedCompanyId!), "with-routine-executions"],
|
|
[...queryKeys.issues.listTouchedByMe(selectedCompanyId!), "with-routine-executions"],
|
|
queryKeys.issues.listUnreadTouchedByMe(selectedCompanyId!),
|
|
];
|
|
await Promise.all(queryKeys_.map((qk) => queryClient.cancelQueries({ queryKey: qk })));
|
|
|
|
// Snapshot previous data for rollback
|
|
const previousData = queryKeys_.map((qk) => [qk, queryClient.getQueryData(qk)] as const);
|
|
|
|
// Optimistically remove the issue from all inbox query caches
|
|
for (const qk of queryKeys_) {
|
|
queryClient.setQueryData(qk, (old: unknown) => {
|
|
if (!Array.isArray(old)) return old;
|
|
return old.filter((issue: { id: string }) => issue.id !== id);
|
|
});
|
|
}
|
|
|
|
return { previousData };
|
|
},
|
|
onError: (err, id, context) => {
|
|
setActionError(err instanceof Error ? err.message : "Failed to archive issue");
|
|
setArchivingIssueIds((prev) => {
|
|
const next = new Set(prev);
|
|
next.delete(id);
|
|
return next;
|
|
});
|
|
// Restore previous query data on failure
|
|
if (context?.previousData) {
|
|
for (const [qk, data] of context.previousData) {
|
|
queryClient.setQueryData(qk, data);
|
|
}
|
|
}
|
|
},
|
|
onSettled: (_data, error, id) => {
|
|
// Clean up archiving state and refetch to sync with server
|
|
setArchivingIssueIds((prev) => {
|
|
const next = new Set(prev);
|
|
next.delete(id);
|
|
return next;
|
|
});
|
|
invalidateInboxIssueQueries();
|
|
},
|
|
});
|
|
|
|
const markReadMutation = useMutation({
|
|
mutationFn: (id: string) => issuesApi.markRead(id),
|
|
onMutate: (id) => {
|
|
setFadingOutIssues((prev) => new Set(prev).add(id));
|
|
},
|
|
onSuccess: () => {
|
|
invalidateInboxIssueQueries();
|
|
},
|
|
onSettled: (_data, _error, id) => {
|
|
setTimeout(() => {
|
|
setFadingOutIssues((prev) => {
|
|
const next = new Set(prev);
|
|
next.delete(id);
|
|
return next;
|
|
});
|
|
}, 300);
|
|
},
|
|
});
|
|
|
|
const markAllReadMutation = useMutation({
|
|
mutationFn: async (issueIds: string[]) => {
|
|
await Promise.all(issueIds.map((issueId) => issuesApi.markRead(issueId)));
|
|
},
|
|
onMutate: (issueIds) => {
|
|
setFadingOutIssues((prev) => {
|
|
const next = new Set(prev);
|
|
for (const issueId of issueIds) next.add(issueId);
|
|
return next;
|
|
});
|
|
},
|
|
onSuccess: () => {
|
|
invalidateInboxIssueQueries();
|
|
},
|
|
onSettled: (_data, _error, issueIds) => {
|
|
setTimeout(() => {
|
|
setFadingOutIssues((prev) => {
|
|
const next = new Set(prev);
|
|
for (const issueId of issueIds) next.delete(issueId);
|
|
return next;
|
|
});
|
|
}, 300);
|
|
},
|
|
});
|
|
|
|
const markUnreadMutation = useMutation({
|
|
mutationFn: (id: string) => issuesApi.markUnread(id),
|
|
onSuccess: () => {
|
|
invalidateInboxIssueQueries();
|
|
},
|
|
});
|
|
|
|
const handleMarkNonIssueRead = useCallback((key: string) => {
|
|
setFadingNonIssueItems((prev) => new Set(prev).add(key));
|
|
markItemRead(key);
|
|
setTimeout(() => {
|
|
setFadingNonIssueItems((prev) => {
|
|
const next = new Set(prev);
|
|
next.delete(key);
|
|
return next;
|
|
});
|
|
}, 300);
|
|
}, [markItemRead]);
|
|
|
|
const handleArchiveNonIssue = useCallback((key: string) => {
|
|
setArchivingNonIssueIds((prev) => new Set(prev).add(key));
|
|
setTimeout(() => {
|
|
if (key.startsWith("alert:")) {
|
|
dismissAlert(key);
|
|
} else {
|
|
dismissInboxItem(key);
|
|
}
|
|
setArchivingNonIssueIds((prev) => {
|
|
const next = new Set(prev);
|
|
next.delete(key);
|
|
return next;
|
|
});
|
|
}, 200);
|
|
}, [dismissAlert, dismissInboxItem]);
|
|
|
|
const nonIssueUnreadState = (key: string): NonIssueUnreadState => {
|
|
if (!canArchiveFromTab) return null;
|
|
const isRead = readItems.has(key);
|
|
const isFading = fadingNonIssueItems.has(key);
|
|
if (isFading) return "fading";
|
|
if (!isRead) return "visible";
|
|
return "hidden";
|
|
};
|
|
|
|
const getWorkItemKey = useCallback((item: InboxWorkItem): string => {
|
|
if (item.kind === "issue") return `issue:${item.issue.id}`;
|
|
if (item.kind === "approval") return `approval:${item.approval.id}`;
|
|
if (item.kind === "failed_run") return `run:${item.run.id}`;
|
|
return `join:${item.joinRequest.id}`;
|
|
}, []);
|
|
|
|
// Keep selection valid when the list shape changes, but do not auto-select on initial load.
|
|
useEffect(() => {
|
|
setSelectedIndex((prev) => resolveInboxSelectionIndex(prev, flatNavItems.length));
|
|
}, [flatNavItems.length]);
|
|
|
|
// Use refs for keyboard handler to avoid stale closures
|
|
const kbStateRef = useRef({
|
|
workItems: groupedSections,
|
|
flatNavItems,
|
|
selectedIndex,
|
|
canArchive: canArchiveFromTab,
|
|
archivingIssueIds,
|
|
archivingNonIssueIds,
|
|
fadingOutIssues,
|
|
readItems,
|
|
});
|
|
kbStateRef.current = {
|
|
workItems: groupedSections,
|
|
flatNavItems,
|
|
selectedIndex,
|
|
canArchive: canArchiveFromTab,
|
|
archivingIssueIds,
|
|
archivingNonIssueIds,
|
|
fadingOutIssues,
|
|
readItems,
|
|
};
|
|
|
|
const kbActionsRef = useRef({
|
|
archiveIssue: (id: string) => archiveIssueMutation.mutate(id),
|
|
archiveNonIssue: handleArchiveNonIssue,
|
|
markRead: (id: string) => markReadMutation.mutate(id),
|
|
markUnreadIssue: (id: string) => markUnreadMutation.mutate(id),
|
|
markNonIssueRead: handleMarkNonIssueRead,
|
|
markNonIssueUnread: markItemUnread,
|
|
navigate,
|
|
});
|
|
kbActionsRef.current = {
|
|
archiveIssue: (id: string) => archiveIssueMutation.mutate(id),
|
|
archiveNonIssue: handleArchiveNonIssue,
|
|
markRead: (id: string) => markReadMutation.mutate(id),
|
|
markUnreadIssue: (id: string) => markUnreadMutation.mutate(id),
|
|
markNonIssueRead: handleMarkNonIssueRead,
|
|
markNonIssueUnread: markItemUnread,
|
|
navigate,
|
|
};
|
|
|
|
// Keyboard shortcuts (mail-client style) — single stable listener using refs
|
|
useEffect(() => {
|
|
if (!keyboardShortcutsEnabled) return;
|
|
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
if (e.defaultPrevented) return;
|
|
|
|
// Don't capture when typing in inputs/textareas or with modifier keys
|
|
const target = e.target;
|
|
if (
|
|
!(target instanceof HTMLElement) ||
|
|
isKeyboardShortcutTextInputTarget(target) ||
|
|
hasBlockingShortcutDialog(document) ||
|
|
e.metaKey ||
|
|
e.ctrlKey ||
|
|
e.altKey
|
|
) {
|
|
return;
|
|
}
|
|
|
|
const st = kbStateRef.current;
|
|
const act = kbActionsRef.current;
|
|
|
|
// Keyboard shortcuts are only active on the "mine" tab
|
|
if (!st.canArchive) return;
|
|
|
|
const navItems = st.flatNavItems;
|
|
const navCount = navItems.length;
|
|
if (navCount === 0) return;
|
|
|
|
/** Resolve the nav entry at selectedIndex to an issue (for child entries) or work item. */
|
|
const resolveNavEntry = (idx: number): { issue?: Issue; item?: InboxWorkItem } => {
|
|
const entry = navItems[idx];
|
|
if (!entry) return {};
|
|
if (entry.type === "child") return { issue: entry.issue };
|
|
return { item: entry.item };
|
|
};
|
|
|
|
switch (e.key) {
|
|
case "j": {
|
|
e.preventDefault();
|
|
setSelectedIndex((prev) => getInboxKeyboardSelectionIndex(prev, navCount, "next"));
|
|
break;
|
|
}
|
|
case "k": {
|
|
e.preventDefault();
|
|
setSelectedIndex((prev) => getInboxKeyboardSelectionIndex(prev, navCount, "previous"));
|
|
break;
|
|
}
|
|
case "a":
|
|
case "y": {
|
|
if (st.selectedIndex < 0 || st.selectedIndex >= navCount) return;
|
|
e.preventDefault();
|
|
const { issue, item } = resolveNavEntry(st.selectedIndex);
|
|
if (issue) {
|
|
if (!st.archivingIssueIds.has(issue.id)) act.archiveIssue(issue.id);
|
|
} else if (item) {
|
|
if (item.kind === "issue") {
|
|
if (!st.archivingIssueIds.has(item.issue.id)) act.archiveIssue(item.issue.id);
|
|
} else {
|
|
const key = getWorkItemKey(item);
|
|
if (!st.archivingNonIssueIds.has(key)) act.archiveNonIssue(key);
|
|
}
|
|
}
|
|
break;
|
|
}
|
|
case "U": {
|
|
if (st.selectedIndex < 0 || st.selectedIndex >= navCount) return;
|
|
e.preventDefault();
|
|
const { issue, item } = resolveNavEntry(st.selectedIndex);
|
|
if (issue) {
|
|
act.markUnreadIssue(issue.id);
|
|
} else if (item) {
|
|
if (item.kind === "issue") act.markUnreadIssue(item.issue.id);
|
|
else act.markNonIssueUnread(getWorkItemKey(item));
|
|
}
|
|
break;
|
|
}
|
|
case "r": {
|
|
if (st.selectedIndex < 0 || st.selectedIndex >= navCount) return;
|
|
e.preventDefault();
|
|
const { issue, item } = resolveNavEntry(st.selectedIndex);
|
|
if (issue) {
|
|
if (issue.isUnreadForMe && !st.fadingOutIssues.has(issue.id)) act.markRead(issue.id);
|
|
} else if (item) {
|
|
if (item.kind === "issue") {
|
|
if (item.issue.isUnreadForMe && !st.fadingOutIssues.has(item.issue.id)) act.markRead(item.issue.id);
|
|
} else {
|
|
const key = getWorkItemKey(item);
|
|
if (!st.readItems.has(key)) act.markNonIssueRead(key);
|
|
}
|
|
}
|
|
break;
|
|
}
|
|
case "Enter": {
|
|
if (st.selectedIndex < 0 || st.selectedIndex >= navCount) return;
|
|
e.preventDefault();
|
|
const { issue, item } = resolveNavEntry(st.selectedIndex);
|
|
if (issue) {
|
|
const pathId = issue.identifier ?? issue.id;
|
|
const detailState = armIssueDetailInboxQuickArchive(withIssueDetailHeaderSeed(issueLinkState, issue));
|
|
rememberIssueDetailLocationState(pathId, detailState);
|
|
act.navigate(createIssueDetailPath(pathId), { state: detailState });
|
|
} else if (item) {
|
|
if (item.kind === "issue") {
|
|
const pathId = item.issue.identifier ?? item.issue.id;
|
|
const detailState = armIssueDetailInboxQuickArchive(
|
|
withIssueDetailHeaderSeed(issueLinkState, item.issue),
|
|
);
|
|
rememberIssueDetailLocationState(pathId, detailState);
|
|
act.navigate(createIssueDetailPath(pathId), { state: detailState });
|
|
} else if (item.kind === "approval") {
|
|
act.navigate(`/approvals/${item.approval.id}`);
|
|
} else if (item.kind === "failed_run") {
|
|
act.navigate(`/agents/${item.run.agentId}/runs/${item.run.id}`);
|
|
}
|
|
}
|
|
break;
|
|
}
|
|
default:
|
|
return;
|
|
}
|
|
};
|
|
window.addEventListener("keydown", handleKeyDown);
|
|
return () => window.removeEventListener("keydown", handleKeyDown);
|
|
}, [getWorkItemKey, issueLinkState, keyboardShortcutsEnabled]);
|
|
|
|
// Scroll selected item into view
|
|
useEffect(() => {
|
|
if (selectedIndex < 0 || !listRef.current) return;
|
|
const rows = listRef.current.querySelectorAll("[data-inbox-item]");
|
|
const row = rows[selectedIndex];
|
|
if (row) row.scrollIntoView({ block: "nearest" });
|
|
}, [selectedIndex]);
|
|
|
|
if (!selectedCompanyId) {
|
|
return <EmptyState icon={InboxIcon} message="Select a company to view inbox." />;
|
|
}
|
|
|
|
const hasRunFailures = failedRuns.length > 0;
|
|
const showAggregateAgentError =
|
|
!!dashboard &&
|
|
dashboard.agents.error > 0 &&
|
|
!hasRunFailures &&
|
|
!dismissedAlerts.has("alert:agent-errors");
|
|
const showBudgetAlert =
|
|
!!dashboard &&
|
|
dashboard.costs.monthBudgetCents > 0 &&
|
|
dashboard.costs.monthUtilizationPercent >= 80 &&
|
|
!dismissedAlerts.has("alert:budget");
|
|
const hasAlerts = showAggregateAgentError || showBudgetAlert;
|
|
const showWorkItemsSection = totalVisibleWorkItems > 0;
|
|
const showAlertsSection = shouldShowInboxSection({
|
|
tab,
|
|
hasItems: hasAlerts,
|
|
showOnMine: hasAlerts,
|
|
showOnRecent: hasAlerts,
|
|
showOnUnread: hasAlerts,
|
|
showOnAll: showAlertsCategory && hasAlerts,
|
|
});
|
|
|
|
const visibleSections = [
|
|
showAlertsSection ? "alerts" : null,
|
|
showWorkItemsSection ? "work_items" : null,
|
|
].filter((key): key is SectionKey => key !== null);
|
|
|
|
const allLoaded =
|
|
!isJoinRequestsLoading &&
|
|
!isApprovalsLoading &&
|
|
!isDashboardLoading &&
|
|
!isIssuesLoading &&
|
|
!isMineIssuesLoading &&
|
|
!isTouchedIssuesLoading &&
|
|
!isRunsLoading;
|
|
|
|
const showSeparatorBefore = (key: SectionKey) => visibleSections.indexOf(key) > 0;
|
|
const markAllReadIssues = (tab === "mine" ? visibleMineIssues : unreadTouchedIssues)
|
|
.filter((issue) => issue.isUnreadForMe && !fadingOutIssues.has(issue.id) && !archivingIssueIds.has(issue.id));
|
|
const unreadIssueIds = markAllReadIssues
|
|
.map((issue) => issue.id);
|
|
const canMarkAllRead = unreadIssueIds.length > 0;
|
|
const activeIssueFilterCount = countActiveIssueFilters(issueFilters, true);
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="space-y-2">
|
|
{/* Search — full-width row on mobile, inline on desktop */}
|
|
<div className="relative sm:hidden">
|
|
<Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
|
|
<Input
|
|
type="search"
|
|
placeholder="Search inbox…"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
className="h-8 w-full pl-8 text-xs"
|
|
/>
|
|
</div>
|
|
<div className="flex items-center justify-between gap-2">
|
|
<Tabs value={tab} onValueChange={(value) => navigate(`/inbox/${value}`)}>
|
|
<PageTabBar
|
|
items={[
|
|
{
|
|
value: "mine",
|
|
label: "Mine",
|
|
},
|
|
{
|
|
value: "recent",
|
|
label: "Recent",
|
|
},
|
|
{ value: "unread", label: "Unread" },
|
|
{ value: "all", label: "All" },
|
|
]}
|
|
/>
|
|
</Tabs>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<div className="relative hidden sm:block">
|
|
<Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
|
|
<Input
|
|
type="search"
|
|
placeholder="Search inbox…"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
className="h-8 w-[220px] pl-8 text-xs"
|
|
/>
|
|
</div>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="icon"
|
|
className={cn("hidden h-8 w-8 shrink-0 sm:inline-flex", nestingEnabled && "bg-accent")}
|
|
onClick={toggleNesting}
|
|
title={nestingEnabled ? "Disable parent-child nesting" : "Enable parent-child nesting"}
|
|
>
|
|
<ListTree className="h-3.5 w-3.5" />
|
|
</Button>
|
|
<IssueFiltersPopover
|
|
state={issueFilters}
|
|
onChange={updateIssueFilters}
|
|
activeFilterCount={activeIssueFilterCount}
|
|
agents={agents}
|
|
projects={projects?.map((project) => ({ id: project.id, name: project.name }))}
|
|
labels={labels?.map((label) => ({ id: label.id, name: label.name, color: label.color }))}
|
|
currentUserId={currentUserId}
|
|
enableRoutineVisibilityFilter
|
|
/>
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
className={cn("h-8 shrink-0 text-xs", groupBy !== "none" && "bg-accent")}
|
|
>
|
|
<Layers className="mr-1.5 h-3.5 w-3.5" />
|
|
Group
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent align="end" className="w-40 p-2">
|
|
<div className="space-y-0.5">
|
|
{([
|
|
["none", "None"],
|
|
["type", "Type"],
|
|
] as const).map(([value, label]) => (
|
|
<button
|
|
key={value}
|
|
type="button"
|
|
className={cn(
|
|
"flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-sm",
|
|
groupBy === value ? "bg-accent/50 text-foreground" : "text-muted-foreground hover:bg-accent/50",
|
|
)}
|
|
onClick={() => updateGroupBy(value)}
|
|
>
|
|
<span>{label}</span>
|
|
{groupBy === value ? <Check className="h-3.5 w-3.5" /> : null}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</PopoverContent>
|
|
</Popover>
|
|
<IssueColumnPicker
|
|
availableColumns={availableIssueColumns}
|
|
visibleColumnSet={visibleIssueColumnSet}
|
|
onToggleColumn={toggleIssueColumn}
|
|
onResetColumns={() => setIssueColumns(DEFAULT_INBOX_ISSUE_COLUMNS)}
|
|
title="Choose which inbox columns stay visible"
|
|
/>
|
|
{canMarkAllRead && (
|
|
<>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
className="h-8 shrink-0"
|
|
onClick={() => setShowMarkAllReadConfirm(true)}
|
|
disabled={markAllReadMutation.isPending}
|
|
>
|
|
{markAllReadMutation.isPending ? "Marking…" : "Mark all as read"}
|
|
</Button>
|
|
<Dialog open={showMarkAllReadConfirm} onOpenChange={setShowMarkAllReadConfirm}>
|
|
<DialogContent className="sm:max-w-md">
|
|
<DialogHeader>
|
|
<DialogTitle>Mark all as read?</DialogTitle>
|
|
<DialogDescription>
|
|
This will mark {unreadIssueIds.length} unread {unreadIssueIds.length === 1 ? "item" : "items"} as read.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => setShowMarkAllReadConfirm(false)}>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
onClick={() => {
|
|
setShowMarkAllReadConfirm(false);
|
|
markAllReadMutation.mutate(unreadIssueIds);
|
|
}}
|
|
>
|
|
Mark all as read
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{tab === "all" && (
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<Select
|
|
value={allCategoryFilter}
|
|
onValueChange={(value) => setAllCategoryFilter(value as InboxCategoryFilter)}
|
|
>
|
|
<SelectTrigger className="h-8 w-[170px] text-xs">
|
|
<SelectValue placeholder="Category" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="everything">All categories</SelectItem>
|
|
<SelectItem value="issues_i_touched">My recent issues</SelectItem>
|
|
<SelectItem value="join_requests">Join requests</SelectItem>
|
|
<SelectItem value="approvals">Approvals</SelectItem>
|
|
<SelectItem value="failed_runs">Failed runs</SelectItem>
|
|
<SelectItem value="alerts">Alerts</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
|
|
{showApprovalsCategory && (
|
|
<Select
|
|
value={allApprovalFilter}
|
|
onValueChange={(value) => setAllApprovalFilter(value as InboxApprovalFilter)}
|
|
>
|
|
<SelectTrigger className="h-8 w-[170px] text-xs">
|
|
<SelectValue placeholder="Approval status" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">All approval statuses</SelectItem>
|
|
<SelectItem value="actionable">Needs action</SelectItem>
|
|
<SelectItem value="resolved">Resolved</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{approvalsError && <p className="text-sm text-destructive">{approvalsError.message}</p>}
|
|
{actionError && <p className="text-sm text-destructive">{actionError}</p>}
|
|
|
|
{!allLoaded && visibleSections.length === 0 && (
|
|
<PageSkeleton variant="inbox" />
|
|
)}
|
|
|
|
{allLoaded && visibleSections.length === 0 && (
|
|
<EmptyState
|
|
icon={searchQuery.trim() ? Search : InboxIcon}
|
|
message={
|
|
searchQuery.trim()
|
|
? "No inbox items match your search."
|
|
: tab === "mine"
|
|
? "Inbox zero."
|
|
: tab === "unread"
|
|
? "No new inbox items."
|
|
: tab === "recent"
|
|
? "No recent inbox items."
|
|
: "No inbox items match these filters."
|
|
}
|
|
/>
|
|
)}
|
|
|
|
{showWorkItemsSection && (
|
|
<>
|
|
{showSeparatorBefore("work_items") && <Separator />}
|
|
<div>
|
|
<div ref={listRef} className="overflow-hidden rounded-xl border border-border bg-card">
|
|
{(() => {
|
|
// Pre-compute flat nav index for each top-level item and child issue.
|
|
let flatIdx = 0;
|
|
const topFlatIndex = new Map<string, number>();
|
|
const childFlatIndex = new Map<string, number>();
|
|
for (const group of groupedSections) {
|
|
for (const topItem of group.displayItems) {
|
|
const itemKey = `${group.key}:${getWorkItemKey(topItem)}`;
|
|
topFlatIndex.set(itemKey, flatIdx);
|
|
flatIdx++;
|
|
if (topItem.kind === "issue") {
|
|
const children = group.childrenByIssueId.get(topItem.issue.id);
|
|
const isExpanded = children?.length && !collapsedInboxParents.has(topItem.issue.id);
|
|
if (isExpanded) {
|
|
for (const child of children) {
|
|
childFlatIndex.set(child.id, flatIdx);
|
|
flatIdx++;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
const renderInboxIssue = ({
|
|
issue,
|
|
depth,
|
|
selected,
|
|
hasChildren = false,
|
|
isExpanded = false,
|
|
childCount = 0,
|
|
collapseParentId = null,
|
|
}: {
|
|
issue: Issue;
|
|
depth: number;
|
|
selected: boolean;
|
|
hasChildren?: boolean;
|
|
isExpanded?: boolean;
|
|
childCount?: number;
|
|
collapseParentId?: string | null;
|
|
}) => {
|
|
const isUnread = issue.isUnreadForMe && !fadingOutIssues.has(issue.id);
|
|
const isFading = fadingOutIssues.has(issue.id);
|
|
const isArchiving = archivingIssueIds.has(issue.id);
|
|
const project = issue.projectId ? projectById.get(issue.projectId) ?? null : null;
|
|
return (
|
|
<IssueRow
|
|
key={`issue:${issue.id}`}
|
|
issue={issue}
|
|
issueLinkState={issueLinkState}
|
|
selected={selected}
|
|
className={
|
|
isArchiving
|
|
? "pointer-events-none -translate-x-4 scale-[0.98] opacity-0 transition-all duration-200 ease-out"
|
|
: "transition-all duration-200 ease-out"
|
|
}
|
|
desktopMetaLeading={
|
|
<>
|
|
{nestingEnabled ? (
|
|
depth === 0 && hasChildren && collapseParentId ? (
|
|
<button
|
|
type="button"
|
|
className="hidden w-4 shrink-0 items-center justify-center sm:inline-flex"
|
|
onClick={(event) => {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
toggleInboxParentCollapse(collapseParentId);
|
|
}}
|
|
>
|
|
<ChevronRight className={cn("h-3.5 w-3.5 transition-transform", isExpanded && "rotate-90")} />
|
|
</button>
|
|
) : (
|
|
<span className="hidden w-4 shrink-0 sm:block" />
|
|
)
|
|
) : null}
|
|
{depth > 0 ? <span className="hidden w-4 shrink-0 sm:block" /> : null}
|
|
<InboxIssueMetaLeading
|
|
issue={issue}
|
|
isLive={liveIssueIds.has(issue.id)}
|
|
showStatus={visibleIssueColumnSet.has("status") && availableIssueColumnSet.has("status")}
|
|
showIdentifier={visibleIssueColumnSet.has("id") && availableIssueColumnSet.has("id")}
|
|
/>
|
|
</>
|
|
}
|
|
titleSuffix={hasChildren && !isExpanded && depth === 0 ? (
|
|
<span className="ml-1.5 text-xs text-muted-foreground">
|
|
({childCount} sub-task{childCount !== 1 ? "s" : ""})
|
|
</span>
|
|
) : undefined}
|
|
mobileMeta={issueActivityText(issue).toLowerCase()}
|
|
mobileLeading={
|
|
depth === 0 && hasChildren && collapseParentId ? (
|
|
<button
|
|
type="button"
|
|
onClick={(event) => {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
toggleInboxParentCollapse(collapseParentId);
|
|
}}
|
|
>
|
|
<ChevronRight className={cn("h-3.5 w-3.5 transition-transform", isExpanded && "rotate-90")} />
|
|
</button>
|
|
) : undefined
|
|
}
|
|
unreadState={isUnread ? "visible" : isFading ? "fading" : "hidden"}
|
|
onMarkRead={() => markReadMutation.mutate(issue.id)}
|
|
onArchive={canArchiveFromTab ? () => archiveIssueMutation.mutate(issue.id) : undefined}
|
|
archiveDisabled={isArchiving || archiveIssueMutation.isPending}
|
|
desktopTrailing={
|
|
visibleTrailingIssueColumns.length > 0 ? (
|
|
<InboxIssueTrailingColumns
|
|
issue={issue}
|
|
columns={visibleTrailingIssueColumns}
|
|
projectName={project?.name ?? null}
|
|
projectColor={project?.color ?? null}
|
|
workspaceName={resolveIssueWorkspaceName(issue, {
|
|
executionWorkspaceById,
|
|
projectWorkspaceById,
|
|
defaultProjectWorkspaceIdByProjectId,
|
|
})}
|
|
assigneeName={agentName(issue.assigneeAgentId)}
|
|
currentUserId={currentUserId}
|
|
parentIdentifier={issue.parentId ? (issueById.get(issue.parentId)?.identifier ?? null) : null}
|
|
parentTitle={issue.parentId ? (issueById.get(issue.parentId)?.title ?? null) : null}
|
|
/>
|
|
) : undefined
|
|
}
|
|
/>
|
|
);
|
|
};
|
|
|
|
let previousTimestamp = Number.POSITIVE_INFINITY;
|
|
return groupedSections.flatMap((group, groupIndex) => {
|
|
const elements: ReactNode[] = [];
|
|
if (group.label) {
|
|
elements.push(
|
|
<div
|
|
key={`group-${group.key}`}
|
|
className={cn(
|
|
"border-b border-border/70 bg-muted/30 px-4 py-2 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground",
|
|
groupIndex > 0 && "border-t border-border",
|
|
)}
|
|
>
|
|
{group.label}
|
|
</div>,
|
|
);
|
|
}
|
|
|
|
for (let index = 0; index < group.displayItems.length; index += 1) {
|
|
const item = group.displayItems[index]!;
|
|
const navIdx = topFlatIndex.get(`${group.key}:${getWorkItemKey(item)}`) ?? 0;
|
|
const wrapItem = (key: string, isSelected: boolean, child: ReactNode) => (
|
|
<div
|
|
key={`sel-${key}`}
|
|
data-inbox-item
|
|
className="relative"
|
|
onClick={() => setSelectedIndex(navIdx)}
|
|
>
|
|
{child}
|
|
</div>
|
|
);
|
|
const todayCutoff = Date.now() - 24 * 60 * 60 * 1000;
|
|
const showTodayDivider =
|
|
groupBy === "none" &&
|
|
item.timestamp > 0 &&
|
|
item.timestamp < todayCutoff &&
|
|
previousTimestamp >= todayCutoff;
|
|
previousTimestamp = item.timestamp > 0 ? item.timestamp : previousTimestamp;
|
|
if (showTodayDivider) {
|
|
elements.push(
|
|
<div key={`today-divider-${group.key}-${index}`} className="my-2 flex items-center gap-3 px-4">
|
|
<div className="flex-1 border-t border-zinc-600" />
|
|
<span className="shrink-0 text-[11px] font-medium uppercase tracking-wider text-zinc-500">
|
|
Earlier
|
|
</span>
|
|
</div>,
|
|
);
|
|
}
|
|
const isSelected = selectedIndex === navIdx;
|
|
|
|
if (item.kind === "approval") {
|
|
const approvalKey = `approval:${item.approval.id}`;
|
|
const isArchiving = archivingNonIssueIds.has(approvalKey);
|
|
const row = (
|
|
<ApprovalInboxRow
|
|
key={approvalKey}
|
|
approval={item.approval}
|
|
selected={isSelected}
|
|
requesterName={agentName(item.approval.requestedByAgentId)}
|
|
onApprove={() => approveMutation.mutate(item.approval.id)}
|
|
onReject={() => rejectMutation.mutate(item.approval.id)}
|
|
isPending={approveMutation.isPending || rejectMutation.isPending}
|
|
unreadState={nonIssueUnreadState(approvalKey)}
|
|
onMarkRead={() => handleMarkNonIssueRead(approvalKey)}
|
|
onArchive={canArchiveFromTab ? () => handleArchiveNonIssue(approvalKey) : undefined}
|
|
archiveDisabled={isArchiving}
|
|
className={
|
|
isArchiving
|
|
? "pointer-events-none -translate-x-4 scale-[0.98] opacity-0 transition-all duration-200 ease-out"
|
|
: "transition-all duration-200 ease-out"
|
|
}
|
|
/>
|
|
);
|
|
elements.push(wrapItem(approvalKey, isSelected, canArchiveFromTab ? (
|
|
<SwipeToArchive
|
|
key={approvalKey}
|
|
selected={isSelected}
|
|
disabled={isArchiving}
|
|
onArchive={() => handleArchiveNonIssue(approvalKey)}
|
|
>
|
|
{row}
|
|
</SwipeToArchive>
|
|
) : row));
|
|
continue;
|
|
}
|
|
|
|
if (item.kind === "failed_run") {
|
|
const runKey = `run:${item.run.id}`;
|
|
const isArchiving = archivingNonIssueIds.has(runKey);
|
|
const row = (
|
|
<FailedRunInboxRow
|
|
key={runKey}
|
|
run={item.run}
|
|
selected={isSelected}
|
|
issueById={issueById}
|
|
agentName={agentName(item.run.agentId)}
|
|
issueLinkState={issueLinkState}
|
|
onDismiss={() => dismissInboxItem(runKey)}
|
|
onRetry={() => retryRunMutation.mutate(item.run)}
|
|
isRetrying={retryingRunIds.has(item.run.id)}
|
|
unreadState={nonIssueUnreadState(runKey)}
|
|
onMarkRead={() => handleMarkNonIssueRead(runKey)}
|
|
onArchive={canArchiveFromTab ? () => handleArchiveNonIssue(runKey) : undefined}
|
|
archiveDisabled={isArchiving}
|
|
className={
|
|
isArchiving
|
|
? "pointer-events-none -translate-x-4 scale-[0.98] opacity-0 transition-all duration-200 ease-out"
|
|
: "transition-all duration-200 ease-out"
|
|
}
|
|
/>
|
|
);
|
|
elements.push(wrapItem(runKey, isSelected, canArchiveFromTab ? (
|
|
<SwipeToArchive
|
|
key={runKey}
|
|
selected={isSelected}
|
|
disabled={isArchiving}
|
|
onArchive={() => handleArchiveNonIssue(runKey)}
|
|
>
|
|
{row}
|
|
</SwipeToArchive>
|
|
) : row));
|
|
continue;
|
|
}
|
|
|
|
if (item.kind === "join_request") {
|
|
const joinKey = `join:${item.joinRequest.id}`;
|
|
const isArchiving = archivingNonIssueIds.has(joinKey);
|
|
const row = (
|
|
<JoinRequestInboxRow
|
|
key={joinKey}
|
|
joinRequest={item.joinRequest}
|
|
selected={isSelected}
|
|
onApprove={() => approveJoinMutation.mutate(item.joinRequest)}
|
|
onReject={() => rejectJoinMutation.mutate(item.joinRequest)}
|
|
isPending={approveJoinMutation.isPending || rejectJoinMutation.isPending}
|
|
unreadState={nonIssueUnreadState(joinKey)}
|
|
onMarkRead={() => handleMarkNonIssueRead(joinKey)}
|
|
onArchive={canArchiveFromTab ? () => handleArchiveNonIssue(joinKey) : undefined}
|
|
archiveDisabled={isArchiving}
|
|
className={
|
|
isArchiving
|
|
? "pointer-events-none -translate-x-4 scale-[0.98] opacity-0 transition-all duration-200 ease-out"
|
|
: "transition-all duration-200 ease-out"
|
|
}
|
|
/>
|
|
);
|
|
elements.push(wrapItem(joinKey, isSelected, canArchiveFromTab ? (
|
|
<SwipeToArchive
|
|
key={joinKey}
|
|
selected={isSelected}
|
|
disabled={isArchiving}
|
|
onArchive={() => handleArchiveNonIssue(joinKey)}
|
|
>
|
|
{row}
|
|
</SwipeToArchive>
|
|
) : row));
|
|
continue;
|
|
}
|
|
|
|
const issue = item.issue;
|
|
const childIssues = group.childrenByIssueId.get(issue.id) ?? [];
|
|
const hasChildren = childIssues.length > 0;
|
|
const isExpanded = hasChildren && !collapsedInboxParents.has(issue.id);
|
|
const parentRow = renderInboxIssue({
|
|
issue,
|
|
depth: 0,
|
|
selected: isSelected,
|
|
hasChildren,
|
|
isExpanded,
|
|
childCount: childIssues.length,
|
|
collapseParentId: issue.id,
|
|
});
|
|
|
|
elements.push(wrapItem(`issue:${issue.id}`, isSelected, canArchiveFromTab ? (
|
|
<SwipeToArchive
|
|
key={`issue:${issue.id}`}
|
|
selected={isSelected}
|
|
disabled={archivingIssueIds.has(issue.id) || archiveIssueMutation.isPending}
|
|
onArchive={() => archiveIssueMutation.mutate(issue.id)}
|
|
>
|
|
{parentRow}
|
|
</SwipeToArchive>
|
|
) : parentRow));
|
|
|
|
if (isExpanded) {
|
|
for (const child of childIssues) {
|
|
const childNavIdx = childFlatIndex.get(child.id) ?? -1;
|
|
const isChildSelected = selectedIndex === childNavIdx;
|
|
const childRow = renderInboxIssue({
|
|
issue: child,
|
|
depth: 1,
|
|
selected: isChildSelected,
|
|
});
|
|
const isChildArchiving = archivingIssueIds.has(child.id);
|
|
elements.push(
|
|
<div
|
|
key={`sel-issue:${child.id}`}
|
|
data-inbox-item
|
|
className="relative"
|
|
onClick={() => setSelectedIndex(childNavIdx)}
|
|
>
|
|
{canArchiveFromTab ? (
|
|
<SwipeToArchive
|
|
key={`issue:${child.id}`}
|
|
selected={isChildSelected}
|
|
disabled={isChildArchiving || archiveIssueMutation.isPending}
|
|
onArchive={() => archiveIssueMutation.mutate(child.id)}
|
|
>
|
|
{childRow}
|
|
</SwipeToArchive>
|
|
) : childRow}
|
|
</div>,
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
return elements;
|
|
});
|
|
})()}
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{showAlertsSection && (
|
|
<>
|
|
{showSeparatorBefore("alerts") && <Separator />}
|
|
<div>
|
|
<h3 className="mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground">
|
|
Alerts
|
|
</h3>
|
|
<div className="divide-y divide-border border border-border">
|
|
{showAggregateAgentError && (
|
|
<div className="group/alert relative flex items-center gap-3 px-4 py-3 transition-colors hover:bg-accent/50">
|
|
<Link
|
|
to="/agents"
|
|
className="flex flex-1 cursor-pointer items-center gap-3 no-underline text-inherit"
|
|
>
|
|
<AlertTriangle className="h-4 w-4 shrink-0 text-red-600 dark:text-red-400" />
|
|
<span className="text-sm">
|
|
<span className="font-medium">{dashboard!.agents.error}</span>{" "}
|
|
{dashboard!.agents.error === 1 ? "agent has" : "agents have"} errors
|
|
</span>
|
|
</Link>
|
|
<button
|
|
type="button"
|
|
onClick={() => dismissAlert("alert:agent-errors")}
|
|
className="rounded-md p-1 text-muted-foreground opacity-0 transition-opacity hover:bg-accent hover:text-foreground group-hover/alert:opacity-100"
|
|
aria-label="Dismiss"
|
|
>
|
|
<X className="h-3.5 w-3.5" />
|
|
</button>
|
|
</div>
|
|
)}
|
|
{showBudgetAlert && (
|
|
<div className="group/alert relative flex items-center gap-3 px-4 py-3 transition-colors hover:bg-accent/50">
|
|
<Link
|
|
to="/costs"
|
|
className="flex flex-1 cursor-pointer items-center gap-3 no-underline text-inherit"
|
|
>
|
|
<AlertTriangle className="h-4 w-4 shrink-0 text-yellow-400" />
|
|
<span className="text-sm">
|
|
Budget at{" "}
|
|
<span className="font-medium">{dashboard!.costs.monthUtilizationPercent}%</span>{" "}
|
|
utilization this month
|
|
</span>
|
|
</Link>
|
|
<button
|
|
type="button"
|
|
onClick={() => dismissAlert("alert:budget")}
|
|
className="rounded-md p-1 text-muted-foreground opacity-0 transition-opacity hover:bg-accent hover:text-foreground group-hover/alert:opacity-100"
|
|
aria-label="Dismiss"
|
|
>
|
|
<X className="h-3.5 w-3.5" />
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
</div>
|
|
);
|
|
}
|