Context MenuContext Menu

"use client";

import { ContextMenu, ContextMenuContent, ContextMenuHeader, ContextMenuItem, ContextMenuShortcut, ContextMenuTrigger } from "@/components/ui/notchset/context-menu";

export function RunRow({ runId, onOpenTrace, onDelete }: { runId: string; onOpenTrace: () => void; onDelete: () => void }) {
  return (
    <ContextMenu>
      <ContextMenuTrigger>
        {/* Focusable, so keyboard users reach it: Shift+F10 or the menu key opens the menu on it. */}
        <div tabIndex={0} aria-label={`Run ${runId}. Shift F10 for actions`} className="notchset-focus border px-3 py-2 font-mono text-xs">
          {runId} · PLANNER · 2.1S
        </div>
      </ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuHeader node="ok" meta="2.1S">
          {runId.toUpperCase()}
        </ContextMenuHeader>
        <ContextMenuItem onClick={onOpenTrace}>
          OPEN TRACE<ContextMenuShortcut>↵</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem variant="destructive" onClick={onDelete}>
          DELETE RUN
        </ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  );
}